feat: add new-tab links and removable media previews (1.7.3)

public/assets/menu-editor.js

@@ -9,7 +9,7 @@ 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 rows = () => [...list.children].map(row => {
   const data = { level: Number(row.dataset.level) };
-  row.querySelectorAll('[data-key]').forEach(input => { data[input.dataset.key] = input.value; });
+  row.querySelectorAll('[data-key]').forEach(input => { data[input.dataset.key] = input.type === 'checkbox' ? (input.checked ? '1' : '0') : input.value; });
   data.level = Number(data.level); data.pageId = row.querySelector('.picker-value')?.value ?? '';
   data.pageDisplay = row.querySelector('[role="combobox"]')?.value ?? '';
   return data;
@@ -49,7 +49,10 @@ function createRow(data) {
   const field = (key, value, label, type = 'text') => {
     const input = el('input'); input.type = type; input.dataset.key = key; input.value = value ?? '';
     input.id = `menu-${key}-${id}`;
-    if (type !== 'hidden') { const caption = el('label', '', label); caption.htmlFor = input.id; body.append(caption, input); }
+    if (type !== 'hidden') {
+      const caption = el('label', type === 'checkbox' ? 'check-label' : '', label); caption.htmlFor = input.id;
+      if (type === 'checkbox') { caption.prepend(input); body.append(caption); } else body.append(caption, input);
+    }
     else row.append(input);
     return input;
   };
@@ -68,6 +71,7 @@ function createRow(data) {
     body.append(picker); setupPicker(picker);
     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';
   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);
@@ -101,7 +105,8 @@ form.querySelector('#menu-add-page').addEventListener('click', () => {
 form.querySelector('#menu-add-url').addEventListener('click', () => {
   const name = form.querySelector('#link-label'), url = form.querySelector('#link-url');
   if (!name.value.trim() || !url.value.trim()) { error.hidden = false; error.textContent = 'Bitte Beschriftung und Adresse des Links ausfüllen.'; (!name.value.trim() ? name : url).focus(); return; }
-  error.hidden = true; add({ type: 'url', label: name.value.trim(), url: url.value.trim(), level: 1 }); name.value = url.value = '';
+  const newTab = form.querySelector('#link-new-tab');
+  error.hidden = true; add({ type: 'url', label: name.value.trim(), url: url.value.trim(), newTab: newTab.checked, level: 1 }); name.value = url.value = ''; newTab.checked = false;
 });
 form.addEventListener('input', event => { if (event.target.closest('.menu-structure')) refresh(); });
 form.addEventListener('change', event => { if (event.target.closest('.menu-structure')) commit(last); });