Added plus button next to public instances

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]
@@ -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)
-		}
+
 
 		for (const frontend in config.services[service].frontends) {
 			if (config.services[service].frontends[frontend].instanceList) {
@@ -95,11 +105,9 @@ function loadPage(path) {
 	}
 }
 
-async function processCustomInstances(frontend, document) {
+async function calcCustomInstances(frontend) {
 	let options = await utils.getOptions()
 	let customInstances = options[frontend]
-
-	function calcCustomInstances() {
 	document.getElementById(frontend).getElementsByClassName("custom-checklist")[0].innerHTML = customInstances
 		.map(
 			x => `
@@ -114,19 +122,22 @@ async function processCustomInstances(frontend, document) {
 			  <hr>`
 		)
 		.join("\n")
-
-		customInstances = options[frontend]
 	for (const item of customInstances) {
 		document.getElementById(frontend).getElementsByClassName(`clear-${item}`)[0].addEventListener("click", async () => {
-				let index = customInstances.indexOf(item)
+			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())
+			browser.storage.local.set({ options }, () => calcCustomInstances(frontend))
 		})
 	}
 }
-	calcCustomInstances()
+
+async function processCustomInstances(frontend, document) {
+	let options = await utils.getOptions()
+	let customInstances = options[frontend]
+
+	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,7 +166,10 @@ 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 = [
 						`<div class="some-block option-block">
 						<h4>${utils.camelCase(network)}</h4>
 					</div>`,
@@ -174,10 +188,34 @@ function createList(frontend, networks, document, redirects, blacklist) {
 										<x>
 											<a href="${x}" target="_blank">${x}</a>${warnings}
 										</x>
+										<button class="add add-${x}">
+											<svg xmlns="https://www.w3.org/2000/svg" height="20px" viewBox="0 0 24 24" width="20px" fill="currentColor">
+												<path d="M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z" />
+											</svg>
+										</button>
 						  			</div>`
 							}),
 						'<br>'
 					].join("\n<hr>\n")
+
+				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 =

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,11 +67,9 @@ function importError() {
 const resetSettings = document.getElementById("reset-settings")
 resetSettings.addEventListener("click", async () => {
 	resetSettings.innerHTML = "..."
-	browser.storage.local.clear(async () => {
 	await servicesHelper.initDefaults()
 	location.reload()
 })
-})
 
 let themeElement = document.getElementById("theme")
 themeElement.addEventListener("change", event => {

src/pages/options/widgets/services.pug

@@ -8,7 +8,9 @@ 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(id=service+"-opacity")
 
             div(class="some-block option-block")
                 h4(data-localise="__MSG_show_in_popup__") Show in Popup