40 lines
2.6 KiB
JavaScript
40 lines
2.6 KiB
JavaScript
import { buttonSample } from './button-design.js';
|
|
import { createColorControl } from './color-control.js';
|
|
|
|
const root = document.querySelector('#button-defaults');
|
|
if (root) {
|
|
const schema = JSON.parse(root.dataset.schema), form = root.closest('form');
|
|
const read = () => Object.fromEntries([...root.querySelectorAll('[name^="buttons["]')].map(input => [input.name.slice(8, -1), input.value]));
|
|
const update = () => {
|
|
// Unsaved palette edits are reflected immediately in all samples.
|
|
schema.colors = [...form.querySelectorAll('.theme-table tbody tr')].flatMap(row => {
|
|
const key = row.querySelector('[name$="[key]"]'), value = row.querySelector('[name$="[value]"]');
|
|
return key?.value && value ? [{ key: key.value, value: value.value }] : [];
|
|
});
|
|
const values = read(), previews = root.querySelector('.button-state-previews'); previews.replaceChildren();
|
|
for (const [label, hover] of [['Normal', false], ['Beim Überfahren', true]]) {
|
|
const state = document.createElement('div'); state.className = 'button-state';
|
|
const title = document.createElement('span'); title.className = 'field-help'; title.textContent = label;
|
|
state.append(title, buttonSample('Mehr erfahren', values, schema, hover)); previews.append(state);
|
|
}
|
|
root.querySelectorAll('[data-button-preset]').forEach((choice, index) => {
|
|
const preset = schema.buttonPresets[index]; choice.setAttribute('aria-pressed', String(preset.shape === values.shape && preset.appearance === values.appearance));
|
|
choice.querySelector('.cms-button')?.remove();
|
|
const sample = buttonSample('Button', { ...values, ...preset, size: 'small' }, schema); sample.setAttribute('aria-hidden', 'true'); choice.prepend(sample);
|
|
});
|
|
};
|
|
for (const input of root.querySelectorAll('[data-button-color]')) {
|
|
const label = root.querySelector(`label[for="${input.id}"]`).textContent;
|
|
const originalId = input.id; input.type = 'hidden'; input.id += '-value';
|
|
const control = createColorControl({ id: originalId, label, value: input.value, colors: schema.colors, onChange: value => { input.value = value; update(); } });
|
|
control.querySelector('.color-inherit').hidden = true;
|
|
input.after(control);
|
|
}
|
|
root.querySelectorAll('[data-button-preset]').forEach((choice, index) => choice.addEventListener('click', () => {
|
|
const preset = schema.buttonPresets[index];
|
|
for (const key of ['shape', 'appearance']) root.querySelector(`[name="buttons[${key}]"]`).value = preset[key];
|
|
update();
|
|
}));
|
|
form.addEventListener('input', update); form.addEventListener('change', update); update();
|
|
}
|