0){let a=.9;t+=A.querySelectorAll(".fragment.visible").length/e.length*a}}return Math.min(t/(e-1),1)}function Ge(){return!!window.location.search.match(/receiver/gi)}function et(){let e=window.location.hash,t=e.slice(2).split("/"),r=e.replace(/#|\//gi,"");if(!/^[0-9]*$/.test(t[0])&&r.length){let e;try{e=document.getElementById(decodeURIComponent(r))}catch(e){}let t=!!A&&A.getAttribute("id")===r;if(e){if(!t){let t=a.getIndices(e);De(t.h,t.v)}}else De(v||0,b||0)}else{let e,a=p.hashOneBasedIndex?1:0,r=parseInt(t[0],10)-a||0,n=parseInt(t[1],10)-a||0;p.fragmentInURL&&(e=parseInt(t[2],10),isNaN(e)&&(e=void 0)),r===v&&n===b&&void 0===e||De(r,n,e)}}function tt(e){clearTimeout(j),"number"==typeof e?j=setTimeout(tt,e):A&&(p.history||!window.history?window.location.hash=xe():p.hash?window.history.replaceState(null,null,"#"+xe()):window.history.replaceState(null,null,window.location.pathname+window.location.search))}function at(e){let t,a=v,r=b;if(e){let t=Me(e),n=t?e.parentNode:e,s=i(R.wrapper.querySelectorAll(".slides>section"));a=Math.max(s.indexOf(n),0),r=void 0,t&&(r=Math.max(i(e.parentNode.querySelectorAll("section")).indexOf(e),0))}if(!e&&A){if(A.querySelectorAll(".fragment").length>0){let e=A.querySelector(".current-fragment");t=e&&e.hasAttribute("data-fragment-index")?parseInt(e.getAttribute("data-fragment-index"),10):A.querySelectorAll(".fragment.visible").length-1}}return{h:a,v:r,f:t}}function rt(){return i(R.wrapper.querySelectorAll('.slides section:not(.stack):not([data-visibility="uncounted"])'))}function nt(){return i(R.wrapper.querySelectorAll(".slides>section"))}function it(){return i(R.wrapper.querySelectorAll(".slides>section>section"))}function st(){return nt().length>1}function ot(){return it().length>1}function lt(){return rt().length}function dt(e,t){let a=nt()[e],r=a&&a.querySelectorAll("section");return r&&r.length&&"number"==typeof t?r?r[t]:void 0:a}function ct(e=A){if(e.hasAttribute("data-notes"))return e.getAttribute("data-notes");let t=e.querySelector("aside.notes");return t?t.innerHTML:null}function ut(){let e=at();return{indexh:e.h,indexv:e.v,indexf:e.f,paused:Te(),overview:Le()}}function pt(e,t=!1){e=i(e);let a=[],r=[],n=[];e.forEach(e=>{if(e.hasAttribute("data-fragment-index")){let t=parseInt(e.getAttribute("data-fragment-index"),10);a[t]||(a[t]=[]),a[t].push(e)}else r.push([e])}),a=a.concat(r);let s=0;return a.forEach(e=>{e.forEach(e=>{n.push(e),e.setAttribute("data-fragment-index",s)}),s++}),!0===t?a:n}function ht(e,t){let a={shown:[],hidden:[]};if(A&&p.fragments&&(t=t||pt(A.querySelectorAll(".fragment"))).length){let r=0;if("number"!=typeof e){let t=pt(A.querySelectorAll(".fragment.visible")).pop();t&&(e=parseInt(t.getAttribute("data-fragment-index")||0,10))}i(t).forEach((t,n)=>{t.hasAttribute("data-fragment-index")&&(n=parseInt(t.getAttribute("data-fragment-index"),10)),r=Math.max(r,n),n<=e?(t.classList.contains("visible")||a.shown.push(t),t.classList.add("visible"),t.classList.remove("current-fragment"),R.statusDiv.textContent=Z(t),n===e&&(t.classList.add("current-fragment"),O.startEmbeddedContent(t))):(t.classList.contains("visible")&&a.hidden.push(t),t.classList.remove("visible"),t.classList.remove("current-fragment"))}),e="number"==typeof e?e:-1,e=Math.max(Math.min(e,r),-1),A.setAttribute("data-fragment",e)}return a}function gt(e,t=0){if(A&&p.fragments){let a=pt(A.querySelectorAll(".fragment"));if(a.length){if("number"!=typeof e){let t=pt(A.querySelectorAll(".fragment.visible")).pop();e=t?parseInt(t.getAttribute("data-fragment-index")||0,10):-1}let r=ht(e+=t,a);return r.hidden.length&&le("fragmenthidden",{fragment:r.hidden[0],fragments:r.hidden}),r.shown.length&&le("fragmentshown",{fragment:r.shown[0],fragments:r.shown}),Ve(),We(),p.fragmentInURL&&tt(),!(!r.shown.length&&!r.hidden.length)}}return!1}function ft(){return gt(null,1)}function mt(){return gt(null,-1)}function vt(){if(bt(),A&&!1!==p.autoSlide){let e=A.querySelector(".current-fragment");e||(e=A.querySelector(".fragment"));let t=e?e.getAttribute("data-autoslide"):null,r=A.parentNode?A.parentNode.getAttribute("data-autoslide"):null,n=A.getAttribute("data-autoslide");F=t?parseInt(t,10):n?parseInt(n,10):r?parseInt(r,10):p.autoSlide,0===A.querySelectorAll(".fragment").length&&i(A.querySelectorAll("video, audio")).forEach(e=>{e.hasAttribute("data-autoplay")&&F&&1e3*e.duration/e.playbackRate>F&&(F=1e3*e.duration/e.playbackRate+1e3)}),!F||Y||Te()||Le()||a.isLastSlide()&&!Je().next&&!0!==p.loop||(V=setTimeout(()=>{"function"==typeof p.autoSlideMethod?p.autoSlideMethod():xt(),vt()},F),X=Date.now()),k&&k.setPlaying(-1!==V)}}function bt(){clearTimeout(V),V=-1}function yt(){F&&!Y&&(Y=!0,le("autoslidepaused"),clearTimeout(V),k&&k.setPlaying(!1))}function At(){F&&Y&&(Y=!1,le("autoslideresumed"),vt())}function wt(){P=!0,p.rtl?(Le()||!1===ft())&&_e().left&&De(v+1,"grid"===p.navigationMode?b:void 0):(Le()||!1===mt())&&_e().left&&De(v-1,"grid"===p.navigationMode?b:void 0)}function St(){P=!0,p.rtl?(Le()||!1===mt())&&_e().right&&De(v-1,"grid"===p.navigationMode?b:void 0):(Le()||!1===ft())&&_e().right&&De(v+1,"grid"===p.navigationMode?b:void 0)}function Et(){(Le()||!1===mt())&&_e().up&&De(v,b-1)}function kt(){q=!0,(Le()||!1===ft())&&_e().down&&De(v,b+1)}function Lt(){if(!1===mt())if(_e().up)Et();else{let e;if(e=p.rtl?i(R.wrapper.querySelectorAll(".slides>section.future")).pop():i(R.wrapper.querySelectorAll(".slides>section.past")).pop(),e){let t=e.querySelectorAll("section").length-1||void 0;De(v-1,t)}}}function xt(){if(P=!0,q=!0,!1===ft()){let e=_e();e.down&&e.right&&p.loop&&a.isLastVerticalSlide(A)&&(e.down=!1),e.down?kt():p.rtl?wt():St()}}function Mt(e){for(;e&&"function"==typeof e.hasAttribute;){if(e.hasAttribute("data-prevent-swipe"))return!0;e=e.parentNode}return!1}function Nt(e){p.autoSlideStoppable&&yt()}function Pt(e){Ne(),clearTimeout(W),W=setTimeout(Pe,p.hideCursorTime)}function qt(e){e.shiftKey&&63===e.charCode&&pe()}function Ct(e){if("function"==typeof p.keyboardCondition&&!1===p.keyboardCondition(e))return!0;let t=e.keyCode,r=Y;Nt();let n=document.activeElement&&"inherit"!==document.activeElement.contentEditable,i=document.activeElement&&document.activeElement.tagName&&/input|textarea/i.test(document.activeElement.tagName),s=document.activeElement&&document.activeElement.className&&/speaker-notes/i.test(document.activeElement.className),o=e.shiftKey&&32===e.keyCode,l=e.shiftKey&&37===t,d=e.shiftKey&&39===t,c=!o&&!l&&!d&&(e.shiftKey||e.altKey||e.ctrlKey||e.metaKey);if(n||i||s||c)return;let u,h=[66,86,190,191];if("object"==typeof p.keyboard)for(u in p.keyboard)"togglePause"===p.keyboard[u]&&h.push(parseInt(u,10));if(Te()&&-1===h.indexOf(t))return!1;let g="linear"===p.navigationMode||!st()||!ot(),f=!1;if("object"==typeof p.keyboard)for(u in p.keyboard)if(parseInt(u,10)===t){let t=p.keyboard[u];"function"==typeof t?t.apply(null,[e]):"string"==typeof t&&"function"==typeof a[t]&&a[t].call(),f=!0}if(!1===f)for(u in J)if(parseInt(u,10)===t){let t=J[u].callback;"function"==typeof t?t.apply(null,[e]):"string"==typeof t&&"function"==typeof a[t]&&a[t].call(),f=!0}!1===f&&(f=!0,80===t||33===t?Lt():78===t||34===t?xt():72===t||37===t?l?De(0):!Le()&&g?Lt():wt():76===t||39===t?d?De(Number.MAX_VALUE):!Le()&&g?xt():St():75===t||38===t?!Le()&&g?Lt():Et():74===t||40===t?!Le()&&g?xt():kt():36===t?De(0):35===t?De(Number.MAX_VALUE):32===t?(Le()&&Ee(),e.shiftKey?Lt():xt()):58===t||59===t||66===t||86===t||190===t||191===t?Ie():70===t?(()=>{let e=document.documentElement,t=e.requestFullscreen||e.webkitRequestFullscreen||e.webkitRequestFullScreen||e.mozRequestFullScreen||e.msRequestFullscreen;t&&t.apply(e)})():65===t?p.autoSlideStoppable&&Re(r):f=!1),f?e.preventDefault&&e.preventDefault():27!==t&&79!==t||(R.overlay?ge():ke(),e.preventDefault&&e.preventDefault()),vt()}function It(e){if(Mt(e.target))return!0;K.startX=e.touches[0].clientX,K.startY=e.touches[0].clientY,K.startCount=e.touches.length}function Tt(e){if(Mt(e.target))return!0;if(K.captured)l.match(/android/gi)&&e.preventDefault();else{Nt();let t=e.touches[0].clientX,a=e.touches[0].clientY;if(1===e.touches.length&&2!==K.startCount){let r=t-K.startX,n=a-K.startY;r>K.threshold&&Math.abs(r)>Math.abs(n)?(K.captured=!0,"linear"===p.navigationMode?p.rtl?xt():Lt():wt()):r<-K.threshold&&Math.abs(r)>Math.abs(n)?(K.captured=!0,"linear"===p.navigationMode?p.rtl?Lt():xt():St()):n>K.threshold?(K.captured=!0,"linear"===p.navigationMode?Lt():Et()):n<-K.threshold&&(K.captured=!0,"linear"===p.navigationMode?xt():kt()),p.embedded?(K.captured||Me(A))&&e.preventDefault():e.preventDefault()}}}function Rt(e){K.captured=!1}function Dt(e){e.pointerType!==e.MSPOINTER_TYPE_TOUCH&&"touch"!==e.pointerType||(e.touches=[{clientX:e.clientX,clientY:e.clientY}],It(e))}function Ot(e){e.pointerType!==e.MSPOINTER_TYPE_TOUCH&&"touch"!==e.pointerType||(e.touches=[{clientX:e.clientX,clientY:e.clientY}],Tt(e))}function Bt(e){e.pointerType!==e.MSPOINTER_TYPE_TOUCH&&"touch"!==e.pointerType||(e.touches=[{clientX:e.clientX,clientY:e.clientY}],Rt())}function zt(e){if(Date.now()-H>600){H=Date.now();let t=e.detail||-e.wheelDelta;t>0?xt():t<0&&Lt()}}function Ht(e){Nt(),e.preventDefault();let t=nt().length,a=Math.floor(e.clientX/R.wrapper.offsetWidth*t);p.rtl&&(a=t-a),De(a)}function jt(e){e.preventDefault(),Nt(),"linear"===p.navigationMode?Lt():wt()}function $t(e){e.preventDefault(),Nt(),"linear"===p.navigationMode?xt():St()}function Wt(e){e.preventDefault(),Nt(),Et()}function Ut(e){e.preventDefault(),Nt(),kt()}function Ft(e){e.preventDefault(),Nt(),Lt()}function Vt(e){e.preventDefault(),Nt(),xt()}function Xt(e){et()}function Yt(e){fe()}function Kt(e){!1===document.hidden&&document.activeElement!==document.body&&("function"==typeof document.activeElement.blur&&document.activeElement.blur(),document.body.focus())}function _t(e){if(U&&Le()){e.preventDefault();let t=e.target;for(;t&&!t.nodeName.match(/section/gi);)t=t.parentNode;if(t&&!t.classList.contains("disabled")&&(Ee(),t.nodeName.match(/section/gi))){De(parseInt(t.getAttribute("data-index-h"),10),parseInt(t.getAttribute("data-index-v"),10))}}}function Jt(e){if(e.currentTarget&&e.currentTarget.hasAttribute("href")){let t=e.currentTarget.getAttribute("href");t&&(!function(e){ge(),R.overlay=document.createElement("div"),R.overlay.classList.add("overlay"),R.overlay.classList.add("overlay-preview"),R.wrapper.appendChild(R.overlay),R.overlay.innerHTML=`\n\t\t\t\t\n\t\t\t\t\n\t\t\t\n\t\t\t\n\t\t\t\n\t\t\t\t\n\t\t\t\t\n\t\t\t\t\tUnable to load iframe. This is likely due to the site's policy (x-frame-options).\n\t\t\t\t\n\t\t\t
`,R.overlay.querySelector("iframe").addEventListener("load",e=>{R.overlay.classList.add("loaded")},!1),R.overlay.querySelector(".close").addEventListener("click",e=>{ge(),e.preventDefault()},!1),R.overlay.querySelector(".external").addEventListener("click",e=>{ge()},!1)}(t),e.preventDefault())}}function Qt(e){a.isLastSlide()&&!1===p.loop?(De(0,0),At()):Y?At():yt()}return n(a,{VERSION:"4.0.0-dev",initialize:function(){if(e)return function(){S=/(iphone|ipod|ipad|android)/gi.test(l)||"MacIntel"===navigator.platform&&navigator.maxTouchPoints>1,E=/chrome/i.test(l)&&!/edge/i.test(l);let e=document.createElement("div");z.zoom="zoom"in e.style&&!S&&(E||/Version\/[\d\.]+.*Safari/.test(l))}(),R.wrapper=e,R.slides=e.querySelector(".slides"),window.addEventListener("load",fe,!1),p={...f,...t,...a.getQueryHash()},D.load(p.dependencies).then(Q),a;console.warn("reveal.js can not initialize without a valid .reveal element.")},configure:re,sync:Oe,syncSlide:function(e=A){ae(e),Be(e),O.load(e),Xe(),$e()},syncFragments:Be,slide:De,left:wt,right:St,up:Et,down:kt,prev:Lt,next:xt,navigateTo:De,navigateLeft:wt,navigateRight:St,navigateUp:Et,navigateDown:kt,navigatePrev:Lt,navigateNext:xt,navigateFragment:gt,prevFragment:mt,nextFragment:ft,layout:fe,shuffle:ze,availableRoutes:_e,availableFragments:Je,toggleHelp:pe,toggleOverview:ke,togglePause:Ie,toggleAutoSlide:Re,isOverview:Le,isPaused:Te,isAutoSliding:function(){return!(!F||Y)},isSpeakerNotes:Ge,loadSlide:()=>O.load,unloadSlide:()=>O.unload,addEventListeners:ne,removeEventListeners:ie,getState:ut,setState:function(e){if("object"==typeof e){De(s(e.indexh),s(e.indexv),s(e.indexf));let t=s(e.paused),a=s(e.overview);"boolean"==typeof t&&t!==Te()&&Ie(t),"boolean"==typeof a&&a!==Le()&&ke(a)}},getSlidePastCount:Qe,getProgress:Ze,getIndices:at,getSlides:rt,getSlidesAttributes:function(){return rt().map(e=>{let t={};for(let a=0;aD.registerPlugin(...e),hasPlugin:(...e)=>D.hasPlugin(...e),getPlugin:(...e)=>D.getPlugin(...e),getPlugins:()=>D.getRegisteredPlugins(),getComputedSlideSize:ve,getPreviousSlide:()=>y,getCurrentSlide:()=>A,getScale:()=>I,getConfig:()=>p,getQueryHash:()=>{let e={};location.search.replace(/[A-Z0-9]+?=([\w\.%-]*)/gi,t=>{e[t.split("=").shift()]=t.split("=").pop()});for(let t in e){let a=e[t];e[t]=s(unescape(a))}return void 0!==e.dependencies&&delete e.dependencies,e},getRevealElement:()=>R.wrapper||document.querySelector(".reveal"),getSlidesElement:()=>R.slides,isFirstSlide:()=>0===v&&0===b,isLastSlide:()=>!!A&&(!A.nextElementSibling&&(!Me(A)||!A.parentNode.nextElementSibling)),isLastVerticalSlide:()=>!(!A||!Me(A))&&!A.nextElementSibling,isReady:()=>L,addEventListener:(e,t,r)=>{a.getRevealElement().addEventListener(e,t,r)},removeEventListener:(e,t,r)=>{a.getRevealElement().removeEventListener(e,t,r)},triggerKey:e=>Ct({keyCode:e}),registerKeyboardShortcut:(e,t)=>_[e]=t})};window.Reveal=v,window.Reveal.initialize=e=>(window.Reveal=new v(document.querySelector(".reveal"),e),window.Reveal.initialize(),new Promise(e=>window.Reveal.addEventListener("ready",e)))}]);
\ No newline at end of file
diff --git a/js/controllers/autoanimate.js b/js/controllers/autoanimate.js
new file mode 100644
index 0000000..2015190
--- /dev/null
+++ b/js/controllers/autoanimate.js
@@ -0,0 +1,544 @@
+import { extend, toArray, createStyleSheet } from '../utils/util.js'
+
+export default class AutoAnimate {
+
+ constructor( Reveal ) {
+
+ this.Reveal = Reveal;
+
+ // Counter used to generate unique IDs for auto-animated elements
+ this.autoAnimateCounter = 0;
+
+ }
+
+ /**
+ * Runs an auto-animation between the given slides.
+ *
+ * @param {HTMLElement} fromSlide
+ * @param {HTMLElement} toSlide
+ */
+ run( fromSlide, toSlide ) {
+
+ // Clean up after prior animations
+ this.reset();
+
+ // Ensure that both slides are auto-animate targets
+ if( fromSlide.hasAttribute( 'data-auto-animate' ) && toSlide.hasAttribute( 'data-auto-animate' ) ) {
+
+ // Create a new auto-animate sheet
+ this.autoAnimateStyleSheet = this.autoAnimateStyleSheet || createStyleSheet();
+
+ let animationOptions = this.getAutoAnimateOptions( toSlide );
+
+ // Set our starting state
+ fromSlide.dataset.autoAnimate = 'pending';
+ toSlide.dataset.autoAnimate = 'pending';
+
+ // Inject our auto-animate styles for this transition
+ let css = this.getAutoAnimatableElements( fromSlide, toSlide ).map( elements => {
+ return this.getAutoAnimateCSS( elements.from, elements.to, elements.options || {}, animationOptions, this.autoAnimateCounter++ );
+ } );
+
+ // Animate unmatched elements, if enabled
+ if( toSlide.dataset.autoAnimateUnmatched !== 'false' && this.Reveal.getConfig().autoAnimateUnmatched === true ) {
+ this.getUnmatchedAutoAnimateElements( toSlide ).forEach( unmatchedElement => {
+ unmatchedElement.dataset.autoAnimateTarget = 'unmatched';
+ } );
+
+ css.push( `[data-auto-animate="running"] [data-auto-animate-target="unmatched"] { transition: opacity ${animationOptions.duration*0.8}s ease ${animationOptions.duration*0.2}s; }` );
+ }
+
+ // Setting the whole chunk of CSS at once is the most
+ // efficient way to do this. Using sheet.insertRule
+ // is multiple factors slower.
+ this.autoAnimateStyleSheet.innerHTML = css.join( '' );
+
+ // Start the animation next cycle
+ requestAnimationFrame( () => {
+ if( this.autoAnimateStyleSheet ) {
+ // This forces our newly injected styles to be applied in Firefox
+ getComputedStyle( this.autoAnimateStyleSheet ).fontWeight;
+
+ toSlide.dataset.autoAnimate = 'running';
+ }
+ } );
+
+ this.Reveal.dispatchEvent( 'autoanimate', { fromSlide: fromSlide, toSlide: toSlide, sheet: this.autoAnimateStyleSheet } );
+
+ }
+
+ }
+
+ /**
+ * Rolls back all changes that we've made to the DOM so
+ * that as part of animating.
+ */
+ reset() {
+
+ // Reset slides
+ toArray( this.Reveal.getRevealElement().querySelectorAll( '[data-auto-animate]:not([data-auto-animate=""])' ) ).forEach( element => {
+ element.dataset.autoAnimate = '';
+ } );
+
+ // Reset elements
+ toArray( this.Reveal.getRevealElement().querySelectorAll( '[data-auto-animate-target]' ) ).forEach( element => {
+ delete element.dataset.autoAnimateTarget;
+ } );
+
+ // Remove the animation sheet
+ if( this.autoAnimateStyleSheet && this.autoAnimateStyleSheet.parentNode ) {
+ this.autoAnimateStyleSheet.parentNode.removeChild( this.autoAnimateStyleSheet );
+ this.autoAnimateStyleSheet = null;
+ }
+
+ }
+
+ /**
+ * Auto-animates the properties of an element from their original
+ * values to their new state.
+ *
+ * @param {HTMLElement} from
+ * @param {HTMLElement} to
+ * @param {Object} elementOptions Options for this element pair
+ * @param {Object} animationOptions Options set at the slide level
+ * @param {String} id Unique ID that we can use to identify this
+ * auto-animate element in the DOM
+ */
+ getAutoAnimateCSS( from, to, elementOptions, animationOptions, id ) {
+
+ // 'from' elements are given a data-auto-animate-target with no value,
+ // 'to' elements are are given a data-auto-animate-target with an ID
+ from.dataset.autoAnimateTarget = '';
+ to.dataset.autoAnimateTarget = id;
+
+ // Each element may override any of the auto-animate options
+ // like transition easing, duration and delay via data-attributes
+ let options = this.getAutoAnimateOptions( to, animationOptions );
+
+ // If we're using a custom element matcher the element options
+ // may contain additional transition overrides
+ if( typeof elementOptions.delay !== 'undefined' ) options.delay = elementOptions.delay;
+ if( typeof elementOptions.duration !== 'undefined' ) options.duration = elementOptions.duration;
+ if( typeof elementOptions.easing !== 'undefined' ) options.easing = elementOptions.easing;
+
+ let fromProps = this.getAutoAnimatableProperties( 'from', from, elementOptions ),
+ toProps = this.getAutoAnimatableProperties( 'to', to, elementOptions );
+
+ // If translation and/or scaling are enabled, css transform
+ // the 'to' element so that it matches the position and size
+ // of the 'from' element
+ if( elementOptions.translate !== false || elementOptions.scale !== false ) {
+
+ let presentationScale = this.Reveal.getScale();
+
+ let delta = {
+ x: ( fromProps.x - toProps.x ) / presentationScale,
+ y: ( fromProps.y - toProps.y ) / presentationScale,
+ scaleX: fromProps.width / toProps.width,
+ scaleY: fromProps.height / toProps.height
+ };
+
+ // Limit decimal points to avoid 0.0001px blur and stutter
+ delta.x = Math.round( delta.x * 1000 ) / 1000;
+ delta.y = Math.round( delta.y * 1000 ) / 1000;
+ delta.scaleX = Math.round( delta.scaleX * 1000 ) / 1000;
+ delta.scaleX = Math.round( delta.scaleX * 1000 ) / 1000;
+
+ let translate = elementOptions.translate !== false && ( delta.x !== 0 || delta.y !== 0 ),
+ scale = elementOptions.scale !== false && ( delta.scaleX !== 0 || delta.scaleY !== 0 );
+
+ // No need to transform if nothing's changed
+ if( translate || scale ) {
+
+ let transform = [];
+
+ if( translate ) transform.push( `translate(${delta.x}px, ${delta.y}px)` );
+ if( scale ) transform.push( `scale(${delta.scaleX}, ${delta.scaleY})` );
+
+ fromProps.styles['transform'] = transform.join( ' ' );
+ fromProps.styles['transform-origin'] = 'top left';
+
+ toProps.styles['transform'] = 'none';
+
+ }
+
+ }
+
+ // Delete all unchanged 'to' styles
+ for( let propertyName in toProps.styles ) {
+ const toValue = toProps.styles[propertyName];
+ const fromValue = fromProps.styles[propertyName];
+
+ if( toValue === fromValue ) {
+ delete toProps.styles[propertyName];
+ }
+ else {
+ // If these property values were set via a custom matcher providing
+ // an explicit 'from' and/or 'to' value, we always inject those values.
+ if( toValue.explicitValue === true ) {
+ toProps.styles[propertyName] = toValue.value;
+ }
+
+ if( fromValue.explicitValue === true ) {
+ fromProps.styles[propertyName] = fromValue.value;
+ }
+ }
+ }
+
+ let css = '';
+
+ let toStyleProperties = Object.keys( toProps.styles );
+
+ // Only create animate this element IF at least one style
+ // property has changed
+ if( toStyleProperties.length > 0 ) {
+
+ // Instantly move to the 'from' state
+ fromProps.styles['transition'] = 'none';
+
+ // Animate towards the 'to' state
+ toProps.styles['transition'] = `all ${options.duration}s ${options.easing} ${options.delay}s`;
+ toProps.styles['transition-property'] = toStyleProperties.join( ', ' );
+ toProps.styles['will-change'] = toStyleProperties.join( ', ' );
+
+ // Build up our custom CSS. We need to override inline styles
+ // so we need to make our styles vErY IMPORTANT!1!!
+ let fromCSS = Object.keys( fromProps.styles ).map( propertyName => {
+ return propertyName + ': ' + fromProps.styles[propertyName] + ' !important;';
+ } ).join( '' );
+
+ let toCSS = Object.keys( toProps.styles ).map( propertyName => {
+ return propertyName + ': ' + toProps.styles[propertyName] + ' !important;';
+ } ).join( '' );
+
+ css = '[data-auto-animate-target="'+ id +'"] {'+ fromCSS +'}' +
+ '[data-auto-animate="running"] [data-auto-animate-target="'+ id +'"] {'+ toCSS +'}';
+
+ }
+
+ return css;
+
+ }
+
+ /**
+ * Returns the auto-animate options for the given element.
+ *
+ * @param {HTMLElement} element Element to pick up options
+ * from, either a slide or an animation target
+ * @param {Object} [inheritedOptions] Optional set of existing
+ * options
+ */
+ getAutoAnimateOptions( element, inheritedOptions ) {
+
+ let options = {
+ easing: this.Reveal.getConfig().autoAnimateEasing,
+ duration: this.Reveal.getConfig().autoAnimateDuration,
+ delay: 0
+ };
+
+ options = extend( options, inheritedOptions );
+
+ // Inherit options from parent elements
+ if( element.closest && element.parentNode ) {
+ let autoAnimatedParent = element.parentNode.closest( '[data-auto-animate-target]' );
+ if( autoAnimatedParent ) {
+ options = this.getAutoAnimateOptions( autoAnimatedParent, options );
+ }
+ }
+
+ if( element.dataset.autoAnimateEasing ) {
+ options.easing = element.dataset.autoAnimateEasing;
+ }
+
+ if( element.dataset.autoAnimateDuration ) {
+ options.duration = parseFloat( element.dataset.autoAnimateDuration );
+ }
+
+ if( element.dataset.autoAnimateDelay ) {
+ options.delay = parseFloat( element.dataset.autoAnimateDelay );
+ }
+
+ return options;
+
+ }
+
+ /**
+ * Returns an object containing all of the properties
+ * that can be auto-animated for the given element and
+ * their current computed values.
+ *
+ * @param {String} direction 'from' or 'to'
+ */
+ getAutoAnimatableProperties( direction, element, elementOptions ) {
+
+ let properties = { styles: [] };
+
+ // Position and size
+ if( elementOptions.translate !== false || elementOptions.scale !== false ) {
+ let bounds;
+
+ // Custom auto-animate may optionally return a custom tailored
+ // measurement function
+ if( typeof elementOptions.measure === 'function' ) {
+ bounds = elementOptions.measure( element );
+ }
+ else {
+ bounds = element.getBoundingClientRect();
+ }
+
+ properties.x = bounds.x;
+ properties.y = bounds.y;
+ properties.width = bounds.width;
+ properties.height = bounds.height;
+ }
+
+ const computedStyles = getComputedStyle( element );
+
+ // CSS styles
+ ( elementOptions.styles || this.Reveal.getConfig().autoAnimateStyles ).forEach( style => {
+ let value;
+
+ // `style` is either the property name directly, or an object
+ // definition of a style property
+ if( typeof style === 'string' ) style = { property: style };
+
+ if( typeof style.from !== 'undefined' && direction === 'from' ) {
+ value = { value: style.from, explicitValue: true };
+ }
+ else if( typeof style.to !== 'undefined' && direction === 'to' ) {
+ value = { value: style.to, explicitValue: true };
+ }
+ else {
+ value = computedStyles[style.property];
+ }
+
+ if( value !== '' ) {
+ properties.styles[style.property] = value;
+ }
+ } );
+
+ return properties;
+
+ }
+
+ /**
+ * Get a list of all element pairs that we can animate
+ * between the given slides.
+ *
+ * @param {HTMLElement} fromSlide
+ * @param {HTMLElement} toSlide
+ *
+ * @return {Array} Each value is an array where [0] is
+ * the element we're animating from and [1] is the
+ * element we're animating to
+ */
+ getAutoAnimatableElements( fromSlide, toSlide ) {
+
+ let matcher = typeof this.Reveal.getConfig().autoAnimateMatcher === 'function' ? this.Reveal.getConfig().autoAnimateMatcher : this.getAutoAnimatePairs;
+
+ let pairs = matcher.call( this, fromSlide, toSlide );
+
+ let reserved = [];
+
+ // Remove duplicate pairs
+ return pairs.filter( ( pair, index ) => {
+ if( reserved.indexOf( pair.to ) === -1 ) {
+ reserved.push( pair.to );
+ return true;
+ }
+ } );
+
+ }
+
+ /**
+ * Identifies matching elements between slides.
+ *
+ * You can specify a custom matcher function by using
+ * the `autoAnimateMatcher` config option.
+ */
+ getAutoAnimatePairs( fromSlide, toSlide ) {
+
+ let pairs = [];
+
+ const codeNodes = 'pre';
+ const textNodes = 'h1, h2, h3, h4, h5, h6, p, li';
+ const mediaNodes = 'img, video, iframe';
+
+ // Eplicit matches via data-id
+ this.findAutoAnimateMatches( pairs, fromSlide, toSlide, '[data-id]', node => {
+ return node.nodeName + ':::' + node.getAttribute( 'data-id' );
+ } );
+
+ // Text
+ this.findAutoAnimateMatches( pairs, fromSlide, toSlide, textNodes, node => {
+ return node.nodeName + ':::' + node.innerText;
+ } );
+
+ // Media
+ this.findAutoAnimateMatches( pairs, fromSlide, toSlide, mediaNodes, node => {
+ return node.nodeName + ':::' + ( node.getAttribute( 'src' ) || node.getAttribute( 'data-src' ) );
+ } );
+
+ // Code
+ this.findAutoAnimateMatches( pairs, fromSlide, toSlide, codeNodes, node => {
+ return node.nodeName + ':::' + node.innerText;
+ } );
+
+ pairs.forEach( pair => {
+
+ // Disable scale transformations on text nodes, we transiition
+ // each individual text property instead
+ if( pair.from.matches( textNodes ) ) {
+ pair.options = { scale: false };
+ }
+ // Animate individual lines of code
+ else if( pair.from.matches( codeNodes ) ) {
+
+ // Transition the code block's width and height instead of scaling
+ // to prevent its content from being squished
+ pair.options = { scale: false, styles: [ 'width', 'height' ] };
+
+ // Lines of code
+ this.findAutoAnimateMatches( pairs, pair.from, pair.to, '.hljs .hljs-ln-code', node => {
+ return node.textContent;
+ }, {
+ scale: false,
+ styles: [],
+ measure: this.getLocalBoundingBox.bind( this )
+ } );
+
+ // Line numbers
+ this.findAutoAnimateMatches( pairs, pair.from, pair.to, '.hljs .hljs-ln-line[data-line-number]', node => {
+ return node.getAttribute( 'data-line-number' );
+ }, {
+ scale: false,
+ styles: [ 'width' ],
+ measure: this.getLocalBoundingBox.bind( this )
+ } );
+
+ }
+
+ }, this );
+
+ return pairs;
+
+ }
+
+ /**
+ * Helper method which returns a bounding box based on
+ * the given elements offset coordinates.
+ *
+ * @param {HTMLElement} element
+ * @return {Object} x, y, width, height
+ */
+ getLocalBoundingBox( element ) {
+
+ const presentationScale = this.Reveal.getScale();
+
+ return {
+ x: Math.round( ( element.offsetLeft * presentationScale ) * 100 ) / 100,
+ y: Math.round( ( element.offsetTop * presentationScale ) * 100 ) / 100,
+ width: Math.round( ( element.offsetWidth * presentationScale ) * 100 ) / 100,
+ height: Math.round( ( element.offsetHeight * presentationScale ) * 100 ) / 100
+ };
+
+ }
+
+ /**
+ * Finds matching elements between two slides.
+ *
+ * @param {Array} pairs List of pairs to push matches to
+ * @param {HTMLElement} fromScope Scope within the from element exists
+ * @param {HTMLElement} toScope Scope within the to element exists
+ * @param {String} selector CSS selector of the element to match
+ * @param {Function} serializer A function that accepts an element and returns
+ * a stringified ID based on its contents
+ * @param {Object} animationOptions Optional config options for this pair
+ */
+ findAutoAnimateMatches( pairs, fromScope, toScope, selector, serializer, animationOptions ) {
+
+ let fromMatches = {};
+ let toMatches = {};
+
+ [].slice.call( fromScope.querySelectorAll( selector ) ).forEach( ( element, i ) => {
+ const key = serializer( element );
+ if( typeof key === 'string' && key.length ) {
+ fromMatches[key] = fromMatches[key] || [];
+ fromMatches[key].push( element );
+ }
+ } );
+
+ [].slice.call( toScope.querySelectorAll( selector ) ).forEach( ( element, i ) => {
+ const key = serializer( element );
+ toMatches[key] = toMatches[key] || [];
+ toMatches[key].push( element );
+
+ let fromElement;
+
+ // Retrieve the 'from' element
+ if( fromMatches[key] ) {
+ const pimaryIndex = toMatches[key].length - 1;
+ const secondaryIndex = fromMatches[key].length - 1;
+
+ // If there are multiple identical from elements, retrieve
+ // the one at the same index as our to-element.
+ if( fromMatches[key][ pimaryIndex ] ) {
+ fromElement = fromMatches[key][ pimaryIndex ];
+ fromMatches[key][ pimaryIndex ] = null;
+ }
+ // If there are no matching from-elements at the same index,
+ // use the last one.
+ else if( fromMatches[key][ secondaryIndex ] ) {
+ fromElement = fromMatches[key][ secondaryIndex ];
+ fromMatches[key][ secondaryIndex ] = null;
+ }
+ }
+
+ // If we've got a matching pair, push it to the list of pairs
+ if( fromElement ) {
+ pairs.push({
+ from: fromElement,
+ to: element,
+ options: animationOptions
+ });
+ }
+ } );
+
+ }
+
+ /**
+ * Returns a all elements within the given scope that should
+ * be considered unmatched in an auto-animate transition. If
+ * fading of unmatched elements is turned on, these elements
+ * will fade when going between auto-animate slides.
+ *
+ * Note that parents of auto-animate targets are NOT considerd
+ * unmatched since fading them would break the auto-animation.
+ *
+ * @param {HTMLElement} rootElement
+ * @return {Array}
+ */
+ getUnmatchedAutoAnimateElements( rootElement ) {
+
+ return [].slice.call( rootElement.children ).reduce( ( result, element ) => {
+
+ const containsAnimatedElements = element.querySelector( '[data-auto-animate-target]' );
+
+ // The element is unmatched if
+ // - It is not an auto-animate target
+ // - It does not contain any auto-animate targets
+ if( !element.hasAttribute( 'data-auto-animate-target' ) && !containsAnimatedElements ) {
+ result.push( element );
+ }
+
+ if( element.querySelector( '[data-auto-animate-target]' ) ) {
+ result = result.concat( this.getUnmatchedAutoAnimateElements( element ) );
+ }
+
+ return result;
+
+ }, [] );
+
+ }
+
+}
\ No newline at end of file
diff --git a/js/controllers/plugins.js b/js/controllers/plugins.js
index 300b0ba..f56bac8 100644
--- a/js/controllers/plugins.js
+++ b/js/controllers/plugins.js
@@ -7,8 +7,8 @@ export default class Plugins {
constructor() {
- // Flags our current state (pending -> loading -> loaded)
- this.state = 'pending';
+ // Flags our current state (idle -> loading -> loaded)
+ this.state = 'idle';
// An id:instance map of currently registed plugins
this.registeredPlugins = {};
diff --git a/js/controllers/slidecontent.js b/js/controllers/slidecontent.js
new file mode 100644
index 0000000..2285b29
--- /dev/null
+++ b/js/controllers/slidecontent.js
@@ -0,0 +1,408 @@
+import { HORIZONTAL_SLIDES_SELECTOR, VERTICAL_SLIDES_SELECTOR } from '../utils/constants.js'
+import { extend, toArray, closestParent } from '../utils/util.js'
+
+export default class SlideContent {
+
+ constructor( Reveal ) {
+
+ this.Reveal = Reveal;
+
+ }
+
+ /**
+ * Called when the given slide is within the configured view
+ * distance. Shows the slide element and loads any content
+ * that is set to load lazily (data-src).
+ *
+ * @param {HTMLElement} slide Slide to show
+ */
+ load( slide, options = {} ) {
+
+ // Show the slide element
+ slide.style.display = this.Reveal.getConfig().display;
+
+ // Media elements with data-src attributes
+ toArray( slide.querySelectorAll( 'img[data-src], video[data-src], audio[data-src], iframe[data-src]' ) ).forEach( element => {
+ if( element.tagName !== 'IFRAME' || shouldPreload( element ) ) {
+ element.setAttribute( 'src', element.getAttribute( 'data-src' ) );
+ element.setAttribute( 'data-lazy-loaded', '' );
+ element.removeAttribute( 'data-src' );
+ }
+ } );
+
+ // Media elements with children
+ toArray( slide.querySelectorAll( 'video, audio' ) ).forEach( media => {
+ let sources = 0;
+
+ toArray( media.querySelectorAll( 'source[data-src]' ) ).forEach( source => {
+ source.setAttribute( 'src', source.getAttribute( 'data-src' ) );
+ source.removeAttribute( 'data-src' );
+ source.setAttribute( 'data-lazy-loaded', '' );
+ sources += 1;
+ } );
+
+ // If we rewrote sources for this video/audio element, we need
+ // to manually tell it to load from its new origin
+ if( sources > 0 ) {
+ media.load();
+ }
+ } );
+
+
+ // Show the corresponding background element
+ let background = slide.slideBackgroundElement;
+ if( background ) {
+ background.style.display = 'block';
+
+ let backgroundContent = slide.slideBackgroundContentElement;
+ let backgroundIframe = slide.getAttribute( 'data-background-iframe' );
+
+ // If the background contains media, load it
+ if( background.hasAttribute( 'data-loaded' ) === false ) {
+ background.setAttribute( 'data-loaded', 'true' );
+
+ let backgroundImage = slide.getAttribute( 'data-background-image' ),
+ backgroundVideo = slide.getAttribute( 'data-background-video' ),
+ backgroundVideoLoop = slide.hasAttribute( 'data-background-video-loop' ),
+ backgroundVideoMuted = slide.hasAttribute( 'data-background-video-muted' );
+
+ // Images
+ if( backgroundImage ) {
+ backgroundContent.style.backgroundImage = 'url('+ encodeURI( backgroundImage ) +')';
+ }
+ // Videos
+ else if ( backgroundVideo && !this.Reveal.isSpeakerNotes() ) {
+ let video = document.createElement( 'video' );
+
+ if( backgroundVideoLoop ) {
+ video.setAttribute( 'loop', '' );
+ }
+
+ if( backgroundVideoMuted ) {
+ video.muted = true;
+ }
+
+ // Inline video playback works (at least in Mobile Safari) as
+ // long as the video is muted and the `playsinline` attribute is
+ // present
+ if( isMobileDevice ) {
+ video.muted = true;
+ video.autoplay = true;
+ video.setAttribute( 'playsinline', '' );
+ }
+
+ // Support comma separated lists of video sources
+ backgroundVideo.split( ',' ).forEach( source => {
+ video.innerHTML += '';
+ } );
+
+ backgroundContent.appendChild( video );
+ }
+ // Iframes
+ else if( backgroundIframe && options.excludeIframes !== true ) {
+ let iframe = document.createElement( 'iframe' );
+ iframe.setAttribute( 'allowfullscreen', '' );
+ iframe.setAttribute( 'mozallowfullscreen', '' );
+ iframe.setAttribute( 'webkitallowfullscreen', '' );
+ iframe.setAttribute( 'allow', 'autoplay' );
+
+ iframe.setAttribute( 'data-src', backgroundIframe );
+
+ iframe.style.width = '100%';
+ iframe.style.height = '100%';
+ iframe.style.maxHeight = '100%';
+ iframe.style.maxWidth = '100%';
+
+ backgroundContent.appendChild( iframe );
+ }
+ }
+
+ // Start loading preloadable iframes
+ let backgroundIframeElement = backgroundContent.querySelector( 'iframe[data-src]' );
+ if( backgroundIframeElement ) {
+
+ // Check if this iframe is eligible to be preloaded
+ if( shouldPreload( background ) && !/autoplay=(1|true|yes)/gi.test( backgroundIframe ) ) {
+ if( backgroundIframeElement.getAttribute( 'src' ) !== backgroundIframe ) {
+ backgroundIframeElement.setAttribute( 'src', backgroundIframe );
+ }
+ }
+
+ }
+
+ }
+
+ }
+
+ /**
+ * Unloads and hides the given slide. This is called when the
+ * slide is moved outside of the configured view distance.
+ *
+ * @param {HTMLElement} slide
+ */
+ unload( slide ) {
+
+ // Hide the slide element
+ slide.style.display = 'none';
+
+ // Hide the corresponding background element
+ let background = this.Reveal.getSlideBackground( slide );
+ if( background ) {
+ background.style.display = 'none';
+
+ // Unload any background iframes
+ toArray( background.querySelectorAll( 'iframe[src]' ) ).forEach( element => {
+ element.removeAttribute( 'src' );
+ } );
+ }
+
+ // Reset lazy-loaded media elements with src attributes
+ toArray( slide.querySelectorAll( 'video[data-lazy-loaded][src], audio[data-lazy-loaded][src], iframe[data-lazy-loaded][src]' ) ).forEach( element => {
+ element.setAttribute( 'data-src', element.getAttribute( 'src' ) );
+ element.removeAttribute( 'src' );
+ } );
+
+ // Reset lazy-loaded media elements with children
+ toArray( slide.querySelectorAll( 'video[data-lazy-loaded] source[src], audio source[src]' ) ).forEach( source => {
+ source.setAttribute( 'data-src', source.getAttribute( 'src' ) );
+ source.removeAttribute( 'src' );
+ } );
+
+ }
+
+ /**
+ * Enforces origin-specific format rules for embedded media.
+ */
+ formatEmbeddedContent() {
+
+ let _appendParamToIframeSource = ( sourceAttribute, sourceURL, param ) => {
+ toArray( this.Reveal.getSlidesElement().querySelectorAll( 'iframe['+ sourceAttribute +'*="'+ sourceURL +'"]' ) ).forEach( el => {
+ let src = el.getAttribute( sourceAttribute );
+ if( src && src.indexOf( param ) === -1 ) {
+ el.setAttribute( sourceAttribute, src + ( !/\?/.test( src ) ? '?' : '&' ) + param );
+ }
+ });
+ };
+
+ // YouTube frames must include "?enablejsapi=1"
+ _appendParamToIframeSource( 'src', 'youtube.com/embed/', 'enablejsapi=1' );
+ _appendParamToIframeSource( 'data-src', 'youtube.com/embed/', 'enablejsapi=1' );
+
+ // Vimeo frames must include "?api=1"
+ _appendParamToIframeSource( 'src', 'player.vimeo.com/', 'api=1' );
+ _appendParamToIframeSource( 'data-src', 'player.vimeo.com/', 'api=1' );
+
+ }
+
+ /**
+ * Start playback of any embedded content inside of
+ * the given element.
+ *
+ * @param {HTMLElement} element
+ */
+ startEmbeddedContent( element ) {
+
+ if( element && !this.Reveal.isSpeakerNotes() ) {
+
+ // Restart GIFs
+ toArray( element.querySelectorAll( 'img[src$=".gif"]' ) ).forEach( el => {
+ // Setting the same unchanged source like this was confirmed
+ // to work in Chrome, FF & Safari
+ el.setAttribute( 'src', el.getAttribute( 'src' ) );
+ } );
+
+ // HTML5 media elements
+ toArray( element.querySelectorAll( 'video, audio' ) ).forEach( el => {
+ if( closestParent( el, '.fragment' ) && !closestParent( el, '.fragment.visible' ) ) {
+ return;
+ }
+
+ // Prefer an explicit global autoplay setting
+ let autoplay = config.autoPlayMedia;
+
+ // If no global setting is available, fall back on the element's
+ // own autoplay setting
+ if( typeof autoplay !== 'boolean' ) {
+ autoplay = el.hasAttribute( 'data-autoplay' ) || !!closestParent( el, '.slide-background' );
+ }
+
+ if( autoplay && typeof el.play === 'function' ) {
+
+ // If the media is ready, start playback
+ if( el.readyState > 1 ) {
+ this.startEmbeddedMedia( { target: el } );
+ }
+ // Mobile devices never fire a loaded event so instead
+ // of waiting, we initiate playback
+ else if( isMobileDevice ) {
+ let promise = el.play();
+
+ // If autoplay does not work, ensure that the controls are visible so
+ // that the viewer can start the media on their own
+ if( promise && typeof promise.catch === 'function' && el.controls === false ) {
+ promise.catch( () => {
+ el.controls = true;
+
+ // Once the video does start playing, hide the controls again
+ el.addEventListener( 'play', () => {
+ el.controls = false;
+ } );
+ } );
+ }
+ }
+ // If the media isn't loaded, wait before playing
+ else {
+ el.removeEventListener( 'loadeddata', this.startEmbeddedMedia ); // remove first to avoid dupes
+ el.addEventListener( 'loadeddata', this.startEmbeddedMedia );
+ }
+
+ }
+ } );
+
+ // Normal iframes
+ toArray( element.querySelectorAll( 'iframe[src]' ) ).forEach( el => {
+ if( closestParent( el, '.fragment' ) && !closestParent( el, '.fragment.visible' ) ) {
+ return;
+ }
+
+ this.startEmbeddedIframe( { target: el } );
+ } );
+
+ // Lazy loading iframes
+ toArray( element.querySelectorAll( 'iframe[data-src]' ) ).forEach( el => {
+ if( closestParent( el, '.fragment' ) && !closestParent( el, '.fragment.visible' ) ) {
+ return;
+ }
+
+ if( el.getAttribute( 'src' ) !== el.getAttribute( 'data-src' ) ) {
+ el.removeEventListener( 'load', this.startEmbeddedIframe ); // remove first to avoid dupes
+ el.addEventListener( 'load', this.startEmbeddedIframe );
+ el.setAttribute( 'src', el.getAttribute( 'data-src' ) );
+ }
+ } );
+
+ }
+
+ }
+
+ /**
+ * Starts playing an embedded video/audio element after
+ * it has finished loading.
+ *
+ * @param {object} event
+ */
+ startEmbeddedMedia( event ) {
+
+ let isAttachedToDOM = !!closestParent( event.target, 'html' ),
+ isVisible = !!closestParent( event.target, '.present' );
+
+ if( isAttachedToDOM && isVisible ) {
+ event.target.currentTime = 0;
+ event.target.play();
+ }
+
+ event.target.removeEventListener( 'loadeddata', this.startEmbeddedMedia );
+
+ }
+
+ /**
+ * "Starts" the content of an embedded iframe using the
+ * postMessage API.
+ *
+ * @param {object} event
+ */
+ startEmbeddedIframe( event ) {
+
+ let iframe = event.target;
+
+ if( iframe && iframe.contentWindow ) {
+
+ let isAttachedToDOM = !!closestParent( event.target, 'html' ),
+ isVisible = !!closestParent( event.target, '.present' );
+
+ if( isAttachedToDOM && isVisible ) {
+
+ // Prefer an explicit global autoplay setting
+ let autoplay = config.autoPlayMedia;
+
+ // If no global setting is available, fall back on the element's
+ // own autoplay setting
+ if( typeof autoplay !== 'boolean' ) {
+ autoplay = iframe.hasAttribute( 'data-autoplay' ) || !!closestParent( iframe, '.slide-background' );
+ }
+
+ // YouTube postMessage API
+ if( /youtube\.com\/embed\//.test( iframe.getAttribute( 'src' ) ) && autoplay ) {
+ iframe.contentWindow.postMessage( '{"event":"command","func":"playVideo","args":""}', '*' );
+ }
+ // Vimeo postMessage API
+ else if( /player\.vimeo\.com\//.test( iframe.getAttribute( 'src' ) ) && autoplay ) {
+ iframe.contentWindow.postMessage( '{"method":"play"}', '*' );
+ }
+ // Generic postMessage API
+ else {
+ iframe.contentWindow.postMessage( 'slide:start', '*' );
+ }
+
+ }
+
+ }
+
+ }
+
+ /**
+ * Stop playback of any embedded content inside of
+ * the targeted slide.
+ *
+ * @param {HTMLElement} element
+ */
+ stopEmbeddedContent( element, options = {} ) {
+
+ options = extend( {
+ // Defaults
+ unloadIframes: true
+ }, options );
+
+ if( element && element.parentNode ) {
+ // HTML5 media elements
+ toArray( element.querySelectorAll( 'video, audio' ) ).forEach( el => {
+ if( !el.hasAttribute( 'data-ignore' ) && typeof el.pause === 'function' ) {
+ el.setAttribute('data-paused-by-reveal', '');
+ el.pause();
+ }
+ } );
+
+ // Generic postMessage API for non-lazy loaded iframes
+ toArray( element.querySelectorAll( 'iframe' ) ).forEach( el => {
+ if( el.contentWindow ) el.contentWindow.postMessage( 'slide:stop', '*' );
+ el.removeEventListener( 'load', this.startEmbeddedIframe );
+ });
+
+ // YouTube postMessage API
+ toArray( element.querySelectorAll( 'iframe[src*="youtube.com/embed/"]' ) ).forEach( el => {
+ if( !el.hasAttribute( 'data-ignore' ) && el.contentWindow && typeof el.contentWindow.postMessage === 'function' ) {
+ el.contentWindow.postMessage( '{"event":"command","func":"pauseVideo","args":""}', '*' );
+ }
+ });
+
+ // Vimeo postMessage API
+ toArray( element.querySelectorAll( 'iframe[src*="player.vimeo.com/"]' ) ).forEach( el => {
+ if( !el.hasAttribute( 'data-ignore' ) && el.contentWindow && typeof el.contentWindow.postMessage === 'function' ) {
+ el.contentWindow.postMessage( '{"method":"pause"}', '*' );
+ }
+ });
+
+ if( options.unloadIframes === true ) {
+ // Unload lazy-loaded iframes
+ toArray( element.querySelectorAll( 'iframe[data-src]' ) ).forEach( el => {
+ // Only removing the src doesn't actually unload the frame
+ // in all browsers (Firefox) so we set it to blank first
+ el.setAttribute( 'src', 'about:blank' );
+ el.removeAttribute( 'src' );
+ } );
+ }
+ }
+
+ }
+
+}
\ No newline at end of file
diff --git a/js/reveal.js b/js/reveal.js
index 8cb521b..a74ac8a 100644
--- a/js/reveal.js
+++ b/js/reveal.js
@@ -1,3 +1,5 @@
+import SlideContent from './controllers/slidecontent.js'
+import AutoAnimate from './controllers/autoanimate.js'
import Plugins from './controllers/plugins.js'
import Playback from './components/playback.js'
import defaultConfig from './config.js'
@@ -13,7 +15,7 @@ import {
distanceBetween,
deserialize,
transformElement,
- injectStyleSheet,
+ createStyleSheet,
closestParent,
enterFullscreen
} from './utils/util.js'
@@ -24,11 +26,11 @@ import { colorToRgb, colorBrightness } from './utils/color.js'
* http://revealjs.com
* MIT licensed
*
- * Copyright (C) 2020 Hakim El Hattab, http://hakim.se
+ * Copyright (C) 2020 Hakim El Hattab, https://hakim.se
*/
export default function( revealElement, options ) {
- let Reveal;
+ const Reveal = {};
// The reveal.js version
const VERSION = '4.0.0-dev';
@@ -77,9 +79,15 @@ export default function( revealElement, options ) {
// Cached references to DOM elements
dom = {},
- // An instance of the Plugins controller
+ // Controller for plugin loading
plugins = new Plugins(),
+ // Controls loading and playback of slide content
+ slideContent = new SlideContent( Reveal ),
+
+ // Controls auto-animations between slides
+ autoAnimate = new AutoAnimate( Reveal ),
+
// List of asynchronously loaded reveal.js dependencies
asyncDependencies = [],
@@ -107,12 +115,6 @@ export default function( revealElement, options ) {
// Flags if the interaction event listeners are bound
eventsAreBound = false,
- //