diff options
Diffstat (limited to 'src/pages/options')
-rw-r--r-- | src/pages/options/index.html | 38 | ||||
-rw-r--r-- | src/pages/options/widgets/general.ejs | 4 | ||||
-rw-r--r-- | src/pages/options/widgets/general.js | 47 |
3 files changed, 46 insertions, 43 deletions
diff --git a/src/pages/options/index.html b/src/pages/options/index.html index 5421bb81..d79da014 100644 --- a/src/pages/options/index.html +++ b/src/pages/options/index.html @@ -116,7 +116,7 @@ </div> <div id="network-fallback"> <div class="some-block option-block"> - <h4 data-localise="__MSG_networkFallback__">Fallback to normal if no instances are available for the current network</h4> + <h4 data-localise="__MSG_networkFallback__">Fallback to clearnet if no instances are available for the current network</h4> <input id="network-fallback-checkbox" type="checkbox"> </div> </div> @@ -182,56 +182,56 @@ <div> <div> <img src="../../../assets/images/youtube-icon.png"> - <x data-localise="__MSG_youtube__">Youtube</x> + <x data-localise="__MSG_youtube__" label="youtube">Youtube</x> </div> <input id="youtube" type="checkbox"> </div> <div> <div> <img src="../../../assets/images/youtubeMusic-icon.png"> - <x data-localise="__MSG_youtubeMusic__">YT Music</x> + <x data-localise="__MSG_youtubeMusic__" label="youtubeMusic">YT Music</x> </div> <input id="youtubeMusic" type="checkbox"> </div> <div> <div> <img src="../../../assets/images/twitter-icon.png"> - <x data-localise="__MSG_twitter__">Twitter</x> + <x data-localise="__MSG_twitter__" label="twitter">Twitter</x> </div> <input id="twitter" type="checkbox"> </div> <div> <div> <img src="../../../assets/images/instagram-icon.png"> - <x data-localise="__MSG_instagram__">Instagram</x> + <x data-localise="__MSG_instagram__" label="instagram">Instagram</x> </div> <input id="instagram" type="checkbox"> </div> <div> <div> <img src="../../../assets/images/tiktok-icon.png"> - <x data-localise="__MSG_tiktok__">TikTok</x> + <x data-localise="__MSG_tiktok__" label="tiktok">TikTok</x> </div> <input id="tiktok" type="checkbox"> </div> <div> <div> <img src="../../../assets/images/reddit-icon.png"> - <x data-localise="__MSG_reddit__">Reddit</x> + <x data-localise="__MSG_reddit__" label="reddit">Reddit</x> </div> <input id="reddit" type="checkbox"> </div> <div> <div> <img src="../../../assets/images/imgur-icon.png"> - <x data-localise="__MSG_imgur__">Imgur</x> + <x data-localise="__MSG_imgur__" label="imgur">Imgur</x> </div> <input id="imgur" type="checkbox"> </div> <div> <div> <img src="../../../assets/images/wikipedia-icon.svg"> - <x data-localise="__MSG_wikipedia__">Wikipedia</x> + <x data-localise="__MSG_wikipedia__" label="wikipedia">Wikipedia</x> </div> <input id="wikipedia" type="checkbox"> </div> @@ -243,42 +243,42 @@ <ellipse cx="1682" cy="502" rx="88" ry="424"></ellipse> </svg> - <x data-localise="__MSG_medium__">Medium</x> + <x data-localise="__MSG_medium__" label="medium">Medium</x> </div> <input id="medium" type="checkbox"> </div> <div> <div> <img src="../../../assets/images/quora-icon.png"> - <x data-localise="__MSG_quora__">Quora</x> + <x data-localise="__MSG_quora__" label="quora">Quora</x> </div> <input id="quora" type="checkbox"> </div> <div> <div> <img src="../../../assets/images/imdb-icon.svg"> - <x data-localise="__MSG_imdb__">IMDb</x> + <x data-localise="__MSG_imdb__" label="imdb">IMDb</x> </div> <input id="imdb" type="checkbox"> </div> <div> <div> <img src="../../../assets/images/reuters-icon.svg"> - <x data-localise="__MSG_reuters__">Reuters</x> + <x data-localise="__MSG_reuters__" label="reuters">Reuters</x> </div> <input id="reuters" type="checkbox"> </div> <div> <div> <img src="../../../assets/images/peertube-icon.svg"> - <x data-localise="__MSG_peertube__">PeerTube</x> + <x data-localise="__MSG_peertube__" label="peertube">PeerTube</x> </div> <input id="peertube" type="checkbox"> </div> <div> <div> <img src="../../../assets/images/lbry-icon.png"> - <x data-localise="__MSG_lbry__">LBRY</x> + <x data-localise="__MSG_lbry__" label="lbry">LBRY</x> </div> <input id="lbry" type="checkbox"> </div> @@ -288,7 +288,7 @@ <path d="M15.5 14h-.79l-.28-.27C15.41 12.59 16 11.11 16 9.5 16 5.91 13.09 3 9.5 3S3 5.91 3 9.5 5.91 16 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z"></path> </svg> - <x data-localise="__MSG_search__">Search</x> + <x data-localise="__MSG_search__" label="search">Search</x> </div> <input id="search" type="checkbox"> </div> @@ -298,7 +298,7 @@ <path d="M12.87 15.07l-2.54-2.51.03-.03c1.74-1.94 2.98-4.17 3.71-6.53H17V4h-7V2H8v2H1v1.99h11.17C11.5 7.92 10.44 9.75 9 11.35 8.07 10.32 7.3 9.19 6.69 8h-2c.73 1.63 1.73 3.17 2.98 4.56l-5.09 5.02L4 19l5-5 3.11 3.11.76-2.04zM18.5 10h-2L12 22h2l1.12-3h4.75L21 22h2l-4.5-12zm-2.62 7l1.62-4.33L19.12 17h-3.24z"></path> </svg> - <x data-localise="__MSG_translate__">Translate</x> + <x data-localise="__MSG_translate__" label="translate">Translate</x> </div> <input id="translate" type="checkbox"> </div> @@ -308,7 +308,7 @@ <path d="M20.5 3l-.16.03L15 5.1 9 3 3.36 4.9c-.21.07-.36.25-.36.48V20.5c0 .28.22.5.5.5l.16-.03L9 18.9l6 2.1 5.64-1.9c.21-.07.36-.25.36-.48V3.5c0-.28-.22-.5-.5-.5zM10 5.47l4 1.4v11.66l-4-1.4V5.47zm-5 .99l3-1.01v11.7l-3 1.16V6.46zm14 11.08l-3 1.01V6.86l3-1.16v11.84z"></path> </svg> - <x data-localise="__MSG_maps__">Maps</x> + <x data-localise="__MSG_maps__" label="maps">Maps</x> </div> <input id="maps" type="checkbox"> </div> @@ -318,7 +318,7 @@ <path d="M19.35 10.04C18.67 6.59 15.64 4 12 4 9.11 4 6.6 5.64 5.35 8.04 2.34 8.36 0 10.91 0 14c0 3.31 2.69 6 6 6h13c2.76 0 5-2.24 5-5 0-2.64-2.05-4.78-4.65-4.96zM14 13v4h-4v-4H7l5-5 5 5h-3z"></path> </svg> - <x data-localise="__MSG_sendFiles__">Send Files</x> + <x data-localise="__MSG_sendFiles__" label="sendFiles">Send Files</x> </div> <input id="sendFiles" type="checkbox"> </div> diff --git a/src/pages/options/widgets/general.ejs b/src/pages/options/widgets/general.ejs index 8f7ab029..77028ac2 100644 --- a/src/pages/options/widgets/general.ejs +++ b/src/pages/options/widgets/general.ejs @@ -21,7 +21,7 @@ </div> <div id="network-fallback"> <div class="some-block option-block"> - <h4 data-localise="__MSG_networkFallback__">Fallback to normal if no instances are available for the current network</h4> + <h4 data-localise="__MSG_networkFallback__">Fallback to clearnet if no instances are available for the current network</h4> <input id="network-fallback-checkbox" type="checkbox"> </div> </div> @@ -92,7 +92,7 @@ <% } else { _%> <%- include ('src/assets/images/' + service + '-icon.svg') %> <% } _%> - <x data-localise="__MSG_<%= service %>__"><%= config.services[service].name %></x> + <x data-localise="__MSG_<%= service %>__" label="<%= service %>"><%= config.services[service].name %></x> </div> <input id="<%= service %>" type="checkbox"> </div> diff --git a/src/pages/options/widgets/general.js b/src/pages/options/widgets/general.js index 92632f23..a58ca3e6 100644 --- a/src/pages/options/widgets/general.js +++ b/src/pages/options/widgets/general.js @@ -28,7 +28,7 @@ async function getConfig() { }) } -function setOption(option, multiChoice, event) { +function setOption(option, type, event) { browser.storage.local.get("options", r => { let options = r.options browser.storage.local.set({ options }) @@ -36,13 +36,15 @@ function setOption(option, multiChoice, event) { browser.storage.local.get("options", r => { let options = r.options - if (multiChoice) { + if (type == "select") { options[option] = event.target.options[event.target.options.selectedIndex].value - } else { + } else if (type == "checkbox") { options[option] = event.target.checked + } else if (type == "range") { + options[option] = event.target.value } + browser.storage.local.set({ options }) - location.reload() }) } @@ -120,30 +122,30 @@ resetSettings.addEventListener("click", async () => { let autoRedirectElement = document.getElementById("auto-redirect") autoRedirectElement.addEventListener("change", event => { - setOption("autoRedirect", false, event) + setOption("autoRedirect", "checkbox", event) }) let themeElement = document.getElementById("theme") themeElement.addEventListener("change", event => { - setOption("theme", true, event) + setOption("theme", "select", event) location.reload() }) let networkElement = document.getElementById("network") networkElement.addEventListener("change", event => { - setOption("network", true, event) + setOption("network", "select", event) location.reload() }) let networkFallbackCheckbox = document.getElementById("network-fallback-checkbox") networkFallbackCheckbox.addEventListener("change", event => { - setOption("networkFallback", false, event) + setOption("networkFallback", "checkbox", event) }) let latencyOutput = document.getElementById("latency-output") let latencyInput = document.getElementById("latency-input") latencyInput.addEventListener("change", event => { - setOption("latencyThreshold", false, event) + setOption("latencyThreshold", "range", event) }) latencyInput.addEventListener("input", event => { latencyOutput.value = event.target.value @@ -153,18 +155,19 @@ let nameCustomInstanceInput = document.getElementById("exceptions-custom-instanc let instanceTypeElement = document.getElementById("exceptions-custom-instance-type") let instanceType = "url" -let popupServices - await getConfig() for (const service in config.services) { document.getElementById(service).addEventListener("change", event => { - if (event.target.checked && !popupServices.includes(service)) popupServices.push(service) - else if (popupServices.includes(service)) { - var index = popupServices.indexOf(service) - if (index !== -1) popupServices.splice(index, 1) - } - browser.storage.local.set({ popupServices }) + browser.storage.local.get("options", r => { + let options = r.options + if (event.target.checked && !options.popupServices.includes(service)) options.popupServices.push(service) + else if (options.popupServices.includes(service)) { + var index = options.popupServices.indexOf(service) + if (index !== -1) options.popupServices.splice(index, 1) + } + browser.storage.local.set({ options }) + }) }) } // const firstPartyIsolate = document.getElementById('firstPartyIsolate'); @@ -176,13 +179,14 @@ browser.storage.local.get("options", r => { networkElement.value = r.options.network networkFallbackCheckbox.checked = r.options.networkFallback latencyOutput.value = r.options.latencyThreshold + let options = r.options // firstPartyIsolate.checked = r.firstPartyIsolate; - let networkFallbackElement = document.getElementById("network-fallback") + //let networkFallbackElement = document.getElementById("network-fallback") if (networkElement.value == "clearnet") { - networkFallbackElement.style.display = "none" + networkFallbackCheckbox.disabled = true } else { - networkFallbackElement.style.display = "block" + networkFallbackCheckbox.disabled = false } instanceTypeElement.addEventListener("change", event => { @@ -251,6 +255,5 @@ browser.storage.local.get("options", r => { calcExceptionsCustomInstances() }) - popupServices = r.options.popupServices - for (const service in config.services) document.getElementById(service).checked = popupServices.includes(service) + for (const service in config.services) document.getElementById(service).checked = options.popupServices.includes(service) }) |