From 2efda45499a1188454954ced281febc438d943da Mon Sep 17 00:00:00 2001
From: Brian Davison <b.davison@napier.ac.uk>
Date: Sun, 13 Oct 2024 17:12:00 +0100
Subject: [PATCH] Slides

---
 _includes/custom.js | 100 +++++++++++++++++++++-----------------------
 1 file changed, 47 insertions(+), 53 deletions(-)

diff --git a/_includes/custom.js b/_includes/custom.js
index 1780662..1caf9fc 100644
--- a/_includes/custom.js
+++ b/_includes/custom.js
@@ -36,13 +36,16 @@
     }
 
     function getTargetClass(element) {
-        var classList = element.className.split(" ");
-        for (var i=0; i < classList.length; i++) {
-            if (classList[i].startsWith("slide-")) {
-                return classList[i].substr(6);
+        if (element.tagName == "FIGURE") {
+            return "figure";
+        }
+        else {
+            for (var i=0; i < element.classList.length; i++) {
+                if (element.classList[i].startsWith("slide-")) {
+                    return element.classList[i].substr(6);
+                }
             }
         }
-        return null;
     }
 
     function next(element, tagName) {
@@ -133,57 +136,48 @@
         }
     }
 
-    var elements = document.getElementsByClassName('slide');
-    for(var i = 0; i < elements.length; i++) {
-        var el = elements[i];
-        el.onclick = function() {
-            var targetClass = getTargetClass(this);
-            var targetElement = next(this, targetClass);
-            console.log(targetElement);
+    function enableSlide() {
+        var targetClass = getTargetClass(this);
+        var targetElement = null;
+        var titleText = null;
 
-            var titleText = el.dataset.title;
-            // if (titleText == null)
-            //     titleText = document.querySelector('#' + this.id + '-caption');
-            console.log(titleText);
+        if (targetClass == "figure") {
+            targetElement = this;
+            titleText = extractChildByType(this, "img").dataset.title;
+        }
+        else {
+            targetElement = next(this, targetClass);
+            titleText = this.dataset.title;
+        }
 
-            var slideOverlay = document.getElementById("slide-overlay");
-            var slideTitle = document.getElementById("slide-title");
-            var slideContent = document.getElementById("slide-content");
+        var slideOverlay = document.getElementById("slide-overlay");
+        var slideTitle = document.getElementById("slide-title");
+        var slideContent = document.getElementById("slide-content");
 
-            slideContent.innerHTML = CreateSlideContent(targetElement, targetClass);
-            if (titleText)
-                slideTitle.innerHTML = titleText;
-            slideOverlay.classList.toggle("show");
-            document.onkeydown = function (e) {
-                e = e || window.event;
-                var slideOverlay = document.getElementById("slide-overlay");
-                slideOverlay.classList.toggle("show");
-                document.onkeydown = null;
-            };
+        slideContent.innerHTML = CreateSlideContent(targetElement, targetClass);
+        if (titleText) {
+            slideTitle.innerHTML = titleText;
         }
+        else {
+            slideTitle.innerHTML = extractChildByType(this, "figCaption").innerHTML;
+        }
+        slideOverlay.classList.toggle("show");
+        document.onkeydown = function (e) {
+            e = e || window.event;
+            var slideOverlay = document.getElementById("slide-overlay");
+            slideOverlay.classList.toggle("show");
+            document.onkeydown = null;
+        };
     }
 
-    // var elements = document.getElementsByTagName('figure');
-    // for(var i = 0; i < elements.length; i++) {
-    //     var el = elements[i];
-    //     el.onclick = function() {
-    //         var slideOverlay = document.getElementById("slide-overlay");
-    //         var slideContent = document.getElementById("slide-content");
-    //         var img = null;
-    //         var caption = null;
-    //         var descendents = this.getElementsByTagName('*')
-    //         for(var i=0; i<descendents.length;i++) {
-    //             if(descendents[i].tagName === 'IMG') {
-    //                 img = descendents[i];
-    //             }
-    //             if(descendents[i].tagName === 'FIGCAPTION') {
-    //                 caption = descendents[i];
-    //                 break;
-    //             }
-    //         }
-    //         slideContent.innerHTML = img.outerHTML;
-    //         slideTitle.innerHTML = caption.innerHTML;
-    //         slideOverlay.classList.toggle("show");
-    //     }
-    // }
-})();
+    var elements = document.getElementsByClassName('slide');
+    for(var i = 0; i < elements.length; i++) {
+        var el = elements[i];
+        el.onclick = enableSlide;
+    }
+
+    var elements = document.getElementsByTagName('figure');
+    for(var i = 0; i < elements.length; i++) {
+        var el = elements[i];
+        el.onclick = enableSlide;
+    }})();