refactor(javascript): block controls during load and submit

refactor(javascript): wrap in IIFE, rebuild to respect none-variant
refactor: use string-backed enum for variant selection
2025-03-30 14:45:07 +02:00 · 2025-03-30 14:45:06 +02:00 · 2025-03-30 14:45:05 +02:00 · 2025-03-30 14:45:04 +02:00 · 2025-03-29 18:34:52 +01:00 · 2025-03-29 17:49:44 +01:00
10 changed files with 261 additions and 113 deletions
--- a/appinfo/info.xml
+++ b/appinfo/info.xml
@ -20,7 +20,7 @@ Currently supported pride flags:
 - Lesbian pride flag

 more flags to follow soon!</description>
-	<version>1.1.1</version>
+	<version>1.1.2</version>
 	<licence>gpl3</licence>
 	<author mail="transcaffeine@finally.coffee" homepage="https://github.com/finally-coffee/nextcloud-pride-flags">transcaffeine</author>
 	<namespace>PrideFlags</namespace>
@ -28,7 +28,7 @@ more flags to follow soon!</description>
 	<bugs>https://github.com/finally-coffee/nextcloud-pride-flags/issues</bugs>
 	<screenshot>https://raw.githubusercontent.com/finally-coffee/nextcloud-pride-flags/main/img/pride_flag_variants.png</screenshot>
 	<dependencies>
-		<nextcloud min-version="28" max-version="30"/>
+		<nextcloud min-version="29" max-version="31"/>
 	</dependencies>
 	<settings>
 		<admin-section>OCA\PrideFlags\Settings\AdminSection</admin-section>
--- a/appinfo/signature.json
+++ b/appinfo/signature.json
@ -0,0 +1,36 @@
+{
+    "hashes": {
+        "CHANGELOG.md": "1fc8374d175fd50d275f223b60686861ee85ea93e15bfe723c50e49ea1ae1c8fe4a1731a84d16f1ad2edea71312a50f76b6f70ad990a240fe474b26444ee06da",
+        "CODE_OF_CONDUCT.md": "79d6ec5e748e72fe192dd00b2c73ab849edc45cc50afffde00556ac164c783a305c5f035c2f42864558f43b6ed242111c5bc1535bcc060f57e469366711f15ff",
+        "LICENSE.md": "bfb959226672571ef73e232607a7f7279af2bab2d7253bfd7f28e19dae7ede4637ce3d1225cd95b26881e4bedd14f3a7861629e5dadce24acedfafe5401fdb14",
+        "README.md": "8e09e33145760e0f9f2e666a4c739511224867662c8d1a82e9ea49b1bcdd3a73fc270f97284372a0853cce3eff1c8d37c4a7993ca595ace9220ce154715e14b8",
+        "appinfo\/info.xml": "6a3f0cec754b3be140b1c1ef64d733c7603929bb5d9da1a9340b575ce0ab34a75d5d549e895ce0abb79c7ef5d85393f5af4c7f432b9e4628d4633a5df84de243",
+        "appinfo\/routes.php": "063d70ee1c16c287d821164cead2c91e97411b1b02f078034d249dfa60ae947b602ce052b6fa051ae6e73b4a9b4d61a29aad3f310c1e16b39b1546521967d1e9",
+        "composer.json": "26491fea6a8b5bd0b8f5510d25b6d35dded7de21ea9264b3b22bbda1b43a8846b43978992d543d01f97b029681f3bf2fcb277cf7c60d79792f7e4091ca1afbcb",
+        "css\/pride.css": "a038418ee78042c0037b6cb22224c9ab5abae6feb6645f5b952f2656bff25851509f87e4776ba1e47347fcbc1dd8a0193fbaf4a1962fe8e0274d157d431ededa",
+        "img\/pride_flag_variants.png": "1487267bd98cd175de957bdb55705667c0887f4a48c57808a1dfaa7f86c5e72245b39d1438d01af38bdea522d8d8f72e4d8708977a0d21bc92e35c157736626b",
+        "js\/pride-settings-global.js": "8a3f9c0a09b14ea6e6e00cb28aae62964b202c764a75d678342a7e3a377134d55c7ec9bf2fb068104b681df4ceb67da348ad1fd562bc78b12c425ab889ce7436",
+        "js\/pride-settings.js": "81a6d9ab205ccfc0f1a5ae6111301401af09aa6517dd40211e88351a55f62e1b22cd13942f12d3eb14e8e72cdd70453574fd357dcc6ab4b99505537a018be2ab",
+        "js\/pride.js": "f3f850ff8db4205e2f6504742f7259636b462df64047d2ab9739193333a00fc375a684080f087bb5d7e42387186248cce058d1d6360f35d5919d9cc716209310",
+        "lib\/AppConstants.php": "8ec88d84fd2d87c9862aa7761228f927ae3725ea0820feb3e04e44f142a9f0f2974f7f97a076309aa1128e4fb510a26b32307bfc4b47bf56ffcef4952fecc639",
+        "lib\/AppInfo\/Application.php": "6b40646e8df0abc2e32403ab0417b7b244ac93bcd1cffdc94fd9a5bd9498abaa3108eddcf8ef1d52710c8146035784a0a2b034de6c4b1701a3ac49f81e2bfeb6",
+        "lib\/Controller\/SettingsController.php": "153365a950353a03914b1bc20dc6e23dc223b50feb173f37b5f05f8ff90b13f7a7711ec6b1547652869aa55884a04365bb1d604d989abbfa327567d9db1408c0",
+        "lib\/Settings\/AdminSection.php": "80baac4566a681ba0bd5141cb21299be1049fbcc944cfe33d1ea10e8103dfc8b064100bbfba75d0c63cc6f10aed3cbf4293d3ab2620cbc5ceef55bee5049752a",
+        "lib\/Settings\/AdminSettings.php": "bb46351c3d81acfb5299d24e0c7495b48697f00764018de530b9ab02366e8f815834df2eac031a1db2aad3fdde891ed0afd23b10915e3b8d918ca5d4e2b4f880",
+        "lib\/Settings\/AppSettings.php": "85bce86e18e1987fdd2779e66f90a92713bd676743928bfa4a0a7612fa32b1949c955db963d6dc553ab30ab167f018b841b13a268290514c8b56b0194b07408b",
+        "lib\/Settings\/PersonalSection.php": "afd3df8e9cbb1461f03dc20f389270a0418a5e126b3b3f130a8c2389d49f4048c45a9e3d9412428da0ed938e0a6c6b295bda5d6c4818c8241d35bd84f3b7f9b8",
+        "lib\/Settings\/PersonalSettings.php": "6412edc1d3d63a76b8c44dfd954de377331bacdd36318ad84c8eb83ab42a35724e288440a390981d8eb1d8c45f7c77adaf262aba6881c29992fa8b56c97cce48",
+        "openapi.json": "88b7b7594c588dfa0ef73fe7f63f78ab2823b7175ed746bb54691f99fb424e028f34a942160d967a36c02e06907d1b700c886f2bf25c1789098eb0b895ff4983",
+        "package.json": "3d29d37bc29d9f4744d940cdbc5a30bafc062f76d89e8baced86e725d63199b4392cc85e8a4280e34bac6d19e8282b22dacd29485fcfdbff63f5e3d49c9309dc",
+        "psalm.xml": "1d0e5ca734ca979d8d088e5440486e4b148dcd57d52c5733883bcf650b8641b93559828109ad22ee3da288c7a3414f987263f6ffadc940576cd3c0c64a575395",
+        "stylelint.config.js": "5d09ed0f9ee75fd69a3dd8127af0fe485021319795ff077b9de4ab8f42c42bce0ab5a6bfc83114ab87c341a9bc50ccb9baeb9db0506b1914f91389c543631aa9",
+        "templates\/server-settings.php": "d98eb5cd9bc324216d3957c291900c872d4767778ab61024d2d7a0afd8807d301d95b85fa13d60ed52e613b6bacbfec4f420f14e7cbe8d2eccc29f3419bd8194",
+        "templates\/settings.php": "77f78f17e330fa1fc41997cb9586cd9eda974505003730201ea3a98a2c6ab2684d3b85b55f49e836769aff7fbbaef6ceeba5ea9bbb825178fc683a1a03f7ea8b",
+        "vendor-bin\/cs-fixer\/composer.json": "5072a95c57d2bf02e310f9f2604eb01de003dbdaec656f0fb68d34250754a7431eef2baf3056364a9b7129d3ec08bc1cb68a21f1defa61bba90aa0b4b70c50de",
+        "vendor-bin\/openapi-extractor\/composer.json": "aad0275d639f44d89f4f495ca8f248ed089a948d7aeed2602432f163cf23bb8a6c3f8eee7446c7c20ca1febd6e1a364da090075cc2b288ce22cb010627441b4c",
+        "vendor-bin\/phpunit\/composer.json": "ba4520b430d60a61ba9a236e3064453ce4895bd7d76931f049b2dbdeb174f52f763ef6cf1e645b5743364d592ba5b2e84837611661e9b52a01a738c6e2b369c9",
+        "vendor-bin\/psalm\/composer.json": "757e0f58bd0d6fe1538d9b55dfd41613ec94dd88d832656344a6ef03749025b3cea15549cc25268d7eadde09446e90dcf6e84160ed3458c5e1dd211a97821cbe"
+    },
+    "signature": "Y3BW8uV0P0U8fj+qWbruRuMfTq4AWue+lXdaUcuhQY\/OTU0jZpQ3jzP1N2syBfVJRgFoJ2wohVyNaZzAQ0Ob5C4JPxfHDt4jAyzVuRbt\/m1tfVBEOrQ4gxwZqAcSO7NsGCDtqi3yIKh\/fnnVlv9YxZTCXGVTP9RQ4GoX6XATmv7xyd5VftoFpcRT\/H6SdwyLvbN+4ixbukKUOlB5wrfv4ONneXHdSUHkxgs2Eh0ZWDFupoQ6RVANOaGXpfOun2Dkp30hYjjjjpLeQRE6IOAROlGqwS0IJnqOv5WQhqYVus685DpjGDAAJb7z3PfjYZTGXAz+qa20XQm2UFoKIwBoE4RpvQBIvPPdbVthMcOmzQKP65wHvDUdCRBWMG0nwevln9uc7tuENd+B6iMb5ewGFaD\/sVxRy1lm6Z2XvcTnEzhCfqAOqGMIV4brFkLh6WZQcBc4h\/KfT0XV4fydUF2aFstPBjMJzrei2EqGVkyg1atX1zg\/vgOaqRbvKMordTuF+yl7rhskpUtF2Ic0EOFLuBM8iFNZcwP9i2MDODJdNhgGzmfmgorKvl9XF\/V8MWZgDDwWIOhZ4oCxonkONwlHCfLalvflNlSkxAJi1UMlwNH3FZo8uFPwmMWON0B4\/fw5LSfyY\/ptWZE3qMBMJb4jA67rYy3EYW24mM5dVvQ9ljo=",
+    "certificate": "-----BEGIN CERTIFICATE-----\r\nMIIEBjCCAu4CAhJwMA0GCSqGSIb3DQEBCwUAMHsxCzAJBgNVBAYTAkRFMRswGQYD\r\nVQQIDBJCYWRlbi1XdWVydHRlbWJlcmcxFzAVBgNVBAoMDk5leHRjbG91ZCBHbWJI\r\nMTYwNAYDVQQDDC1OZXh0Y2xvdWQgQ29kZSBTaWduaW5nIEludGVybWVkaWF0ZSBB\r\ndXRob3JpdHkwHhcNMjQwODA1MDgxMzUzWhcNMzQxMTExMDgxMzUzWjAWMRQwEgYD\r\nVQQDDAtwcmlkZV9mbGFnczCCAiIwDQYJKoZIhvcNAQEBBQADggIPADCCAgoCggIB\r\nANXCGo6k9P+rMfkXcCizkbxWha9Y5LlMFJxPCE982QUIDqDuuIxUPbHPwIOaLzAr\r\nRZXJY1wEVuNZBmxeavgWvRgYowzRI3UhnwXzQ923hrX39HC84GvoFyXPMw5vgitT\r\nM+veKjDzWnM1GK7ySYebyyR37wZKizMtPpvjqB92MoZmXCn4pOvmmQJx1BMyL8PE\r\nC9cpur++MoYEdUCO27pAY930NdCddDtLi59S6tj2Jkfs9j\/9HO\/3pP7D7hJKmvv2\r\nxy3EG5lMd67KvLzUgG9c8sQZAPpvcGyg0jDcmZqQZQtmbLEQL64HhA6T\/k3FLvh3\r\nldnY2gXViprvGlpS6sqOBQNA5Giqnq6BUhxXWbOxJzKtbdSUPExDeSSK2aDtvXyI\r\nQsA+V7jVlxKg1tcbQ6khhCk2H3Fep8YOLwRE16nVuGP+CSiabOBEKo06qb7K6w+D\r\n\/YsSneDJCED2tuiedFuNjjJPpQK0vmg+hU355ol7Lb5JP1WnAaK7yCyFxcMmD2M5\r\ntFg+acoK3Gyt4a+ptzsXJmAnsppw6mcCgv3hcVFBI9gkQyDgHThZ788gzzWU7soX\r\n06TiZkThYx1Mn1TpRNtbfjMjYQ66FxSRXLB0niJkNJgJ5qhn8nwlfXJDbSC8c4\/H\r\nugIehHOAWI3l5tQNM4pc9wVICBHibbmHkik\/wp0ApGQHAgMBAAEwDQYJKoZIhvcN\r\nAQELBQADggEBAAgLL\/2oYFeL5vJ4eQMjWv3ekIWdMNWvMUOhbAw5eo14ZeZ000Z2\r\neZD7AvMJ1qfA59VHJ5BSVTs\/x\/XTgCtxiWD\/8g+LJp9u8U2rcucgWuiUOA+egyBI\r\n6IffGBc1UqHs6a5dTI2oFgaG3XnM2CLJ3xSoqhv5MMhGJ5fg+wK3o9wk6z10Hfvn\r\nIovtXA9Jz6+cu4dQOkW1TlV1hkyLDGsI5NeZJW+lxHcA9moC++9+8msVPl75CDQO\r\nspB9BZ\/I9SunjT\/wxpTlet5G+G7XW6AO41mcT+Q4bKDqBrnCsyuZZKg39Yp0rODw\r\nbfzhyFTTUFHI\/ydZl67yscmH2fDxU1eZ8Sk=\r\n-----END CERTIFICATE-----"
+}
--- a/bin/nextcloud-app-release.sh
+++ b/bin/nextcloud-app-release.sh
@ -0,0 +1,66 @@
+#!/usr/bin/env bash
+set -euo pipefail -o errtrace
+
+APP_NAME="${1:-pride_flags}"
+VERSION="${2:-1.1.3-rc.1}"
+REPO=`pwd`
+CERT_DIR="$HOME/.nextcloud/certificates"
+TARBALL="$APP_NAME-$VERSION.tar.gz"
+TARBALL_SIG="$TARBALL.sig"f
+CONTAINER_NAME="nextcloud-app-signing-container"
+CONTAINER_IMAGE="${3:-docker.io/library/nextcloud:31.0.2}"
+CONTAINER_APP_LOC="/var/www/html/custom_apps/$APP_NAME"
+
+_SLEEP="45"
+
+traperr() {
+    echo "ERROR: ${BASH_SOURCE[1]} at about ${BASH_LINENO[0]}"
+    mv ../nextcloud-pride-flags-git .git
+    sudo docker stop "${CONTAINER_NAME}"
+    sudo docker rm "${CONTAINER_NAME}"
+}
+trap traperr ERR
+
+mkdir ../nextcloud-pride-flags-tmp
+mv .git ../nextcloud-pride-flags-tmp/.git
+mv bin ../nextcloud-pride-flags-tmp/bin
+mv vendor-bin ../nextcloud-pride-flags-tmp/vendor-bin
+
+sudo docker run --hostname nc31.local \
+    -e NEXTCLOUD_ADMIN_USER=admin \
+    -e NEXTCLOUD_ADMIN_PASSWORD=admin \
+    --name "${CONTAINER_NAME}" --detach \
+    -v "${CERT_DIR}/:/privkey/:ro" \
+    -v "${REPO}/:${CONTAINER_APP_LOC}/:rw" \
+    "${CONTAINER_IMAGE}"
+
+echo "Sleep ${_SLEEP}s for container startup"
+sleep "$_SLEEP"
+sudo docker exec -it ${CONTAINER_NAME} php occ integrity:sign-app \
+    --path="${CONTAINER_APP_LOC}" \
+    --privateKey="/privkey/${APP_NAME}.key" \
+    --certificate="/privkey/${APP_NAME}.crt"
+
+sudo docker stop "${CONTAINER_NAME}"
+sudo docker rm "${CONTAINER_NAME}"
+
+mv ../nextcloud-pride-flags-tmp/.git .git
+mv ../nextcloud-pride-flags-tmp/bin bin
+mv ../nextcloud-pride-flags-tmp/vendor-bin vendor-bin
+
+echo "App $APP_NAME signed @ ${VERSION}. Commit the appinfo/signatures.json now and press enter."
+read -p "Press Enter to continue" < /dev/tty
+
+tar --exclude-vcs --exclude='./bin' --exclude='./vendor-bin' -czvf "${TARBALL}" "$REPO"
+
+# verify content
+echo "Tarball '${TARBALL}' content:"
+tar -tf ${TARBALL}
+
+echo "Tarball signature:"
+# sign tarball
+openssl dgst -sha512 -sign "${CERT_DIR}/${APP_NAME}.key" $TARBALL \
+	| openssl base64 \
+	| tee "${TARBALL_SIG}"
+
+
--- a/js/pride-settings-global.js
+++ b/js/pride-settings-global.js
@ -3,18 +3,25 @@
 	const button_selector = document.querySelectorAll('.pride_flags_server_settings .server-settings.button-flavour select')[0];
 	const submit_button = document.querySelectorAll('.pride_flags_server_settings .settings-pride-submit');
 	const container = document.querySelector('.pride_flags_server_settings .settings-section');
+	const inputs = [
+		folder_selector,
+		button_selector,
+	];

 	function load() {
+		window.pride_flags.util.settings.blockInputs(inputs);
 		fetch(OC.generateUrl('/apps/pride_flags/settings/global'))
 			.then(res => res.json())
 			.then(({folderVariant, buttonVariant}) => {
 				folder_selector.value = folderVariant;
 				button_selector.value = buttonVariant;
+				window.pride_flags.util.settings.unblockInputs(inputs);
 				container.classList.remove('hidden');
 			});
 	}

 	function save() {
+		window.pride_flags.util.settings.blockInputs(inputs);
 		const payload = {
 			folderVariant: folder_selector.value,
 			buttonVariant: button_selector.value,
@ -30,7 +37,10 @@
 			if (response.ok) {
 				window.location.reload();
 			}
-		})
+		}).catch(err => {
+			console.err(err);
+			window.pride_flags.util.settings.unblockInputs(inputs);
+		});
 	}
 	submit_button.forEach(node => node.addEventListener('click', e => save()));

--- a/js/pride-settings.js
+++ b/js/pride-settings.js
@ -3,18 +3,25 @@
 	const button_selector = document.querySelectorAll('.pride_flags_user_settings .user-settings.button-flavour select')[0];
 	const submit_button = document.querySelectorAll('.pride_flags_user_settings .settings-pride-submit');
 	const container = document.querySelector('.pride_flags_user_settings .settings-section');
+	const inputs = [
+		folder_selector,
+		button_selector,
+	];

 	function load() {
+		window.pride_flags.util.settings.blockInputs(inputs);
 		fetch(OC.generateUrl('/apps/pride_flags/settings'))
 			.then(res => res.json())
 			.then(({folderVariant, buttonVariant}) => {
 				folder_selector.value = folderVariant;
 				button_selector.value = buttonVariant;
+				window.pride_flags.util.settings.unblockInputs(inputs);
 				container.classList.remove('hidden');
 			});
 	}

 	function save() {
+		window.pride_flags.util.settings.blockInputs(inputs);
 		const payload = {
 			folderVariant: folder_selector.value,
 			buttonVariant: button_selector.value,
@ -30,7 +37,10 @@
 			if (response.ok) {
 				window.location.reload();
 			}
-		})
+		}).catch(err => {
+			window.pride_flags.util.settings.unblockInputs(inputs);
+			console.err(err);
+		});
 	}
 	submit_button.forEach(node => node.addEventListener('click', e => save()));

--- a/js/pride.js
+++ b/js/pride.js
@ -1,96 +1,112 @@
-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: ['#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});
+	`;
+	const setDisabledState = (nodes, state) => nodes.forEach(node => node.disabled = !!state);
+	const blockInputs = nodes => setDisabledState(nodes, true);
+	const blockInputs = nodes => setDisabledState(nodes, false);
+
+	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.pride_flags = {
+		flags,
+		"util" : {
+			"settings": {
+				blockInputs,
+				unblockInputs,
+				"_setDisabledState": setDisabledState,
+			},
+		},
+	};
+})(window);
--- a/lib/AppConstants.php
+++ b/lib/AppConstants.php
@ -6,4 +6,14 @@ namespace OCA\PrideFlags;

 abstract class AppConstants {
 	public const APP_ID = 'pride_flags';
+	public enum Variants: string {
+		case PRIDE = "Pride";
+		case TRANS = "Trans Pride";
+		case PAN = "Pansexual Pride";
+		case BI = "Bisexual Pride";
+		case ASEXUAL = "Asexual Pride";
+		case LESBIAN = "Lesbian Pride";
+		case NONBINARY = "Non-binary Pride";
+		case NONE = "No customisation";
+	}
 }
--- a/lib/Settings/AppSettings.php
+++ b/lib/Settings/AppSettings.php
@ -18,11 +18,16 @@ class AppSettings {
 	}

 	public function setStringSetting($userId, string $key, string $value): void {
-		$this->config->setUserValue(AppConstants::APP_ID, $userId, $key, $value);
+		// Check for valid Variant here
+		if (AppConstants\Variants::tryFrom($value) != null) {
+			$this->config->setUserValue(AppConstants::APP_ID, $userId, $key, $value);
+		}
 	}

 	public function setAppStringSetting(string $key, string $value): void {
-		$this->config->setAppValue(AppConstants::APP_ID, $key, $value);
+		if (AppConstants\Variants::tryFrom($value) != null) {
+			$this->config->setAppValue(AppConstants::APP_ID, $key, $value);
+		}
 	}

 	public function getAll($userId): array {
--- a/package.json
+++ b/package.json
@ -1,6 +1,6 @@
 {
  "name": "pride_flags",
-  "version": "1.1.1",
+  "version": "1.1.2",
  "license": "GPL-3.0-or-later",
  "engines": {
    "node": "^20.0.0",
--- a/templates/settings.php
+++ b/templates/settings.php
@ -1,5 +1,8 @@
 <?php

+declare(strict_types = 1);
+use OCA\PrideFlags\AppConstants;
+
 ?>
 <div class="pride_flags_user_settings">
 	<div class="settings-section section hidden">
@ -7,25 +10,17 @@
 		<div class="user-settings folder-flavour" style="margin-left: 40px; display: flex;">
 			<label for="user-settings-folder-flavour-select" style="display: flex; width: 100px;">Folders</label>
 			<select id="user-settings-folder-flavour-select" style="display: flex; width: 200px;">
-				<option value='pride'>Pride</option>
-				<option value='trans'>Trans Pride</option>
-				<option value='pan'>Pansexual Pride</option>
-				<option value='nonbinary'>Non-binary Pride</option>
-				<option value='bi'>Bisexual Pride</option>
-				<option value='asexual'>Asexual Pride</option>
-				<option value='lesbian'>Lesbian Pride</option>
+			<?php foreach (AppConstants\Variants::cases() as $variant): ?>
+				<option value="<?= strtolower($variant->name) ?>"><?= $variant->value ?></option>
+			<?php endforeach ?>
 			</select>
 		</div>
 		<div class="user-settings button-flavour" style="margin-left: 40px; display: flex;">
 			<label for="user-settings-button-flavour-select" style="display: flex; width: 100px;">Buttons</label>
 			<select id="user-settings-button-flavour-select" style="display: flex; width: 200px;">
-				<option value='pride'>Pride</option>
-				<option value='trans'>Trans Pride</option>
-				<option value='pan'>Pansexual Pride</option>
-				<option value='nonbinary'>Non-binary Pride</option>
-				<option value='bi'>Bisexual Pride</option>
-				<option value='asexual'>Asexual Pride</option>
-				<option value='lesbian'>Lesbian Pride</option>
+			<?php foreach (AppConstants\Variants::cases() as $variant): ?>
+				<option value="<?= strtolower($variant->name) ?>"><?= $variant->value ?></option>
+			<?php endforeach ?>
 			</select>
 		</div>
 		<button class="settings-pride-submit button primary" style="margin-left: 40px; display: flex; width: 80px; text-align: center;">Save</button>
Author	SHA1	Message	Date
transcaffeine	9dd1547c84	refactor(javascript): block controls during load and submit	2025-03-30 14:45:07 +02:00
transcaffeine	9f6ef213a3	refactor(javascript): wrap in IIFE, rebuild to respect none-variant	2025-03-30 14:45:06 +02:00
transcaffeine	744077f0fd	refactor: use string-backed enum for variant selection	2025-03-30 14:45:05 +02:00
transcaffeine	a59155e3d6	meta: exclude bin and vendor-bin in release script	2025-03-30 14:45:04 +02:00
transcaffeine	04acda6a7c	meta: add release script	2025-03-29 18:34:52 +01:00
transcaffeine	9d6d92fefe	meta: bump version to 1.1.2	2025-03-29 17:49:44 +01:00
transcaffeine	b208bde357	meta: bump minimum version to 29, maximum version 31	2025-03-29 16:22:48 +01:00
transcaffeine	0be543c467	meta: bump version to 1.1.1	2024-09-24 20:15:48 +02:00