From e460261c676bd3eeaa4784c1826e55443662ad91 Mon Sep 17 00:00:00 2001 From: ManeraKai Date: Sat, 21 Jan 2023 19:03:21 +0300 Subject: [PATCH] Added plus button next to public instances --- src/pages/options/index.js | 134 ++++++++++++++++--------- src/pages/options/widgets/general.js | 9 +- src/pages/options/widgets/services.pug | 78 +++++++------- 3 files changed, 128 insertions(+), 93 deletions(-) diff --git a/src/pages/options/index.js b/src/pages/options/index.js index a7be041..bf4ff5a 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 => ` +
+ ${x} + +
+
` + ) + .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 => ` -
- ${x} - -
-
` - ) - .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 = [ - `
+ document.getElementById(frontend) + .getElementsByClassName(network)[0] + .getElementsByClassName("checklist")[0] + .innerHTML = [ + `

${utils.camelCase(network)}

`, - ...redirects[frontend][network] - .sort((a, b) => - (blacklist.cloudflare.includes(a) && !blacklist.cloudflare.includes(b)) - ) - .map(x => { - const cloudflare = blacklist.cloudflare.includes(x) ? - ` + ...redirects[frontend][network] + .sort((a, b) => + (blacklist.cloudflare.includes(a) && !blacklist.cloudflare.includes(b)) + ) + .map(x => { + const cloudflare = blacklist.cloudflare.includes(x) ? + ` cloudflare ` : "" - const warnings = [cloudflare].join(" ") - return `
+ const warnings = [cloudflare].join(" ") + return `
${x}${warnings} +
` - }), - '
' - ].join("\n
\n") + }), + '
' + ].join("\n
\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 8e999a4..e89ce17 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 c321012..b5f330c 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") + div(id=service+"-opacity") - 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 + h4(data-localise="__MSG_show_in_popup__") Show in Popup + input(id=service type="checkbox") - 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 + 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 - hr + 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 - 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 + hr - form(class="custom-instance-form") + 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") + h4(data-localise="__MSG_instances__") Add your favorite instances - div(class="checklist custom-checklist") + 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") - 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 + 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