${escHtml(tFallback('edit_reminder.message', 'You are logged in. Activate the visual editor to edit text and images directly on this page.'))}
for the given page with
* freshly-rendered server HTML, then re-wire editor handlers on the new
* nodes. Scrolls the section at `focusIndex` into view.
*/
function replaceContentArea(html, contentPage, focusIndex) {
const oldArea = document.querySelector(`.editable-content-area[data-content-page="${CSS.escape(contentPage)}"]`);
if (!oldArea) {
sessionStorage.setItem('site-edit-mode', 'true');
location.reload();
return;
}
const tpl = document.createElement('template');
tpl.innerHTML = html.trim();
const newArea = tpl.content.firstElementChild;
if (!newArea) return;
oldArea.replaceWith(newArea);
// Re-wire handlers. attach* functions guard via data-editor-ready,
// but the new DOM nodes have no such marker so they all get wired.
attachEditHandlers();
attachFieldEditHandlers();
attachLinkEditHandlers();
attachImageEditHandlers();
attachListEditHandlers();
if (EditorConfig.editMode) {
document.body.classList.add('edit-mode-active', 'visual-editing');
}
const focused = newArea.querySelectorAll('.editable-section')[focusIndex];
if (focused) focused.scrollIntoView({ behavior: 'smooth', block: 'nearest' });
}
// ============================================================
// HIDE / SHOW SECTION
// ============================================================
function toggleSectionHidden(index, contentPage, wrapperEl, btnEl) {
const pageData = EditorConfig.contentData[contentPage];
if (!pageData || !pageData.sections || !pageData.sections[index]) return;
pushUndoState();
const section = pageData.sections[index];
const nowHidden = !section.hidden;
if (nowHidden) {
section.hidden = true;
wrapperEl.dataset.hidden = 'true';
} else {
delete section.hidden;
delete wrapperEl.dataset.hidden;
}
// Update button icon
btnEl.innerHTML = nowHidden ? Icons.eyeClosed : Icons.eyeOpen;
const label = nowHidden ? t('show') : t('hide');
btnEl.dataset.editorTooltip = label;
btnEl.setAttribute('aria-label', label);
EditorConfig.dirtyPages.add(contentPage);
updateUndoRedoButtons();
showToast(nowHidden ? t('toast.hidden') : t('toast.visible'), 'success');
}
// ============================================================
// DELETE SECTION
// ============================================================
function deleteSection(index, contentPage) {
const pageData = EditorConfig.contentData[contentPage];
if (!pageData || !pageData.sections || !pageData.sections[index]) return;
const section = pageData.sections[index];
const typeName = BlockTypes[section.type]?.label || section.type;
showConfirmDialog(
t('section.delete'),
t('section.delete_confirm', { type: typeName }),
t('section.reload_hint'),
() => {
pushUndoState();
pageData.sections.splice(index, 1);
EditorConfig.dirtyPages.add(contentPage);
updateUndoRedoButtons();
saveStructuralChange(contentPage, 'Section deleted');
}
);
}
// ============================================================
// OPEN/CLOSE EDITOR
// ============================================================
function getSectionTypeName(type) {
return SectionTypes[type]?.label || type;
}
/**
* Populates an editor field with data from the section.
*/
function populateEditorField(field, section, defaults = {}) {
const { fid, iid } = editorFieldIds(field);
const fieldEl = document.getElementById(fid);
if (!fieldEl) return;
fieldEl.style.display = 'block';
const value = section[field.key] ?? defaults[field.key] ?? '';
switch (field.type) {
case 'input':
case 'number':
case 'url':
document.getElementById(iid).value = value;
break;
case 'textarea':
document.getElementById(iid).value = value;
break;
case 'wysiwyg': {
const htmlToggle = document.getElementById('editor-html-toggle');
if (htmlToggle) htmlToggle.checked = false;
const wysiwyg = document.getElementById('editor-wysiwyg');
const htmlArea = document.getElementById('editor-html');
if (wysiwyg) { wysiwyg.style.display = 'block'; wysiwyg.innerHTML = value; }
if (htmlArea) { htmlArea.style.display = 'none'; htmlArea.value = value; }
break;
}
case 'select': {
const selectEl = document.getElementById(iid);
// Fall back to first option when no value is set
if (value) selectEl.value = value;
else if (selectEl.options.length > 0) selectEl.selectedIndex = 0;
break;
}
case 'checkbox':
document.getElementById(iid).checked = !!value;
break;
case 'image':
document.getElementById(iid).value = value;
updateImagePreview(iid);
break;
case 'audio':
document.getElementById(iid).value = value;
updateAudioPreview();
break;
}
}
/**
* Reads an editor field value back.
*/
function readEditorField(field) {
const { iid } = editorFieldIds(field);
switch (field.type) {
case 'input':
case 'textarea':
case 'number':
case 'url':
case 'image':
return (document.getElementById(iid)?.value || '').trim();
case 'wysiwyg':
if (EditorConfig.isHtmlMode) {
return document.getElementById('editor-html')?.value || '';
}
return document.getElementById('editor-wysiwyg')?.innerHTML || '';
case 'select':
return document.getElementById(iid)?.value || '';
case 'checkbox':
return document.getElementById(iid)?.checked || false;
case 'audio':
return (document.getElementById(iid)?.value || '').trim();
default:
return (document.getElementById(iid)?.value || '').trim();
}
}
function formatEditorTitle(label) {
const template = t('edit_block_title');
return template && template !== 'edit_block_title'
? template.replace('{label}', label)
: t('edit') + ' ' + label;
}
function openEditor(index, section, contentPage) {
EditorConfig.currentSectionIndex = index;
EditorConfig.currentSection = { ...section };
EditorConfig.currentContentPage = contentPage;
EditorConfig.isHtmlMode = false;
const modal = document.getElementById('editor-modal');
const modalTitle = document.getElementById('editor-modal-title');
// Hide all fields
modal.querySelectorAll('.editor-field').forEach(f => f.style.display = 'none');
// Resolve type (legacy alias)
const type = section.type === 'project' ? 'card' : section.type;
const def = BlockTypes[type];
if (!def) {
modalTitle.textContent = formatEditorTitle(type);
modal.classList.add('active');
document.body.style.overflow = 'hidden';
openDialogA11y(modal);
return;
}
modalTitle.textContent = formatEditorTitle(def.label);
// Show and populate fields from registry
for (const field of (def.fields || [])) {
populateEditorField(field, section, def.defaults || {});
// Special preview triggers
if (field.key === 'videoId') updateYoutubePreview();
if (field.key === 'trackId') updateSoundcloudPreview();
}
modal.classList.add('active');
document.body.style.overflow = 'hidden';
openDialogA11y(modal);
}
function closeModal() {
const modal = document.getElementById('editor-modal');
modal.classList.remove('active');
ModalResize.reset(modal.querySelector('.editor-modal-content'));
document.body.style.overflow = '';
closeDialogA11y(modal);
EditorConfig.currentSection = null;
EditorConfig.currentSectionIndex = null;
EditorConfig.currentContentPage = null;
}
// ============================================================
// WYSIWYG FUNKTIONEN
// ============================================================
function execCommand(command) {
document.execCommand(command, false, null);
document.getElementById('editor-wysiwyg').focus();
}
/**
* Sanitizes an HTML string: removes style/class attributes, unwraps disallowed tags.
* Keeps: P, H1-H6, A, B, STRONG, I, EM, BR, UL, OL, LI, IMG
* @param {string} html - Raw HTML string
* @returns {string} Cleaned HTML string
*/
function sanitizeHtmlString(html) {
const temp = document.createElement('div');
temp.innerHTML = html;
function cleanNode(node) {
const children = Array.from(node.childNodes);
children.forEach(child => {
if (child.nodeType === Node.ELEMENT_NODE) {
const tagName = child.tagName.toLowerCase();
const allowedTags = ['p', 'h1', 'h2', 'h3', 'h4', 'h5', 'h6', 'a', 'b', 'strong', 'i', 'em', 'br', 'ul', 'ol', 'li', 'img'];
if (allowedTags.includes(tagName)) {
const attrs = Array.from(child.attributes);
attrs.forEach(attr => {
if (tagName === 'a' && (attr.name === 'href' || attr.name === 'target' || attr.name === 'rel')) {
// keep href, target, rel on links
} else if (tagName === 'img' && (attr.name === 'src' || attr.name === 'alt')) {
// keep src/alt on images
} else {
child.removeAttribute(attr.name);
}
});
// Auto-set target="_blank" for external links
if (tagName === 'a') {
const href = child.getAttribute('href') || '';
if (/^https?:\/\//i.test(href)) {
child.setAttribute('target', '_blank');
child.setAttribute('rel', 'noopener');
} else {
child.removeAttribute('target');
child.removeAttribute('rel');
}
}
cleanNode(child);
} else {
cleanNode(child);
while (child.firstChild) {
node.insertBefore(child.firstChild, child);
}
node.removeChild(child);
}
}
});
}
cleanNode(temp);
return temp.innerHTML;
}
/**
* Cleans HTML in the WYSIWYG modal editor (uses sanitizeHtmlString internally)
*/
function cleanHtml() {
const wysiwyg = document.getElementById('editor-wysiwyg');
wysiwyg.innerHTML = sanitizeHtmlString(wysiwyg.innerHTML);
wysiwyg.focus();
showToast(t('toast.formatting_cleaned'), 'success');
}
// ============================================================
// FLOATING TOOLBAR (inline rich text editing)
// ============================================================
let floatingToolbar = null;
let activeHtmlField = null;
function createFloatingToolbar() {
if (floatingToolbar) return floatingToolbar;
const toolbar = document.createElement('div');
toolbar.className = 'floating-toolbar';
toolbar.innerHTML = `
`;
// Prevent blur on toolbar button clicks
toolbar.addEventListener('mousedown', (e) => {
e.preventDefault();
});
// Handle button clicks
toolbar.addEventListener('click', (e) => {
const btn = e.target.closest('button');
if (!btn || !activeHtmlField) return;
const command = btn.dataset.command;
const action = btn.dataset.action;
if (command) {
document.execCommand(command, false, null);
activeHtmlField.focus();
} else if (action === 'link') {
insertLinkInField(activeHtmlField);
} else if (action === 'html-source') {
// Finish inline editing first, then open modal
const field = activeHtmlField;
finishInlineHtmlEdit(field, field._originalHtml, false);
openFieldHtmlEditor(field);
}
});
document.body.appendChild(toolbar);
floatingToolbar = toolbar;
return toolbar;
}
function insertLinkInField(field) {
const selection = window.getSelection();
let savedRange = null;
if (selection.rangeCount > 0) {
savedRange = selection.getRangeAt(0).cloneRange();
}
const selectedText = selection.toString();
if (!selectedText) {
showToast(t('toast.select_text_first'), 'error');
return;
}
// Reuse the link editor modal with page picker
createLinkEditorDialog();
initPagePicker('link-editor-page-select', 'link-editor-href');
document.getElementById('link-editor-text').value = selectedText;
document.getElementById('link-editor-text').readOnly = true;
document.getElementById('link-editor-text').style.opacity = '0.6';
syncPagePicker('link-editor-page-select', 'link-editor-href', '');
const modal = document.getElementById('link-editor-modal');
modal.classList.add('active');
document.body.style.overflow = 'hidden';
// Override save to insert link via execCommand
modal._editTarget = null;
modal._inlineInsert = { field, savedRange };
setTimeout(() => {
const select = document.getElementById('link-editor-page-select');
if (select) select.focus();
}, 100);
}
function positionFloatingToolbar(field) {
const toolbar = createFloatingToolbar();
const rect = field.getBoundingClientRect();
toolbar.style.display = 'flex';
// Measure toolbar
const tbRect = toolbar.getBoundingClientRect();
const gap = 8;
// Center horizontally above field
let left = rect.left + (rect.width / 2) - (tbRect.width / 2);
let top = rect.top - tbRect.height - gap;
// If no room above, place below
if (top < 50) {
top = rect.bottom + gap;
}
// Keep within viewport horizontally
left = Math.max(8, Math.min(left, window.innerWidth - tbRect.width - 8));
toolbar.style.left = left + 'px';
toolbar.style.top = top + 'px';
}
function hideFloatingToolbar() {
if (floatingToolbar) {
floatingToolbar.style.display = 'none';
}
if (activeHtmlField && activeHtmlField._scrollHandler) {
window.removeEventListener('scroll', activeHtmlField._scrollHandler, true);
window.removeEventListener('resize', activeHtmlField._scrollHandler);
delete activeHtmlField._scrollHandler;
}
activeHtmlField = null;
}
function startInlineHtmlEdit(field) {
// Finish any other active inline HTML edit
if (activeHtmlField && activeHtmlField !== field) {
finishInlineHtmlEdit(activeHtmlField, activeHtmlField._originalHtml, false);
}
const originalHtml = field.innerHTML;
field._originalHtml = originalHtml;
field.contentEditable = 'true';
field.classList.add('editable-field-editing');
// Show and position toolbar
activeHtmlField = field;
positionFloatingToolbar(field);
// Reposition on scroll/resize
const scrollHandler = () => positionFloatingToolbar(field);
field._scrollHandler = scrollHandler;
window.addEventListener('scroll', scrollHandler, true);
window.addEventListener('resize', scrollHandler);
// Keyboard handler
const keyHandler = (e) => {
if (e.key === 'Escape') {
e.preventDefault();
cancelInlineHtmlEdit(field, originalHtml);
} else if ((e.ctrlKey || e.metaKey) && e.key === 's') {
e.preventDefault();
finishInlineHtmlEdit(field, originalHtml, false);
saveAllChanges();
}
// Bold/Italic/etc. handled by browser natively in contentEditable
};
// Blur handler
const blurHandler = () => {
setTimeout(() => {
// Check if focus moved to toolbar or prompt dialog
const active = document.activeElement;
if (floatingToolbar && floatingToolbar.contains(active)) return;
if (document.querySelector('.prompt-dialog-overlay')) return;
if (field.isContentEditable) {
finishInlineHtmlEdit(field, originalHtml, false);
}
}, 200);
};
// Paste handler — sanitize pasted HTML
const pasteHandler = (e) => {
e.preventDefault();
const html = e.clipboardData.getData('text/html');
const text = e.clipboardData.getData('text/plain');
if (html) {
const clean = sanitizeHtmlString(html);
document.execCommand('insertHTML', false, clean);
} else if (text) {
document.execCommand('insertText', false, text);
}
};
field.addEventListener('keydown', keyHandler);
field.addEventListener('blur', blurHandler);
field.addEventListener('paste', pasteHandler);
field._inlineHtmlHandlers = { keyHandler, blurHandler, pasteHandler };
field.focus();
}
function finishInlineHtmlEdit(field, originalHtml, cancelled) {
if (!field.isContentEditable) return;
const newHtml = sanitizeHtmlString(field.innerHTML).trim();
field.contentEditable = 'false';
field.classList.remove('editable-field-editing');
cleanupInlineHtmlHandlers(field);
hideFloatingToolbar();
if (!cancelled && newHtml !== originalHtml) {
saveField(field.dataset.page, field.dataset.field, newHtml, field, true);
} else if (cancelled) {
field.innerHTML = originalHtml;
}
}
function cancelInlineHtmlEdit(field, originalHtml) {
finishInlineHtmlEdit(field, originalHtml, true);
}
function cleanupInlineHtmlHandlers(field) {
if (field._inlineHtmlHandlers) {
field.removeEventListener('keydown', field._inlineHtmlHandlers.keyHandler);
field.removeEventListener('blur', field._inlineHtmlHandlers.blurHandler);
field.removeEventListener('paste', field._inlineHtmlHandlers.pasteHandler);
delete field._inlineHtmlHandlers;
}
delete field._originalHtml;
delete field._scrollHandler;
}
function insertLink() {
const wysiwyg = document.getElementById('editor-wysiwyg');
// Save current selection before dialog opens
const selection = window.getSelection();
let savedRange = null;
if (selection.rangeCount > 0) {
savedRange = selection.getRangeAt(0).cloneRange();
}
// Check if text is selected
const selectedText = selection.toString();
if (!selectedText) {
showToast(t('toast.select_text_first'), 'error');
return;
}
showPromptDialog(t('insert_link'), t('insert_link'), 'https://', (url) => {
if (url && savedRange) {
// Set focus on editor
wysiwyg.focus();
// Selektion wiederherstellen
const newSelection = window.getSelection();
newSelection.removeAllRanges();
newSelection.addRange(savedRange);
// Link erstellen
document.execCommand('createLink', false, url);
}
});
}
function toggleHtmlMode() {
const wysiwyg = document.getElementById('editor-wysiwyg');
const html = document.getElementById('editor-html');
const toggle = document.getElementById('editor-html-toggle');
EditorConfig.isHtmlMode = toggle.checked;
if (EditorConfig.isHtmlMode) {
html.value = formatHtml(wysiwyg.innerHTML);
wysiwyg.style.display = 'none';
html.style.display = 'block';
html.focus();
} else {
wysiwyg.innerHTML = html.value;
html.style.display = 'none';
wysiwyg.style.display = 'block';
wysiwyg.focus();
}
}
// ============================================================
// MEDIA PREVIEWS
// ============================================================
function updateYoutubePreview() {
const input = document.getElementById('editor-input-videoId-input');
const preview = document.getElementById('editor-youtube-preview');
const videoId = input.value.trim();
if (videoId) {
preview.innerHTML = `
`;
} else {
preview.innerHTML = '
Enter video ID for preview
';
}
}
function updateSoundcloudPreview() {
const input = document.getElementById('editor-input-trackId-input');
const preview = document.getElementById('editor-soundcloud-preview');
const trackId = input.value.trim();
if (trackId) {
preview.innerHTML = `
`;
} else {
preview.innerHTML = '
Enter track ID for preview
';
}
}
function updateAudioPreview() {
const input = document.getElementById('editor-input-src-audio');
const preview = document.getElementById('editor-audio-preview');
const src = input.value.trim();
if (src) {
preview.innerHTML = `
`;
} else {
preview.innerHTML = '
Select an audio file for preview
';
}
}
/**
* Direkter Audio-Upload im Editor-Modal
* Automatically generates a title from the filename
*/
async function handleEditorAudioUpload(e) {
const file = e.target.files[0];
if (!file) return;
// Check file type
const allowedTypes = ['audio/mpeg', 'audio/mp3', 'audio/wav', 'audio/ogg', 'audio/x-m4a', 'audio/aac', 'audio/flac'];
if (!allowedTypes.includes(file.type) && !file.name.match(/\.(mp3|wav|ogg|m4a|aac|flac)$/i)) {
showToast(t('audio.format_error'), 'error');
e.target.value = '';
return;
}
// Check file size (max 50MB)
if (file.size > 50 * 1024 * 1024) {
showToast(t('audio.size_error'), 'error');
e.target.value = '';
return;
}
try {
const formData = new FormData();
formData.append('action', 'upload-audio');
formData.append('audio', file);
formData.append('csrf_token', EditorConfig.csrfToken);
showToast(t('image.uploading'), 'success');
const response = await fetch(EditorConfig.apiUrl, {
method: 'POST',
body: formData
});
const result = await response.json();
if (result.success && result.data) {
// Set audio path
document.getElementById('editor-input-src-audio').value = result.data.path;
updateAudioPreview();
// Generate title from filename (without extension, hyphens/underscores → spaces)
const titleInput = document.getElementById('editor-input-title-input');
if (!titleInput.value) {
const filename = result.data.name;
// Remove file extension
const nameWithoutExt = filename.replace(/\.[^.]+$/, '');
// Replace hyphens and underscores with spaces
const title = nameWithoutExt.replace(/[-_]/g, ' ');
titleInput.value = title;
}
showToast(t('audio.uploaded'), 'success');
} else {
showToast(t('toast.error_generic', { message: result.message }), 'error');
}
} catch (error) {
showToast(t('toast.upload_error', { message: error.message }), 'error');
}
e.target.value = '';
}
// ============================================================
// SPEICHERN
// ============================================================
/**
* Generische Undo-Funktion: Stellt vorherigen Zustand wieder her
*/
async function restoreContentState(previousData, contentPage) {
try {
const formData = new FormData();
formData.append('action', 'save');
formData.append('page', contentPage);
formData.append('content', JSON.stringify(previousData));
formData.append('csrf_token', EditorConfig.csrfToken);
const response = await fetch(EditorConfig.apiUrl, {
method: 'POST',
body: formData
});
const result = await response.json();
if (result.success) {
showToast(t('toast.undone'), 'success');
setTimeout(() => location.reload(), 500);
} else {
showToast(t('toast.error_undo', { message: result.message }), 'error');
}
} catch (error) {
showToast(t('toast.error_generic', { message: error.message }), 'error');
}
}
function saveSection() {
const section = EditorConfig.currentSection;
const index = EditorConfig.currentSectionIndex;
const contentPage = EditorConfig.currentContentPage;
if (!section || index === null || !contentPage) return;
pushUndoState();
// Resolve type (legacy alias)
const type = section.type === 'project' ? 'card' : section.type;
const def = BlockTypes[type];
if (def) {
for (const field of (def.fields || [])) {
const value = readEditorField(field);
// For select fields with empty string meaning "no value", clean up
if (field.type === 'select' && value === '' && field.key !== 'titleTag') {
delete section[field.key];
} else if (field.type === 'checkbox' && !value) {
delete section[field.key];
} else {
section[field.key] = value;
}
}
}
// Clean up titleTag if no title is set
if (!section.title && section.titleTag) {
delete section.titleTag;
}
// Update in-memory data
EditorConfig.contentData[contentPage].sections[index] = section;
EditorConfig.dirtyPages.add(contentPage);
// Live-update the section in the DOM so admins see changes immediately
patchSectionInDom(index, section);
updateUndoRedoButtons();
showToast(t('toast.change_queued'), 'success');
closeModal();
}
/**
* Patch a rendered section in the DOM with new data, so the editor shows
* changes immediately without a full page reload.
*/
function patchSectionInDom(index, section) {
const sectionEl = document.querySelector('.editable-section[data-section-index="' + index + '"]');
if (!sectionEl) return;
const type = section.type === 'project' ? 'card' : section.type;
const fieldSelector = (field) => `[data-field="sections.${index}.${field}"]`;
const replaceHeadingTag = (fieldEl, tagName) => {
if (!fieldEl || !tagName) return fieldEl;
const current = fieldEl.parentElement;
if (!current || !/^H[1-6]$/.test(current.tagName) || current.tagName.toLowerCase() === tagName) return fieldEl;
const replacement = document.createElement(tagName);
replacement.innerHTML = current.innerHTML;
Array.from(current.attributes).forEach(attr => replacement.setAttribute(attr.name, attr.value));
current.replaceWith(replacement);
return replacement.querySelector('[data-field]') || replacement;
};
switch (type) {
case 'image': {
const img = sectionEl.querySelector('.block-image img');
if (img && section.src) {
img.src = section.src;
img.alt = section.alt || '';
syncAiLabel(img);
}
const caption = sectionEl.querySelector('.block-image figcaption');
if (caption) caption.textContent = section.caption || '';
break;
}
case 'heading': {
const textField = replaceHeadingTag(sectionEl.querySelector(fieldSelector('text')), section.level || 'h2');
if (textField) textField.textContent = section.text || '';
const subtitleField = sectionEl.querySelector(fieldSelector('subtitle'));
if (subtitleField) subtitleField.textContent = section.subtitle || '';
break;
}
case 'text': {
const titleField = replaceHeadingTag(sectionEl.querySelector(fieldSelector('title')), section.titleTag || 'h2');
if (titleField) titleField.textContent = section.title || '';
const contentField = sectionEl.querySelector(fieldSelector('content'));
if (contentField && section.content !== undefined) contentField.innerHTML = section.content;
break;
}
case 'quote': {
const quoteText = sectionEl.querySelector('.block-quote__text');
if (quoteText && section.text !== undefined) quoteText.textContent = section.text;
const attr = sectionEl.querySelector('.block-quote__attribution');
if (attr) attr.textContent = section.attribution || '';
break;
}
// For complex block types (card, list, etc.) a partial DOM patch would
// duplicate renderer logic. Full reload happens after the global "Save"
// admin button anyway, which is already persisted in dirtyPages.
}
}
// ============================================================
// TOAST NACHRICHTEN
// ============================================================
let toastTimeout = null;
function showToast(message, type = 'success') {
const existing = document.querySelector('.editor-toast');
if (existing) existing.remove();
if (toastTimeout) clearTimeout(toastTimeout);
const toast = document.createElement('div');
toast.className = `editor-toast editor-toast-${type}`;
toast.setAttribute('role', type === 'error' ? 'alert' : 'status');
toast.setAttribute('aria-live', type === 'error' ? 'assertive' : 'polite');
toast.setAttribute('aria-atomic', 'true');
toast.innerHTML = `
${message}`;
toastTimeout = setTimeout(() => toast.remove(), 3000);
document.body.appendChild(toast);
}
// ============================================================
// EVENT-EDITOR
// ============================================================
function createEventEditorUI() {
const langs = Object.entries(EditorConfig.languages);
const defaultLang = EditorConfig.defaultLang;
const isMultiLang = langs.length > 1;
// Build language tabs
const tabsHtml = isMultiLang ? langs.map(([code, name], i) => {
const isDefault = code === defaultLang;
const active = isDefault ? ' active' : '';
return `
`;
}).join('') : '';
// Build language panels (translatable fields)
const panelsHtml = langs.map(([code, name]) => {
const isDefault = code === defaultLang;
const display = !isMultiLang || isDefault ? '' : ' hidden';
const reqMark = isDefault ? ' *' : '';
return `
`;
}).join('');
const modal = document.createElement('div');
modal.id = 'event-editor-modal';
modal.className = 'editor-modal';
modal.innerHTML = `
`;
document.body.appendChild(modal);
// Tab switching
modal.querySelectorAll('.event-lang-tab').forEach((tab, index) => {
const activateEventLang = (targetTab, focus = false) => {
modal.querySelectorAll('.event-lang-tab').forEach(t => {
const active = t === targetTab;
t.classList.toggle('active', active);
t.setAttribute('aria-selected', active ? 'true' : 'false');
t.tabIndex = active ? 0 : -1;
if (active && focus) t.focus();
});
const lang = targetTab.dataset.lang;
modal.querySelectorAll('.event-lang-panel').forEach(p => {
const active = p.dataset.lang === lang;
p.hidden = !active;
p.classList.toggle('active', active);
});
};
tab.addEventListener('click', () => activateEventLang(tab));
tab.addEventListener('keydown', e => {
const tabs = Array.from(modal.querySelectorAll('.event-lang-tab'));
if (!['ArrowLeft', 'ArrowRight', 'Home', 'End'].includes(e.key)) return;
e.preventDefault();
let next = index;
if (e.key === 'ArrowLeft') next = index === 0 ? tabs.length - 1 : index - 1;
if (e.key === 'ArrowRight') next = index === tabs.length - 1 ? 0 : index + 1;
if (e.key === 'Home') next = 0;
if (e.key === 'End') next = tabs.length - 1;
activateEventLang(tabs[next], true);
});
});
// Copy default language to all others
document.getElementById('event-copy-default')?.addEventListener('click', () => {
const dl = defaultLang;
const fields = ['title', 'location', 'description', 'admission'];
const otherLangs = langs.map(([c]) => c).filter(c => c !== dl);
fields.forEach(field => {
const val = document.getElementById(`event-${field}-${dl}`)?.value || '';
otherLangs.forEach(lang => {
const el = document.getElementById(`event-${field}-${lang}`);
if (el && !el.value) el.value = val;
});
});
showToast(t('toast.copied_to_empty'), 'success');
});
modal.querySelector('[data-event-lang-translate]')?.addEventListener('click', function() {
translateEditorLanguageSection(modal.querySelector('[data-event-lang-section]'), this);
});
modal.querySelector('.editor-modal-backdrop').addEventListener('click', closeEventModal);
document.addEventListener('keydown', (e) => {
if (e.key === 'Escape' && modal.classList.contains('active')) {
closeEventModal();
}
});
ModalResize.init(modal.querySelector('.editor-modal-content'));
}
function attachEventEditHandlers() {
document.querySelectorAll('.event-card[data-event-id]').forEach(card => {
const eventId = card.dataset.eventId;
if (!eventId) return;
card.querySelectorAll('.event-edit-btn, .event-hide-btn, .event-delete-btn').forEach(btn => {
if (btn.dataset.eventButtonReady === 'true') return;
btn.dataset.eventButtonReady = 'true';
btn.addEventListener('click', (e) => {
e.preventDefault();
e.stopPropagation();
if (btn.classList.contains('event-edit-btn')) {
openEventEditor(eventId);
} else if (btn.classList.contains('event-hide-btn')) {
toggleEventVisibility(eventId);
} else if (btn.classList.contains('event-delete-btn')) {
deleteEvent(eventId);
}
});
});
if (card.dataset.eventCardReady === 'true') return;
card.dataset.eventCardReady = 'true';
card.addEventListener('click', (e) => {
if (!EditorConfig.editMode) return;
if (e.target.closest('a')) return;
if (e.target.closest('.event-edit-buttons')) return;
e.preventDefault();
e.stopPropagation();
openEventEditor(eventId);
});
});
}
// ============================================================
// FOOTER EDITING
// ============================================================
function attachFooterEditHandlers() {
const footerFields = document.querySelectorAll('.editable-footer-field');
if (footerFields.length === 0) return;
footerFields.forEach(field => {
field.classList.add('editable-footer-active');
field.addEventListener('click', (e) => {
if (!EditorConfig.editMode) return;
e.preventDefault();
e.stopPropagation();
openFooterFieldEditor(field);
});
});
}
function openFooterFieldEditor(field) {
const fieldName = field.dataset.field;
const lang = field.dataset.lang;
const linkHref = field.dataset.linkHref;
// Link fields: edit text + href
if (fieldName === 'credit.link') {
const currentText = field.textContent.trim();
const currentHref = linkHref || field.getAttribute('href') || '';
showPromptDialog(t('footer.edit'), t('footer.link_text'), currentText, (newText) => {
if (newText === null) return;
showPromptDialog(t('footer.edit'), t('footer.link_url'), currentHref, (newHref) => {
if (newHref === null) return;
saveFooterLinkField('credit', { linkText: newText, link: newHref }, field);
field.textContent = newText;
field.href = newHref;
field.dataset.linkHref = newHref;
});
});
return;
}
// Copyright field: edit raw shortcode text
if (fieldName === 'copyright') {
// Get the raw shortcode text from JSON (innerHTML contains rendered HTML)
const footerData = EditorConfig.contentData['footer'] || {};
const currentRaw = footerData.copyright || field.innerHTML
.replace(/
]*>(.*?)<\/span>/g, '[id="$1"]$2[/id]')
.replace(/]*>(.*?)<\/span>/g, '[class="$1"]$2[/class]');
showPromptDialog(t('footer.edit'), t('footer.copyright'), currentRaw, (newValue) => {
if (newValue !== null && newValue !== currentRaw) {
saveFooterFieldDirect('copyright', newValue, field);
// Render shortcodes to HTML for display
field.innerHTML = newValue
.replace(/\[id="([^"]*)"\](.*?)\[\/id\]/g, '$2')
.replace(/\[class="([^"]*)"\](.*?)\[\/class\]/g, '$2');
}
});
return;
}
// Simple text fields (with or without lang key)
const currentValue = field.textContent.trim();
const label = getFooterFieldLabel(fieldName);
showPromptDialog(t('footer.edit'), label, currentValue, (newValue) => {
if (newValue !== null && newValue !== currentValue) {
saveFooterField(fieldName, lang, newValue, field);
}
});
}
function getFooterFieldLabel(fieldName) {
const labels = {
'tagline': 'Tagline',
'services': 'Services',
'claim': 'Claim',
'contact.phone': 'Telefonnummer',
'contact.email': 'E-Mail-Adresse',
'credit.text': 'Credit text',
'contactHeading': 'Contact heading',
'legalHeading': 'Legal heading'
};
return labels[fieldName] || fieldName;
}
function saveFooterField(fieldName, lang, newValue, element) {
pushUndoState();
if (!EditorConfig.contentData['footer']) EditorConfig.contentData['footer'] = {};
const footerData = EditorConfig.contentData['footer'];
// Fields with dot notation but no lang (e.g. contact.phone, credit.text)
if (fieldName.includes('.')) {
const parts = fieldName.split('.');
if (!footerData[parts[0]]) footerData[parts[0]] = {};
footerData[parts[0]][parts[1]] = newValue;
} else if (lang) {
// Lang-dependent fields (tagline, services, claim, contactHeading, legalHeading)
if (!footerData[fieldName]) footerData[fieldName] = {};
footerData[fieldName][lang] = newValue;
} else {
// Plain flat fields
footerData[fieldName] = newValue;
}
EditorConfig.dirtyPages.add('footer');
// Update DOM
element.textContent = newValue;
if (fieldName === 'contact.email' && element.tagName === 'A') {
element.href = 'mailto:' + newValue;
}
updateUndoRedoButtons();
}
// Save credit link (text + href stored as credit.linkText / credit.link)
function saveFooterLinkField(prefix, values, element) {
pushUndoState();
if (!EditorConfig.contentData['footer']) EditorConfig.contentData['footer'] = {};
const footerData = EditorConfig.contentData['footer'];
if (!footerData[prefix]) footerData[prefix] = {};
Object.assign(footerData[prefix], values);
EditorConfig.dirtyPages.add('footer');
updateUndoRedoButtons();
}
// Save legal link (lang-dependent text + flat href)
// Save a direct (non-nested, non-lang) footer field
function saveFooterFieldDirect(fieldName, newValue, element) {
pushUndoState();
if (!EditorConfig.contentData['footer']) EditorConfig.contentData['footer'] = {};
EditorConfig.contentData['footer'][fieldName] = newValue;
EditorConfig.dirtyPages.add('footer');
updateUndoRedoButtons();
}
// ============================================================
// EDITABLE FIELDS FOR CUSTOM LAYOUTS
// ============================================================
function attachFieldEditHandlers() {
const fields = document.querySelectorAll('.editable-field');
if (fields.length === 0) return;
fields.forEach(field => {
if (field.dataset.editorReady === 'true') return;
field.dataset.editorReady = 'true';
field.classList.add('editable-field-active');
applyBlockHitboxHint(field);
// Add hide toggle button
addFieldHideButton(field);
if (field.classList.contains('editable-field-html')) {
field.addEventListener('click', (e) => {
if (!EditorConfig.editMode) return;
e.preventDefault();
e.stopPropagation();
if (field.isContentEditable) return;
startInlineHtmlEdit(field);
});
return;
}
// Plain text fields: inline editing with contentEditable
field.addEventListener('click', (e) => {
if (!EditorConfig.editMode) return;
e.preventDefault();
e.stopPropagation();
if (field.isContentEditable) return;
startInlineEdit(field);
});
});
}
function applyBlockHitboxHint(field) {
if (!field.closest('[data-editable-group], [data-list-index]')) return;
const parentTag = (field.parentElement && field.parentElement.tagName || '').toLowerCase();
const fieldTag = (field.tagName || '').toLowerCase();
const text = (field.textContent || '').trim();
if (
field.classList.contains('editable-field-html') ||
fieldTag === 'p' ||
/^(p|li|blockquote|figcaption|h[1-6])$/.test(parentTag) ||
text.length > 38
) {
field.classList.add('editable-field-block-hitbox');
}
}
function addFieldHideButton(field) {
// Skip fields inside comparison table (rows handle hiding at row level)
if (field.closest('.comparison-table')) return;
const isHidden = field.dataset.hidden === 'true';
// Field-level hiding is intentionally quiet by default. It created too
// much chrome on every heading and text span, while the common editorial
// use case is hiding whole sections or list items. Keep an escape hatch
// for already-hidden fields so editors can make legacy content visible.
if (!isHidden && field.dataset.allowFieldHide !== 'true') return;
const btn = document.createElement('button');
btn.type = 'button';
btn.className = 'field-hide-btn';
btn.title = isHidden ? t('show') : t('hide');
btn.innerHTML = isHidden ? Icons.eyeClosed : Icons.eyeOpen;
btn.addEventListener('click', (e) => {
e.preventDefault();
e.stopPropagation();
if (!EditorConfig.editMode) return;
toggleFieldHidden(field, btn);
});
// Wrap field in a relative container for positioning
const parent = field.parentNode;
const wrapper = document.createElement('span');
wrapper.className = 'editable-field-wrapper';
parent.insertBefore(wrapper, field);
wrapper.appendChild(field);
wrapper.appendChild(btn);
}
function toggleFieldHidden(field, btn) {
const page = field.dataset.page;
const fieldKey = field.dataset.field;
if (!page || !fieldKey) return;
pushUndoState();
const pageData = EditorConfig.contentData[page];
if (!pageData) return;
const hiddenKey = fieldKey + '__hidden';
const currentlyHidden = getNestedValue(pageData, hiddenKey) === true;
const nowHidden = !currentlyHidden;
if (nowHidden) {
setNestedValue(pageData, hiddenKey, true);
field.dataset.hidden = 'true';
} else {
// Remove the __hidden key entirely when showing
deleteNestedValue(pageData, hiddenKey);
delete field.dataset.hidden;
}
btn.innerHTML = nowHidden ? Icons.eyeClosed : Icons.eyeOpen;
btn.title = nowHidden ? t('show') : t('hide');
EditorConfig.dirtyPages.add(page);
updateUndoRedoButtons();
showToast(nowHidden ? t('toast.hidden') : t('toast.visible'), 'success');
}
function startInlineEdit(field) {
const originalText = field.textContent;
field._originalText = originalText;
field.contentEditable = 'true';
field.classList.add('editable-field-editing');
field.focus();
// Text komplett markieren
const range = document.createRange();
range.selectNodeContents(field);
const sel = window.getSelection();
sel.removeAllRanges();
sel.addRange(range);
const keyHandler = (e) => {
if (e.key === 'Enter' && !e.shiftKey) {
e.preventDefault();
finishInlineEdit(field, originalText);
} else if (e.key === 'Escape') {
e.preventDefault();
cancelInlineEdit(field, originalText);
}
};
const blurHandler = () => {
// Short delay so overlay clicks are not treated as blur
setTimeout(() => {
if (field.isContentEditable) {
finishInlineEdit(field, originalText);
}
}, 150);
};
field.addEventListener('keydown', keyHandler);
field.addEventListener('blur', blurHandler);
field._inlineEditHandlers = { keyHandler, blurHandler };
}
function finishInlineEdit(field, originalText) {
const newText = field.textContent.trim();
field.contentEditable = 'false';
field.classList.remove('editable-field-editing');
cleanupInlineHandlers(field);
if (newText !== originalText && newText !== '') {
saveField(field.dataset.page, field.dataset.field, newText, field, false);
} else if (newText === '') {
field.textContent = originalText;
}
}
function cancelInlineEdit(field, originalText) {
field.textContent = originalText;
field.contentEditable = 'false';
field.classList.remove('editable-field-editing');
cleanupInlineHandlers(field);
}
function cleanupInlineHandlers(field) {
if (field._inlineEditHandlers) {
field.removeEventListener('keydown', field._inlineEditHandlers.keyHandler);
field.removeEventListener('blur', field._inlineEditHandlers.blurHandler);
delete field._inlineEditHandlers;
}
delete field._originalText;
}
function openFieldHtmlEditor(field) {
const fieldKey = field.dataset.field;
const page = field.dataset.page;
const currentValue = field.innerHTML.trim();
const label = fieldKey.split('.').pop();
createHtmlSourceDialog();
const titleEl = document.getElementById('html-source-dialog-title');
const textarea = document.getElementById('html-source-textarea');
const modal = document.getElementById('html-source-dialog-modal');
titleEl.textContent = `HTML — ${label}`;
textarea.value = formatHtml(currentValue);
_htmlSourceCallback = (newValue) => {
if (newValue !== null && newValue !== currentValue) {
saveField(page, fieldKey, newValue, field, true);
}
};
modal.classList.add('active');
document.body.style.overflow = 'hidden';
setTimeout(() => {
textarea.focus();
textarea.setSelectionRange(0, 0);
}, 100);
}
var _htmlSourceCallback = null;
function createHtmlSourceDialog() {
if (document.getElementById('html-source-dialog-modal')) return;
const modal = document.createElement('div');
modal.id = 'html-source-dialog-modal';
modal.className = 'editor-modal';
modal.innerHTML = `
`;
document.body.appendChild(modal);
modal.querySelector('.editor-modal-backdrop').addEventListener('click', () => closeHtmlSourceDialog(null));
// Ctrl+Enter to confirm
document.getElementById('html-source-textarea').addEventListener('keydown', (e) => {
if (e.key === 'Enter' && (e.ctrlKey || e.metaKey)) {
e.preventDefault();
submitHtmlSourceDialog();
}
// Tab inserts spaces instead of moving focus
if (e.key === 'Tab') {
e.preventDefault();
const ta = e.target;
const start = ta.selectionStart;
const end = ta.selectionEnd;
ta.value = ta.value.substring(0, start) + ' ' + ta.value.substring(end);
ta.selectionStart = ta.selectionEnd = start + 2;
}
});
ModalResize.init(modal.querySelector('.editor-modal-content'));
}
function closeHtmlSourceDialog(value) {
const modal = document.getElementById('html-source-dialog-modal');
modal.classList.remove('active');
ModalResize.reset(modal.querySelector('.editor-modal-content'));
document.body.style.overflow = '';
if (_htmlSourceCallback) {
const cb = _htmlSourceCallback;
_htmlSourceCallback = null;
cb(value);
}
}
function submitHtmlSourceDialog() {
const value = document.getElementById('html-source-textarea').value;
closeHtmlSourceDialog(value);
}
function formatHtml(html) {
// Simple HTML formatter for readability in the source editor
let formatted = '';
let indent = 0;
const tokens = html.replace(/>\s*\n<').split('\n');
for (let token of tokens) {
token = token.trim();
if (!token) continue;
// Closing tag or self-closing: decrease indent first
if (/^<\//.test(token)) {
indent = Math.max(0, indent - 1);
}
formatted += ' '.repeat(indent) + token + '\n';
// Opening tag (not self-closing, not void): increase indent
if (/^<[a-z][^\/]*>$/i.test(token) && !/^<(br|hr|img|input|meta|link|source)\b/i.test(token)) {
indent++;
}
}
return formatted.trim();
}
function setNestedValue(obj, dotKey, value) {
const keys = dotKey.split('.');
let current = obj;
for (let i = 0; i < keys.length - 1; i++) {
const key = keys[i];
if (!current[key] || typeof current[key] !== 'object') {
current[key] = {};
}
current = current[key];
}
current[keys[keys.length - 1]] = value;
}
function deleteNestedValue(obj, dotKey) {
const keys = dotKey.split('.');
let current = obj;
for (let i = 0; i < keys.length - 1; i++) {
if (!current[keys[i]] || typeof current[keys[i]] !== 'object') return;
current = current[keys[i]];
}
delete current[keys[keys.length - 1]];
}
function saveField(page, fieldKey, newValue, element, isHtml) {
// Push undo state before making the change
pushUndoState();
// Update in-memory contentData
if (!EditorConfig.contentData[page]) EditorConfig.contentData[page] = {};
setNestedValue(EditorConfig.contentData[page], fieldKey, newValue);
// Mark page as dirty
EditorConfig.dirtyPages.add(page);
// Update DOM immediately
if (isHtml) {
element.innerHTML = newValue;
} else {
element.textContent = newValue;
}
updateUndoRedoButtons();
}
// ============================================================
// EDITABLE LINKS FOR CUSTOM LAYOUTS
// ============================================================
function attachLinkEditHandlers() {
const links = document.querySelectorAll('[data-editable-link]');
if (links.length === 0) return;
links.forEach(link => {
if (link.dataset.editorReady === 'true') return;
link.dataset.editorReady = 'true';
link.classList.add('editable-field-active');
if (link.closest('[data-editable-group], [data-list-index]')) {
link.classList.add('editable-field-block-hitbox');
}
// Add hide toggle button
addFieldHideButton(link);
link.addEventListener('click', (e) => {
if (!EditorConfig.editMode) return;
e.preventDefault();
e.stopPropagation();
openLinkEditor(link);
});
});
}
/**
* Builds HTML for a page picker: dropdown for internal pages + URL input.
*/
function buildPagePickerHtml(selectId, inputId) {
const pages = window.RJ_PAGES || [];
let options = ``;
if (pages.length) {
options += ``;
pages.forEach(p => {
options += ``;
});
}
return `
`;
}
/**
* Wires up page-select ↔ URL-input sync after DOM insertion.
*/
function initPagePicker(selectId, inputId) {
const select = document.getElementById(selectId);
const input = document.getElementById(inputId);
if (!select || !input) return;
select.addEventListener('change', () => {
if (select.value) {
input.value = select.value;
input.readOnly = true;
input.style.opacity = '0.6';
} else {
input.value = '';
input.readOnly = false;
input.style.opacity = '1';
input.focus();
}
});
// On input change, reset select if user types a custom URL
input.addEventListener('input', () => {
if (!input.readOnly) {
select.value = '';
}
});
}
/**
* Syncs page picker state when modal opens with an existing URL.
*/
function syncPagePicker(selectId, inputId, currentHref) {
const select = document.getElementById(selectId);
const input = document.getElementById(inputId);
if (!select || !input) return;
input.value = currentHref;
// Check if currentHref matches a page
const pages = window.RJ_PAGES || [];
const match = pages.find(p => p.href === currentHref);
if (match) {
select.value = match.href;
input.readOnly = true;
input.style.opacity = '0.6';
} else {
select.value = '';
input.readOnly = false;
input.style.opacity = '1';
}
}
function openLinkEditor(element) {
const page = element.dataset.page;
const fieldKey = element.dataset.field;
const currentText = element.textContent.trim();
const currentHref = element.getAttribute('href') || '';
const currentTarget = element.getAttribute('target') || '';
const currentDownload = element.hasAttribute('download');
createLinkEditorDialog();
initPagePicker('link-editor-page-select', 'link-editor-href');
document.getElementById('link-editor-text').value = currentText;
syncPagePicker('link-editor-page-select', 'link-editor-href', currentHref);
document.getElementById('link-editor-target').checked = currentTarget === '_blank';
document.getElementById('link-editor-download').checked = currentDownload;
updateDownloadCheckboxState();
const modal = document.getElementById('link-editor-modal');
modal.classList.add('active');
document.body.style.overflow = 'hidden';
// Store reference for save
modal._editTarget = { element, page, fieldKey };
setTimeout(() => {
document.getElementById('link-editor-text').focus();
}, 100);
}
// Files that typically warrant a "download" attribute on links
const DOWNLOAD_EXTENSIONS = [
// Documents
'pdf', 'doc', 'docx', 'xls', 'xlsx', 'ppt', 'pptx',
'odt', 'ods', 'odp', 'rtf', 'txt', 'csv',
// Images
'jpg', 'jpeg', 'png', 'gif', 'webp', 'svg', 'bmp', 'tiff', 'avif',
// Archives
'zip', 'rar', '7z', 'tar', 'gz'
];
function isDownloadableHref(href) {
if (!href) return false;
// Strip query string and hash, then extract extension
const cleaned = href.split('#')[0].split('?')[0];
const match = cleaned.match(/\.([a-z0-9]+)$/i);
if (!match) return false;
return DOWNLOAD_EXTENSIONS.includes(match[1].toLowerCase());
}
function updateDownloadCheckboxState() {
const hrefInput = document.getElementById('link-editor-href');
const downloadCheckbox = document.getElementById('link-editor-download');
const downloadRow = document.getElementById('link-editor-download-row');
if (!hrefInput || !downloadCheckbox || !downloadRow) return;
const allowed = isDownloadableHref(hrefInput.value);
downloadCheckbox.disabled = !allowed;
downloadRow.classList.toggle('link-editor-option--disabled', !allowed);
if (!allowed) downloadCheckbox.checked = false;
}
function createLinkEditorDialog() {
if (document.getElementById('link-editor-modal')) return;
const modal = document.createElement('div');
modal.id = 'link-editor-modal';
modal.className = 'editor-modal';
modal.innerHTML = `
`;
document.body.appendChild(modal);
modal.querySelector('.editor-modal-backdrop').addEventListener('click', closeLinkEditor);
document.getElementById('link-editor-cancel-btn').addEventListener('click', closeLinkEditor);
document.getElementById('link-editor-cancel-btn2').addEventListener('click', closeLinkEditor);
document.getElementById('link-editor-save-btn').addEventListener('click', saveLinkEditor);
document.getElementById('link-editor-href').addEventListener('keydown', (e) => {
if (e.key === 'Enter') {
e.preventDefault();
saveLinkEditor();
}
});
// Keep the download checkbox in sync with the href type
document.getElementById('link-editor-href').addEventListener('input', updateDownloadCheckboxState);
document.getElementById('link-editor-page-select').addEventListener('change', () => {
// change handler on select already updates the hidden href value; wait a tick
setTimeout(updateDownloadCheckboxState, 0);
});
}
function closeLinkEditor() {
const modal = document.getElementById('link-editor-modal');
if (modal) {
modal.classList.remove('active');
document.body.style.overflow = '';
// Reset text input state
const textInput = document.getElementById('link-editor-text');
if (textInput) { textInput.readOnly = false; textInput.style.opacity = '1'; }
modal._inlineInsert = null;
}
}
function saveLinkEditor() {
const modal = document.getElementById('link-editor-modal');
const inlineInsert = modal._inlineInsert;
const editTarget = modal._editTarget;
const newText = document.getElementById('link-editor-text').value;
const newHref = document.getElementById('link-editor-href').value;
const newTarget = document.getElementById('link-editor-target').checked ? '_blank' : '';
const downloadBox = document.getElementById('link-editor-download');
const newDownload = !downloadBox.disabled && downloadBox.checked;
// Reset text input state
const textInput = document.getElementById('link-editor-text');
textInput.readOnly = false;
textInput.style.opacity = '1';
closeLinkEditor();
// Mode: inline insert (from floating toolbar)
if (inlineInsert) {
const { field, savedRange } = inlineInsert;
if (newHref && savedRange) {
field.focus();
const sel = window.getSelection();
sel.removeAllRanges();
sel.addRange(savedRange);
document.execCommand('createLink', false, newHref);
// Apply target/download to the freshly-created . execCommand
// wraps the selection; find the anchor at the current cursor.
const anchor = sel.anchorNode && sel.anchorNode.parentElement
? sel.anchorNode.parentElement.closest('a')
: null;
if (anchor) {
if (newTarget === '_blank') {
anchor.setAttribute('target', '_blank');
anchor.setAttribute('rel', 'noopener');
}
if (newDownload) anchor.setAttribute('download', '');
}
}
return;
}
// Mode: editableLink field
if (!editTarget) return;
const { element, page, fieldKey } = editTarget;
// Push undo state
pushUndoState();
// Build the value object. Omit target/download when unset so the JSON
// stays minimal and existing content files aren't bloated with defaults.
const linkValue = { text: newText, href: newHref };
if (newTarget) linkValue.target = newTarget;
if (newDownload) linkValue.download = true;
// Update in-memory contentData
if (!EditorConfig.contentData[page]) EditorConfig.contentData[page] = {};
setNestedValue(EditorConfig.contentData[page], fieldKey, linkValue);
// Mark as dirty
EditorConfig.dirtyPages.add(page);
// Update DOM
element.textContent = newText;
element.setAttribute('href', newHref);
if (newTarget === '_blank') {
element.setAttribute('target', '_blank');
element.setAttribute('rel', 'noopener');
} else {
element.removeAttribute('target');
element.removeAttribute('rel');
}
if (newDownload) {
element.setAttribute('download', '');
} else {
element.removeAttribute('download');
}
updateUndoRedoButtons();
}
// ============================================================
// EDITABLE IMAGES FOR CUSTOM LAYOUTS
// ============================================================
function attachImageEditHandlers() {
const images = document.querySelectorAll('[data-editable-image]');
if (images.length === 0) return;
images.forEach(img => {
if (img.dataset.editorReady === 'true') return;
img.dataset.editorReady = 'true';
// Skip images inside event cards — those are edited via the event editor modal
if (img.closest('.event-card[data-event-id]')) return;
const wrapper = document.createElement('div');
wrapper.className = 'editable-image-wrapper';
// Styled in inline-editor.css (not inline) so sites can adapt it. Images that
// fill their frame (object-fit) or are absolutely positioned keep doing so.
const imgStyle = window.getComputedStyle(img);
if (imgStyle.position === 'absolute') {
wrapper.classList.add('editable-image-wrapper--positioned');
} else if (imgStyle.objectFit && imgStyle.objectFit !== 'fill' && img.parentElement) {
const box = img.getBoundingClientRect();
const frame = img.parentElement.getBoundingClientRect();
if (Math.abs(box.width - frame.width) < 2 && Math.abs(box.height - frame.height) < 2) {
// A positioned frame (e.g. an aspect-ratio box) is covered absolutely, because
// percentage heights do not resolve against aspect-ratio heights
const framePosition = window.getComputedStyle(img.parentElement).position;
wrapper.classList.add(framePosition === 'static'
? 'editable-image-wrapper--fill'
: 'editable-image-wrapper--positioned');
}
}
img.parentNode.insertBefore(wrapper, img);
wrapper.appendChild(img);
wrapper.classList.add('editable-field-active');
// Add placeholder for empty images so they're visible and clickable
if (!img.getAttribute('src') || img.getAttribute('src') === '' || img.getAttribute('src') === '/') {
wrapper.classList.add('editable-image-empty');
}
img.addEventListener('error', () => wrapper.classList.add('editable-image-empty'));
img.addEventListener('load', () => wrapper.classList.remove('editable-image-empty'));
wrapper.addEventListener('click', (e) => {
if (!EditorConfig.editMode) return;
e.preventDefault();
e.stopPropagation();
openImageFieldEditor(img);
});
});
}
function openImageFieldEditor(imgElement) {
const page = imgElement.dataset.page;
const fieldKey = imgElement.dataset.field;
const currentAlt = imgElement.getAttribute('alt') || '';
const format = imgElement.dataset.imageFormat || 'object';
openImageManager((imagePath) => {
if (format === 'string') {
// String-format images (e.g. news cover): save path directly, no alt dialog
saveImageField(page, fieldKey, imagePath, currentAlt, imgElement);
} else if (format === 'split') {
// Split-format: src and alt live at two separate keys
showPromptDialog('Alt text', 'Alt text', currentAlt, (newAlt) => {
if (newAlt === null) newAlt = currentAlt;
saveImageField(page, fieldKey, imagePath, newAlt, imgElement);
});
} else {
// Object-format images: ask for alt text, save as {src, alt}
showPromptDialog('Alt text', 'Alt text', currentAlt, (newAlt) => {
if (newAlt === null) newAlt = currentAlt;
saveImageField(page, fieldKey, imagePath, newAlt, imgElement);
});
}
}, null, imageFieldPath(imgElement));
}
// Stored path of an editable image (the library preselects it); falls back to the rendered src
function imageFieldPath(imgElement) {
const page = imgElement.dataset.page;
const fieldKey = imgElement.dataset.field;
let stored = page === '__news_post__'
? (EditorConfig.newsPostData ? EditorConfig.newsPostData[fieldKey] : undefined)
: (EditorConfig.contentData[page] ? getNestedValue(EditorConfig.contentData[page], fieldKey) : undefined);
if (stored && typeof stored === 'object') stored = stored.src;
return typeof stored === 'string' && stored ? stored : imageElementPath(imgElement);
}
// Site path of a rendered image: without origin, query and hash
function imageElementPath(img) {
const src = img ? (img.getAttribute('src') || '') : '';
if (!src || src.indexOf('data:') === 0) return null;
return src.replace(/^https?:\/\/[^/]+/i, '').split(/[?#]/)[0] || null;
}
function saveImageField(page, fieldKey, newSrc, newAlt, element) {
// Push undo state
pushUndoState();
const format = element.dataset.imageFormat || 'object';
// Update in-memory data
if (page === '__news_post__' && EditorConfig.newsPostData) {
// News post: save image path as flat string
EditorConfig.newsPostData[fieldKey] = newSrc;
} else {
if (!EditorConfig.contentData[page]) EditorConfig.contentData[page] = {};
if (format === 'string') {
setNestedValue(EditorConfig.contentData[page], fieldKey, newSrc);
} else if (format === 'split') {
// Save src and alt at separate sibling keys — preserves other
// fields in the parent object (e.g. type, caption, width).
setNestedValue(EditorConfig.contentData[page], fieldKey, newSrc);
const altFieldKey = element.dataset.altField;
if (altFieldKey) {
setNestedValue(EditorConfig.contentData[page], altFieldKey, newAlt);
}
} else {
setNestedValue(EditorConfig.contentData[page], fieldKey, { src: newSrc, alt: newAlt });
}
}
// Mark as dirty
EditorConfig.dirtyPages.add(page);
// Update DOM
element.setAttribute('src', newSrc);
element.setAttribute('alt', newAlt);
syncAiLabel(element);
// Remove empty placeholder class if image was set
const wrapper = element.closest('.editable-image-wrapper');
if (wrapper) wrapper.classList.remove('editable-image-empty');
const heroDiv = element.closest('.news-post-page__hero--empty');
if (heroDiv) heroDiv.classList.remove('news-post-page__hero--empty');
updateUndoRedoButtons();
}
// ============================================================
// AI DISCLOSURE LABELS
// The label next to an AI-generated or AI-modified image follows image swaps
// and label changes in the media library right away (window.RJ_AI_LABELS).
// ============================================================
function aiLabelKindForSrc(src) {
const files = window.RJ_AI_LABELS && window.RJ_AI_LABELS.files;
if (!files || !src) return '';
let path;
try {
path = decodeURIComponent(new URL(src, location.href).pathname);
} catch (e) {
return '';
}
for (const [type, marker] of [['image', 'assets/images/'], ['video', 'assets/videos/']]) {
const position = path.indexOf(marker);
if (position === -1) continue;
const name = path.slice(position + marker.length);
return files[type] && Object.prototype.hasOwnProperty.call(files[type], name) ? files[type][name] : '';
}
return '';
}
function syncAiLabel(img) {
const markup = window.RJ_AI_LABELS && window.RJ_AI_LABELS.markup;
if (!markup || !img) return;
// The label follows the image, or its editor wrapper
const anchor = img.closest('.editable-image-wrapper') || img;
const next = anchor.nextElementSibling;
const label = next && next.classList.contains('rj-ai-label') ? next : null;
const kind = aiLabelKindForSrc(img.getAttribute('src'));
if (label && kind && label.classList.contains('rj-ai-label--' + kind)) return;
if (label) label.remove();
if (kind && markup[kind]) anchor.insertAdjacentHTML('afterend', markup[kind]);
}
document.addEventListener('raiju:ai-label-change', event => {
const config = window.RJ_AI_LABELS;
const detail = event.detail || {};
if (!config || !detail.type || !detail.name) return;
if (!config.files || Array.isArray(config.files)) config.files = {};
if (!config.files[detail.type] || Array.isArray(config.files[detail.type])) config.files[detail.type] = {};
if (detail.label) config.files[detail.type][detail.name] = detail.label;
else delete config.files[detail.type][detail.name];
document.querySelectorAll('img[data-editable-image], img[data-rj-bind="image"]').forEach(syncAiLabel);
});
// ============================================================
// EDITABLE LISTS (Repeatable Items — Add/Delete/Reorder)
// ============================================================
let listDragState = {
element: null,
index: null,
page: null,
listKey: null
};
function attachListEditHandlers() {
const lists = document.querySelectorAll('[data-editable-list]');
if (lists.length === 0) return;
lists.forEach(listContainer => {
if (listContainer.dataset.editorReady === 'true') return;
listContainer.dataset.editorReady = 'true';
const page = listContainer.dataset.listPage;
const listKey = listContainer.dataset.listKey;
const defaults = JSON.parse(listContainer.dataset.listDefaults || '{}');
const items = listContainer.querySelectorAll('[data-list-index]');
items.forEach(item => {
const index = parseInt(item.dataset.listIndex, 10);
item.classList.add('editable-list-item');
// Check if list item is hidden
const pageData = EditorConfig.contentData[page];
const listItems = pageData ? getNestedObj(pageData, listKey) : null;
const itemData = listItems ? (Array.isArray(listItems) ? listItems[index] : listItems[index.toString()]) : null;
const isItemHidden = itemData && itemData.hidden === true;
// Create overlay with drag handle + hide + delete buttons
const overlay = document.createElement('div');
const hasGroupEditor = item.hasAttribute('data-editable-group');
overlay.className = 'editable-list-overlay raiju-editor-list-overlay';
overlay.innerHTML = `
${hasGroupEditor ? `` : ''}
${Icons.drag}
`;
item.style.position = 'relative';
item.appendChild(overlay);
keepOverlayOpenWhileCrossing(item, overlay);
// Apply hidden state
if (isItemHidden) {
item.dataset.hidden = 'true';
}
// Drag starts only from the handle; inline editing and text
// selection inside list cards remain normal clicks.
item.setAttribute('draggable', 'false');
if (hasGroupEditor) {
overlay.querySelector('.list-edit-btn').addEventListener('click', (e) => {
e.preventDefault();
e.stopPropagation();
openGroupEditor(item);
});
}
const dragHandle = overlay.querySelector('.list-drag-handle');
if (dragHandle) {
const armDrag = () => {
item.dataset.dragArmed = 'true';
item.setAttribute('draggable', 'true');
};
const disarmDrag = () => {
delete item.dataset.dragArmed;
item.setAttribute('draggable', 'false');
};
dragHandle.addEventListener('pointerdown', armDrag);
dragHandle.addEventListener('mousedown', armDrag);
dragHandle.addEventListener('pointerup', () => setTimeout(disarmDrag, 0));
}
// Drag events — use dynamic index from dataset (survives reorder)
item.addEventListener('dragstart', (e) => {
if (!EditorConfig.editMode) { e.preventDefault(); return; }
if (item.dataset.dragArmed !== 'true') { e.preventDefault(); return; }
const currentIndex = parseInt(item.dataset.listIndex, 10);
listDragState = { element: item, index: currentIndex, page, listKey };
item.classList.add('dragging');
e.dataTransfer.effectAllowed = 'move';
e.dataTransfer.setData('text/plain', currentIndex.toString());
document.querySelectorAll('iframe').forEach(f => f.style.pointerEvents = 'none');
});
item.addEventListener('dragend', () => {
item.classList.remove('dragging');
document.querySelectorAll('.editable-list-item').forEach(el => {
el.classList.remove('drag-over', 'drag-over-top', 'drag-over-bottom');
});
listDragState = { element: null, index: null, page: null, listKey: null };
document.querySelectorAll('iframe').forEach(f => f.style.pointerEvents = '');
delete item.dataset.dragArmed;
item.setAttribute('draggable', 'false');
});
item.addEventListener('dragover', (e) => {
e.preventDefault();
e.dataTransfer.dropEffect = 'move';
if (listDragState.listKey !== listKey) return;
const rect = item.getBoundingClientRect();
const midY = rect.top + rect.height / 2;
item.classList.remove('drag-over-top', 'drag-over-bottom');
if (e.clientY < midY) {
item.classList.add('drag-over-top');
} else {
item.classList.add('drag-over-bottom');
}
});
item.addEventListener('dragenter', (e) => {
e.preventDefault();
if (listDragState.listKey === listKey) {
item.classList.add('drag-over');
}
});
item.addEventListener('dragleave', () => {
item.classList.remove('drag-over', 'drag-over-top', 'drag-over-bottom');
});
item.addEventListener('drop', (e) => {
e.preventDefault();
item.classList.remove('drag-over', 'drag-over-top', 'drag-over-bottom');
if (listDragState.listKey !== listKey) return;
const fromIndex = listDragState.index;
const currentIndex = parseInt(item.dataset.listIndex, 10);
const rect = item.getBoundingClientRect();
const midY = rect.top + rect.height / 2;
let toIndex = e.clientY < midY ? currentIndex : currentIndex + 1;
if (fromIndex < toIndex) toIndex--;
if (fromIndex === toIndex) return;
reorderListItems(page, listKey, fromIndex, toIndex);
});
// Hide button handler — read index dynamically
overlay.querySelector('.list-hide-btn').addEventListener('click', (e) => {
e.preventDefault();
e.stopPropagation();
const currentIndex = parseInt(item.dataset.listIndex, 10);
toggleListItemHidden(page, listKey, currentIndex, item, e.currentTarget);
});
// Delete button handler — read index dynamically
overlay.querySelector('.list-delete-btn').addEventListener('click', (e) => {
e.preventDefault();
e.stopPropagation();
const currentIndex = parseInt(item.dataset.listIndex, 10);
deleteListItem(page, listKey, currentIndex);
});
// Add button at bottom edge of each item
const addItemBtn = document.createElement('button');
addItemBtn.type = 'button';
addItemBtn.className = 'list-item-add-btn';
addItemBtn.innerHTML = Icons.plus;
addItemBtn.title = 'Add item';
addItemBtn.addEventListener('click', (e) => {
e.preventDefault();
e.stopPropagation();
const currentIndex = parseInt(item.dataset.listIndex, 10);
addListItemAfter(page, listKey, defaults, currentIndex);
});
item.appendChild(addItemBtn);
});
});
}
// --- Comparison table row hide buttons ---
function attachComparisonRowHandlers() {
const rows = document.querySelectorAll('[data-comparison-row]');
if (rows.length === 0) return;
rows.forEach(tr => {
const rowIndex = parseInt(tr.dataset.comparisonRow, 10);
const page = tr.dataset.rowPage;
const isHidden = tr.dataset.hidden === 'true';
const btn = document.createElement('button');
btn.type = 'button';
btn.className = 'comparison-row-hide-btn';
btn.title = isHidden ? t('show') : t('hide');
btn.innerHTML = isHidden ? Icons.eyeClosed : Icons.eyeOpen;
btn.addEventListener('click', (e) => {
e.preventDefault();
e.stopPropagation();
if (!EditorConfig.editMode) return;
pushUndoState();
const pageData = EditorConfig.contentData[page];
if (!pageData) return;
const items = getNestedObj(pageData, 'comparison.rows');
if (!items) return;
const itemData = Array.isArray(items) ? items[rowIndex] : items[rowIndex.toString()];
if (!itemData) return;
const nowHidden = !itemData.hidden;
if (nowHidden) {
itemData.hidden = true;
tr.dataset.hidden = 'true';
} else {
delete itemData.hidden;
delete tr.dataset.hidden;
}
btn.innerHTML = nowHidden ? Icons.eyeClosed : Icons.eyeOpen;
btn.title = nowHidden ? t('show') : t('hide');
EditorConfig.dirtyPages.add(page);
updateUndoRedoButtons();
showToast(nowHidden ? t('toast.row_hidden') : t('toast.row_visible'), 'success');
});
// Position eye button at the left edge of the label cell
const labelCell = tr.querySelector('.comparison-table__label');
if (!labelCell) return;
labelCell.classList.add('comparison-label-with-eye');
labelCell.appendChild(btn);
});
}
// ============================================================
// COMPARISON CELL TOGGLE BUTTONS (yes / no / text)
// ============================================================
function attachComparisonCellToggles() {
const cells = document.querySelectorAll('[data-cell-field]');
if (cells.length === 0) return;
cells.forEach(td => {
const fieldKey = td.dataset.cellField;
const page = td.dataset.cellPage;
const currentType = td.dataset.cellType; // 'yes', 'no', or 'text'
const editableSpan = td.querySelector('.editable-field');
if (!editableSpan) return;
// Create toggle button group
const group = document.createElement('div');
group.className = 'cell-toggle-group';
['yes', 'no', 'text'].forEach(mode => {
const btn = document.createElement('button');
btn.type = 'button';
btn.className = 'cell-toggle-btn' + (mode === currentType ? ' cell-toggle-btn--active' : '');
btn.dataset.mode = mode;
btn.textContent = mode === 'yes' ? '✓' : mode === 'no' ? '✗' : 'Aa';
btn.title = mode === 'yes' ? 'Yes (checkmark)' : mode === 'no' ? 'No (cross)' : 'Custom text';
btn.addEventListener('click', (e) => {
e.preventDefault();
e.stopPropagation();
if (!EditorConfig.editMode) return;
pushUndoState();
// Update the value in contentData
const pageData = EditorConfig.contentData[page];
if (!pageData) return;
let newValue;
if (mode === 'yes') {
newValue = 'yes';
} else if (mode === 'no') {
newValue = 'no';
} else {
// Switch to text mode — keep current value if already text, else clear
const current = getNestedValue(pageData, fieldKey);
newValue = (current === 'yes' || current === 'no') ? '' : (current || '');
}
setNestedValue(pageData, fieldKey, newValue);
editableSpan.textContent = newValue;
td.dataset.cellType = mode === 'text' ? 'text' : mode;
// Update active state on buttons
group.querySelectorAll('.cell-toggle-btn').forEach(b => {
b.classList.toggle('cell-toggle-btn--active', b.dataset.mode === mode);
});
// Show/hide the editable text span based on mode
editableSpan.classList.toggle('cell-text-hidden', mode !== 'text');
if (mode === 'text') {
// Show placeholder if empty
if (!newValue) {
editableSpan.dataset.empty = 'true';
} else {
delete editableSpan.dataset.empty;
}
editableSpan.focus();
}
// Update the icon element
const icon = td.querySelector('.cell-type-icon');
if (mode === 'text') {
if (icon) icon.remove();
} else {
if (icon) {
icon.className = 'cell-type-icon ' + (mode === 'yes' ? 'comparison-yes' : 'comparison-no');
icon.textContent = mode === 'yes' ? '✓' : '✗';
} else {
const newIcon = document.createElement('span');
newIcon.className = 'cell-type-icon ' + (mode === 'yes' ? 'comparison-yes' : 'comparison-no');
newIcon.textContent = mode === 'yes' ? '✓' : '✗';
td.insertBefore(newIcon, group);
}
}
EditorConfig.dirtyPages.add(page);
updateUndoRedoButtons();
});
group.appendChild(btn);
});
// Insert toggle group before the editable span
td.insertBefore(group, editableSpan);
// For yes/no cells, add an icon element for admin non-edit view
if (currentType === 'yes' || currentType === 'no') {
const icon = document.createElement('span');
icon.className = 'cell-type-icon ' + (currentType === 'yes' ? 'comparison-yes' : 'comparison-no');
icon.textContent = currentType === 'yes' ? '✓' : '✗';
td.insertBefore(icon, group);
}
// Mark empty text cells for placeholder
if (currentType === 'text' && !editableSpan.textContent.trim()) {
editableSpan.dataset.empty = 'true';
}
// Track empty state on input
editableSpan.addEventListener('input', () => {
if (editableSpan.textContent.trim()) {
delete editableSpan.dataset.empty;
} else {
editableSpan.dataset.empty = 'true';
}
});
});
}
// --- List helpers: convert between numbered objects and arrays ---
function objectToArray(obj) {
const keys = Object.keys(obj).map(Number).filter(k => !isNaN(k)).sort((a, b) => a - b);
return keys.map(k => obj[k.toString()]);
}
function arrayToNumberedObject(arr) {
const obj = {};
arr.forEach((item, i) => { obj[i.toString()] = item; });
return obj;
}
function getNestedObj(obj, dotKey) {
const keys = dotKey.split('.');
let current = obj;
for (const key of keys) {
if (!current || typeof current !== 'object') return null;
current = current[key];
}
return current;
}
function setNestedObj(obj, dotKey, value) {
const keys = dotKey.split('.');
let current = obj;
for (let i = 0; i < keys.length - 1; i++) {
if (!current[keys[i]] || typeof current[keys[i]] !== 'object') {
current[keys[i]] = {};
}
current = current[keys[i]];
}
current[keys[keys.length - 1]] = value;
}
// --- List operations (batch mode — modify in-memory, save on "Save") ---
function cloneListDefault(defaults) {
if (Array.isArray(defaults)) return [...defaults];
if (defaults && typeof defaults === 'object') return { ...defaults };
return defaults;
}
function reorderListItems(page, listKey, fromIndex, toIndex) {
pushReorderUndo('reorder-list', { page, listKey, from: fromIndex, to: toIndex });
executeListReorder(page, listKey, fromIndex, toIndex);
}
function executeListReorder(page, listKey, fromIndex, toIndex) {
const pageData = EditorConfig.contentData[page];
const items = getNestedObj(pageData, listKey);
if (!items) return;
// Update data
const arr = Array.isArray(items) ? [...items] : objectToArray(items);
const [moved] = arr.splice(fromIndex, 1);
arr.splice(toIndex, 0, moved);
setNestedObj(pageData, listKey, Array.isArray(items) ? arr : arrayToNumberedObject(arr));
EditorConfig.dirtyPages.add(page);
// Update DOM
const listContainer = document.querySelector(
`[data-editable-list][data-list-page="${page}"][data-list-key="${listKey}"]`
);
if (listContainer) {
const domItems = Array.from(listContainer.querySelectorAll(':scope > [data-list-index]'));
if (domItems[fromIndex]) {
const movedEl = domItems[fromIndex];
if (fromIndex < toIndex) {
const refEl = domItems[toIndex];
refEl.parentNode.insertBefore(movedEl, refEl.nextSibling);
} else {
const refEl = domItems[toIndex];
refEl.parentNode.insertBefore(movedEl, refEl);
}
// Update indices
listContainer.querySelectorAll(':scope > [data-list-index]').forEach((el, i) => {
el.dataset.listIndex = i;
});
}
}
showToast(t('toast.order_changed'), 'success');
}
function deleteListItem(page, listKey, index) {
showConfirmDialog(
t('item.delete'),
t('item.delete_confirm'),
t('section.reload_hint'),
() => {
pushUndoState();
const pageData = EditorConfig.contentData[page];
const items = getNestedObj(pageData, listKey);
const arr = Array.isArray(items) ? [...items] : objectToArray(items);
arr.splice(index, 1);
setNestedObj(pageData, listKey, Array.isArray(items) ? arr : arrayToNumberedObject(arr));
EditorConfig.dirtyPages.add(page);
updateUndoRedoButtons();
saveStructuralChange(page, 'Item deleted');
}
);
}
function addListItem(page, listKey, defaults) {
pushUndoState();
const pageData = EditorConfig.contentData[page];
const items = getNestedObj(pageData, listKey) || {};
if (Array.isArray(items)) {
items.push(cloneListDefault(defaults));
setNestedObj(pageData, listKey, items);
} else {
const keys = Object.keys(items).map(Number).filter(k => !isNaN(k));
const nextIndex = keys.length > 0 ? Math.max(...keys) + 1 : 0;
items[nextIndex.toString()] = cloneListDefault(defaults);
setNestedObj(pageData, listKey, items);
}
EditorConfig.dirtyPages.add(page);
updateUndoRedoButtons();
saveStructuralChange(page, 'Item added');
}
function addListItemAfter(page, listKey, defaults, afterIndex) {
pushUndoState();
const pageData = EditorConfig.contentData[page];
const items = getNestedObj(pageData, listKey) || {};
const itemsAreArray = Array.isArray(items);
const arr = itemsAreArray ? [...items] : objectToArray(items);
arr.splice(afterIndex + 1, 0, cloneListDefault(defaults));
setNestedObj(pageData, listKey, itemsAreArray ? arr : arrayToNumberedObject(arr));
EditorConfig.dirtyPages.add(page);
updateUndoRedoButtons();
saveStructuralChange(page, 'Item added');
}
// --- Hide / Show list items ---
function toggleListItemHidden(page, listKey, index, itemEl, btnEl) {
const pageData = EditorConfig.contentData[page];
if (!pageData) return;
const items = getNestedObj(pageData, listKey);
if (!items) return;
const itemData = Array.isArray(items) ? items[index] : items[index.toString()];
if (!itemData) return;
pushUndoState();
const nowHidden = !itemData.hidden;
if (nowHidden) {
itemData.hidden = true;
itemEl.dataset.hidden = 'true';
} else {
delete itemData.hidden;
delete itemEl.dataset.hidden;
}
// Update button icon
btnEl.innerHTML = nowHidden ? Icons.eyeClosed : Icons.eyeOpen;
const label = nowHidden ? t('show') : t('hide');
btnEl.dataset.editorTooltip = label;
btnEl.setAttribute('aria-label', label);
EditorConfig.dirtyPages.add(page);
updateUndoRedoButtons();
showToast(nowHidden ? t('toast.hidden') : t('toast.visible'), 'success');
}
/**
* Structural changes that require a page reload (add/delete sections or list items)
* because PHP templates render the HTML server-side.
* Saves ALL dirty pages first, then reloads with edit-mode auto-restore.
*/
async function saveStructuralChange(page, description) {
try {
// Collect all dirty pages (including the structural change page)
const pagesToSave = new Set(EditorConfig.dirtyPages);
pagesToSave.add(page);
for (const p of pagesToSave) {
const pageData = EditorConfig.contentData[p];
if (!pageData) continue;
const formData = new FormData();
formData.append('action', 'save');
formData.append('page', p);
formData.append('content', JSON.stringify(pageData));
formData.append('csrf_token', EditorConfig.csrfToken);
const response = await fetch(EditorConfig.apiUrl, { method: 'POST', body: formData });
const result = await response.json();
if (!result.success) {
showToast(t('toast.error_generic', { message: result.message || 'Unknown' }), 'error');
return;
}
}
// Persist edit-mode flag so it auto-restores after reload
sessionStorage.setItem('site-edit-mode', 'true');
showToast(description, 'success');
// Detach beforeunload guard before the programmatic reload —
// otherwise the browser shows its native "leave page?" dialog
// even though the editor itself is triggering the reload and
// all dirty pages were just persisted above.
window.removeEventListener('beforeunload', beforeUnloadGuard);
setTimeout(() => location.reload(), 300);
} catch (error) {
showToast(t('toast.error_saving', { page: '', message: error.message }), 'error');
}
}
function openEventEditor(eventId) {
const modal = document.getElementById('event-editor-modal');
const title = document.getElementById('event-editor-title');
const deleteBtn = document.getElementById('event-delete-btn');
const langs = Object.keys(EditorConfig.languages);
const translatableFields = ['title', 'location', 'description', 'admission'];
// Reset all fields
document.getElementById('event-id').value = '';
document.getElementById('event-date').value = '';
document.getElementById('event-time').value = '';
document.getElementById('event-end-date').value = '';
document.getElementById('event-end-time').value = '';
document.getElementById('event-url').value = '';
document.getElementById('event-image').value = '';
translatableFields.forEach(field => {
langs.forEach(lang => {
const el = document.getElementById(`event-${field}-${lang}`);
if (el) el.value = '';
});
});
// Reset tabs to default language
modal.querySelectorAll('.event-lang-tab').forEach(t => {
t.classList.toggle('active', t.dataset.lang === EditorConfig.defaultLang);
t.setAttribute('aria-selected', t.dataset.lang === EditorConfig.defaultLang ? 'true' : 'false');
t.tabIndex = t.dataset.lang === EditorConfig.defaultLang ? 0 : -1;
});
modal.querySelectorAll('.event-lang-panel').forEach(p => {
const active = p.dataset.lang === EditorConfig.defaultLang;
p.hidden = !active;
p.classList.toggle('active', active);
});
if (eventId) {
title.textContent = t('event.edit');
deleteBtn.style.display = 'inline-block';
const event = EditorConfig.eventsData?.events?.find(c => c.id === eventId);
if (event) {
EditorConfig.currentEvent = event;
document.getElementById('event-id').value = event.id;
document.getElementById('event-date').value = event.date || '';
document.getElementById('event-time').value = event.time || '';
document.getElementById('event-end-date').value = event['end-date'] || '';
document.getElementById('event-end-time').value = event['end-time'] || '';
document.getElementById('event-url').value = event.url || '';
document.getElementById('event-image').value = event.image || '';
translatableFields.forEach(field => {
langs.forEach(lang => {
const el = document.getElementById(`event-${field}-${lang}`);
if (el) el.value = (event[field] && event[field][lang]) || '';
});
});
}
} else {
title.textContent = t('event.new');
deleteBtn.style.display = 'none';
EditorConfig.currentEvent = null;
}
modal.classList.add('active');
document.body.style.overflow = 'hidden';
}
function closeEventModal() {
const modal = document.getElementById('event-editor-modal');
modal.classList.remove('active');
ModalResize.reset(modal.querySelector('.editor-modal-content'));
document.body.style.overflow = '';
EditorConfig.currentEvent = null;
}
async function saveEvent() {
const langs = Object.keys(EditorConfig.languages);
const defaultLang = EditorConfig.defaultLang;
const translatableFields = ['title', 'location', 'description', 'admission'];
// Build translatable field objects
const fieldObjects = {};
translatableFields.forEach(field => {
fieldObjects[field] = {};
langs.forEach(lang => {
const el = document.getElementById(`event-${field}-${lang}`);
if (el) fieldObjects[field][lang] = el.value;
});
});
const event = {
id: document.getElementById('event-id').value || '',
date: document.getElementById('event-date').value,
time: document.getElementById('event-time').value,
'end-date': document.getElementById('event-end-date').value,
'end-time': document.getElementById('event-end-time').value,
url: document.getElementById('event-url').value,
...fieldObjects,
image: document.getElementById('event-image').value
};
if (!event.date || !event.title[defaultLang]) {
showToast(t('event.date_required'), 'error');
return;
}
try {
const formData = new FormData();
formData.append('action', 'save-event');
formData.append('event', JSON.stringify(event));
formData.append('csrf_token', EditorConfig.csrfToken);
const response = await fetch(EditorConfig.apiUrl, {
method: 'POST',
body: formData
});
const result = await response.json();
if (result.success) {
showToast(result.message || t('toast.saved'), 'success');
closeEventModal();
setTimeout(() => location.reload(), 500);
} else {
showToast(t('toast.error_generic', { message: result.message }), 'error');
}
} catch (error) {
showToast(t('toast.error_saving', { page: '', message: error.message }), 'error');
}
}
function deleteEvent() {
const eventId = document.getElementById('event-id').value;
if (!eventId) return;
showConfirmDialog(
t('event.delete'),
t('event.delete_confirm'),
t('event.cannot_undo'),
async () => {
try {
const formData = new FormData();
formData.append('action', 'delete-event');
formData.append('id', eventId);
formData.append('csrf_token', EditorConfig.csrfToken);
const response = await fetch(EditorConfig.apiUrl, {
method: 'POST',
body: formData
});
const result = await response.json();
if (result.success) {
showToast(t('toast.event_deleted'), 'success');
closeEventModal();
setTimeout(() => location.reload(), 500);
} else {
showToast(t('toast.error_generic', { message: result.message }), 'error');
}
} catch (error) {
showToast(t('toast.error_deleting', { message: error.message }), 'error');
}
}
);
}
// Toggle event visibility (hide/show)
async function toggleEventVisibility(eventId) {
if (!eventId) return;
try {
const formData = new FormData();
formData.append('action', 'toggle-event-visibility');
formData.append('id', eventId);
formData.append('csrf_token', EditorConfig.csrfToken);
const response = await fetch(EditorConfig.apiUrl, {
method: 'POST',
body: formData
});
const result = await response.json();
if (result.success) {
const nowHidden = result.data.hidden;
const card = document.querySelector('.event-card[data-event-id="' + eventId + '"]');
if (card) {
card.classList.toggle('event-card-hidden', nowHidden);
const hideBtn = card.querySelector('.event-hide-btn');
if (hideBtn) {
hideBtn.title = nowHidden ? t('show') : t('hide');
hideBtn.dataset.hidden = nowHidden ? 'true' : 'false';
hideBtn.innerHTML = nowHidden ? Icons.eyeClosed : Icons.eyeOpen;
}
}
showToast(nowHidden ? t('toast.event_hidden') : t('toast.event_visible'), 'success');
} else {
showToast(t('toast.error_generic', { message: result.message }), 'error');
}
} catch (error) {
showToast(t('toast.error_generic', { message: error.message }), 'error');
}
}
// ============================================================
// VERLAUF-MODAL (Undo-Historie)
// ============================================================
function createHistoryModal() {
if (document.getElementById('history-modal')) return;
const modal = document.createElement('div');
modal.id = 'history-modal';
modal.className = 'editor-modal';
modal.innerHTML = `
`;
document.body.appendChild(modal);
modal.querySelector('.editor-modal-backdrop').addEventListener('click', closeHistoryModal);
// Resizable Modal
ModalResize.init(modal.querySelector('.editor-modal-content'));
}
function openHistoryModal() {
createHistoryModal();
const listEl = document.getElementById('history-list');
listEl.innerHTML = '';
// Collect all pages with backups
const allPages = UndoHistory.getAllPages();
let hasAnyBackups = false;
allPages.forEach(page => {
const backups = UndoHistory.getBackups(page);
if (backups.length > 0) {
hasAnyBackups = true;
// Page header
const pageHeader = document.createElement('div');
pageHeader.className = 'history-page-header';
pageHeader.textContent = page.replace('_', ' → ').toUpperCase();
listEl.appendChild(pageHeader);
// Backup entries
backups.forEach((backup, index) => {
const entry = document.createElement('div');
entry.className = 'history-entry';
entry.innerHTML = `
${backup.date}
${backup.action}
`;
listEl.appendChild(entry);
});
}
});
if (!hasAnyBackups) {
listEl.innerHTML = '' + t('history.empty') + '
';
}
document.getElementById('history-modal').classList.add('active');
document.body.style.overflow = 'hidden';
}
function closeHistoryModal() {
const modal = document.getElementById('history-modal');
if (modal) {
modal.classList.remove('active');
ModalResize.reset(modal.querySelector('.editor-modal-content'));
document.body.style.overflow = '';
}
}
async function restoreFromHistory(contentPage, timestamp) {
const backups = UndoHistory.getBackups(contentPage);
const backup = backups.find(b => b.timestamp === timestamp);
if (!backup) {
showToast(t('history.not_found'), 'error');
return;
}
showConfirmDialog(
t('history.restore_title'),
t('history.restore_confirm', { date: backup.date }),
t('history.overwrite_warning'),
async () => {
closeHistoryModal();
await restoreContentState(backup.data, contentPage);
},
t('history.overwrite')
);
}
function clearHistory() {
showConfirmDialog(
t('history.clear'),
t('history.clear_confirm'),
t('event.cannot_undo'),
() => {
UndoHistory.clearAllHistory();
closeHistoryModal();
showToast(t('history.cleared'), 'success');
}
);
}
// ============================================================
// IMAGE MANAGER — thin wrappers around NbImageManager (js/image-manager.js)
// ============================================================
// Initialize shared image manager with frontend editor context.
// Called lazily on first open() since EditorConfig.csrfToken is set
// by initEditor() after the meta tag is parsed.
let _nbImgMgrInitialized = false;
function ensureImageManagerInit() {
if (_nbImgMgrInitialized || !window.NbImageManager) return;
NbImageManager.init({
apiUrl: EditorConfig.apiUrl,
csrfToken: EditorConfig.csrfToken,
t: t,
showToast: showToast,
showConfirm: function(title, message, onYes) {
showConfirmDialog(title, message, '', onYes);
}
});
_nbImgMgrInitialized = true;
}
function updateImagePreview(inputId) {
// Derive preview element ID from input ID (editor-input-{key}-{type} → editor-image-preview-{key})
let previewId = 'editor-image-preview';
let input;
if (inputId) {
input = document.getElementById(inputId);
const m = inputId.match(/^editor-input-(.+?)-[^-]+$/);
if (m) previewId = 'editor-image-preview-' + m[1];
} else {
// Fallback: find any visible image input in the editor modal
input = document.querySelector('.editor-field[style*="block"] input[id^="editor-input-"][readonly]');
if (input) {
inputId = input.id;
const m = inputId.match(/^editor-input-(.+?)-[^-]+$/);
if (m) previewId = 'editor-image-preview-' + m[1];
}
}
const preview = document.getElementById(previewId);
if (!input || !preview) return;
const imagePath = input.value.trim();
if (imagePath) {
const img = document.createElement('img');
img.src = imagePath;
img.alt = 'Preview';
img.onerror = function() { preview.innerHTML = 'Image not found
'; };
preview.innerHTML = '';
preview.appendChild(img);
} else {
preview.innerHTML = '' + t('image.no_selection') + '
';
}
}
function openImageManager(callback, targetInputId, currentPath) {
ensureImageManagerInit();
// Default callback: update a specific editor image input by ID
const cb = callback || function(imagePath) {
const input = targetInputId ? document.getElementById(targetInputId) : null;
if (input) {
input.value = imagePath;
updateImagePreview(targetInputId);
}
};
const currentInput = targetInputId ? document.getElementById(targetInputId) : null;
// The library preselects the current image
const current = currentPath || (currentInput ? currentInput.value : null);
NbImageManager.open(cb, current, { types: ['image'], type: 'image' });
}
function closeImageManager() { NbImageManager.close(); }
function confirmImageSelection() { NbImageManager.confirmSelection(); }
function openImageManagerForEvent() {
ensureImageManagerInit();
const eventInput = document.getElementById('event-image');
NbImageManager.open(function(imagePath) {
const input = document.getElementById('event-image');
if (input) {
input.value = imagePath;
// Update preview if an updater exists
if (typeof updateEventImagePreview === 'function') {
updateEventImagePreview();
}
}
}, eventInput ? eventInput.value : null, { types: ['image'], type: 'image' });
}
// Lightbox for previewing the image currently entered in the editor's image input
function openEditorImageLightbox(inputId) {
const input = inputId ? document.getElementById(inputId) : null;
if (!input) return;
const imagePath = input.value.trim();
if (!imagePath) {
showToast(t('image.no_selection'), 'error');
return;
}
const imageName = imagePath.split('/').pop();
// NbImageManager lightbox is internal; open it via a temporary approach:
// simplest: use a built-in modal by opening the manager and letting the user preview
// For quick preview without manager, create a minimal inline lightbox:
let lb = document.getElementById('rj-imgmgr-inline-lightbox');
if (!lb) {
lb = document.createElement('div');
lb.id = 'rj-imgmgr-inline-lightbox';
lb.className = 'rj-imgmgr-lightbox';
lb.innerHTML =
'' +
'
' +
'
![]()
' +
'
' +
'
' + t('audio.loading') + '
';
try {
const response = await fetch(`${EditorConfig.apiUrl}?action=list-audio`);
const result = await response.json();
if (result.success) {
audioManagerData = result.data || [];
filterAndRenderAudio();
} else {
listEl.innerHTML = '' + t('audio.error_loading') + '
';
}
} catch (error) {
listEl.innerHTML = '' + t('toast.error_generic', { message: error.message }) + '
';
}
}
function filterAndRenderAudio() {
const searchInput = document.getElementById('audio-search-input');
const searchTerm = searchInput ? searchInput.value.toLowerCase() : '';
let filtered = audioManagerData;
if (searchTerm) {
filtered = audioManagerData.filter(audio =>
audio.name.toLowerCase().includes(searchTerm)
);
}
renderAudioList(filtered);
}
function renderAudioList(audioFiles) {
const listEl = document.getElementById('audio-manager-list');
if (audioFiles.length === 0) {
listEl.innerHTML = '' + t('audio.no_files') + '
';
return;
}
let html = `
`;
audioFiles.forEach(audio => {
html += `
${Icons.audio}
${audio.name}
${audio.size}
${audio.dateFormatted}
`;
});
html += '