Release 2.20.6: saved-image slide previews

2026-10-26 17:48:05 +00:00
1 parent 205ce42337
commit 24df245ea1
@@ -0,0 +1,75 @@
+{{#> 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>