diff --git a/CHANGELOG.md b/CHANGELOG.md index 185df77..9f06a38 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -2,6 +2,18 @@ All notable changes to this project will be documented in this file. +## 2.16.7 - 2026-10-22 + +### Changed + +- Slide advanced animation options open over the animation editor in a separate popup matching templates. Both use an "Advanced animations: [region]" title and support outside-click dismissal without applying changes. +- Slide animation playback controls remain visible above the right-hand settings while those settings scroll, with clearer spacing below field labels. + +### Fixed + +- Slide animation reset controls become available immediately after unsaved basic or advanced changes and restore template settings without requiring a slide save. +- Closing Advanced animations preserves the underlying editor's focus and scroll state, and closing all animation popups restores page scrolling. + ## 2.16.6 - 2026-10-22 ### Fixed diff --git a/build/package.player.json b/build/package.player.json index 86e89ba..6284fa9 100644 --- a/build/package.player.json +++ b/build/package.player.json @@ -1,6 +1,6 @@ { "name": "pulse-signage-player", - "version": "2.16.6", + "version": "2.16.7", "private": false, "description": "Pulse Signage player application bundle", "engines": { diff --git a/build/package.web.json b/build/package.web.json index feb2673..04942b3 100644 --- a/build/package.web.json +++ b/build/package.web.json @@ -1,6 +1,6 @@ { "name": "pulse-signage-web", - "version": "2.16.6", + "version": "2.16.7", "private": false, "description": "Pulse Signage web and bridge application bundle", "engines": { diff --git a/package-lock.json b/package-lock.json index 3150977..ff17dcc 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,12 +1,12 @@ { "name": "pulse-signage", - "version": "2.16.6", + "version": "2.16.7", "lockfileVersion": 3, "requires": true, "packages": { "": { "name": "pulse-signage", - "version": "2.16.6", + "version": "2.16.7", "dependencies": { "animate.css": "^4.1.1", "bootstrap-icons": "1.13.1", diff --git a/package.json b/package.json index 9ef35ed..057ba47 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "pulse-signage", - "version": "2.16.6", + "version": "2.16.7", "private": false, "description": "Pulse Signage application with MySQL and media storage", "engines": { diff --git a/src/web/public/css/theme-custom.css b/src/web/public/css/theme-custom.css index bacb683..054b949 100644 --- a/src/web/public/css/theme-custom.css +++ b/src/web/public/css/theme-custom.css @@ -2439,8 +2439,25 @@ html[data-bs-theme='dark'] .template-field-card .tox .tox-collection { min-height: 0; } +.slide-animation-properties { + display: grid; + grid-template-rows: auto minmax(0, 1fr); + gap: 1rem; + min-width: 0; + min-height: 0; +} + +.slide-animation-advanced-overlay { + z-index: 1075; +} + +.slide-animation-advanced-backdrop { + z-index: 1070; +} + .slide-animation-controls { min-width: 0; + min-height: 0; overflow-y: auto; padding: 0 4px; } @@ -2449,55 +2466,18 @@ html[data-bs-theme='dark'] .template-field-card .tox .tox-collection { grid-template-columns: repeat(2, minmax(0, 1fr)); } -.slide-animation-advanced-fields { - min-width: 0; - overflow-x: clip; -} - -#slide-animation-advanced { - gap: 0.5rem !important; -} - -.slide-animation-advanced-fields .row { +.slide-animation-controls .region-field-grid--animation label { display: grid; - grid-template-columns: minmax(0, 1fr); gap: 0.5rem; - margin: 0; -} - -.slide-animation-advanced-fields .row > * { - width: 100%; - max-width: 100%; - min-width: 0; - padding: 0; -} - -.slide-animation-advanced-fields .card, -.slide-animation-advanced-fields .card-body, -.slide-animation-advanced-fields label { - min-width: 0; -} - -.slide-animation-advanced-fields input, -.slide-animation-advanced-fields select { - width: 100%; - min-width: 0; -} - -#slide-animation-advanced[hidden] { - display: none !important; } .slide-animation-preview-panel { - container-type: size; min-width: 0; min-height: 0; - display: flex; - align-items: center; - justify-content: center; } #slide-animation-preview { + container-type: size; width: 100%; height: 100%; display: flex; @@ -2506,11 +2486,11 @@ html[data-bs-theme='dark'] .template-field-card .tox .tox-collection { } #slide-animation-preview .slide-preview-stage { - width: min(100%, calc(100cqh * var(--slide-layout-ratio, 1.777778))); + width: min(100cqw, calc(100cqh * var(--slide-layout-ratio, 1.777778))); flex-shrink: 0; } -.slide-animation-preview-panel [data-slide-animation-preview][aria-pressed="true"] { +.slide-animation-properties [data-slide-animation-preview][aria-pressed="true"] { color: var(--bs-btn-active-color, #fff); background-color: var(--bs-info); border-color: var(--bs-info); diff --git a/src/web/public/js/slides/slide-animation-editor.js b/src/web/public/js/slides/slide-animation-editor.js index e17e916..ae940f8 100644 --- a/src/web/public/js/slides/slide-animation-editor.js +++ b/src/web/public/js/slides/slide-animation-editor.js @@ -4,8 +4,10 @@ export function createSlideAnimationEditor(options) { var openButton = document.getElementById('adjust-slide-animations'); var regionSelect = document.getElementById('slide-animation-region'); var card = document.getElementById('slide-animation-fields'); - var advanced = document.getElementById('slide-animation-advanced'); - var advancedFields = advanced.querySelector('[data-animation-advanced-fields]'); + var advanced = document.getElementById('animation-advanced-modal'); + var advancedButton = card.querySelector('[data-animation-advanced-button]'); + var advancedOpen = false; + var advancedScrollBar = null; var stage = options.stage; var previewHost = document.getElementById('slide-animation-preview'); var previewButtons = Array.prototype.slice.call(modal.querySelectorAll('[data-slide-animation-preview]')); @@ -31,28 +33,26 @@ export function createSlideAnimationEditor(options) { ? draft[regionKey] : region && region.animation_json || '{}'; } - function getCurrentConfig() { - var config = controls.read(card); - return advanced.hidden ? config : controls.readAdvanced(advancedFields, config); - } function syncDraft() { if (!active || !selectedKey()) return; stopPreview(); - var config = getCurrentConfig(); + var config = controls.read(card); controls.write(card, config); draft[selectedKey()] = JSON.stringify(config); updatePreviewButtons(); + updateResetButtons(); + } + function updateResetButtons() { + document.getElementById('slide-animation-reset-region').disabled = !Object.prototype.hasOwnProperty.call(draft, selectedKey()); + document.getElementById('slide-animation-reset-all').disabled = !Object.keys(draft).length; } function renderRegion() { var key = selectedKey(); var region = regions().find(function (item) { return item.region_key === key; }); if (!region) return; controls.write(card, getConfig(key)); - controls.populateAdvanced(advancedFields, getConfig(key)); - advanced.hidden = true; updatePreviewButtons(); - document.getElementById('slide-animation-reset-region').disabled = !Object.prototype.hasOwnProperty.call(draft, key); - document.getElementById('slide-animation-reset-all').disabled = !Object.keys(draft).length; + updateResetButtons(); } function readResponse(response) { @@ -115,7 +115,7 @@ export function createSlideAnimationEditor(options) { } }); modal.addEventListener('hide.bs.modal', function (event) { - if (sharedSaving) event.preventDefault(); + if (sharedSaving || advancedOpen) event.preventDefault(); }); function getPreviewElements() { @@ -231,11 +231,52 @@ export function createSlideAnimationEditor(options) { controls.bind(card, { onChange: syncDraft, onAdvanced: function () { - advanced.hidden = !advanced.hidden; - if (!advanced.hidden) controls.populateAdvanced(advancedFields, controls.read(card)); + stopPreview(); + controls.populateAdvanced(advanced, controls.read(card)); + var region = regions().find(function (item) { return item.region_key === selectedKey(); }); + advanced.querySelector('[data-animation-modal-title]').textContent = 'Advanced animations: ' + (region.label || region.region_key); + advancedOpen = true; + advancedButton.setAttribute('aria-expanded', 'true'); + advanced.classList.add('slide-animation-advanced-overlay'); + window.pulseModal.getOrCreate(modal)._focustrap.deactivate(); + modal.inert = true; + modal.setAttribute('aria-hidden', 'true'); + modal.removeAttribute('aria-modal'); + var advancedModal = window.pulseModal.getOrCreate(advanced); + advancedScrollBar = advancedModal._scrollBar; + advancedModal._scrollBar = Object.create(advancedScrollBar); + advancedModal._scrollBar.hide = function () {}; + advancedModal._scrollBar.reset = function () {}; + window.pulseModal.show(advanced); + var backdrops = document.querySelectorAll('.modal-backdrop'); + if (backdrops.length) backdrops[backdrops.length - 1].classList.add('slide-animation-advanced-backdrop'); } }); - advancedFields.addEventListener('change', syncDraft); + advanced.addEventListener('shown.bs.modal', function () { + advanced.querySelector('[data-animation-modal-field]').focus(); + }); + advanced.addEventListener('hidden.bs.modal', function () { + window.pulseModal.getOrCreate(advanced)._scrollBar = advancedScrollBar; + advancedScrollBar = null; + advancedOpen = false; + advancedButton.setAttribute('aria-expanded', 'false'); + advanced.classList.remove('slide-animation-advanced-overlay'); + modal.inert = false; + modal.removeAttribute('aria-hidden'); + modal.setAttribute('aria-modal', 'true'); + document.body.classList.add('modal-open'); + var parentModal = window.pulseModal.getOrCreate(modal); + parentModal._focustrap.activate(); + advancedButton.focus(); + }); + advanced.querySelector('[data-animation-modal-apply]').addEventListener('click', function () { + controls.write(card, controls.readAdvanced(advanced, controls.read(card))); + syncDraft(); + window.pulseModal.hide(advanced); + }); + advanced.querySelector('[data-animation-modal-reset]').addEventListener('click', function () { + controls.populateAdvanced(advanced, '{}'); + }); document.getElementById('slide-animation-reset-region').addEventListener('click', function () { stopPreview(); delete draft[selectedKey()]; diff --git a/src/web/public/js/templates/template-designer.js b/src/web/public/js/templates/template-designer.js index 2130f70..4335de7 100644 --- a/src/web/public/js/templates/template-designer.js +++ b/src/web/public/js/templates/template-designer.js @@ -584,7 +584,7 @@ var config = getAnimationConfig(card); if (title) { - title.textContent = (label ? label.textContent : 'Region') + ' animation settings'; + title.textContent = 'Advanced animations: ' + (label ? label.textContent : 'Region'); } window.pulseRegionAnimationControls.populateAdvanced(animationAdvancedModal, config); diff --git a/src/web/views/signage/slides/form.hbs b/src/web/views/signage/slides/form.hbs index a303df7..c3ab74e 100644 --- a/src/web/views/signage/slides/form.hbs +++ b/src/web/views/signage/slides/form.hbs @@ -123,23 +123,21 @@
-
-
+
+
- - -
- {{> signage/templates/region-animation-controls}} -
@@ -155,6 +153,8 @@
{{/modal-shell}} +{{> signage/templates/animation-advanced-modal}} + {{#> modal-shell modalId="slide-image-cropper-modal" modalLabelId="slide-image-cropper-modal-label" modalDialogClass="modal-dialog-centered modal-xl modal-dialog-scrollable" modalBackdropStatic=true modalKeyboardDisabled=true}}
diff --git a/src/web/views/signage/templates/animation-advanced-modal.hbs b/src/web/views/signage/templates/animation-advanced-modal.hbs index 00166bb..177eb90 100644 --- a/src/web/views/signage/templates/animation-advanced-modal.hbs +++ b/src/web/views/signage/templates/animation-advanced-modal.hbs @@ -1,8 +1,7 @@ -{{#> modal-shell modalId="animation-advanced-modal" modalLabelId="animation-advanced-modal-label" modalDialogClass="modal-dialog-centered modal-xl modal-dialog-scrollable" modalBackdropStatic=true modalKeyboardDisabled=true}} +{{#> modal-shell modalId="animation-advanced-modal" modalLabelId="animation-advanced-modal-label" modalDialogClass="modal-dialog-centered modal-xl modal-dialog-scrollable" modalKeyboardDisabled=true}}
- -

Fine-tune the selected region animation JSON without editing raw data.

+
diff --git a/test/region-layout.test.js b/test/region-layout.test.js index d11ddaa..1acf83f 100644 --- a/test/region-layout.test.js +++ b/test/region-layout.test.js @@ -232,8 +232,11 @@ test('shared template action requires template update permission and loads the m assert.equal(withPermission.split(script).length - 1, 1, script + ' should load once'); } const animationModal = withPermission.split('id="slide-animation-modal"')[1].split('id="slide-image-cropper-modal"')[0]; - assert.match(animationModal, /Advanced animation settings/); - assert.match(animationModal, /id="slide-animation-advanced"[^>]*hidden/); + assert.match(animationModal, /Advanced animations:/); + assert.equal((withPermission.match(/id="animation-advanced-modal"/g) || []).length, 1); + assert.doesNotMatch(withPermission, /id="slide-animation-advanced"/); + const mainAnimationModal = animationModal.split('id="animation-advanced-modal"')[0]; + assert.doesNotMatch(mainAnimationModal, /data-animation-modal-field/); assert.match(animationModal, /Reset region animations to template/); assert.match(animationModal, /Reset all animations to template/); assert.ok(animationModal.indexOf('data-slide-animation-preview="intro"') < animationModal.indexOf('for="slide-animation-region"')); @@ -269,16 +272,21 @@ test('layout and animation modals use the same preview and properties column siz assert.match(css, /\.slide-animation-body\s*\{[^}]*grid-template-columns:\s*minmax\(0,\s*1fr\)\s+21rem;/); assert.match(css, /\.slide-animation-body\s*\{[^}]*gap:\s*1\.25rem;/); assert.match(css, /\.region-field-grid--animation\s+\[data-animation-preset\]\[hidden\]\s*\{\s*display:\s*none\s*!important;/); - assert.match(css, /\.slide-animation-preview-panel\s*\{[^}]*container-type:\s*size;[^}]*min-height:\s*0;/); - assert.match(css, /#slide-animation-preview\s*\{[^}]*height:\s*100%;/); - assert.match(css, /#slide-animation-preview \.slide-preview-stage\s*\{[^}]*width:\s*min\(100%,\s*calc\(100cqh\s*\*\s*var\(--slide-layout-ratio,/); + assert.match(css, /\.slide-animation-preview-panel\s*\{[^}]*min-height:\s*0;/); + assert.match(css, /\.slide-animation-properties\s*\{[^}]*grid-template-rows:\s*auto minmax\(0,\s*1fr\);[^}]*min-height:\s*0;/); + assert.match(css, /#slide-animation-preview\s*\{[^}]*container-type:\s*size;[^}]*height:\s*100%;/); + assert.match(css, /#slide-animation-preview \.slide-preview-stage\s*\{[^}]*width:\s*min\(100cqw,\s*calc\(100cqh\s*\*\s*var\(--slide-layout-ratio,/); + const form = fs.readFileSync(require.resolve('../src/web/views/signage/slides/form.hbs'), 'utf8'); + const previewPanel = form.split('
')[1].split('
')[0]; + assert.doesNotMatch(previewPanel, /data-slide-animation-preview=/); + const toolbar = form.split('
')[1].split('
')[0]; + assert.equal((toolbar.match(/data-slide-animation-preview=/g) || []).length, 3); assert.match(css, /@media \(max-width: 767\.98px\)[\s\S]*?\.slide-animation-preview-panel\s*\{[^}]*height:\s*min\(55dvh,\s*32rem\);/); }); -test('advanced animation section uses compact heading and card spacing', function () { +test('animation settings leave space below labels', function () { const css = fs.readFileSync(require.resolve('../src/web/public/css/theme-custom.css'), 'utf8'); - assert.match(css, /#slide-animation-advanced\s*\{\s*gap:\s*0\.5rem\s*!important;/); - assert.match(css, /\.slide-animation-advanced-fields \.row\s*\{[^}]*gap:\s*0\.5rem;/); + assert.match(css, /\.slide-animation-controls \.region-field-grid--animation label\s*\{[^}]*display:\s*grid;[^}]*gap:\s*0\.5rem;/); }); test('shared animation controls round-trip advanced settings with template normalization', function () { @@ -316,6 +324,126 @@ test('shared animation controls round-trip advanced settings with template norma assert.equal(clamped.loop.iterations, 999); }); +test('slide advanced popup applies changes, cancels drafts and preserves the parent animation draft', function () { + function element() { + return { hidden: false, value: '', disabled: false, dataset: {}, handlers: {}, + addEventListener(type, handler) { this.handlers[type] = handler; }, + querySelectorAll() { return []; }, replaceChildren() {}, appendChild() {}, focus() {}, + setAttribute() {}, removeAttribute() {}, + style: { setProperty() {} }, classList: { add() {}, remove() {} } }; + } + const ids = Object.fromEntries([ + 'slide-animation-modal', 'adjust-slide-animations', 'slide-animation-region', + 'slide-animation-fields', 'animation-advanced-modal', 'slide-animation-preview', + 'slide-animation-save-status', 'slide-animation-reset-region', + 'slide-animation-reset-all', 'slide-animation-apply' + ].map(id => [id, element()])); + const fields = ['intro', 'outro', 'loop'].flatMap(step => ['preset', 'duration_ms', 'delay_ms'].map(field => ({ + dataset: { animationModalStep: step, animationModalField: field }, value: '' + }))); + const advanced = ids['animation-advanced-modal']; + const advancedApply = element(); + const advancedReset = element(); + advanced.querySelectorAll = () => fields; + advanced.querySelector = selector => selector === '[data-animation-modal-apply]' ? advancedApply + : selector === '[data-animation-modal-reset]' ? advancedReset : element(); + const hidden = { value: '{}' }; + const presets = ['intro', 'outro', 'loop'].map(step => ({ + ...element(), dataset: { animationPreset: step }, selectedIndex: 0, + options: [{ value: 'none' }, { value: 'fadeIn' }] + })); + const resets = ['intro', 'outro', 'loop'].map(step => ({ ...element(), dataset: { animationResetButton: step } })); + const advancedButton = element(); + const card = ids['slide-animation-fields']; + card.querySelectorAll = selector => selector === '[data-animation-preset]' ? presets : resets; + card.querySelector = selector => { + if (selector === '[name="region_animation_json[]"]') return hidden; + if (selector === '[data-animation-advanced-button]') return advancedButton; + return resets.find(button => selector.includes('"' + button.dataset.animationResetButton + '"')); + }; + const modalInstances = new Map(); + const scrollBarCalls = []; + const context = { window: { innerWidth: 1200, pulseModal: { + show(modal) { this.getOrCreate(modal)._scrollBar.hide(); modal.shown = true; }, + hide(modal) { this.getOrCreate(modal)._scrollBar.reset(); modal.shown = false; modal.handlers['hidden.bs.modal'](); }, + getOrCreate(modal) { + if (!modalInstances.has(modal)) modalInstances.set(modal, { + _scrollBar: { + hide() { scrollBarCalls.push(['hide', modal]); }, + reset() { scrollBarCalls.push(['reset', modal]); } + }, + _focustrap: { activate() {}, deactivate() {} } + }); + return modalInstances.get(modal); + } + }, + pulseRegionLayout: { getTemplateAnimationSnapshot() { return []; } } }, + document: { body: element(), getElementById(id) { return ids[id] || null; }, querySelector() { return null; }, querySelectorAll() { return []; }, createElement: element } + }; + for (const file of ['templates/animation-presets.js', 'templates/template-designer-utils.js', 'shared/region-animation-controls.js']) { + vm.runInNewContext(fs.readFileSync(require.resolve('../src/web/public/js/' + file), 'utf8'), context); + } + const source = fs.readFileSync(require.resolve('../src/web/public/js/slides/slide-animation-editor.js'), 'utf8'); + vm.runInNewContext(source.replace('export function', 'function'), context); + let applied; + context.createSlideAnimationEditor({ stage: { parentNode: { insertBefore() {} }, nextSibling: null }, + getTemplate() { return { regions: [{ region_key: 'hero', animation_json: { intro: { preset: 'bounceIn' }, outro: { preset: 'fadeOut' } } }] }; }, + getAnimationOverrides() { return {}; }, requestPreviewRender() {}, markEdited() {}, + setAnimationOverrides(value) { applied = value; } + }); + ids['slide-animation-region'].value = 'hero'; + ids['adjust-slide-animations'].handlers.click(); + const resetRegion = ids['slide-animation-reset-region']; + const resetAll = ids['slide-animation-reset-all']; + assert.equal(resetRegion.disabled, true); + assert.equal(resetAll.disabled, true); + presets[0].value = 'fadeIn'; + presets[0].handlers.change(); + assert.equal(resetRegion.disabled, false); + assert.equal(resetAll.disabled, false); + resetRegion.handlers.click(); + assert.equal(JSON.parse(hidden.value).intro.preset, 'bounceIn'); + assert.equal(resetRegion.disabled, true); + assert.equal(resetAll.disabled, true); + presets[0].value = 'fadeIn'; + presets[0].handlers.change(); + assert.equal(resetAll.disabled, false); + resetAll.handlers.click(); + assert.equal(JSON.parse(hidden.value).intro.preset, 'bounceIn'); + assert.equal(resetRegion.disabled, true); + assert.equal(resetAll.disabled, true); + assert.equal(applied, undefined); + advancedButton.handlers.click(); + assert.equal(advanced.shown, true); + assert.equal(ids['slide-animation-modal'].shown, true); + assert.equal(ids['slide-animation-modal'].inert, true); + assert.equal(fields[0].value, 'bounceIn'); + fields[4].value = '150'; + advancedApply.handlers.click(); + assert.equal(ids['slide-animation-modal'].shown, true); + assert.equal(ids['slide-animation-modal'].inert, false); + assert.equal(resetRegion.disabled, false); + assert.equal(resetAll.disabled, false); + resets[0].handlers.click({ preventDefault() {} }); + advancedButton.handlers.click(); + assert.equal(fields[0].value, 'none'); + fields[0].value = 'bounceIn'; + context.window.pulseModal.hide(advanced); + advancedButton.handlers.click(); + assert.equal(fields[0].value, 'none'); + advancedReset.handlers.click(); + assert.equal(fields[3].value, 'none'); + context.window.pulseModal.hide(advanced); + ids['slide-animation-apply'].handlers.click(); + assert.equal(JSON.parse(applied.hero).intro.preset, 'none'); + assert.equal(JSON.parse(applied.hero).outro.preset, 'fadeOut'); + assert.equal(JSON.parse(applied.hero).outro.duration_ms, 1500); + assert.deepEqual(scrollBarCalls, [ + ['hide', ids['slide-animation-modal']], + ['reset', ids['slide-animation-modal']] + ]); +}); + function createSharedLayoutRouteHarness(failUpdate, allowSlideUpdate) { const registerContentRoutes = require('../src/web/routes/admin/content'); const handlers = {}; diff --git a/test/templates.test.js b/test/templates.test.js index d7635a3..c1d720f 100644 --- a/test/templates.test.js +++ b/test/templates.test.js @@ -329,6 +329,9 @@ test('template animation durations use percent in the advanced modal', () => { const sharedControls = fs.readFileSync(require.resolve('../src/web/public/js/shared/region-animation-controls.js'), 'utf8'); assert.match(modal, /signage\/templates\/animation-advanced-fields/); + assert.match(modal, /data-animation-modal-title>Advanced animations:/); + assert.ok(script.includes("title.textContent = 'Advanced animations: ' + (label ? label.textContent : 'Region');")); + assert.doesNotMatch(modal, /modalBackdropStatic=true/); assert.match(advancedFields, /Duration %/); assert.match(advancedFields, /data-animation-modal-field="duration_ms"/); assert.match(advancedFields, /max="200"/);