kantarciandClaude Fable 5.1
160c394c3f
Forms are an editor now: one card per field with add and remove, the technical name derived from the label, options only for a choice, and a new "Aussehen" section with a button label and four colours (field border and background, button and button text) that travel to the page as one rule per form inside the hashed style block. A live preview draws the form with the site's default button and names the text contrast. Statistics open with six figures (views against the same span before, average per day, busiest day, pages, referred views, missing addresses), a chart with grid lines and a title per bar, a weekday chart and ranked lists with share bars. The design screen shows the palette as colour cards with seven ready-made palettes, picks the base colours from the palette, previews every font in itself and the typography as a sample. The sidebar ends in an account card with role and a logout icon. Co-Authored-By: Claude Fable 5.1 <noreply@anthropic.com>
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('[data-color-card]')].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();
|
|
}
|