refactor(javascript): block controls during load and submit

bin/nextcloud-app-release.sh

@@ -21,7 +21,10 @@ traperr() {
 }
 trap traperr ERR
 
-mv .git ../nextcloud-pride-flags-git
+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 \
@@ -41,12 +44,14 @@ sudo docker exec -it ${CONTAINER_NAME} php occ integrity:sign-app \
 sudo docker stop "${CONTAINER_NAME}"
 sudo docker rm "${CONTAINER_NAME}"
 
-mv ../nextcloud-pride-flags-git .git
+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 -czvf "${TARBALL}" "$REPO"
+tar --exclude-vcs --exclude='./bin' --exclude='./vendor-bin' -czvf "${TARBALL}" "$REPO"
 
 # verify content
 echo "Tarball '${TARBALL}' content:"

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()));
 

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()));
 

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);

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";
+	}
 }

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 {

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>