diff options
Diffstat (limited to 'src/pages/options')
| -rw-r--r-- | src/pages/options/index.js | 617 | ||||
| -rw-r--r-- | src/pages/options/init.js | 66 | ||||
| -rw-r--r-- | src/pages/options/widgets/general.js | 276 |
3 files changed, 483 insertions, 476 deletions
diff --git a/src/pages/options/index.js b/src/pages/options/index.js index 62708f7b..8d5676e0 100644 --- a/src/pages/options/index.js +++ b/src/pages/options/index.js @@ -1,19 +1,19 @@ import utils from "../../assets/javascripts/utils.js" let config, - options, - blacklist, - redirects, - divs = {} + options, + blacklist, + redirects, + divs = {} for (const a of document.getElementById("links").getElementsByTagName("a")) { - if (!a.href.includes("https://")) { - a.addEventListener("click", e => { - const path = a.getAttribute("href").replace("#", "") - loadPage(path) - e.preventDefault() - }) - } + if (!a.href.includes("https://")) { + a.addEventListener("click", e => { + const path = a.getAttribute("href").replace("#", "") + loadPage(path) + e.preventDefault() + }) + } } config = await utils.getConfig() @@ -23,180 +23,180 @@ options = await utils.getOptions() * @param {string} service */ async function changeFrontendsSettings(service) { - options = await utils.getOptions() - const opacityDiv = document.getElementById(`${service}-opacity`) - if (document.getElementById(`${service}-enabled`).checked) { - opacityDiv.style.pointerEvents = 'auto' - opacityDiv.style.opacity = 1 - opacityDiv.style.userSelect = 'auto' - } else { - opacityDiv.style.pointerEvents = 'none' - opacityDiv.style.opacity = 0.4 - opacityDiv.style.userSelect = 'none' - } - for (const frontend in config.services[service].frontends) { - if (config.services[service].frontends[frontend].instanceList) { - const frontendDiv = document.getElementById(frontend) - if (typeof divs[service].frontend !== "undefined") { - if ( - frontend == divs[service].frontend.value - || - (config.services[service].frontends[divs[service].frontend.value].desktopApp && divs[service].embedFrontend && frontend == divs[service].embedFrontend.value) - ) { - frontendDiv.style.display = "" - if (config.services[service].frontends[frontend].localhost === true) { - document.getElementById(`${service}-instance-div`).style.display = "" - - if (options[service].instance == "localhost") { - frontendDiv.style.display = "none" - } - } else { - document.getElementById(`${service}-instance-div`).style.display = "none" - } - } else { - frontendDiv.style.display = "none" - } - } - } - } - if (document.getElementById(`${service}-redirectType`)) { - const frontend = options[service].frontend - if (config.services[service].frontends[frontend].embeddable) { - document.getElementById(`${service}-redirectType`).innerHTML = ` + options = await utils.getOptions() + const opacityDiv = document.getElementById(`${service}-opacity`) + if (document.getElementById(`${service}-enabled`).checked) { + opacityDiv.style.pointerEvents = "auto" + opacityDiv.style.opacity = 1 + opacityDiv.style.userSelect = "auto" + } else { + opacityDiv.style.pointerEvents = "none" + opacityDiv.style.opacity = 0.4 + opacityDiv.style.userSelect = "none" + } + for (const frontend in config.services[service].frontends) { + if (config.services[service].frontends[frontend].instanceList) { + const frontendDiv = document.getElementById(frontend) + if (typeof divs[service].frontend !== "undefined") { + if ( + frontend == divs[service].frontend.value || + (config.services[service].frontends[divs[service].frontend.value].desktopApp && + divs[service].embedFrontend && + frontend == divs[service].embedFrontend.value) + ) { + frontendDiv.style.display = "" + if (config.services[service].frontends[frontend].localhost === true) { + document.getElementById(`${service}-instance-div`).style.display = "" + + if (options[service].instance == "localhost") { + frontendDiv.style.display = "none" + } + } else { + document.getElementById(`${service}-instance-div`).style.display = "none" + } + } else { + frontendDiv.style.display = "none" + } + } + } + } + if (document.getElementById(`${service}-redirectType`)) { + const frontend = options[service].frontend + if (config.services[service].frontends[frontend].embeddable) { + document.getElementById(`${service}-redirectType`).innerHTML = ` <option value="both" data-localise="__MSG_both__">both</options> <option value="sub_frame" data-localise="__MSG_onlyEmbedded__">Only Embedded</option> <option value="main_frame" data-localise="__MSG_onlyNotEmbedded__">Only Not Embedded</option> ` - } - else if (config.services[service].frontends[frontend].desktopApp && Object.values(config.services[service].frontends).some(frontend => frontend.embeddable)) { - document.getElementById(`${service}-redirectType`).innerHTML = ` + } else if ( + config.services[service].frontends[frontend].desktopApp && + Object.values(config.services[service].frontends).some(frontend => frontend.embeddable) + ) { + document.getElementById(`${service}-redirectType`).innerHTML = ` <option value="both" data-localise="__MSG_both__">both</options> <option value="main_frame" data-localise="__MSG_onlyNotEmbedded__">Only Not Embedded</option> ` - if (options[service].redirectType == "sub_frame") { - options[service].redirectType = "main_frame" - browser.storage.local.set({ options }) - } - } else { - document.getElementById(`${service}-redirectType`).innerHTML = - '<option value="main_frame" data-localise="__MSG_onlyNotEmbedded__">Only Not Embedded</option>' - options[service].redirectType = "main_frame" - - browser.storage.local.set({ options }) - } - document.getElementById(`${service}-redirectType`).value = options[service].redirectType - if (config.services[service].frontends[frontend].desktopApp && options[service].redirectType != "main_frame") { - document.getElementById(`${service}-embedFrontend-div`).style.display = '' - document.getElementById(divs[service].embedFrontend.value).style.display = '' - } - else if (config.services[service].frontends[frontend].desktopApp && options[service].redirectType == "main_frame") { - document.getElementById(`${service}-embedFrontend-div`).style.display = 'none' - document.getElementById(divs[service].embedFrontend.value).style.display = 'none' - } else { - document.getElementById(`${service}-embedFrontend-div`).style.display = 'none' - } - } - const frontend_name_element = document.getElementById(`${service}_page`).getElementsByClassName("frontend_name")[0] - frontend_name_element.href = config.services[service].frontends[divs[service].frontend.value].url + if (options[service].redirectType == "sub_frame") { + options[service].redirectType = "main_frame" + browser.storage.local.set({ options }) + } + } else { + document.getElementById(`${service}-redirectType`).innerHTML = + '<option value="main_frame" data-localise="__MSG_onlyNotEmbedded__">Only Not Embedded</option>' + options[service].redirectType = "main_frame" + + browser.storage.local.set({ options }) + } + document.getElementById(`${service}-redirectType`).value = options[service].redirectType + if (config.services[service].frontends[frontend].desktopApp && options[service].redirectType != "main_frame") { + document.getElementById(`${service}-embedFrontend-div`).style.display = "" + document.getElementById(divs[service].embedFrontend.value).style.display = "" + } else if ( + config.services[service].frontends[frontend].desktopApp && + options[service].redirectType == "main_frame" + ) { + document.getElementById(`${service}-embedFrontend-div`).style.display = "none" + document.getElementById(divs[service].embedFrontend.value).style.display = "none" + } else { + document.getElementById(`${service}-embedFrontend-div`).style.display = "none" + } + } + const frontend_name_element = document.getElementById(`${service}_page`).getElementsByClassName("frontend_name")[0] + frontend_name_element.href = config.services[service].frontends[divs[service].frontend.value].url } /** * @param {string} path */ async function loadPage(path) { - options = await utils.getOptions() - for (const section of document.getElementById("pages").getElementsByTagName("section")) section.style.display = "none" - document.getElementById(`${path}_page`).style.display = "block" - - for (const element of document.getElementsByClassName("title")) { - const a = element.getElementsByTagName('a')[0] - if (a.getAttribute("href") == `#${path}`) { - element.classList.add("selected") - } else { - element.classList.remove("selected") - } - } - - for (const service in config.services) { - if (options[service].enabled) { - document.getElementById(`${service}-link`).style.opacity = 1 - } else { - document.getElementById(`${service}-link`).style.opacity = 0.4 - } - } - - window.history.pushState({ id: "100" }, "Page 2", `/pages/options/index.html#${path}`) - - if (path != 'general') { - const service = path; - divs[service] = {} - for (const option in config.services[service].options) { - divs[service][option] = document.getElementById(`${service}-${option}`) - if (typeof config.services[service].options[option] == "boolean") divs[service][option].checked = options[service][option] - else divs[service][option].value = options[service][option] - divs[service][option].addEventListener("change", async () => { - let options = await utils.getOptions() - if (typeof config.services[service].options[option] == "boolean") - options[service][option] = divs[service][option].checked - else - options[service][option] = divs[service][option].value - browser.storage.local.set({ options }) - changeFrontendsSettings(service) - }) - } - changeFrontendsSettings(service) - - blacklist = await utils.getBlacklist(options) - redirects = await utils.getList(options) - for (const frontend in config.services[service].frontends) { - if (config.services[service].frontends[frontend].instanceList) { - if (redirects == 'disabled' || blacklist == 'disabled') { - document.getElementById(frontend).getElementsByClassName('clearnet')[0].style.display = 'none' - document.getElementById(frontend).getElementsByClassName('ping')[0].style.display = 'none' - } - else if (!redirects || !blacklist) { - document.getElementById(frontend) - .getElementsByClassName('clearnet')[0] - .getElementsByClassName("checklist")[0] - .getElementsByClassName('loading')[0] - .innerHTML = 'Could not fetch instances.' - } - else { - createList(frontend) - } - } - } - - for (const frontend in config.services[service].frontends) { - if (config.services[service].frontends[frontend].instanceList) { - processCustomInstances(frontend) - document.getElementById(`ping-${frontend}`).addEventListener("click", async () => { - document.getElementById(`ping-${frontend}`).getElementsByTagName('x')[0].innerHTML = "Pinging..." - await ping(frontend) - document.getElementById(`ping-${frontend}`).getElementsByTagName('x')[0].innerHTML = "Ping instances" - }) - } - } - } + options = await utils.getOptions() + for (const section of document.getElementById("pages").getElementsByTagName("section")) section.style.display = "none" + document.getElementById(`${path}_page`).style.display = "block" + + for (const element of document.getElementsByClassName("title")) { + const a = element.getElementsByTagName("a")[0] + if (a.getAttribute("href") == `#${path}`) { + element.classList.add("selected") + } else { + element.classList.remove("selected") + } + } + + for (const service in config.services) { + if (options[service].enabled) { + document.getElementById(`${service}-link`).style.opacity = 1 + } else { + document.getElementById(`${service}-link`).style.opacity = 0.4 + } + } + + window.history.pushState({ id: "100" }, "Page 2", `/pages/options/index.html#${path}`) + + if (path != "general") { + const service = path + divs[service] = {} + for (const option in config.services[service].options) { + divs[service][option] = document.getElementById(`${service}-${option}`) + if (typeof config.services[service].options[option] == "boolean") + divs[service][option].checked = options[service][option] + else divs[service][option].value = options[service][option] + divs[service][option].addEventListener("change", async () => { + let options = await utils.getOptions() + if (typeof config.services[service].options[option] == "boolean") + options[service][option] = divs[service][option].checked + else options[service][option] = divs[service][option].value + browser.storage.local.set({ options }) + changeFrontendsSettings(service) + }) + } + changeFrontendsSettings(service) + + blacklist = await utils.getBlacklist(options) + redirects = await utils.getList(options) + for (const frontend in config.services[service].frontends) { + if (config.services[service].frontends[frontend].instanceList) { + if (redirects == "disabled" || blacklist == "disabled") { + document.getElementById(frontend).getElementsByClassName("clearnet")[0].style.display = "none" + document.getElementById(frontend).getElementsByClassName("ping")[0].style.display = "none" + } else if (!redirects || !blacklist) { + document + .getElementById(frontend) + .getElementsByClassName("clearnet")[0] + .getElementsByClassName("checklist")[0] + .getElementsByClassName("loading")[0].innerHTML = "Could not fetch instances." + } else { + createList(frontend) + } + } + } + + for (const frontend in config.services[service].frontends) { + if (config.services[service].frontends[frontend].instanceList) { + processCustomInstances(frontend) + document.getElementById(`ping-${frontend}`).addEventListener("click", async () => { + document.getElementById(`ping-${frontend}`).getElementsByTagName("x")[0].innerHTML = "Pinging..." + await ping(frontend) + document.getElementById(`ping-${frontend}`).getElementsByTagName("x")[0].innerHTML = "Ping instances" + }) + } + } + } } async function calcCustomInstances(frontend) { - let options = await utils.getOptions() - let customInstances = options[frontend] - const pingCache = await utils.getPingCache() - - document.getElementById(frontend).getElementsByClassName("custom-checklist")[0].innerHTML = customInstances - .map( - x => { - const time = pingCache[x]; - if (time) { - var { color, text } = processTime(time); - } - const timeText = time - ? `<span class="ping" style="color:${color};">${text}</span>` - : ""; - const custom = isCustomInstance(frontend, x) ? "" : `<span>custom</span>` - return `<div> + let options = await utils.getOptions() + let customInstances = options[frontend] + const pingCache = await utils.getPingCache() + + document.getElementById(frontend).getElementsByClassName("custom-checklist")[0].innerHTML = customInstances + .map(x => { + const time = pingCache[x] + if (time) { + var { color, text } = processTime(time) + } + const timeText = time ? `<span class="ping" style="color:${color};">${text}</span>` : "" + const custom = isCustomInstance(frontend, x) ? "" : `<span>custom</span>` + return `<div> <x> <a href="${x}" target="_blank">${x}</a> ${timeText} @@ -209,87 +209,97 @@ async function calcCustomInstances(frontend) { </button> </div> <hr>` - }) - .join("\n") - for (const item of customInstances) { - document.getElementById(frontend).getElementsByClassName(`clear-${item}`)[0].addEventListener("click", async () => { - const index = customInstances.indexOf(item) - if (index > -1) customInstances.splice(index, 1) - options = await utils.getOptions() - options[frontend] = customInstances - browser.storage.local.set({ options }, async () => { - calcCustomInstances(frontend) - createList(frontend) - }) - }) - } + }) + .join("\n") + for (const item of customInstances) { + document + .getElementById(frontend) + .getElementsByClassName(`clear-${item}`)[0] + .addEventListener("click", async () => { + const index = customInstances.indexOf(item) + if (index > -1) customInstances.splice(index, 1) + options = await utils.getOptions() + options[frontend] = customInstances + browser.storage.local.set({ options }, async () => { + calcCustomInstances(frontend) + createList(frontend) + }) + }) + } } async function processCustomInstances(frontend) { - calcCustomInstances(frontend) - document.getElementById(frontend).getElementsByClassName("custom-instance-form")[0].addEventListener("submit", async event => { - event.preventDefault() - let options = await utils.getOptions() - let customInstances = options[frontend] - let frontendCustomInstanceInput = document.getElementById(frontend).getElementsByClassName("custom-instance")[0] - try { - var url = new URL(frontendCustomInstanceInput.value) - } catch (error) { - return - } - let protocolHostVar = utils.protocolHost(url) - if (frontendCustomInstanceInput.validity.valid) { - if (!customInstances.includes(protocolHostVar)) { - customInstances.push(protocolHostVar) - options = await utils.getOptions() - options[frontend] = customInstances - browser.storage.local.set({ options }, () => { - frontendCustomInstanceInput.value = "" - calcCustomInstances(frontend) - }) - } - } - }) + calcCustomInstances(frontend) + document + .getElementById(frontend) + .getElementsByClassName("custom-instance-form")[0] + .addEventListener("submit", async event => { + event.preventDefault() + let options = await utils.getOptions() + let customInstances = options[frontend] + let frontendCustomInstanceInput = document.getElementById(frontend).getElementsByClassName("custom-instance")[0] + try { + var url = new URL(frontendCustomInstanceInput.value) + } catch (error) { + return + } + let protocolHostVar = utils.protocolHost(url) + if (frontendCustomInstanceInput.validity.valid) { + if (!customInstances.includes(protocolHostVar)) { + customInstances.push(protocolHostVar) + options = await utils.getOptions() + options[frontend] = customInstances + browser.storage.local.set({ options }, () => { + frontendCustomInstanceInput.value = "" + calcCustomInstances(frontend) + }) + } + } + }) } /** * @param {string} frontend */ async function createList(frontend) { - const pingCache = await utils.getPingCache() - const options = await utils.getOptions() - for (const network in config.networks) { - const checklist = document.getElementById(frontend).getElementsByClassName(network)[0].getElementsByClassName("checklist")[0] - - if (!redirects[frontend]) { - checklist.innerHTML = '<div class="block block-option">No instances found.</div>' - break - } - - const instances = redirects[frontend][network] - if (!instances || instances.length === 0) continue - - document.getElementById(frontend).getElementsByClassName("custom-instance")[0].placeholder = redirects[frontend].clearnet[0] - - instances.sort((a, b) => blacklist.cloudflare.includes(a) && !blacklist.cloudflare.includes(b)) - const content = instances - .map(x => { - const cloudflare = blacklist.cloudflare.includes(x) ? - `<a target="_blank" href="https://libredirect.github.io/docs.html#instances"> + const pingCache = await utils.getPingCache() + const options = await utils.getOptions() + for (const network in config.networks) { + const checklist = document + .getElementById(frontend) + .getElementsByClassName(network)[0] + .getElementsByClassName("checklist")[0] + + if (!redirects[frontend]) { + checklist.innerHTML = '<div class="block block-option">No instances found.</div>' + break + } + + const instances = redirects[frontend][network] + if (!instances || instances.length === 0) continue + + document.getElementById(frontend).getElementsByClassName("custom-instance")[0].placeholder = + redirects[frontend].clearnet[0] + + instances.sort((a, b) => blacklist.cloudflare.includes(a) && !blacklist.cloudflare.includes(b)) + const content = instances.map(x => { + const cloudflare = blacklist.cloudflare.includes(x) + ? `<a target="_blank" href="https://libredirect.github.io/docs.html#instances"> <span style="color:red;">cloudflare</span> - </a>` : "" + </a>` + : "" - let time = pingCache[x] - let timeText = "" - if (time) { - const { color, text } = processTime(time) - timeText = `<span class="ping" style="color:${color};">${text}</span>` - } + let time = pingCache[x] + let timeText = "" + if (time) { + const { color, text } = processTime(time) + timeText = `<span class="ping" style="color:${color};">${text}</span>` + } - const chosen = options[frontend].includes(x) ? `<span style="color:grey;">chosen</span>` : "" + const chosen = options[frontend].includes(x) ? `<span style="color:grey;">chosen</span>` : "" - const warnings = [cloudflare, timeText, chosen].join(" ") - return `<div class="frontend"> + const warnings = [cloudflare, timeText, chosen].join(" ") + return `<div class="frontend"> <x> <a href="${x}" target="_blank">${x}</a> ${warnings} @@ -300,30 +310,29 @@ async function createList(frontend) { </svg> </button> </div>` - }) + }) - checklist.innerHTML = [ - `<div class="block block-option"> + checklist.innerHTML = [ + `<div class="block block-option"> <label>${utils.camelCase(network)}</label> </div>`, - ...content, - "<br>" - ].join("\n<hr>\n") - - for (const instance of instances) { - checklist.getElementsByClassName(`add-${instance}`)[0] - .addEventListener("click", async () => { - let options = await utils.getOptions() - if (!options[frontend].includes(instance)) { - options[frontend].push(instance) - browser.storage.local.set({ options }, () => { - calcCustomInstances(frontend) - createList(frontend) - }) - } - }) - } - } + ...content, + "<br>", + ].join("\n<hr>\n") + + for (const instance of instances) { + checklist.getElementsByClassName(`add-${instance}`)[0].addEventListener("click", async () => { + let options = await utils.getOptions() + if (!options[frontend].includes(instance)) { + options[frontend].push(instance) + browser.storage.local.set({ options }, () => { + calcCustomInstances(frontend) + createList(frontend) + }) + } + }) + } + } } const r = window.location.href.match(/#(.*)/) @@ -334,59 +343,57 @@ else loadPage("general") * @param {string} frontend */ async function ping(frontend) { - const instanceElements = [ - ...document.getElementById(frontend).getElementsByClassName("custom-checklist")[0].getElementsByTagName('x'), - ...document.getElementById(frontend).getElementsByClassName('clearnet')[0].getElementsByTagName('x') - ] - - let pingCache = await utils.getPingCache() - let redundancyList = {} - for (const element of instanceElements) { - let span = element.getElementsByClassName('ping')[0] - if (!span) span = document.createElement('span') - span.classList = ['ping'] - span.innerHTML = '<span style="color:lightblue">pinging...</span>' - element.appendChild(span) - const href = element.getElementsByTagName('a')[0].href - const innerHTML = element.getElementsByTagName('a')[0].innerHTML - const time = redundancyList[innerHTML] ?? await utils.ping(href) - const { color, text } = processTime(time) - span.innerHTML = `<span style="color:${color};">${text}</span>` - pingCache[innerHTML] = time - redundancyList[innerHTML] = time - - browser.storage.local.set({ pingCache }) - } + const instanceElements = [ + ...document.getElementById(frontend).getElementsByClassName("custom-checklist")[0].getElementsByTagName("x"), + ...document.getElementById(frontend).getElementsByClassName("clearnet")[0].getElementsByTagName("x"), + ] + + let pingCache = await utils.getPingCache() + let redundancyList = {} + for (const element of instanceElements) { + let span = element.getElementsByClassName("ping")[0] + if (!span) span = document.createElement("span") + span.classList = ["ping"] + span.innerHTML = '<span style="color:lightblue">pinging...</span>' + element.appendChild(span) + const href = element.getElementsByTagName("a")[0].href + const innerHTML = element.getElementsByTagName("a")[0].innerHTML + const time = redundancyList[innerHTML] ?? (await utils.ping(href)) + const { color, text } = processTime(time) + span.innerHTML = `<span style="color:${color};">${text}</span>` + pingCache[innerHTML] = time + redundancyList[innerHTML] = time + + browser.storage.local.set({ pingCache }) + } } /** * @param {number} time */ function processTime(time) { - let text - let color - if (time < 5000) { - text = `${time}ms` - if (time <= 1000) color = "green" - else if (time <= 2000) color = "orange" - } - else if (time >= 5000) { - color = "red" - if (time == 5000) text = "5000ms+" - if (time > 5000) text = `Error: ${time - 5000}` - } - else { - color = "red" - text = 'Server not found' - } - return { color, text } + let text + let color + if (time < 5000) { + text = `${time}ms` + if (time <= 1000) color = "green" + else if (time <= 2000) color = "orange" + } else if (time >= 5000) { + color = "red" + if (time == 5000) text = "5000ms+" + if (time > 5000) text = `Error: ${time - 5000}` + } else { + color = "red" + text = "Server not found" + } + return { color, text } } function isCustomInstance(frontend, instance) { - for (const network in config.networks) { - if (!redirects[frontend]) return false; - const instances = redirects[frontend][network] - if (instances.includes(instance)) return true - } - return false -} \ No newline at end of file + for (const network in config.networks) { + if (!redirects[frontend]) return false + const instances = redirects[frontend][network] + if (instances.includes(instance)) return true + } + return false +} diff --git a/src/pages/options/init.js b/src/pages/options/init.js index baf3eebe..07da1859 100644 --- a/src/pages/options/init.js +++ b/src/pages/options/init.js @@ -5,46 +5,46 @@ import utils from "../../assets/javascripts/utils.js" import servicesHelper from "../../assets/javascripts/services.js" if (!(await utils.getOptions())) { - await servicesHelper.initDefaults() + await servicesHelper.initDefaults() } async function changeTheme() { - switch ((await utils.getOptions()).theme) { - case "dark": - document.body.classList.add("dark-theme") - document.body.classList.remove("light-theme") - for (const element of document.body.getElementsByClassName('dark')) { - element.style.display = 'none'; - } - break - case "light": - document.body.classList.add("light-theme") - document.body.classList.remove("dark-theme") - for (const element of document.body.getElementsByClassName('light')) { - element.style.display = 'none'; - } - break - default: - if (matchMedia("(prefers-color-scheme: light)").matches) { - document.body.classList.add("light-theme") - document.body.classList.remove("dark-theme") - for (const element of document.body.getElementsByClassName('light')) { - element.style.display = 'none'; - } - } else { - document.body.classList.add("dark-theme") - document.body.classList.remove("light-theme") - for (const element of document.body.getElementsByClassName('dark')) { - element.style.display = 'none'; - } - } - } + switch ((await utils.getOptions()).theme) { + case "dark": + document.body.classList.add("dark-theme") + document.body.classList.remove("light-theme") + for (const element of document.body.getElementsByClassName("dark")) { + element.style.display = "none" + } + break + case "light": + document.body.classList.add("light-theme") + document.body.classList.remove("dark-theme") + for (const element of document.body.getElementsByClassName("light")) { + element.style.display = "none" + } + break + default: + if (matchMedia("(prefers-color-scheme: light)").matches) { + document.body.classList.add("light-theme") + document.body.classList.remove("dark-theme") + for (const element of document.body.getElementsByClassName("light")) { + element.style.display = "none" + } + } else { + document.body.classList.add("dark-theme") + document.body.classList.remove("light-theme") + for (const element of document.body.getElementsByClassName("dark")) { + element.style.display = "none" + } + } + } } changeTheme() if (["ar", "iw", "ku", "fa", "ur"].includes(browser.i18n.getUILanguage())) { - document.getElementsByTagName("body")[0].classList.add("rtl") - document.getElementsByTagName("body")[0].dir = "rtl" + document.getElementsByTagName("body")[0].classList.add("rtl") + document.getElementsByTagName("body")[0].dir = "rtl" } localise.localisePage() diff --git a/src/pages/options/widgets/general.js b/src/pages/options/widgets/general.js index 30a8a0c8..b9ddfd08 100644 --- a/src/pages/options/widgets/general.js +++ b/src/pages/options/widgets/general.js @@ -7,29 +7,29 @@ import servicesHelper from "../../../assets/javascripts/services.js" const isChrome = browser.runtime.getBrowserInfo === undefined async function setOption(option, type, event) { - let options = await utils.getOptions() - switch (type) { - case "select": - options[option] = event.target.options[event.target.options.selectedIndex].value - break; - case "checkbox": - options[option] = event.target.checked - break; - case "range": - options[option] = event.target.value - break; - } - browser.storage.local.set({ options }) + let options = await utils.getOptions() + switch (type) { + case "select": + options[option] = event.target.options[event.target.options.selectedIndex].value + break + case "checkbox": + options[option] = event.target.checked + break + case "range": + options[option] = event.target.value + break + } + browser.storage.local.set({ options }) } const exportSettingsElement = document.getElementById("export-settings") async function exportSettings() { - const options = await utils.getOptions() - options.version = browser.runtime.getManifest().version - let resultString = JSON.stringify(options, null, " ") - exportSettingsElement.href = "data:application/json;base64," + btoa(resultString) - exportSettingsElement.download = `libredirect-settings-v${options.version}.json` - return + const options = await utils.getOptions() + options.version = browser.runtime.getManifest().version + let resultString = JSON.stringify(options, null, " ") + exportSettingsElement.href = "data:application/json;base64," + btoa(resultString) + exportSettingsElement.download = `libredirect-settings-v${options.version}.json` + return } exportSettings() document.getElementById("general_page").onclick = exportSettings @@ -37,35 +37,32 @@ document.getElementById("general_page").onclick = exportSettings const importSettingsElement = document.getElementById("import-settings") const importSettingsElementText = document.getElementById("import_settings_text") importSettingsElement.addEventListener("change", () => { - function importError() { - const oldHTML = importSettingsElementText.innerHTML - importSettingsElementText.innerHTML = '<span style="color:red;">Error!</span>' - setTimeout(() => (importSettingsElementText.innerHTML = oldHTML), 1000) - } - importSettingsElementText.innerHTML = "..." - let file = importSettingsElement.files[0] - const reader = new FileReader() - reader.readAsText(file) - reader.onload = async () => { - const data = JSON.parse(reader.result) - if ( - "theme" in data - && data.version == browser.runtime.getManifest().version - ) { - browser.storage.local.clear(async () => { - browser.storage.local.set({ options: data }, () => { - location.reload() - }) - }) - } else { - console.log("incompatible settings") - importError() - } - } - reader.onerror = error => { - console.log("error", error) - importError() - } + function importError() { + const oldHTML = importSettingsElementText.innerHTML + importSettingsElementText.innerHTML = '<span style="color:red;">Error!</span>' + setTimeout(() => (importSettingsElementText.innerHTML = oldHTML), 1000) + } + importSettingsElementText.innerHTML = "..." + let file = importSettingsElement.files[0] + const reader = new FileReader() + reader.readAsText(file) + reader.onload = async () => { + const data = JSON.parse(reader.result) + if ("theme" in data && data.version == browser.runtime.getManifest().version) { + browser.storage.local.clear(async () => { + browser.storage.local.set({ options: data }, () => { + location.reload() + }) + }) + } else { + console.log("incompatible settings") + importError() + } + } + reader.onerror = error => { + console.log("error", error) + importError() + } }) const exportSettingsSync = document.getElementById("export-settings-sync") @@ -73,58 +70,57 @@ const importSettingsSync = document.getElementById("import-settings-sync") const importSettingsSyncText = document.getElementById("import_settings_sync_text") exportSettingsSync.addEventListener("click", async () => { - let options = await utils.getOptions() - options.version = browser.runtime.getManifest().version - browser.storage.sync.set({ options }, () => location.reload()) + let options = await utils.getOptions() + options.version = browser.runtime.getManifest().version + browser.storage.sync.set({ options }, () => location.reload()) }) importSettingsSync.addEventListener("click", () => { - function importError() { - importSettingsSyncText.innerHTML = '<span style="color:red;">Error!</span>' - setTimeout(() => (importSettingsSyncText.innerHTML = oldHTML), 1000) - } - const oldHTML = importSettingsSyncText.innerHTML - importSettingsSyncText.innerHTML = "..." - browser.storage.sync.get({ options }, r => { - const options = r.options - if (options.version == browser.runtime.getManifest().version) { - browser.storage.local.set({ options }, () => location.reload()) - } else { - importError() - } - }) + function importError() { + importSettingsSyncText.innerHTML = '<span style="color:red;">Error!</span>' + setTimeout(() => (importSettingsSyncText.innerHTML = oldHTML), 1000) + } + const oldHTML = importSettingsSyncText.innerHTML + importSettingsSyncText.innerHTML = "..." + browser.storage.sync.get({ options }, r => { + const options = r.options + if (options.version == browser.runtime.getManifest().version) { + browser.storage.local.set({ options }, () => location.reload()) + } else { + importError() + } + }) }) const resetSettings = document.getElementById("reset-settings") resetSettings.addEventListener("click", async () => { - resetSettings.innerHTML = "..." - await servicesHelper.initDefaults() - location.reload() + resetSettings.innerHTML = "..." + await servicesHelper.initDefaults() + location.reload() }) -const fetchInstancesElement = document.getElementById('fetch-instances') -fetchInstancesElement.addEventListener('change', event => { - setOption('fetchInstances', 'select', event) - location.reload() +const fetchInstancesElement = document.getElementById("fetch-instances") +fetchInstancesElement.addEventListener("change", event => { + setOption("fetchInstances", "select", event) + location.reload() }) -const redirectOnlyInIncognitoElement = document.getElementById('redirectOnlyInIncognito') -redirectOnlyInIncognitoElement.addEventListener('change', event => { - setOption('redirectOnlyInIncognito', 'checkbox', event) +const redirectOnlyInIncognitoElement = document.getElementById("redirectOnlyInIncognito") +redirectOnlyInIncognitoElement.addEventListener("change", event => { + setOption("redirectOnlyInIncognito", "checkbox", event) }) -const bookmarksMenuElement = document.getElementById('bookmarksMenu') -bookmarksMenuElement.addEventListener('change', async event => { - if (event.target.checked) - browser.permissions.request({ permissions: ["bookmarks"] }, r => bookmarksMenuElement.checked = r) - else - browser.permissions.remove({ permissions: ["bookmarks"] }, r => bookmarksMenuElement.checked = !r) +const bookmarksMenuElement = document.getElementById("bookmarksMenu") +bookmarksMenuElement.addEventListener("change", async event => { + if (event.target.checked) + browser.permissions.request({ permissions: ["bookmarks"] }, r => (bookmarksMenuElement.checked = r)) + else browser.permissions.remove({ permissions: ["bookmarks"] }, r => (bookmarksMenuElement.checked = !r)) }) let themeElement = document.getElementById("theme") themeElement.addEventListener("change", event => { - setOption("theme", "select", event) - location.reload() + setOption("theme", "select", event) + location.reload() }) let nameCustomInstanceInput = document.getElementById("exceptions-custom-instance") @@ -134,40 +130,44 @@ let instanceType = "url" let config = await utils.getConfig() for (const service in config.services) { - document.getElementById(service).addEventListener("change", async event => { - let options = await utils.getOptions() - 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 }) - }) + document.getElementById(service).addEventListener("change", async event => { + let options = await utils.getOptions() + 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 }) + }) } let options = await utils.getOptions() themeElement.value = options.theme fetchInstancesElement.value = options.fetchInstances redirectOnlyInIncognitoElement.checked = options.redirectOnlyInIncognito -browser.permissions.contains({ permissions: ["bookmarks"] }, r => bookmarksMenuElement.checked = r) -for (const service in config.services) document.getElementById(service).checked = options.popupServices.includes(service) +browser.permissions.contains({ permissions: ["bookmarks"] }, r => (bookmarksMenuElement.checked = r)) +for (const service in config.services) + document.getElementById(service).checked = options.popupServices.includes(service) instanceTypeElement.addEventListener("change", event => { - instanceType = event.target.options[instanceTypeElement.selectedIndex].value - if (instanceType == "url") { - nameCustomInstanceInput.setAttribute("type", "url") - nameCustomInstanceInput.setAttribute("placeholder", "https://www.google.com") - } else if (instanceType == "regex") { - nameCustomInstanceInput.setAttribute("type", "text") - nameCustomInstanceInput.setAttribute("placeholder", "https?://(www.|)youtube.com/") - } + instanceType = event.target.options[instanceTypeElement.selectedIndex].value + if (instanceType == "url") { + nameCustomInstanceInput.setAttribute("type", "url") + nameCustomInstanceInput.setAttribute("placeholder", "https://www.google.com") + } else if (instanceType == "regex") { + nameCustomInstanceInput.setAttribute("type", "text") + nameCustomInstanceInput.setAttribute("placeholder", "https?://(www.|)youtube.com/") + } }) let exceptionsCustomInstances = options.exceptions function calcExceptionsCustomInstances() { - document.getElementById("exceptions-custom-checklist").innerHTML = [...exceptionsCustomInstances.url, ...exceptionsCustomInstances.regex] - .map( - x => `<div> + document.getElementById("exceptions-custom-checklist").innerHTML = [ + ...exceptionsCustomInstances.url, + ...exceptionsCustomInstances.regex, + ] + .map( + x => `<div> ${x} <button class="add" id="clear-${x}"> <svg xmlns="https://www.w3.org/2000/svg" height="20px" viewBox="0 0 24 24" width="20px" @@ -177,40 +177,40 @@ function calcExceptionsCustomInstances() { </button> </div> <hr>` - ) - .join("\n") - - for (const x of [...exceptionsCustomInstances.url, ...exceptionsCustomInstances.regex]) { - document.getElementById(`clear-${x}`).addEventListener("click", async () => { - let index - index = exceptionsCustomInstances.url.indexOf(x) - if (index > -1) exceptionsCustomInstances.url.splice(index, 1) - else { - index = exceptionsCustomInstances.regex.indexOf(x) - if (index > -1) exceptionsCustomInstances.regex.splice(index, 1) - } - options = await utils.getOptions() - options.exceptions = exceptionsCustomInstances - browser.storage.local.set({ options }) - calcExceptionsCustomInstances() - }) - } + ) + .join("\n") + + for (const x of [...exceptionsCustomInstances.url, ...exceptionsCustomInstances.regex]) { + document.getElementById(`clear-${x}`).addEventListener("click", async () => { + let index + index = exceptionsCustomInstances.url.indexOf(x) + if (index > -1) exceptionsCustomInstances.url.splice(index, 1) + else { + index = exceptionsCustomInstances.regex.indexOf(x) + if (index > -1) exceptionsCustomInstances.regex.splice(index, 1) + } + options = await utils.getOptions() + options.exceptions = exceptionsCustomInstances + browser.storage.local.set({ options }) + calcExceptionsCustomInstances() + }) + } } calcExceptionsCustomInstances() document.getElementById("custom-exceptions-instance-form").addEventListener("submit", async event => { - event.preventDefault() - let val - if (instanceType == "url" && nameCustomInstanceInput.validity.valid) { - val = nameCustomInstanceInput.value - if (!exceptionsCustomInstances.url.includes(val)) exceptionsCustomInstances.url.push(val) - } else if (instanceType == "regex") { - val = nameCustomInstanceInput.value - if (val.trim() != "" && !exceptionsCustomInstances.regex.includes(val)) exceptionsCustomInstances.regex.push(val) - } - if (val) { - options = await utils.getOptions() - options.exceptions = exceptionsCustomInstances - browser.storage.local.set({ options }, () => nameCustomInstanceInput.value = "") - } - calcExceptionsCustomInstances() + event.preventDefault() + let val + if (instanceType == "url" && nameCustomInstanceInput.validity.valid) { + val = nameCustomInstanceInput.value + if (!exceptionsCustomInstances.url.includes(val)) exceptionsCustomInstances.url.push(val) + } else if (instanceType == "regex") { + val = nameCustomInstanceInput.value + if (val.trim() != "" && !exceptionsCustomInstances.regex.includes(val)) exceptionsCustomInstances.regex.push(val) + } + if (val) { + options = await utils.getOptions() + options.exceptions = exceptionsCustomInstances + browser.storage.local.set({ options }, () => (nameCustomInstanceInput.value = "")) + } + calcExceptionsCustomInstances() }) |