46 lines
2.4 KiB
JavaScript
46 lines
2.4 KiB
JavaScript
import { blockLabel } from './editor-model.js';
|
||
|
||
/** Editing aids are created only in the preview DOM, never in a saved block or public HTML. */
|
||
export function decorateContainers(preview, content) {
|
||
const visit = (blocks, parent = null) => {
|
||
blocks.forEach((block, index) => {
|
||
const node = preview.getElementById(block.id);
|
||
if (node && ['section', 'row', 'column'].includes(block.type)) {
|
||
const label = block.type === 'column' && parent?.type === 'row'
|
||
? `Spalte ${index + 1} von ${blocks.length}` : blockLabel(block);
|
||
node.classList.add('editor-container');
|
||
node.dataset.editorLabel = label;
|
||
if (!block.children?.length) {
|
||
node.classList.add('editor-empty-container');
|
||
const host = block.type === 'section' ? node.querySelector(':scope > .section-inner') : node;
|
||
if (!host) return;
|
||
const empty = preview.createElement('div');
|
||
empty.className = 'editor-empty';
|
||
const name = preview.createElement('span');
|
||
name.className = 'editor-empty-name'; name.textContent = label;
|
||
const hint = preview.createElement('span');
|
||
hint.className = 'editor-empty-hint';
|
||
hint.textContent = block.type === 'row' ? 'Spalte hierher ziehen oder hinzufügen' : 'Element hierher ziehen oder hinzufügen';
|
||
const actions = preview.createElement('div'); actions.className = 'editor-empty-actions';
|
||
const add = (text, attribute, value, accessibleName) => {
|
||
const button = preview.createElement('button');
|
||
button.type = 'button'; button.textContent = text;
|
||
button.dataset.editorTarget = block.id;
|
||
button.setAttribute(attribute, value);
|
||
button.setAttribute('aria-label', accessibleName);
|
||
actions.append(button);
|
||
};
|
||
add(block.type === 'row' ? '＋ Spalte hinzufügen' : '＋ Inhalt hinzufügen', 'data-editor-insert', '', `${label}: ${block.type === 'row' ? 'Spalte' : 'Inhalt'} hinzufügen`);
|
||
if (block.type === 'section') {
|
||
for (const count of [1, 2, 3, 4]) add(`${count} ${count === 1 ? 'Spalte' : 'Spalten'}`, 'data-editor-row', String(count), `${count} ${count === 1 ? 'Spalte' : 'Spalten'} in dieser Sektion anlegen`);
|
||
}
|
||
empty.append(name, hint, actions);
|
||
host.append(empty);
|
||
}
|
||
}
|
||
visit(block.children ?? [], block);
|
||
});
|
||
};
|
||
visit(content.blocks);
|
||
}
|