Seperated out slideshow script from main script

Ahead of implementing aggregating slideshow

diff --git a/script.js b/script.js
index d5822b34ef4dad5b06c37a09facc12e7eababd75..daa02830c895928f2b916052193056dd0f815784 100644 (file)
--- a/script.js
+++ b/script.js
@@ -1,6 +1,3 @@
-let slideCount = 0;
-let slideCurrent = 0
-
 function setup () {
        // setup the details elements
        const elements = document.querySelectorAll("nav details summary");
@@ -32,52 +29,19 @@ function setup () {
                });
        }
 
-       // setup the slideshow
-       slideshows = document.getElementsByClassName("slideshow");
-       let s = 0;
-       for (slideshow of slideshows) {
-               let i = 0;
-               for (child of slideshow.children) {
-                       if (child.tagName == "IMG") {
-                               child.style.display = "none";
-                               child.id = `show${s}slide${i}`;
-                               i++;
-                       } else if (child.classList.contains("next")) {
-                               var si = s;
-                               child.addEventListener("click", (e) => {
-                                       e.preventDefault();
-                                       document.getElementById(`show${si}slide${slideCurrent}`)
-                                       .style.display = "none";
-                                       slideCurrent ++;
-                                       if (slideCurrent >= slideCount) {
-                                               slideCurrent = 0;
-                                       }
-                                       document.getElementById(`show${si}slide${slideCurrent}`)
-                                       .style.display = "block";
-                               });
-                       } else {
-                               var si = s;
-                               child.addEventListener("click", (e) => {
-                                       e.preventDefault();
-                                       document.getElementById(`show${si}slide${slideCurrent}`)
-                                       .style.display = "none";
-                                       slideCurrent --;
-                                       if (slideCurrent < 0) {
-                                               slideCurrent = slideCount - 1;
-                                       }
-                                       document.getElementById(`show${si}slide${slideCurrent}`)
-                                       .style.display = "block";
-                               });
-                       }
-               }
-               slideCount = i;
-               slideshow.children[0].style.display = "block";
-               s++;
-       }
+       const main = document.getElementsByTagName("main")[0];
 
        // sets up the dimmer close button
-       const dim = document.getElementById("dim");
-       const close = document.querySelector("#dim span");
+       const close = document.createElement("span");
+       close.style.pointerEvents = "none";
+       close.innerHTML = "Close";
+
+       const dim = document.createElement("div");
+       dim.id = "dim";
+       dim.style.pointerEvents = "none";
+       dim.appendChild(close);
+       main.parentNode.appendChild(dim);
+
        close.addEventListener("click", (e) => {
                dim.style.opacity = 0;
                dim.style.pointerEvents = "none";
@@ -135,10 +99,14 @@ function setup () {
        // sets up the closed captions
        // adapted from: https://james.cridland.net/blog/2025/html-audio-player-with-captions/
        // Safari needs to be specifically told to show this track, for some reason.
+       let i = 0;
        for (e of document.getElementsByClassName("captionedAudio")) {
                e.textTracks[0].mode="showing";
+               e.setAttribute('style', `anchor-name: --audio${i};`);
+
                const caption = document.createElement("span");
                caption.classList.add("caption");
+               caption.style;
                e.parentNode.insertBefore(caption, e.nextSibling);
 
                e.textTracks[0].addEventListener('cuechange', (function () {
@@ -148,9 +116,47 @@ function setup () {
                                el.nextElementSibling.innerText = this.activeCues[0].text;
                        }
                })());
+               i += 1;
        }
+
        */
 
+       // add in the change notes chester
+
+       const template = document.createElement('template');
+       template.innerHTML = `<details style="
+               position: fixed;
+               top: 10px;
+               right: 10px;
+               font-family: serif;
+               border: 1px solid red;
+               color: red;
+               background-color: white;
+               z-index: 100
+       ">
+       <summary>Change notes Chester</summary>
+       <p>Requests implemented from last meeting:</p>
+       <ul>
+               <li>Allow clickthrough of all images from "focus view"</li>
+               <li>Greater line height on Riders -> Acknowlagements</li>
+               <li>Click on gray area in "focus view" to de-focus</li>
+               <li>Slideshow on Riders includes all images in the page</li>
+       </ul>
+       <p>Requests implemented from emailed document:</p>
+       <ul>
+               <li>Changed Riders subheading</li>
+       </ul>
+       <!--
+       <p>Additional changes:</p>
+       <ul>
+               <li>Removed "Overview" page from the nav menu, now accessed by clicking your name as is common with many sites. Page is now effectively the homepage</li>
+               <li>Actual defocus on the background elements when in focus mode</li>
+       </ul>
+       !-->
+</details>`;
+
+       main.parentNode.insertBefore(template.content.childNodes[0], main);
+       console.log();
 
 }
 

diff --git a/slideshow.js b/slideshow.js
new file mode 100644 (file)
index 0000000..2383516
--- /dev/null
+++ b/slideshow.js
@@ -0,0 +1,49 @@
+let slideCount = 0;
+let slideCurrent = 0
+
+function setupSlideshow () {
+       // setup the slideshow
+       slideshows = document.getElementsByClassName("slideshow");
+       let s = 0;
+       for (slideshow of slideshows) {
+               let i = 0;
+               for (child of slideshow.children) {
+                       if (child.tagName == "IMG") {
+                               child.style.display = "none";
+                               child.id = `show${s}slide${i}`;
+                               i++;
+                       } else if (child.classList.contains("next")) {
+                               var si = s;
+                               child.addEventListener("click", (e) => {
+                                       e.preventDefault();
+                                       document.getElementById(`show${si}slide${slideCurrent}`)
+                                       .style.display = "none";
+                                       slideCurrent ++;
+                                       if (slideCurrent >= slideCount) {
+                                               slideCurrent = 0;
+                                       }
+                                       document.getElementById(`show${si}slide${slideCurrent}`)
+                                       .style.display = "block";
+                               });
+                       } else {
+                               var si = s;
+                               child.addEventListener("click", (e) => {
+                                       e.preventDefault();
+                                       document.getElementById(`show${si}slide${slideCurrent}`)
+                                       .style.display = "none";
+                                       slideCurrent --;
+                                       if (slideCurrent < 0) {
+                                               slideCurrent = slideCount - 1;
+                                       }
+                                       document.getElementById(`show${si}slide${slideCurrent}`)
+                                       .style.display = "block";
+                               });
+                       }
+               }
+               slideCount = i;
+               slideshow.children[0].style.display = "block";
+               s++;
+       }
+}
+
+setupSlideshow();