75 lines
2.9 KiB
Handlebars
75 lines
2.9 KiB
Handlebars
{{#> modal-shell modalId="slide-preview-modal" modalLabelId="slide-preview-modal-label" modalDialogClass="modal-xl modal-dialog-centered"}}
|
|
<div class="modal-header">
|
|
<h2 class="modal-title fs-5" id="slide-preview-modal-label">Slide preview</h2>
|
|
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
|
|
</div>
|
|
<div class="modal-body p-0">
|
|
<img class="slide-list-preview-frame" alt="Slide preview" data-slide-preview-image hidden />
|
|
<p class="empty m-3" data-slide-preview-empty hidden>Preview unavailable</p>
|
|
</div>
|
|
{{/modal-shell}}
|
|
|
|
<script>
|
|
(function () {
|
|
var modal = document.getElementById('slide-preview-modal');
|
|
if (!modal) {
|
|
return;
|
|
}
|
|
|
|
var image = modal.querySelector('[data-slide-preview-image]');
|
|
var empty = modal.querySelector('[data-slide-preview-empty]');
|
|
var title = modal.querySelector('#slide-preview-modal-label');
|
|
var currentAspectRatio = 16 / 9;
|
|
var thumbnailUrl = '';
|
|
|
|
image.addEventListener('error', function () {
|
|
if (thumbnailUrl && image.getAttribute('src') !== thumbnailUrl) {
|
|
image.src = thumbnailUrl;
|
|
} else {
|
|
image.hidden = true;
|
|
image.removeAttribute('src');
|
|
empty.hidden = false;
|
|
}
|
|
});
|
|
|
|
function updateModalSize() {
|
|
var maxWidth = Math.min(window.innerWidth * 0.9, 1140);
|
|
var maxHeight = window.innerHeight * 0.72;
|
|
var width = Math.min(maxWidth, maxHeight * currentAspectRatio);
|
|
modal.style.setProperty('--slide-preview-aspect-ratio', String(currentAspectRatio));
|
|
modal.style.setProperty('--slide-preview-modal-width', Math.round(width) + 'px');
|
|
}
|
|
|
|
modal.addEventListener('show.bs.modal', function (event) {
|
|
var trigger = event.relatedTarget;
|
|
if (!trigger || !image) {
|
|
return;
|
|
}
|
|
var canvasWidth = Number(trigger.getAttribute('data-canvas-width'));
|
|
var canvasHeight = Number(trigger.getAttribute('data-canvas-height'));
|
|
currentAspectRatio = canvasWidth > 0 && canvasHeight > 0 ? canvasWidth / canvasHeight : 16 / 9;
|
|
updateModalSize();
|
|
thumbnailUrl = trigger.getAttribute('data-slide-preview-url') || '';
|
|
image.hidden = !thumbnailUrl;
|
|
empty.hidden = Boolean(thumbnailUrl);
|
|
image.alt = trigger.getAttribute('data-slide-preview-title') || 'Slide preview';
|
|
if (thumbnailUrl) {
|
|
image.src = thumbnailUrl.replace(/\.png$/i, '.full.png');
|
|
}
|
|
if (title) {
|
|
title.textContent = 'Slide preview: ' + (trigger.getAttribute('data-slide-preview-title') || '');
|
|
}
|
|
});
|
|
modal.addEventListener('hidden.bs.modal', function () {
|
|
thumbnailUrl = '';
|
|
image.hidden = true;
|
|
image.removeAttribute('src');
|
|
empty.hidden = true;
|
|
});
|
|
window.addEventListener('resize', function () {
|
|
if (modal.classList.contains('show')) {
|
|
updateModalSize();
|
|
}
|
|
});
|
|
}());
|
|
</script> |