lzstealth/pulse-signage
1
0
Fork 0
Code Issues Pull Requests Actions Packages Activity

Release v2.5.6

Browse Source
This commit is contained in:
lzstealth
2026-08-05 19:38:16 +01:00
parent a8ef35b287
commit 9f831f04bc
161 changed files with 8487 additions and 1295 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/web/public/js/admin/admin-page.js
+129 -6
View File
@@ -157,10 +157,14 @@
return Boolean(form && form.dataset && form.dataset.dirty === 'true');
}
function isRegionEditorField(target) {
return Boolean(target && typeof target.closest === 'function' && target.closest('.region-item'));
}
function initDirtyTracking() {
document.addEventListener('input', function (event) {
var target = event.target;
if (!target || !target.form) {
if (!target || !target.form || isRegionEditorField(target)) {
return;
}
markFormDirty(target.form);
@@ -168,13 +172,101 @@
document.addEventListener('change', function (event) {
var target = event.target;
if (!target || !target.form) {
if (!target || !target.form || isRegionEditorField(target)) {
return;
}
markFormDirty(target.form);
}, true);
}
function clampLimitedInputValue(input) {
if (!input || !input.matches || !input.matches('input[data-limit-input-value]')) {
return;
}
var minAttr = input.getAttribute('min');
var maxAttr = input.getAttribute('max');
var minValue = minAttr === null || minAttr === '' ? null : Number(minAttr);
var maxValue = maxAttr === null || maxAttr === '' ? null : Number(maxAttr);
var rawValue = String(input.value || '').trim();
if (!rawValue) {
return;
}
var numericValue = Number(rawValue);
if (!Number.isFinite(numericValue)) {
return;
}
if (Number.isFinite(minValue) && numericValue < minValue) {
input.value = String(minValue);
return;
}
if (Number.isFinite(maxValue) && numericValue > maxValue) {
input.value = String(maxValue);
}
}
function initLimitedInputValues() {
document.addEventListener('input', function (event) {
clampLimitedInputValue(event.target);
}, true);
document.addEventListener('change', function (event) {
clampLimitedInputValue(event.target);
}, true);
document.addEventListener('paste', function (event) {
var target = event.target;
if (!target || !target.matches || !target.matches('input[data-limit-input-value]')) {
return;
}
window.setTimeout(function () {
clampLimitedInputValue(target);
}, 0);
}, true);
}
function clampLimitedTextValue(input) {
if (!input || !input.matches || !input.matches('input[data-limit-text-length], textarea[data-limit-text-length]')) {
return;
}
var maxLength = Number(input.getAttribute('maxlength'));
if (!Number.isFinite(maxLength) || maxLength < 1) {
return;
}
var value = String(input.value || '');
if (value.length > maxLength) {
input.value = value.slice(0, maxLength);
}
}
function initLimitedTextInputValues() {
document.addEventListener('input', function (event) {
clampLimitedTextValue(event.target);
}, true);
document.addEventListener('change', function (event) {
clampLimitedTextValue(event.target);
}, true);
document.addEventListener('paste', function (event) {
var target = event.target;
if (!target || !target.matches || !target.matches('input[data-limit-text-length], textarea[data-limit-text-length]')) {
return;
}
window.setTimeout(function () {
clampLimitedTextValue(target);
}, 0);
}, true);
}
function initCancelConfirm() {
document.addEventListener('click', function (event) {
var cancelTarget = event.target.closest('[data-confirm-unsaved]');
@@ -219,6 +311,15 @@
return String(responseText || '').trim();
}
function isWarningSaveError(error) {
var status = Number(error && error.status);
if (status === 400 || status === 422) {
return true;
}
return /region names must be unique/i.test(String(error && error.message || ''));
}
function getAsyncSaveActionField(form) {
if (!form || !form.querySelector) {
return null;
@@ -312,7 +413,9 @@
if (!response.ok) {
var responseText = await response.text();
throw new Error(parseAsyncSaveErrorMessage(responseText) || (settings.errorMessage || 'Unable to save changes.'));
var error = new Error(parseAsyncSaveErrorMessage(responseText) || (settings.errorMessage || 'Unable to save changes.'));
error.status = response.status;
throw error;
}
if (isLoginRedirect(response)) {
@@ -363,11 +466,25 @@
})
: parseAsyncSaveResponseMessage(responseText);
showToast(successMessage || String(settings.fallbackSuccessMessage || 'Saved.'), 'success');
var resolvedSuccessMessage = successMessage || String(settings.fallbackSuccessMessage || 'Saved.');
if (form.dataset && form.dataset.asyncSaveRefreshPage === 'true') {
if (typeof window.queueToastAfterRefresh === 'function') {
window.queueToastAfterRefresh(resolvedSuccessMessage, 'success');
} else if (typeof showToast === 'function') {
showToast(resolvedSuccessMessage, 'success');
}
window.setTimeout(function () {
window.location.reload();
}, 1000);
return true;
}
showToast(resolvedSuccessMessage, 'success');
return true;
} catch (error) {
if (typeof showToast === 'function') {
var variant = Number(error && error.status) >= 400 && Number(error && error.status) < 500 ? 'warning' : 'danger';
var variant = isWarningSaveError(error) ? 'warning' : 'danger';
showToast(error && error.message ? error.message : (settings.errorMessage || 'Unable to save changes.'), variant);
} else {
window.alert(error && error.message ? error.message : (settings.errorMessage || 'Unable to save changes.'));
@@ -822,7 +939,7 @@
return;
}
element.textContent = formatDashboardDate(date);
element.textContent = formatDashboardDate(date, element.getAttribute('data-local-datetime-format') === '24h');
});
}
@@ -862,6 +979,8 @@
initConfirmForms();
initDeleteButtons();
initDirtyTracking();
initLimitedInputValues();
initLimitedTextInputValues();
initCancelConfirm();
initAsyncCommandForms();
initAsyncSaveForms();
@@ -872,6 +991,10 @@
attachSlideThumbFallbacks(document);
window.initJsonTogglePanels = initJsonTogglePanels;
window.initLocalDateTimes = initLocalDateTimes;
window.clampLimitedInputValue = clampLimitedInputValue;
window.initLimitedInputValues = initLimitedInputValues;
window.clampLimitedTextValue = clampLimitedTextValue;
window.initLimitedTextInputValues = initLimitedTextInputValues;
window.createSlideThumbPlaceholder = createSlideThumbPlaceholder;
window.attachSlideThumbFallbacks = attachSlideThumbFallbacks;
}());
src/web/public/js/announcements/announcement-form.js
+199 -15
View File
@@ -18,21 +18,127 @@ function updateAnnouncementDurationFields() {
}
}
function updateAnnouncementColorPreview() {
var colorSelect = document.getElementById('announcement-color');
var preview = document.querySelector('[data-announcement-color-preview]');
if (!colorSelect || !preview) {
function updateAnnouncementColorPickerSelection() {
var colorInput = document.getElementById('announcement-color');
var picker = document.querySelector('[data-announcement-color-picker-shell]');
if (!colorInput || !picker) {
return;
}
var selectedOption = colorSelect.options[colorSelect.selectedIndex] || null;
var colorKey = String(colorSelect.value || '').trim().toLowerCase() || 'primary';
var label = selectedOption ? String(selectedOption.textContent || selectedOption.label || colorKey).trim() : colorKey;
var selectedValue = String(colorInput.value || '').trim().toLowerCase() || 'primary';
picker.querySelectorAll('[data-announcement-color-option]').forEach(function (button) {
var isSelected = String(button.getAttribute('data-color-key') || '').trim().toLowerCase() === selectedValue;
button.classList.toggle('is-selected', isSelected);
button.setAttribute('aria-pressed', isSelected ? 'true' : 'false');
});
}
preview.className = 'announcement-color-preview text-bg-' + colorKey;
preview.setAttribute('aria-label', label);
preview.setAttribute('title', label);
preview.textContent = '';
function setAnnouncementScreenSelection(isSelected) {
document.querySelectorAll('input[name="screen_ids[]"]').forEach(function (input) {
input.checked = isSelected;
});
}
function positionAnnouncementTypePicker() {
var picker = document.querySelector('[data-announcement-type-picker]');
var toggle = document.querySelector('[data-announcement-type-picker-toggle]');
var shell = document.querySelector('[data-announcement-type-picker-shell]');
if (!picker || picker.hidden || !toggle || !shell) {
return;
}
var padding = 8;
var toggleRect = toggle.getBoundingClientRect();
var menuRect = picker.getBoundingClientRect();
var viewportHeight = window.innerHeight || document.documentElement.clientHeight || toggleRect.bottom;
var placementAbove = false;
var spaceBelow = viewportHeight - toggleRect.bottom - padding;
var spaceAbove = toggleRect.top - padding;
if (menuRect.height > spaceBelow && spaceAbove > spaceBelow) {
placementAbove = true;
}
picker.classList.toggle('is-open-above', placementAbove);
}
function closeAnnouncementTypePicker() {
var picker = document.querySelector('[data-announcement-type-picker]');
var toggle = document.querySelector('[data-announcement-type-picker-toggle]');
if (!picker) {
return;
}
picker.hidden = true;
picker.classList.remove('is-open-above');
if (toggle) {
toggle.setAttribute('aria-expanded', 'false');
}
}
function openAnnouncementTypePicker() {
var picker = document.querySelector('[data-announcement-type-picker]');
var toggle = document.querySelector('[data-announcement-type-picker-toggle]');
if (!picker) {
return;
}
picker.hidden = false;
if (toggle) {
toggle.setAttribute('aria-expanded', 'true');
}
if (typeof window !== 'undefined' && window.requestAnimationFrame) {
window.requestAnimationFrame(positionAnnouncementTypePicker);
} else {
positionAnnouncementTypePicker();
}
}
function updateAnnouncementTypePickerSelection() {
var typeInput = document.getElementById('announcement-type');
var previewButton = document.querySelector('[data-announcement-type-picker-toggle]');
var picker = document.querySelector('[data-announcement-type-picker]');
if (!typeInput || !previewButton || !picker) {
return;
}
var selectedValue = String(typeInput.value || '').trim().toLowerCase();
var selectedOption = picker.querySelector('[data-announcement-type-option][data-type-key="' + selectedValue + '"]');
var label = selectedOption ? String(selectedOption.getAttribute('data-type-label') || selectedOption.textContent || selectedValue).trim() : selectedValue;
var iconKey = selectedOption ? String(selectedOption.getAttribute('data-type-icon') || '').trim().toLowerCase() : '';
var icon = previewButton.querySelector('[data-announcement-type-picker-icon]');
var text = previewButton.querySelector('[data-announcement-type-picker-label]');
previewButton.setAttribute('aria-label', label);
previewButton.setAttribute('title', label);
if (icon) {
icon.className = 'bi bi-' + iconKey;
}
if (text) {
text.textContent = label;
}
picker.querySelectorAll('[data-announcement-type-option]').forEach(function (button) {
var isSelected = String(button.getAttribute('data-type-key') || '').trim().toLowerCase() === selectedValue;
button.classList.toggle('is-selected', isSelected);
button.setAttribute('aria-pressed', isSelected ? 'true' : 'false');
});
}
function setAnnouncementTypeValue(typeKey) {
var typeInput = document.getElementById('announcement-type');
if (!typeInput) {
return;
}
var normalized = String(typeKey || '').trim().toLowerCase();
if (!normalized) {
return;
}
typeInput.value = normalized;
updateAnnouncementTypePickerSelection();
}
function updateAnnouncementIconPreview() {
@@ -155,21 +261,90 @@ function setAnnouncementIconValue(iconKey) {
}
function initAnnouncementForm() {
var typeInput = document.getElementById('announcement-type');
var typePickerToggle = document.querySelector('[data-announcement-type-picker-toggle]');
var typePicker = document.querySelector('[data-announcement-type-picker]');
var typePickerClose = document.querySelector('[data-announcement-type-picker-close]');
var modeSelect = document.getElementById('announcement-duration-mode');
var colorSelect = document.getElementById('announcement-color');
var colorInput = document.getElementById('announcement-color');
var colorPicker = document.querySelector('[data-announcement-color-picker-shell]');
var screenSelectAll = document.querySelector('[data-announcement-screen-select-all]');
var screenSelectNone = document.querySelector('[data-announcement-screen-select-none]');
var iconSelect = document.getElementById('announcement-icon');
var iconPickerToggle = document.querySelector('[data-announcement-icon-picker-toggle]');
var iconPicker = document.querySelector('[data-announcement-icon-picker]');
var iconPickerClose = document.querySelector('[data-announcement-icon-picker-close]');
if (typeInput) {
updateAnnouncementTypePickerSelection();
}
if (typePickerToggle) {
typePickerToggle.addEventListener('click', function (event) {
event.preventDefault();
var isExpanded = typePicker && !typePicker.hidden;
if (isExpanded) {
closeAnnouncementTypePicker();
} else {
openAnnouncementTypePicker();
}
});
}
if (typePickerClose) {
typePickerClose.addEventListener('click', function (event) {
event.preventDefault();
closeAnnouncementTypePicker();
});
}
if (typePicker) {
typePicker.addEventListener('click', function (event) {
var button = event.target && event.target.closest ? event.target.closest('[data-announcement-type-option]') : null;
if (!button) {
return;
}
event.preventDefault();
setAnnouncementTypeValue(button.getAttribute('data-type-key'));
closeAnnouncementTypePicker();
});
}
if (modeSelect) {
modeSelect.addEventListener('change', updateAnnouncementDurationFields);
updateAnnouncementDurationFields();
}
if (colorSelect) {
colorSelect.addEventListener('change', updateAnnouncementColorPreview);
updateAnnouncementColorPreview();
if (colorInput) {
updateAnnouncementColorPickerSelection();
}
if (colorPicker) {
colorPicker.addEventListener('click', function (event) {
var button = event.target && event.target.closest ? event.target.closest('[data-announcement-color-option]') : null;
if (!button) {
return;
}
event.preventDefault();
colorInput.value = String(button.getAttribute('data-color-key') || '').trim().toLowerCase();
updateAnnouncementColorPickerSelection();
});
}
if (screenSelectAll) {
screenSelectAll.addEventListener('click', function (event) {
event.preventDefault();
setAnnouncementScreenSelection(true);
});
}
if (screenSelectNone) {
screenSelectNone.addEventListener('click', function (event) {
event.preventDefault();
setAnnouncementScreenSelection(false);
});
}
if (iconSelect) {
@@ -210,8 +385,17 @@ function initAnnouncementForm() {
}
window.addEventListener('resize', positionAnnouncementIconPicker);
window.addEventListener('resize', positionAnnouncementTypePicker);
document.addEventListener('click', function (event) {
var typePickerNode = document.querySelector('[data-announcement-type-picker]');
var typeToggleNode = document.querySelector('[data-announcement-type-picker-toggle]');
if (typePickerNode && !typePickerNode.hidden) {
if (!(typePickerNode.contains(event.target) || (typeToggleNode && typeToggleNode.contains(event.target)))) {
closeAnnouncementTypePicker();
}
}
var picker = document.querySelector('[data-announcement-icon-picker]');
var toggle = document.querySelector('[data-announcement-icon-picker-toggle]');
if (!picker || picker.hidden) {
src/web/public/js/data-sources/timetable-group-form.js
+6
View File
@@ -10,6 +10,10 @@
return;
}
function markDirty() {
form.dataset.dirty = 'true';
}
function pad(value) {
return String(value).padStart(2, '0');
}
@@ -95,6 +99,7 @@
}
button.addEventListener('click', function () {
row.remove();
markDirty();
});
}
@@ -106,6 +111,7 @@
}
bindRemove(row);
body.appendChild(fragment);
markDirty();
}
body.querySelectorAll('[data-timetable-entry-row]').forEach(function (row) {
src/web/public/js/playlists/playlist-schedule.js
+590 -40
View File
@@ -197,6 +197,341 @@
}).join('');
}
function parseLocalDate(value) {
var date = new Date(String(value || '').trim());
if (Number.isNaN(date.getTime())) {
return null;
}
return new Date(date.getFullYear(), date.getMonth(), date.getDate());
}
function isDayInDateRange(startDatetime, endDatetime, dayIndex) {
var startDate = parseLocalDate(startDatetime);
var endDate = parseLocalDate(endDatetime);
var currentDate;
if (!startDate || !endDate) {
return false;
}
for (currentDate = new Date(startDate.getTime()); currentDate.getTime() <= endDate.getTime(); currentDate.setDate(currentDate.getDate() + 1)) {
if (currentDate.getDay() === Number(dayIndex)) {
return true;
}
}
return false;
}
function getTimeParts(value) {
var match = String(value || '').trim().match(/^(\d{2}):(\d{2})(?::\d{2})?$/);
if (!match) {
return null;
}
return {
hours: Number(match[1]),
minutes: Number(match[2])
};
}
function combineDateAndTime(baseDate, timeValue) {
var timeParts = getTimeParts(timeValue);
if (!baseDate || !timeParts) {
return null;
}
return new Date(
baseDate.getFullYear(),
baseDate.getMonth(),
baseDate.getDate(),
timeParts.hours,
timeParts.minutes,
0,
0
);
}
function hasScheduleRuleOverlap(startDatetime, endDatetime, startTime, endTime, selectedDays) {
var startDateTime = new Date(String(startDatetime || '').trim());
var endDateTime = new Date(String(endDatetime || '').trim());
var startDate = parseLocalDate(startDatetime);
var endDate = parseLocalDate(endDatetime);
var allowedDays = Array.isArray(selectedDays) && selectedDays.length ? selectedDays : [0, 1, 2, 3, 4, 5, 6];
var currentDate;
if (!startDate || !endDate || Number.isNaN(startDateTime.getTime()) || Number.isNaN(endDateTime.getTime())) {
return false;
}
for (currentDate = new Date(startDate.getTime()); currentDate.getTime() <= endDate.getTime(); currentDate.setDate(currentDate.getDate() + 1)) {
if (allowedDays.indexOf(currentDate.getDay()) === -1) {
continue;
}
var dayStart = combineDateAndTime(currentDate, startTime);
var dayEnd = combineDateAndTime(currentDate, endTime);
if (!dayStart || !dayEnd) {
continue;
}
if (dayEnd >= startDateTime && dayStart <= endDateTime) {
return true;
}
}
return false;
}
function getDateRangeDayIndices(startDatetime, endDatetime) {
var startDate = parseLocalDate(startDatetime);
var endDate = parseLocalDate(endDatetime);
var dayIndices = [];
var currentDate;
if (!startDate || !endDate) {
return dayIndices;
}
for (currentDate = new Date(startDate.getTime()); currentDate.getTime() <= endDate.getTime(); currentDate.setDate(currentDate.getDate() + 1)) {
if (dayIndices.indexOf(currentDate.getDay()) === -1) {
dayIndices.push(currentDate.getDay());
}
}
return dayIndices;
}
function setDayInputError(card, dayInput, message) {
var dayInputs = card ? Array.prototype.slice.call(card.querySelectorAll('[data-schedule-rule-day]')) : [];
var dayLabels = card ? Array.prototype.slice.call(card.querySelectorAll('.schedule-day-button')) : [];
var feedbackNode = card ? card.querySelector('[data-schedule-rule-feedback]') : null;
var dayIndex = dayInputs.indexOf(dayInput);
if (dayInput) {
dayInput.setCustomValidity(message);
dayInput.classList.add('is-invalid');
dayInput.setAttribute('aria-invalid', 'true');
}
if (dayIndex !== -1 && dayLabels[dayIndex]) {
dayLabels[dayIndex].classList.add('is-invalid');
dayLabels[dayIndex].setAttribute('aria-invalid', 'true');
}
if (feedbackNode) {
var messageNode = document.createElement('div');
messageNode.textContent = message;
feedbackNode.appendChild(messageNode);
feedbackNode.hidden = false;
}
}
function appendRuleFeedbackMessage(card, message) {
var feedbackNode = card ? card.querySelector('[data-schedule-rule-feedback]') : null;
if (!feedbackNode) {
return;
}
var messageNode = document.createElement('div');
messageNode.textContent = message;
feedbackNode.appendChild(messageNode);
feedbackNode.hidden = false;
}
function validateScheduleRuleCard(card) {
var fields = getRuleFields(card);
var dayInputs = Array.prototype.slice.call(fields.days || []);
var dayLabels = getRuleDayLabels(card);
var checkedDayInputs = dayInputs.filter(function (input) {
return Boolean(input && input.checked);
});
var checkedDayIndices = checkedDayInputs.map(function (input) {
return Number(input && input.value);
});
var startDatetime = String(fields.startDatetime && fields.startDatetime.value || '').trim();
var endDatetime = String(fields.endDatetime && fields.endDatetime.value || '').trim();
var startTime = String(fields.startTime && fields.startTime.value || '').trim();
var endTime = String(fields.endTime && fields.endTime.value || '').trim();
clearRuleValidity(card);
if ((startDatetime || endDatetime) && (!startDatetime || !endDatetime)) {
setRuleError(!startDatetime ? fields.startDatetime : fields.endDatetime, 'Start and end datetimes must both be set for this rule.');
return false;
}
if ((startTime || endTime) && (!startTime || !endTime)) {
setRuleError(!startTime ? fields.startTime : fields.endTime, 'Start and end times must both be set for this rule.');
return false;
}
if (startDatetime && endDatetime && new Date(endDatetime) <= new Date(startDatetime)) {
setRuleError(fields.endDatetime, 'End datetime must be after start datetime.');
return false;
}
if (startTime && endTime && endTime <= startTime) {
setRuleError(fields.endTime, 'End time must be after start time.');
if (fields.startTime) {
fields.startTime.classList.add('is-invalid');
fields.startTime.setAttribute('aria-invalid', 'true');
}
return false;
}
if (startDatetime && endDatetime) {
var dateRangeDayIndices = getDateRangeDayIndices(startDatetime, endDatetime);
var dayIndicesToCheck = checkedDayIndices.length ? checkedDayIndices : [0, 1, 2, 3, 4, 5, 6];
var invalidDayInputs = checkedDayInputs.filter(function (input) {
return dateRangeDayIndices.indexOf(Number(input && input.value)) === -1;
});
invalidDayInputs.forEach(function (input) {
var dayIndex = dayInputs.indexOf(input);
if (dayIndex !== -1 && dayLabels[dayIndex]) {
dayLabels[dayIndex].classList.add('is-invalid');
dayLabels[dayIndex].setAttribute('aria-invalid', 'true');
}
});
if (checkedDayInputs.length && invalidDayInputs.length === checkedDayInputs.length) {
setDayInputError(card, invalidDayInputs[0] || checkedDayInputs[0] || dayInputs[0], 'Selected days must overlap the date range.');
return false;
}
if (startTime && endTime && !hasScheduleRuleOverlap(startDatetime, endDatetime, startTime, endTime, dayIndicesToCheck)) {
setRuleError(fields.endTime, 'Start and end times must overlap the date range.');
if (fields.startTime) {
fields.startTime.classList.add('is-invalid');
fields.startTime.setAttribute('aria-invalid', 'true');
}
return false;
}
}
return true;
}
function getScheduleRuleValidationIssue(card) {
var fields = getRuleFields(card);
var dayInputs = Array.prototype.slice.call(fields.days || []);
var checkedDayInputs = dayInputs.filter(function (input) {
return Boolean(input && input.checked);
});
var checkedDayIndices = checkedDayInputs.map(function (input) {
return Number(input && input.value);
});
var startDatetime = String(fields.startDatetime && fields.startDatetime.value || '').trim();
var endDatetime = String(fields.endDatetime && fields.endDatetime.value || '').trim();
var startTime = String(fields.startTime && fields.startTime.value || '').trim();
var endTime = String(fields.endTime && fields.endTime.value || '').trim();
if (startDatetime || endDatetime) {
if (!startDatetime || !endDatetime) {
return {
type: 'datetime-pair',
target: !startDatetime ? fields.startDatetime : fields.endDatetime,
message: 'Start and end datetimes must both be set for this rule.'
};
}
}
if (startTime || endTime) {
if (!startTime || !endTime) {
return {
type: 'time-pair',
target: !startTime ? fields.startTime : fields.endTime,
message: 'Start and end times must both be set for this rule.'
};
}
}
if (startDatetime && endDatetime && new Date(endDatetime) <= new Date(startDatetime)) {
return {
type: 'datetime-order',
target: fields.endDatetime,
message: 'End datetime must be after start datetime.'
};
}
if (startTime && endTime && endTime <= startTime) {
return {
type: 'time-order',
target: fields.endTime,
message: 'End time must be after start time.'
};
}
if (startDatetime && endDatetime) {
var dateRangeDayIndices = getDateRangeDayIndices(startDatetime, endDatetime);
var dayIndicesToCheck = checkedDayIndices.length ? checkedDayIndices : [0, 1, 2, 3, 4, 5, 6];
var invalidDayInputs = checkedDayInputs.filter(function (input) {
return dateRangeDayIndices.indexOf(Number(input && input.value)) === -1;
});
if (checkedDayInputs.length && invalidDayInputs.length === checkedDayInputs.length) {
return {
type: 'day-overlap',
target: checkedDayInputs[0] || dayInputs[0] || fields.endDatetime,
message: 'Selected days must overlap the date range.'
};
}
if (startTime && endTime && !hasScheduleRuleOverlap(startDatetime, endDatetime, startTime, endTime, dayIndicesToCheck)) {
return {
type: 'time-overlap',
target: fields.endTime,
secondaryTarget: fields.startTime,
message: 'Start and end times must overlap the date range.'
};
}
}
return null;
}
function applyScheduleRuleValidationIssue(card, issue) {
var fields = getRuleFields(card);
var dayLabels = getRuleDayLabels(card);
clearRuleValidity(card);
if (!issue) {
return true;
}
if (issue.type === 'time-overlap') {
setRuleError(issue.target || fields.endTime, issue.message);
if (issue.secondaryTarget) {
issue.secondaryTarget.classList.add('is-invalid');
issue.secondaryTarget.setAttribute('aria-invalid', 'true');
}
return false;
}
if (issue.type === 'day-overlap') {
var dayInputs = Array.prototype.slice.call(fields.days || []);
var dayIndex = dayInputs.indexOf(issue.target);
setRuleError(issue.target, issue.message);
if (dayIndex !== -1 && dayLabels[dayIndex]) {
dayLabels[dayIndex].classList.add('is-invalid');
dayLabels[dayIndex].setAttribute('aria-invalid', 'true');
}
return false;
}
setRuleError(issue.target, issue.message);
return false;
}
// Video duration helpers.
function getVideoDurationButtonLabel(isPressed) {
return isPressed ? 'Disable use video duration' : 'Use video duration';
@@ -213,7 +548,7 @@
return '';
}
return '<button type="button" class="btn btn-outline-info btn-sm playlist-use-video-duration' + (isPressed ? ' active' : '') + '" data-use-video-duration-button aria-pressed="' + (isPressed ? 'true' : 'false') + '" aria-label="' + getVideoDurationButtonLabel(isPressed) + '" title="' + getVideoDurationButtonLabel(isPressed) + '">' + buildVideoDurationButtonContent(isPressed) + '</button>';
return '<button type="button" class="btn ' + (isPressed ? 'btn-info' : 'btn-outline-info') + ' btn-sm playlist-use-video-duration" data-use-video-duration-button aria-pressed="' + (isPressed ? 'true' : 'false') + '" aria-label="' + getVideoDurationButtonLabel(isPressed) + '" title="' + getVideoDurationButtonLabel(isPressed) + '">' + buildVideoDurationButtonContent(isPressed) + '</button>';
}
function getDisableAudioButtonLabel(isPressed) {
@@ -241,7 +576,6 @@
button.classList.toggle('btn-outline-secondary', Boolean(isPressed));
button.classList.toggle('btn-secondary', !Boolean(isPressed));
button.classList.toggle('active', !Boolean(isPressed));
button.setAttribute('aria-pressed', isPressed ? 'true' : 'false');
button.setAttribute('aria-label', getDisableAudioButtonLabel(isPressed));
button.setAttribute('title', getDisableAudioButtonLabel(isPressed));
@@ -253,7 +587,8 @@
return;
}
button.classList.toggle('active', Boolean(isPressed));
button.classList.toggle('btn-outline-info', !Boolean(isPressed));
button.classList.toggle('btn-info', Boolean(isPressed));
button.setAttribute('aria-pressed', isPressed ? 'true' : 'false');
button.setAttribute('aria-label', getVideoDurationButtonLabel(isPressed));
button.setAttribute('title', getVideoDurationButtonLabel(isPressed));
@@ -382,7 +717,11 @@
return '' +
'<td class="playlist-order-cell" data-label="Order">' +
'<div class="playlist-order-cell-inner">' +
'<button type="button" class="playlist-drag-handle btn btn-link p-0 text-body-secondary" data-playlist-drag-handle aria-label="Drag to reorder" title="Drag to reorder"><span class="playlist-drag-handle-icon" aria-hidden="true"><svg class="playlist-drag-handle-svg" viewBox="0 0 24 32" focusable="false" aria-hidden="true"><polygon points="12,2 20,9 4,9"></polygon><rect x="4" y="14" width="16" height="4" rx="2"></rect><polygon points="4,23 20,23 12,30"></polygon></svg></span></button>' +
'<div class="playlist-order-stepper" aria-label="Reorder slide controls">' +
'<button type="button" class="playlist-order-move playlist-order-move-up btn btn-link p-0 text-body-secondary" data-playlist-row-move="up" aria-label="Move slide up" title="Move slide up"><i class="bi bi-caret-up-fill" aria-hidden="true" data-playlist-row-move-icon="up"></i></button>' +
'<button type="button" class="playlist-drag-handle btn btn-link p-0 text-body-secondary" data-playlist-drag-handle aria-label="Drag to reorder" title="Drag to reorder"><span class="playlist-drag-handle-icon" aria-hidden="true"><i class="bi bi-grip-horizontal"></i></span></button>' +
'<button type="button" class="playlist-order-move playlist-order-move-down btn btn-link p-0 text-body-secondary" data-playlist-row-move="down" aria-label="Move slide down" title="Move slide down"><i class="bi bi-caret-down-fill" aria-hidden="true" data-playlist-row-move-icon="down"></i></button>' +
'</div>' +
'<span class="playlist-order-number"></span>' +
'</div>' +
'</td>';
@@ -412,8 +751,11 @@
function buildPlaylistDurationCellMarkup(values, durationActionMarkup) {
return '' +
'<td data-label="Config"><div class="playlist-duration-field">' +
'<input name="duration_seconds[]" type="text" inputmode="decimal" value="' + values.duration_seconds + '" required form="playlist-edit-form" class="form-control form-control-sm playlist-duration-input text-end"' + (values.useVideoDuration ? ' disabled' : '') + ' />' +
'<td data-label="Playback"><div class="playlist-duration-field">' +
'<div class="input-group input-group-sm flex-nowrap playlist-duration-input-group">' +
'<span class="input-group-text playlist-duration-prefix text-body-secondary" aria-hidden="true"><i class="bi bi-clock"></i></span>' +
'<input name="duration_seconds[]" type="text" inputmode="decimal" min="1" value="' + values.duration_seconds + '" required form="playlist-edit-form" class="form-control form-control-sm playlist-duration-input text-end" data-limit-input-value' + (values.useVideoDuration ? ' disabled' : '') + ' />' +
'</div>' +
'<input type="hidden" name="use_video_duration[]" value="' + (values.useVideoDuration ? '1' : '0') + '" form="playlist-edit-form" />' +
'<input type="hidden" name="disable_audio[]" value="' + (values.disableAudio ? '1' : '0') + '" form="playlist-edit-form" data-playlist-disable-audio-input />' +
(values.useVideoDuration ? '<input type="hidden" name="duration_seconds[]" value="' + values.duration_seconds + '" form="playlist-edit-form" data-video-duration-mirror />' : '') +
@@ -586,8 +928,7 @@
'<div class="d-flex align-items-center gap-4 ms-auto flex-shrink-0">' +
'<button type="button" class="btn btn-sm btn-outline-danger" data-remove-schedule-rule data-confirm-message="Remove this rule?">Remove</button>' +
'<button type="button" class="btn btn-tool p-0 text-body-secondary" data-lte-toggle="card-collapse" aria-label="Collapse rule ' + String(ruleIndex) + '" title="Collapse rule ' + String(ruleIndex) + '">' +
'<i class="bi bi-dash-lg" aria-hidden="true" data-lte-icon="collapse"></i>' +
'<i class="bi bi-plus-lg" aria-hidden="true" data-lte-icon="expand"></i>' +
'<i class="bi ' + (isCollapsed ? 'bi-plus-lg' : 'bi-dash-lg') + '" aria-hidden="true" data-schedule-rule-collapse-icon></i>' +
'<span class="visually-hidden">Collapse rule ' + String(ruleIndex) + '</span>' +
'</button>' +
'</div>' +
@@ -614,11 +955,14 @@
'</div>' +
'<div class="col-12">' +
'<div class="btn-group btn-group-sm w-100 schedule-day-grid" role="group" aria-label="Schedule days">' + DAY_NAMES.map(function (label, dayIndex) {
return '<input class="btn-check" type="checkbox" id="schedule-rule-' + String(ruleIndex) + '-day-' + String(dayIndex) + '" value="' + String(dayIndex) + '" autocomplete="off"' + (selectedDays.has(dayIndex) ? ' checked' : '') + ' data-schedule-rule-day />' +
'<label class="btn btn-outline-primary flex-fill schedule-day-button" for="schedule-rule-' + String(ruleIndex) + '-day-' + String(dayIndex) + '">' + label + '</label>';
return '<span class="schedule-day-option">' +
'<input class="btn-check" type="checkbox" id="schedule-rule-' + String(ruleIndex) + '-day-' + String(dayIndex) + '" value="' + String(dayIndex) + '" autocomplete="off"' + (selectedDays.has(dayIndex) ? ' checked' : '') + ' data-schedule-rule-day />' +
'<label class="btn btn-outline-primary flex-fill schedule-day-button" for="schedule-rule-' + String(ruleIndex) + '-day-' + String(dayIndex) + '">' + label + '</label>' +
'</span>';
}).join('') + '</div>' +
'</div>' +
'</div>' +
'<div class="invalid-feedback d-block mt-2" data-schedule-rule-feedback aria-live="polite" hidden></div>' +
'</div>' +
'</div>';
}
@@ -779,13 +1123,71 @@
return card ? card.querySelector('[data-remove-schedule-rule]') : null;
}
function getRuleDayLabels(card) {
return card ? Array.prototype.slice.call(card.querySelectorAll('.schedule-day-button')) : [];
}
function getCollapseRuleButton(card) {
return card ? card.querySelector('[data-schedule-rule-collapse], [data-lte-toggle="card-collapse"]') : null;
}
function getCollapseRuleIcon(card) {
return card ? card.querySelector('[data-schedule-rule-collapse-icon]') : null;
}
function syncRuleCollapseButtonState(card) {
var button = getCollapseRuleButton(card);
var icon = getCollapseRuleIcon(card);
var numberNode = getRuleNumberNode(card);
var ruleIndex = numberNode ? String(numberNode.textContent || '') : '';
var isCollapsed = Boolean(card && card.classList && card.classList.contains('collapsed-card'));
var label = (isCollapsed ? 'Expand' : 'Collapse') + ' rule ' + ruleIndex;
if (!button) {
return;
}
button.setAttribute('aria-expanded', isCollapsed ? 'false' : 'true');
button.setAttribute('aria-label', label);
button.setAttribute('title', label);
if (icon) {
icon.classList.remove('bi-dash-lg', 'bi-plus-lg');
icon.classList.add(isCollapsed ? 'bi-plus-lg' : 'bi-dash-lg');
}
var visibleLabel = button.querySelector('.visually-hidden');
if (visibleLabel) {
visibleLabel.textContent = label;
}
}
function clearRuleValidity(card) {
var fields = getRuleFields(card);
var dayInputs = Array.prototype.slice.call(fields.days || []);
var dayLabels = getRuleDayLabels(card);
var feedbackNode = card ? card.querySelector('[data-schedule-rule-feedback]') : null;
[fields.startDatetime, fields.endDatetime, fields.startTime, fields.endTime].forEach(function (input) {
if (input) {
input.setCustomValidity('');
input.classList.remove('is-invalid');
input.removeAttribute('aria-invalid');
}
});
dayInputs.forEach(function (input) {
input.setCustomValidity('');
input.classList.remove('is-invalid');
input.removeAttribute('aria-invalid');
});
dayLabels.forEach(function (label) {
label.classList.remove('is-invalid');
label.removeAttribute('aria-invalid');
});
if (feedbackNode) {
feedbackNode.innerHTML = '';
feedbackNode.hidden = true;
}
}
function setRuleError(input, message) {
@@ -793,37 +1195,96 @@
return;
}
input.setCustomValidity(message);
if (String(input.value || '').trim()) {
input.classList.add('is-invalid');
input.setAttribute('aria-invalid', 'true');
}
appendRuleFeedbackMessage(input.closest ? input.closest('[data-schedule-rule-card]') : null, message);
}
function validateRuleCard(card) {
function validateScheduleRuleCard(card) {
var fields = getRuleFields(card);
var dayInputs = Array.prototype.slice.call(fields.days || []);
var dayLabels = getRuleDayLabels(card);
var checkedDayInputs = dayInputs.filter(function (input) {
return Boolean(input && input.checked);
});
var checkedDayIndices = checkedDayInputs.map(function (input) {
return Number(input && input.value);
});
var startDatetime = String(fields.startDatetime && fields.startDatetime.value || '').trim();
var endDatetime = String(fields.endDatetime && fields.endDatetime.value || '').trim();
var startTime = String(fields.startTime && fields.startTime.value || '').trim();
var endTime = String(fields.endTime && fields.endTime.value || '').trim();
var hasDateInput = Boolean(startDatetime || endDatetime);
var hasTimeInput = Boolean(startTime || endTime);
var isValid = true;
clearRuleValidity(card);
if (hasDateInput && (!startDatetime || !endDatetime)) {
setRuleError(fields.startDatetime || fields.endDatetime, 'Start and end datetimes must both be set for this rule.');
return false;
}
if (hasTimeInput && (!startTime || !endTime)) {
setRuleError(fields.startTime || fields.endTime, 'Start and end times must both be set for this rule.');
return false;
}
if (startDatetime && endDatetime && new Date(endDatetime) < new Date(startDatetime)) {
setRuleError(fields.endDatetime, 'End datetime must be after start datetime.');
return false;
}
if (startTime && endTime && endTime < startTime) {
setRuleError(fields.endTime, 'End time must be after start time.');
return false;
if ((startDatetime || endDatetime) && (!startDatetime || !endDatetime)) {
setRuleError(!startDatetime ? fields.startDatetime : fields.endDatetime, 'Start and end datetimes must both be set for this rule.');
isValid = false;
}
return true;
if ((startTime || endTime) && (!startTime || !endTime)) {
setRuleError(!startTime ? fields.startTime : fields.endTime, 'Start and end times must both be set for this rule.');
isValid = false;
}
if (startDatetime && endDatetime && new Date(endDatetime) <= new Date(startDatetime)) {
setRuleError(fields.endDatetime, 'End datetime must be after start datetime.');
isValid = false;
}
if (startTime && endTime && endTime <= startTime) {
setRuleError(fields.endTime, 'End time must be after start time.');
if (fields.startTime) {
fields.startTime.classList.add('is-invalid');
fields.startTime.setAttribute('aria-invalid', 'true');
}
isValid = false;
}
if (startDatetime && endDatetime) {
var dateRangeDayIndices = getDateRangeDayIndices(startDatetime, endDatetime);
var dayIndicesToCheck = checkedDayIndices.length ? checkedDayIndices : [0, 1, 2, 3, 4, 5, 6];
var invalidDayInputs = checkedDayInputs.filter(function (input) {
return dateRangeDayIndices.indexOf(Number(input && input.value)) === -1;
});
invalidDayInputs.forEach(function (input) {
var dayIndex = dayInputs.indexOf(input);
if (dayIndex !== -1 && dayLabels[dayIndex]) {
dayLabels[dayIndex].classList.add('is-invalid');
dayLabels[dayIndex].setAttribute('aria-invalid', 'true');
}
});
if (checkedDayInputs.length && invalidDayInputs.length === checkedDayInputs.length) {
setDayInputError(card, checkedDayInputs[0] || dayInputs[0], 'Selected days must overlap the date range.');
isValid = false;
}
if (startTime && endTime && !hasScheduleRuleOverlap(startDatetime, endDatetime, startTime, endTime, dayIndicesToCheck)) {
setRuleError(fields.endTime, 'Start and end times must overlap the date range.');
if (fields.startTime) {
fields.startTime.classList.add('is-invalid');
fields.startTime.setAttribute('aria-invalid', 'true');
}
isValid = false;
}
}
return isValid;
}
function updateLiveRuleValidity(card) {
validateScheduleRuleCard(card);
}
function validateRuleCard(card) {
return validateScheduleRuleCard(card);
}
function readRuleFromCard(card) {
@@ -978,37 +1439,47 @@
card.querySelector('[data-schedule-rule-start-time]').value = String(normalizedRule.start_time || '');
card.querySelector('[data-schedule-rule-end-time]').value = String(normalizedRule.end_time || '');
card.querySelector('[data-remove-schedule-rule]').setAttribute('data-confirm-message', 'Remove this rule?');
card.querySelector('[data-lte-toggle="card-collapse"]').setAttribute('aria-label', 'Collapse rule ' + String(ruleIndex));
card.querySelector('[data-lte-toggle="card-collapse"]').setAttribute('title', 'Collapse rule ' + String(ruleIndex));
card.querySelector('[data-lte-toggle="card-collapse"] .visually-hidden').textContent = 'Collapse rule ' + String(ruleIndex);
updateRuleCardDayOptions(card, ruleKey, normalizedRule);
card.querySelector('[data-lte-toggle="card-collapse"]').addEventListener('click', function (event) {
event.preventDefault();
card.classList.toggle('collapsed-card');
persistScheduleDraft();
});
if (isCollapsed) {
card.classList.add('collapsed-card');
} else {
card.classList.remove('collapsed-card');
}
try {
updateLiveRuleValidity(card);
} catch (_error) {
clearRuleValidity(card);
}
syncRuleCollapseButtonState(card);
return card;
}
function addRule(rule, options) {
var ruleCount = getRuleCards().length + 1;
var card = createRuleCardElement(rule || {}, ruleCount, options);
scheduleRuleList.appendChild(card);
if (!card) {
scheduleRuleList.insertAdjacentHTML('beforeend', buildScheduleRuleCardMarkup(rule || {}, ruleCount, Boolean(options && options.isCollapsed)));
card = scheduleRuleList.lastElementChild;
}
if (!card) {
return null;
}
if (card.parentNode !== scheduleRuleList) {
scheduleRuleList.appendChild(card);
}
refreshRuleNumbers();
syncScheduleRulesField();
return card;
}
function handleCardChange(card) {
clearRuleValidity(card);
updateLiveRuleValidity(card);
updateRuleCardSummary(card);
syncScheduleRulesField();
}
@@ -1074,6 +1545,16 @@
scheduleRuleList.addEventListener('click', function (event) {
var removeButton = event.target && event.target.closest ? event.target.closest('[data-remove-schedule-rule]') : null;
var collapseButton = event.target && event.target.closest ? event.target.closest('[data-schedule-rule-collapse], [data-lte-toggle="card-collapse"]') : null;
if (collapseButton) {
window.setTimeout(function () {
syncRuleCollapseButtonState(collapseButton.closest('[data-schedule-rule-card]'));
persistScheduleDraft();
}, 0);
return;
}
if (!removeButton) {
return;
}
@@ -1107,6 +1588,8 @@
} else {
refreshRuleNumbers();
getRuleCards().forEach(function (card) {
syncRuleCollapseButtonState(card);
updateLiveRuleValidity(card);
updateRuleCardSummary(card);
});
syncScheduleRulesField();
@@ -1637,9 +2120,36 @@
var rows = getRows();
rows.forEach(function (row, index) {
var orderNumber = row.querySelector('.playlist-order-number');
var moveUpButton = row.querySelector('[data-playlist-row-move="up"]');
var moveDownButton = row.querySelector('[data-playlist-row-move="down"]');
var moveUpIcon = row.querySelector('[data-playlist-row-move-icon="up"]');
var moveDownIcon = row.querySelector('[data-playlist-row-move-icon="down"]');
var isFirst = index === 0;
var isLast = index === rows.length - 1;
if (orderNumber) {
orderNumber.textContent = String(index + 1);
}
if (moveUpButton) {
moveUpButton.disabled = isFirst;
moveUpButton.setAttribute('aria-disabled', isFirst ? 'true' : 'false');
}
if (moveUpIcon) {
moveUpIcon.classList.toggle('bi-caret-up-fill', !isFirst);
moveUpIcon.classList.toggle('bi-caret-up', isFirst);
}
if (moveDownButton) {
moveDownButton.disabled = isLast;
moveDownButton.setAttribute('aria-disabled', isLast ? 'true' : 'false');
}
if (moveDownIcon) {
moveDownIcon.classList.toggle('bi-caret-down-fill', !isLast);
moveDownIcon.classList.toggle('bi-caret-down', isLast);
}
});
syncAddSlideOptions();
syncPlaylistCanvasLock();
@@ -1665,6 +2175,38 @@
});
}
function movePlaylistRowByOffset(row, offset) {
var currentTbody = document.getElementById('playlist-items-body') || tbody;
var rows = getRows();
var currentIndex = rows.indexOf(row);
var targetIndex;
var referenceRow;
if (!currentTbody || !row || currentIndex === -1) {
return false;
}
targetIndex = currentIndex + Number(offset || 0);
if (targetIndex < 0 || targetIndex >= rows.length) {
return false;
}
referenceRow = rows[targetIndex];
if (targetIndex > currentIndex) {
referenceRow = referenceRow ? referenceRow.nextSibling : null;
}
if (referenceRow) {
currentTbody.insertBefore(row, referenceRow);
} else {
currentTbody.appendChild(row);
}
updateRowOrder(true);
return true;
}
function populatePlaylistSlideRow(row, values, rowKey) {
var canvasWidth = Number(values.canvas_width);
var canvasHeight = Number(values.canvas_height);
@@ -1898,6 +2440,7 @@
return;
}
var moveButton = event.target.closest('[data-playlist-row-move]');
var removeButton = event.target.closest('[data-playlist-remove-row]');
var durationButton = event.target.closest('.playlist-use-video-duration');
var muteButton = event.target.closest('.playlist-disable-audio');
@@ -1907,6 +2450,13 @@
return;
}
if (moveButton) {
event.preventDefault();
event.stopPropagation();
movePlaylistRowByOffset(row, moveButton.getAttribute('data-playlist-row-move') === 'up' ? -1 : 1);
return;
}
if (removeButton) {
event.preventDefault();
row.remove();
src/web/public/js/rbac-permissions.js
+82 -12
View File
@@ -1,8 +1,16 @@
// RBAC permission matrix helpers for checkbox groups.
(function () {
function getGroupCheckboxes(group) {
return Array.prototype.slice.call(group.querySelectorAll('input[name="permission_keys[]"]'));
function getPermissionSections() {
return Array.prototype.slice.call(document.querySelectorAll('[data-permission-section]'));
}
function getPermissionRows(container) {
return Array.prototype.slice.call(container.querySelectorAll('[data-permission-row]'));
}
function getRowCheckboxes(row) {
return Array.prototype.slice.call(row.querySelectorAll('input[name="permission_keys[]"]'));
}
function getPermissionKey(checkbox) {
@@ -19,8 +27,12 @@
return String(parts[1] || '').trim().toLowerCase();
}
function syncPermissionGroup(group) {
var checkboxes = getGroupCheckboxes(group);
function syncPermissionRow(row) {
if (!row) {
return;
}
var checkboxes = getRowCheckboxes(row);
if (!checkboxes.length) {
return;
}
@@ -55,19 +67,57 @@
}
}
function handleGroupChange(event) {
function setRowCheckboxes(row, checked) {
if (!row) {
return;
}
var checkboxes = getRowCheckboxes(row);
if (!checkboxes.length) {
return;
}
checkboxes.forEach(function (checkbox) {
checkbox.checked = Boolean(checked);
});
syncPermissionRow(row);
}
function toggleRowCheckboxes(row) {
if (!row) {
return;
}
var checkboxes = getRowCheckboxes(row);
if (!checkboxes.length) {
return;
}
var allChecked = checkboxes.every(function (checkbox) {
return Boolean(checkbox.checked);
});
setRowCheckboxes(row, !allChecked);
}
function findPermissionRow(targetId) {
return document.querySelector('[data-permission-row-id="' + targetId + '"]');
}
function handleRowChange(event) {
var checkbox = event.target && event.target.matches ? event.target : null;
if (!checkbox || checkbox.tagName !== 'INPUT' || checkbox.type !== 'checkbox') {
return;
}
var actionKey = getActionKey(checkbox);
var group = checkbox.closest('.accordion-item');
if (!group) {
var row = checkbox.closest('[data-permission-row]');
if (!row) {
return;
}
var checkboxes = getGroupCheckboxes(group);
var checkboxes = getRowCheckboxes(row);
var readCheckbox = checkboxes.find(function (candidate) {
return getActionKey(candidate) === 'read';
}) || null;
@@ -91,8 +141,28 @@
}
function initPermissionGroups() {
document.querySelectorAll('.accordion-item').forEach(function (group) {
syncPermissionGroup(group);
getPermissionSections().forEach(function (section) {
getPermissionRows(section).forEach(function (row) {
syncPermissionRow(row);
});
});
document.addEventListener('click', function (event) {
var control = event.target && event.target.closest ? event.target.closest('[data-permission-row-toggle]') : null;
if (!control) {
return;
}
event.preventDefault();
var targetId = String(control.getAttribute('data-permission-row-target') || '').trim();
if (!targetId) {
return;
}
if (control.hasAttribute('data-permission-row-toggle')) {
toggleRowCheckboxes(findPermissionRow(targetId));
}
});
document.addEventListener('change', function (event) {
@@ -104,8 +174,8 @@
return;
}
handleGroupChange(event);
syncPermissionGroup(checkbox.closest('.accordion-item'));
handleRowChange(event);
syncPermissionRow(checkbox.closest('[data-permission-row]'));
});
}
src/web/public/js/regions/region-types.js
+47 -13
View File
@@ -58,13 +58,26 @@
return registry[normalizeType(type)] || null;
}
function getRegionTypeLabel(type, definition) {
return String(definition && definition.label ? definition.label : type || '')
.trim()
.toLowerCase();
}
function compareRegionTypeEntries(left, right) {
var leftLabel = getRegionTypeLabel(left && left.type, left && left.definition);
var rightLabel = getRegionTypeLabel(right && right.type, right && right.definition);
return leftLabel.localeCompare(rightLabel, undefined, { sensitivity: 'base' }) || String(left && left.type || '').localeCompare(String(right && right.type || ''), undefined, { sensitivity: 'base' });
}
function list() {
return Object.keys(registry).map(function (type) {
return {
type: type,
definition: registry[type] || {}
};
});
}).sort(compareRegionTypeEntries);
}
function getDefaultRegionSize(regionType, lockRatio) {
@@ -91,18 +104,38 @@
return String(definition.label);
}
var normalized = normalizeType(regionType);
if (!normalized) {
return 'Region';
}
return 'Text';
}
return normalized
.split(/[_-]+/)
.filter(function (segment) { return segment; })
.map(function (segment) {
return segment.charAt(0).toUpperCase() + segment.slice(1);
})
.join(' ') || 'Region';
function escapeHtml(value) {
return String(value === undefined || value === null ? '' : value)
.replace(/&/g, '&amp;')
.replace(/</g, '&lt;')
.replace(/>/g, '&gt;')
.replace(/"/g, '&quot;')
.replace(/'/g, '&#39;');
}
function renderEditorCardShell(options) {
var settings = options || {};
var region = settings.region || {};
var cardClass = String(settings.cardClass || 'card card-outline card-secondary admin-form-card template-field-card mb-3');
var cardAttrs = String(settings.cardAttrs || '');
var cardStyle = settings.cardStyle ? ' style="' + escapeHtml(settings.cardStyle) + '"' : '';
var bodyClass = String(settings.bodyClass || 'card-body p-3 d-grid');
var bodyAttrs = String(settings.bodyAttrs || '');
var bodyStyle = settings.bodyStyle ? ' style="' + escapeHtml(settings.bodyStyle) + '"' : '';
var headerActions = String(settings.headerActions || '');
var bodyHtml = String(settings.bodyHtml || '');
return '' +
'<div class="' + cardClass + '" data-region-id="' + escapeHtml(region.id) + '"' + cardAttrs + cardStyle + '>' +
'<div class="card-header template-field-head">' +
'<strong>' + escapeHtml(region.label) + '</strong>' +
'<div class="template-field-actions">' + headerActions + '</div>' +
'</div>' +
'<div class="' + bodyClass + '"' + bodyAttrs + bodyStyle + '>' + bodyHtml + '</div>' +
'</div>';
}
root.pulseRegionTypes = {
@@ -111,6 +144,7 @@
list: list,
getDefaultRegionSize: getDefaultRegionSize,
getDefaultRegionStyle: getDefaultRegionStyle,
getRegionChipLabel: getRegionChipLabel
getRegionChipLabel: getRegionChipLabel,
renderEditorCardShell: renderEditorCardShell
};
}());
src/web/public/js/regions/region-utils.js
+97 -15
View File
@@ -178,12 +178,25 @@
return 'video';
}
if (button && button.hasAttribute('data-remove-region-qr-image')) {
return 'qr-image';
}
if (button && button.hasAttribute('data-remove-region-image')) {
return 'image';
}
if (card && card.dataset && String(card.dataset.regionMediaType || '').trim()) {
return String(card.dataset.regionMediaType || '').trim() === 'video' ? 'video' : 'image';
var regionMediaType = String(card.dataset.regionMediaType || '').trim();
if (regionMediaType === 'video') {
return 'video';
}
if (regionMediaType === 'qr-image') {
return 'qr-image';
}
return 'image';
}
return 'image';
@@ -194,7 +207,15 @@
return callbacks.getExistingMediaPrefix(mediaType);
}
return String(mediaType || '').trim() === 'video' ? 'existing_region_video_' : 'existing_region_image_';
if (String(mediaType || '').trim() === 'video') {
return 'existing_region_video_';
}
if (String(mediaType || '').trim() === 'qr-image') {
return 'existing_region_qr_image_';
}
return 'existing_region_image_';
}
function getMediaPrefix(mediaType) {
@@ -202,7 +223,15 @@
return callbacks.getMediaPrefix(mediaType);
}
return String(mediaType || '').trim() === 'video' ? 'region_video_' : 'region_image_';
if (String(mediaType || '').trim() === 'video') {
return 'region_video_';
}
if (String(mediaType || '').trim() === 'qr-image') {
return 'region_qr_image_';
}
return 'region_image_';
}
function getVideoDurationHiddenInput(regionId) {
@@ -214,18 +243,33 @@
}
function handleRemove(button) {
var regionId = button.getAttribute('data-remove-region-image') || button.getAttribute('data-remove-region-video');
var regionId = button.getAttribute('data-remove-region-image') || button.getAttribute('data-remove-region-video') || button.getAttribute('data-remove-region-qr-image');
var card = getCard(regionId);
var mediaType = getMediaType(button, card);
var hidden = card && card.querySelector('input[type="hidden"][name="' + getExistingPrefix(mediaType) + regionId + '"]');
var input = card && card.querySelector('input[type="file"][name="' + getMediaPrefix(mediaType) + regionId + '"]');
var hiddenName = getExistingPrefix(mediaType) + regionId;
var inputName = getMediaPrefix(mediaType) + regionId;
var hidden = card && card.querySelector('input[type="hidden"][name="' + hiddenName + '"]');
var input = card && card.querySelector('input[type="file"][name="' + inputName + '"]');
if (!hidden && regionId) {
hidden = templateFields.querySelector('input[type="hidden"][name="' + hiddenName + '"]');
}
if (!input && regionId) {
input = templateFields.querySelector('input[type="file"][name="' + inputName + '"]');
}
var uploadPath = input ? String(input.dataset.uploadedPath || '').trim() : '';
var hasPendingUpload = input && input.dataset && String(input.dataset.uploadToken || '').trim();
if (input && input.dataset.previewUrl) {
URL.revokeObjectURL(input.dataset.previewUrl);
delete input.dataset.previewUrl;
}
if (input && hasPendingUpload) {
input.dataset.uploadCancelRequested = '1';
}
if (input && input.dataset.uploadedNeedsCleanup === '1' && uploadPath && typeof callbacks.queueUploadCleanup === 'function') {
callbacks.queueUploadCleanup([uploadPath]);
}
@@ -238,6 +282,7 @@
if (hidden) {
hidden.value = '';
hidden.dispatchEvent(new Event('change', { bubbles: true }));
}
var durationHidden = getVideoDurationHiddenInput(regionId);
@@ -259,7 +304,7 @@
}
templateFields.addEventListener('click', function (event) {
var button = event.target && event.target.closest ? event.target.closest('[data-remove-region-image], [data-remove-region-video]') : null;
var button = event.target && event.target.closest ? event.target.closest('[data-remove-region-image], [data-remove-region-video], [data-remove-region-qr-image]') : null;
if (!button || !templateFields.contains(button)) {
return;
@@ -273,7 +318,7 @@
return;
}
var button = event.target && event.target.closest ? event.target.closest('[data-remove-region-image], [data-remove-region-video]') : null;
var button = event.target && event.target.closest ? event.target.closest('[data-remove-region-image], [data-remove-region-video], [data-remove-region-qr-image]') : null;
if (!button || !templateFields.contains(button)) {
return;
@@ -304,7 +349,15 @@
return callbacks.getMediaTypeFromInput(input);
}
return input && input.name && input.name.indexOf('region_video_') === 0 ? 'video' : 'image';
if (input && input.name && input.name.indexOf('region_video_') === 0) {
return 'video';
}
if (input && input.name && input.name.indexOf('region_qr_image_') === 0) {
return 'qr-image';
}
return 'image';
}
function getMediaPrefix(mediaType) {
@@ -312,7 +365,15 @@
return callbacks.getMediaPrefix(mediaType);
}
return String(mediaType || '').trim() === 'video' ? 'region_video_' : 'region_image_';
if (String(mediaType || '').trim() === 'video') {
return 'region_video_';
}
if (String(mediaType || '').trim() === 'qr-image') {
return 'region_qr_image_';
}
return 'region_image_';
}
function getExistingMediaPrefix(mediaType) {
@@ -320,7 +381,15 @@
return callbacks.getExistingMediaPrefix(mediaType);
}
return String(mediaType || '').trim() === 'video' ? 'existing_region_video_' : 'existing_region_image_';
if (String(mediaType || '').trim() === 'video') {
return 'existing_region_video_';
}
if (String(mediaType || '').trim() === 'qr-image') {
return 'existing_region_qr_image_';
}
return 'existing_region_image_';
}
function getUploadZone(input) {
@@ -440,7 +509,7 @@
}
function getPendingUploadCleanupPaths() {
return Array.prototype.slice.call(templateFields.querySelectorAll('input[type="file"][name^="region_image_"], input[type="file"][name^="region_video_"]')).map(function (input) {
return Array.prototype.slice.call(templateFields.querySelectorAll('input[type="file"][name^="region_image_"], input[type="file"][name^="region_video_"], input[type="file"][name^="region_qr_image_"]')).map(function (input) {
if (!input || String(input.dataset.uploadedNeedsCleanup || '') !== '1') {
return null;
}
@@ -450,7 +519,7 @@
}
function clearPendingUploadCleanupPaths() {
Array.prototype.slice.call(templateFields.querySelectorAll('input[type="file"][name^="region_image_"], input[type="file"][name^="region_video_"]')).forEach(function (input) {
Array.prototype.slice.call(templateFields.querySelectorAll('input[type="file"][name^="region_image_"], input[type="file"][name^="region_video_"], input[type="file"][name^="region_qr_image_"]')).forEach(function (input) {
if (!input) {
return;
}
@@ -465,7 +534,7 @@
}
var mediaType = getMediaTypeFromInput(input);
var regionId = input.name.replace(/^region_(?:image|video)_/, '');
var regionId = input.name.replace(/^region_(?:image|video|qr_image)_/, '');
var card = getCard(regionId);
var hidden = card && card.querySelector('input[type="hidden"][name="' + getExistingMediaPrefix(mediaType) + regionId + '"]');
var zone = getUploadZone(input);
@@ -475,6 +544,7 @@
var uploadUrl = String(callbacks.uploadUrl || '/slides/uploads');
var uploadTimeoutMs = Math.max(1, Number(callbacks.uploadTimeoutMs || 30000));
delete input.dataset.uploadCancelRequested;
input.dataset.uploadToken = uploadToken;
setUploadState(input, true, 0, 'Uploading...', true);
@@ -549,8 +619,19 @@
delete input.dataset.previewUrl;
}
if (String(input.dataset.uploadCancelRequested || '') === '1') {
if (uploadedPath) {
queueUploadCleanup([uploadedPath]);
}
setUploadState(input, false);
resolve(payload);
return;
}
if (hidden) {
hidden.value = uploadedPath;
hidden.dispatchEvent(new Event('change', { bubbles: true }));
}
input.dataset.uploadedPath = uploadedPath;
input.dataset.uploadedNeedsCleanup = '1';
@@ -611,6 +692,7 @@
xhr.onloadend = function () {
if (input.dataset.uploadToken === uploadToken) {
delete input.dataset.uploadToken;
delete input.dataset.uploadCancelRequested;
setUploadState(input, false);
}
};
@@ -647,7 +729,7 @@
templateFields.dataset.regionMediaUploadBound = '1';
templateFields.addEventListener('change', function (event) {
var input = event.target && event.target.matches && event.target.matches('input[type="file"][name^="region_image_"], input[type="file"][name^="region_video_"]') ? event.target : null;
var input = event.target && event.target.matches && event.target.matches('input[type="file"][name^="region_image_"], input[type="file"][name^="region_video_"], input[type="file"][name^="region_qr_image_"]') ? event.target : null;
if (!input || !templateFields.contains(input)) {
return;
src/web/public/js/regions/type/api.js
-1
View File
@@ -232,7 +232,6 @@
'</div>' +
'<input type="hidden" name="region_font_size_' + region.id + '" value="' + escapeHtml(context.fontSize || '') + '" />' +
'<input type="hidden" name="region_text_' + region.id + '" value="' + escapeHtml(current.value !== undefined ? current.value : '') + '" />' +
'<div class="muted slide-image-file">Use transforms like {{name.upper()}}, {{name.title()}}, or {{name.lower()}} on leaf fields.</div>' +
'<div class="api-region-placeholder-section">' +
'<div class="api-region-placeholder-title">Available placeholders</div>' +
'<div class="d-flex flex-wrap gap-2" data-placeholder-chips>' + ((placeholderFields.length && window.placeholderChips && typeof window.placeholderChips.renderChips === 'function') ? window.placeholderChips.renderChips(placeholderFields) : placeholderChips || '<span class="muted slide-image-file">No JSON fields available.</span>') + '</div>' +
src/web/public/js/regions/type/html.js
+7 -13
View File
@@ -20,19 +20,13 @@
function renderEditorCard(context) {
var region = context.region;
var current = String(context.current || '');
return '' +
'<div class="card card-outline card-secondary admin-form-card template-field-card mb-3" data-region-id="' + region.id + '">' +
'<div class="card-header template-field-head">' +
'<strong>' + escapeHtml(region.label) + '</strong>' +
'<span class="chip">HTML</span>' +
'</div>' +
'<div class="card-body p-3 d-grid">' +
'<label style="display:block;">HTML content' +
'<textarea name="region_html_' + region.id + '" class="form-control" rows="10" placeholder="<div>Hello</div>">' + escapeHtml(current) + '</textarea>' +
'</label>' +
'<div class="muted slide-image-file">HTML is rendered in a sandboxed iframe preview.</div>' +
'</div>' +
'</div>';
return registry.renderEditorCardShell({
region: region,
headerActions: '<span class="chip">HTML</span>',
bodyHtml: '' +
'<textarea name="region_html_' + region.id + '" class="form-control" rows="10" placeholder="<div>Hello</div>">' + escapeHtml(current) + '</textarea>' +
'<div class="muted slide-image-file">HTML is rendered in a sandboxed iframe preview.</div>'
});
}
registry.register('html', {
src/web/public/js/regions/type/image.js
+34 -37
View File
@@ -34,47 +34,44 @@
var uploadMaxLabel = String(uploadConfig.limitLabel || context.uploadMaxLabel || '100 MB');
var uploadAccept = Array.isArray(uploadConfig.accept) ? uploadConfig.accept.join(', ') : String(uploadConfig.accept || 'image/png, image/jpeg, image/gif, image/webp');
var uploadHelpText = String(uploadConfig.helpText || 'PNG, JPG, GIF, or WebP');
return '' +
'<div class="card card-outline card-secondary admin-form-card template-field-card mb-3" data-region-id="' + region.id + '" data-region-media-type="image">' +
'<div class="card-header template-field-head">' +
'<strong>' + escapeHtml(region.label) + '</strong>' +
'<span class="chip">Image</span>' +
'</div>' +
'<div class="card-body p-3 d-grid">' +
'<div class="row g-3 align-items-start">' +
'<div class="col-12 col-md-8 d-flex flex-column">' +
'<label class="slide-image-region-upload-zone" data-region-upload-zone="' + region.id + '" for="region_image_' + region.id + '">' +
'<input type="file" id="region_image_' + region.id + '" name="region_image_' + region.id + '" class="visually-hidden" accept="' + escapeHtml(uploadAccept) + '" data-slide-image-cropper-region-ratio="' + escapeHtml(regionRatio) + '" data-slide-image-cropper-region-ratio-label="Region" />' +
'<span class="slide-image-region-upload-zone-content">' +
'<span class="slide-image-region-upload-zone-icon"><i class="bi bi-cloud-arrow-up" aria-hidden="true"></i></span>' +
'<span class="slide-image-region-upload-zone-copy">' +
'<strong>Drop an image here or click to upload</strong>' +
'<span>' + escapeHtml(uploadHelpText) + '</span>' +
'<span class="slide-image-region-upload-zone-limit">Max ' + escapeHtml(uploadMaxLabel) + ' per file</span>' +
'</span>' +
return registry.renderEditorCardShell({
region: region,
headerActions: '<span class="chip">Image</span>',
cardAttrs: ' data-region-media-type="image"',
bodyHtml: '' +
'<div class="row g-3 align-items-start">' +
'<div class="col-12 col-md-8 d-flex flex-column">' +
'<label class="slide-image-region-upload-zone" data-region-upload-zone="' + region.id + '" for="region_image_' + region.id + '">' +
'<input type="file" id="region_image_' + region.id + '" name="region_image_' + region.id + '" class="visually-hidden" accept="' + escapeHtml(uploadAccept) + '" data-slide-image-cropper-region-ratio="' + escapeHtml(regionRatio) + '" data-slide-image-cropper-region-ratio-label="Region" />' +
'<span class="slide-image-region-upload-zone-content">' +
'<span class="slide-image-region-upload-zone-icon"><i class="bi bi-cloud-arrow-up" aria-hidden="true"></i></span>' +
'<span class="slide-image-region-upload-zone-copy">' +
'<strong>Drop an image here or click to upload</strong>' +
'<span>' + escapeHtml(uploadHelpText) + '</span>' +
'<span class="slide-image-region-upload-zone-limit">Max ' + escapeHtml(uploadMaxLabel) + ' per file</span>' +
'</span>' +
'<span class="slide-image-region-upload-zone-progress" data-region-upload-progress hidden>' +
'<span class="slide-image-region-upload-zone-progress-label" data-region-upload-progress-text>Uploading...</span>' +
'<div class="progress slide-image-region-upload-zone-progress-bar" role="progressbar" aria-label="Image upload progress" aria-valuemin="0" aria-valuemax="100" aria-valuenow="0">' +
'<div class="progress-bar bg-danger progress-bar-striped progress-bar-animated" data-region-upload-progress-bar style="width:0%">0%</div>' +
'</div>' +
'</span>' +
'</label>' +
'</div>' +
'<div class="col-12 col-md-4">' +
'<div class="slide-image-region-preview-box">' +
(current
? '<div class="slide-image-region-preview-shell" data-remove-region-image="' + region.id + '" role="button" tabindex="0" aria-label="Remove image">' +
'<img class="slide-image-region-preview" src="' + escapeHtml(current) + '" alt="Current image preview" />' +
'<span class="slide-image-region-preview-remove" aria-hidden="true"><i class="bi bi-trash3" aria-hidden="true"></i></span>' +
'</div>'
: '<div class="slide-image-region-preview slide-image-region-preview-empty">No image</div>') +
'</div>' +
'</span>' +
'<span class="slide-image-region-upload-zone-progress" data-region-upload-progress hidden>' +
'<span class="slide-image-region-upload-zone-progress-label" data-region-upload-progress-text>Uploading...</span>' +
'<div class="progress slide-image-region-upload-zone-progress-bar" role="progressbar" aria-label="Image upload progress" aria-valuemin="0" aria-valuemax="100" aria-valuenow="0">' +
'<div class="progress-bar bg-danger progress-bar-striped progress-bar-animated" data-region-upload-progress-bar style="width:0%">0%</div>' +
'</div>' +
'</span>' +
'</label>' +
'</div>' +
'<div class="col-12 col-md-4">' +
'<div class="slide-image-region-preview-box">' +
(current
? '<div class="slide-image-region-preview-shell" data-remove-region-image="' + region.id + '" role="button" tabindex="0" aria-label="Remove image">' +
'<img class="slide-image-region-preview" src="' + escapeHtml(current) + '" alt="Current image preview" />' +
'<span class="slide-image-region-preview-remove" aria-hidden="true"><i class="bi bi-trash3" aria-hidden="true"></i></span>' +
'</div>'
: '<div class="slide-image-region-preview slide-image-region-preview-empty">No image</div>') +
'</div>' +
'</div>' +
'<input type="hidden" name="existing_region_image_' + region.id + '" value="' + escapeHtml(current) + '" />' +
'</div>' +
'</div>';
'<input type="hidden" name="existing_region_image_' + region.id + '" value="' + escapeHtml(current) + '" />'
});
}
function buildEditorCardContext(context) {
src/web/public/js/regions/type/qr-code.js
+989 -52
View File
File diff suppressed because it is too large Load Diff
src/web/public/js/regions/type/rss.js
+12 -3
View File
@@ -55,6 +55,11 @@
}) || null;
}
function getFeedItemCount(feedId, feeds) {
var feed = getFeedById(feedId, feeds);
return feed && Array.isArray(feed.items) ? feed.items.length : 0;
}
function getFieldList(feedId, feeds) {
var feed = getFeedById(feedId, feeds);
var sampleItem = feed && Array.isArray(feed.items) ? feed.items[0] : null;
@@ -128,7 +133,8 @@
var feed = getFeedById(feedId, feeds);
var items = feed && Array.isArray(feed.items) ? feed.items : [];
var parsedItemNumber = Math.max(1, Number(itemNumber || 1));
var index = Number.isFinite(parsedItemNumber) && parsedItemNumber > 0 ? parsedItemNumber - 1 : 0;
var itemCount = Math.max(1, items.length || 1);
var index = Number.isFinite(parsedItemNumber) && parsedItemNumber > 0 ? Math.min(itemCount, parsedItemNumber) - 1 : 0;
return items[index] || null;
}
@@ -208,6 +214,7 @@
var region = context.region;
var current = context.current || {};
var config = context.config || {};
var itemNumberLimit = Math.max(1, Number(context.itemNumberLimit || 1));
var placeholderChips = String(context.placeholderChips || '');
var feedOptions = String(context.feedOptions || '');
return '' +
@@ -232,15 +239,15 @@
'</div>' +
'<div class="col-6 col-md-4">' +
'<label class="form-label" for="region_rss_item_number_' + region.id + '">Entry number</label>' +
'<input id="region_rss_item_number_' + region.id + '" type="number" min="1" step="1" name="region_rss_item_number_' + region.id + '" class="form-control" value="' + escapeHtml(config.item_number) + '" />' +
'<input id="region_rss_item_number_' + region.id + '" type="number" min="1" max="' + escapeHtml(itemNumberLimit) + '" step="1" name="region_rss_item_number_' + region.id + '" class="form-control" value="' + escapeHtml(config.item_number) + '" />' +
'</div>' +
'</div>' +
'<input type="hidden" name="region_font_size_' + region.id + '" value="' + escapeHtml(context.fontSize || '') + '" />' +
'<input type="hidden" name="region_text_' + region.id + '" value="' + escapeHtml(current.value !== undefined ? current.value : '') + '" />' +
'<div class="muted slide-image-file">Use transforms like {{title.upper()}}, {{title.title()}}, or {{title.lower()}} on leaf fields.</div>' +
'<div class="api-region-placeholder-section">' +
'<div class="api-region-placeholder-title">Available placeholders</div>' +
'<div class="d-flex flex-wrap gap-2" data-placeholder-chips>' + (placeholderChips || '<span class="muted slide-image-file">No RSS fields available.</span>') + '</div>' +
'<div class="text-body-secondary small mt-1">Placeholder values support transforms, for example <code>{{title.upper()}}</code>, <code>{{title.title()}}</code>, <code>{{title.lower()}}</code>, or <code>{{publishedAt.format("MMM D, YYYY")}}</code>.</div>' +
'</div>' +
'</div>' +
'</div>';
@@ -250,6 +257,7 @@
var region = context.region;
var current = context.current || {};
var config = context.config || {};
var itemNumberLimit = Math.max(1, Number(getFeedItemCount(config.feed_id, feeds) || 1));
var placeholderChips = String(context.placeholderChips || '');
var feedOptions = String(context.feedOptions || '');
@@ -257,6 +265,7 @@
region: region,
current: current,
config: config,
itemNumberLimit: itemNumberLimit,
fontSize: context.fontSize || '',
placeholderChips: placeholderChips,
feedOptions: feedOptions,
src/web/public/js/regions/type/rtmp.js
+6 -18
View File
@@ -21,24 +21,12 @@
function renderEditorCard(context) {
var region = context.region;
var current = String(context.current || '');
var disableAudio = context.disableAudio === undefined ? false : Boolean(context.disableAudio);
return '' +
'<div class="card card-outline card-secondary admin-form-card template-field-card mb-3" data-region-id="' + region.id + '">' +
'<div class="card-header template-field-head">' +
'<strong>' + escapeHtml(region.label) + '</strong>' +
'<span class="chip">RTMP</span>' +
'</div>' +
'<div class="card-body p-3 d-grid">' +
'<label style="display:block;">RTMP URL' +
'<input type="url" name="region_rtmp_' + region.id + '" class="form-control" value="' + escapeHtml(current) + '" placeholder="rtmp://example.com/live/stream" />' +
'</label>' +
'<label class="form-check m-0">' +
'<input class="form-check-input" type="checkbox" name="region_disable_audio_' + region.id + '" value="1"' + (disableAudio ? ' checked' : '') + ' />' +
'<span class="form-check-label">Disable audio</span>' +
'</label>' +
'<div class="muted slide-image-file">Player controls stay hidden and the stream is not interactive.</div>' +
'</div>' +
'</div>';
return registry.renderEditorCardShell({
region: region,
headerActions: '<span class="chip">RTMP</span>',
bodyHtml: '' +
'<input type="url" name="region_rtmp_' + region.id + '" class="form-control" value="' + escapeHtml(current) + '" placeholder="rtmp://example.com/live/stream" />'
});
}
registry.register('rtmp', {
src/web/public/js/regions/type/schedule.js
+1 -1
View File
@@ -219,7 +219,7 @@
'<div class="api-region-placeholder-section schedule-placeholder-section" data-schedule-placeholder-chips>' +
'<div class="api-region-placeholder-title">Available placeholders</div>' +
'<div class="d-flex flex-wrap gap-2">' + renderSchedulePlaceholderChips(currentGroup, currentEntries) + '</div>' +
'<div class="text-body-secondary small mt-2">Format start and end values with expressions like <code>{{start.format("MMM D, YYYY h:mm A")}}</code> and <code>{{end.format("MMM D, YYYY h:mm A")}}</code>.</div>' +
'<div class="text-body-secondary small mt-1">Placeholder values support transforms, for example <code>{{title.upper()}}</code>, <code>{{title.title()}}</code>, <code>{{title.lower()}}</code> or <code>{{start.format("MMM D, YYYY h:mm A")}}</code>.</div>' +
'</div>' +
'</div>' +
'</div>' +
src/web/public/js/regions/type/video.js
+35 -38
View File
@@ -39,48 +39,45 @@
var uploadVideoMaxLabel = String(uploadConfig.limitLabel || context.uploadVideoMaxLabel || '1 GB');
var uploadAccept = Array.isArray(uploadConfig.accept) ? uploadConfig.accept.join(', ') : String(uploadConfig.accept || 'video/mp4, video/webm, video/ogg');
var uploadHelpText = String(uploadConfig.helpText || 'MP4, WebM, or Ogg');
return '' +
'<div class="card card-outline card-secondary admin-form-card template-field-card mb-3" data-region-id="' + region.id + '" data-region-media-type="video">' +
'<div class="card-header template-field-head">' +
'<strong>' + escapeHtml(region.label) + '</strong>' +
'<span class="chip">Video</span>' +
'</div>' +
'<div class="card-body p-3 d-grid">' +
'<div class="row g-3 align-items-start">' +
'<div class="col-12 col-md-8 d-flex flex-column">' +
'<label class="slide-image-region-upload-zone" data-region-upload-zone="' + region.id + '" for="region_video_' + region.id + '">' +
'<input type="file" id="region_video_' + region.id + '" name="region_video_' + region.id + '" class="visually-hidden" accept="' + escapeHtml(uploadAccept) + '" />' +
'<span class="slide-image-region-upload-zone-content">' +
'<span class="slide-image-region-upload-zone-icon"><i class="bi bi-camera-video" aria-hidden="true"></i></span>' +
'<span class="slide-image-region-upload-zone-copy">' +
'<strong>Drop a video here or click to upload</strong>' +
'<span>' + escapeHtml(uploadHelpText) + '</span>' +
'<span class="slide-image-region-upload-zone-limit">Max ' + escapeHtml(uploadVideoMaxLabel) + ' per file</span>' +
'</span>' +
return registry.renderEditorCardShell({
region: region,
headerActions: '<span class="chip">Video</span>',
cardAttrs: ' data-region-media-type="video"',
bodyHtml: '' +
'<div class="row g-3 align-items-start">' +
'<div class="col-12 col-md-8 d-flex flex-column">' +
'<label class="slide-image-region-upload-zone" data-region-upload-zone="' + region.id + '" for="region_video_' + region.id + '">' +
'<input type="file" id="region_video_' + region.id + '" name="region_video_' + region.id + '" class="visually-hidden" accept="' + escapeHtml(uploadAccept) + '" />' +
'<span class="slide-image-region-upload-zone-content">' +
'<span class="slide-image-region-upload-zone-icon"><i class="bi bi-camera-video" aria-hidden="true"></i></span>' +
'<span class="slide-image-region-upload-zone-copy">' +
'<strong>Drop a video here or click to upload</strong>' +
'<span>' + escapeHtml(uploadHelpText) + '</span>' +
'<span class="slide-image-region-upload-zone-limit">Max ' + escapeHtml(uploadVideoMaxLabel) + ' per file</span>' +
'</span>' +
'<span class="slide-image-region-upload-zone-progress" data-region-upload-progress hidden>' +
'<span class="slide-image-region-upload-zone-progress-label" data-region-upload-progress-text>Uploading...</span>' +
'<div class="progress slide-image-region-upload-zone-progress-bar" role="progressbar" aria-label="Video upload progress" aria-valuemin="0" aria-valuemax="100" aria-valuenow="0">' +
'<div class="progress-bar bg-danger progress-bar-striped progress-bar-animated" data-region-upload-progress-bar style="width:0%">0%</div>' +
'</div>' +
'</span>' +
'</label>' +
'</div>' +
'<div class="col-12 col-md-4">' +
'<div class="slide-image-region-preview-box">' +
(current
? '<div class="slide-image-region-preview-shell" data-remove-region-video="' + region.id + '" role="button" tabindex="0" aria-label="Remove video">' +
'<video class="slide-image-region-preview" src="' + escapeHtml(current) + '" muted playsinline preload="metadata"></video>' +
'<span class="slide-image-region-preview-remove" aria-hidden="true"><i class="bi bi-trash3" aria-hidden="true"></i></span>' +
'</div>'
: '<div class="slide-image-region-preview slide-image-region-preview-empty">No video</div>') +
'</div>' +
'</span>' +
'<span class="slide-image-region-upload-zone-progress" data-region-upload-progress hidden>' +
'<span class="slide-image-region-upload-zone-progress-label" data-region-upload-progress-text>Uploading...</span>' +
'<div class="progress slide-image-region-upload-zone-progress-bar" role="progressbar" aria-label="Video upload progress" aria-valuemin="0" aria-valuemax="100" aria-valuenow="0">' +
'<div class="progress-bar bg-danger progress-bar-striped progress-bar-animated" data-region-upload-progress-bar style="width:0%">0%</div>' +
'</div>' +
'</span>' +
'</label>' +
'</div>' +
'<div class="col-12 col-md-4">' +
'<div class="slide-image-region-preview-box">' +
(current
? '<div class="slide-image-region-preview-shell" data-remove-region-video="' + region.id + '" role="button" tabindex="0" aria-label="Remove video">' +
'<video class="slide-image-region-preview" src="' + escapeHtml(current) + '" muted playsinline preload="metadata"></video>' +
'<span class="slide-image-region-preview-remove" aria-hidden="true"><i class="bi bi-trash3" aria-hidden="true"></i></span>' +
'</div>'
: '<div class="slide-image-region-preview slide-image-region-preview-empty">No video</div>') +
'</div>' +
'</div>' +
'<input type="hidden" name="existing_region_video_' + region.id + '" value="' + escapeHtml(current) + '" />' +
'<input type="hidden" name="existing_region_video_duration_' + region.id + '" value="' + escapeHtml(currentDuration) + '" />' +
'</div>' +
'</div>';
'<input type="hidden" name="existing_region_video_' + region.id + '" value="' + escapeHtml(current) + '" />' +
'<input type="hidden" name="existing_region_video_duration_' + region.id + '" value="' + escapeHtml(currentDuration) + '" />'
});
}
function buildEditorCardContext(context) {
src/web/public/js/regions/type/webpage.js
+6 -13
View File
@@ -20,19 +20,12 @@
function renderEditorCard(context) {
var region = context.region;
var current = String(context.current || '');
return '' +
'<div class="card card-outline card-secondary admin-form-card template-field-card mb-3" data-region-id="' + region.id + '">' +
'<div class="card-header template-field-head">' +
'<strong>' + escapeHtml(region.label) + '</strong>' +
'<span class="chip">Webpage</span>' +
'</div>' +
'<div class="card-body p-3 d-grid">' +
'<label style="display:block;">Webpage URL' +
'<input type="url" name="region_webpage_' + region.id + '" class="form-control" value="' + escapeHtml(current) + '" placeholder="https://example.com" />' +
'</label>' +
'<div class="muted slide-image-file">The webpage will be loaded in an iframe.</div>' +
'</div>' +
'</div>';
return registry.renderEditorCardShell({
region: region,
headerActions: '<span class="chip">Webpage</span>',
bodyHtml: '' +
'<input type="url" name="region_webpage_' + region.id + '" class="form-control" value="' + escapeHtml(current) + '" placeholder="https://example.com" />'
});
}
registry.register('webpage', {
src/web/public/js/shared/qr-code-svg.js
+54
View File
@@ -0,0 +1,54 @@
// Shared QR SVG helpers for browser renderers.
(function () {
function normalizeSvgMarkup(svg) {
var markup = String(svg || '').trim();
if (!markup) {
return '';
}
return markup.replace(/^<\?xml[^>]*>\s*/i, '');
}
function stripBackground(svg) {
var markup = String(svg || '').trim();
if (!markup) {
return '';
}
return markup
.replace(/<path\b[^>]*fill="#ffffff"[^>]*d="M0 0h[^\"]*"[^>]*\s*\/>/i, '')
.replace(/<path\b[^>]*fill="#ffffff"[^>]*d="M0 0h[^\"]*"[^>]*><\/path>/i, '')
.replace(/<rect\b[^>]*fill="#ffffff"[^>]*x="0"[^>]*y="0"[^>]*width="\d+"[^>]*height="\d+"[^>]*\s*\/?>(?:<\/rect>)?/i, '');
}
function normalizePreviewSvg(svg) {
var markup = normalizeSvgMarkup(stripBackground(svg));
if (!markup || markup.charAt(0) !== '<') {
return markup;
}
return markup.replace(/^<svg\b([^>]*)>/i, function (_match, attrText) {
var attrs = String(attrText || '');
if (!/\bwidth\s*=\s*/i.test(attrs)) {
attrs += ' width="95%"';
}
if (!/\bheight\s*=\s*/i.test(attrs)) {
attrs += ' height="95%"';
}
if (!/\bpreserveAspectRatio\s*=\s*/i.test(attrs)) {
attrs += ' preserveAspectRatio="xMidYMid meet"';
}
if (!/\bstyle\s*=\s*/i.test(attrs)) {
attrs += ' style="display:block;width:95%;height:95%;"';
}
return '<svg' + attrs + '>';
});
}
window.pulseQrSvgUtils = {
normalizeSvgMarkup: normalizeSvgMarkup,
stripBackground: stripBackground,
normalizePreviewSvg: normalizePreviewSvg
};
}());
src/web/public/js/slides/slide-form-editor.js
+158 -46
View File
@@ -68,6 +68,32 @@ export function createSlideFormEditorController(options) {
return card ? card.querySelector('input[name="region_font_size_' + regionId + '"]') : null;
}
function getTinymce() {
return window.tinymce || null;
}
function getThemeName() {
var theme = String(document.documentElement && document.documentElement.dataset && document.documentElement.dataset.bsTheme || 'light').trim().toLowerCase();
if (theme === 'auto') {
return window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';
}
return theme === 'dark' ? 'dark' : 'light';
}
function getTinyMceThemeAssets() {
var themeName = getThemeName();
var skinName = themeName === 'dark' ? 'oxide-dark' : 'oxide';
var skinBase = '/assets/vendor/tinymce/skins/ui/' + skinName;
return {
themeName: themeName,
skinName: skinName,
skinUrl: skinBase,
contentCss: skinBase + '/content.css',
bodyClass: themeName === 'dark' ? 'tinymce-theme-dark' : 'tinymce-theme-light'
};
}
function getEditorRegionType(card) {
if (!card) {
return '';
@@ -99,31 +125,6 @@ export function createSlideFormEditorController(options) {
fontSizeHidden.value = normalizeFontSizeValue(fontSizeHidden.value) || String(defaultFontSize);
}
function getTinymce() {
return window.tinymce || null;
}
function getThemeName() {
var theme = String(document.documentElement && document.documentElement.dataset && document.documentElement.dataset.bsTheme || 'light').trim().toLowerCase();
if (theme === 'auto') {
return window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';
}
return theme === 'dark' ? 'dark' : 'light';
}
function getTinyMceThemeAssets() {
var themeName = getThemeName();
var skinName = themeName === 'dark' ? 'oxide-dark' : 'oxide';
var skinBase = '/assets/vendor/tinymce/skins/ui/' + skinName;
return {
themeName: themeName,
skinName: skinName,
skinUrl: skinBase,
contentCss: skinBase + '/content.css',
bodyClass: themeName === 'dark' ? 'tinymce-theme-dark' : 'tinymce-theme-light'
};
}
function getEditorBackgroundColorValue() {
var value = String(getEditorBackgroundColor() || '').trim();
return value || '#111111';
@@ -161,28 +162,19 @@ export function createSlideFormEditorController(options) {
function attachEditorEvents(regionId, editor) {
var hidden = getEditorHiddenInput(regionId);
var source = editor && editor.targetElm ? editor.targetElm : null;
var hydrated = false;
function syncState() {
function syncState(shouldLock) {
var currentEditor = editorInstances.get(regionId);
if (currentEditor !== editor) {
return;
}
if (typeof editor.save === 'function') {
editor.save();
syncEditorState(regionId, editor, shouldLock, hydrated);
if (!hydrated) {
requestPreviewRender();
return;
}
var content = editor.getContent({ format: 'html' });
content = isEmptyRichTextValue(content) ? '' : content;
if (hidden) {
hidden.value = content;
}
if (source) {
source.value = content;
}
if (templateSelectorLock && typeof templateSelectorLock.markEdited === 'function') {
templateSelectorLock.markEdited();
}
requestPreviewRender();
}
editor.on('init', function () {
@@ -195,11 +187,14 @@ export function createSlideFormEditorController(options) {
source.value = content;
}
syncEditorFontSizeHidden(regionId);
syncState();
hydrated = true;
requestPreviewRender();
});
['change', 'keyup', 'undo', 'redo', 'SetContent', 'Paste', 'input', 'NodeChange'].forEach(function (eventName) {
editor.on(eventName, syncState);
['change', 'keyup', 'undo', 'redo', 'Paste', 'input'].forEach(function (eventName) {
editor.on(eventName, function () {
syncState(true);
});
});
}
@@ -226,15 +221,74 @@ export function createSlideFormEditorController(options) {
source.id = 'slide-editor-region-' + regionId;
}
function registerInlineFormat(editor, formatName, styles) {
editor.formatter.register(formatName, {
inline: 'span',
styles: styles
});
}
function syncEditorState(regionId, editor, shouldLock, hydrated) {
if (editor && typeof editor.save === 'function') {
editor.save();
}
var content = editor.getContent({ format: 'html' });
content = isEmptyRichTextValue(content) ? '' : content;
var hidden = getEditorHiddenInput(regionId);
var sourceElm = editor && editor.targetElm ? editor.targetElm : null;
if (hidden) {
hidden.value = content;
}
if (sourceElm) {
sourceElm.value = content;
}
if (typeof editor.nodeChanged === 'function') {
editor.nodeChanged();
}
if (typeof editor.setDirty === 'function') {
editor.setDirty(true);
}
if (shouldLock && templateSelectorLock && typeof templateSelectorLock.arm === 'function') {
templateSelectorLock.arm();
}
if (shouldLock && templateSelectorLock && typeof templateSelectorLock.markEdited === 'function') {
templateSelectorLock.markEdited();
}
if (hydrated) {
requestPreviewRender();
}
}
function applyInlineFormat(regionId, editor, formatName) {
if (editor && editor.undoManager && typeof editor.undoManager.transact === 'function') {
editor.undoManager.transact(function () {
editor.formatter.apply(formatName);
});
} else {
editor.formatter.apply(formatName);
}
syncEditorState(regionId, editor, false, true);
}
function applyEditorCommand(regionId, editor, commandName) {
if (editor && editor.undoManager && typeof editor.undoManager.transact === 'function') {
editor.undoManager.transact(function () {
editor.execCommand(commandName);
});
} else {
editor.execCommand(commandName);
}
syncEditorState(regionId, editor, false, true);
}
return tinymce.init({
target: source,
menubar: false,
branding: false,
promotion: false,
statusbar: true,
resize: true,
plugins: 'lists code advlist fullscreen table',
toolbar: 'undo redo | fontfamily fontsizeinput | forecolor backcolor bold italic underline strikethrough subscript superscript removeformat | align lineheight indent outdent bullist numlist table | fullscreen',
toolbar: 'undo redo | fontfamily fontsizeinput | forecolor backcolor bold italic underlineformats removeformat | align lineheight indent outdent bullist numlist table chip | fullscreen',
toolbar_mode: 'sliding',
license_key: 'gpl',
skin: themeAssets.skinName,
@@ -251,6 +305,64 @@ export function createSlideFormEditorController(options) {
placeholder: String(source.getAttribute('placeholder') || '').trim(),
setup: function (editor) {
editorInstances.set(regionId, editor);
editor.ui.registry.addButton('chip', {
icon: 'addtag',
tooltip: 'Chip style',
onAction: function () {
applyInlineFormat(regionId, editor, 'chip');
}
});
editor.ui.registry.addSplitButton('underlineformats', {
icon: 'underline',
tooltip: 'Text formats',
onAction: function () {
applyEditorCommand(regionId, editor, 'Underline');
},
onItemAction: function (_api, value) {
if (value === 'strikethrough') {
applyEditorCommand(regionId, editor, 'Strikethrough');
return;
}
if (value === 'subscript') {
applyEditorCommand(regionId, editor, 'Subscript');
return;
}
if (value === 'superscript') {
applyEditorCommand(regionId, editor, 'Superscript');
}
},
fetch: function (callback) {
callback([
{
type: 'choiceitem',
value: 'strikethrough',
icon: 'strikethrough',
text: 'Strikethrough',
},
{
type: 'choiceitem',
value: 'subscript',
icon: 'subscript',
text: 'Subscript',
},
{
type: 'choiceitem',
value: 'superscript',
icon: 'superscript',
text: 'Superscript',
}
]);
}
});
editor.on('init', function () {
registerInlineFormat(editor, 'chip', {
display: 'inline-block',
padding: '0.2em 0.6em',
borderRadius: '999px',
fontWeight: '700',
letterSpacing: '0.02em'
});
});
attachEditorEvents(regionId, editor);
}
}).then(function (editors) {
src/web/public/js/slides/slide-form-regions.js
+97 -6
View File
@@ -10,6 +10,7 @@ export function createSlideFormRegionHelpers(options) {
var apiSources = Array.isArray(settings.apiSources) ? settings.apiSources : [];
var timetableGroups = Array.isArray(settings.timetableGroups) ? settings.timetableGroups : [];
var getRegionTypeModule = typeof settings.getRegionTypeModule === 'function' ? settings.getRegionTypeModule : function () { return null; };
var requestPreviewRender = typeof settings.requestPreviewRender === 'function' ? settings.requestPreviewRender : function () {};
var placeholderUtils = window.placeholderUtils || {};
var placeholderChips = window.placeholderChips || {};
var escapeHtml = typeof settings.escapeHtml === 'function'
@@ -76,6 +77,11 @@ export function createSlideFormRegionHelpers(options) {
}) || null;
}
function getRssFeedItemCount(feedId) {
var feed = getRssFeedById(feedId);
return feed && Array.isArray(feed.items) ? feed.items.length : 0;
}
function getRssFieldList(feedId) {
var module = getRegionTypeModule('rss');
if (module && typeof module.getFieldList === 'function') {
@@ -128,16 +134,18 @@ export function createSlideFormRegionHelpers(options) {
? placeholderChips.renderChip(field)
: '<span class="chip">{{' + escapeHtml(field) + '}}</span>';
}).join('');
var transformHint = '<div class="text-body-secondary small mt-1">Placeholder values support transforms, for example <code>{{title.upper()}}</code>, <code>{{title.title()}}</code>, <code>{{title.lower()}}</code>, <code>{{publishedAt.format("MMM D, YYYY")}}</code>.</div>';
if (!overflowFields.length) {
return visibleMarkup;
return visibleMarkup + transformHint;
}
return '' +
visibleMarkup +
'<details class="w-100 mt-2" data-placeholder-chips-more>' +
transformHint +
'<details class="w-100 mt-1" data-placeholder-chips-more>' +
'<summary class="small text-body-secondary">Show ' + escapeHtml(overflowFields.length) + ' more fields</summary>' +
'<div class="d-flex flex-wrap gap-2 mt-2">' + overflowFields.map(function (field) {
'<div class="d-flex flex-wrap gap-2 mt-1">' + overflowFields.map(function (field) {
return typeof placeholderChips.renderChip === 'function'
? placeholderChips.renderChip(field)
: '<span class="chip">{{' + escapeHtml(field) + '}}</span>';
@@ -212,6 +220,43 @@ export function createSlideFormRegionHelpers(options) {
container.innerHTML = buildLimitedPlaceholderChipMarkup(getRssFieldList(feedId), 'No RSS fields available.');
}
function updateRssItemNumberLimit(regionId, feedId) {
var card = templateFields ? templateFields.querySelector('[data-region-id="' + regionId + '"]') : null;
if (!card) {
return;
}
var input = card.querySelector('input[name="region_rss_item_number_' + regionId + '"]');
if (!input) {
return;
}
var itemCount = Math.max(1, Number(getRssFeedItemCount(feedId) || 1));
input.setAttribute('max', String(itemCount));
if (Number(input.value || 0) > itemCount) {
input.value = String(itemCount);
}
}
function clampRssItemNumber(regionId, feedId, itemNumber) {
var card = templateFields ? templateFields.querySelector('[data-region-id="' + regionId + '"]') : null;
if (!card) {
return '';
}
var input = card.querySelector('input[name="region_rss_item_number_' + regionId + '"]');
if (!input) {
return '';
}
var itemCount = Math.max(1, Number(getRssFeedItemCount(feedId) || 1));
var parsedValue = Math.max(1, Number(itemNumber || 1));
var clampedValue = Math.min(itemCount, Number.isFinite(parsedValue) && parsedValue > 0 ? parsedValue : 1);
input.setAttribute('max', String(itemCount));
input.value = String(clampedValue);
return String(clampedValue);
}
function getCurrentRssConfig(region) {
var module = getRegionTypeModule('rss');
if (module && typeof module.getCurrentConfig === 'function') {
@@ -568,6 +613,50 @@ export function createSlideFormRegionHelpers(options) {
return makeRegionCardCollapsible(module.renderEditorCard(buildRegionEditorCardContext(region)), region);
}
function bindRegionCards() {
if (!templateFields) {
return;
}
Array.prototype.forEach.call(templateFields.querySelectorAll('[data-region-id]'), function (card) {
var module = null;
if (!card || !card.querySelector || !card.querySelector('input[type="url"][name^="region_qr_code_"]')) {
return;
}
module = getRegionTypeModule('qr-code');
if (module && typeof module.bindEditorCard === 'function') {
module.bindEditorCard({
card: card,
region: { id: card.getAttribute('data-region-id') },
existingContent: existingContent,
requestPreviewRender: requestPreviewRender
});
}
});
}
function syncRegionCards() {
if (!templateFields) {
return Promise.resolve();
}
var syncs = [];
Array.prototype.forEach.call(templateFields.querySelectorAll('[data-region-id]'), function (card) {
if (!card || !card.querySelector || !card.querySelector('input[type="url"][name^="region_qr_code_"]')) {
return;
}
if (typeof card.__pulseQrSync === 'function') {
syncs.push(Promise.resolve(card.__pulseQrSync()));
}
});
return Promise.all(syncs);
}
function makeRegionCardCollapsible(html, region) {
if (typeof html !== 'string' || !html) {
return html;
@@ -666,7 +755,6 @@ export function createSlideFormRegionHelpers(options) {
var videoFileInput = card.querySelector('input[type="file"][name="region_video_' + region.id + '"]');
var webpageInput = card.querySelector('input[type="url"][name="region_webpage_' + region.id + '"]');
var rtmpInput = card.querySelector('input[type="url"][name="region_rtmp_' + region.id + '"]');
var disableAudioInput = card.querySelector('input[type="checkbox"][name="region_disable_audio_' + region.id + '"]');
var rssFeedInput = card.querySelector('select[name="region_rss_feed_id_' + region.id + '"]');
var rssItemInput = card.querySelector('input[name="region_rss_item_number_' + region.id + '"]');
var apiSourceInput = card.querySelector('select[name="region_api_source_id_' + region.id + '"]');
@@ -681,7 +769,7 @@ export function createSlideFormRegionHelpers(options) {
content.value = webpageInput ? webpageInput.value : (content.value || '');
} else if (region.region_type === 'rtmp') {
content.value = rtmpInput ? rtmpInput.value : (content.value || '');
content.disable_audio = disableAudioInput ? disableAudioInput.checked : (content.disable_audio === undefined ? true : Boolean(content.disable_audio));
content.disable_audio = false;
} else if (region.region_type === 'html') {
content.value = htmlInput ? htmlInput.value : (content.value || '');
} else if (region.region_type === 'time-date') {
@@ -691,7 +779,7 @@ export function createSlideFormRegionHelpers(options) {
} else if (region.region_type === 'rss') {
content.value = hiddenInput ? hiddenInput.value : (content.value || '');
content.feed_id = rssFeedInput ? rssFeedInput.value : content.feed_id;
content.item_number = rssItemInput ? rssItemInput.value : content.item_number;
content.item_number = rssItemInput ? clampRssItemNumber(region.id, content.feed_id, rssItemInput.value) : content.item_number;
} else if (region.region_type === 'api') {
content.value = hiddenInput ? hiddenInput.value : (content.value || '');
content.source_id = apiSourceInput ? apiSourceInput.value : content.source_id;
@@ -754,11 +842,14 @@ export function createSlideFormRegionHelpers(options) {
updateApiPlaceholderChips: updateApiPlaceholderChips,
updateApiSampleDataPanel: updateApiSampleDataPanel,
updateApiItemNumberLimit: updateApiItemNumberLimit,
updateRssItemNumberLimit: updateRssItemNumberLimit,
getCurrentApiConfig: getCurrentApiConfig,
reduceAspectRatio: reduceAspectRatio,
renderPreviewTextRegion: renderPreviewTextRegion,
startPreviewVideoPlayback: startPreviewVideoPlayback,
getRegionEditorCardHtml: getRegionEditorCardHtml,
bindRegionCards: bindRegionCards,
syncRegionCards: syncRegionCards,
buildRegionEditorCardContext: buildRegionEditorCardContext,
getPreviewRegionContent: getPreviewRegionContent,
buildPreviewRenderContext: buildPreviewRenderContext,
src/web/public/js/slides/slide-form.js
+96 -19
View File
@@ -114,7 +114,7 @@ import { createSlideFormPreviewHelpers } from '/assets/js/slides/slide-form-prev
requestPreviewRender: requestPreviewRender
});
var regionUtils = window.pulseRegionUtils || {};
var slideRegionHelpers = createSlideFormRegionHelpers({
var slideRegionHelperOptions = {
templateFields: templateFields,
existingContent: existingContent,
rssFeeds: rssFeeds,
@@ -124,8 +124,10 @@ import { createSlideFormPreviewHelpers } from '/assets/js/slides/slide-form-prev
uploadMaxLabel: uploadMaxLabel,
uploadVideoMaxLabel: uploadVideoMaxLabel,
escapeHtml: escapeHtml,
getRegionTypeModule: getRegionTypeModule
});
getRegionTypeModule: getRegionTypeModule,
requestPreviewRender: requestPreviewRender
};
var slideRegionHelpers = createSlideFormRegionHelpers(slideRegionHelperOptions);
var slidePreviewHelpers = createSlideFormPreviewHelpers({
getRegionTypeModule: getRegionTypeModule,
escapeHtml: escapeHtml
@@ -139,6 +141,8 @@ import { createSlideFormPreviewHelpers } from '/assets/js/slides/slide-form-prev
var renderPreviewTextRegion = slidePreviewHelpers.renderPreviewTextRegion;
var buildRegionEditorCardContext = slideRegionHelpers.buildRegionEditorCardContext;
var getRegionEditorCardHtml = slideRegionHelpers.getRegionEditorCardHtml;
var bindRegionCards = slideRegionHelpers.bindRegionCards;
var syncRegionCards = slideRegionHelpers.syncRegionCards;
var getPreviewRegionContent = slideRegionHelpers.getPreviewRegionContent;
var buildPreviewRenderContext = slideRegionHelpers.buildPreviewRenderContext;
var startPreviewVideoPlayback = slidePreviewHelpers.startPreviewVideoPlayback;
@@ -147,6 +151,28 @@ import { createSlideFormPreviewHelpers } from '/assets/js/slides/slide-form-prev
return templates.find(function (item) { return Number(item.id) === Number(templateSelect.value); }) || null;
}
function hasMeaningfulValue(value) {
if (value === null || value === undefined) {
return false;
}
if (Array.isArray(value)) {
return value.some(hasMeaningfulValue);
}
if (typeof value === 'object') {
return Object.keys(value).some(function (key) {
return hasMeaningfulValue(value[key]);
});
}
return String(value).trim() !== '';
}
function hasExistingSlideContent() {
return hasMeaningfulValue(existingContent);
}
function clearImagePreviewUrls() {
templateFields.querySelectorAll('input[type="file"][name^="region_image_"], input[type="file"][name^="region_video_"]').forEach(function (input) {
if (input.dataset.previewUrl) {
@@ -170,6 +196,10 @@ import { createSlideFormPreviewHelpers } from '/assets/js/slides/slide-form-prev
return String(card.dataset.regionMediaType || '').trim();
}
if (card.querySelector && card.querySelector('input[type="file"][name^="region_qr_image_"], input[type="url"][name^="region_qr_code_"]')) {
return 'qr-code';
}
var regionTypeInput = card.querySelector ? card.querySelector('input[type="hidden"][name="region_type[]"]') : null;
return String(regionTypeInput && regionTypeInput.value || '').trim();
}
@@ -192,6 +222,7 @@ import { createSlideFormPreviewHelpers } from '/assets/js/slides/slide-form-prev
return syncVideoRegionDuration(card, source);
},
markEdited: function () {
templateSelectorLock.arm();
templateSelectorLock.markEdited();
requestPreviewRender();
},
@@ -201,7 +232,7 @@ import { createSlideFormPreviewHelpers } from '/assets/js/slides/slide-form-prev
}) : null;
function buildRegionMediaHookContext(input, file) {
var regionId = input && input.name ? input.name.replace(/^region_(?:image|video)_/, '') : '';
var regionId = input && input.name ? input.name.replace(/^region_(?:image|video|qr_image)_/, '') : '';
var card = regionId ? templateFields.querySelector('[data-region-id="' + regionId + '"]') : null;
return {
@@ -220,7 +251,7 @@ import { createSlideFormPreviewHelpers } from '/assets/js/slides/slide-form-prev
}
function handleRegionMediaFileSelection(input, file) {
var card = input && input.name ? templateFields.querySelector('[data-region-id="' + input.name.replace(/^region_(?:image|video)_/, '') + '"]') : null;
var card = input && input.name ? templateFields.querySelector('[data-region-id="' + input.name.replace(/^region_(?:image|video|qr_image)_/, '') + '"]') : null;
var module = getRegionEditorModule(card);
var hookContext = buildRegionMediaHookContext(input, file);
@@ -241,14 +272,19 @@ import { createSlideFormPreviewHelpers } from '/assets/js/slides/slide-form-prev
return;
}
var mediaType = card && card.dataset && String(card.dataset.regionMediaType || '').trim() === 'video' ? 'video' : 'image';
var mediaType = card && card.dataset && String(card.dataset.regionMediaType || '').trim() === 'video'
? 'video'
: card && card.querySelector && card.querySelector('input[type="file"][name^="region_qr_image_"]')
? 'qr-image'
: 'image';
var isVideo = mediaType === 'video';
var isQrImage = mediaType === 'qr-image';
previewBox.innerHTML = value
? '<div class="slide-image-region-preview-shell" data-remove-' + (isVideo ? 'region-video' : 'region-image') + '="' + escapeHtml(card.getAttribute('data-region-id') || '') + '" role="button" tabindex="0" aria-label="Remove ' + (isVideo ? 'video' : 'image') + '">' +
? '<div class="slide-image-region-preview-shell" data-remove-' + (isVideo ? 'region-video' : isQrImage ? 'region-qr-image' : 'region-image') + '="' + escapeHtml(card.getAttribute('data-region-id') || '') + '" role="button" tabindex="0" aria-label="Remove ' + (isVideo ? 'video' : isQrImage ? 'QR image' : 'image') + '">' +
(isVideo
? '<video class="slide-image-region-preview" src="' + escapeHtml(value) + '" autoplay loop muted playsinline preload="metadata"></video>'
: '<img class="slide-image-region-preview" src="' + escapeHtml(value) + '" alt="Current image preview" />') +
: '<img class="slide-image-region-preview" src="' + escapeHtml(value) + '" alt="' + (isQrImage ? 'Current QR image preview' : 'Current image preview') + '" />') +
'<span class="slide-image-region-preview-remove" aria-hidden="true"><i class="bi bi-trash3" aria-hidden="true"></i></span>' +
'</div>'
: '<div class="slide-image-region-preview slide-image-region-preview-empty">No ' + (isVideo ? 'video' : 'image') + '</div>';
@@ -389,15 +425,15 @@ import { createSlideFormPreviewHelpers } from '/assets/js/slides/slide-form-prev
}
function getRegionImageInputs() {
return Array.prototype.slice.call(templateFields.querySelectorAll('input[type="file"][name^="region_image_"], input[type="file"][name^="region_video_"]'));
return Array.prototype.slice.call(templateFields.querySelectorAll('input[type="file"][name^="region_image_"], input[type="file"][name^="region_video_"], input[type="file"][name^="region_qr_image_"]'));
}
function getRegionMediaInputs() {
return getRegionImageInputs();
return Array.prototype.slice.call(templateFields.querySelectorAll('input[type="file"][name^="region_image_"], input[type="file"][name^="region_video_"], input[type="file"][name^="region_qr_image_"]'));
}
function hasPendingRegionImageUpload() {
return getRegionImageInputs().some(function (input) {
return getRegionMediaInputs().some(function (input) {
return Boolean(input && input.files && input.files.length);
});
}
@@ -448,6 +484,14 @@ import { createSlideFormPreviewHelpers } from '/assets/js/slides/slide-form-prev
return;
}
try {
if (previewPopupWindow.location && previewPopupWindow.location.pathname !== '/slides/popup-preview') {
return;
}
} catch (_error) {
return;
}
previewPopupWindow.location.hash = buildPreviewPopupHash();
}
@@ -471,13 +515,18 @@ import { createSlideFormPreviewHelpers } from '/assets/js/slides/slide-form-prev
'top=' + top
].join(',');
previewPopupWindow = window.open(buildPreviewPopupUrl(), 'slide-preview-popup', previewPopupFeatures);
previewPopupWindow = window.open('about:blank', 'slide-preview-popup', previewPopupFeatures);
if (!previewPopupWindow) {
return;
}
try {
previewPopupWindow.location.replace(buildPreviewPopupUrl());
} catch (_error) {
previewPopupWindow.location.href = buildPreviewPopupUrl();
}
previewPopupWindow.focus();
syncPopupPreview();
}
function syncSlideEditorSidebar() {
@@ -632,6 +681,7 @@ import { createSlideFormPreviewHelpers } from '/assets/js/slides/slide-form-prev
var updateApiSampleDataPanel = slideRegionHelpers.updateApiSampleDataPanel;
var updateApiItemNumberLimit = slideRegionHelpers.updateApiItemNumberLimit;
var getCurrentApiConfig = slideRegionHelpers.getCurrentApiConfig;
var updateRssItemNumberLimit = slideRegionHelpers.updateRssItemNumberLimit;
function renderTemplate() {
templateSelectorLock.reset();
@@ -663,6 +713,9 @@ import { createSlideFormPreviewHelpers } from '/assets/js/slides/slide-form-prev
});
slideFormEditorController.renderEditors();
window.requestAnimationFrame(function () {
bindRegionCards();
});
templateFields.querySelectorAll('input[name^="region_api_item_number_"]').forEach(function (input) {
var regionId = input.name.replace(/^region_api_item_number_/, '');
var sourceInput = templateFields.querySelector('select[name="region_api_source_id_' + regionId + '"]');
@@ -671,19 +724,42 @@ import { createSlideFormPreviewHelpers } from '/assets/js/slides/slide-form-prev
updateApiItemNumberLimit(regionId, sourceInput.value, pathInput ? pathInput.value : '');
}
});
templateFields.querySelectorAll('input[name^="region_rss_item_number_"]').forEach(function (input) {
var regionId = input.name.replace(/^region_rss_item_number_/, '');
var feedInput = templateFields.querySelector('select[name="region_rss_feed_id_' + regionId + '"]');
if (feedInput) {
updateRssItemNumberLimit(regionId, feedInput.value);
}
});
if (typeof regionUtils.bindRegionMediaRemoveControls === 'function') {
regionUtils.bindRegionMediaRemoveControls(templateFields, {
getCardByRegionId: function (regionId) {
return templateFields.querySelector('[data-region-id="' + regionId + '"]');
},
getMediaType: function (card) {
getMediaType: function (card, button) {
if (button && button.hasAttribute && button.hasAttribute('data-remove-region-qr-image')) {
return 'qr-image';
}
if (button && button.hasAttribute && button.hasAttribute('data-remove-region-video')) {
return 'video';
}
return card && card.dataset && String(card.dataset.regionMediaType || '').trim() === 'video' ? 'video' : 'image';
},
getExistingMediaPrefix: function (mediaType) {
if (String(mediaType || '').trim() === 'qr-image') {
return 'existing_region_qr_image_';
}
return String(mediaType || '').trim() === 'video' ? 'existing_region_video_' : 'existing_region_image_';
},
getMediaPrefix: function (mediaType) {
if (String(mediaType || '').trim() === 'qr-image') {
return 'region_qr_image_';
}
return String(mediaType || '').trim() === 'video' ? 'region_video_' : 'region_image_';
},
getVideoDurationHiddenInput: function (regionId) {
@@ -711,6 +787,7 @@ import { createSlideFormPreviewHelpers } from '/assets/js/slides/slide-form-prev
if (input.name.indexOf('region_rss_') === 0) {
var rssFeed = input.name.indexOf('region_rss_feed_id_') === 0 ? input.value : (templateFields.querySelector('select[name="region_rss_feed_id_' + regionId + '"]') || {}).value;
updateRssPlaceholderChips(regionId, rssFeed);
updateRssItemNumberLimit(regionId, rssFeed);
}
if (input.name.indexOf('region_api_') === 0) {
var apiSource = input.name.indexOf('region_api_source_id_') === 0 ? input.value : (templateFields.querySelector('select[name="region_api_source_id_' + regionId + '"]') || {}).value;
@@ -728,6 +805,7 @@ import { createSlideFormPreviewHelpers } from '/assets/js/slides/slide-form-prev
if (input.name.indexOf('region_rss_') === 0) {
var rssFeed = input.name.indexOf('region_rss_feed_id_') === 0 ? input.value : (templateFields.querySelector('select[name="region_rss_feed_id_' + regionId + '"]') || {}).value;
updateRssPlaceholderChips(regionId, rssFeed);
updateRssItemNumberLimit(regionId, rssFeed);
}
if (input.name.indexOf('region_api_') === 0) {
var apiSource = input.name.indexOf('region_api_source_id_') === 0 ? input.value : (templateFields.querySelector('select[name="region_api_source_id_' + regionId + '"]') || {}).value;
@@ -742,16 +820,12 @@ import { createSlideFormPreviewHelpers } from '/assets/js/slides/slide-form-prev
});
});
if (existingTemplateId) {
if (existingTemplateId && hasExistingSlideContent()) {
templateSelectorLock.arm();
templateSelectorLock.markEdited();
requestPreviewRender();
return;
}
window.requestAnimationFrame(function () {
templateSelectorLock.arm();
});
requestPreviewRender();
}
@@ -766,6 +840,7 @@ import { createSlideFormPreviewHelpers } from '/assets/js/slides/slide-form-prev
throw new Error('Wait for the image upload to finish before saving.');
}
await slideFormEditorController.syncEditors();
await syncRegionCards();
},
fallbackSuccessMessage: 'Saved slide.',
afterSuccess: function () {
@@ -792,10 +867,12 @@ import { createSlideFormPreviewHelpers } from '/assets/js/slides/slide-form-prev
templateSelect.addEventListener('change', renderTemplate);
templateFields.addEventListener('change', function () {
templateSelectorLock.arm();
templateSelectorLock.markEdited();
requestPreviewRender();
});
templateFields.addEventListener('input', function () {
templateSelectorLock.arm();
templateSelectorLock.markEdited();
requestPreviewRender();
});
src/web/public/js/templates/template-designer-utils.js
+5 -1
View File
@@ -78,6 +78,8 @@
return Math.max(min, Math.min(max, value));
}
var MAX_ANIMATION_REPEAT_COUNT = 999;
function getRegionName(card) {
return String(card.querySelector('[name="region_name[]"]').value || '').trim();
}
@@ -204,7 +206,9 @@
normalized.preset = normalizePreviewAnimation(value.preset !== undefined ? value.preset : fallbackPreset || 'none');
normalized.duration_ms = Number.isFinite(Number(value.duration_ms)) && Number(value.duration_ms) > 0 ? Math.round(Number(value.duration_ms)) : null;
normalized.delay_ms = Number.isFinite(Number(value.delay_ms)) && Number(value.delay_ms) >= 0 ? Math.round(Number(value.delay_ms)) : null;
normalized.iterations = Number.isFinite(Number(value.iterations)) && Number(value.iterations) > 0 ? Math.round(Number(value.iterations)) : null;
normalized.iterations = Number.isFinite(Number(value.iterations)) && Number(value.iterations) > 0
? clamp(Math.round(Number(value.iterations)), 1, MAX_ANIMATION_REPEAT_COUNT)
: null;
normalized.easing = String(value.easing || '').trim();
normalized.fill_mode = String(value.fill_mode || '').trim();
return normalized;
src/web/public/js/templates/template-designer.js
+301 -52
View File
@@ -50,6 +50,8 @@
var selectedIndex = -1;
var activeAnimationCard = null;
var overlayRenderFrame = 0;
var stageResizeObserver = null;
var regionNameValidationToastShown = false;
var previewState = {
active: false,
mode: '',
@@ -192,6 +194,40 @@
card.querySelector('[name="region_label[]"]').value = next;
}
function normalizeRegionNamePrefix(regionType) {
var prefix = String(regionType || '').trim().toLowerCase().replace(/[^a-z0-9]+/g, '_').replace(/^_+|_+$/g, '');
return prefix || 'region';
}
function buildDefaultRegionName(regionType, index) {
return normalizeRegionNamePrefix(regionType) + '_' + index;
}
function getNextDefaultRegionName(regionType) {
var normalizedType = normalizeRegionNamePrefix(regionType);
var nextIndex = getCards().reduce(function (count, card) {
var currentType = normalizeRegionNamePrefix(card.querySelector('[name="region_type[]"]').value || '');
if (currentType !== normalizedType) {
return count;
}
var currentName = getRegionName(card);
var expectedPrefix = normalizedType + '_';
if (currentName.indexOf(expectedPrefix) !== 0) {
return count;
}
var suffix = Number(currentName.slice(expectedPrefix.length));
if (!Number.isFinite(suffix) || suffix < 1) {
return count;
}
return Math.max(count, suffix);
}, 0) + 1;
return buildDefaultRegionName(normalizedType, nextIndex);
}
function validateRegionNames() {
var cards = getCards();
var names = {};
@@ -230,6 +266,17 @@
return !hasDuplicate;
}
function notifyRegionNameValidationError(message) {
if (regionNameValidationToastShown) {
return;
}
regionNameValidationToastShown = true;
if (typeof showToast === 'function') {
showToast(message || 'Region names must be unique on this template.', 'warning');
}
}
function readCard(card) {
return utils.readCard ? utils.readCard(card) : {
region_key: getRegionName(card),
@@ -304,6 +351,19 @@
});
}
function updatePreviewButtonIcon(button, iconClass) {
if (!button) {
return;
}
var icon = button.querySelector('[data-preview-icon]');
if (!icon) {
return;
}
icon.className = 'bi ' + iconClass + ' me-1';
}
function updatePreviewControlState() {
var activeMode = previewState.active ? previewState.mode : '';
@@ -315,7 +375,9 @@
var available = hasPreviewAnimationForMode(entry.mode);
var disabled = !available || (previewState.active && activeMode !== entry.mode);
entry.button.disabled = disabled;
entry.button.classList.toggle('active', previewState.active && activeMode === entry.mode);
entry.button.classList.toggle('btn-outline-secondary', disabled);
entry.button.classList.toggle('btn-info', !disabled);
updatePreviewButtonIcon(entry.button, previewState.active && activeMode === entry.mode ? 'bi-stop-fill' : 'bi-play-fill');
entry.button.setAttribute('aria-pressed', previewState.active && activeMode === entry.mode ? 'true' : 'false');
});
}
@@ -380,6 +442,8 @@
}
}
var MAX_ANIMATION_REPEAT_COUNT = 999;
function getPreviewAnimationStepTimingMs(step, mode, animateCssMode) {
var normalizedMode = String(mode || '').trim().toLowerCase();
var durationMs = Number(step && step.duration_ms);
@@ -416,7 +480,9 @@
normalized.preset = normalizePreviewAnimation(value.preset !== undefined ? value.preset : fallbackPreset || 'none');
normalized.duration_ms = Number.isFinite(Number(value.duration_ms)) && Number(value.duration_ms) > 0 ? Math.round(Number(value.duration_ms)) : null;
normalized.delay_ms = Number.isFinite(Number(value.delay_ms)) && Number(value.delay_ms) >= 0 ? Math.round(Number(value.delay_ms)) : null;
normalized.iterations = Number.isFinite(Number(value.iterations)) && Number(value.iterations) > 0 ? Math.round(Number(value.iterations)) : null;
normalized.iterations = Number.isFinite(Number(value.iterations)) && Number(value.iterations) > 0
? Math.min(MAX_ANIMATION_REPEAT_COUNT, Math.max(1, Math.round(Number(value.iterations))))
: null;
normalized.fill_mode = String(value.fill_mode || '').trim();
return normalized;
}
@@ -599,11 +665,11 @@
var delayInput = getAnimationModalField(stepName, 'delay_ms');
if (presetInput) { presetInput.value = step.preset; }
if (durationInput) { durationInput.value = step.duration_ms === null || step.duration_ms === undefined || Number(step.duration_ms) <= 0 ? '1000' : String(step.duration_ms); }
if (durationInput) { durationInput.value = String(getAnimationDurationPercent(step.duration_ms)); }
if (delayInput) { delayInput.value = step.delay_ms === null || step.delay_ms === undefined ? '0' : String(step.delay_ms); }
if (stepName === 'loop') {
var iterationsInput = getAnimationModalField(stepName, 'iterations');
if (iterationsInput) { iterationsInput.value = step.iterations === null || step.iterations === undefined ? '1' : String(step.iterations); }
if (iterationsInput) { iterationsInput.value = step.iterations === null || step.iterations === undefined ? '1' : String(Math.min(MAX_ANIMATION_REPEAT_COUNT, Math.max(1, Number(step.iterations) || 1))); }
}
});
}
@@ -617,6 +683,44 @@
return Number.isFinite(next) ? Math.round(next) : null;
}
function clampAnimationModalField(field) {
if (!field || !field.matches) {
return;
}
var isLoopIterationsField = field.matches('[data-animation-modal-step="loop"][data-animation-modal-field="iterations"]');
var isDurationField = field.matches('[data-animation-modal-field="duration_ms"]');
if (!isLoopIterationsField && !isDurationField) {
return;
}
var fieldValue = readNumberField(field.value);
if (fieldValue === null) {
return;
}
var normalizedValue = isLoopIterationsField
? Math.min(MAX_ANIMATION_REPEAT_COUNT, Math.max(1, fieldValue))
: Math.min(200, Math.max(1, fieldValue));
if (String(normalizedValue) !== String(field.value)) {
field.value = String(normalizedValue);
}
}
function getAnimationDurationPercent(durationMs) {
var value = Number(durationMs);
if (!Number.isFinite(value) || value <= 0) {
return 100;
}
return Math.min(200, Math.max(1, Math.round(value / 10)));
}
function getAnimationDurationMs(durationPercent) {
var percent = Math.min(200, Math.max(1, readNumberField(durationPercent) || 100));
return percent * 10;
}
function readAnimationModalConfig() {
if (!animationAdvancedModal) {
return null;
@@ -631,11 +735,11 @@
var nextStep = Object.assign({}, config[stepName] || {});
nextStep.preset = presetInput ? presetInput.value : nextStep.preset;
nextStep.duration_ms = readNumberField(durationInput ? durationInput.value : '') || 1000;
nextStep.duration_ms = getAnimationDurationMs(durationInput ? durationInput.value : '');
nextStep.delay_ms = readNumberField(delayInput ? delayInput.value : '') || 0;
if (stepName === 'loop') {
var iterationsInput = getAnimationModalField(stepName, 'iterations');
nextStep.iterations = readNumberField(iterationsInput ? iterationsInput.value : '') || 1;
nextStep.iterations = Math.min(MAX_ANIMATION_REPEAT_COUNT, Math.max(1, readNumberField(iterationsInput ? iterationsInput.value : '') || 1));
}
config[stepName] = normalizeAnimationStep(nextStep, 'none');
@@ -892,6 +996,104 @@
canvasHeightInput.value = Math.max(1, Number(option.dataset.height || canvasHeightInput.value || 1080));
updateAspectRatio();
updateCanvasSizeSummary();
getCards().forEach(function (card) {
normalizeRegionCard(card, 'width');
});
}
function fitRegionToCanvas(region, aspect) {
var size = getCanvasSize();
var minSize = 12;
var next = {
x: Math.round(Number(region && region.x !== undefined ? region.x : 0)),
y: Math.round(Number(region && region.y !== undefined ? region.y : 0)),
width: Math.max(minSize, Math.round(Number(region && region.width !== undefined ? region.width : minSize))),
height: Math.max(minSize, Math.round(Number(region && region.height !== undefined ? region.height : minSize)))
};
if (aspect && Number.isFinite(aspect.ratio) && aspect.ratio > 0) {
if (next.width > size.width || next.height > size.height) {
var canvasRatio = size.width / Math.max(1, size.height);
if (canvasRatio >= aspect.ratio) {
next.height = Math.max(minSize, Math.min(size.height, next.height, Math.round(size.height)));
next.width = Math.max(minSize, Math.round(next.height * aspect.ratio));
if (next.width > size.width) {
next.width = size.width;
next.height = Math.max(minSize, Math.round(next.width / aspect.ratio));
}
} else {
next.width = Math.max(minSize, Math.min(size.width, next.width, Math.round(size.width)));
next.height = Math.max(minSize, Math.round(next.width / aspect.ratio));
if (next.height > size.height) {
next.height = size.height;
next.width = Math.max(minSize, Math.round(next.height * aspect.ratio));
}
}
}
} else {
if (next.width > size.width) {
next.width = size.width;
next.x = 0;
}
if (next.height > size.height) {
next.height = size.height;
next.y = 0;
}
}
if (next.x + next.width > size.width) {
next.x = size.width - next.width;
}
if (next.y + next.height > size.height) {
next.y = size.height - next.height;
}
next.x = clamp(next.x, 0, Math.max(0, size.width - next.width));
next.y = clamp(next.y, 0, Math.max(0, size.height - next.height));
return next;
}
function normalizeRegionCard(card, changedField) {
if (!card) {
return null;
}
var current = readCard(card);
var next = {
x: current.x,
y: current.y,
width: Math.max(12, Math.round(current.width || 0)),
height: Math.max(12, Math.round(current.height || 0))
};
var lockRatio = normalizeLockRatio(current.lock_ratio);
var aspect = lockRatio ? parseLockRatio(lockRatio) : null;
var size = getCanvasSize();
if (aspect) {
if (changedField === 'height') {
next.width = Math.max(12, Math.round(next.height * aspect.ratio));
} else {
next.height = Math.max(12, Math.round(next.width / aspect.ratio));
}
if (next.width > size.width || next.height > size.height) {
var scale = Math.min(size.width / Math.max(1, next.width), size.height / Math.max(1, next.height), 1);
if (scale < 1) {
next.width = Math.max(12, Math.round(next.width * scale));
next.height = Math.max(12, Math.round(next.height * scale));
if (changedField === 'height') {
next.width = Math.max(12, Math.round(next.height * aspect.ratio));
} else {
next.height = Math.max(12, Math.round(next.width / aspect.ratio));
}
}
}
}
next = fitRegionToCanvas(next, aspect);
writeCard(card, next);
return next;
}
function updateBackgroundPreview(file) {
@@ -932,6 +1134,25 @@
lockChip.textContent = 'Locked ' + lockRatio;
}
function updateRegionLockRatioState(card) {
var lockRatioInput = card.querySelector('[name="region_lock_ratio[]"]');
var regionTypeInput = card.querySelector('[name="region_type[]"]');
if (!lockRatioInput || !regionTypeInput) {
return;
}
var isQrCode = String(regionTypeInput.value || '').trim() === 'qr-code';
lockRatioInput.disabled = isQrCode;
lockRatioInput.setAttribute('aria-disabled', isQrCode ? 'true' : 'false');
if (isQrCode) {
lockRatioInput.value = '1:1';
lockRatioInput.title = 'QR code regions are fixed to 1:1.';
} else {
lockRatioInput.removeAttribute('title');
}
}
function getRegionLockRatio(card) {
return normalizeLockRatio(card.querySelector('[name="region_lock_ratio[]"]').value);
}
@@ -941,22 +1162,10 @@
}
function syncLockedDimensions(card, changedField) {
var lockRatio = getRegionLockRatio(card);
var aspect = lockRatio ? parseLockRatio(lockRatio) : null;
if (!aspect) {
return;
}
var widthInput = card.querySelector('[name="region_width[]"]');
var heightInput = card.querySelector('[name="region_height[]"]');
var width = Math.max(1, Number(widthInput.value || 0));
var height = Math.max(1, Number(heightInput.value || 0));
if (changedField === 'width') {
heightInput.value = Math.max(1, Math.round(width / aspect.ratio));
} else if (changedField === 'height') {
widthInput.value = Math.max(1, Math.round(height * aspect.ratio));
}
normalizeRegionCard(card, changedField);
updateRegionLockBadge(card);
markTemplateFormDirty();
requestOverlayRender();
}
function getRegionChipLabel(regionType) {
@@ -964,7 +1173,7 @@
return window.pulseRegionTypes.getRegionChipLabel(regionType);
}
return regionType === 'image' ? 'Image' : regionType === 'video' ? 'Video' : regionType === 'webpage' ? 'Webpage' : regionType === 'html' ? 'HTML' : regionType === 'rtmp' ? 'RTMP' : regionType === 'rss' ? 'RSS' : 'Text';
return 'Text';
}
function populateRegionCard(card, region) {
@@ -995,7 +1204,7 @@
}
var regionLockRatioInput = card.querySelector('[name="region_lock_ratio[]"]');
if (regionLockRatioInput) {
regionLockRatioInput.value = normalizeLockRatio(region.lock_ratio);
regionLockRatioInput.value = normalizeLockRatio(region.lock_ratio || (String(region.region_type || '').trim() === 'qr-code' ? '1:1' : ''));
}
writeAnimationConfig(card, region.animation_json);
card.querySelector('[name="region_x[]"]').value = valueOrDefault(region.x, 80);
@@ -1003,6 +1212,7 @@
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);
updateRegionLockRatioState(card);
updateRegionLockBadge(card);
}
@@ -1053,6 +1263,7 @@
var animationResetButtons = card.querySelectorAll('[data-animation-reset-button]');
var animationAdvancedButton = card.querySelector('[data-animation-advanced-button]');
nameInput.addEventListener('input', function () {
regionNameValidationToastShown = false;
syncRegionIdentity(card, nameInput.value);
updateRegionLabel(card);
validateRegionNames();
@@ -1062,6 +1273,7 @@
Array.prototype.forEach.call(animationPresetInputs, function (input) {
input.addEventListener('change', function () {
setAnimationPreset(card, input.getAttribute('data-animation-preset'), input.value);
markTemplateFormDirty();
requestOverlayRender();
});
});
@@ -1069,6 +1281,7 @@
button.addEventListener('click', function (event) {
event.preventDefault();
setAnimationPreset(card, button.getAttribute('data-animation-reset-button'), 'none');
markTemplateFormDirty();
requestOverlayRender();
});
});
@@ -1083,26 +1296,17 @@
}
if (lockRatioInput) {
lockRatioInput.addEventListener('input', function () {
updateRegionLockBadge(card);
requestOverlayRender();
syncLockedDimensions(card, 'width');
});
}
if (widthInput) {
widthInput.addEventListener('input', function () {
if (isRegionLocked(card)) {
syncLockedDimensions(card, 'width');
updateRegionLockBadge(card);
}
requestOverlayRender();
syncLockedDimensions(card, 'width');
});
}
if (heightInput) {
heightInput.addEventListener('input', function () {
if (isRegionLocked(card)) {
syncLockedDimensions(card, 'height');
updateRegionLockBadge(card);
}
requestOverlayRender();
syncLockedDimensions(card, 'height');
});
}
card.addEventListener('click', function (event) {
@@ -1114,6 +1318,7 @@
card.querySelector('[data-region-remove-button]').addEventListener('click', function (event) {
event.preventDefault();
card.remove();
markTemplateFormDirty();
if (!getCards().length) {
selectedIndex = -1;
} else if (selectedIndex >= getCards().length) {
@@ -1217,6 +1422,29 @@
renderOverlay();
}
function observeStageResize() {
if (!stage) {
return;
}
if (window.ResizeObserver) {
stageResizeObserver = new window.ResizeObserver(function () {
requestOverlayRender();
});
stageResizeObserver.observe(stage);
return;
}
window.addEventListener('resize', requestOverlayRender);
}
function markTemplateFormDirty() {
if (!templateForm) {
return;
}
templateForm.dataset.dirty = 'true';
}
function setSelected(index) {
if (previewState.active) {
return;
@@ -1246,6 +1474,7 @@
var card = makeRegionCard(region);
setRegionRemovalState(card);
regionList.appendChild(card);
markTemplateFormDirty();
setSelected(getCards().length - 1);
}
@@ -1257,9 +1486,9 @@
}
function createDefaultRegion(type) {
var count = getCards().length + 1;
var name = 'region_' + count;
var size = getDefaultRegionSize(type, '');
var name = getNextDefaultRegionName(type);
var lockRatio = String(type || '').trim() === 'qr-code' ? '1:1' : '';
var size = getDefaultRegionSize(type, lockRatio);
return {
region_key: name,
label: name,
@@ -1269,7 +1498,7 @@
y: 80,
width: size.width,
height: size.height,
lock_ratio: '',
lock_ratio: lockRatio,
z_index: 1
};
}
@@ -1307,8 +1536,9 @@
var width = Math.abs(draft.end.x - draft.start.x);
var height = Math.abs(draft.end.y - draft.start.y);
if (width >= 8 && height >= 8) {
var region = clampRegion({ x: Math.min(draft.start.x, draft.end.x), y: Math.min(draft.start.y, draft.end.y), width: width, height: height });
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 });
var region = fitRegionToCanvas({ x: Math.min(draft.start.x, draft.end.x), y: Math.min(draft.start.y, draft.end.y), width: width, height: height });
var name = getNextDefaultRegionName('text');
addRegion({ region_key: name, label: name, region_type: 'text', x: region.x, y: region.y, width: region.width, height: region.height, z_index: 1 });
}
draft = null;
requestOverlayRender();
@@ -1336,6 +1566,7 @@
var nextX = clamp(startRegion.x + dx, 0, maxX);
var nextY = clamp(startRegion.y + dy, 0, maxY);
writeCard(cardAt(index), { x: nextX, y: nextY, width: startRegion.width, height: startRegion.height });
markTemplateFormDirty();
requestOverlayRender();
}
function upHandler() {
@@ -1439,8 +1670,9 @@
}
if (next.width < 12) { if (dir.indexOf('w') !== -1) { next.x -= 12 - next.width; } next.width = 12; }
if (next.height < 12) { if (dir.indexOf('n') !== -1) { next.y -= 12 - next.height; } next.height = 12; }
next = clampRegion(next);
next = fitRegionToCanvas(next, aspect);
writeCard(cardAt(index), { x: next.x, y: next.y, width: next.width, height: next.height });
markTemplateFormDirty();
requestOverlayRender();
}
function upHandler() {
@@ -1492,11 +1724,19 @@
animationAdvancedModal.addEventListener('hidden.bs.modal', function () {
activeAnimationCard = null;
});
animationAdvancedModal.addEventListener('input', function (event) {
clampAnimationModalField(event.target);
markTemplateFormDirty();
});
animationAdvancedModal.addEventListener('change', function () {
markTemplateFormDirty();
});
var animationModalApplyButton = animationAdvancedModal.querySelector('[data-animation-modal-apply]');
var animationModalResetButton = animationAdvancedModal.querySelector('[data-animation-modal-reset]');
if (animationModalApplyButton) {
animationModalApplyButton.addEventListener('click', function () {
saveAnimationModal();
markTemplateFormDirty();
if (window.pulseModal) {
window.pulseModal.hide(animationAdvancedModal);
}
@@ -1508,6 +1748,7 @@
return;
}
writeAnimationConfig(activeAnimationCard, normalizeAnimationConfig('{}'));
markTemplateFormDirty();
populateAnimationModal(activeAnimationCard);
requestOverlayRender();
});
@@ -1541,6 +1782,19 @@
setSelected(-1);
});
if (templateForm) {
templateForm.addEventListener('invalid', function (event) {
var target = event.target;
if (!target || !target.validationMessage || !target.validationMessage.match(/Region names must be unique on this template\.|Region name is required\./)) {
return;
}
if (target.closest && !target.closest('.region-item')) {
return;
}
notifyRegionNameValidationError(target.validationMessage);
}, true);
templateForm.addEventListener('formdata', function (event) {
if (previewState.active) {
event.preventDefault();
@@ -1552,16 +1806,13 @@
return;
}
getCards().forEach(function (card) {
if (isRegionLocked(card)) {
syncLockedDimensions(card, 'width');
updateRegionLockBadge(card);
}
normalizeRegionCard(card, 'width');
});
syncCanvasSizeSelection();
event.formData.set('regions_json', JSON.stringify(getCards().map(readCard)));
});
templateForm.addEventListener('submit', function () {
templateForm.addEventListener('submit', function (event) {
if (previewState.active) {
return;
}
@@ -1570,10 +1821,7 @@
return;
}
getCards().forEach(function (card) {
if (isRegionLocked(card)) {
syncLockedDimensions(card, 'width');
updateRegionLockBadge(card);
}
normalizeRegionCard(card, 'width');
});
syncCanvasSizeSelection();
regionsJsonInput.value = JSON.stringify(getCards().map(readCard));
@@ -1613,5 +1861,6 @@
renderRegionList(existingRegions);
syncCanvasSizeSelection();
updateStageBackgroundColor();
observeStageResize();
render();
})();
src/web/public/js/toast.js
+66
View File
@@ -1,4 +1,63 @@
(function (root) {
var pendingToastStorageKey = 'pulse:pending-toast';
function readPendingToast() {
try {
if (!root.sessionStorage) {
return null;
}
var rawValue = root.sessionStorage.getItem(pendingToastStorageKey);
if (!rawValue) {
return null;
}
root.sessionStorage.removeItem(pendingToastStorageKey);
var payload = JSON.parse(rawValue);
if (!payload || !payload.message) {
return null;
}
return {
message: String(payload.message || '').trim(),
variant: String(payload.variant || 'info').trim().toLowerCase() || 'info'
};
} catch (_error) {
return null;
}
}
function writePendingToast(message, variant) {
try {
if (!root.sessionStorage) {
return false;
}
var text = String(message || '').trim();
if (!text) {
return false;
}
root.sessionStorage.setItem(pendingToastStorageKey, JSON.stringify({
message: text,
variant: String(variant || 'info').trim().toLowerCase() || 'info'
}));
return true;
} catch (_error) {
return false;
}
}
function clearPendingToast() {
try {
if (root.sessionStorage) {
root.sessionStorage.removeItem(pendingToastStorageKey);
}
} catch (_error) {
// ignore storage cleanup failures
}
}
function getToastTitle(variant, message) {
var text = String(message || '').trim();
if (/\b(?:deleted|removed)\.?$/i.test(text)) {
@@ -219,9 +278,15 @@
function initToast() {
var toast = document.getElementById('app-toast');
if (!toast) {
var pendingToast = readPendingToast();
if (pendingToast) {
showToast(pendingToast.message, pendingToast.variant);
}
return;
}
clearPendingToast();
try {
var url = new URL(window.location.href);
if (url.searchParams.has('message')) {
@@ -250,6 +315,7 @@
root.showToast = showToast;
root.initToast = initToast;
root.getMessageVariant = getMessageVariant;
root.queueToastAfterRefresh = writePendingToast;
if (typeof module !== 'undefined' && module.exports) {
module.exports = {
src/web/public/js/web-ui-helpers.js
+209 -3
View File
@@ -10,7 +10,7 @@
.replace(/'/g, '&#39;');
}
function formatDashboardDate(value) {
function formatDashboardDate(value, useTwentyFourHour) {
if (!value) {
return '';
}
@@ -20,14 +20,20 @@
return '';
}
return new Intl.DateTimeFormat('en-US', {
var formatOptions = {
month: 'short',
day: '2-digit',
year: 'numeric',
hour: 'numeric',
minute: '2-digit',
second: '2-digit'
}).format(date);
};
if (useTwentyFourHour) {
formatOptions.hour12 = false;
}
return new Intl.DateTimeFormat('en-US', formatOptions).format(date);
}
function getClientRowKey(client) {
@@ -85,6 +91,206 @@
return ip;
}
window.escapeHtml = escapeHtml;
var defaultQrOptions = window.defaultQrOptions || {
width: 1000,
height: 1000,
type: 'canvas',
margin: 10,
qrOptions: {},
dotsOptions: {
color: '#000000',
type: 'square'
},
cornersSquareOptions: {
color: '#000000',
type: 'square'
},
cornersDotOptions: {
color: '#000000',
type: 'square'
},
backgroundOptions: {
color: '#ffffff'
}
};
var qrDotTypes = window.qrDotTypes || [
{ value: 'square', label: 'Square' },
{ value: 'dots', label: 'Dots' },
{ value: 'rounded', label: 'Rounded' },
{ value: 'extra-rounded', label: 'Extra rounded' },
{ value: 'classy', label: 'Classy' },
{ value: 'classy-rounded', label: 'Classy rounded' }
];
var qrCornerSquareTypes = window.qrCornerSquareTypes || [
{ value: 'square', label: 'Square' },
{ value: 'dot', label: 'Dot' },
{ value: 'rounded', label: 'Rounded' },
{ value: 'extra-rounded', label: 'Extra rounded' },
{ value: 'dots', label: 'Dots' },
{ value: 'classy', label: 'Classy' },
{ value: 'classy-rounded', label: 'Classy rounded' }
];
var qrCornerDotTypes = window.qrCornerDotTypes || [
{ value: 'square', label: 'Square' },
{ value: 'dot', label: 'Dot' },
{ value: 'rounded', label: 'Rounded' },
{ value: 'extra-rounded', label: 'Extra rounded' },
{ value: 'classy', label: 'Classy' },
{ value: 'classy-rounded', label: 'Classy rounded' }
];
function getOptionValue(option) {
if (option && typeof option === 'object' && option.value !== undefined && option.value !== null) {
return String(option.value).trim();
}
return String(option === undefined || option === null ? '' : option).trim();
}
function normalizeMarginValue(value, fallback) {
var parsed = Number(value);
return Number.isFinite(parsed) && parsed >= 0 ? Math.round(parsed) : fallback;
}
function normalizeHexColorValue(value, fallback) {
var raw = String(value === undefined || value === null ? '' : value).trim();
return raw || fallback;
}
function normalizeBooleanValue(value, fallback) {
if (value === undefined || value === null || value === '') {
return Boolean(fallback);
}
if (typeof value === 'boolean') {
return value;
}
var text = String(value).trim().toLowerCase();
if (text === 'true' || text === '1' || text === 'yes' || text === 'on') {
return true;
}
if (text === 'false' || text === '0' || text === 'no' || text === 'off') {
return false;
}
return Boolean(value);
}
function normalizeOptionValue(value, options, fallback) {
var text = String(value === undefined || value === null ? '' : value).trim();
for (var index = 0; index < options.length; index += 1) {
if (getOptionValue(options[index]) === text) {
return text;
}
}
return fallback;
}
function normalizeRatioValue(value, fallback) {
var parsed = Number(value);
return Number.isFinite(parsed) && parsed >= 0 ? parsed : fallback;
}
function normalizeGradientTypeValue(value, fallback) {
var text = String(value === undefined || value === null ? '' : value).trim().toLowerCase();
return text === 'radial' ? 'radial' : 'linear';
}
function normalizeGradientRotationValue(value, fallback) {
var parsed = Number(value);
return Number.isFinite(parsed) ? Math.round(parsed) : fallback;
}
function normalizeColorModeValue(value, fallback) {
var text = String(value === undefined || value === null ? '' : value).trim().toLowerCase();
return text === 'gradient' ? 'gradient' : 'single';
}
function normalizeColorValue(value, fallback) {
return normalizeHexColorValue(value, fallback);
}
function renderSelectOptions(options, currentValue) {
return options.map(function (option) {
var optionValue = getOptionValue(option);
var optionLabel = option && typeof option === 'object' && option.label !== undefined ? option.label : optionValue;
return '<option value="' + escapeHtml(optionValue) + '"' + (String(optionValue) === String(currentValue) ? ' selected' : '') + '>' + escapeHtml(optionLabel) + '</option>';
}).join('');
}
function normalizeSvgMarkup(svg) {
var markup = String(svg || '').trim();
if (!markup || markup.charAt(0) !== '<') {
return markup;
}
return markup.replace(/^<svg\b([^>]*)>/i, function (_match, attrText) {
var attrs = String(attrText || '');
if (!/\bwidth\s*=\s*/i.test(attrs)) {
attrs += ' width="95%"';
}
if (!/\bheight\s*=\s*/i.test(attrs)) {
attrs += ' height="95%"';
}
if (!/\bpreserveAspectRatio\s*=\s*/i.test(attrs)) {
attrs += ' preserveAspectRatio="xMidYMid meet"';
}
if (!/\bstyle\s*=\s*/i.test(attrs)) {
attrs += ' style="display:block;width:95%;height:95%;"';
}
return '<svg' + attrs + '>';
});
}
function normalizeQrSvg(svg) {
return normalizeSvgMarkup(svg);
}
async function blobToText(blob) {
if (!blob) {
return '';
}
if (typeof blob.text === 'function') {
return blob.text();
}
if (typeof FileReader === 'function') {
return await new Promise(function (resolve, reject) {
var reader = new FileReader();
reader.onload = function () {
resolve(String(reader.result || ''));
};
reader.onerror = function () {
reject(reader.error || new Error('Failed to read blob.'));
};
reader.readAsText(blob);
});
}
return '';
}
window.defaultQrOptions = defaultQrOptions;
window.qrDotTypes = qrDotTypes;
window.qrCornerSquareTypes = qrCornerSquareTypes;
window.qrCornerDotTypes = qrCornerDotTypes;
window.normalizeMarginValue = normalizeMarginValue;
window.normalizeHexColorValue = normalizeHexColorValue;
window.normalizeBooleanValue = normalizeBooleanValue;
window.normalizeOptionValue = normalizeOptionValue;
window.normalizeRatioValue = normalizeRatioValue;
window.normalizeGradientTypeValue = normalizeGradientTypeValue;
window.normalizeGradientRotationValue = normalizeGradientRotationValue;
window.normalizeColorModeValue = normalizeColorModeValue;
window.normalizeColorValue = normalizeColorValue;
window.renderSelectOptions = renderSelectOptions;
window.normalizeSvgMarkup = normalizeSvgMarkup;
window.normalizeQrSvg = normalizeQrSvg;
window.blobToText = blobToText;
window.pendingByRegionId = window.pendingByRegionId || Object.create(null);
window.webUiHelpers = {
escapeHtml: escapeHtml,
formatDashboardDate: formatDashboardDate,