refactor(javascript): block controls during load and submit
This commit is contained in:
parent
9f6ef213a3
commit
9dd1547c84
@ -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);
|
||||
|
Loading…
x
Reference in New Issue
Block a user