Add visual button presets, jump targets and menu controls

public/assets/theme-buttons.js

@@ -0,0 +1,39 @@
+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();
+}