_res/_custom.js

function gradioCustomJS() {
	console.log("gradioCustomJS Started")

	// MARK: berechne Helligkeit der Akzentfarbe
	function berechneHelligkeit(rgb) {
		const match = rgb.match(/^rgb\((\d+),\s*(\d+),\s*(\d+)\)$/)
		if (!match) {
			throw new Error("Ungültiges Farbformat")
		}

		const r = parseInt(match[1]) / 255
		const g = parseInt(match[2]) / 255
		const b = parseInt(match[3]) / 255

		const rLin = r <= 0.03928 ? r / 12.92 : Math.pow((r + 0.055) / 1.055, 2.4)
		const gLin = g <= 0.03928 ? g / 12.92 : Math.pow((g + 0.055) / 1.055, 2.4)
		const bLin = b <= 0.03928 ? b / 12.92 : Math.pow((b + 0.055) / 1.055, 2.4)

		const luminanz = 0.2126 * rLin + 0.7152 * gLin + 0.0722 * bLin

		return luminanz
	}

	// MARK: Textfarbe bestimmen
	function anpasseTextfarbe(farbe) {
		const luminanz = berechneHelligkeit(farbe)
		const textFarbe = luminanz > 0.4 ? "var(--neutral-950)" : "var(--neutral-50)"
		console.log("Luminanz: " + luminanz + " Text-Farbe: " + textFarbe)

		return textFarbe
	}

	// MARK: Body Styles
	const body = document.querySelector("body")
	body.className = "dark"

	// MARK: Catppuccin colors
	const usedColor = "rgb(166, 227, 161)"
	body.style.setProperty("--cat-rosewater", "rgb(245, 224, 220)")
	body.style.setProperty("--cat-flamingo", "rgb(242, 205, 205)")
	body.style.setProperty("--cat-pink", "rgb(245, 194, 231)")
	body.style.setProperty("--cat-mauve", "rgb(203, 166, 247)")
	body.style.setProperty("--cat-red", "rgb(243, 139, 168)")
	body.style.setProperty("--cat-maroon", "rgb(235, 160, 172)")
	body.style.setProperty("--cat-peach", "rgb(250, 179, 135)")
	body.style.setProperty("--cat-yellow", "rgb(249, 226, 175)")
	body.style.setProperty("--cat-green", "rgb(166, 227, 161)")
	body.style.setProperty("--cat-teal", "rgb(148, 226, 213)")
	body.style.setProperty("--cat-sky", "rgb(137, 220, 235)")
	body.style.setProperty("--cat-sapphire", "rgb(116, 199, 236)")
	body.style.setProperty("--cat-blue", "rgb(137, 180, 250)")

	body.style.setProperty("--primary-600", usedColor)
	body.style.setProperty("--primary-50", "color-mix(in srgb, var(--primary-600) 5%, white)")
	body.style.setProperty("--primary-100", "color-mix(in srgb, var(--primary-600) 10%, white)")
	body.style.setProperty("--primary-200", "color-mix(in srgb, var(--primary-600) 20%, white)")
	body.style.setProperty("--primary-300", "color-mix(in srgb, var(--primary-600) 60%, white)")
	body.style.setProperty("--primary-400", "color-mix(in srgb, var(--primary-600) 70%, white)")
	body.style.setProperty("--primary-500", "color-mix(in srgb, var(--primary-600) 80%, white)")
	body.style.setProperty("--primary-700", "color-mix(in srgb, var(--primary-600) 80%, black)")
	body.style.setProperty("--primary-800", "color-mix(in srgb, var(--primary-600) 65%, black)")
	body.style.setProperty("--primary-900", "color-mix(in srgb, var(--primary-600) 40%, black)")
	body.style.setProperty("--primary-950", "color-mix(in srgb, var(--primary-600) 30%, black)")

	body.style.setProperty("--button-primary-background-fill", "var(--primary-600)")
	body.style.setProperty("--button-primary-background-fill-hover", "var(--primary-500)")
	body.style.setProperty("--blur-value", "0px")
	body.style.setProperty("--text-color-by-luminance", anpasseTextfarbe(usedColor))

	// MARK: Selectors & Elements
	const gradioApp = document.querySelector("gradio-app")
	const gradioContainer = document.querySelector("body > gradio-app > div.gradio-container")
	const alertModalElem = document.createElement("div")
	const alertModalElemP = document.createElement("p")
	const alertModalElemI = document.createElement("i")
	alertModalElemI.className = "fas fa-exclamation-circle"
	const alertModalElemSpan = document.createElement("span")
	alertModalElemSpan.id = "alertModalText"
	const alertModalElemButton = document.createElement("button")
	alertModalElemButton.className = "lg primary run-btn svelte-cmf5ev"
	alertModalElemButton.id = "alertModalBtn"
	alertModalElemButton.textContent = "Ok"
	alertModalElemP.id = "alertModalP"
	alertModalElemP.append(alertModalElemI, alertModalElemSpan)
	alertModalElem.id = "alertModal"
	alertModalElem.style.display = "none"
	alertModalElem.append(alertModalElemP, alertModalElemButton)
	//alertModalElem.innerHTML = '<p></p>'
	gradioApp.appendChild(alertModalElem)

	alertModalElemButton.addEventListener("click", () => {
		oldText = alertModalElemSpan.textContent
		alertModalElemButton.disabled = true
		alertModalElemSpan.innerHTML = 'Der "Ok" Button ändert nur diesen Text. 🫢<br/>In 2.5 Sekunden wird wieder die ursprüngliche Meldung gezeigt. Cool oder?'
		setTimeout(() => {
			alertModalElemSpan.textContent = oldText
			alertModalElemButton.disabled = false
			alertModalElemButton.textContent = "Noch mal?"
		}, 2500)
	})

	//component-15
	const tabNav = document.querySelector("div.tab-nav")
	tabNav.addEventListener("mouseover", () => {
		tabNav.addEventListener("wheel", (event) => {
			event.preventDefault()
			let scrollLeft = 0
			if (Math.sign(event.deltaY) < 0) {
				scrollLeft = tabNav.scrollLeft - 15
			}
			if (Math.sign(event.deltaY) > 0) {
				scrollLeft = tabNav.scrollLeft + 15
			}
			tabNav.scrollLeft = Math.max(0, Math.min(scrollLeft, tabNav.scrollWidth - tabNav.clientWidth))
		})
	})

	tabNav.addEventListener("mouseout", () => {
		tabNav.removeEventListener("wheel", (event) => {
			event.preventDefault()
			// const scrollLeft = tabNav.scrollLeft + 10
			// tabNav.scrollLeft = Math.max(0, Math.min(scrollLeft, tabNav.scrollWidth - tabNav.clientWidth))
		})
	})

	// MARK: Element-Ready function
	function elementReady(selector) {
		return new Promise((resolve, reject) => {
			const el = document.querySelector(selector)
			if (el) {
				resolve(el)
			}

			new MutationObserver((mutationRecords, observer) => {
				Array.from(document.querySelectorAll(selector)).forEach((element) => {
					resolve(element)
					observer.disconnect()
				})
			}).observe(document.documentElement, {
				childList: true,
				subtree: true,
			})
		})
	}

	// MARK: Mobile Check
	function istMobile() {
		// Überprüfen, ob das Gerät ein Touchscreen hat
		if ("ontouchstart" in window || (navigator.maxTouchPoints && window.innerWidth < 768)) {
			gradioContainer.classList.add("blur-container")
			body.style.setProperty("--blur-value", "12px")
			gradioApp.style.height = "calc(100vh - 120px)"
			alertModalElem.style.display = ""
			alertModalElemSpan.textContent = "Diese Seite ist nicht für mobile Geräte optimiert. Bitte besuche diese Seite von einem Desktop-Computer aus."
		} else if (window.innerWidth < 1024) {
			gradioContainer.classList.add("blur-container")
			body.style.setProperty("--blur-value", "12px")
			gradioApp.style.height = "calc(100vh - 120px)"
			alertModalElem.style.display = ""
			alertModalElemSpan.textContent = "Bildschirm Auflösung oder Fensterbreite zu gering. Bitte besuche diese Seite von einem Desktop-Computer aus."
		} else {
			gradioContainer.classList.remove("blur-container")
			body.style.setProperty("--blur-value", "0px")
			gradioApp.style.height = ""
			alertModalElem.style.display = "none"
			alertModalElemSpan.textContent = ""
		}
	}

	// MARK: Event Listeners
	window.addEventListener("resize", () => {
		console.log("Event Window resize.")
		istMobile()
	})

	elementReady("body > gradio-app > div.gradio-container").then((element) => {
		console.log("Element exist: " + element)
		istMobile()
	})

	return "Custom Gradio JS"
}