added toggle switches

This commit is contained in:
Lauchmelder 2022-03-20 17:13:22 +01:00
parent 09caab1e59
commit bfa0c65a98
No known key found for this signature in database
GPG key ID: C2403C69D78F011D
3 changed files with 109 additions and 20 deletions

View file

@ -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>

View file

@ -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;
})

View file

@ -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) => {})
})
})