slideshow.json commit initial commit (a6c5565)
   1const INTERVAL = 2000;
   2const STATE_PAUSE = "⏸︎";
   3const STATE_PLAY = "⏵︎";
   4
   5// Start at -1 - the recursive function playSlideshow() increases this to 0
   6// on page load
   7let currentSlide = -1;
   8
   9// Elements
  10let slides = document.getElementsByClassName("slide");
  11let dots = document.getElementsByClassName("dot");
  12let stateBtn = document.getElementById("state");
  13
  14// Global state
  15let maxIndex = slides.length - 1;
  16var timeout;
  17var paused = false;
  18
  19// Start the slideshow
  20playSlideshow();
  21
  22// Recursive function that advances the slide and then calls itself with a 
  23// delay
  24function playSlideshow() {
  25  nextSlide();
  26  timeout = setTimeout(playSlideshow, INTERVAL);
  27}
  28
  29// Change the slide to a given index
  30function setSlide(slide) {
  31
  32  if (slide < 0 || slide > maxIndex) {
  33    console.log("Attempted to change to slide outside range");
  34    return;
  35  }
  36
  37  // Remove active class from figure and dot
  38  for (i = 0; i <= maxIndex; i++) {
  39    slides[i].className = slides[i].className.replace(" active", "");
  40    dots[i].className = dots[i].className.replace(" active", "");
  41  }
  42
  43  // Add active class to figure and dot
  44  slides[slide].className += " active";
  45  dots[slide].className += " active";
  46
  47  currentSlide = slide;
  48}
  49
  50function nextSlide() {
  51  // Go to the next slide
  52  if (currentSlide == maxIndex) {
  53    setSlide(0);
  54  }
  55  else {
  56    setSlide(currentSlide + 1);
  57  }
  58}
  59
  60function prevSlide() {
  61  // Go to the previous slide
  62  if (currentSlide == 0) {
  63    setSlide(maxIndex);
  64  }
  65  else {
  66    setSlide(currentSlide - 1);
  67  }
  68}
  69
  70function mouseEnter() {
  71  // Pause the slideshow
  72  clearTimeout(timeout);
  73  timeout = null;
  74}
  75
  76function mouseLeave() {
  77  // Start the slideshow if not manually paused
  78  if (!paused && timeout == null) {
  79    timeout = setTimeout(playSlideshow, INTERVAL);
  80  }
  81}
  82
  83function changeState() {
  84  if (paused) {
  85    // Play immediately despite mouseover
  86    stateBtn.innerHTML = STATE_PAUSE;
  87    timeout = setTimeout(playSlideshow, INTERVAL);
  88  }
  89  else {
  90    // Pause until user presses play again
  91    clearTimeout(timeout); // make sure timer is stopped
  92    timeout = null;
  93    stateBtn.innerHTML = STATE_PLAY;
  94  }
  95  paused = !paused;
  96}