Made side bar links dim when disabled #705

src/assets/javascripts/services.js

@@ -16,6 +16,17 @@ function init() {
 init()
 browser.storage.onChanged.addListener(init)
 
+// function sendEnabledFrontends() {
+// 	return new Promise(resolve => {
+// 		console.log('sendEnabledFrontends')
+// 		let enabledFrontends = []
+// 		for (const service in config.services) {
+// 			if (!options[service].enabled) continue
+// 			enabledFrontends.push(options[service].frontend)
+// 		}
+// 	})
+// }
+
 function all(service, frontend, options, config) {
 	let instances = []
 	if (!frontend) {
@@ -720,7 +731,8 @@ const defaultInstances = {
 	'mikuInvidious': ['https://mikuinv.resrv.org'],
 	"tent": ['https://tent.sny.sh'],
 	"wolfreeAlpha": ['https://gqq.gitlab.io', 'https://uqq.gitlab.io'],
-	"libreSpeed": ['https://librespeed.org']
+	"libreSpeed": ['https://librespeed.org'],
+	'jitsi': ['https://meet.jit.si', 'https://8x8.vc']
 }
 
 function initDefaults() {

src/pages/options/index.js

@@ -35,7 +35,6 @@ async function changeFrontendsSettings(service) {
 			if (typeof divs[service].frontend !== "undefined") {
 				if (frontend == divs[service].frontend.value) {
 					frontendDiv.style.display = ""
-					console.log(config.services[service].frontends[frontend].localhost)
 					if (config.services[service].frontends[frontend].localhost === true) {
 						document.getElementById(`${service}-instance-div`).style.display = ""
 
@@ -72,14 +71,25 @@ async function changeFrontendsSettings(service) {
 }
 
 async function loadPage(path) {
+	options = await utils.getOptions()
 	for (const section of document.getElementById("pages").getElementsByTagName("section")) section.style.display = "none"
 	document.getElementById(`${path}_page`).style.display = "block"
 
-	for (const a of document.getElementById("links").getElementsByTagName("a")) {
+	for (const element of document.getElementsByClassName("title")) {
+		const a = element.getElementsByTagName('a')[0]
 		if (a.getAttribute("href") == `#${path}`) {
-			a.classList.add("selected")
+			element.classList.add("selected")
+		} else {
+			element.classList.remove("selected")
+		}
+	}
+
+	for (const service in config.services) {
+		console.log(service, options[service].enabled)
+		if (options[service].enabled) {
+			document.getElementById(`${service}-link`).style.opacity = 1
 		} else {
-			a.classList.remove("selected")
+			document.getElementById(`${service}-link`).style.opacity = 0.4
 		}
 	}
 
@@ -89,13 +99,11 @@ async 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]
 			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")

src/pages/stylesheets/styles.css

@@ -50,6 +50,15 @@ div.some-block input[type="checkbox"] {
 	text-decoration: none;
 	width: min-content;
 	color: var(--text);
+	transition: .1s;
+}
+
+.title:hover {
+	opacity: 1 !important;
+}
+
+.title:hover a {
+	color: var(--active);
 }
 
 img,
@@ -147,7 +156,11 @@ section.links a {
 }
 
 section.links a:hover,
-section.links a.selected {
+section.links .selected {
+	opacity: 1 !important;
+}
+
+section.links .selected a {
 	color: var(--active);
 }
 

src/pages/widgets/links.pug

@@ -5,7 +5,7 @@ section(class="links" id="links")
             span(data-localise="__MSG_general__") General
 
     each val, key in services
-        div(class="title")
+        div(class="title" id=`${key}-link`)
             a(href="#"+key)
                 if services[key].imageType == 'svgMono'
                     img(class='dark' src=`/assets/images/${key}-icon.svg`)