refactor(javascript): block controls during load and submit

This commit is contained in:
transcaffeine 2025-03-30 13:40:47 +02:00
parent 9f6ef213a3
commit 9dd1547c84
Signed by: transcaffeine
GPG Key ID: 03624C433676E465
3 changed files with 35 additions and 3 deletions

View File

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

View File

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

View File

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