refactor(javascript): block controls during load and submit
This commit is contained in:
		@@ -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()));
 | 
			
		||||
 | 
			
		||||
 
 | 
			
		||||
@@ -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()));
 | 
			
		||||
 | 
			
		||||
 
 | 
			
		||||
							
								
								
									
										14
									
								
								js/pride.js
									
									
									
									
									
								
							
							
						
						
									
										14
									
								
								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);
 | 
			
		||||
 
 | 
			
		||||
		Reference in New Issue
	
	Block a user