Handle Autoplayed Video & Audio, Footnotes & Citations

landslide/themes/default/js/slides.js

@@ -1,3 +1,6 @@
+// Gifffer, for controlling GIFs
+(function webpackUniversalModuleDefinition(root,factory){if(typeof exports==="object"&&typeof module==="object")module.exports=factory();else if(typeof define==="function"&&define.amd)define("Gifffer",[],factory);else if(typeof exports==="object")exports["Gifffer"]=factory();else root["Gifffer"]=factory()})(this,function(){var d=document;var playSize=60;var Gifffer=function(options){var images,i=0,gifs=[];images=d.querySelectorAll("[data-gifffer]");for(;i<images.length;++i)process(images[i],gifs,options);return gifs};function formatUnit(v){return v+(v.toString().indexOf("%")>0?"":"px")}function parseStyles(styles){var stylesStr="";for(prop in styles)stylesStr+=prop+":"+styles[prop]+";";return stylesStr}function createContainer(w,h,el,altText,opts){var alt;var con=d.createElement("BUTTON");var cls=el.getAttribute("class");var id=el.getAttribute("id");var playButtonStyles=opts&&opts.playButtonStyles?parseStyles(opts.playButtonStyles):["width:"+playSize+"px","height:"+playSize+"px","border-radius:"+playSize/2+"px","background:rgba(0, 0, 0, 0.3)","position:absolute","top:50%","left:50%","margin:-"+playSize/2+"px"].join(";");var playButtonIconStyles=opts&&opts.playButtonIconStyles?parseStyles(opts.playButtonIconStyles):["width: 0","height: 0","border-top: 14px solid transparent","border-bottom: 14px solid transparent","border-left: 14px solid rgba(0, 0, 0, 0.5)","position: absolute","left: 26px","top: 16px"].join(";");cls?con.setAttribute("class",el.getAttribute("class")):null;id?con.setAttribute("id",el.getAttribute("id")):null;con.setAttribute("style","position:relative;cursor:pointer;background:none;border:none;padding:0;");con.setAttribute("aria-hidden","true");var play=d.createElement("DIV");play.setAttribute("class","gifffer-play-button");play.setAttribute("style",playButtonStyles);var trngl=d.createElement("DIV");trngl.setAttribute("style",playButtonIconStyles);play.appendChild(trngl);if(altText){alt=d.createElement("p");alt.setAttribute("class","gifffer-alt");alt.setAttribute("style","border:0;clip:rect(0 0 0 0);height:1px;overflow:hidden;padding:0;position:absolute;width:1px;");alt.innerText=altText+", image"}con.appendChild(play);el.parentNode.replaceChild(con,el);altText?con.parentNode.insertBefore(alt,con.nextSibling):null;return{c:con,p:play}}function calculatePercentageDim(el,w,h,wOrig,hOrig){var parentDimW=el.parentNode.offsetWidth;var parentDimH=el.parentNode.offsetHeight;var ratio=wOrig/hOrig;if(w.toString().indexOf("%")>0){w=parseInt(w.toString().replace("%",""));w=w/100*parentDimW;h=w/ratio}else if(h.toString().indexOf("%")>0){h=parseInt(h.toString().replace("%",""));h=h/100*parentDimW;w=h*ratio}return{w:w,h:h}}function process(el,gifs,options){var url,con,c,w,h,duration,play,gif,playing=false,cc,isC,durationTimeout,dims,altText;url=el.getAttribute("data-gifffer");w=el.getAttribute("data-gifffer-width");h=el.getAttribute("data-gifffer-height");duration=el.getAttribute("data-gifffer-duration");altText=el.getAttribute("data-gifffer-alt");el.style.display="block";c=document.createElement("canvas");isC=!!(c.getContext&&c.getContext("2d"));if(w&&h&&isC)cc=createContainer(w,h,el,altText,options);el.onload=function(){if(!isC)return;w=w||el.width;h=h||el.height;if(!cc)cc=createContainer(w,h,el,altText,options);con=cc.c;play=cc.p;dims=calculatePercentageDim(con,w,h,el.width,el.height);gifs.push(con);con.addEventListener("click",function(){clearTimeout(durationTimeout);if(!playing){playing=true;gif=document.createElement("IMG");gif.setAttribute("style","width:100%;height:100%;");gif.setAttribute("data-uri",Math.floor(Math.random()*1e5)+1);setTimeout(function(){gif.src=url},0);con.removeChild(play);con.removeChild(c);con.appendChild(gif);if(parseInt(duration)>0){durationTimeout=setTimeout(function(){playing=false;con.appendChild(play);con.removeChild(gif);con.appendChild(c);gif=null},duration)}}else{playing=false;con.appendChild(play);con.removeChild(gif);con.appendChild(c);gif=null}});c.width=dims.w;c.height=dims.h;c.getContext("2d").drawImage(el,0,0,dims.w,dims.h);con.appendChild(c);con.setAttribute("style","position:relative;cursor:pointer;width:"+dims.w+"px;height:"+dims.h+"px;background:none;border:none;padding:0;");c.style.width="100%";c.style.height="100%";if(w.toString().indexOf("%")>0&&h.toString().indexOf("%")>0){con.style.width=w;con.style.height=h}else if(w.toString().indexOf("%")>0){con.style.width=w;con.style.height="inherit"}else if(h.toString().indexOf("%")>0){con.style.width="inherit";con.style.height=h}else{con.style.width=dims.w+"px";con.style.height=dims.h+"px"}};el.src=url}return Gifffer});
+
 function main() {
     // Since we don't have the fallback of attachEvent and
     // other IE only stuff we won't try to run JS for IE.
@@ -20,6 +23,7 @@ function main() {
     var showingPresenterView = false;
     var presenterViewWin = null;
     var isPresenterView = false;
+    var gifs = [];
 
     var str2array = function(s) {
         if (typeof s == 'string' || s instanceof String) {
@@ -129,6 +133,7 @@ function main() {
         document.getElementsByTagName('title')[0].innerText = getSlideTitle(currentSlideNo);
 
         updatePresenterNotes();
+        handleAutoplays();
 
         if (updateOther) { updateOtherPage(); }
     };
@@ -179,6 +184,12 @@ function main() {
         }
         updateSlideClasses(true);
     };
+
+    var gotoSlide = function(slideNumber) {
+        currentSlideNo = slideNumber;
+        updateSlideClasses(true);
+    }
+    main.gotoSlide = gotoSlide;
 
     var showNotes = function() {
         var notes = getSlideEl(currentSlideNo).getElementsByClassName('notes');
@@ -335,10 +346,12 @@ function main() {
     };
 
     var hideContext = function() {
-        try {
-            var presentation = document.getElementsByClassName('slides')[0];
-            addClass(presentation, 'nocontext');
-        } catch (e) {}
+        if (!isPresenterView) {
+            try {
+                var presentation = document.getElementsByClassName('slides')[0];
+                addClass(presentation, 'nocontext');
+            } catch (e) {}
+        }
     };
 
     var processContext = function() {
@@ -539,6 +552,104 @@ function main() {
             }
         }
     };
+
+    var setPlayStatuses = function(medias) {
+        var cSlide = document.getElementsByClassName('current')[0];
+
+        for (var i = 0; i < medias.length; i++) {
+            if (medias[i].hasAttribute('autoplay')) {
+                if (isPresenterView) {
+                    medias[i].pause();
+                    medias[i].currentTime = 0;
+                }
+                else {
+                    if (cSlide.contains(medias[i])) {
+                        medias[i].play();
+                    }
+                    else {
+                        medias[i].pause();
+                        medias[i].currentTime = 0;
+                    }
+                }
+            }
+        }
+    };
+
+    var handleAutoplays = function() {
+        // Stop autoplaying video and audio on all slides except current
+        var videos = document.getElementsByTagName('video');
+        setPlayStatuses(videos);
+
+        var audios = document.getElementsByTagName('audio');
+        setPlayStatuses(audios);
+
+        var cSlide = document.getElementsByClassName('current')[0];
+        for (var i = 0; i < gifs.length; i++) {
+            if (isPresenterView) {
+                if (gifs[i].hasAttribute('playing')) {
+                    gifs[i].click();
+                    gifs[i].removeAttribute('playing');
+                }
+            }
+            else {
+                if (cSlide.contains(gifs[i])) {
+                    if (!gifs[i].hasAttribute('playing')) {
+                        gifs[i].click();
+                        gifs[i].setAttribute('playing', '');
+                    }
+                }
+                else {
+                    if (gifs[i].hasAttribute('playing')) {
+                        gifs[i].click();
+                        gifs[i].removeAttribute('playing');
+                    }
+                }
+            }
+        }
+    };
+
+    var setupGIFs = function() {
+        var images = document.getElementsByTagName('img');
+        for (var i = 0; i < images.length; i++) {
+            var src = images[i].src;
+            var src_end = src.slice(src.length - 3, src.length);
+
+            var alt = images[i].alt;
+            var alt_end = alt.slice(alt.length - 3, alt.length);
+            if (src_end == 'gif' || alt_end == 'gif') {
+                images[i].setAttribute('data-gifffer', src);
+                images[i].removeAttribute('src');
+            }
+        }
+        gifs = Gifffer({playButtonStyles: {}, playButtonIconStyles: {}});
+    };
+
+    var setInternalTargets = function(refs) {
+        for (var i = 0; i < refs.length; i++) {
+            var parts = refs[i].href.split('#');
+            var target_id = parts[parts.length - 1];
+            var target = document.getElementById(target_id);
+            for (var x = 0; x < slides.length; x++) {
+                if (slides[x].contains(target)) {
+                    var slideNumber = (x + 1).toString();
+                    refs[i].href = 'javascript:main.gotoSlide(' + slideNumber + ');';
+                    break;
+                }
+            }
+        }
+    };
+
+    var adaptInternalHyperlinks = function() {
+        // Set internal hyperlink (like footnotes) to goto target slide
+        var forwardRefs = document.getElementsByClassName('footnote-reference');
+        setInternalTargets(forwardRefs);
+
+        var forwardCites = document.getElementsByClassName('citation-reference');
+        setInternalTargets(forwardCites);
+
+        var backRefs = document.getElementsByClassName('fn-backref');
+        setInternalTargets(backRefs);
+    };
 
     // initialize
 
@@ -576,5 +687,9 @@ function main() {
         addSlideClickListeners();
 
         addRemoteWindowControls();
+
+        setupGIFs();
+        handleAutoplays();
+        adaptInternalHyperlinks();
     })();
 }