diff options
Diffstat (limited to 'src/pages')
| -rw-r--r-- | src/pages/options/index.js | 134 | ||||
| -rw-r--r-- | src/pages/options/widgets/general.js | 9 | ||||
| -rw-r--r-- | src/pages/options/widgets/services.pug | 90 |
3 files changed, 134 insertions, 99 deletions
diff --git a/src/pages/options/index.js b/src/pages/options/index.js index a7be0418..bf4ff5a0 100644 --- a/src/pages/options/index.js +++ b/src/pages/options/index.js @@ -18,6 +18,16 @@ config = await utils.getConfig() options = await utils.getOptions() function changeFrontendsSettings(service) { + 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) @@ -32,7 +42,7 @@ function changeFrontendsSettings(service) { } } -function loadPage(path) { +async function loadPage(path) { for (const section of document.getElementById("pages").getElementsByTagName("section")) section.style.display = "none" document.getElementById(`${path}_page`).style.display = "block" @@ -50,6 +60,7 @@ function loadPage(path) { const service = path; divs[service] = {} + options = await utils.getOptions() 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] @@ -62,7 +73,7 @@ function loadPage(path) { else options[service][option] = divs[service][option].value browser.storage.local.set({ options }) - changeFrontendsSettings(service) + changeFrontendsSettings(service) }) } @@ -73,9 +84,8 @@ function loadPage(path) { frontend_name_element.href = Object.values(config.services[service].frontends)[0].url } - if (Object.keys(config.services[service].frontends).length > 1) { - changeFrontendsSettings(service) - } + changeFrontendsSettings(service) + for (const frontend in config.services[service].frontends) { if (config.services[service].frontends[frontend].instanceList) { @@ -95,38 +105,39 @@ function loadPage(path) { } } +async function calcCustomInstances(frontend) { + let options = await utils.getOptions() + let customInstances = options[frontend] + document.getElementById(frontend).getElementsByClassName("custom-checklist")[0].innerHTML = customInstances + .map( + x => ` + <div> + ${x} + <button class="add clear-${x}"> + <svg xmlns="https://www.w3.org/2000/svg" height="20px" viewBox="0 0 24 24" width="20px" fill="currentColor"> + <path d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12 19 6.41z" /> + </svg> + </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 }, () => calcCustomInstances(frontend)) + }) + } +} + async function processCustomInstances(frontend, document) { let options = await utils.getOptions() let customInstances = options[frontend] - function calcCustomInstances() { - document.getElementById(frontend).getElementsByClassName("custom-checklist")[0].innerHTML = customInstances - .map( - x => ` - <div> - ${x} - <button class="add clear-${x}"> - <svg xmlns="https://www.w3.org/2000/svg" height="20px" viewBox="0 0 24 24" width="20px" fill="currentColor"> - <path d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12 19 6.41z" /> - </svg> - </button> - </div> - <hr>` - ) - .join("\n") - - customInstances = options[frontend] - for (const item of customInstances) { - document.getElementById(frontend).getElementsByClassName(`clear-${item}`)[0].addEventListener("click", async () => { - let index = customInstances.indexOf(item) - if (index > -1) customInstances.splice(index, 1) - options = await utils.getOptions() - options[frontend] = customInstances - browser.storage.local.set({ options }, () => calcCustomInstances()) - }) - } - } - calcCustomInstances() + calcCustomInstances(frontend) document.getElementById(frontend).getElementsByClassName("custom-instance-form")[0].addEventListener("submit", async event => { event.preventDefault() let frontendCustomInstanceInput = document.getElementById(frontend).getElementsByClassName("custom-instance")[0] @@ -144,7 +155,7 @@ async function processCustomInstances(frontend, document) { options[frontend] = customInstances browser.storage.local.set({ options }, () => { frontendCustomInstanceInput.value = "" - calcCustomInstances() + calcCustomInstances(frontend) }) } } @@ -155,29 +166,56 @@ function createList(frontend, networks, document, redirects, blacklist) { for (const network in networks) { if (redirects[frontend]) { if (redirects[frontend][network].length > 0) { - document.getElementById(frontend).getElementsByClassName(network)[0].getElementsByClassName("checklist")[0].innerHTML = [ - `<div class="some-block option-block"> + document.getElementById(frontend) + .getElementsByClassName(network)[0] + .getElementsByClassName("checklist")[0] + .innerHTML = [ + `<div class="some-block option-block"> <h4>${utils.camelCase(network)}</h4> </div>`, - ...redirects[frontend][network] - .sort((a, b) => - (blacklist.cloudflare.includes(a) && !blacklist.cloudflare.includes(b)) - ) - .map(x => { - const cloudflare = blacklist.cloudflare.includes(x) ? - ` <a target="_blank" href="https://libredirect.github.io/docs.html#instances"> + ...redirects[frontend][network] + .sort((a, b) => + (blacklist.cloudflare.includes(a) && !blacklist.cloudflare.includes(b)) + ) + .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>` : "" - const warnings = [cloudflare].join(" ") - return `<div> + const warnings = [cloudflare].join(" ") + return `<div> <x> <a href="${x}" target="_blank">${x}</a>${warnings} </x> + <button class="add add-${x}"> + <svg xmlns="https://www.w3.org/2000/svg" height="20px" viewBox="0 0 24 24" width="20px" fill="currentColor"> + <path d="M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z" /> + </svg> + </button> </div>` - }), - '<br>' - ].join("\n<hr>\n") + }), + '<br>' + ].join("\n<hr>\n") + + for (const x of redirects[frontend][network]) { + document.getElementById(frontend) + .getElementsByClassName(network)[0] + .getElementsByClassName("checklist")[0] + .getElementsByClassName(`add-${x}`)[0] + .addEventListener("click", async () => { + let options = await utils.getOptions() + let customInstances = options[frontend] + if (!customInstances.includes(x)) { + customInstances.push(x) + options = await utils.getOptions() + options[frontend] = customInstances + browser.storage.local.set({ options }, () => { + calcCustomInstances(frontend) + }) + } + }) + } } } else { document.getElementById(frontend).getElementsByClassName(network)[0].getElementsByClassName("checklist")[0].innerHTML = diff --git a/src/pages/options/widgets/general.js b/src/pages/options/widgets/general.js index 8e999a42..e89ce173 100644 --- a/src/pages/options/widgets/general.js +++ b/src/pages/options/widgets/general.js @@ -2,11 +2,8 @@ window.browser = window.browser || window.chrome import utils from "../../../assets/javascripts/utils.js" -import generalHelper from "../../../assets/javascripts/general.js" import servicesHelper from "../../../assets/javascripts/services.js" - - async function setOption(option, type, event) { let options = await utils.getOptions() if (type == "select") { @@ -70,10 +67,8 @@ function importError() { const resetSettings = document.getElementById("reset-settings") resetSettings.addEventListener("click", async () => { resetSettings.innerHTML = "..." - browser.storage.local.clear(async () => { - await servicesHelper.initDefaults() - location.reload() - }) + await servicesHelper.initDefaults() + location.reload() }) let themeElement = document.getElementById("theme") diff --git a/src/pages/options/widgets/services.pug b/src/pages/options/widgets/services.pug index c321012a..b5f330cc 100644 --- a/src/pages/options/widgets/services.pug +++ b/src/pages/options/widgets/services.pug @@ -8,51 +8,53 @@ each val, service in services div(class="some-block option-block") h4(data-localise="__MSG_enable__") Enable - input(id=service+"-enabled" type="checkbox") + input(id=`${service}-enabled` type="checkbox") - div(class="some-block option-block") - h4(data-localise="__MSG_show_in_popup__") Show in Popup - input(id=service type="checkbox") - - if Object.keys(services[service].frontends).length> 1 - div(class="some-block option-block") - h4 - a(class="frontend_name" target="_blank" data-localise="__MSG_frontend__") Frontend - select(id=service+"-frontend") - each val, frontend in services[service].frontends - option(value=frontend)=services[service].frontends[frontend].name - else - div(class="some-block option-block") - h4 - a(class="frontend_name" target="_blank" data-localise="__MSG_frontend__") Frontend + div(id=service+"-opacity") - if services[service].embeddable div(class="some-block option-block") - h4(data-localise="__MSG_redirectType__") Redirect Type - select(id=service+"-redirectType") - option(value="both" data-localise="__MSG_both__") both - option(value="sub_frame" data-localise="__MSG_onlyEmbedded__") Only Embedded - option(value="main_frame" data-localise="__MSG_onlyNotEmbedded__") Only Not Embedded - - hr - - each val, frontend in services[service].frontends - if services[service].frontends[frontend].instanceList - div(id=frontend) - div(class="some-block option-block") - h4(data-localise="__MSG_instances__") Add your favorite instances - - form(class="custom-instance-form") + h4(data-localise="__MSG_show_in_popup__") Show in Popup + input(id=service type="checkbox") + + if Object.keys(services[service].frontends).length> 1 + div(class="some-block option-block") + h4 + a(class="frontend_name" target="_blank" data-localise="__MSG_frontend__") Frontend + select(id=service+"-frontend") + each val, frontend in services[service].frontends + option(value=frontend)=services[service].frontends[frontend].name + else + div(class="some-block option-block") + h4 + a(class="frontend_name" target="_blank" data-localise="__MSG_frontend__") Frontend + + if services[service].embeddable + div(class="some-block option-block") + h4(data-localise="__MSG_redirectType__") Redirect Type + select(id=service+"-redirectType") + option(value="both" data-localise="__MSG_both__") both + option(value="sub_frame" data-localise="__MSG_onlyEmbedded__") Only Embedded + option(value="main_frame" data-localise="__MSG_onlyNotEmbedded__") Only Not Embedded + + hr + + each val, frontend in services[service].frontends + if services[service].frontends[frontend].instanceList + div(id=frontend) div(class="some-block option-block") - input(class="custom-instance" placeholder=`http://${frontend}.com` type="url" ) - button(class="add add-instance" type="submit") - svg(xmlns="https://www.w3.org/2000/svg" height="20px" viewBox="0 0 24 24" width="20px" fill="currentColor") - path(d="M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z") - - div(class="checklist custom-checklist") - - each val, network in networks - div(class=network) - div(class="checklist") - if (network == 'clearnet') - div(class="some-block option-block") Loading... \ No newline at end of file + h4(data-localise="__MSG_instances__") Add your favorite instances + + form(class="custom-instance-form") + div(class="some-block option-block") + input(class="custom-instance" placeholder=`http://${frontend}.com` type="url" ) + button(class="add add-instance" type="submit") + svg(xmlns="https://www.w3.org/2000/svg" height="20px" viewBox="0 0 24 24" width="20px" fill="currentColor") + path(d="M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z") + + div(class="checklist custom-checklist") + + each val, network in networks + div(class=network) + div(class="checklist") + if (network == 'clearnet') + div(class="some-block option-block") Loading... \ No newline at end of file |