From 9f6ef213a3e988669e9f83997fd986295cc035be Mon Sep 17 00:00:00 2001
From: transcaffeine <transcaffeine@finally.coffee>
Date: Sun, 30 Mar 2025 13:23:52 +0200
Subject: [PATCH] refactor(javascript): wrap in IIFE, rebuild to respect
 none-variant

---
 js/pride.js | 188 +++++++++++++++++++++++++++-------------------------
 1 file changed, 96 insertions(+), 92 deletions(-)

diff --git a/js/pride.js b/js/pride.js
index f9aaa2d..14f36e6 100644
--- a/js/pride.js
+++ b/js/pride.js
@@ -1,96 +1,100 @@
-const flags = [
-	{
-		id: 'pride',
-		colors: ['#E04641', '#DE7E41', '#E4D56F', '#55B85F', '#2473B5', '#6F5DA5'],
-		transform: 'rotate(90)'
-	}, {
-		id: 'trans',
-		colors: ['#55CDFC', '#F7A8B8', '#FFFFFF', '#F7A8B8', '#55CDFC'],
-		transform: 'rotate(90)'
-	}, {
-		id: 'pan',
-		colors: ['#FE218C', '#FFD800', '#21B1FF'],
-		transform: 'rotate(90)'
-	}, {
-		id: 'nonbinary',
-		colors: ['#FCF434', '#FFFFFF', '#9C59D1', '#2C2C2C'],
-		transform: 'rotate(90)'
-	}, {
-		id: 'bi',
-//		colors: ['#C42A6F', '#915392', '#1437A1'],
-		colors: ['#D60270', '#9B4F96', '#0038A8'],
-		transform: 'rotate(90)'
-	}, {
-		id: 'asexual',
-		colors: ['#000000', '#9F9F9F', '#FFFFFF', '#5E1984'],
-		transform: 'rotate(90)'
-	}, {
-		id: 'lesbian',
-		colors: ['#D52D00', '#EF7627', '#FF9A56', '#FFFFFF', '#D162A4', '#B55690', '#A30262'],
-		transform: 'rotate(90)'
-	}
-];
-
-const generateGradient = colors => {
-	const steps = colors.length;
-	return colors.map((color, index) => { return [
-		[color, (index / steps)],
-		[color, (index + 1) / steps]
-	]}).flat();
-};
-
-const generateStops = (colors, opacity) => {
-	return generateGradient(colors).map(([color, offset]) => {
-		return `<stop stop-color="${color}" stop-opacity="${opacity}" offset="${offset * 100}%"></stop>`;
-	});
-};
-
-const makeLinearGradientSvg = (id, colors, opacity, transform) => {
-	return `<svg xmlns="http://www.w3.org/2000/svg" id="svg-${id}" preserveAspectRatio="none" width="100%" height="100%">
-		  <defs>
-		    <linearGradient id="gradient-${id}" gradientTransform="${transform}">
-		      ${generateStops(colors, opacity).join('\n')}
-		    </linearGradient>
-		  </defs>
-		  <style>
-		    rect { height: 100%; width: 100%; }
-		  </style>
-		  <rect fill="url(#gradient-${id})" width="100%" height="100%" />
-		</svg>`;
-};
-
-flags.forEach(flag => {
-	const svg_html = makeLinearGradientSvg(flag.id, flag.colors, flag.opacity ?? '0.8', flag.transform ?? 'rotate(0)');
-	const container = document.createElement('div');
-	container.classList.add('hidden-visually');
-	container.ariaHidden = true;
-	container.innerHTML = svg_html;
-	const style_c = document.createElement('style');
-	style_c.textContent = `
-	body {
-		--image-background-pride-${flag.id}: url('data:image/svg+xml;base64,${btoa(svg_html)}');
-		--image-background-pride-gradient-${flag.id}: url("#gradient-${flag.id}");
-	}
-	`;
-	document.body.prepend(container);
-	document.head.prepend(style_c);
-});
-
-fetch(OC.generateUrl('/apps/pride_flags/settings'))
-	.then(response => response.json())
-	.then(({folderVariant, buttonVariant}) => {
-		if (document.querySelector('head > style#pride_flag_settings') == null) {
-			const node = document.createElement('style');
-			node.id = 'pride_flag_settings';
-			document.head.prepend(node);
+(function(window) {
+	const flags = [
+		{
+			id: 'pride',
+			colors: ['#E04641', '#DE7E41', '#E4D56F', '#55B85F', '#2473B5', '#6F5DA5'],
+			transform: 'rotate(90)'
+		}, {
+			id: 'trans',
+			colors: ['#55CDFC', '#F7A8B8', '#FFFFFF', '#F7A8B8', '#55CDFC'],
+			transform: 'rotate(90)'
+		}, {
+			id: 'pan',
+			colors: ['#FE218C', '#FFD800', '#21B1FF'],
+			transform: 'rotate(90)'
+		}, {
+			id: 'nonbinary',
+			colors: ['#FCF434', '#FFFFFF', '#9C59D1', '#2C2C2C'],
+			transform: 'rotate(90)'
+		}, {
+			id: 'bi',
+	//		colors: ['#C42A6F', '#915392', '#1437A1'],
+			colors: ['#D60270', '#9B4F96', '#0038A8'],
+			transform: 'rotate(90)'
+		}, {
+			id: 'asexual',
+			colors: ['#000000', '#9F9F9F', '#FFFFFF', '#5E1984'],
+			transform: 'rotate(90)'
+		}, {
+			id: 'lesbian',
+			colors: ['#D52D00', '#EF7627', '#FF9A56', '#FFFFFF', '#D162A4', '#B55690', '#A30262'],
+			transform: 'rotate(90)'
 		}
-		const style_settings = document.querySelector('head > style#pride_flag_settings');
-		style_settings.textContent = `
-			body {
-				--image-background-pride-button: var(--image-background-pride-${buttonVariant});
-				--image-background-pride-folder: var(--image-background-pride-${folderVariant});
-				--image-background-pride-button-gradient: var(--image-background-pride-gradient-${buttonVariant});
-				--image-background-pride-folder-gradient: var(--image-background-pride-gradient-${folderVariant});
+	];
+
+	const generateGradient = colors => {
+		const steps = colors.length;
+		return colors.map((color, index) => { return [
+			[color, (index / steps)],
+			[color, (index + 1) / steps]
+		]}).flat();
+	};
+
+	const generateStops = (colors, opacity) => {
+		return generateGradient(colors).map(([color, offset]) => {
+			return `<stop stop-color="${color}" stop-opacity="${opacity}" offset="${offset * 100}%"></stop>`;
+		});
+	};
+
+	const makeLinearGradientSvg = (id, colors, opacity, transform) => {
+		return `<svg xmlns="http://www.w3.org/2000/svg" id="svg-${id}" preserveAspectRatio="none" width="100%" height="100%">
+			  <defs>
+			    <linearGradient id="gradient-${id}" gradientTransform="${transform}">
+			      ${generateStops(colors, opacity).join('\n')}
+			    </linearGradient>
+			  </defs>
+			  <style>
+			    rect { height: 100%; width: 100%; }
+			  </style>
+			  <rect fill="url(#gradient-${id})" width="100%" height="100%" />
+			</svg>`;
+	};
+
+	const generateCssBackgroundRules = (type, variant) => `
+		--image-background-pride-${type}: var(--image-background-pride-${variant});
+		--image-background-pride-${type}-gradient: var(--image-background-pride-gradient-${variant});
+	`;
+
+	flags.forEach(flag => {
+		const svg_html = makeLinearGradientSvg(flag.id, flag.colors, flag.opacity ?? '0.8', flag.transform ?? 'rotate(0)');
+		const container = document.createElement('div');
+		container.classList.add('hidden-visually');
+		container.ariaHidden = true;
+		container.innerHTML = svg_html;
+		const style_c = document.createElement('style');
+		style_c.textContent = `
+		body {
+			--image-background-pride-${flag.id}: url('data:image/svg+xml;base64,${btoa(svg_html)}');
+			--image-background-pride-gradient-${flag.id}: url("#gradient-${flag.id}");
 		}
 		`;
+		document.body.prepend(container);
+		document.head.prepend(style_c);
 	});
+
+	fetch(OC.generateUrl('/apps/pride_flags/settings'))
+		.then(response => response.json())
+		.then(({folderVariant, buttonVariant}) => {
+			if (document.querySelector('head > style#pride_flag_settings') == null) {
+				const node = document.createElement('style');
+				node.id = 'pride_flag_settings';
+				document.head.prepend(node);
+			}
+			const style_settings = document.querySelector('head > style#pride_flag_settings');
+			const rules = `body {
+				${(folderVariant !== 'none') ? generateCssBackgroundRules('folder', folderVariant) : ''}
+				${(buttonVariant !== 'none') ? generateCssBackgroundRules('button', buttonVariant) : ''}
+			}`;
+			style_settings.textContent = rules;
+		});
+})(window);