added toggle switches
This commit is contained in:
parent
09caab1e59
commit
bfa0c65a98
12
popup.html
12
popup.html
|
@ -22,27 +22,27 @@
|
|||
</div>
|
||||
|
||||
<div id="settings-area">
|
||||
<div class="setting" id="setting-global">
|
||||
<div class="setting">
|
||||
<label class="switch">
|
||||
<input type="checkbox">
|
||||
<input type="checkbox" id="setting-global">
|
||||
<span class="slider round"></span>
|
||||
</label>
|
||||
|
||||
<span class="description">Enable Furikani</span>
|
||||
</div>
|
||||
|
||||
<div class="setting" id="setting-vocabulary">
|
||||
<div class="setting">
|
||||
<label class="switch">
|
||||
<input type="checkbox">
|
||||
<input type="checkbox" id="setting-vocabulary">
|
||||
<span class="slider round"></span>
|
||||
</label>
|
||||
|
||||
<span class="description">Use Vocabulary List</span>
|
||||
</div>
|
||||
|
||||
<div class="setting" id="setting-kanji">
|
||||
<div class="setting">
|
||||
<label class="switch">
|
||||
<input type="checkbox">
|
||||
<input type="checkbox" id="setting-kanji">
|
||||
<span class="slider round"></span>
|
||||
</label>
|
||||
|
||||
|
|
|
@ -1,10 +1,37 @@
|
|||
var vocabStyle = `
|
||||
.furikani-vocabulary {
|
||||
display: none;
|
||||
}
|
||||
`
|
||||
|
||||
var kanjiStyle = `
|
||||
.furikani-kanji {
|
||||
display: none;
|
||||
}
|
||||
`
|
||||
|
||||
var vocabStyleSheet = document.createElement("style")
|
||||
var kanjiStyleSheet = document.createElement("style")
|
||||
|
||||
document.head.appendChild(vocabStyleSheet)
|
||||
document.head.appendChild(kanjiStyleSheet)
|
||||
|
||||
// Get stored word list from chrome storage
|
||||
chrome.storage.local.get(["vocabulary", "kanji", "validUserLevel"], (data) => {
|
||||
chrome.storage.local.get(["vocabulary", "kanji", "validUserLevel", "enabled", "enabledVocab", "enabledKanji"], (data) => {
|
||||
// The users level is not valid, e.g. it exceeds the maximum allowed level
|
||||
// WaniKani requires that devs check if users are actually allowed to access content of this level
|
||||
if(!data.validUserLevel)
|
||||
return
|
||||
|
||||
if(data.enabled)
|
||||
{
|
||||
if(data.enabledVocab)
|
||||
vocabStyleSheet.innerHTML = vocabStyle
|
||||
|
||||
if(data.enabledKanji)
|
||||
kanjiStyleSheet.innerHTML = kanjiStyle
|
||||
}
|
||||
|
||||
const vocabulary = data.vocabulary
|
||||
const kanji = data.kanji
|
||||
|
||||
|
@ -32,17 +59,32 @@ chrome.storage.local.get(["vocabulary", "kanji", "validUserLevel"], (data) => {
|
|||
}
|
||||
|
||||
// If the contents of the <ruby> tag are in the word list, remove the <rt> tag
|
||||
if(vocabulary.includes(ruby.innerText) || kanji.includes(ruby.innerText))
|
||||
{
|
||||
var rtTag = rubyTags.item(tag).getElementsByTagName("rt").item(0)
|
||||
try
|
||||
{
|
||||
rtTag.parentNode.removeChild(rtTag)
|
||||
} catch(error)
|
||||
{
|
||||
console.error(error)
|
||||
console.log(rubyTags.item(tag))
|
||||
}
|
||||
}
|
||||
var rtTag = rubyTags.item(tag).getElementsByTagName("rt").item(0)
|
||||
if(vocabulary.includes(ruby.innerText))
|
||||
rtTag.classList.add("furikani-vocabulary")
|
||||
else if(kanji.includes(ruby.innerText))
|
||||
rtTag.classList.add("furikani-kanji")
|
||||
}
|
||||
})
|
||||
|
||||
chrome.runtime.onMessage.addListener((msg, sender, sendResponse) => {
|
||||
if(msg.action === "settingsUpdated")
|
||||
{
|
||||
chrome.storage.local.get(["enabled", "enabledVocab", "enabledKanji"], (data) => {
|
||||
console.log(data)
|
||||
|
||||
if(!data.enabled)
|
||||
{
|
||||
vocabStyleSheet.innerHTML = ""
|
||||
kanjiStyleSheet.innerHTML = ""
|
||||
|
||||
return
|
||||
}
|
||||
|
||||
vocabStyleSheet.innerHTML = data.enabledVocab ? vocabStyle : ""
|
||||
kanjiStyleSheet.innerHTML = data.enabledKanji ? kanjiStyle : ""
|
||||
})
|
||||
}
|
||||
|
||||
return true;
|
||||
})
|
49
src/popup.js
49
src/popup.js
|
@ -8,7 +8,7 @@ const vocabSetting = document.getElementById("setting-vocabulary")
|
|||
const kanjiSetting = document.getElementById("setting-kanji")
|
||||
|
||||
// Set popup content
|
||||
chrome.storage.local.get(["level", "token"], (data) => {
|
||||
chrome.storage.local.get(["level", "token", "enabled", "enabledVocab", "enabledKanji"], (data) => {
|
||||
if(data.token === undefined)
|
||||
{
|
||||
statusField.innerHTML = String.fromCodePoint(0x2757)
|
||||
|
@ -36,6 +36,10 @@ chrome.storage.local.get(["level", "token"], (data) => {
|
|||
submitButton.classList.remove("new-token")
|
||||
}
|
||||
})
|
||||
|
||||
globalSetting.checked = data.enabled
|
||||
vocabSetting.checked = data.enabledVocab
|
||||
kanjiSetting.checked = data.enabledKanji
|
||||
})
|
||||
|
||||
// Set the wanikani token
|
||||
|
@ -64,4 +68,47 @@ submitButton.addEventListener( "click", () => {
|
|||
errorField.innerHTML = response.error
|
||||
}
|
||||
})
|
||||
})
|
||||
|
||||
// Set settings event listeners
|
||||
globalSetting.addEventListener("change", () => {
|
||||
chrome.storage.local.set({"enabled": globalSetting.checked})
|
||||
|
||||
if(!globalSetting.checked)
|
||||
{
|
||||
vocabSetting.checked = false
|
||||
kanjiSetting.checked = false
|
||||
|
||||
vocabSetting.setAttribute("disabled", true)
|
||||
kanjiSetting.setAttribute("disabled", true)
|
||||
}
|
||||
else
|
||||
{
|
||||
chrome.storage.local.get(["enabledVocab", "enabledKanji"], (data) => {
|
||||
vocabSetting.checked = data.enabledVocab
|
||||
kanjiSetting.checked = data.enabledKanji
|
||||
})
|
||||
|
||||
vocabSetting.removeAttribute("disabled")
|
||||
kanjiSetting.removeAttribute("disabled")
|
||||
}
|
||||
|
||||
chrome.tabs.query({active: true, currentWindow: true}, (tabs) => {
|
||||
chrome.tabs.sendMessage(tabs[0].id, {action: "settingsUpdated"}, (r) => {})
|
||||
})
|
||||
|
||||
})
|
||||
|
||||
vocabSetting.addEventListener("change", () => {
|
||||
chrome.storage.local.set({"enabledVocab": vocabSetting.checked})
|
||||
chrome.tabs.query({active: true, currentWindow: true}, (tabs) => {
|
||||
chrome.tabs.sendMessage(tabs[0].id, {action: "settingsUpdated"}, (r) => {})
|
||||
})
|
||||
})
|
||||
|
||||
kanjiSetting.addEventListener("change", () => {
|
||||
chrome.storage.local.set({"enabledKanji": kanjiSetting.checked})
|
||||
chrome.tabs.query({active: true, currentWindow: true}, (tabs) => {
|
||||
chrome.tabs.sendMessage(tabs[0].id, {action: "settingsUpdated"}, (r) => {})
|
||||
})
|
||||
})
|
Loading…
Reference in a new issue