' +
+ '
';
}
function renderTemplate() {
+ templateSelectorLock.reset();
clearImagePreviewUrls();
destroyEditors();
var template = getTemplateById(templateSelect.value);
if (!template) {
templateFields.innerHTML = '';
- renderPreview();
+ requestPreviewRender();
return;
}
@@ -712,14 +955,28 @@ import {
if (hidden) {
hidden.value = editor.getData();
}
- renderPreview();
+ templateSelectorLock.markEdited();
+ requestPreviewRender();
});
- renderPreview();
+ requestPreviewRender();
}).catch(function (error) {
console.error('Failed to initialize CKEditor.', error);
});
});
+ templateFields.querySelectorAll('[data-toggle-editor-height]').forEach(function (button) {
+ button.addEventListener('click', function () {
+ var regionId = button.getAttribute('data-toggle-editor-height');
+ var card = templateFields.querySelector('[data-region-id="' + regionId + '"]');
+ if (!card) {
+ return;
+ }
+
+ var expanded = card.classList.toggle('is-expanded');
+ button.textContent = expanded ? 'Collapse' : 'Expand';
+ });
+ });
+
templateFields.querySelectorAll('input[type="file"][name^="region_image_"]').forEach(function (input) {
input.addEventListener('change', function () {
if (input.dataset.previewUrl) {
@@ -729,10 +986,14 @@ import {
if (input.files && input.files.length) {
input.dataset.previewUrl = URL.createObjectURL(input.files[0]);
}
- renderPreview();
+ templateSelectorLock.markEdited();
+ requestPreviewRender();
});
});
- renderPreview();
+ window.requestAnimationFrame(function () {
+ templateSelectorLock.arm();
+ });
+ requestPreviewRender();
}
slideForm.addEventListener('submit', async function (event) {
@@ -740,6 +1001,9 @@ import {
return;
}
event.preventDefault();
+ var submitterValue = event.submitter && event.submitter.name === 'save_action'
+ ? String(event.submitter.value || '').trim().toLowerCase()
+ : '';
var saves = Array.prototype.map.call(templateFields.querySelectorAll('.ckeditor-holder'), function (holder) {
var regionId = holder.getAttribute('data-region-id');
var editor = editorInstances.get(regionId);
@@ -753,13 +1017,17 @@ import {
submitting = true;
try {
await Promise.all(saves);
+ var formData = new FormData(slideForm);
+ if (event.submitter && event.submitter.name) {
+ formData.set(event.submitter.name, event.submitter.value || '');
+ }
var response = await fetch(slideForm.action, {
method: (slideForm.method || 'POST').toUpperCase(),
headers: {
'X-Requested-With': 'XMLHttpRequest',
'Accept': 'text/html, application/json, text/plain, */*'
},
- body: new FormData(slideForm),
+ body: formData,
credentials: 'same-origin'
});
@@ -767,6 +1035,14 @@ import {
throw new Error(await response.text() || 'Unable to save slide.');
}
+ if (submitterValue === 'close' || submitterValue === 'new') {
+ var redirectUrl = submitterValue === 'close'
+ ? String(slideForm.dataset.asyncSaveCloseUrl || response.url || slideForm.action)
+ : String(slideForm.dataset.asyncSaveNewUrl || response.url || slideForm.action);
+ window.location.replace(redirectUrl);
+ return;
+ }
+
var responseText = await response.text();
var savedMessage = '';
try {
@@ -779,19 +1055,53 @@ import {
savedMessage = '';
}
- showToast(savedMessage || 'Saved slide.');
- window.location.href = response.url || slideForm.action;
+ showToast(savedMessage || 'Saved slide.', 'success');
+ slideForm.dataset.dirty = 'false';
} finally {
submitting = false;
}
});
+ slideForm.addEventListener('input', function () {
+ slideForm.dataset.dirty = 'true';
+ }, true);
+
+ slideForm.addEventListener('change', function () {
+ slideForm.dataset.dirty = 'true';
+ }, true);
+
+ if (openPreviewPopupButton) {
+ openPreviewPopupButton.addEventListener('click', function () {
+ openPreviewPopup();
+ });
+ }
+
templateSelect.addEventListener('change', renderTemplate);
- templateFields.addEventListener('change', renderPreview);
- templateFields.addEventListener('input', renderPreview);
+ templateFields.addEventListener('change', function () {
+ templateSelectorLock.markEdited();
+ requestPreviewRender();
+ });
+ templateFields.addEventListener('input', function () {
+ templateSelectorLock.markEdited();
+ requestPreviewRender();
+ });
if (existingTemplateId) {
templateSelect.value = String(existingTemplateId);
}
renderTemplate();
- window.addEventListener('resize', renderPreview);
+ if (window.ResizeObserver && slidePreviewStage) {
+ var previewResizeObserver = new ResizeObserver(function () {
+ requestPreviewRender();
+ });
+ previewResizeObserver.observe(slidePreviewStage);
+ }
+ requestSidebarSync();
+ window.addEventListener('scroll', requestSidebarSync, { passive: true });
+ window.addEventListener('resize', requestPreviewRender);
+ window.addEventListener('resize', requestSidebarSync);
+ window.addEventListener('beforeunload', function () {
+ if (previewPopupWindow && !previewPopupWindow.closed) {
+ previewPopupWindow.close();
+ }
+ });
})();
diff --git a/src/web/public/js/slides/slide-form-template-lock.js b/src/web/public/js/slides/slide-form-template-lock.js
new file mode 100644
index 0000000..c0e2099
--- /dev/null
+++ b/src/web/public/js/slides/slide-form-template-lock.js
@@ -0,0 +1,86 @@
+export function createTemplateSelectorLockController(templateSelect) {
+ var locked = false;
+ var armed = false;
+ var lockInput = null;
+
+ function clearLockInput() {
+ if (lockInput && lockInput.parentNode) {
+ lockInput.parentNode.removeChild(lockInput);
+ }
+ lockInput = null;
+ }
+
+ function reset() {
+ locked = false;
+ armed = false;
+ clearLockInput();
+ if (!templateSelect) {
+ return;
+ }
+
+ templateSelect.disabled = false;
+ templateSelect.removeAttribute('aria-disabled');
+ templateSelect.removeAttribute('title');
+ templateSelect.classList.remove('is-locked');
+ }
+
+ function arm() {
+ armed = true;
+ }
+
+ function syncLockedValue() {
+ if (lockInput) {
+ lockInput.value = templateSelect.value;
+ }
+ }
+
+ function lock() {
+ if (!templateSelect || locked) {
+ return;
+ }
+
+ locked = true;
+ lockInput = lockInput || document.createElement('input');
+ lockInput.type = 'hidden';
+ lockInput.name = templateSelect.name;
+ lockInput.value = templateSelect.value;
+ templateSelect.insertAdjacentElement('afterend', lockInput);
+ templateSelect.disabled = true;
+ templateSelect.setAttribute('aria-disabled', 'true');
+ templateSelect.setAttribute('title', 'Template is locked after you edit its content.');
+ templateSelect.classList.add('is-locked');
+ }
+
+ function markEdited() {
+ if (!armed) {
+ return false;
+ }
+
+ lock();
+ syncLockedValue();
+ return locked;
+ }
+
+ function sync() {
+ if (!templateSelect) {
+ return false;
+ }
+
+ if (locked) {
+ syncLockedValue();
+ return true;
+ }
+
+ return false;
+ }
+
+ return {
+ reset: reset,
+ arm: arm,
+ markEdited: markEdited,
+ sync: sync,
+ isLocked: function () {
+ return locked;
+ }
+ };
+}
diff --git a/src/web/public/js/slides/slide-form.js b/src/web/public/js/slides/slide-form.js
new file mode 100644
index 0000000..efcc0d2
--- /dev/null
+++ b/src/web/public/js/slides/slide-form.js
@@ -0,0 +1,1107 @@
+import {
+ Alignment,
+ BlockQuote,
+ Bold,
+ ClassicEditor,
+ ClipboardPipeline,
+ Essentials,
+ FontBackgroundColor,
+ FontColor,
+ FontFamily,
+ FontSize,
+ Heading,
+ HorizontalLine,
+ Indent,
+ IndentBlock,
+ Italic,
+ InputTextView,
+ Plugin,
+ Paragraph,
+ Strikethrough,
+ Subscript,
+ Superscript,
+ Underline
+} from '/assets/js/vendor/ckeditor5/ckeditor5.js';
+import { createTemplateSelectorLockController } from '/assets/js/slides/slide-form-template-lock.js';
+
+(function () {
+ var dataElement = document.getElementById('slide-editor-data');
+ if (!dataElement) {
+ return;
+ }
+
+ var slideEditorData = {};
+ try {
+ slideEditorData = JSON.parse(dataElement.getAttribute('data-json') || dataElement.textContent || '{}') || {};
+ } catch (_error) {
+ slideEditorData = {};
+ }
+
+ var templates = Array.isArray(slideEditorData.templates) ? slideEditorData.templates : [];
+ var existingTemplateId = slideEditorData.existingTemplateId !== undefined ? slideEditorData.existingTemplateId : null;
+ var existingContent = slideEditorData.existingContent || {};
+ var templateSelect = document.getElementById('template-select');
+ var templateFields = document.getElementById('template-fields');
+ var slideForm = document.getElementById('slide-form');
+ var slideEditorShell = document.querySelector('.slide-editor-shell');
+ var slideEditorSidebar = document.querySelector('.slide-editor-sidebar');
+ var slidePreviewMeta = document.getElementById('slide-preview-meta');
+ var slidePreviewStage = document.getElementById('slide-preview-stage');
+ var slidePreviewCanvas = document.getElementById('slide-preview-canvas');
+ var slidePreviewBackground = document.getElementById('slide-preview-background');
+ var slidePreviewEmpty = document.getElementById('slide-preview-empty');
+ var slidePreviewOverlay = document.getElementById('slide-preview-overlay');
+ var openPreviewPopupButton = document.getElementById('open-preview-popup');
+ var editorInstances = new Map();
+ var submitting = false;
+ var previewRenderFrame = 0;
+ var previewPopupWindow = null;
+ var previewPopupRenderFrame = 0;
+ var currentPreviewCanvasWidth = 0;
+ var currentPreviewCanvasHeight = 0;
+ var sidebarSyncFrame = 0;
+ var sidebarTopOffset = 16;
+ var templateSelectorLock = createTemplateSelectorLockController(templateSelect);
+
+ class FontSizeInputUI extends Plugin {
+ static get pluginName() {
+ return 'FontSizeInputUI';
+ }
+
+ init() {
+ var editor = this.editor;
+ var fontSizeCommand = editor.commands.get('fontSize');
+ var plugin = this;
+
+ if (!fontSizeCommand) {
+ return;
+ }
+
+ editor.ui.componentFactory.add('fontSizeInput', function (locale) {
+ var view = new InputTextView(locale);
+
+ view.extendTemplate({
+ attributes: {
+ class: ['ck-font-size-input']
+ }
+ });
+
+ view.set({
+ placeholder: 'Font size',
+ ariaLabel: 'Font size'
+ });
+
+ function getCurrentFontSizeValue() {
+ var value = fontSizeCommand.value;
+ if (value === null || value === undefined || value === '') {
+ return '';
+ }
+
+ var parsed = Math.round(Number(String(value).replace(/[^0-9.]/g, '')));
+ return Number.isFinite(parsed) && parsed > 0 ? String(parsed) : '';
+ }
+
+ function syncValue() {
+ if (view.element && document.activeElement === view.element) {
+ return;
+ }
+
+ view.value = getCurrentFontSizeValue();
+ }
+
+ view.on('render', function () {
+ if (!view.element) {
+ return;
+ }
+
+ view.element.type = 'text';
+ view.element.inputMode = 'numeric';
+ view.element.autocomplete = 'off';
+ view.element.spellcheck = false;
+ syncValue();
+ });
+
+ function applyValue() {
+ if (!view.element) {
+ return;
+ }
+
+ var size = Math.max(1, Math.round(Number(view.element.value || 0)));
+ if (!size) {
+ return;
+ }
+
+ editor.execute('fontSize', { value: size + 'px' });
+ }
+
+ view.on('input', applyValue);
+ view.on('blur', applyValue);
+
+ view.on('keydown', function (_eventInfo, domEvent) {
+ if (domEvent.key === 'Enter') {
+ domEvent.preventDefault();
+ if (view.element) {
+ view.element.blur();
+ }
+ }
+ });
+
+ plugin.listenTo(editor.model.document.selection, 'change:range', syncValue);
+ plugin.listenTo(fontSizeCommand, 'change:value', syncValue);
+
+ syncValue();
+
+ return view;
+ });
+ }
+ }
+
+ class ForcePlainTextPaste extends Plugin {
+ static get pluginName() {
+ return 'ForcePlainTextPaste';
+ }
+
+ static get requires() {
+ return [ClipboardPipeline];
+ }
+
+ init() {
+ var editor = this.editor;
+ var clipboardPipeline = editor.plugins.get(ClipboardPipeline);
+
+ this.listenTo(clipboardPipeline, 'inputTransformation', function (_event, data) {
+ var plainText = data.dataTransfer.getData('text/plain');
+ data.content = editor.data.processor.toView(plainTextToHtml(plainText));
+ }, { priority: 'high' });
+ }
+ }
+
+ function escapeHtml(value) {
+ return String(value ?? '')
+ .replace(/&/g, '&')
+ .replace(//g, '>')
+ .replace(/"/g, '"')
+ .replace(/'/g, ''');
+ }
+
+ function plainTextToHtml(value) {
+ var lines = String(value ?? '').replace(/\r\n?/g, '\n').split('\n');
+ var paragraphs = [];
+ var currentParagraph = [];
+
+ lines.forEach(function (line) {
+ if (line === '') {
+ if (currentParagraph.length) {
+ paragraphs.push('
' + currentParagraph.join('
') + '
');
+ currentParagraph = [];
+ } else {
+ paragraphs.push('
');
+ }
+ return;
+ }
+
+ currentParagraph.push(escapeHtml(line));
+ });
+
+ if (currentParagraph.length) {
+ paragraphs.push('
' + currentParagraph.join('
') + '
');
+ }
+
+ return paragraphs.length ? paragraphs.join('') : '
';
+ }
+
+ function getTemplateById(id) {
+ return templates.find(function (item) { return Number(item.id) === Number(id); }) || null;
+ }
+
+ function getCurrentRegionValue(region) {
+ var current = existingContent[region.region_key];
+ return current && current.value !== undefined ? current.value : '';
+ }
+
+ function normalizeEditorData(value) {
+ return String(value || '');
+ }
+
+ function requestPreviewRender() {
+ if (previewRenderFrame) {
+ return;
+ }
+
+ previewRenderFrame = window.requestAnimationFrame(function () {
+ previewRenderFrame = 0;
+ renderPreview();
+ });
+ }
+
+ function getTemplateFieldControls() {
+ return templateFields ? templateFields.querySelectorAll('input, textarea, select') : [];
+ }
+
+ function sanitizePreviewHtml(html) {
+ var output = String(html || '');
+ output = output.replace(/
/gi, '');
+ output = output.replace(//gi, '');
+ return output.replace(/<[^>]+>/g, function (tag) {
+ var match = tag.match(/^<\s*(\/?)\s*([a-z0-9]+)([\s\S]*?)(\/?)>$/i);
+ if (!match) {
+ return '';
+ }
+ var closing = Boolean(match[1]);
+ var name = String(match[2] || '').toLowerCase();
+ var attrText = String(match[3] || '');
+ var selfClosing = Boolean(match[4]) || name === 'br' || name === 'hr';
+ var allowed = ['a', 'b', 'blockquote', 'br', 'code', 'div', 'em', 'figure', 'figcaption', 'h1', 'h2', 'h3', 'h4', 'h5', 'h6', 'hr', 'i', 'li', 'ol', 'p', 'pre', 'span', 'strong', 'sub', 'sup', 'table', 'tbody', 'td', 'th', 'thead', 'tr', 'u', 'ul'];
+ if (allowed.indexOf(name) === -1) {
+ return '';
+ }
+ if (closing) {
+ return '';
+ }
+ if (selfClosing) {
+ return '<' + name + sanitizeTagAttributes(name, attrText) + '>';
+ }
+ return '<' + name + sanitizeTagAttributes(name, attrText) + '>';
+ });
+ }
+
+ function sanitizeTagAttributes(tagName, attrText) {
+ var allowedAttributes = {
+ a: ['href', 'title', 'target', 'rel', 'class', 'style'],
+ blockquote: ['class', 'style'],
+ div: ['class', 'style'],
+ figure: ['class', 'style'],
+ figcaption: ['class', 'style'],
+ h1: ['class', 'style'],
+ h2: ['class', 'style'],
+ h3: ['class', 'style'],
+ h4: ['class', 'style'],
+ h5: ['class', 'style'],
+ h6: ['class', 'style'],
+ li: ['class', 'style'],
+ ol: ['class', 'style', 'start'],
+ p: ['class', 'style'],
+ pre: ['class', 'style'],
+ span: ['class', 'style'],
+ table: ['class', 'style'],
+ td: ['class', 'style', 'colspan', 'rowspan'],
+ th: ['class', 'style', 'colspan', 'rowspan', 'scope'],
+ tr: ['class', 'style'],
+ ul: ['class', 'style']
+ };
+ var allowed = allowedAttributes[tagName] || [];
+ if (!allowed.length) {
+ return '';
+ }
+
+ var attrs = [];
+ attrText.replace(/([a-zA-Z0-9:-]+)(?:\s*=\s*("([^"]*)"|'([^']*)'|([^\s"'>/=`]+)))?/g, function (_full, key, _valuePart, doubleQuoted, singleQuoted, bareValue) {
+ var lowerKey = String(key || '').toLowerCase();
+ if (allowed.indexOf(lowerKey) === -1) {
+ return '';
+ }
+ var value = doubleQuoted !== undefined ? doubleQuoted : singleQuoted !== undefined ? singleQuoted : bareValue !== undefined ? bareValue : '';
+ if (lowerKey === 'href' && /^(?:\s*javascript:|\s*data:)/i.test(String(value || ''))) {
+ return '';
+ }
+ if (lowerKey === 'style' && /(?:expression\s*\(|javascript:|url\s*\()/i.test(String(value || ''))) {
+ return '';
+ }
+ if (lowerKey === 'target') {
+ var targetValue = String(value || '').trim();
+ if (targetValue === '_blank') {
+ attrs.push(' target="_blank"');
+ if (attrs.indexOf(' rel="noreferrer noopener"') === -1) {
+ attrs.push(' rel="noreferrer noopener"');
+ }
+ return '';
+ }
+ }
+ attrs.push(' ' + lowerKey + '="' + escapeHtml(value) + '"');
+ return '';
+ });
+
+ return attrs.join('');
+ }
+
+ function renderPreviewListItem(item, tag) {
+ if (item && typeof item === 'object') {
+ var content = item.content !== undefined ? item.content : (item.text !== undefined ? item.text : item.value !== undefined ? item.value : '');
+ var children = Array.isArray(item.items) ? item.items : Array.isArray(item.subItems) ? item.subItems : Array.isArray(item.children) ? item.children : [];
+ var nested = children.length ? '<' + tag + ' style="list-style-type:' + (tag === 'ol' ? 'decimal' : 'disc') + ';padding-left:1.4em;">' + children.map(function (child) { return renderPreviewListItem(child, tag); }).join('') + '' : '';
+ return '' + sanitizePreviewHtml(content || '') + nested + '';
+ }
+ return '' + sanitizePreviewHtml(item || '') + '';
+ }
+
+ function renderPreviewTable(data) {
+ var rows = Array.isArray(data.content) ? data.content : Array.isArray(data.rows) ? data.rows : [];
+ if (!rows.length) {
+ return '';
+ }
+ var hasHeadings = Boolean(data.withHeadings);
+ var body = rows.map(function (row, rowIndex) {
+ var cells = Array.isArray(row) ? row : [];
+ var cellTag = hasHeadings && rowIndex === 0 ? 'th' : 'td';
+ var cellAttrs = cellTag === 'th' ? ' scope="col"' : '';
+ return '' + cells.map(function (cell) {
+ return '<' + cellTag + cellAttrs + '>' + sanitizePreviewHtml(cell || '') + '';
+ }).join('') + '
';
+ }).join('');
+ return '';
+ }
+
+ function renderPreviewBlock(block) {
+ if (!block || !block.type || !block.data) {
+ return '';
+ }
+ if (block.type === 'header') {
+ var level = Math.max(1, Math.min(6, Number(block.data.level || 2)));
+ return '' + sanitizePreviewHtml(block.data.text || '') + '';
+ }
+ if (block.type === 'list') {
+ var tag = block.data.style === 'ordered' ? 'ol' : 'ul';
+ var items = Array.isArray(block.data.items) ? block.data.items : [];
+ return '<' + tag + ' style="list-style-type:' + (tag === 'ol' ? 'decimal' : 'disc') + ';padding-left:1.4em;">' + items.map(function (item) { return renderPreviewListItem(item, tag); }).join('') + '';
+ }
+ if (block.type === 'delimiter') {
+ return '
';
+ }
+ if (block.type === 'code') {
+ return '' + sanitizePreviewHtml(block.data.code || '') + '
';
+ }
+ if (block.type === 'table') {
+ return renderPreviewTable(block.data);
+ }
+ if (block.type === 'paragraph') {
+ return '' + sanitizePreviewHtml(block.data.text || '') + '
';
+ }
+ return '';
+ }
+
+ function renderPreviewText(value) {
+ var raw = String(value || '');
+ if (!raw) {
+ return 'Empty text
';
+ }
+ return sanitizePreviewHtml(raw);
+ }
+
+ function renderPreviewTextRegion(region, value, style, scale) {
+ var fontFamily = style.font_family ? 'font-family:' + escapeHtml(style.font_family) + ';' : '';
+ var color = style.font_color ? 'color:' + escapeHtml(style.font_color) + ';' : '';
+ var fontSize = style.font_size ? 'font-size:' + Math.max(1, Math.round(Number(style.font_size))) + 'px;' : '';
+ var width = Math.max(1, Math.round(Number(region && region.width ? region.width : 0) || 1));
+ var height = Math.max(1, Math.round(Number(region && region.height ? region.height : 0) || 1));
+ var wrapperStyle = 'width:' + width + 'px;height:' + height + 'px;overflow:hidden;' + fontFamily + fontSize + color;
+ return '' + renderPreviewText(value) + '
';
+ }
+
+ function renderPreviewWebpageRegion(value) {
+ var src = String(value || '').trim();
+ if (!src) {
+ return 'Webpage
';
+ }
+ return '';
+ }
+
+ function renderPreviewHtmlRegion(value) {
+ var html = String(value || '').trim();
+ if (!html) {
+ return 'HTML
';
+ }
+ return '';
+ }
+
+ function destroyEditors() {
+ editorInstances.forEach(function (editor) {
+ if (editor && typeof editor.destroy === 'function') {
+ editor.destroy();
+ }
+ });
+ editorInstances.clear();
+ }
+
+ function getEditorHiddenInput(regionId) {
+ var card = templateFields.querySelector('[data-region-id="' + regionId + '"]');
+ return card ? card.querySelector('input[type="hidden"][name="region_text_' + regionId + '"]') : null;
+ }
+
+ function getEditorFontSizeHiddenInput(regionId) {
+ var card = templateFields.querySelector('[data-region-id="' + regionId + '"]');
+ return card ? card.querySelector('input[name="region_font_size_' + regionId + '"]') : null;
+ }
+
+ function normalizeFontSizeValue(value) {
+ var size = Math.max(1, Math.round(Number(String(value || '').replace(/[^0-9.]/g, ''))));
+ return size ? String(size) : '';
+ }
+
+ function getCurrentTextStyle(region) {
+ var current = existingContent[region.region_key] || {};
+ return {
+ font_family: String(current.font_family || region.font_family || 'Arial').trim() || 'Arial',
+ font_size: Math.max(8, Number(current.font_size || 24)),
+ font_color: String(current.font_color || region.font_color || '#000000').trim() || '#000000'
+ };
+ }
+
+ function getTextStyleFromCard(_card, region) {
+ return getCurrentTextStyle(region);
+ }
+
+ function getSelectedTemplate() {
+ return templates.find(function (item) { return Number(item.id) === Number(templateSelect.value); }) || null;
+ }
+
+ function clearImagePreviewUrls() {
+ templateFields.querySelectorAll('input[type="file"][name^="region_image_"]').forEach(function (input) {
+ if (input.dataset.previewUrl) {
+ URL.revokeObjectURL(input.dataset.previewUrl);
+ delete input.dataset.previewUrl;
+ }
+ });
+ }
+
+ function getRegionBox(region, canvasWidth, canvasHeight) {
+ return {
+ left: Math.max(0, Math.round(Number(region.x || 0))),
+ top: Math.max(0, Math.round(Number(region.y || 0))),
+ width: Math.max(1, Math.round(Number(region.width || 0) || 1)),
+ height: Math.max(1, Math.round(Number(region.height || 0) || 1))
+ };
+ }
+
+ function getPreviewCanvasDimensions(template) {
+ return {
+ width: Math.max(1, Number(template && template.canvas_size_width ? template.canvas_size_width : 1920)),
+ height: Math.max(1, Number(template && template.canvas_size_height ? template.canvas_size_height : 1080))
+ };
+ }
+
+ function buildPreviewPopupHtml() {
+ return '' +
+ '' +
+ '' +
+ '' +
+ '' +
+ 'Slide preview' +
+ '' +
+ '' +
+ '' +
+ '' +
+ '' +
+ '';
+ }
+
+ function syncPopupPreview() {
+ if (!previewPopupWindow || previewPopupWindow.closed) {
+ previewPopupWindow = null;
+ return;
+ }
+
+ var popupDocument = previewPopupWindow.document;
+ if (!popupDocument) {
+ return;
+ }
+
+ var popupStage = popupDocument.getElementById('popup-preview-stage');
+ var popupCanvas = popupDocument.getElementById('popup-preview-canvas');
+ var template = getSelectedTemplate();
+
+ if (!popupStage || !popupCanvas) {
+ if (previewPopupRenderFrame) {
+ cancelAnimationFrame(previewPopupRenderFrame);
+ }
+ previewPopupRenderFrame = requestAnimationFrame(syncPopupPreview);
+ return;
+ }
+
+ if (!template) {
+ popupStage.style.backgroundColor = '#111111';
+ popupCanvas.style.width = '';
+ popupCanvas.style.height = '';
+ popupCanvas.style.transform = '';
+ popupCanvas.innerHTML = slidePreviewCanvas.innerHTML;
+ var popupEmpty = popupCanvas.querySelector('#slide-preview-empty');
+ var popupOverlay = popupCanvas.querySelector('#slide-preview-overlay');
+ var popupBackground = popupCanvas.querySelector('#slide-preview-background');
+ if (popupBackground) {
+ popupBackground.style.display = 'none';
+ }
+ if (popupEmpty) {
+ popupEmpty.style.display = 'flex';
+ popupEmpty.textContent = 'Select a template to preview the slide.';
+ }
+ if (popupOverlay) {
+ popupOverlay.innerHTML = '';
+ }
+ return;
+ }
+
+ var canvasWidth = currentPreviewCanvasWidth || Math.max(1, Number(template.canvas_size_width || 1920));
+ var canvasHeight = currentPreviewCanvasHeight || Math.max(1, Number(template.canvas_size_height || 1080));
+ popupStage.style.backgroundColor = template.background_color || '#111111';
+ popupCanvas.style.width = canvasWidth + 'px';
+ popupCanvas.style.height = canvasHeight + 'px';
+ popupCanvas.innerHTML = slidePreviewCanvas.innerHTML;
+ var popupBackground = popupCanvas.querySelector('#slide-preview-background');
+ var popupEmpty = popupCanvas.querySelector('#slide-preview-empty');
+ var popupOverlay = popupCanvas.querySelector('#slide-preview-overlay');
+
+ if (popupBackground) {
+ popupBackground.style.display = template.background_image_path ? 'block' : 'none';
+ popupBackground.src = template.background_image_path || '';
+ }
+ if (popupEmpty) {
+ popupEmpty.style.display = 'none';
+ }
+
+ var stageRect = popupStage.getBoundingClientRect();
+ if (!stageRect.width || !stageRect.height) {
+ if (previewPopupRenderFrame) {
+ cancelAnimationFrame(previewPopupRenderFrame);
+ }
+ previewPopupRenderFrame = requestAnimationFrame(syncPopupPreview);
+ return;
+ }
+
+ var scale = Math.min(stageRect.width / canvasWidth, stageRect.height / canvasHeight) || 1;
+ popupCanvas.style.transform = 'translate3d(0, 0, 0) scale(' + scale + ')';
+ }
+
+ function openPreviewPopup() {
+ if (previewPopupWindow && !previewPopupWindow.closed) {
+ previewPopupWindow.focus();
+ syncPopupPreview();
+ return;
+ }
+
+ var popupWidth = 1280;
+ var popupHeight = 900;
+ var left = Math.max(0, Math.round((window.screen.width - popupWidth) / 2));
+ var top = Math.max(0, Math.round((window.screen.height - popupHeight) / 2));
+ var popupFeatures = [
+ 'popup=yes',
+ 'toolbar=no',
+ 'location=no',
+ 'menubar=no',
+ 'directories=no',
+ 'status=no',
+ 'scrollbars=yes',
+ 'resizable=yes',
+ 'width=' + popupWidth,
+ 'height=' + popupHeight,
+ 'left=' + left,
+ 'top=' + top
+ ].join(',');
+
+ previewPopupWindow = window.open('', 'slide-preview-popup', popupFeatures);
+ if (!previewPopupWindow) {
+ return;
+ }
+
+ previewPopupWindow.document.open();
+ previewPopupWindow.document.write(buildPreviewPopupHtml());
+ previewPopupWindow.document.close();
+ previewPopupWindow.addEventListener('resize', syncPopupPreview);
+ previewPopupWindow.focus();
+ syncPopupPreview();
+ }
+
+ function syncSlideEditorSidebar() {
+ sidebarSyncFrame = 0;
+
+ if (!slideEditorShell || !slideEditorSidebar) {
+ return;
+ }
+
+ if (window.matchMedia && window.matchMedia('(max-width: 1199.98px)').matches) {
+ slideEditorSidebar.style.transform = '';
+ return;
+ }
+
+ var shellRect = slideEditorShell.getBoundingClientRect();
+ var sidebarHeight = slideEditorSidebar.offsetHeight;
+ var shellTop = window.scrollY + shellRect.top;
+ var shellBottom = shellTop + slideEditorShell.offsetHeight;
+ var maxTranslate = Math.max(0, shellBottom - shellTop - sidebarHeight - sidebarTopOffset);
+ var desiredTranslate = Math.max(0, Math.min(window.scrollY + sidebarTopOffset - shellTop, maxTranslate));
+
+ slideEditorSidebar.style.transform = desiredTranslate ? 'translate3d(0, ' + desiredTranslate + 'px, 0)' : '';
+ }
+
+ function requestSidebarSync() {
+ if (sidebarSyncFrame) {
+ return;
+ }
+
+ sidebarSyncFrame = window.requestAnimationFrame(syncSlideEditorSidebar);
+ }
+
+ function renderPreview() {
+ var template = getSelectedTemplate();
+ if (!template) {
+ slidePreviewMeta.textContent = '--';
+ slidePreviewBackground.style.display = 'none';
+ slidePreviewEmpty.style.display = 'flex';
+ slidePreviewEmpty.textContent = 'Select a template to preview the slide.';
+ slidePreviewCanvas.style.width = '';
+ slidePreviewCanvas.style.height = '';
+ slidePreviewOverlay.innerHTML = '';
+ slidePreviewOverlay.style.width = '';
+ slidePreviewOverlay.style.height = '';
+ slidePreviewOverlay.style.transform = '';
+ slidePreviewStage.style.aspectRatio = '16 / 9';
+ slidePreviewStage.style.backgroundColor = '#111111';
+ return;
+ }
+
+ var canvasSize = getPreviewCanvasDimensions(template);
+ var canvasWidth = canvasSize.width;
+ var canvasHeight = canvasSize.height;
+ currentPreviewCanvasWidth = canvasWidth;
+ currentPreviewCanvasHeight = canvasHeight;
+ slidePreviewStage.style.aspectRatio = canvasWidth + ' / ' + canvasHeight;
+ slidePreviewStage.style.backgroundColor = template.background_color || '#111111';
+ slidePreviewMeta.textContent = canvasWidth + 'x' + canvasHeight;
+ if (!(template.regions || []).length) {
+ slidePreviewEmpty.style.display = 'flex';
+ slidePreviewEmpty.textContent = 'This template has no regions.';
+ slidePreviewBackground.style.display = template.background_image_path ? 'block' : 'none';
+ slidePreviewBackground.src = template.background_image_path || '';
+ slidePreviewCanvas.style.width = canvasWidth + 'px';
+ slidePreviewCanvas.style.height = canvasHeight + 'px';
+ slidePreviewCanvas.style.transform = '';
+ slidePreviewOverlay.innerHTML = '';
+ slidePreviewOverlay.style.width = '';
+ slidePreviewOverlay.style.height = '';
+ slidePreviewOverlay.style.transform = '';
+ return;
+ }
+
+ slidePreviewEmpty.style.display = 'none';
+ slidePreviewBackground.style.display = template.background_image_path ? 'block' : 'none';
+ slidePreviewBackground.src = template.background_image_path || '';
+
+ var stageRect = slidePreviewStage.getBoundingClientRect();
+ if (!stageRect.width || !stageRect.height) {
+ if (previewRenderFrame) {
+ cancelAnimationFrame(previewRenderFrame);
+ }
+ previewRenderFrame = requestAnimationFrame(function () {
+ previewRenderFrame = 0;
+ renderPreview();
+ });
+ return;
+ }
+ var scale = Math.min(stageRect.width / canvasWidth, stageRect.height / canvasHeight) || 1;
+ slidePreviewCanvas.style.width = canvasWidth + 'px';
+ slidePreviewCanvas.style.height = canvasHeight + 'px';
+ slidePreviewCanvas.style.transform = 'translate3d(0, 0, 0) scale(' + scale + ')';
+ slidePreviewCanvas.style.transformOrigin = 'top left';
+ var regions = template.regions || [];
+ slidePreviewOverlay.innerHTML = regions.map(function (region) {
+ var box = getRegionBox(region, canvasWidth, canvasHeight);
+ var card = templateFields.querySelector('[data-region-id="' + region.id + '"]');
+ var hiddenInput = card && card.querySelector('input[type="hidden"][name="region_text_' + region.id + '"]');
+ var htmlInput = card && card.querySelector('textarea[name="region_html_' + region.id + '"]');
+ var imageHidden = card && card.querySelector('input[type="hidden"][name="existing_region_image_' + region.id + '"]');
+ var imageFileInput = card && card.querySelector('input[type="file"][name="region_image_' + region.id + '"]');
+ var webpageInput = card && card.querySelector('input[type="url"][name="region_webpage_' + region.id + '"]');
+ var value = region.region_type === 'image'
+ ? ((imageFileInput && imageFileInput.dataset.previewUrl) ? imageFileInput.dataset.previewUrl : (imageHidden ? imageHidden.value : ''))
+ : region.region_type === 'webpage'
+ ? (webpageInput ? webpageInput.value : '')
+ : region.region_type === 'html'
+ ? (htmlInput ? htmlInput.value : '')
+ : (hiddenInput ? hiddenInput.value : '');
+ var style = region.region_type === 'image'
+ ? null
+ : region.region_type === 'webpage'
+ ? null
+ : region.region_type === 'html'
+ ? null
+ : getTextStyleFromCard(card, region);
+ var content = region.region_type === 'image'
+ ? (value ? ' + ')
' : 'Image
')
+ : region.region_type === 'webpage'
+ ? renderPreviewWebpageRegion(value)
+ : region.region_type === 'html'
+ ? renderPreviewHtmlRegion(value)
+ : renderPreviewTextRegion(region, value, style, scale);
+ var selected = region.region_type === 'image'
+ ? ' slide-preview-image-region'
+ : region.region_type === 'webpage'
+ ? ' slide-preview-webpage-region'
+ : region.region_type === 'html'
+ ? ' slide-preview-html-region'
+ : ' slide-preview-text-region';
+ return '' + content + '
';
+ }).join('');
+
+ syncPopupPreview();
+ }
+
+ function renderTextRegion(region) {
+ var current = getCurrentRegionValue(region);
+ return '' +
+ '';
+ }
+
+ function renderWebpageRegion(region) {
+ var current = getCurrentRegionValue(region);
+ return '' +
+ '';
+ }
+
+ function renderHtmlRegion(region) {
+ var current = getCurrentRegionValue(region);
+ return '' +
+ '';
+ }
+
+ function renderImageRegion(region) {
+ var current = getCurrentRegionValue(region);
+ return '' +
+ '';
+ }
+
+ function renderTemplate() {
+ templateSelectorLock.reset();
+ clearImagePreviewUrls();
+ destroyEditors();
+ var template = getTemplateById(templateSelect.value);
+ if (!template) {
+ templateFields.innerHTML = '';
+ requestPreviewRender();
+ return;
+ }
+
+ templateFields.innerHTML = template.regions.length ? template.regions.map(function (region) {
+ if (region.region_type === 'image') {
+ return renderImageRegion(region);
+ }
+ if (region.region_type === 'webpage') {
+ return renderWebpageRegion(region);
+ }
+ if (region.region_type === 'html') {
+ return renderHtmlRegion(region);
+ }
+ return renderTextRegion(region);
+ }).join('') : 'This template has no regions.
';
+
+ templateFields.querySelectorAll('.ckeditor-holder').forEach(function (holder) {
+ var regionId = holder.getAttribute('data-region-id');
+ var source = holder.querySelector('.ckeditor-source');
+ var hidden = getEditorHiddenInput(regionId);
+ var editorConfig = {
+ licenseKey: 'GPL',
+ placeholder: 'Write content...',
+ toolbar: {
+ items: [
+ 'undo',
+ 'redo',
+ '|',
+ 'heading',
+ '|',
+ 'fontSizeInput',
+ 'fontFamily',
+ 'fontColor',
+ 'fontBackgroundColor',
+ '|',
+ 'bold',
+ 'italic',
+ 'underline',
+ 'strikethrough',
+ 'subscript',
+ 'superscript',
+ '|',
+ 'horizontalLine',
+ 'blockQuote',
+ '|',
+ 'alignment',
+ '|',
+ 'outdent',
+ 'indent'
+ ],
+ shouldNotGroupWhenFull: false
+ },
+ plugins: [
+ Alignment,
+ BlockQuote,
+ Bold,
+ Essentials,
+ ForcePlainTextPaste,
+ FontBackgroundColor,
+ FontColor,
+ FontFamily,
+ FontSize,
+ FontSizeInputUI,
+ Heading,
+ HorizontalLine,
+ Indent,
+ IndentBlock,
+ Italic,
+ Paragraph,
+ Strikethrough,
+ Subscript,
+ Superscript,
+ Underline
+ ],
+ fontFamily: {
+ supportAllValues: true
+ },
+ fontSize: {
+ options: [20, 24, 28, 32, 36, 40, 44],
+ supportAllValues: true
+ },
+ heading: {
+ options: [
+ { model: 'paragraph', title: 'Paragraph', class: 'ck-heading_paragraph' },
+ { model: 'heading1', view: 'h1', title: 'Heading 1', class: 'ck-heading_heading1' },
+ { model: 'heading2', view: 'h2', title: 'Heading 2', class: 'ck-heading_heading2' },
+ { model: 'heading3', view: 'h3', title: 'Heading 3', class: 'ck-heading_heading3' },
+ { model: 'heading4', view: 'h4', title: 'Heading 4', class: 'ck-heading_heading4' }
+ ]
+ },
+ initialData: normalizeEditorData((source && source.value) || (hidden ? hidden.value : ''))
+ };
+
+ ClassicEditor.create(source || holder, editorConfig).then(function (editor) {
+ editorInstances.set(regionId, editor);
+ var fontSizeHidden = getEditorFontSizeHiddenInput(regionId);
+ var fontSizeCommand = editor.commands.get('fontSize');
+ if (hidden) {
+ hidden.value = editor.getData();
+ }
+ if (fontSizeHidden && fontSizeCommand) {
+ fontSizeHidden.value = normalizeFontSizeValue(fontSizeCommand.value) || fontSizeHidden.value;
+ fontSizeCommand.on('change:value', function () {
+ fontSizeHidden.value = normalizeFontSizeValue(fontSizeCommand.value) || fontSizeHidden.value;
+ });
+ }
+ editor.model.document.on('change:data', function () {
+ var instance = editorInstances.get(regionId);
+ if (instance !== editor) {
+ return;
+ }
+ if (hidden) {
+ hidden.value = editor.getData();
+ }
+ templateSelectorLock.markEdited();
+ requestPreviewRender();
+ });
+ requestPreviewRender();
+ }).catch(function (error) {
+ console.error('Failed to initialize CKEditor.', error);
+ });
+ });
+
+ templateFields.querySelectorAll('[data-toggle-editor-height]').forEach(function (button) {
+ button.addEventListener('click', function () {
+ var regionId = button.getAttribute('data-toggle-editor-height');
+ var card = templateFields.querySelector('[data-region-id="' + regionId + '"]');
+ if (!card) {
+ return;
+ }
+
+ var expanded = card.classList.toggle('is-expanded');
+ button.textContent = expanded ? 'Collapse' : 'Expand';
+ });
+ });
+
+ templateFields.querySelectorAll('input[type="file"][name^="region_image_"]').forEach(function (input) {
+ input.addEventListener('change', function () {
+ if (input.dataset.previewUrl) {
+ URL.revokeObjectURL(input.dataset.previewUrl);
+ delete input.dataset.previewUrl;
+ }
+ if (input.files && input.files.length) {
+ input.dataset.previewUrl = URL.createObjectURL(input.files[0]);
+ }
+ templateSelectorLock.markEdited();
+ requestPreviewRender();
+ });
+ });
+ window.requestAnimationFrame(function () {
+ templateSelectorLock.arm();
+ });
+ requestPreviewRender();
+ }
+
+ slideForm.addEventListener('submit', async function (event) {
+ if (submitting) {
+ return;
+ }
+ event.preventDefault();
+ var submitterValue = event.submitter && event.submitter.name === 'save_action'
+ ? String(event.submitter.value || '').trim().toLowerCase()
+ : '';
+ var saves = Array.prototype.map.call(templateFields.querySelectorAll('.ckeditor-holder'), function (holder) {
+ var regionId = holder.getAttribute('data-region-id');
+ var editor = editorInstances.get(regionId);
+ var hidden = getEditorHiddenInput(regionId);
+ if (!editor || !hidden) {
+ return Promise.resolve();
+ }
+ hidden.value = editor.getData();
+ return Promise.resolve();
+ });
+ submitting = true;
+ try {
+ await Promise.all(saves);
+ var formData = new FormData(slideForm);
+ if (event.submitter && event.submitter.name) {
+ formData.set(event.submitter.name, event.submitter.value || '');
+ }
+ var response = await fetch(slideForm.action, {
+ method: (slideForm.method || 'POST').toUpperCase(),
+ headers: {
+ 'X-Requested-With': 'XMLHttpRequest',
+ 'Accept': 'text/html, application/json, text/plain, */*'
+ },
+ body: formData,
+ credentials: 'same-origin'
+ });
+
+ if (!response.ok) {
+ throw new Error(await response.text() || 'Unable to save slide.');
+ }
+
+ if (submitterValue === 'close' || submitterValue === 'new') {
+ var redirectUrl = submitterValue === 'close'
+ ? String(slideForm.dataset.asyncSaveCloseUrl || response.url || slideForm.action)
+ : String(slideForm.dataset.asyncSaveNewUrl || response.url || slideForm.action);
+ window.location.replace(redirectUrl);
+ return;
+ }
+
+ var responseText = await response.text();
+ var savedMessage = '';
+ try {
+ var doc = new DOMParser().parseFromString(responseText || '', 'text/html');
+ var toastBody = doc.querySelector('.toast-body');
+ if (toastBody && toastBody.textContent) {
+ savedMessage = toastBody.textContent.trim();
+ }
+ } catch (_error) {
+ savedMessage = '';
+ }
+
+ showToast(savedMessage || 'Saved slide.', 'success');
+ slideForm.dataset.dirty = 'false';
+ } finally {
+ submitting = false;
+ }
+ });
+
+ slideForm.addEventListener('input', function () {
+ slideForm.dataset.dirty = 'true';
+ }, true);
+
+ slideForm.addEventListener('change', function () {
+ slideForm.dataset.dirty = 'true';
+ }, true);
+
+ if (openPreviewPopupButton) {
+ openPreviewPopupButton.addEventListener('click', function () {
+ openPreviewPopup();
+ });
+ }
+
+ templateSelect.addEventListener('change', renderTemplate);
+ templateFields.addEventListener('change', function () {
+ templateSelectorLock.markEdited();
+ requestPreviewRender();
+ });
+ templateFields.addEventListener('input', function () {
+ templateSelectorLock.markEdited();
+ requestPreviewRender();
+ });
+ if (existingTemplateId) {
+ templateSelect.value = String(existingTemplateId);
+ }
+ renderTemplate();
+ if (window.ResizeObserver && slidePreviewStage) {
+ var previewResizeObserver = new ResizeObserver(function () {
+ requestPreviewRender();
+ });
+ previewResizeObserver.observe(slidePreviewStage);
+ }
+ requestSidebarSync();
+ window.addEventListener('scroll', requestSidebarSync, { passive: true });
+ window.addEventListener('resize', requestPreviewRender);
+ window.addEventListener('resize', requestSidebarSync);
+ window.addEventListener('beforeunload', function () {
+ if (previewPopupWindow && !previewPopupWindow.closed) {
+ previewPopupWindow.close();
+ }
+ });
+})();
diff --git a/src/web/public/js/system-status.js b/src/web/public/js/system-status.js
index 22c95d0..c908768 100644
--- a/src/web/public/js/system-status.js
+++ b/src/web/public/js/system-status.js
@@ -64,8 +64,10 @@
socket.onmessage = function (event) {
try {
var payload = JSON.parse(String(event.data || '{}'));
- if (payload && payload.type === 'dashboard-state' && typeof window.webHandleDashboardState === 'function') {
- window.webHandleDashboardState(payload.state);
+ if (payload && payload.type === 'dashboard-state') {
+ if (typeof window.webHandleDashboardState === 'function') {
+ window.webHandleDashboardState(payload.state);
+ }
updateSidebarStatus(Boolean(payload.state && payload.state.playerServiceConnected), 'Live player feed');
}
} catch (_error) {
diff --git a/src/web/public/js/table-sort.js b/src/web/public/js/table-sort.js
index 3cc135f..92da331 100644
--- a/src/web/public/js/table-sort.js
+++ b/src/web/public/js/table-sort.js
@@ -69,6 +69,45 @@
return table._sortableState;
}
+ function ensureSortableHeaderIndicator(headerCell) {
+ var indicator = headerCell.querySelector && headerCell.querySelector('.table-sort-indicator');
+ if (indicator) {
+ return indicator;
+ }
+
+ indicator = document.createElement('i');
+ indicator.className = 'table-sort-indicator bi bi-arrow-down-up ms-1';
+ indicator.setAttribute('aria-hidden', 'true');
+ headerCell.appendChild(indicator);
+ return indicator;
+ }
+
+ function updateSortableHeaderIndicator(headerCell, isSortable, isActive, direction) {
+ if (!isSortable) {
+ var hiddenIndicator = headerCell.querySelector && headerCell.querySelector('.table-sort-indicator');
+ if (hiddenIndicator) {
+ hiddenIndicator.style.display = 'none';
+ }
+ return;
+ }
+
+ var indicator = ensureSortableHeaderIndicator(headerCell);
+ indicator.style.display = '';
+ indicator.className = 'table-sort-indicator bi ms-1';
+
+ if (isActive && direction === 'desc') {
+ indicator.classList.add('bi-caret-down-fill');
+ return;
+ }
+
+ if (isActive && direction === 'asc') {
+ indicator.classList.add('bi-caret-up-fill');
+ return;
+ }
+
+ indicator.classList.add('bi-arrow-down-up');
+ }
+
function isSortableTableColumn(table, columnIndex) {
var headerCell = table.tHead && table.tHead.rows && table.tHead.rows.length ? table.tHead.rows[0].cells[columnIndex] : null;
if (!headerCell) {
@@ -100,13 +139,15 @@
if (!headerCell) {
return;
}
+ var sortable = isSortableTableColumn(table, index);
headerCell.classList.remove('sort-asc', 'sort-desc', 'sortable', 'unsortable');
headerCell.removeAttribute('aria-sort');
headerCell.removeAttribute('role');
headerCell.removeAttribute('tabindex');
- if (isSortableTableColumn(table, index)) {
+ if (sortable) {
headerCell.classList.add('sortable');
+ updateSortableHeaderIndicator(headerCell, true, state.columnIndex === index, state.direction);
headerCell.setAttribute('role', 'button');
headerCell.setAttribute('tabindex', '0');
if (state.columnIndex === index) {
@@ -117,6 +158,7 @@
}
} else {
headerCell.classList.add('unsortable');
+ updateSortableHeaderIndicator(headerCell, false);
}
});
}
@@ -168,6 +210,8 @@
return;
}
+ ensureSortableHeaderIndicator(headerCell);
+
headerCell.addEventListener('click', function () {
var state = getSortableTableState(table);
var nextDirection = state.columnIndex === index && state.direction === 'asc' ? 'desc' : 'asc';
diff --git a/src/web/public/js/template-designer.js b/src/web/public/js/template-designer.js
index 60c1d3b..bd07748 100644
--- a/src/web/public/js/template-designer.js
+++ b/src/web/public/js/template-designer.js
@@ -4,6 +4,8 @@
return;
}
+ var utils = window.templateDesignerUtils || {};
+
var templateData = {};
try {
templateData = JSON.parse(dataElement.getAttribute('data-json') || dataElement.textContent || '{}') || {};
@@ -24,27 +26,26 @@
var canvasWidthInput = document.getElementById('canvas-width');
var canvasHeightInput = document.getElementById('canvas-height');
var backgroundInput = document.getElementById('background-image');
+ var backgroundColorInput = document.getElementById('background-color');
var backgroundPreview = document.getElementById('background-preview');
var backgroundEmpty = document.getElementById('background-empty');
var removeBackgroundButton = document.getElementById('remove-background-image');
var removeBackgroundFlag = document.getElementById('remove-background-image-flag');
- var addTextRegionButton = document.getElementById('add-text-region');
- var addImageRegionButton = document.getElementById('add-image-region');
+ var addRegionButton = document.getElementById('add-region-button');
+ var regionAddModal = document.getElementById('region-add-modal');
+ var regionCardTemplate = document.getElementById('region-card-template');
var regionsJsonInput = document.getElementById('regions-json');
+ var templateForm = document.getElementById('template-form');
var draft = null;
var selectedIndex = -1;
+ var overlayRenderFrame = 0;
function escapeHtml(value) {
- return String(value === undefined || value === null ? '' : value)
- .replace(/&/g, '&')
- .replace(//g, '>')
- .replace(/"/g, '"')
- .replace(/'/g, ''');
+ return utils.escapeHtml ? utils.escapeHtml(value) : String(value === undefined || value === null ? '' : value);
}
function valueOrDefault(value, fallback) {
- return value === undefined || value === null || value === '' ? fallback : value;
+ return utils.valueOrDefault ? utils.valueOrDefault(value, fallback) : (value === undefined || value === null || value === '' ? fallback : value);
}
function getCanvasSize() {
@@ -55,7 +56,7 @@
}
function clamp(value, min, max) {
- return Math.max(min, Math.min(max, value));
+ return utils.clamp ? utils.clamp(value, min, max) : Math.max(min, Math.min(max, value));
}
function getCards() {
@@ -67,21 +68,62 @@
}
function getRegionName(card) {
- return String(card.querySelector('[name="region_name[]"]').value || '').trim();
+ return utils.getRegionName ? utils.getRegionName(card) : String(card.querySelector('[name="region_name[]"]').value || '').trim();
}
function syncRegionIdentity(card, value) {
+ if (utils.syncRegionIdentity) {
+ utils.syncRegionIdentity(card, value);
+ return;
+ }
var next = String(value || '').trim();
card.querySelector('[name="region_name[]"]').value = next;
card.querySelector('[name="region_key[]"]').value = next;
card.querySelector('[name="region_label[]"]').value = next;
}
+ function validateRegionNames() {
+ var cards = getCards();
+ var names = {};
+ var hasDuplicate = false;
+
+ cards.forEach(function (card) {
+ var input = card.querySelector('[name="region_name[]"]');
+ if (!input) {
+ return;
+ }
+
+ var normalized = String(input.value || '').trim().toLowerCase();
+ if (!normalized) {
+ input.setCustomValidity('Region name is required.');
+ return;
+ }
+
+ if (!names[normalized]) {
+ names[normalized] = [];
+ }
+ names[normalized].push(input);
+ });
+
+ Object.keys(names).forEach(function (key) {
+ var inputs = names[key];
+ if (inputs.length > 1) {
+ hasDuplicate = true;
+ inputs.forEach(function (input) {
+ input.setCustomValidity('Region names must be unique on this template.');
+ });
+ } else {
+ inputs[0].setCustomValidity('');
+ }
+ });
+
+ return !hasDuplicate;
+ }
+
function readCard(card) {
- var name = getRegionName(card);
- return {
- region_key: name,
- label: name,
+ return utils.readCard ? utils.readCard(card) : {
+ region_key: getRegionName(card),
+ label: getRegionName(card),
region_type: card.querySelector('[name="region_type[]"]').value,
font_family: card.querySelector('[name="font_family[]"]').value,
x: Number(card.querySelector('[name="region_x[]"]').value || 0),
@@ -93,6 +135,10 @@
}
function writeCard(card, values) {
+ if (utils.writeCard) {
+ utils.writeCard(card, values);
+ return;
+ }
if (values.region_name !== undefined) {
syncRegionIdentity(card, values.region_name);
} else if (values.region_key !== undefined) {
@@ -101,7 +147,7 @@
syncRegionIdentity(card, values.label);
}
if (values.region_type !== undefined) { card.querySelector('[name="region_type[]"]').value = values.region_type; }
- if (values.font_family !== undefined) { card.querySelector('[name="font_family[]"]').value = values.font_family; updateRegionFieldVisibility(card); }
+ if (values.font_family !== undefined) { card.querySelector('[name="font_family[]"]').value = values.font_family; }
if (values.x !== undefined) { card.querySelector('[name="region_x[]"]').value = Math.round(values.x); }
if (values.y !== undefined) { card.querySelector('[name="region_y[]"]').value = Math.round(values.y); }
if (values.width !== undefined) { card.querySelector('[name="region_width[]"]').value = Math.round(values.width); }
@@ -110,28 +156,22 @@
}
function getOverlayRect() {
- return overlay.getBoundingClientRect();
+ return utils.getOverlayRect ? utils.getOverlayRect(overlay) : overlay.getBoundingClientRect();
}
function toCanvasPoint(event) {
- var rect = getOverlayRect();
- var size = getCanvasSize();
- var x = clamp(event.clientX - rect.left, 0, rect.width);
- var y = clamp(event.clientY - rect.top, 0, rect.height);
- return {
- x: Math.round((x / Math.max(rect.width, 1)) * size.width),
- y: Math.round((y / Math.max(rect.height, 1)) * size.height)
+ return utils.toCanvasPoint ? utils.toCanvasPoint(event, overlay, getCanvasSize()) : {
+ x: 0,
+ y: 0
};
}
function canvasRectToPixels(region) {
- var rect = getOverlayRect();
- var size = getCanvasSize();
- return {
- left: (region.x / size.width) * rect.width,
- top: (region.y / size.height) * rect.height,
- width: (region.width / size.width) * rect.width,
- height: (region.height / size.height) * rect.height
+ return utils.canvasRectToPixels ? utils.canvasRectToPixels(region, overlay, getCanvasSize()) : {
+ left: 0,
+ top: 0,
+ width: 0,
+ height: 0
};
}
@@ -182,40 +222,84 @@
reader.readAsDataURL(file);
}
- function updateRegionFieldVisibility(card) {
- var typeSelect = card.querySelector('[name="region_type[]"]');
- var fontField = card.querySelector('[name="font_family[]"]');
- if (!typeSelect || !fontField) {
+ function updateStageBackgroundColor() {
+ if (!stage) {
return;
}
- fontField.value = typeSelect.value === 'text' || typeSelect.value === 'html' ? 'Arial' : '';
+ stage.style.backgroundColor = backgroundColorInput && backgroundColorInput.value ? backgroundColorInput.value : '#111111';
+ }
+
+ function getRegionChipLabel(regionType) {
+ return regionType === 'image' ? 'Image' : regionType === 'webpage' ? 'Webpage' : regionType === 'html' ? 'HTML' : 'Text';
+ }
+
+ function populateRegionCard(card, region) {
+ var chip = card.querySelector('[data-region-chip]');
+ var title = card.querySelector('[data-region-title]');
+ var nameInput = card.querySelector('[name="region_name[]"]');
+ var fontFamilyInput = card.querySelector('[name="font_family[]"]');
+ var regionTypeInput = card.querySelector('[name="region_type[]"]');
+ var regionKeyInput = card.querySelector('[name="region_key[]"]');
+ var regionLabelInput = card.querySelector('[name="region_label[]"]');
+
+ if (title) {
+ title.textContent = region.label || region.region_key || 'Region';
+ }
+ if (chip) {
+ chip.textContent = getRegionChipLabel(region.region_type);
+ }
+ if (nameInput) {
+ nameInput.value = region.region_key || region.label || '';
+ }
+ if (fontFamilyInput) {
+ fontFamilyInput.value = region.region_type === 'image' ? '' : (region.font_family || 'Arial');
+ }
+ if (regionTypeInput) {
+ regionTypeInput.value = region.region_type || 'text';
+ }
+ if (regionKeyInput) {
+ regionKeyInput.value = region.region_key || region.label || '';
+ }
+ if (regionLabelInput) {
+ regionLabelInput.value = region.label || region.region_key || '';
+ }
+ card.querySelector('[name="region_x[]"]').value = valueOrDefault(region.x, 80);
+ card.querySelector('[name="region_y[]"]').value = valueOrDefault(region.y, 80);
+ card.querySelector('[name="region_z[]"]').value = valueOrDefault(region.z_index, 1);
+ card.querySelector('[name="region_width[]"]').value = valueOrDefault(region.width, 300);
+ card.querySelector('[name="region_height[]"]').value = valueOrDefault(region.height, 120);
+ }
+
+ function updateRegionLabel(card) {
+ var label = getRegionName(card) || 'Region';
+ var cards = getCards();
+ var index = cards.indexOf(card);
+ var title = card.querySelector('.template-field-head strong');
+ if (title) {
+ title.textContent = label;
+ }
+ if (index >= 0 && regionSelect.options[index]) {
+ regionSelect.options[index].textContent = label;
+ }
}
function makeRegionCard(region) {
- var card = document.createElement('div');
- card.className = 'region-item';
- var chipLabel = region.region_type === 'image' ? 'Image' : region.region_type === 'webpage' ? 'Webpage' : region.region_type === 'html' ? 'HTML' : 'Text';
- card.innerHTML = '' +
- '' +
- '' +
- '' +
- '' +
- '' +
- '' + escapeHtml(region.label || region.region_key || '') + '' + escapeHtml(chipLabel) + '
' +
- '' +
- '' +
- '';
+ var card;
+ if (regionCardTemplate && regionCardTemplate.content) {
+ card = regionCardTemplate.content.firstElementChild.cloneNode(true);
+ } else {
+ card = document.createElement('div');
+ card.className = 'card card-outline card-secondary admin-form-card region-item mb-3';
+ }
+ populateRegionCard(card, region);
var nameInput = card.querySelector('[name="region_name[]"]');
- var typeSelect = card.querySelector('[name="region_type[]"]');
nameInput.addEventListener('input', function () {
syncRegionIdentity(card, nameInput.value);
+ updateRegionLabel(card);
+ validateRegionNames();
renderRegionSidebar();
renderOverlay();
});
- typeSelect.addEventListener('change', function () {
- updateRegionFieldVisibility(card);
- renderOverlay();
- });
card.addEventListener('click', function (event) {
if (event.target && event.target.classList && event.target.classList.contains('remove-region')) {
return;
@@ -233,7 +317,6 @@
renderRegionSidebar();
renderOverlay();
});
- updateRegionFieldVisibility(card);
return card;
}
@@ -269,6 +352,7 @@
});
regionSelect.value = String(selectedIndex);
updateCanvasSizeLock();
+ validateRegionNames();
}
function renderOverlay() {
@@ -290,6 +374,17 @@
}
}
+ function requestOverlayRender() {
+ if (overlayRenderFrame) {
+ return;
+ }
+
+ overlayRenderFrame = window.requestAnimationFrame(function () {
+ overlayRenderFrame = 0;
+ renderOverlay();
+ });
+ }
+
function render() {
updateAspectRatio();
renderRegionSidebar();
@@ -318,6 +413,13 @@
setSelected(getCards().length - 1);
}
+ function openAddRegionModal() {
+ if (!regionAddModal || !window.bootstrap || !window.bootstrap.Modal) {
+ return;
+ }
+ window.bootstrap.Modal.getOrCreateInstance(regionAddModal).show();
+ }
+
function createDefaultRegion(type) {
var count = getCards().length + 1;
var name = 'region_' + count;
@@ -356,7 +458,7 @@
renderOverlay();
function moveHandler(moveEvent) {
draft.end = toCanvasPoint(moveEvent);
- renderOverlay();
+ requestOverlayRender();
}
function upHandler(upEvent) {
draft.end = toCanvasPoint(upEvent);
@@ -367,7 +469,7 @@
addRegion({ region_key: 'region_' + (getCards().length + 1), label: 'Region ' + (getCards().length + 1), region_type: 'text', x: region.x, y: region.y, width: region.width, height: region.height, z_index: 1 });
}
draft = null;
- renderOverlay();
+ requestOverlayRender();
document.removeEventListener('mousemove', moveHandler);
document.removeEventListener('mouseup', upHandler);
}
@@ -384,7 +486,7 @@
var dy = currentPoint.y - startPoint.y;
var next = clampRegion({ x: startRegion.x + dx, y: startRegion.y + dy, width: startRegion.width, height: startRegion.height });
writeCard(cardAt(index), { x: next.x, y: next.y });
- renderOverlay();
+ requestOverlayRender();
}
function upHandler() {
document.removeEventListener('mousemove', moveHandler);
@@ -410,7 +512,7 @@
if (next.height < 12) { if (dir.indexOf('n') !== -1) { next.y -= 12 - next.height; } next.height = 12; }
next = clampRegion(next);
writeCard(cardAt(index), { x: next.x, y: next.y, width: next.width, height: next.height });
- renderOverlay();
+ requestOverlayRender();
}
function upHandler() {
document.removeEventListener('mousemove', moveHandler);
@@ -420,15 +522,20 @@
document.addEventListener('mouseup', upHandler);
}
- addTextRegionButton.addEventListener('click', function () { addRegion(createDefaultRegion('text')); });
- var addHtmlRegionButton = document.getElementById('add-html-region');
- if (addHtmlRegionButton) {
- addHtmlRegionButton.addEventListener('click', function () { addRegion(createDefaultRegion('html')); });
- }
- addImageRegionButton.addEventListener('click', function () { addRegion(createDefaultRegion('image')); });
- var addWebpageRegionButton = document.getElementById('add-webpage-region');
- if (addWebpageRegionButton) {
- addWebpageRegionButton.addEventListener('click', function () { addRegion(createDefaultRegion('webpage')); });
+ if (addRegionButton && regionAddModal) {
+ var addRegionTypeButtons = regionAddModal.querySelectorAll('[data-add-region-type]');
+ addRegionButton.addEventListener('click', function () {
+ openAddRegionModal();
+ });
+ Array.prototype.forEach.call(addRegionTypeButtons, function (button) {
+ button.addEventListener('click', function () {
+ var regionType = button.getAttribute('data-add-region-type');
+ addRegion(createDefaultRegion(regionType));
+ if (window.bootstrap && window.bootstrap.Modal) {
+ window.bootstrap.Modal.getOrCreateInstance(regionAddModal).hide();
+ }
+ });
+ });
}
backgroundInput.addEventListener('change', function () {
var file = backgroundInput.files && backgroundInput.files[0];
@@ -445,6 +552,9 @@
backgroundEmpty.style.display = 'block';
});
}
+ if (backgroundColorInput) {
+ backgroundColorInput.addEventListener('input', updateStageBackgroundColor);
+ }
canvasSizeSelect.addEventListener('change', function () { syncCanvasSizeSelection(); render(); });
canvasWidthInput.addEventListener('input', render);
canvasHeightInput.addEventListener('input', render);
@@ -470,12 +580,27 @@
setSelected(-1);
startDraw(event);
});
- document.getElementById('template-form').addEventListener('submit', function () {
- syncCanvasSizeSelection();
- regionsJsonInput.value = JSON.stringify(getCards().map(readCard));
- });
+ if (templateForm) {
+ templateForm.addEventListener('formdata', function (event) {
+ if (!validateRegionNames()) {
+ event.preventDefault();
+ return;
+ }
+ syncCanvasSizeSelection();
+ event.formData.set('regions_json', JSON.stringify(getCards().map(readCard)));
+ });
+
+ templateForm.addEventListener('submit', function () {
+ if (!validateRegionNames()) {
+ return;
+ }
+ syncCanvasSizeSelection();
+ regionsJsonInput.value = JSON.stringify(getCards().map(readCard));
+ });
+ }
renderRegionList(existingRegions);
syncCanvasSizeSelection();
+ updateStageBackgroundColor();
render();
})();
diff --git a/src/web/public/js/templates/template-designer-utils.js b/src/web/public/js/templates/template-designer-utils.js
new file mode 100644
index 0000000..8dc167d
--- /dev/null
+++ b/src/web/public/js/templates/template-designer-utils.js
@@ -0,0 +1,117 @@
+(function () {
+ function escapeHtml(value) {
+ return String(value === undefined || value === null ? '' : value)
+ .replace(/&/g, '&')
+ .replace(//g, '>')
+ .replace(/"/g, '"')
+ .replace(/'/g, ''');
+ }
+
+ function valueOrDefault(value, fallback) {
+ return value === undefined || value === null || value === '' ? fallback : value;
+ }
+
+ function clamp(value, min, max) {
+ return Math.max(min, Math.min(max, value));
+ }
+
+ function getRegionName(card) {
+ return String(card.querySelector('[name="region_name[]"]').value || '').trim();
+ }
+
+ function syncRegionIdentity(card, value) {
+ var next = String(value || '').trim();
+ card.querySelector('[name="region_name[]"]').value = next;
+ card.querySelector('[name="region_key[]"]').value = next;
+ card.querySelector('[name="region_label[]"]').value = next;
+ }
+
+ function readCard(card) {
+ var name = getRegionName(card);
+ return {
+ region_key: name,
+ label: name,
+ region_type: card.querySelector('[name="region_type[]"]').value,
+ font_family: card.querySelector('[name="font_family[]"]').value,
+ x: Number(card.querySelector('[name="region_x[]"]').value || 0),
+ y: Number(card.querySelector('[name="region_y[]"]').value || 0),
+ width: Number(card.querySelector('[name="region_width[]"]').value || 0),
+ height: Number(card.querySelector('[name="region_height[]"]').value || 0),
+ z_index: Number(card.querySelector('[name="region_z[]"]').value || 0)
+ };
+ }
+
+ function writeCard(card, values) {
+ if (values.region_name !== undefined) {
+ syncRegionIdentity(card, values.region_name);
+ } else if (values.region_key !== undefined) {
+ syncRegionIdentity(card, values.region_key);
+ } else if (values.label !== undefined) {
+ syncRegionIdentity(card, values.label);
+ }
+ if (values.region_type !== undefined) { card.querySelector('[name="region_type[]"]').value = values.region_type; }
+ if (values.font_family !== undefined) { card.querySelector('[name="font_family[]"]').value = values.font_family; }
+ if (values.x !== undefined) { card.querySelector('[name="region_x[]"]').value = Math.round(values.x); }
+ if (values.y !== undefined) { card.querySelector('[name="region_y[]"]').value = Math.round(values.y); }
+ if (values.width !== undefined) { card.querySelector('[name="region_width[]"]').value = Math.round(values.width); }
+ if (values.height !== undefined) { card.querySelector('[name="region_height[]"]').value = Math.round(values.height); }
+ if (values.z_index !== undefined) { card.querySelector('[name="region_z[]"]').value = Math.round(values.z_index); }
+ }
+
+ function clampRegion(region, size, minSize) {
+ var bounds = size || { width: 1920, height: 1080 };
+ var minimum = minSize || 12;
+ var x = clamp(region.x, 0, bounds.width - minimum);
+ var y = clamp(region.y, 0, bounds.height - minimum);
+ var width = Math.max(minimum, region.width);
+ var height = Math.max(minimum, region.height);
+ if (x + width > bounds.width) {
+ width = bounds.width - x;
+ }
+ if (y + height > bounds.height) {
+ height = bounds.height - y;
+ }
+ return { x: Math.round(x), y: Math.round(y), width: Math.round(Math.max(minimum, width)), height: Math.round(Math.max(minimum, height)) };
+ }
+
+ function getOverlayRect(overlay) {
+ return overlay.getBoundingClientRect();
+ }
+
+ function toCanvasPoint(event, overlay, size) {
+ var rect = getOverlayRect(overlay);
+ var canvasSize = size || { width: 1920, height: 1080 };
+ var x = clamp(event.clientX - rect.left, 0, rect.width);
+ var y = clamp(event.clientY - rect.top, 0, rect.height);
+ return {
+ x: Math.round((x / Math.max(rect.width, 1)) * canvasSize.width),
+ y: Math.round((y / Math.max(rect.height, 1)) * canvasSize.height)
+ };
+ }
+
+ function canvasRectToPixels(region, overlay, size) {
+ var rect = getOverlayRect(overlay);
+ var canvasSize = size || { width: 1920, height: 1080 };
+ return {
+ left: (region.x / canvasSize.width) * rect.width,
+ top: (region.y / canvasSize.height) * rect.height,
+ width: (region.width / canvasSize.width) * rect.width,
+ height: (region.height / canvasSize.height) * rect.height
+ };
+ }
+
+ window.templateDesignerUtils = {
+ escapeHtml: escapeHtml,
+ valueOrDefault: valueOrDefault,
+ clamp: clamp,
+ getRegionName: getRegionName,
+ syncRegionIdentity: syncRegionIdentity,
+ readCard: readCard,
+ writeCard: writeCard,
+ clampRegion: clampRegion,
+ getOverlayRect: getOverlayRect,
+ toCanvasPoint: toCanvasPoint,
+ canvasRectToPixels: canvasRectToPixels
+ };
+}());
diff --git a/src/web/public/js/templates/template-designer.js b/src/web/public/js/templates/template-designer.js
new file mode 100644
index 0000000..bd07748
--- /dev/null
+++ b/src/web/public/js/templates/template-designer.js
@@ -0,0 +1,606 @@
+(function () {
+ var dataElement = document.getElementById('template-editor-data');
+ if (!dataElement) {
+ return;
+ }
+
+ var utils = window.templateDesignerUtils || {};
+
+ var templateData = {};
+ try {
+ templateData = JSON.parse(dataElement.getAttribute('data-json') || dataElement.textContent || '{}') || {};
+ } catch (_error) {
+ templateData = {};
+ }
+
+ var existingRegions = Array.isArray(templateData.regions)
+ ? templateData.regions
+ : (Array.isArray(templateData) ? templateData : []);
+ var stage = document.getElementById('designer-stage');
+ var overlay = document.getElementById('designer-overlay');
+ var regionList = document.getElementById('region-list');
+ var regionSelect = document.getElementById('region-select');
+ var canvasSizeSelect = document.getElementById('canvas-size-select');
+ var canvasSizeIdInput = document.getElementById('canvas-size-id');
+ var canvasSizeSummary = document.getElementById('canvas-size-summary');
+ var canvasWidthInput = document.getElementById('canvas-width');
+ var canvasHeightInput = document.getElementById('canvas-height');
+ var backgroundInput = document.getElementById('background-image');
+ var backgroundColorInput = document.getElementById('background-color');
+ var backgroundPreview = document.getElementById('background-preview');
+ var backgroundEmpty = document.getElementById('background-empty');
+ var removeBackgroundButton = document.getElementById('remove-background-image');
+ var removeBackgroundFlag = document.getElementById('remove-background-image-flag');
+ var addRegionButton = document.getElementById('add-region-button');
+ var regionAddModal = document.getElementById('region-add-modal');
+ var regionCardTemplate = document.getElementById('region-card-template');
+ var regionsJsonInput = document.getElementById('regions-json');
+ var templateForm = document.getElementById('template-form');
+ var draft = null;
+ var selectedIndex = -1;
+ var overlayRenderFrame = 0;
+
+ function escapeHtml(value) {
+ return utils.escapeHtml ? utils.escapeHtml(value) : String(value === undefined || value === null ? '' : value);
+ }
+
+ function valueOrDefault(value, fallback) {
+ return utils.valueOrDefault ? utils.valueOrDefault(value, fallback) : (value === undefined || value === null || value === '' ? fallback : value);
+ }
+
+ function getCanvasSize() {
+ return {
+ width: Math.max(1, Number(canvasWidthInput.value || 1920)),
+ height: Math.max(1, Number(canvasHeightInput.value || 1080))
+ };
+ }
+
+ function clamp(value, min, max) {
+ return utils.clamp ? utils.clamp(value, min, max) : Math.max(min, Math.min(max, value));
+ }
+
+ function getCards() {
+ return Array.prototype.slice.call(regionList.querySelectorAll('.region-item'));
+ }
+
+ function cardAt(index) {
+ return getCards()[index] || null;
+ }
+
+ function getRegionName(card) {
+ return utils.getRegionName ? utils.getRegionName(card) : String(card.querySelector('[name="region_name[]"]').value || '').trim();
+ }
+
+ function syncRegionIdentity(card, value) {
+ if (utils.syncRegionIdentity) {
+ utils.syncRegionIdentity(card, value);
+ return;
+ }
+ var next = String(value || '').trim();
+ card.querySelector('[name="region_name[]"]').value = next;
+ card.querySelector('[name="region_key[]"]').value = next;
+ card.querySelector('[name="region_label[]"]').value = next;
+ }
+
+ function validateRegionNames() {
+ var cards = getCards();
+ var names = {};
+ var hasDuplicate = false;
+
+ cards.forEach(function (card) {
+ var input = card.querySelector('[name="region_name[]"]');
+ if (!input) {
+ return;
+ }
+
+ var normalized = String(input.value || '').trim().toLowerCase();
+ if (!normalized) {
+ input.setCustomValidity('Region name is required.');
+ return;
+ }
+
+ if (!names[normalized]) {
+ names[normalized] = [];
+ }
+ names[normalized].push(input);
+ });
+
+ Object.keys(names).forEach(function (key) {
+ var inputs = names[key];
+ if (inputs.length > 1) {
+ hasDuplicate = true;
+ inputs.forEach(function (input) {
+ input.setCustomValidity('Region names must be unique on this template.');
+ });
+ } else {
+ inputs[0].setCustomValidity('');
+ }
+ });
+
+ return !hasDuplicate;
+ }
+
+ function readCard(card) {
+ return utils.readCard ? utils.readCard(card) : {
+ region_key: getRegionName(card),
+ label: getRegionName(card),
+ region_type: card.querySelector('[name="region_type[]"]').value,
+ font_family: card.querySelector('[name="font_family[]"]').value,
+ x: Number(card.querySelector('[name="region_x[]"]').value || 0),
+ y: Number(card.querySelector('[name="region_y[]"]').value || 0),
+ width: Number(card.querySelector('[name="region_width[]"]').value || 0),
+ height: Number(card.querySelector('[name="region_height[]"]').value || 0),
+ z_index: Number(card.querySelector('[name="region_z[]"]').value || 0)
+ };
+ }
+
+ function writeCard(card, values) {
+ if (utils.writeCard) {
+ utils.writeCard(card, values);
+ return;
+ }
+ if (values.region_name !== undefined) {
+ syncRegionIdentity(card, values.region_name);
+ } else if (values.region_key !== undefined) {
+ syncRegionIdentity(card, values.region_key);
+ } else if (values.label !== undefined) {
+ syncRegionIdentity(card, values.label);
+ }
+ if (values.region_type !== undefined) { card.querySelector('[name="region_type[]"]').value = values.region_type; }
+ if (values.font_family !== undefined) { card.querySelector('[name="font_family[]"]').value = values.font_family; }
+ if (values.x !== undefined) { card.querySelector('[name="region_x[]"]').value = Math.round(values.x); }
+ if (values.y !== undefined) { card.querySelector('[name="region_y[]"]').value = Math.round(values.y); }
+ if (values.width !== undefined) { card.querySelector('[name="region_width[]"]').value = Math.round(values.width); }
+ if (values.height !== undefined) { card.querySelector('[name="region_height[]"]').value = Math.round(values.height); }
+ if (values.z_index !== undefined) { card.querySelector('[name="region_z[]"]').value = Math.round(values.z_index); }
+ }
+
+ function getOverlayRect() {
+ return utils.getOverlayRect ? utils.getOverlayRect(overlay) : overlay.getBoundingClientRect();
+ }
+
+ function toCanvasPoint(event) {
+ return utils.toCanvasPoint ? utils.toCanvasPoint(event, overlay, getCanvasSize()) : {
+ x: 0,
+ y: 0
+ };
+ }
+
+ function canvasRectToPixels(region) {
+ return utils.canvasRectToPixels ? utils.canvasRectToPixels(region, overlay, getCanvasSize()) : {
+ left: 0,
+ top: 0,
+ width: 0,
+ height: 0
+ };
+ }
+
+ function updateAspectRatio() {
+ var size = getCanvasSize();
+ stage.style.aspectRatio = size.width + ' / ' + size.height;
+ }
+
+ function updateCanvasSizeSummary() {
+ var option = canvasSizeSelect.options[canvasSizeSelect.selectedIndex];
+ canvasSizeSummary.textContent = option ? option.textContent : '';
+ }
+
+ function updateCanvasSizeLock() {
+ var lockOnExistingTemplate = canvasSizeSelect.dataset.lockOnExistingTemplate === 'true';
+ var locked = lockOnExistingTemplate && getCards().length > 0;
+ canvasSizeSelect.disabled = locked;
+ canvasSizeSummary.classList.toggle('is-locked', locked);
+ }
+
+ function syncCanvasSizeSelection() {
+ var option = canvasSizeSelect.options[canvasSizeSelect.selectedIndex];
+ if (!option) {
+ return;
+ }
+ if (canvasSizeIdInput) {
+ canvasSizeIdInput.value = option.value;
+ }
+ canvasWidthInput.value = Math.max(1, Number(option.dataset.width || canvasWidthInput.value || 1920));
+ canvasHeightInput.value = Math.max(1, Number(option.dataset.height || canvasHeightInput.value || 1080));
+ updateAspectRatio();
+ updateCanvasSizeSummary();
+ }
+
+ function updateBackgroundPreview(file) {
+ if (!file) {
+ return;
+ }
+ if (removeBackgroundFlag) {
+ removeBackgroundFlag.checked = false;
+ }
+ var reader = new FileReader();
+ reader.onload = function () {
+ backgroundPreview.src = reader.result;
+ backgroundPreview.style.display = 'block';
+ backgroundEmpty.style.display = 'none';
+ };
+ reader.readAsDataURL(file);
+ }
+
+ function updateStageBackgroundColor() {
+ if (!stage) {
+ return;
+ }
+ stage.style.backgroundColor = backgroundColorInput && backgroundColorInput.value ? backgroundColorInput.value : '#111111';
+ }
+
+ function getRegionChipLabel(regionType) {
+ return regionType === 'image' ? 'Image' : regionType === 'webpage' ? 'Webpage' : regionType === 'html' ? 'HTML' : 'Text';
+ }
+
+ function populateRegionCard(card, region) {
+ var chip = card.querySelector('[data-region-chip]');
+ var title = card.querySelector('[data-region-title]');
+ var nameInput = card.querySelector('[name="region_name[]"]');
+ var fontFamilyInput = card.querySelector('[name="font_family[]"]');
+ var regionTypeInput = card.querySelector('[name="region_type[]"]');
+ var regionKeyInput = card.querySelector('[name="region_key[]"]');
+ var regionLabelInput = card.querySelector('[name="region_label[]"]');
+
+ if (title) {
+ title.textContent = region.label || region.region_key || 'Region';
+ }
+ if (chip) {
+ chip.textContent = getRegionChipLabel(region.region_type);
+ }
+ if (nameInput) {
+ nameInput.value = region.region_key || region.label || '';
+ }
+ if (fontFamilyInput) {
+ fontFamilyInput.value = region.region_type === 'image' ? '' : (region.font_family || 'Arial');
+ }
+ if (regionTypeInput) {
+ regionTypeInput.value = region.region_type || 'text';
+ }
+ if (regionKeyInput) {
+ regionKeyInput.value = region.region_key || region.label || '';
+ }
+ if (regionLabelInput) {
+ regionLabelInput.value = region.label || region.region_key || '';
+ }
+ card.querySelector('[name="region_x[]"]').value = valueOrDefault(region.x, 80);
+ card.querySelector('[name="region_y[]"]').value = valueOrDefault(region.y, 80);
+ card.querySelector('[name="region_z[]"]').value = valueOrDefault(region.z_index, 1);
+ card.querySelector('[name="region_width[]"]').value = valueOrDefault(region.width, 300);
+ card.querySelector('[name="region_height[]"]').value = valueOrDefault(region.height, 120);
+ }
+
+ function updateRegionLabel(card) {
+ var label = getRegionName(card) || 'Region';
+ var cards = getCards();
+ var index = cards.indexOf(card);
+ var title = card.querySelector('.template-field-head strong');
+ if (title) {
+ title.textContent = label;
+ }
+ if (index >= 0 && regionSelect.options[index]) {
+ regionSelect.options[index].textContent = label;
+ }
+ }
+
+ function makeRegionCard(region) {
+ var card;
+ if (regionCardTemplate && regionCardTemplate.content) {
+ card = regionCardTemplate.content.firstElementChild.cloneNode(true);
+ } else {
+ card = document.createElement('div');
+ card.className = 'card card-outline card-secondary admin-form-card region-item mb-3';
+ }
+ populateRegionCard(card, region);
+ var nameInput = card.querySelector('[name="region_name[]"]');
+ nameInput.addEventListener('input', function () {
+ syncRegionIdentity(card, nameInput.value);
+ updateRegionLabel(card);
+ validateRegionNames();
+ renderRegionSidebar();
+ renderOverlay();
+ });
+ card.addEventListener('click', function (event) {
+ if (event.target && event.target.classList && event.target.classList.contains('remove-region')) {
+ return;
+ }
+ setSelected(getCards().indexOf(card));
+ });
+ card.querySelector('.remove-region').addEventListener('click', function (event) {
+ event.preventDefault();
+ card.remove();
+ if (!getCards().length) {
+ selectedIndex = -1;
+ } else if (selectedIndex >= getCards().length) {
+ selectedIndex = getCards().length - 1;
+ }
+ renderRegionSidebar();
+ renderOverlay();
+ });
+ return card;
+ }
+
+ function renderRegionList(initialRegions) {
+ regionList.innerHTML = '';
+ initialRegions.forEach(function (region) {
+ regionList.appendChild(makeRegionCard(region));
+ });
+ }
+
+ function renderRegionSidebar() {
+ var cards = getCards();
+ regionSelect.innerHTML = '';
+ if (!cards.length) {
+ regionSelect.disabled = true;
+ regionList.innerHTML = '';
+ updateCanvasSizeLock();
+ return;
+ }
+ regionSelect.disabled = false;
+ if (selectedIndex < 0 || selectedIndex >= cards.length) {
+ selectedIndex = 0;
+ }
+ cards.forEach(function (card, index) {
+ var option = document.createElement('option');
+ option.value = String(index);
+ option.textContent = getRegionName(card) || ('Region ' + (index + 1));
+ if (index === selectedIndex) {
+ option.selected = true;
+ }
+ regionSelect.appendChild(option);
+ card.hidden = index !== selectedIndex;
+ });
+ regionSelect.value = String(selectedIndex);
+ updateCanvasSizeLock();
+ validateRegionNames();
+ }
+
+ function renderOverlay() {
+ var cards = getCards();
+ var selectedCard = selectedIndex >= 0 ? cards[selectedIndex] : null;
+ var selectedNow = selectedCard ? cards.indexOf(selectedCard) : -1;
+ var regions = cards.map(readCard);
+ regionsJsonInput.value = JSON.stringify(regions);
+ overlay.innerHTML = regions.map(function (region, index) {
+ var box = canvasRectToPixels(region);
+ var selected = index === selectedNow ? ' selected' : '';
+ return '' + escapeHtml(region.label || region.region_key || 'Region') + '
-
-
-
- ${body}
-
-
-
- `;
-}
-
module.exports = {
escapeHtml,
- screenPlayerUrl,
- renderAdminShell
+ screenPlayerUrl
};
diff --git a/src/web/routes/dashboard/index.js b/src/web/routes/dashboard/index.js
index 0c67cf0..0f9fe0d 100644
--- a/src/web/routes/dashboard/index.js
+++ b/src/web/routes/dashboard/index.js
@@ -10,6 +10,7 @@ module.exports = function renderDashboardPage(data, message, currentUser) {
screens: data.screens || [],
clients: data.clients || [],
slides: data.slides || [],
- connectedClientsCount: Number(data.connectedClientsCount || 0)
+ connectedClientsCount: Number(data.connectedClientsCount || 0),
+ scripts: ['js/dashboard/dashboard-page.js']
});
};
diff --git a/src/web/routes/playlists/edit.js b/src/web/routes/playlists/edit.js
index 815c40e..6eb3713 100644
--- a/src/web/routes/playlists/edit.js
+++ b/src/web/routes/playlists/edit.js
@@ -110,6 +110,6 @@ module.exports = function renderPlaylistEditPage(playlist, data, message, curren
selectableSlides: selectableSlides,
playlistCanvasSignature: playlistCanvasSignature,
playlistCanvasMismatch: playlistCanvasMismatch,
- scripts: ['js/sortable.min.js', 'js/playlist-schedule.js']
+ scripts: ['js/vendor/sortable.min.js', 'js/playlists/playlist-schedule.js']
});
};
diff --git a/src/web/routes/playlists/slide-config.js b/src/web/routes/playlists/slide-config.js
index 4ce7b66..ff05bd4 100644
--- a/src/web/routes/playlists/slide-config.js
+++ b/src/web/routes/playlists/slide-config.js
@@ -10,6 +10,9 @@ const DAY_OPTIONS = [
{ value: 6, label: 'Sat' }
];
+const DEFAULT_START_TIME = '00:00';
+const DEFAULT_END_TIME = '23:59';
+
function formatDateTimeInput(value) {
if (!value) {
return '';
@@ -34,31 +37,43 @@ function formatTimeInput(value) {
}
module.exports = function renderPlaylistSlideConfigPage(playlist, playlistSlide, message, rowKey, currentUser) {
- const scheduleMode = String(playlistSlide.schedule_mode || 'always');
- const selectedDays = new Set(Array.isArray(playlistSlide.schedule_days) ? playlistSlide.schedule_days.map(Number) : []);
+ const slide = playlistSlide || {
+ id: 0,
+ schedule_mode: 'always',
+ schedule_days: [],
+ schedule_start_datetime: null,
+ schedule_end_datetime: null,
+ schedule_start_time: null,
+ schedule_end_time: null
+ };
+ const scheduleMode = String(slide.schedule_mode || 'always');
+ const selectedDays = new Set(Array.isArray(slide.schedule_days) ? slide.schedule_days.map(Number) : []);
+ const startTimeValue = formatTimeInput(slide.schedule_start_time) || (scheduleMode === 'times' ? DEFAULT_START_TIME : '');
+ const endTimeValue = formatTimeInput(slide.schedule_end_time) || (scheduleMode === 'times' ? DEFAULT_END_TIME : '');
return renderFragment('playlists/slide-config', {
title: 'Slide schedule',
+ framePopupCard: true,
hideFrameHeader: true,
hideThemeToggle: true,
frameBodyClass: 'admin-shell-body--frame-plain',
message: message,
currentUser: currentUser || null,
playlist: playlist,
- playlistSlide: playlistSlide,
+ playlistSlide: slide,
scheduleMode: scheduleMode,
isAlwaysMode: scheduleMode === 'always',
isDatesMode: scheduleMode === 'dates',
isTimesMode: scheduleMode === 'times',
rowKey: String(rowKey || ''),
- startDateTimeValue: formatDateTimeInput(playlistSlide.schedule_start_datetime),
- endDateTimeValue: formatDateTimeInput(playlistSlide.schedule_end_datetime),
- startTimeValue: formatTimeInput(playlistSlide.schedule_start_time),
- endTimeValue: formatTimeInput(playlistSlide.schedule_end_time),
+ startDateTimeValue: formatDateTimeInput(slide.schedule_start_datetime),
+ endDateTimeValue: formatDateTimeInput(slide.schedule_end_datetime),
+ startTimeValue: startTimeValue,
+ endTimeValue: endTimeValue,
dayOptions: DAY_OPTIONS.map((day) => ({
...day,
checked: selectedDays.has(day.value)
})),
- scripts: ['js/playlist-schedule.js']
+ scripts: ['js/playlists/playlist-schedule.js']
});
};
diff --git a/src/web/routes/slides/form.js b/src/web/routes/slides/form.js
index 46e129f..de8ee5f 100644
--- a/src/web/routes/slides/form.js
+++ b/src/web/routes/slides/form.js
@@ -13,9 +13,11 @@ module.exports = function renderSlideFormPage(data, mode, slide, message, curren
active: 'slides',
message: message,
isEdit: mode === 'edit',
+ saveLabel: 'Save',
action: mode === 'edit' ? `/admin/slides/${slide.id}` : '/admin/slides',
slide: slide || { title: '', template_id: null, content: {} },
templates: templates,
+ stylesheets: ['js/vendor/ckeditor5/ckeditor5.css'],
slideEditorData: {
templates: templates,
existingTemplateId: slide && slide.template_id ? slide.template_id : null,
diff --git a/src/web/routes/templates/add.js b/src/web/routes/templates/add.js
index 9b543ad..df8b87d 100644
--- a/src/web/routes/templates/add.js
+++ b/src/web/routes/templates/add.js
@@ -7,6 +7,7 @@ function buildDefaultTemplate() {
canvas_size_id: null,
canvas_size_width: 1920,
canvas_size_height: 1080,
+ background_color: '#111111',
background_image_path: '',
regions: [{
region_key: 'region_1',
@@ -33,7 +34,8 @@ function resolveTemplateCanvasSize(template, canvasSizes) {
canvas_size_id: matched.id,
canvas_size_label: matched.name,
canvas_size_width: matched.width,
- canvas_size_height: matched.height
+ canvas_size_height: matched.height,
+ background_color: String(template.background_color || '#111111').trim() || '#111111'
});
}
@@ -41,7 +43,8 @@ function resolveTemplateCanvasSize(template, canvasSizes) {
canvas_size_id: '',
canvas_size_label: 'Current size (' + currentWidth + 'x' + currentHeight + ')',
canvas_size_width: currentWidth,
- canvas_size_height: currentHeight
+ canvas_size_height: currentHeight,
+ background_color: String(template.background_color || '#111111').trim() || '#111111'
});
}
@@ -59,6 +62,6 @@ module.exports = function renderTemplateFormPage(template, mode, message, canvas
currentUser: currentUser || null,
template: current,
canvasSizes: canvasSizes || [],
- scripts: ['js/template-designer.js']
+ scripts: ['js/templates/template-designer-utils.js', 'js/templates/template-designer.js']
});
};
diff --git a/src/web/session.js b/src/web/session.js
new file mode 100644
index 0000000..631b945
--- /dev/null
+++ b/src/web/session.js
@@ -0,0 +1,102 @@
+function createSessionService(options) {
+ const sessionCookieName = String(options && options.sessionCookieName || '').trim();
+ const sessionMaxAgeMs = Number(options && options.sessionMaxAgeMs);
+ const hashSessionToken = options && options.hashSessionToken;
+ const createSessionToken = options && options.createSessionToken;
+
+ if (!sessionCookieName || !Number.isFinite(sessionMaxAgeMs) || typeof hashSessionToken !== 'function' || typeof createSessionToken !== 'function') {
+ throw new Error('createSessionService requires the session dependencies.');
+ }
+
+ function parseCookies(cookieHeader) {
+ return String(cookieHeader || '').split(/;\s*/).reduce(function (cookies, pair) {
+ if (!pair) {
+ return cookies;
+ }
+ const separatorIndex = pair.indexOf('=');
+ if (separatorIndex === -1) {
+ return cookies;
+ }
+ const name = decodeURIComponent(pair.slice(0, separatorIndex).trim());
+ const value = decodeURIComponent(pair.slice(separatorIndex + 1).trim());
+ if (name) {
+ cookies[name] = value;
+ }
+ return cookies;
+ }, {});
+ }
+
+ function serializeCookie(name, value, options) {
+ const parts = [`${encodeURIComponent(name)}=${encodeURIComponent(value)}`];
+ if (options && options.maxAge !== undefined) {
+ parts.push(`Max-Age=${Math.max(0, Math.trunc(Number(options.maxAge) / 1000))}`);
+ }
+ parts.push('Path=/');
+ parts.push('HttpOnly');
+ parts.push('SameSite=Lax');
+ return parts.join('; ');
+ }
+
+ function clearSessionCookie(res) {
+ res.setHeader('Set-Cookie', serializeCookie(sessionCookieName, '', { maxAge: 0 }));
+ }
+
+ function setSessionCookie(res, token) {
+ res.setHeader('Set-Cookie', serializeCookie(sessionCookieName, token, { maxAge: sessionMaxAgeMs }));
+ }
+
+ async function loadCurrentUser(pool, req) {
+ const cookies = parseCookies(req.headers.cookie || '');
+ const token = cookies[sessionCookieName];
+ if (!token) {
+ return null;
+ }
+
+ const tokenHash = hashSessionToken(token);
+ const [rows] = await pool.query(
+ `SELECT s.user_id, u.id, u.name, u.username
+ FROM auth_sessions s
+ JOIN users u ON u.id = s.user_id
+ WHERE s.session_hash = ?
+ AND s.expires_at > NOW()
+ LIMIT 1`,
+ [tokenHash]
+ );
+ if (!rows.length) {
+ return null;
+ }
+
+ await pool.query('UPDATE auth_sessions SET last_used_at = CURRENT_TIMESTAMP, modified_by = ? WHERE session_hash = ?', [rows[0].user_id, tokenHash]);
+ return rows[0];
+ }
+
+ async function createUserSession(pool, userId) {
+ const token = createSessionToken();
+ const tokenHash = hashSessionToken(token);
+ const expiresAt = new Date(Date.now() + sessionMaxAgeMs);
+ await pool.query(
+ 'INSERT INTO auth_sessions (session_hash, user_id, expires_at, created_by, modified_by) VALUES (?, ?, ?, ?, ?)',
+ [tokenHash, userId, expiresAt, userId, userId]
+ );
+ return token;
+ }
+
+ function requireAuth(req, res, next) {
+ if (req.currentUser) {
+ return next();
+ }
+ res.redirect('/login?message=' + encodeURIComponent('Please sign in to continue.'));
+ }
+
+ return {
+ parseCookies: parseCookies,
+ serializeCookie: serializeCookie,
+ clearSessionCookie: clearSessionCookie,
+ setSessionCookie: setSessionCookie,
+ loadCurrentUser: loadCurrentUser,
+ createUserSession: createUserSession,
+ requireAuth: requireAuth
+ };
+}
+
+module.exports = { createSessionService };
\ No newline at end of file
diff --git a/src/web/upload-sync.js b/src/web/upload-sync.js
new file mode 100644
index 0000000..95f5588
--- /dev/null
+++ b/src/web/upload-sync.js
@@ -0,0 +1,561 @@
+const fs = require('fs');
+const path = require('path');
+const crypto = require('crypto');
+const multer = require('multer');
+
+function normalizeUploadRoot(uploadDir) {
+ return path.resolve(String(uploadDir || '').trim());
+}
+
+function createUploadSyncService(options) {
+ const common = options && options.common;
+ const playerInternalBaseUrl = String(options && options.playerInternalBaseUrl || '').replace(/\/$/, '');
+ const playerSnapshotCache = options && options.playerSnapshotCache;
+ const notifyPlayerScreens = options && options.notifyPlayerScreens;
+
+ let playerUploadSyncMode = null;
+ let playerUploadSyncModePromise = null;
+ const pendingPlayerUploadSyncs = new Map();
+ let pendingPlayerUploadSyncFlushTimer = null;
+ let pendingPlayerUploadSyncFlushInFlight = null;
+ const pendingPlaylistUploadSyncs = new Map();
+ let pendingPlaylistUploadSyncFlushTimer = null;
+ let pendingPlaylistUploadSyncFlushInFlight = null;
+
+ if (!common || !playerSnapshotCache || typeof notifyPlayerScreens !== 'function') {
+ throw new Error('createUploadSyncService requires the upload dependencies.');
+ }
+
+ function createUploadMiddleware(uploadDir) {
+ const storage = multer.diskStorage({
+ destination: function (_req, _file, cb) {
+ cb(null, uploadDir);
+ },
+ filename: function (_req, file, cb) {
+ const safeExt = path.extname(file.originalname || '').toLowerCase();
+ const stamp = `${Date.now()}-${crypto.randomUUID()}`;
+ cb(null, `${stamp}${safeExt}`);
+ }
+ });
+ return multer({ storage });
+ }
+
+ function normalizeUploadReference(uploadPath) {
+ const value = String(uploadPath || '').trim();
+ if (!value || !value.startsWith('/uploads/')) {
+ return null;
+ }
+ return value;
+ }
+
+ function collectUploadReferencesFromValue(value, refs) {
+ if (!value) {
+ return refs;
+ }
+ const stack = [value];
+ while (stack.length) {
+ const current = stack.pop();
+ if (Array.isArray(current)) {
+ current.forEach(function (item) {
+ stack.push(item);
+ });
+ continue;
+ }
+ if (current && typeof current === 'object') {
+ Object.keys(current).forEach(function (key) {
+ stack.push(current[key]);
+ });
+ continue;
+ }
+ if (typeof current === 'string') {
+ const reference = normalizeUploadReference(current);
+ if (reference) {
+ refs.add(reference);
+ }
+ }
+ }
+ return refs;
+ }
+
+ function collectUploadReferencesFromSlide(slide) {
+ const refs = new Set();
+ if (!slide) {
+ return refs;
+ }
+ collectUploadReferencesFromValue(slide.media_path, refs);
+ collectUploadReferencesFromValue(common.parseJsonSafe(slide.content_json), refs);
+ return refs;
+ }
+
+ function collectUploadReferencesFromTemplate(template) {
+ const refs = new Set();
+ if (!template) {
+ return refs;
+ }
+ collectUploadReferencesFromValue(template.background_image_path, refs);
+ return refs;
+ }
+
+ function collectUploadReferencesFromPayload(payload) {
+ const refs = new Set();
+ if (!payload) {
+ return refs;
+ }
+ collectUploadReferencesFromValue(payload.mediaPath, refs);
+ collectUploadReferencesFromValue(common.parseJsonSafe(payload.contentJson), refs);
+ collectUploadReferencesFromValue(payload.backgroundImagePath, refs);
+ return refs;
+ }
+
+ async function countUploadReferences(pool, uploadPath) {
+ const [slideRows] = await pool.query(
+ `SELECT COUNT(*) AS ref_count
+ FROM slides
+ WHERE media_path = ?
+ OR JSON_SEARCH(COALESCE(content_json, JSON_OBJECT()), 'one', ?) IS NOT NULL`,
+ [uploadPath, uploadPath]
+ );
+ const [templateRows] = await pool.query(
+ 'SELECT COUNT(*) AS ref_count FROM slide_templates WHERE background_image_path = ?',
+ [uploadPath]
+ );
+ return Number(slideRows[0].ref_count || 0) + Number(templateRows[0].ref_count || 0);
+ }
+
+ async function removeUnusedUploadFiles(pool, uploadDir, uploadPaths) {
+ const uniquePaths = Array.from(new Set((uploadPaths || []).map(normalizeUploadReference).filter(Boolean)));
+ for (let i = 0; i < uniquePaths.length; i += 1) {
+ const uploadPath = uniquePaths[i];
+ const referenceCount = await countUploadReferences(pool, uploadPath);
+ if (referenceCount > 0) {
+ continue;
+ }
+
+ const filePath = path.join(uploadDir, path.basename(uploadPath));
+ try {
+ await fs.promises.unlink(filePath);
+ } catch (error) {
+ if (error && error.code !== 'ENOENT') {
+ console.warn('Unable to remove unused upload file:', filePath, error);
+ }
+ }
+ queuePlayerUploadSync({
+ type: 'delete',
+ uploadPath: uploadPath,
+ uploadDir: uploadDir
+ });
+ }
+ }
+
+ async function getPlayerUploadSyncMode(localUploadDir) {
+ if (playerUploadSyncMode) {
+ return playerUploadSyncMode;
+ }
+ if (playerUploadSyncModePromise) {
+ return playerUploadSyncModePromise;
+ }
+
+ playerUploadSyncModePromise = (async function () {
+ try {
+ const response = await fetch(`${playerInternalBaseUrl}/api/uploads/config`, {
+ headers: {
+ Accept: 'application/json'
+ }
+ });
+ if (!response.ok) {
+ return null;
+ }
+ const data = await response.json();
+ const playerUploadDir = data && data.uploadDir ? normalizeUploadRoot(data.uploadDir) : null;
+ if (!playerUploadDir) {
+ return null;
+ }
+ return playerUploadDir === normalizeUploadRoot(localUploadDir) ? 'shared' : 'different';
+ } catch (_error) {
+ return null;
+ }
+ })().then(function (mode) {
+ if (mode) {
+ playerUploadSyncMode = mode;
+ }
+ playerUploadSyncModePromise = null;
+ return mode;
+ }, function () {
+ playerUploadSyncModePromise = null;
+ return null;
+ });
+
+ return playerUploadSyncModePromise;
+ }
+
+ async function shouldMirrorUploads(localUploadDir) {
+ return Boolean(localUploadDir);
+ }
+
+ function queuePlayerUploadSync(operation) {
+ if (!operation || !operation.uploadPath) {
+ return;
+ }
+
+ pendingPlayerUploadSyncs.set(normalizeUploadReference(operation.uploadPath), {
+ type: operation.type === 'delete' ? 'delete' : 'put',
+ uploadPath: normalizeUploadReference(operation.uploadPath),
+ uploadDir: operation.uploadDir || null
+ });
+
+ schedulePendingPlayerUploadSyncFlush();
+ }
+
+ function schedulePendingPlayerUploadSyncFlush() {
+ if (pendingPlayerUploadSyncFlushTimer) {
+ return;
+ }
+
+ pendingPlayerUploadSyncFlushTimer = setTimeout(function () {
+ pendingPlayerUploadSyncFlushTimer = null;
+ flushPendingPlayerUploadSyncs().catch(function (error) {
+ console.warn('Unable to flush pending upload syncs:', error);
+ });
+ }, 5000);
+ }
+
+ async function pushUploadFileToPlayer(uploadPath, localUploadDir) {
+ if (!uploadPath || !(await shouldMirrorUploads(localUploadDir))) {
+ return false;
+ }
+
+ const filename = path.basename(uploadPath);
+ const sourcePath = path.join(localUploadDir, filename);
+ let fileBuffer = null;
+ try {
+ fileBuffer = await fs.promises.readFile(sourcePath);
+ } catch (error) {
+ if (!error || error.code !== 'ENOENT') {
+ console.warn('Unable to read upload for player sync:', sourcePath, error);
+ }
+ return;
+ }
+
+ try {
+ const response = await fetch(`${playerInternalBaseUrl}/api/uploads/${encodeURIComponent(filename)}`, {
+ method: 'PUT',
+ headers: {
+ 'Content-Type': 'application/octet-stream'
+ },
+ body: fileBuffer
+ });
+ if (!response.ok) {
+ console.warn('Unable to sync upload to player:', filename, response.status, response.statusText);
+ return false;
+ }
+ return true;
+ } catch (error) {
+ console.warn('Unable to sync upload to player:', filename, error);
+ return false;
+ }
+ }
+
+ async function removeUploadFileFromPlayer(uploadPath, localUploadDir) {
+ if (!uploadPath || !(await shouldMirrorUploads(localUploadDir))) {
+ return false;
+ }
+
+ const filename = path.basename(uploadPath);
+ try {
+ const response = await fetch(`${playerInternalBaseUrl}/api/uploads/${encodeURIComponent(filename)}`, {
+ method: 'DELETE',
+ headers: {
+ Accept: 'application/json'
+ }
+ });
+ if (!response.ok && response.status !== 404) {
+ console.warn('Unable to remove upload from player:', filename, response.status, response.statusText);
+ return false;
+ }
+ return true;
+ } catch (error) {
+ console.warn('Unable to remove upload from player:', filename, error);
+ return false;
+ }
+ }
+
+ async function syncUploadRefsToPlayer(uploadRefs, localUploadDir) {
+ if (!(await shouldMirrorUploads(localUploadDir))) {
+ return;
+ }
+
+ const uniqueRefs = Array.from(new Set((uploadRefs || []).map(normalizeUploadReference).filter(Boolean)));
+ for (let i = 0; i < uniqueRefs.length; i += 1) {
+ const success = await pushUploadFileToPlayer(uniqueRefs[i], localUploadDir);
+ if (!success) {
+ queuePlayerUploadSync({
+ type: 'put',
+ uploadPath: uniqueRefs[i],
+ uploadDir: localUploadDir
+ });
+ }
+ }
+ }
+
+ async function syncExistingUploadsToPlayer(pool, localUploadDir) {
+ if (!(await shouldMirrorUploads(localUploadDir))) {
+ return;
+ }
+
+ const data = await common.fetchAdminData(pool);
+ const uploadRefs = new Set();
+ (data.slides || []).forEach(function (slide) {
+ collectUploadReferencesFromSlide(slide).forEach(function (reference) {
+ uploadRefs.add(reference);
+ });
+ });
+ (data.templates || []).forEach(function (template) {
+ collectUploadReferencesFromTemplate(template).forEach(function (reference) {
+ uploadRefs.add(reference);
+ });
+ });
+ Array.from(uploadRefs).forEach(function (uploadPath) {
+ queuePlayerUploadSync({
+ type: 'put',
+ uploadPath: uploadPath,
+ uploadDir: localUploadDir
+ });
+ });
+ await flushPendingPlayerUploadSyncs();
+ }
+
+ function getVisibleCurrentSlideIds() {
+ const visibleSlideIds = new Set();
+ playerSnapshotCache.forEach(function (snapshot) {
+ const connections = snapshot && Array.isArray(snapshot.connections) ? snapshot.connections : [];
+ connections.forEach(function (connection) {
+ const currentSlide = connection && connection.currentSlide && typeof connection.currentSlide === 'object'
+ ? connection.currentSlide
+ : null;
+ const slideId = currentSlide && currentSlide.id !== undefined && currentSlide.id !== null
+ ? String(currentSlide.id).trim()
+ : '';
+ if (slideId) {
+ visibleSlideIds.add(slideId);
+ }
+ });
+ });
+ return visibleSlideIds;
+ }
+
+ function isScreenRefreshBlocked(screenSlug, blockedSlideIds, screenSlideCounts) {
+ const slideIds = Array.isArray(blockedSlideIds)
+ ? blockedSlideIds.map(function (value) {
+ return String(value || '').trim();
+ }).filter(Boolean)
+ : [];
+ if (!slideIds.length) {
+ return false;
+ }
+ const normalizedScreenSlug = String(screenSlug || '').trim();
+ const slideCount = screenSlideCounts && Object.prototype.hasOwnProperty.call(screenSlideCounts, normalizedScreenSlug)
+ ? Number(screenSlideCounts[normalizedScreenSlug])
+ : null;
+ if (Number.isFinite(slideCount) && slideCount <= 1) {
+ return false;
+ }
+ const snapshot = playerSnapshotCache.get(String(screenSlug || '').trim());
+ const connections = snapshot && Array.isArray(snapshot.connections) ? snapshot.connections : [];
+ return connections.some(function (connection) {
+ const currentSlide = connection && connection.currentSlide && typeof connection.currentSlide === 'object'
+ ? connection.currentSlide
+ : null;
+ const currentSlideId = currentSlide && currentSlide.id !== undefined && currentSlide.id !== null
+ ? String(currentSlide.id).trim()
+ : '';
+ return currentSlideId && slideIds.includes(currentSlideId);
+ });
+ }
+
+ function splitRefreshScreenSlugsByVisibility(screenSlugs, blockedSlideIds, screenSlideCounts) {
+ const ready = [];
+ const blocked = [];
+ Array.from(new Set(Array.isArray(screenSlugs) ? screenSlugs : [])).forEach(function (screenSlug) {
+ const normalizedScreenSlug = String(screenSlug || '').trim();
+ if (!normalizedScreenSlug) {
+ return;
+ }
+ if (isScreenRefreshBlocked(normalizedScreenSlug, blockedSlideIds, screenSlideCounts)) {
+ blocked.push(normalizedScreenSlug);
+ } else {
+ ready.push(normalizedScreenSlug);
+ }
+ });
+ return { ready: ready, blocked: blocked };
+ }
+
+ function normalizePlaylistUploadSyncOperation(options) {
+ return {
+ key: String(options && options.key ? options.key : '').trim(),
+ pool: options && options.pool ? options.pool : null,
+ localUploadDir: options && options.localUploadDir ? options.localUploadDir : null,
+ previousUploadRefs: Array.from(new Set(options && options.previousUploadRefs ? options.previousUploadRefs : [])),
+ nextUploadRefs: Array.from(new Set(options && options.nextUploadRefs ? options.nextUploadRefs : [])),
+ blockedSlideIds: Array.from(new Set(options && options.blockedSlideIds ? options.blockedSlideIds : [])).map(function (value) {
+ return String(value || '').trim();
+ }).filter(Boolean),
+ refreshScreenSlugs: Array.from(new Set(options && options.refreshScreenSlugs ? options.refreshScreenSlugs : [])).map(function (value) {
+ return String(value || '').trim();
+ }).filter(Boolean)
+ ,
+ screenSlideCounts: options && options.screenSlideCounts && typeof options.screenSlideCounts === 'object'
+ ? options.screenSlideCounts
+ : {}
+ };
+ }
+
+ function queuePlaylistUploadSync(operation) {
+ if (!operation || !operation.key) {
+ return;
+ }
+ pendingPlaylistUploadSyncs.set(operation.key, normalizePlaylistUploadSyncOperation(operation));
+ schedulePendingPlaylistUploadSyncFlush();
+ }
+
+ function schedulePendingPlaylistUploadSyncFlush() {
+ if (pendingPlaylistUploadSyncFlushTimer) {
+ return;
+ }
+
+ pendingPlaylistUploadSyncFlushTimer = setTimeout(function () {
+ pendingPlaylistUploadSyncFlushTimer = null;
+ flushPendingPlaylistUploadSyncs().catch(function (error) {
+ console.warn('Unable to flush pending playlist upload syncs:', error);
+ });
+ }, 5000);
+ }
+
+ async function syncPlaylistUploadsOnChange(options) {
+ const operation = normalizePlaylistUploadSyncOperation(options);
+ if (!operation.key) {
+ return;
+ }
+
+ if (operation.previousUploadRefs.length) {
+ const nextUploadRefSet = new Set(operation.nextUploadRefs);
+ await removeUnusedUploadFiles(operation.pool, operation.localUploadDir, operation.previousUploadRefs.filter(function (reference) {
+ return !nextUploadRefSet.has(reference);
+ }));
+ }
+
+ if (operation.nextUploadRefs.length) {
+ await syncUploadRefsToPlayer(operation.nextUploadRefs, operation.localUploadDir);
+ }
+
+ if (operation.refreshScreenSlugs.length) {
+ const refreshTargets = splitRefreshScreenSlugsByVisibility(operation.refreshScreenSlugs, operation.blockedSlideIds, operation.screenSlideCounts);
+ if (refreshTargets.ready.length) {
+ await notifyPlayerScreens(refreshTargets.ready, 'refresh');
+ }
+ refreshTargets.blocked.forEach(function (screenSlug) {
+ queuePlaylistUploadSync({
+ key: operation.key + ':refresh:' + screenSlug,
+ blockedSlideIds: operation.blockedSlideIds,
+ refreshScreenSlugs: [screenSlug]
+ });
+ });
+ }
+ }
+
+ async function flushPendingPlaylistUploadSyncs() {
+ if (pendingPlaylistUploadSyncFlushInFlight) {
+ return pendingPlaylistUploadSyncFlushInFlight;
+ }
+
+ if (!pendingPlaylistUploadSyncs.size) {
+ return null;
+ }
+
+ pendingPlaylistUploadSyncFlushInFlight = (async function () {
+ const pendingEntries = Array.from(pendingPlaylistUploadSyncs.values());
+ for (let i = 0; i < pendingEntries.length; i += 1) {
+ const operation = pendingEntries[i];
+ const refreshTargets = splitRefreshScreenSlugsByVisibility(operation.refreshScreenSlugs, operation.blockedSlideIds, operation.screenSlideCounts);
+ if (!refreshTargets.ready.length) {
+ continue;
+ }
+
+ if (refreshTargets.ready.length) {
+ await notifyPlayerScreens(refreshTargets.ready, 'refresh');
+ }
+
+ pendingPlaylistUploadSyncs.delete(operation.key);
+ }
+ })().finally(function () {
+ pendingPlaylistUploadSyncFlushInFlight = null;
+ if (pendingPlaylistUploadSyncs.size) {
+ schedulePendingPlaylistUploadSyncFlush();
+ }
+ });
+
+ return pendingPlaylistUploadSyncFlushInFlight;
+ }
+
+ async function flushPendingPlayerUploadSyncs() {
+ if (pendingPlayerUploadSyncFlushInFlight) {
+ return pendingPlayerUploadSyncFlushInFlight;
+ }
+
+ if (!pendingPlayerUploadSyncs.size) {
+ return null;
+ }
+
+ pendingPlayerUploadSyncFlushInFlight = (async function () {
+ const pendingEntries = Array.from(pendingPlayerUploadSyncs.values());
+ for (let i = 0; i < pendingEntries.length; i += 1) {
+ const operation = pendingEntries[i];
+ let success = false;
+ if (operation.type === 'delete') {
+ success = await removeUploadFileFromPlayer(operation.uploadPath, operation.uploadDir);
+ } else {
+ success = await pushUploadFileToPlayer(operation.uploadPath, operation.uploadDir);
+ }
+ if (success) {
+ pendingPlayerUploadSyncs.delete(operation.uploadPath);
+ }
+ }
+ })().finally(function () {
+ pendingPlayerUploadSyncFlushInFlight = null;
+ if (pendingPlayerUploadSyncs.size) {
+ schedulePendingPlayerUploadSyncFlush();
+ }
+ });
+
+ return pendingPlayerUploadSyncFlushInFlight;
+ }
+
+ return {
+ createUploadMiddleware: createUploadMiddleware,
+ normalizeUploadReference: normalizeUploadReference,
+ collectUploadReferencesFromValue: collectUploadReferencesFromValue,
+ collectUploadReferencesFromSlide: collectUploadReferencesFromSlide,
+ collectUploadReferencesFromTemplate: collectUploadReferencesFromTemplate,
+ collectUploadReferencesFromPayload: collectUploadReferencesFromPayload,
+ countUploadReferences: countUploadReferences,
+ removeUnusedUploadFiles: removeUnusedUploadFiles,
+ getPlayerUploadSyncMode: getPlayerUploadSyncMode,
+ shouldMirrorUploads: shouldMirrorUploads,
+ queuePlayerUploadSync: queuePlayerUploadSync,
+ schedulePendingPlayerUploadSyncFlush: schedulePendingPlayerUploadSyncFlush,
+ pushUploadFileToPlayer: pushUploadFileToPlayer,
+ removeUploadFileFromPlayer: removeUploadFileFromPlayer,
+ syncUploadRefsToPlayer: syncUploadRefsToPlayer,
+ syncExistingUploadsToPlayer: syncExistingUploadsToPlayer,
+ getVisibleCurrentSlideIds: getVisibleCurrentSlideIds,
+ isScreenRefreshBlocked: isScreenRefreshBlocked,
+ splitRefreshScreenSlugsByVisibility: splitRefreshScreenSlugsByVisibility,
+ normalizePlaylistUploadSyncOperation: normalizePlaylistUploadSyncOperation,
+ queuePlaylistUploadSync: queuePlaylistUploadSync,
+ schedulePendingPlaylistUploadSyncFlush: schedulePendingPlaylistUploadSyncFlush,
+ syncPlaylistUploadsOnChange: syncPlaylistUploadsOnChange,
+ flushPendingPlaylistUploadSyncs: flushPendingPlaylistUploadSyncs,
+ flushPendingPlayerUploadSyncs: flushPendingPlayerUploadSyncs
+ };
+}
+
+module.exports = { createUploadSyncService };
\ No newline at end of file
diff --git a/src/web/view.js b/src/web/view.js
index 63332bb..41f83b4 100644
--- a/src/web/view.js
+++ b/src/web/view.js
@@ -39,6 +39,42 @@ Handlebars.registerHelper('userInitial', function (name, username) {
return value.charAt(0).toUpperCase();
});
+Handlebars.registerHelper('saveActionButtons', function (options) {
+ const hash = options && options.hash ? options.hash : {};
+ const formId = String(hash.formId || '').trim();
+ const saveLabel = String(hash.saveLabel || 'Save');
+ const saveButtonClass = String(hash.saveButtonClass || 'btn btn-success');
+ const saveActionName = String(hash.saveActionName || 'save_action');
+ const saveActionValue = String(hash.saveActionValue || 'save');
+ const closeLabel = String(hash.saveAndCloseLabel || 'Save and Close');
+ const closeValue = String(hash.saveAndCloseValue || 'close');
+ const newLabel = String(hash.saveAndNewLabel || 'Save and New');
+ const newValue = String(hash.saveAndNewValue || 'new');
+ const showSaveAndClose = hash.showSaveAndClose === undefined ? true : String(hash.showSaveAndClose).toLowerCase() !== 'false';
+ const showSaveAndNew = hash.showSaveAndNew === undefined ? true : String(hash.showSaveAndNew).toLowerCase() !== 'false';
+ const ariaLabel = String(hash.ariaLabel || 'Save actions');
+
+ if (!formId) {
+ return '';
+ }
+
+ const escape = Handlebars.escapeExpression;
+ const formAttr = ` form="${escape(formId)}"`;
+
+ return new Handlebars.SafeString([
+ '',
+ ``,
+ `',
+ '',
+ '
',
+ ].join(''));
+});
+
function loadTemplate(relativePath) {
const filePath = path.join(VIEWS_ROOT, relativePath);
const stat = fs.statSync(filePath);
diff --git a/src/web/views/account/password.hbs b/src/web/views/account/password.hbs
index 024271e..da4fafe 100644
--- a/src/web/views/account/password.hbs
+++ b/src/web/views/account/password.hbs
@@ -5,35 +5,57 @@