refactor(javascript): block controls during load and submit

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

@@ -18,7 +18,6 @@
 			transform: 'rotate(90)'
 		}, {
 			id: 'bi',
-	//		colors: ['#C42A6F', '#915392', '#1437A1'],
 			colors: ['#D60270', '#9B4F96', '#0038A8'],
 			transform: 'rotate(90)'
 		}, {
@@ -64,6 +63,9 @@
 		--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)');
@@ -97,4 +99,14 @@
 			}`;
 			style_settings.textContent = rules;
 		});
+	window.pride_flags = {
+		flags,
+		"util" : {
+			"settings": {
+				blockInputs,
+				unblockInputs,
+				"_setDisabledState": setDisabledState,
+			},
+		},
+	};
 })(window);