diff options
Diffstat (limited to 'src/pages')
| -rw-r--r-- | src/pages/background/background.html | 10 | ||||
| -rw-r--r-- | src/pages/background/background.js | 576 | ||||
| -rw-r--r-- | src/pages/messages/no_instance.html | 36 | ||||
| -rw-r--r-- | src/pages/options/index.js | 585 | ||||
| -rw-r--r-- | src/pages/options/init.js | 66 | ||||
| -rw-r--r-- | src/pages/options/widgets/general.js | 274 | ||||
| -rw-r--r-- | src/pages/popup/popup.js | 172 | ||||
| -rw-r--r-- | src/pages/popup/style.css | 48 | ||||
| -rw-r--r-- | src/pages/stylesheets/styles.css | 463 |
9 files changed, 1125 insertions, 1105 deletions
diff --git a/src/pages/background/background.html b/src/pages/background/background.html index 542df18b..787d419e 100644 --- a/src/pages/background/background.html +++ b/src/pages/background/background.html @@ -1,7 +1,7 @@ -<!DOCTYPE html> +<!doctype html> <html> - <head> - <meta charset="utf-8" /> - <script type="module" src="background.js"></script> - </head> + <head> + <meta charset="utf-8" /> + <script type="module" src="background.js"></script> + </head> </html> diff --git a/src/pages/background/background.js b/src/pages/background/background.js index 0c4d0923..e3d9fb31 100644 --- a/src/pages/background/background.js +++ b/src/pages/background/background.js @@ -7,310 +7,324 @@ const isChrome = browser.runtime.getBrowserInfo === undefined window.browser = window.browser || window.chrome browser.runtime.onInstalled.addListener(async details => { - if (details.previousVersion != browser.runtime.getManifest().version) { - // ^Used to prevent this running when debugging with auto-reload - if (details.reason == "install") { - if (!(await utils.getOptions())) { - await servicesHelper.initDefaults() - } - browser.runtime.openOptionsPage() - } - else if (details.reason == "update") { - if (details.previousVersion == '2.5.2') { - await servicesHelper.upgradeOptions() - await servicesHelper.processUpdate() - } else { - await servicesHelper.processUpdate() - } - } - } + if (details.previousVersion != browser.runtime.getManifest().version) { + // ^Used to prevent this running when debugging with auto-reload + if (details.reason == "install") { + if (!(await utils.getOptions())) { + await servicesHelper.initDefaults() + } + browser.runtime.openOptionsPage() + } else if (details.reason == "update") { + if (details.previousVersion == "2.5.2") { + await servicesHelper.upgradeOptions() + await servicesHelper.processUpdate() + } else { + await servicesHelper.processUpdate() + } + } + } }) let tabIdRedirects = {} // true == Always redirect, false == Never redirect, null/undefined == follow options for services browser.webRequest.onBeforeRequest.addListener( - details => { - const url = new URL(details.url) - const old_href = url.href - if (new RegExp(/^chrome-extension:\/{2}.*\/instances\/.*.json$/).test(url.href) && details.type == "xmlhttprequest") return - let initiator - try { - if (details.originUrl) initiator = new URL(details.originUrl) - else if (details.initiator && details.initiator !== "null") initiator = new URL(details.initiator) - } catch { - return null - } - if (tabIdRedirects[details.tabId] == false) return null - let newUrl = servicesHelper.redirect(url, details.type, initiator, tabIdRedirects[details.tabId], details.incognito) + details => { + const url = new URL(details.url) + const old_href = url.href + if (new RegExp(/^chrome-extension:\/{2}.*\/instances\/.*.json$/).test(url.href) && details.type == "xmlhttprequest") + return + let initiator + try { + if (details.originUrl) initiator = new URL(details.originUrl) + else if (details.initiator && details.initiator !== "null") initiator = new URL(details.initiator) + } catch { + return null + } + if (tabIdRedirects[details.tabId] == false) return null + let newUrl = servicesHelper.redirect(url, details.type, initiator, tabIdRedirects[details.tabId], details.incognito) - if (details.frameAncestors && details.frameAncestors.length > 0 && servicesHelper.isException(new URL(details.frameAncestors[0].url))) newUrl = null + if ( + details.frameAncestors && + details.frameAncestors.length > 0 && + servicesHelper.isException(new URL(details.frameAncestors[0].url)) + ) + newUrl = null - if (servicesHelper.isException(url)) { - if (details.type == "main_frame") - newUrl = "BYPASSTAB" - else - return null - } + if (servicesHelper.isException(url)) { + if (details.type == "main_frame") newUrl = "BYPASSTAB" + else return null + } - if (!newUrl) { - const match = url.href.match(/^https?:\/{2}.*\.libredirect\.invalid.*/) - if (match) { - browser.tabs.update({ - url: browser.runtime.getURL(`/pages/messages/no_instance.html`) - }); - } - } + if (!newUrl) { + const match = url.href.match(/^https?:\/{2}.*\.libredirect\.invalid.*/) + if (match) { + browser.tabs.update({ + url: browser.runtime.getURL(`/pages/messages/no_instance.html`), + }) + } + } - if (newUrl) { - if (newUrl === "CANCEL") { - console.log(`Canceled ${url}`) - return { cancel: true } - } - if (newUrl === "BYPASSTAB") { - console.log(`Bypassed ${details.tabId} ${url}`) - if (tabIdRedirects[details.tabId] != false) tabIdRedirects[details.tabId] = false - return null - } - console.log("Redirecting", old_href, "=>", newUrl) - return { redirectUrl: newUrl } - } - return null - }, - { urls: ["<all_urls>"] }, - ["blocking"] + if (newUrl) { + if (newUrl === "CANCEL") { + console.log(`Canceled ${url}`) + return { cancel: true } + } + if (newUrl === "BYPASSTAB") { + console.log(`Bypassed ${details.tabId} ${url}`) + if (tabIdRedirects[details.tabId] != false) tabIdRedirects[details.tabId] = false + return null + } + console.log("Redirecting", old_href, "=>", newUrl) + return { redirectUrl: newUrl } + } + return null + }, + { urls: ["<all_urls>"] }, + ["blocking"] ) browser.tabs.onRemoved.addListener(tabId => { - if (tabIdRedirects[tabId] != undefined) { - delete tabIdRedirects[tabId] - console.log(`Removed tab ${tabId} from tabIdRedirects`) - } + if (tabIdRedirects[tabId] != undefined) { + delete tabIdRedirects[tabId] + console.log(`Removed tab ${tabId} from tabIdRedirects`) + } }) browser.commands.onCommand.addListener(async command => { - browser.tabs.query({ active: true, currentWindow: true }, async tabs => { - const url = new URL(tabs[0].url) - switch (command) { - case "switchInstance": { - const newUrl = await servicesHelper.switchInstance(url) - if (newUrl) browser.tabs.update({ url: newUrl }) - break - } - case "copyRaw": - servicesHelper.copyRaw(url) - break - case "redirect": - browser.tabs.query({ active: true, currentWindow: true }, async tabs => { - if (tabs[0].url) { - const url = new URL(tabs[0].url) - const newUrl = servicesHelper.redirect(url, "main_frame", null, true) - if (newUrl) { - browser.tabs.update(tabs[0].id, { url: newUrl }, () => { - tabIdRedirects[tabs[0].id] = true - }) - } - } - }) - break - case "reverse": - browser.tabs.query({ active: true, currentWindow: true }, async tabs => { - if (tabs[0].url) { - const url = new URL(tabs[0].url) - const newUrl = await servicesHelper.reverse(url) - if (newUrl) { - browser.tabs.update(tabs[0].id, { url: newUrl }, () => { - tabIdRedirects[tabs[0].id] = false - }) - } - } - }) - break - } - }) + browser.tabs.query({ active: true, currentWindow: true }, async tabs => { + const url = new URL(tabs[0].url) + switch (command) { + case "switchInstance": { + const newUrl = await servicesHelper.switchInstance(url) + if (newUrl) browser.tabs.update({ url: newUrl }) + break + } + case "copyRaw": + servicesHelper.copyRaw(url) + break + case "redirect": + browser.tabs.query({ active: true, currentWindow: true }, async tabs => { + if (tabs[0].url) { + const url = new URL(tabs[0].url) + const newUrl = servicesHelper.redirect(url, "main_frame", null, true) + if (newUrl) { + browser.tabs.update(tabs[0].id, { url: newUrl }, () => { + tabIdRedirects[tabs[0].id] = true + }) + } + } + }) + break + case "reverse": + browser.tabs.query({ active: true, currentWindow: true }, async tabs => { + if (tabs[0].url) { + const url = new URL(tabs[0].url) + const newUrl = await servicesHelper.reverse(url) + if (newUrl) { + browser.tabs.update(tabs[0].id, { url: newUrl }, () => { + tabIdRedirects[tabs[0].id] = false + }) + } + } + }) + break + } + }) }) -browser.contextMenus.create({ id: "settingsTab", title: browser.i18n.getMessage("settings"), contexts: ["browser_action"] }) -browser.contextMenus.create({ id: "switchInstanceTab", title: browser.i18n.getMessage("switchInstance"), contexts: ["browser_action"] }) -browser.contextMenus.create({ id: "copyReverseTab", title: 'Copy Original', contexts: ["browser_action"] }) -browser.contextMenus.create({ id: "redirectTab", title: 'Redirect', contexts: ["browser_action"] }) -browser.contextMenus.create({ id: "reverseTab", title: 'Redirect To Original', contexts: ["browser_action"] }) +browser.contextMenus.create({ + id: "settingsTab", + title: browser.i18n.getMessage("settings"), + contexts: ["browser_action"], +}) +browser.contextMenus.create({ + id: "switchInstanceTab", + title: browser.i18n.getMessage("switchInstance"), + contexts: ["browser_action"], +}) +browser.contextMenus.create({ id: "copyReverseTab", title: "Copy Original", contexts: ["browser_action"] }) +browser.contextMenus.create({ id: "redirectTab", title: "Redirect", contexts: ["browser_action"] }) +browser.contextMenus.create({ id: "reverseTab", title: "Redirect To Original", contexts: ["browser_action"] }) -browser.contextMenus.create({ id: "redirectLink", title: 'Redirect', contexts: ["link"] }) -browser.contextMenus.create({ id: "redirectLinkInNewTab", title: 'Redirect In New Tab', contexts: ["link"] }) -browser.contextMenus.create({ id: "reverseLink", title: 'Redirect To Original', contexts: ["link"] }) -browser.contextMenus.create({ id: "reverseLinkInNewTab", title: 'Redirect To Original In New Tab', contexts: ["link"] }) -browser.contextMenus.create({ id: "copyReverseLink", title: 'Copy Original', contexts: ["link"] }) -browser.contextMenus.create({ id: "bypassLink", title: 'Bypass', contexts: ["link"] }) -browser.contextMenus.create({ id: "bypassLinkInNewTab", title: 'Bypass In New Tab', contexts: ["link"] }) +browser.contextMenus.create({ id: "redirectLink", title: "Redirect", contexts: ["link"] }) +browser.contextMenus.create({ id: "redirectLinkInNewTab", title: "Redirect In New Tab", contexts: ["link"] }) +browser.contextMenus.create({ id: "reverseLink", title: "Redirect To Original", contexts: ["link"] }) +browser.contextMenus.create({ id: "reverseLinkInNewTab", title: "Redirect To Original In New Tab", contexts: ["link"] }) +browser.contextMenus.create({ id: "copyReverseLink", title: "Copy Original", contexts: ["link"] }) +browser.contextMenus.create({ id: "bypassLink", title: "Bypass", contexts: ["link"] }) +browser.contextMenus.create({ id: "bypassLinkInNewTab", title: "Bypass In New Tab", contexts: ["link"] }) if (!isChrome) { - browser.contextMenus.create({ id: "redirectBookmark", title: 'Redirect', contexts: ["bookmark"] }) - browser.contextMenus.create({ id: "redirectBookmarkInNewTab", title: 'Redirect In New Tab', contexts: ["bookmark"] }) - browser.contextMenus.create({ id: "reverseBookmark", title: 'Redirect To Original', contexts: ["bookmark"] }) - browser.contextMenus.create({ id: "reverseBookmarkInNewTab", title: 'Redirect To Original In New Tab', contexts: ["bookmark"] }) - browser.contextMenus.create({ id: "copyReverseBookmark", title: 'Copy Original', contexts: ["bookmark"] }) - browser.contextMenus.create({ id: "bypassBookmark", title: 'Bypass', contexts: ["bookmark"] }) - browser.contextMenus.create({ id: "bypassBookmarkInNewTab", title: 'Bypass In New Tab', contexts: ["bookmark"] }) + browser.contextMenus.create({ id: "redirectBookmark", title: "Redirect", contexts: ["bookmark"] }) + browser.contextMenus.create({ id: "redirectBookmarkInNewTab", title: "Redirect In New Tab", contexts: ["bookmark"] }) + browser.contextMenus.create({ id: "reverseBookmark", title: "Redirect To Original", contexts: ["bookmark"] }) + browser.contextMenus.create({ + id: "reverseBookmarkInNewTab", + title: "Redirect To Original In New Tab", + contexts: ["bookmark"], + }) + browser.contextMenus.create({ id: "copyReverseBookmark", title: "Copy Original", contexts: ["bookmark"] }) + browser.contextMenus.create({ id: "bypassBookmark", title: "Bypass", contexts: ["bookmark"] }) + browser.contextMenus.create({ id: "bypassBookmarkInNewTab", title: "Bypass In New Tab", contexts: ["bookmark"] }) } -browser.contextMenus.onClicked.addListener(async (info) => { - switch (info.menuItemId) { - case 'switchInstanceTab': { - const url = new URL(info.pageUrl) - const newUrl = await servicesHelper.switchInstance(url) - if (newUrl) browser.tabs.update({ url: newUrl }) - return - } - case 'settingsTab': - browser.runtime.openOptionsPage() - return - case 'copyReverseTab': - browser.tabs.query({ active: true, currentWindow: true }, async tabs => { - if (tabs[0].url) { - const url = new URL(tabs[0].url) - servicesHelper.copyRaw(url) - } - }) - return - case 'reverseTab': - browser.tabs.query({ active: true, currentWindow: true }, async tabs => { - if (tabs[0].url) { - const url = new URL(tabs[0].url) - const newUrl = await servicesHelper.reverse(url) - if (newUrl) { - browser.tabs.update(tabs[0].id, { url: newUrl }, () => { - tabIdRedirects[tabs[0].id] = false - }) - } - } - }) - return - case 'redirectTab': - browser.tabs.query({ active: true, currentWindow: true }, async tabs => { - if (tabs[0].url) { - const url = new URL(tabs[0].url) - const newUrl = servicesHelper.redirect(url, "main_frame", null, true) - if (newUrl) { - browser.tabs.update(tabs[0].id, { url: newUrl }, () => { - tabIdRedirects[tabs[0].id] = true - }) - } - } - }) - return - case 'copyReverseLink': { - const url = new URL(info.linkUrl) - await servicesHelper.copyRaw(url) - return - } - case 'redirectLink': - case 'redirectLinkInNewTab': { - const url = new URL(info.linkUrl) - const newUrl = servicesHelper.redirect(url, "main_frame", null, true) - if (newUrl) { - if (info.menuItemId == "redirectLink") browser.tabs.update({ url: newUrl }) - else browser.tabs.create({ url: newUrl }) - } - return - } - case 'reverseLink': - case 'reverseLinkInNewTab': { - const url = new URL(info.linkUrl) - const newUrl = await servicesHelper.reverse(url) - if (newUrl) { - if (info.menuItemId == "reverseLink") { - browser.tabs.update({ url: newUrl }, tab => { - tabIdRedirects[tab.id] = false - }) - } else { - browser.tabs.create({ url: newUrl }, tab => { - tabIdRedirects[tab.id] = false - }) - } - } - return - } - case 'bypassLink': - case 'bypassLinkInNewTab': { - const url = new URL(info.linkUrl) - if (info.menuItemId == "bypassLink") { - browser.tabs.update({ url: url.href }, tab => { - tabIdRedirects[tab.id] = false - }) - } else { - browser.tabs.create({ url: url.href }, tab => { - tabIdRedirects[tab.id] = false - }) - } - return - } - case 'copyReverseBookmark': - browser.bookmarks.get(info.bookmarkId, bookmarks => { - const url = new URL(bookmarks[0].url) - servicesHelper.copyRaw(url) - }); - return - case 'redirectBookmark': - case 'redirectBookmarkInNewTab': - browser.bookmarks.get(info.bookmarkId, bookmarks => { - const url = new URL(bookmarks[0].url) - const newUrl = servicesHelper.redirect(url, "main_frame", null, true) - if (newUrl) { - if (info.menuItemId == 'redirectBookmark') browser.tabs.update({ url: newUrl }) - else browser.tabs.create({ url: newUrl }) - } - }) - return - case 'reverseBookmark': - case 'reverseBookmarkInNewTab': - browser.bookmarks.get(info.bookmarkId, async bookmarks => { - const url = new URL(bookmarks[0].url) - const newUrl = await servicesHelper.reverse(url) - if (newUrl) { - if (info.menuItemId == "reverseBookmark") { - browser.tabs.update({ url: newUrl }, tab => { - tabIdRedirects[tab.id] = false - }) - } else { - browser.tabs.create({ url: newUrl }, tab => { - tabIdRedirects[tab.id] = false - }) - } - } - }) - return - case 'bypassBookmark': - case 'bypassBookmarkInNewTab': - browser.bookmarks.get(info.bookmarkId, async bookmarks => { - const url = new URL(bookmarks[0].url) - if (info.menuItemId == "bypassBookmark") { - browser.tabs.update({ url: url.href }, tab => tabIdRedirects[tab.id] = false) - } else { - browser.tabs.create({ url: url.href }, tab => tabIdRedirects[tab.id] = false) - } - return - }) - } +browser.contextMenus.onClicked.addListener(async info => { + switch (info.menuItemId) { + case "switchInstanceTab": { + const url = new URL(info.pageUrl) + const newUrl = await servicesHelper.switchInstance(url) + if (newUrl) browser.tabs.update({ url: newUrl }) + return + } + case "settingsTab": + browser.runtime.openOptionsPage() + return + case "copyReverseTab": + browser.tabs.query({ active: true, currentWindow: true }, async tabs => { + if (tabs[0].url) { + const url = new URL(tabs[0].url) + servicesHelper.copyRaw(url) + } + }) + return + case "reverseTab": + browser.tabs.query({ active: true, currentWindow: true }, async tabs => { + if (tabs[0].url) { + const url = new URL(tabs[0].url) + const newUrl = await servicesHelper.reverse(url) + if (newUrl) { + browser.tabs.update(tabs[0].id, { url: newUrl }, () => { + tabIdRedirects[tabs[0].id] = false + }) + } + } + }) + return + case "redirectTab": + browser.tabs.query({ active: true, currentWindow: true }, async tabs => { + if (tabs[0].url) { + const url = new URL(tabs[0].url) + const newUrl = servicesHelper.redirect(url, "main_frame", null, true) + if (newUrl) { + browser.tabs.update(tabs[0].id, { url: newUrl }, () => { + tabIdRedirects[tabs[0].id] = true + }) + } + } + }) + return + case "copyReverseLink": { + const url = new URL(info.linkUrl) + await servicesHelper.copyRaw(url) + return + } + case "redirectLink": + case "redirectLinkInNewTab": { + const url = new URL(info.linkUrl) + const newUrl = servicesHelper.redirect(url, "main_frame", null, true) + if (newUrl) { + if (info.menuItemId == "redirectLink") browser.tabs.update({ url: newUrl }) + else browser.tabs.create({ url: newUrl }) + } + return + } + case "reverseLink": + case "reverseLinkInNewTab": { + const url = new URL(info.linkUrl) + const newUrl = await servicesHelper.reverse(url) + if (newUrl) { + if (info.menuItemId == "reverseLink") { + browser.tabs.update({ url: newUrl }, tab => { + tabIdRedirects[tab.id] = false + }) + } else { + browser.tabs.create({ url: newUrl }, tab => { + tabIdRedirects[tab.id] = false + }) + } + } + return + } + case "bypassLink": + case "bypassLinkInNewTab": { + const url = new URL(info.linkUrl) + if (info.menuItemId == "bypassLink") { + browser.tabs.update({ url: url.href }, tab => { + tabIdRedirects[tab.id] = false + }) + } else { + browser.tabs.create({ url: url.href }, tab => { + tabIdRedirects[tab.id] = false + }) + } + return + } + case "copyReverseBookmark": + browser.bookmarks.get(info.bookmarkId, bookmarks => { + const url = new URL(bookmarks[0].url) + servicesHelper.copyRaw(url) + }) + return + case "redirectBookmark": + case "redirectBookmarkInNewTab": + browser.bookmarks.get(info.bookmarkId, bookmarks => { + const url = new URL(bookmarks[0].url) + const newUrl = servicesHelper.redirect(url, "main_frame", null, true) + if (newUrl) { + if (info.menuItemId == "redirectBookmark") browser.tabs.update({ url: newUrl }) + else browser.tabs.create({ url: newUrl }) + } + }) + return + case "reverseBookmark": + case "reverseBookmarkInNewTab": + browser.bookmarks.get(info.bookmarkId, async bookmarks => { + const url = new URL(bookmarks[0].url) + const newUrl = await servicesHelper.reverse(url) + if (newUrl) { + if (info.menuItemId == "reverseBookmark") { + browser.tabs.update({ url: newUrl }, tab => { + tabIdRedirects[tab.id] = false + }) + } else { + browser.tabs.create({ url: newUrl }, tab => { + tabIdRedirects[tab.id] = false + }) + } + } + }) + return + case "bypassBookmark": + case "bypassBookmarkInNewTab": + browser.bookmarks.get(info.bookmarkId, async bookmarks => { + const url = new URL(bookmarks[0].url) + if (info.menuItemId == "bypassBookmark") { + browser.tabs.update({ url: url.href }, tab => (tabIdRedirects[tab.id] = false)) + } else { + browser.tabs.create({ url: url.href }, tab => (tabIdRedirects[tab.id] = false)) + } + return + }) + } }) browser.runtime.onMessage.addListener((request, sender, sendResponse) => { - if (request == "reverseTab") { - browser.tabs.query({ active: true, currentWindow: true }, async tabs => { - if (tabs[0].url) { - const url = new URL(tabs[0].url) - const newUrl = await servicesHelper.reverse(url) - if (newUrl) browser.tabs.update(tabs[0].id, { url: newUrl }, () => tabIdRedirects[tabs[0].id] = false) - } - }) - } - else if (request == "redirectTab") { - browser.tabs.query({ active: true, currentWindow: true }, async tabs => { - if (tabs[0].url) { - const url = new URL(tabs[0].url) - const newUrl = servicesHelper.redirect(url, "main_frame", null, true) - if (newUrl) browser.tabs.update(tabs[0].id, { url: newUrl }, () => tabIdRedirects[tabs[0].id] = true) - } - }) - } -})
\ No newline at end of file + if (request == "reverseTab") { + browser.tabs.query({ active: true, currentWindow: true }, async tabs => { + if (tabs[0].url) { + const url = new URL(tabs[0].url) + const newUrl = await servicesHelper.reverse(url) + if (newUrl) browser.tabs.update(tabs[0].id, { url: newUrl }, () => (tabIdRedirects[tabs[0].id] = false)) + } + }) + } else if (request == "redirectTab") { + browser.tabs.query({ active: true, currentWindow: true }, async tabs => { + if (tabs[0].url) { + const url = new URL(tabs[0].url) + const newUrl = servicesHelper.redirect(url, "main_frame", null, true) + if (newUrl) browser.tabs.update(tabs[0].id, { url: newUrl }, () => (tabIdRedirects[tabs[0].id] = true)) + } + }) + } +}) diff --git a/src/pages/messages/no_instance.html b/src/pages/messages/no_instance.html index 76ec19cf..358ff506 100644 --- a/src/pages/messages/no_instance.html +++ b/src/pages/messages/no_instance.html @@ -1,26 +1,24 @@ -<!DOCTYPE html> +<!doctype html> <html lang="en"> - -<head> - <meta charset="UTF-8"> - <meta http-equiv="X-UA-Compatible" content="IE=edge"> - <meta name="viewport" content="width=device-width, initial-scale=1.0"> - <link href="../stylesheets/styles.css" rel="stylesheet"> + <head> + <meta charset="UTF-8" /> + <meta http-equiv="X-UA-Compatible" content="IE=edge" /> + <meta name="viewport" content="width=device-width, initial-scale=1.0" /> + <link href="../stylesheets/styles.css" rel="stylesheet" /> <title>No instances found</title> <style> - #body { - display: flex; - justify-content: center; - align-items: center; - height: 100vh; - } + #body { + display: flex; + justify-content: center; + align-items: center; + height: 100vh; + } </style> -</head> + </head> -<body> + <body> <div id="body"> - <h1>You have no instance selected for this frontend</h1> + <h1>You have no instance selected for this frontend</h1> </div> -</body> - -</html>
\ No newline at end of file + </body> +</html> 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 = "" + 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 = ` + 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" + 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 + 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" + 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 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 - } - } + 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}`) + 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) + 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) - } - } - } + 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" - }) - } - } - } + 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() + 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> + 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] + 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 - } + 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 + const instances = redirects[frontend][network] + if (!instances || instances.length === 0) continue - document.getElementById(frontend).getElementsByClassName("custom-instance")[0].placeholder = redirects[frontend].clearnet[0] + 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"> + 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") + ...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) - }) - } - }) - } - } + 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') - ] + 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 + 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 }) - } + 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") + ) + .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() - }) - } + 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() }) diff --git a/src/pages/popup/popup.js b/src/pages/popup/popup.js index 485ec0e0..77a43000 100644 --- a/src/pages/popup/popup.js +++ b/src/pages/popup/popup.js @@ -5,15 +5,15 @@ import servicesHelper from "../../assets/javascripts/services.js" import utils from "../../assets/javascripts/utils.js" document.getElementById("more-options").href = browser.runtime.getURL("pages/options/index.html") -document.getElementById("more-options").setAttribute('target', '_blank') +document.getElementById("more-options").setAttribute("target", "_blank") await browser.runtime.getPlatformInfo(r => { - switch (r.os) { - case "fuchsia": - case "ios": - case "android": - document.getElementsByTagName("html")[0].classList.add("mobile") - } + switch (r.os) { + case "fuchsia": + case "ios": + case "android": + document.getElementsByTagName("html")[0].classList.add("mobile") + } }) const allSites = document.getElementById("all_sites") @@ -24,94 +24,96 @@ const config = await utils.getConfig() const divs = {} for (const service in config.services) { - divs[service] = {} + divs[service] = {} - divs[service].all = allSites.getElementsByClassName(service)[0] - divs[service].current = currSite.getElementsByClassName(service)[0] + divs[service].all = allSites.getElementsByClassName(service)[0] + divs[service].current = currSite.getElementsByClassName(service)[0] - divs[service].all_toggle = allSites.getElementsByClassName(`${service}-enabled`)[0] - divs[service].all_toggle.addEventListener("change", async () => { - const options = await utils.getOptions() - options[service].enabled = divs[service].all_toggle.checked - browser.storage.local.set({ options }) - }) + divs[service].all_toggle = allSites.getElementsByClassName(`${service}-enabled`)[0] + divs[service].all_toggle.addEventListener("change", async () => { + const options = await utils.getOptions() + options[service].enabled = divs[service].all_toggle.checked + browser.storage.local.set({ options }) + }) - allSites.getElementsByClassName(`${service}-change_instance`)[0].addEventListener("click", () => { - browser.tabs.query({ active: true, currentWindow: true }, async tabs => { - if (tabs[0].url) { - const url = new URL(tabs[0].url) - browser.tabs.update({ url: await servicesHelper.switchInstance(url, service) }) - } - }) - }) + allSites.getElementsByClassName(`${service}-change_instance`)[0].addEventListener("click", () => { + browser.tabs.query({ active: true, currentWindow: true }, async tabs => { + if (tabs[0].url) { + const url = new URL(tabs[0].url) + browser.tabs.update({ url: await servicesHelper.switchInstance(url, service) }) + } + }) + }) - divs[service].current_toggle = currSite.getElementsByClassName(`${service}-enabled`)[0] - divs[service].current_toggle.addEventListener("change", async () => { - const options = await utils.getOptions() - options[service].enabled = divs[service].current_toggle.checked - browser.storage.local.set({ options }) - }) + divs[service].current_toggle = currSite.getElementsByClassName(`${service}-enabled`)[0] + divs[service].current_toggle.addEventListener("change", async () => { + const options = await utils.getOptions() + options[service].enabled = divs[service].current_toggle.checked + browser.storage.local.set({ options }) + }) - currSite.getElementsByClassName(`${service}-change_instance`)[0].addEventListener("click", () => { - browser.tabs.query({ active: true, currentWindow: true }, async tabs => { - if (tabs[0].url) { - const url = new URL(tabs[0].url) - browser.tabs.update({ url: await servicesHelper.switchInstance(url, service) }) - } - }) - }) + currSite.getElementsByClassName(`${service}-change_instance`)[0].addEventListener("click", () => { + browser.tabs.query({ active: true, currentWindow: true }, async tabs => { + if (tabs[0].url) { + const url = new URL(tabs[0].url) + browser.tabs.update({ url: await servicesHelper.switchInstance(url, service) }) + } + }) + }) } browser.tabs.query({ active: true, currentWindow: true }, async tabs => { - // Set visibility of control buttons - if (tabs[0].url) { - const hr = document.getElementById("hr") - var url = new URL(tabs[0].url) - servicesHelper.switchInstance(url).then(r => { - if (r) { - document.getElementById("change_instance_div").style.display = "" - hr.style.display = "" - document.getElementById("change_instance").addEventListener("click", async () => - browser.tabs.update({ url: await servicesHelper.switchInstance(url) }) - ) - } - }) - servicesHelper.reverse(url).then(r => { - if (r) { - hr.style.display = "" + // Set visibility of control buttons + if (tabs[0].url) { + const hr = document.getElementById("hr") + var url = new URL(tabs[0].url) + servicesHelper.switchInstance(url).then(r => { + if (r) { + document.getElementById("change_instance_div").style.display = "" + hr.style.display = "" + document + .getElementById("change_instance") + .addEventListener("click", async () => browser.tabs.update({ url: await servicesHelper.switchInstance(url) })) + } + }) + servicesHelper.reverse(url).then(r => { + if (r) { + hr.style.display = "" - document.getElementById("copy_original_div").style.display = "" - document.getElementById("copy_original").addEventListener("click", () => servicesHelper.copyRaw(url)) + document.getElementById("copy_original_div").style.display = "" + document.getElementById("copy_original").addEventListener("click", () => servicesHelper.copyRaw(url)) - document.getElementById("redirect_to_original_div").style.display = "" - document.getElementById("redirect_to_original").addEventListener("click", () => browser.runtime.sendMessage("reverseTab")) - } - }) - servicesHelper.redirectAsync(url, "main_frame", null, true).then(r => { - if (r) { - document.getElementById("redirect_div").style.display = "" - hr.style.display = "" - document.getElementById("redirect").addEventListener("click", () => browser.runtime.sendMessage("redirectTab")) - } - }) - } + document.getElementById("redirect_to_original_div").style.display = "" + document + .getElementById("redirect_to_original") + .addEventListener("click", () => browser.runtime.sendMessage("reverseTab")) + } + }) + servicesHelper.redirectAsync(url, "main_frame", null, true).then(r => { + if (r) { + document.getElementById("redirect_div").style.display = "" + hr.style.display = "" + document.getElementById("redirect").addEventListener("click", () => browser.runtime.sendMessage("redirectTab")) + } + }) + } - const options = await utils.getOptions() + const options = await utils.getOptions() - // Set visibility of all service buttons - for (const service of options.popupServices) { - divs[service].all.classList.remove("hide") - divs[service].all_toggle.checked = options[service].enabled - } + // Set visibility of all service buttons + for (const service of options.popupServices) { + divs[service].all.classList.remove("hide") + divs[service].all_toggle.checked = options[service].enabled + } - // Set visibility of current page service button - if (url) { - const service = await servicesHelper.computeService(url) - if (service) { - divs[service].all.classList.add("hide") - divs[service].current.classList.remove("hide") - divs[service].current_toggle.checked = options[service].enabled - currentSiteDivider.style.display = "" - } - } -})
\ No newline at end of file + // Set visibility of current page service button + if (url) { + const service = await servicesHelper.computeService(url) + if (service) { + divs[service].all.classList.add("hide") + divs[service].current.classList.remove("hide") + divs[service].current_toggle.checked = options[service].enabled + currentSiteDivider.style.display = "" + } + } +}) diff --git a/src/pages/popup/style.css b/src/pages/popup/style.css index 5e39b4ed..41510615 100644 --- a/src/pages/popup/style.css +++ b/src/pages/popup/style.css @@ -1,65 +1,65 @@ body { - width: 270px; - min-height: auto; + width: 270px; + min-height: auto; } html, body { - margin: 0; + margin: 0; } .hide { - display: none !important; + display: none !important; } .button { - display: flex; - margin: 0 auto; - justify-content: space-between; + display: flex; + margin: 0 auto; + justify-content: space-between; } .button svg { - width: 26px; - height: 26px; + width: 26px; + height: 26px; } .bottom-button { - width: 100%; + width: 100%; } .space { - height: 10px; + height: 10px; } input { - height: 23px; - width: 46px; + height: 23px; + width: 46px; } div.block label { - margin: 0; - font-size: 18px; - font-weight: bold; - max-width: 180px; + margin: 0; + font-size: 18px; + font-weight: bold; + max-width: 180px; } div.block label:hover { - cursor: pointer; + cursor: pointer; } div.block div { - display: flex; + display: flex; } html.mobile body { - width: 100%; + width: 100%; } html.mobile div.block label { - font-size: 24px; + font-size: 24px; } html.mobile .button svg { - width: 30px; - height: 30px; -}
\ No newline at end of file + width: 30px; + height: 30px; +} diff --git a/src/pages/stylesheets/styles.css b/src/pages/stylesheets/styles.css index b220efdb..ca6f0dca 100644 --- a/src/pages/stylesheets/styles.css +++ b/src/pages/stylesheets/styles.css @@ -1,450 +1,449 @@ body { - --text: #fff; - --bg-main: #121212; - --bg-secondary: #202020; - --active: #fbc117; - --danger: #f04141; - --light-grey: #c3c3c3; + --text: #fff; + --bg-main: #121212; + --bg-secondary: #202020; + --active: #fbc117; + --danger: #f04141; + --light-grey: #c3c3c3; } @font-face { - font-family: "Inter"; - src: url("Inter-VariableFont_slnt,wght.ttf"); - font-weight: normal; - font-style: normal; + font-family: "Inter"; + src: url("Inter-VariableFont_slnt,wght.ttf"); + font-weight: normal; + font-style: normal; } @font-face { - font-family: "Vazirmatn"; - src: url("Vazirmatn-VariableFont_wght.ttf"); - font-weight: normal; - font-style: normal; + font-family: "Vazirmatn"; + src: url("Vazirmatn-VariableFont_wght.ttf"); + font-weight: normal; + font-style: normal; } body { - margin: auto; - padding: 0; - font-family: "Inter"; - font-size: 16px; - background-color: var(--bg-main); - color: var(--text); + margin: auto; + padding: 0; + font-family: "Inter"; + font-size: 16px; + background-color: var(--bg-main); + color: var(--text); } body * { - font-family: "Inter"; + font-family: "Inter"; } body.rtl { - font-family: "Vazirmatn"; + font-family: "Vazirmatn"; } body.rtl * { - font-family: "Vazirmatn"; + font-family: "Vazirmatn"; } div.block input[type="checkbox"] { - appearance: none; - -moz-appearance: none; - -webkit-appearance: none; + appearance: none; + -moz-appearance: none; + -webkit-appearance: none; } .title { - display: flex; - align-items: center; - text-decoration: none; - width: min-content; - color: var(--text); - transition: .1s; + display: flex; + align-items: center; + text-decoration: none; + width: min-content; + color: var(--text); + transition: 0.1s; } .title:hover { - opacity: 1 !important; + opacity: 1 !important; } .title:hover a { - color: var(--active); + color: var(--active); } img, svg { - margin-right: 10px; - height: 26px; - width: 26px; - color: var(--text); + margin-right: 10px; + height: 26px; + width: 26px; + color: var(--text); } body.rtl img, body.rtl svg { - margin-right: 0px; - margin-left: 10px; + margin-right: 0px; + margin-left: 10px; } input[type="url"], input[type="text"], select { - font-weight: bold; - box-sizing: border-box; - border-style: solid; - border-color: #767676; - color: var(--text); - font-size: 16px; - padding: 8px; - background-color: var(--bg-secondary); - border: none; - margin: 0; - max-width: 500px; - border-radius: 3px; + font-weight: bold; + box-sizing: border-box; + border-style: solid; + border-color: #767676; + color: var(--text); + font-size: 16px; + padding: 8px; + background-color: var(--bg-secondary); + border: none; + margin: 0; + max-width: 500px; + border-radius: 3px; } input[type="url"], input[type="text"] { - width: 400px; - cursor: text; + width: 400px; + cursor: text; } input:invalid { - color: var(--danger); + color: var(--danger); } .button svg { - height: 18px; - width: 18px; + height: 18px; + width: 18px; } section.block-option { - width: 750px; - margin: 0 50px; + width: 750px; + margin: 0 50px; } section.block-option h2 { - margin: 0; + margin: 0; } body.option { - display: flex; - padding: 40px; - width: 1160px; + display: flex; + padding: 40px; + width: 1160px; } section.links { - display: flex; - flex-wrap: wrap; - flex-direction: column; - width: 350px; - max-height: 1030px; + display: flex; + flex-wrap: wrap; + flex-direction: column; + width: 350px; + max-height: 1030px; } section.links div { - margin: 10px; - width: max-content; + margin: 10px; + width: max-content; } a { - text-decoration: none; - color: var(--text); - transition: 0.1s; + text-decoration: none; + color: var(--text); + transition: 0.1s; } a:hover { - color: var(--active); + color: var(--active); } section.links a { - display: flex; - align-items: center; - font-size: 18px; - text-decoration: none; - color: white; - transition: 0.1s; + display: flex; + align-items: center; + font-size: 18px; + text-decoration: none; + color: white; + transition: 0.1s; } section.links a:hover, section.links .selected { - opacity: 1 !important; + opacity: 1 !important; } section.links .selected a { - color: var(--active); + color: var(--active); } ::placeholder { - color: var(--text); - opacity: 0.7; + color: var(--text); + opacity: 0.7; } hr { - height: 2px; - margin: 0 15px; - background-color: rgb(77, 77, 77); - border: none; + height: 2px; + margin: 0 15px; + background-color: rgb(77, 77, 77); + border: none; } div.block { - padding: 0 15px; - justify-content: space-between; - display: flex; - align-items: center; - margin-top: 10px; - margin-bottom: 10px; + padding: 0 15px; + justify-content: space-between; + display: flex; + align-items: center; + margin-top: 10px; + margin-bottom: 10px; } div.block-option { - margin: 30px 0; + margin: 30px 0; } div.block-option label { - margin-right: 5px; - width: 80%; - min-width: 150px; - font-size: 18px; + margin-right: 5px; + width: 80%; + min-width: 150px; + font-size: 18px; } div.block-option h1 { - margin: 0; - font-size: 28px; - color: var(--text); + margin: 0; + font-size: 28px; + color: var(--text); } div.block-option div { - text-align: center; + text-align: center; } div.block input[type="checkbox"] { - width: 46px; - height: 24px; - background-color: var(--light-grey); - border-radius: 50px; - transition: 0.4s; - cursor: pointer; + width: 46px; + height: 24px; + background-color: var(--light-grey); + border-radius: 50px; + transition: 0.4s; + cursor: pointer; } div.block input[type="checkbox"]:checked { - background-color: var(--active); + background-color: var(--active); } div.block input[type="checkbox"]::before { - content: ""; - display: inline-block; - width: 18px; - height: 18px; - box-sizing: border-box; - position: relative; - top: 2.5px; - left: 3.5px; - background-color: white; - border-radius: 50%; - transition: 0.3s; + content: ""; + display: inline-block; + width: 18px; + height: 18px; + box-sizing: border-box; + position: relative; + top: 2.5px; + left: 3.5px; + background-color: white; + border-radius: 50%; + transition: 0.3s; } body.rtl div.block input[type="checkbox"]::before { - left: auto; - right: 4px; + left: auto; + right: 4px; } div.block input[type="checkbox"]:checked::before { - left: 24px; + left: 24px; } body.rtl div.block input[type="checkbox"]:checked::before { - left: auto; - right: 24px; + left: auto; + right: 24px; } div.buttons { - display: flex; - margin: 0 15px; - margin-bottom: 15px; - margin-top: 15px; - flex-wrap: wrap; - align-items: center; - justify-content: start; + display: flex; + margin: 0 15px; + margin-bottom: 15px; + margin-top: 15px; + flex-wrap: wrap; + align-items: center; + justify-content: start; } .button { - color: var(--text); - font-size: 16px; - font-weight: bold; - text-decoration: none; - cursor: pointer; - transition-duration: 0.1s; + color: var(--text); + font-size: 16px; + font-weight: bold; + text-decoration: none; + cursor: pointer; + transition-duration: 0.1s; } .button:hover { - color: var(--active); + color: var(--active); } .button svg { - width: auto; - height: auto; - padding: 0; - margin-right: 5px; + width: auto; + height: auto; + padding: 0; + margin-right: 5px; } .button:hover svg { - color: var(--active); + color: var(--active); } .button-inline { - display: inline-flex; - align-items: center; - margin: 7.5px 0; - background-color: var(--bg-secondary); - border-radius: 5px; - padding: 10px; + display: inline-flex; + align-items: center; + margin: 7.5px 0; + background-color: var(--bg-secondary); + border-radius: 5px; + padding: 10px; } .button:active { - transform: translateY(1px); + transform: translateY(1px); } button svg { - color: var(--text); + color: var(--text); } div.checklist div { - justify-content: space-between; - margin: 5px 15px; - padding: 10px 0; - word-wrap: break-word; - display: flex; + justify-content: space-between; + margin: 5px 15px; + padding: 10px 0; + word-wrap: break-word; + display: flex; } div.checklist a { - text-decoration: none; - color: var(--text); + text-decoration: none; + color: var(--text); } div.checklist a:hover { - text-decoration: underline; + text-decoration: underline; } div.custom-checklist x a { - color: var(--active); + color: var(--active); } button.add { - background-color: transparent; - border: none; - padding: 0; - margin: 0; - text-decoration: none; - display: inline-block; - cursor: pointer; + background-color: transparent; + border: none; + padding: 0; + margin: 0; + text-decoration: none; + display: inline-block; + cursor: pointer; } body.light-theme { - --text: black; - --bg-main: white; - --bg-secondary: #e4e4e4; - --active: #fb9817; + --text: black; + --bg-main: white; + --bg-secondary: #e4e4e4; + --active: #fb9817; } body.light-theme select { - border: 1px solid black; + border: 1px solid black; } body.light-theme a { - color: black; + color: black; } body.light-theme a:hover { - color: var(--active) + color: var(--active); } button { - background-color: transparent; - color: var(--text); - border: none; - text-decoration: none; - display: inline-block; - cursor: pointer; - border-radius: 5px; + background-color: transparent; + color: var(--text); + border: none; + text-decoration: none; + display: inline-block; + cursor: pointer; + border-radius: 5px; } body div section { - display: none; + display: none; } select:disabled { - opacity: 0.6; - cursor: not-allowed; + opacity: 0.6; + cursor: not-allowed; } input:disabled { - opacity: 0.6; - cursor: not-allowed; + opacity: 0.6; + cursor: not-allowed; } @media (max-width: 1250px) { - body.option { - flex-direction: column; - width: 95vw; - align-items: center; - padding: 40px 0px; - } + body.option { + flex-direction: column; + width: 95vw; + align-items: center; + padding: 40px 0px; + } - section.links { - flex-direction: row; - width: 95vw; - padding: 0 55px; - } + section.links { + flex-direction: row; + width: 95vw; + padding: 0 55px; + } - section.block-option { - width: 95vw; - } + section.block-option { + width: 95vw; + } - div.checklist div x { - overflow: hidden; - } + div.checklist div x { + overflow: hidden; + } } html.mobile img, html.mobile svg { - margin-right: 10px; - height: 30px; - width: 30px; - color: var(--text); + margin-right: 10px; + height: 30px; + width: 30px; + color: var(--text); } html.mobile div.block { - padding: 0 15px; - justify-content: space-between; - display: flex; - align-items: center; - margin-top: 20px; - margin-bottom: 20px; + padding: 0 15px; + justify-content: space-between; + display: flex; + align-items: center; + margin-top: 20px; + margin-bottom: 20px; } html.mobile div.block input[type="checkbox"] { - width: 58px; - height: 30px; + width: 58px; + height: 30px; } html.mobile div.block input[type="checkbox"]::before { - width: 24px; - height: 24px; - top: 3px; - left: 3.5px; + width: 24px; + height: 24px; + top: 3px; + left: 3.5px; } html.mobile div.block input[type="checkbox"]:checked::before { - left: 30px; + left: 30px; } html.mobile body.option { - flex-direction: column; - width: 100%; - padding: 0; - align-items: center; + flex-direction: column; + width: 100%; + padding: 0; + align-items: center; } - html.mobile section.links { - flex-direction: row; - width: 100%; - padding: 0 55px; + flex-direction: row; + width: 100%; + padding: 0 55px; } html.mobile section.block-option { - width: 100%; -}
\ No newline at end of file + width: 100%; +} |