hugo/themes/ancientarts/static/js/speedy.js

   1 /**
   2 * @file      main.js
   3 * @author    Ken Grimes
   4 * @license   AGPL-3.0
   5 * @copyright 2018 - Ken Grimes
   6 * @summmary  Script for populating text to summary box on svg:hover
   7 */
   8 'use strict'
   9
  10 const resizeIFrame = (iframe) => {
  11   iframe.style.height = 0
  12   iframe.style.height = (iframe.contentWindow.document.body.scrollHeight * 1.2) + 'px';
  13 }
  14
  15 window.onload = () => {
  16   const header = document.body.getElementsByTagName('header').item(0)
  17   const nav = document.body.getElementsByTagName('nav').item(0)
  18   const main = document.body.getElementsByTagName('main').item(0)
  19   const slideshows = document.querySelectorAll('ul.slideshow')
  20
  21   let oldScrollY = window.scrollY
  22   const _downDelay = 32
  23   let downDelay = _downDelay
  24   const _upDelay = 16
  25   let upDelay = 0
  26   nav.style.top = '0px'
  27   let top = 0
  28   const navUpdate = () => {
  29     if (window.matchMedia("(orientation: portrait)").matches) {
  30       if (window.scrollY < oldScrollY) /* up */ {
  31         if (top === 0)
  32           downDelay = _downDelay
  33         else if (upDelay-- <= 0) {
  34           top = Math.min(top + (oldScrollY - window.scrollY), 0)
  35           nav.style.top = top + 'px'
  36         }
  37       }
  38       else if (window.scrollY > oldScrollY) /* down */{
  39         if (downDelay-- <= 0) {
  40           top = Math.max(top - (window.scrollY - oldScrollY), -nav.offsetHeight)
  41           nav.style.top = top + 'px'
  42         }
  43         upDelay = _upDelay
  44       }
  45       window.requestAnimationFrame(navUpdate)
  46     }
  47     else {
  48       if (top != 0) {
  49         top = 0
  50         nav.style.top = '0px'
  51         upDelay = _upDelay
  52         downDelay = _downDelay
  53       }
  54       setTimeout(navUpdate, 1000)
  55     }
  56     oldScrollY = window.scrollY
  57   }
  58   navUpdate();
  59
  60   /* Slideshows */
  61   slideshows.forEach((slideshow) => {
  62     slideshow.idx = 0
  63     slideshow.lis = slideshow.getElementsByTagName('li')
  64     const findCycle = slideshow.style.cssText.match(/--cycleSpeed: *([+-]?[0-9]*[.]?[0-9]+);/)
  65     slideshow.cycleSpeed = findCycle && findCycle.length > 1 ? Number(findCycle[1]) : 8000.0
  66     const findFade = slideshow.style.cssText.match(/--fadeSpeed: *([+-]?[0-9]*[.]?[0-9]+);/)
  67     slideshow.fadeSpeed = findFade && findFade.length > 1 ? Number(findFade[1]) : 800.0
  68     const findInDelay = slideshow.style.cssText.match(/--fadeInDelay: *([+-]?[0-9]*[.]?[0-9]+);/)
  69     slideshow.fadeInDelay = findInDelay && findInDelay.length > 1 ? Number(findInDelay[1]) : null
  70     const findOutDelay = slideshow.style.cssText.match(/--fadeOutDelay: *([+-]?[0-9]*[.]?[0-9]+);/)
  71     slideshow.fadeOutDelay = findOutDelay && findOutDelay.length > 1 ? Number(findOutDelay[1]) : null
  72     slideshow.nextCycleTime = performance.now() + slideshow.cycleSpeed
  73   })
  74   const _fadeOutEnd = (slideshow) => {
  75     slideshow.outStyle.opacity = 0.0
  76     if (slideshow.killOutDisplay)
  77       slideshow.outStyle.display = 'none'
  78     slideshow.outStyle = null
  79   }
  80   const _fadeInEnd = (slideshow) => {
  81     slideshow.inStyle.opacity = 1.0
  82     slideshow.inStyle = null
  83   }
  84
  85   let oldTime = 0
  86   const slideshowUpdate = (time) => {
  87     let dt = time - oldTime
  88     oldTime = time
  89     slideshows.forEach((slideshow) => {
  90       if (slideshow.inStyle) {
  91         if (time >= slideshow.fadeInStartTime) {
  92           const timeLeft = slideshow.fadeInEndTime - time
  93           if (timeLeft >= 1.0) {
  94             slideshow.inOpacity += dt * (1.0 - slideshow.inOpacity)/timeLeft
  95             slideshow.inStyle.opacity = slideshow.inOpacity
  96           }
  97           else {
  98             _fadeInEnd(slideshow)
  99           }
 100         }
 101       }
 102       if (slideshow.outStyle) {
 103         if (time >= slideshow.fadeOutStartTime) {
 104           const timeLeft = slideshow.fadeOutEndTime - time
 105           if (timeLeft >= 1.0) {
 106             slideshow.outOpacity -= dt * slideshow.outOpacity/timeLeft
 107             slideshow.outStyle.opacity = slideshow.outOpacity
 108           } else
 109             _fadeOutEnd(slideshow)
 110         }
 111       }
 112       if (time >= slideshow.nextCycleTime) {
 113         slideshow.nextCycleTime = time + slideshow.cycleSpeed
 114         if (slideshow.outStyle)
 115           _fadeOutEnd(slideshow)
 116         if (slideshow.inStyle)
 117           _fadeInEnd(slideshow)
 118         /* Init Out */
 119         slideshow.outOpacity = 1.0
 120         slideshow.outStyle = slideshow.lis.item(slideshow.idx).style
 121         slideshow.fadeOutStartTime = time
 122         if (slideshow.fadeOutDelay)
 123           slideshow.fadeOutStartTime += slideshow.fadeOutDelay
 124         slideshow.fadeOutEndTime = slideshow.fadeOutStartTime + slideshow.fadeSpeed
 125         slideshow.killOutDisplay = (slideshow.idx !== 0)
 126         /* Iterate ring buffer */
 127         slideshow.idx += 1
 128         if (slideshow.idx >= slideshow.lis.length)
 129           slideshow.idx = 0
 130         /* Init In */
 131         slideshow.inOpacity = 0.0
 132         slideshow.inStyle = slideshow.lis.item(slideshow.idx).style
 133         slideshow.inStyle.display = 'block'
 134         slideshow.fadeInStartTime = time
 135         if (slideshow.fadeInDelay)
 136           slideshow.fadeInStartTime += slideshow.fadeInDelay
 137         slideshow.fadeInEndTime = slideshow.fadeInStartTime + slideshow.fadeSpeed
 138       }
 139     })
 140     window.requestAnimationFrame(slideshowUpdate)
 141   }
 142   slideshowUpdate()
 143
 144   /* Load editor if cookie is present */
 145   if (document.cookie.match('live-edit=true')) {
 146     new Promise((resolve,reject) => {
 147       const script = document.createElement('script')
 148       script.onload = resolve
 149       script.onerror = reject
 150       script.src = document.location.origin + '/js/editor.js'
 151       script.async = true
 152       document.head.appendChild(script)
 153     }).then(() => editTools()).catch((err) => console.log)
 154   }
 155 }