diff --git a/a11y-slides-math-template.html b/a11y-slides-math-template.html
index da66b28..3d71101 100644
--- a/a11y-slides-math-template.html
+++ b/a11y-slides-math-template.html
@@ -6,12 +6,12 @@
#
-->
-
+
Your title goes here
-
+
@@ -123,59 +123,59 @@ some mathematical content
const slides = document.getElementsByClassName("slide");
// initialise the slides visibility, based on sessionStorage
- function initiateSlides(){
- sessionStorage.setItem("all-slides-visible", 0);
-
- // loop through the slides
- let previousSessionActive = 0;
- for (let i = 0; i < slides.length; i++) {
- const currentslide = "slide"+i
- slides[i].id = currentslide;
-
- // check for session storage
- if (sessionStorage.length >0 && sessionStorage.getItem(currentslide)>0){
- showSlides(i);
+ function initiateSlides() {
+ sessionStorage.setItem("all-slides-visible", 0);
+
+ // loop through the slides
+ let previousSessionActive = 0;
+ for (let i = 0; i < slides.length; i++) {
+ const currentslide = "slide" + i
+ slides[i].id = currentslide;
+
+ // check for session storage
+ if (sessionStorage.length > 0 && sessionStorage.getItem(currentslide) > 0) {
+ showSlides(i);
previousSessionActive = 1;
- }
- }
-
- // possibly show the first slide
- if (previousSessionActive == 0) {
- showSlides(0);
- }
-
- // ARIA *vital* to announce H1 on change of slide, see
- // https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Live_Regions
- document.getElementById("slideshow-container").ariaLive = "polite"
+ }
+ }
+
+ // possibly show the first slide
+ if (previousSessionActive == 0) {
+ showSlides(0);
+ }
+
+ // ARIA *vital* to announce H1 on change of slide, see
+ // https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Live_Regions
+ document.getElementById("slideshow-container").ariaLive = "polite"
}
function showSlides(n) {
- if (n<0) {n=0};
+ if (n < 0) { n = 0; }
slideIndex = n % slides.length;
// hide ALL slides
- for (i = 0; i < slides.length; i++) {
+ for (let i = 0; i < slides.length; i++) {
slides[i].style.display = "none";
- sessionStorage.setItem("slide"+i, 0);
+ sessionStorage.setItem("slide" + i, 0);
}
// unhide CURRENT slide
slides[slideIndex].style.display = "block";
- sessionStorage.setItem("slide"+slideIndex, 1);
+ sessionStorage.setItem("slide" + slideIndex, 1);
// update < slide n of m >
- document.getElementById("slide-status").textContent = "slide "+(slideIndex+1)+" of "+slides.length
+ document.getElementById("slide-status").textContent = "slide " + (slideIndex + 1) + " of " + slides.length
// gray out the prev/next button if at begin/end
- if (n == (slides.length-1)){
- document.getElementById("prev-slide").style.color="black"
- document.getElementById("next-slide").style.color="#bbb"
+ if (n == (slides.length - 1)) {
+ document.getElementById("prev-slide").style.color = "black"
+ document.getElementById("next-slide").style.color = "#bbb"
} else if (n == 0) {
- document.getElementById("prev-slide").style.color="#bbb"
- document.getElementById("next-slide").style.color="black"
+ document.getElementById("prev-slide").style.color = "#bbb"
+ document.getElementById("next-slide").style.color = "black"
} else {
- document.getElementById("prev-slide").style.color="black"
- document.getElementById("next-slide").style.color="black"
+ document.getElementById("prev-slide").style.color = "black"
+ document.getElementById("next-slide").style.color = "black"
}
// WARNING: *avoid* the following, see https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/heading_role
// document.getElementById("slideshow-container").ariaLabel = "slide "+(slideIndex+1)
@@ -191,110 +191,107 @@ some mathematical content
function nextSlide() {
// check we're not on last slide
- if ( sessionStorage.getItem("slide"+(slides.length-1)) < 1 ){
- moveSlide(1);
+ if (sessionStorage.getItem("slide" + (slides.length - 1)) < 1) {
+ moveSlide(1);
}
}
// arrow key event listeners, https://stackoverflow.com/a/9310900/1091649
document.onkeydown = checkKey;
+
function checkKey(e) {
- e = e || window.event;
- if (e.keyCode == 38) {
- // up arrow
- // prevSlide();
- }
- else if (e.keyCode == 40) {
- // down arrow
- // nextSlide();
- }
- else if (e.keyCode == 37) {
- // left arrow
- // check for 'all-slides-visible' mode, and adjust as necessary
- if (sessionStorage.getItem("all-slides-visible")>0){
- toggleAllSlides();
- }
- prevSlide();
- }
- else if (e.keyCode == 39) {
- // right arrow
- // check for 'all-slides-visible' mode, and adjust as necessary
- if (sessionStorage.getItem("all-slides-visible")>0){
- toggleAllSlides();
- }
- nextSlide();
- }
- else if ( e.shiftKey && e.keyCode == 80 ) {
- // SHIFT+p
- toggleAllSlides();
- }
- }
-
- // toggle all slides for printing (or other reasons)
- function toggleAllSlides(){
- let slidePosition;
- let slideBorder;
- let slideDisplay;
-
- // toggle back to individual slide
- if (sessionStorage.getItem("all-slides-visible")>0){
- sessionStorage.setItem("all-slides-visible", 0);
- slidePosition = "absolute";
- slideBorder = "none";
- slideDisplay = "none";
-
- // toggle nav
- document.getElementById("nav-outer").style.display = "block";
- document.getElementById("slideshow-container").ariaLabel = null;
- } else {
- // toggle to all slides
- sessionStorage.setItem("all-slides-visible", 1);
- slidePosition = "static";
- slideBorder = "solid";
- slideDisplay = "block";
-
- // toggle nav
- document.getElementById("nav-outer").style.display = "none";
- document.getElementById("slideshow-container").ariaLabel = "All slides shown, useful for printing. Press SHIFT+P or LEFT or RIGHT to go individual slide";
- }
-
- // loop through slides, toggle CSS for printing/not printing
- for (i = 0; i < slides.length; i++) {
- slides[i].style.position = slidePosition;
- slides[i].style.borderStyle = slideBorder;
- slides[i].style.display = slideDisplay;
- }
-
- // finally, possibly toggle active slide back on
- if (sessionStorage.getItem("all-slides-visible") <1){
- for (i = 0; i < slides.length; i++) {
- const currentslide = "slide"+i;
- // toggle individual slide visibility back
- if (sessionStorage.length >0 && sessionStorage.getItem(currentslide)>0 ){
- showSlides(i);
- }
+ e = e || window.event;
+ if (e.keyCode == 38) {
+ // up arrow
+ // prevSlide();
+ } else if (e.keyCode == 40) {
+ // down arrow
+ // nextSlide();
+ } else if (e.keyCode == 37) {
+ // left arrow
+ // check for 'all-slides-visible' mode, and adjust as necessary
+ if (sessionStorage.getItem("all-slides-visible") > 0) {
+ toggleAllSlides();
+ }
+ prevSlide();
+ } else if (e.keyCode == 39) {
+ // right arrow
+ // check for 'all-slides-visible' mode, and adjust as necessary
+ if (sessionStorage.getItem("all-slides-visible") > 0) {
+ toggleAllSlides();
+ }
+ nextSlide();
+ } else if (e.shiftKey && e.keyCode == 80) {
+ // SHIFT+p
+ toggleAllSlides();
+ }
+ }
+
+ // toggle all slides for printing (or other reasons)
+ function toggleAllSlides() {
+ let slidePosition;
+ let slideBorder;
+ let slideDisplay;
+
+ // toggle back to individual slide
+ if (sessionStorage.getItem("all-slides-visible") > 0) {
+ sessionStorage.setItem("all-slides-visible", 0);
+ slidePosition = "absolute";
+ slideBorder = "none";
+ slideDisplay = "none";
+
+ // toggle nav
+ document.getElementById("nav-outer").style.display = "block";
+ document.getElementById("slideshow-container").ariaLabel = null;
+ } else {
+ // toggle to all slides
+ sessionStorage.setItem("all-slides-visible", 1);
+ slidePosition = "static";
+ slideBorder = "solid";
+ slideDisplay = "block";
+
+ // toggle nav
+ document.getElementById("nav-outer").style.display = "none";
+ document.getElementById("slideshow-container").ariaLabel = "All slides shown, useful for printing. Press SHIFT+P or LEFT or RIGHT to go individual slide";
+ }
+
+ // loop through slides, toggle CSS for printing/not printing
+ for (let i = 0; i < slides.length; i++) {
+ slides[i].style.position = slidePosition;
+ slides[i].style.borderStyle = slideBorder;
+ slides[i].style.display = slideDisplay;
+ }
+
+ // finally, possibly toggle active slide back on
+ if (sessionStorage.getItem("all-slides-visible") < 1) {
+ for (let i = 0; i < slides.length; i++) {
+ const currentslide = "slide" + i;
+ // toggle individual slide visibility back
+ if (sessionStorage.length > 0 && sessionStorage.getItem(currentslide) > 0) {
+ showSlides(i);
}
- }
- }
+ }
+ }
+ }
// swipe slides, https://stackoverflow.com/a/56663695/1091649
let touchstartX = 0
let touchendX = 0
-
+
function checkDirection() {
- if (touchendX < touchstartX && Math.abs( touchstartX - touchendX ) > 50){
- nextSlide();
+ if (touchendX < touchstartX && Math.abs(touchstartX - touchendX) > 50) {
+ nextSlide();
}
- if (touchendX > touchstartX && Math.abs( touchstartX - touchendX ) > 50){
- prevSlide();
+ if (touchendX > touchstartX && Math.abs(touchstartX - touchendX) > 50) {
+ prevSlide();
}
}
-
+
document.addEventListener('touchstart', e => {
touchstartX = e.changedTouches[0].screenX
})
-
+
document.addEventListener('touchend', e => {
touchendX = e.changedTouches[0].screenX
checkDirection()
@@ -308,116 +305,129 @@ some mathematical content
#
-->