5 * @copyright 2018 - Ken Grimes
6 * @summmary Script for populating text to summary box on svg:hover
10 const resizeIFrame
= (iframe
) => {
11 iframe
.style
.height
= 0
12 iframe
.style
.height
= (iframe
.contentWindow
.document
.body
.scrollHeight
* 1.2) + 'px';
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')
21 let oldScrollY
= window
.scrollY
23 let downDelay
= _downDelay
28 const navUpdate
= () => {
29 if (window
.matchMedia("(orientation: portrait)").matches
) {
30 if (window
.scrollY
< oldScrollY
) /* up */ {
32 downDelay
= _downDelay
33 else if (upDelay
-- <= 0) {
34 top
= Math
.min(top
+ (oldScrollY
- window
.scrollY
), 0)
35 nav
.style
.top
= top
+ 'px'
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'
45 window
.requestAnimationFrame(navUpdate
)
52 downDelay
= _downDelay
54 setTimeout(navUpdate
, 1000)
56 oldScrollY
= window
.scrollY
61 slideshows
.forEach((slideshow
) => {
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
74 const _fadeOutEnd
= (slideshow
) => {
75 slideshow
.outStyle
.opacity
= 0.0
76 if (slideshow
.killOutDisplay
)
77 slideshow
.outStyle
.display
= 'none'
78 slideshow
.outStyle
= null
80 const _fadeInEnd
= (slideshow
) => {
81 slideshow
.inStyle
.opacity
= 1.0
82 slideshow
.inStyle
= null
86 const slideshowUpdate
= (time
) => {
87 let dt
= time
- oldTime
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
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
109 _fadeOutEnd(slideshow
)
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
)
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 */
128 if (slideshow
.idx
>= slideshow
.lis
.length
)
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
140 window
.requestAnimationFrame(slideshowUpdate
)
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'
152 document
.head
.appendChild(script
)
153 }).then(() => editTools()).catch((err
) => console
.log
)