diff --git a/js/pride-settings-global.js b/js/pride-settings-global.js index c62b11b..4f47ba1 100644 --- 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())); diff --git a/js/pride-settings.js b/js/pride-settings.js index adcba88..13b707a 100644 --- 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())); diff --git a/js/pride.js b/js/pride.js index 14f36e6..bcc390a 100644 --- a/js/pride.js +++ b/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);