Add visual button presets, jump targets and menu controls

public/assets/menu-editor.js

@@ -7,6 +7,16 @@ const error = form.querySelector('#menu-error');
 const history = [];
 let serial = list.children.length, pendingPage = null, busy = false;
 const el = (tag, className = '', text = '') => { const node = document.createElement(tag); node.className = className; node.textContent = text; return node; };
+const iconNames = { app: 'App', web: 'Web', design: 'Gestaltung', network: 'Netzwerk', hardware: 'Computer', shop: 'Shop', support: 'Support', shield: 'Sicherheit', clock: 'Uhr', star: 'Stern', phone: 'Telefon', mail: 'E-Mail', pin: 'Standort', check: 'Haken' };
+const menuIcons = JSON.parse(form.dataset.icons || '[]');
+const chrome = () => {
+  const handle = el('button', 'menu-drag-handle'); handle.type = 'button'; handle.dataset.menuDrag = '';
+  handle.title = 'Ziehen · Pfeiltasten ändern Reihenfolge und Ebene';
+  handle.innerHTML = '<svg viewBox="0 0 24 24" width="20" height="20" aria-hidden="true" fill="currentColor"><circle cx="8" cy="5" r="1.6"/><circle cx="16" cy="5" r="1.6"/><circle cx="8" cy="12" r="1.6"/><circle cx="16" cy="12" r="1.6"/><circle cx="8" cy="19" r="1.6"/><circle cx="16" cy="19" r="1.6"/></svg>';
+  const chevron = document.createElementNS('http://www.w3.org/2000/svg', 'svg'); chevron.setAttribute('class','menu-chevron'); chevron.setAttribute('viewBox','0 0 24 24'); chevron.setAttribute('width','20'); chevron.setAttribute('height','20'); chevron.setAttribute('aria-hidden','true');
+  chevron.innerHTML = '<path d="m6 9 6 6 6-6" fill="none" stroke="currentColor" stroke-width="2"/>';
+  return { handle, chevron };
+};
 const rows = () => [...list.children].map(row => {
   const data = { level: Number(row.dataset.level) };
   row.querySelectorAll('[data-key]').forEach(input => { data[input.dataset.key] = input.type === 'checkbox' ? (input.checked ? '1' : '0') : input.value; });
@@ -28,6 +38,11 @@ function refresh() {
     const picker = row.querySelector('.picker-value'); if (picker) picker.name = `items[${index}][pageId]`;
     const name = row.querySelector('[data-key="label"]').value || 'Neuer Eintrag';
     row.querySelector('.menu-entry-title').textContent = name;
+    const icon = row.querySelector('[data-key="icon"]')?.value, position = row.querySelector('[data-key="iconPosition"]')?.value;
+    const graphic = icon && document.getElementById(`menu-icon-${icon}`)?.content.cloneNode(true);
+    if (graphic) row.querySelector('.menu-entry-title')[position === 'after' ? 'append' : 'prepend'](graphic);
+    row.querySelector('[data-menu-drag]')?.setAttribute('aria-label', `${name} verschieben`);
+    row.querySelectorAll('[data-key="icon"] option').forEach(option => { if (iconNames[option.value]) option.textContent = iconNames[option.value]; });
     row.querySelector('[data-menu-action="up"]').disabled = index === 0;
     row.querySelector('[data-menu-action="down"]').disabled = index === list.children.length - 1;
     row.querySelector('[data-menu-action="indent"]').disabled = index === 0 || row.dataset.level === '2' || list.children[index + 1]?.dataset.level === '2';
@@ -58,7 +73,8 @@ function createRow(data) {
   };
   for (const key of ['position', 'level', 'type']) field(key, data[key] ?? 0, '', 'hidden');
   const details = el('details'); const summary = el('summary');
-  summary.append(el('strong', 'menu-entry-title', data.label), el('span', 'muted', data.type === 'page' ? 'Inhalt' : 'Eigener Link'));
+  const { handle, chevron } = chrome();
+  summary.append(handle, el('strong', 'menu-entry-title', data.label), el('span', 'menu-entry-kind', data.type === 'page' ? 'Seitenlink' : 'Eigener Link'), chevron);
   const body = el('div', 'menu-entry-fields'); details.append(summary, body); row.append(details);
   const label = field('label', data.label, 'Beschriftung'); label.required = true; label.maxLength = 80;
   if (data.type === 'page') {
@@ -72,6 +88,12 @@ function createRow(data) {
     field('anchor', data.anchor, 'Sprungziel (optional)').maxLength = 65;
   } else { const url = field('url', data.url, 'Adresse'); url.required = true; url.maxLength = 2048; }
   const newTab = field('newTab', '1', 'In neuem Tab öffnen', 'checkbox'); newTab.checked = data.newTab === true || data.newTab === '1';
+  for (const [key, label, choices] of [['icon', 'Icon', { '': 'Kein Icon', ...Object.fromEntries(menuIcons.map(icon => [icon, iconNames[icon] || icon])) }], ['iconPosition', 'Icon-Position', { before: 'Vor dem Text', after: 'Nach dem Text' }]]) {
+    const select = el('select'); select.dataset.key = key; select.id = `menu-${key}-${id}`;
+    for (const [value, caption] of Object.entries(choices)) select.append(new Option(caption, value));
+    select.value = data[key] || (key === 'iconPosition' ? 'before' : '');
+    const caption = el('label', '', label); caption.htmlFor = select.id; body.append(caption, select);
+  }
   const actions = el('div', 'menu-entry-actions'); actions.setAttribute('role', 'group');
   for (const [action, caption] of Object.entries({ up: '↑', down: '↓', indent: 'Als Unterpunkt', outdent: 'Hauptebene', remove: 'Entfernen' })) {
     const button = el('button', `text-button${action === 'remove' ? ' danger-text' : ''}`, caption); button.type = 'button'; button.dataset.menuAction = action; actions.append(button);
@@ -140,6 +162,46 @@ list.addEventListener('click', event => {
   commit(before); if (row.isConnected) row.querySelector('summary').focus();
 });
 form.querySelector('#menu-undo').addEventListener('click', () => { const previous = history.pop(); if (previous) restore(previous); });
+// Pointer capture supports mouse, pen and touch. A parent travels with its children.
+let drag = null;
+list.addEventListener('click', event => { if (event.target.closest('[data-menu-drag]')) { event.preventDefault(); event.stopPropagation(); } });
+list.addEventListener('keydown', event => {
+  const handle = event.target.closest('[data-menu-drag]'); if (!handle || busy) return;
+  const action = { ArrowUp: 'up', ArrowDown: 'down', ArrowRight: 'indent', ArrowLeft: 'outdent' }[event.key];
+  if (action) { event.preventDefault(); const row = handle.closest('.menu-entry'); row.querySelector(`[data-menu-action="${action}"]`).click(); handle.focus(); }
+});
+list.addEventListener('pointerdown', event => {
+  const handle = event.target.closest('[data-menu-drag]'); if (!handle || busy || event.button !== 0) return;
+  event.preventDefault(); handle.focus(); handle.setPointerCapture(event.pointerId);
+  const row = handle.closest('.menu-entry'), entries = [...list.children], index = entries.indexOf(row), bundle = [row];
+  if (row.dataset.level === '1') for (let i = index + 1; entries[i]?.dataset.level === '2'; i++) bundle.push(entries[i]);
+  drag = { handle, row, bundle, before: state(), x: event.clientX, y: event.clientY, pointer: event.pointerId, active: false, level: row.dataset.level };
+});
+list.addEventListener('pointermove', event => {
+  if (!drag || event.pointerId !== drag.pointer) return;
+  if (!drag.active && Math.hypot(event.clientX - drag.x, event.clientY - drag.y) < 6) return;
+  drag.active = true; drag.bundle.forEach(row => row.classList.add('menu-dragging'));
+  const others = [...list.children].filter(row => !drag.bundle.includes(row));
+  let target = others.find(row => event.clientY < row.getBoundingClientRect().top + row.getBoundingClientRect().height / 2) || null;
+  // A main entry never splits the children of another main entry.
+  if ((drag.bundle.length > 1 || drag.level === '1') && target?.dataset.level === '2') {
+    let index = others.indexOf(target); while (index > 0 && others[index].dataset.level === '2') index--; target = others[index];
+  }
+  drag.bundle.forEach(row => list.insertBefore(row, target));
+  if (drag.bundle.length === 1) drag.row.dataset.level = event.clientX - drag.x > 36 ? '2' : event.clientX - drag.x < -36 ? '1' : drag.level;
+  if (list.firstElementChild) list.firstElementChild.dataset.level = '1';
+  refresh();
+  if (event.clientY > window.innerHeight - 65) window.scrollBy(0, 18); else if (event.clientY < 65) window.scrollBy(0, -18);
+});
+function endDrag(cancel = false) {
+  if (!drag) return;
+  const previous = drag; drag = null;
+  previous.bundle.forEach(row => row.classList.remove('menu-dragging'));
+  if (previous.handle.hasPointerCapture(previous.pointer)) previous.handle.releasePointerCapture(previous.pointer);
+  if (cancel) restore(previous.before); else if (previous.active) { commit(previous.before); previous.handle.focus(); status.textContent = 'Reihenfolge geändert · noch nicht gespeichert'; }
+}
+list.addEventListener('pointerup', () => endDrag()); list.addEventListener('pointercancel', () => endDrag(true));
+document.addEventListener('keydown', event => { if (event.key === 'Escape' && drag) { event.preventDefault(); endDrag(true); } });
 window.addEventListener('beforeunload', event => { if (dirty()) { event.preventDefault(); event.returnValue = ''; } });
 form.noValidate = true;
 form.addEventListener('submit', async event => {
@@ -147,13 +209,13 @@ form.addEventListener('submit', async event => {
   const invalid = form.querySelector(':invalid');
   if (invalid) { const details = invalid.closest('details'); if (details) details.open = true; invalid.reportValidity(); return; }
   refresh(); const body = new FormData(form); const snapshot = key(state());
-  busy = true; error.hidden = true; form.querySelectorAll('input,button').forEach(node => { node.disabled = true; }); refresh();
+  busy = true; error.hidden = true; form.querySelectorAll('input,select,button').forEach(node => { node.disabled = true; }); refresh();
   try {
     const response = await fetch(form.action, { method: 'POST', body, headers: { Accept: 'application/json' }, credentials: 'same-origin' });
     if (response.redirected) throw new Error('Deine Sitzung ist abgelaufen. Die Änderungen bleiben hier erhalten. Bitte erneut anmelden.');
     const result = await response.json(); if (!response.ok) throw new Error(result.error || 'Das Menü konnte nicht gespeichert werden.');
     form.elements.expectedVersion.value = result.version; saved = snapshot;
   } catch (failure) { error.textContent = failure.message || 'Verbindung unterbrochen. Die Änderungen bleiben hier erhalten.'; error.hidden = false; }
-  finally { busy = false; form.querySelectorAll('input,button').forEach(node => { node.disabled = false; }); form.querySelector('#menu-add-page').disabled = !pendingPage; refresh(); }
+  finally { busy = false; form.querySelectorAll('input,select,button').forEach(node => { node.disabled = false; }); form.querySelector('#menu-add-page').disabled = !pendingPage; refresh(); }
 });
 refresh(); last = state(); saved = key(last);