Release v2.16.7: refine animation editor dialogs
This commit is contained in:
lzstealth committed
1 parent
03a27c8e25
commit
11dd801f6d
12 files changed
+247
-84
No files matched your search
@@ -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);
|
||||
|
||||
@@ -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()];
|
||||
|
||||
@@ -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);
|
||||
|
||||
@@ -123,23 +123,21 @@
|
||||
<section class="slide-animation-preview-panel">
|
||||
<div id="slide-animation-preview"></div>
|
||||
</section>
|
||||
<div class="slide-animation-controls">
|
||||
<div class="btn-group w-100 mb-3" role="group" aria-label="Animation preview">
|
||||
<div class="slide-animation-properties">
|
||||
<div class="btn-group w-100" role="group" aria-label="Animation preview">
|
||||
<button type="button" class="btn btn-outline-secondary" data-slide-animation-preview="intro" aria-pressed="false"><i class="bi bi-play-fill me-1" aria-hidden="true" data-animation-preview-icon></i>Intro</button>
|
||||
<button type="button" class="btn btn-outline-secondary" data-slide-animation-preview="outro" aria-pressed="false"><i class="bi bi-play-fill me-1" aria-hidden="true" data-animation-preview-icon></i>Outro</button>
|
||||
<button type="button" class="btn btn-outline-secondary" data-slide-animation-preview="loop" aria-pressed="false"><i class="bi bi-play-fill me-1" aria-hidden="true" data-animation-preview-icon></i>Attention</button>
|
||||
</div>
|
||||
<label for="slide-animation-region" class="form-label">Region</label>
|
||||
<select id="slide-animation-region" class="form-select mb-3"></select>
|
||||
<div id="slide-animation-fields" class="d-grid gap-3">
|
||||
{{> signage/templates/region-animation-controls}}
|
||||
<div id="slide-animation-advanced" class="d-grid gap-3" hidden>
|
||||
<h3 class="h6 mb-0">Advanced animation settings</h3>
|
||||
<div class="slide-animation-advanced-fields" data-animation-advanced-fields>{{> signage/templates/animation-advanced-fields}}</div>
|
||||
<div class="slide-animation-controls">
|
||||
<label for="slide-animation-region" class="form-label">Region</label>
|
||||
<select id="slide-animation-region" class="form-select mb-3"></select>
|
||||
<div id="slide-animation-fields" class="d-grid gap-3">
|
||||
{{> signage/templates/region-animation-controls}}
|
||||
</div>
|
||||
<button type="button" id="slide-animation-reset-region" class="btn btn-outline-secondary w-100 mt-3"><i class="bi bi-arrow-counterclockwise me-1" aria-hidden="true"></i>Reset region animations to template</button>
|
||||
<button type="button" id="slide-animation-reset-all" class="btn btn-outline-secondary w-100 mt-2"><i class="bi bi-arrow-counterclockwise me-1" aria-hidden="true"></i>Reset all animations to template</button>
|
||||
</div>
|
||||
<button type="button" id="slide-animation-reset-region" class="btn btn-outline-secondary w-100 mt-3"><i class="bi bi-arrow-counterclockwise me-1" aria-hidden="true"></i>Reset region animations to template</button>
|
||||
<button type="button" id="slide-animation-reset-all" class="btn btn-outline-secondary w-100 mt-2"><i class="bi bi-arrow-counterclockwise me-1" aria-hidden="true"></i>Reset all animations to template</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="modal-footer">
|
||||
@@ -155,6 +153,8 @@
|
||||
</div>
|
||||
{{/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}}
|
||||
<div class="modal-header">
|
||||
<div>
|
||||
|
||||
@@ -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}}
|
||||
<div class="modal-header">
|
||||
<div>
|
||||
<h2 class="modal-title fs-5" id="animation-advanced-modal-label" data-animation-modal-title>Advanced animation settings</h2>
|
||||
<p class="text-body-secondary mb-0">Fine-tune the selected region animation JSON without editing raw data.</p>
|
||||
<h2 class="modal-title fs-5" id="animation-advanced-modal-label" data-animation-modal-title>Advanced animations:</h2>
|
||||
</div>
|
||||
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
|
||||
</div>
|
||||
|
||||
Reference in new issue
Block a user