added presentation viewers

2026-03-04 11:24:05 +01:00
parent c7af276158
commit 6852076bb2
15 changed files with 404 additions and 132 deletions
@@ -0,0 +1,66 @@
+/**
+ * Navigation controller for Remark.js presentations in iframes.
+ * 
+ * Looks for elements with class 'html-viewer-container'.
+ */
+
+document$.subscribe(({ body }) => {
+    const containers = body.querySelectorAll('.html-viewer-container');
+    
+    containers.forEach(container => {
+        const iframe = container.querySelector('iframe');
+        const prevBtn = container.querySelector('.prev-btn');
+        const nextBtn = container.querySelector('.next-btn');
+        const pageNumDisplay = container.querySelector('.page-num');
+        const pageCountDisplay = container.querySelector('.page-count');
+
+        if (!iframe || !prevBtn || !nextBtn) return;
+
+        function updatePageInfo() {
+            try {
+                if (iframe.contentWindow && iframe.contentWindow.slideshow) {
+                    const slideshow = iframe.contentWindow.slideshow;
+                    const currentIndex = slideshow.getCurrentSlideIndex() + 1;
+                    const totalSlides = slideshow.getSlides().length;
+
+                    if (pageNumDisplay) pageNumDisplay.textContent = currentIndex;
+                    if (pageCountDisplay) pageCountDisplay.textContent = totalSlides;
+                }
+            } catch (e) {
+                // Silently fail if cross-origin or slideshow not yet loaded
+            }
+        }
+
+        prevBtn.addEventListener('click', () => {
+            try {
+                if (iframe.contentWindow && iframe.contentWindow.slideshow) {
+                    iframe.contentWindow.slideshow.gotoPreviousSlide();
+                    updatePageInfo();
+                } else {
+                    iframe.contentWindow.dispatchEvent(new KeyboardEvent('keydown', { 'keyCode': 37 }));
+                }
+            } catch (e) {
+                console.error("Could not navigate slideshow:", e);
+            }
+        });
+
+        nextBtn.addEventListener('click', () => {
+            try {
+                if (iframe.contentWindow && iframe.contentWindow.slideshow) {
+                    iframe.contentWindow.slideshow.gotoNextSlide();
+                    updatePageInfo();
+                } else {
+                    iframe.contentWindow.dispatchEvent(new KeyboardEvent('keydown', { 'keyCode': 39 }));
+                }
+            } catch (e) {
+                console.error("Could not navigate slideshow:", e);
+            }
+        });
+
+        // Update info when iframe loads
+        iframe.addEventListener('load', updatePageInfo);
+
+        // Periodically update in case the user navigates using the keyboard inside the iframe
+        setInterval(updatePageInfo, 500);
+    });
+});