From: Max Value <greenwoodw50@gmail.com>
Date: Mon, 23 Mar 2026 16:47:44 +0000 (+0000)
Subject: Seperated out slideshow script from main script
X-Git-Url: https://git.ozva.co.uk/?a=commitdiff_plain;h=a3ed97a656c1ac624fe9bb40bb71ac22cb98a215;p=chester

Seperated out slideshow script from main script

Ahead of implementing aggregating slideshow
---

diff --git a/script.js b/script.js
index d5822b3..daa0283 100644
--- 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
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();