44 lines
1.1 KiB
JavaScript
44 lines
1.1 KiB
JavaScript
const toggles = document.querySelectorAll('[data-color-default-toggle]');
|
|
|
|
const syncToggle = (toggle) => {
|
|
const targetSelector = toggle.dataset.colorTarget || '';
|
|
if (!targetSelector) {
|
|
return;
|
|
}
|
|
const target = document.querySelector(targetSelector);
|
|
if (!target) {
|
|
return;
|
|
}
|
|
const defaultValue = toggle.dataset.colorDefault || '#2fa4a4';
|
|
if (toggle.checked) {
|
|
if (!target.dataset.customValue) {
|
|
target.dataset.customValue = target.value;
|
|
}
|
|
target.value = defaultValue;
|
|
target.setAttribute('disabled', 'disabled');
|
|
} else {
|
|
target.removeAttribute('disabled');
|
|
if (target.dataset.customValue) {
|
|
target.value = target.dataset.customValue;
|
|
}
|
|
}
|
|
};
|
|
|
|
toggles.forEach((toggle) => {
|
|
const targetSelector = toggle.dataset.colorTarget || '';
|
|
const target = targetSelector ? document.querySelector(targetSelector) : null;
|
|
|
|
toggle.addEventListener('change', () => syncToggle(toggle));
|
|
|
|
if (target) {
|
|
target.addEventListener('input', () => {
|
|
if (toggle.checked) {
|
|
toggle.checked = false;
|
|
target.removeAttribute('disabled');
|
|
}
|
|
});
|
|
}
|
|
|
|
syncToggle(toggle);
|
|
});
|