0){let a=.9;t+=A.querySelectorAll(".fragment.visible").length/e.length*a}}return Math.min(t/(e-1),1)}function _e(){return!!window.location.search.match(/receiver/gi)}function Je(){let e=window.location.hash,t=e.slice(2).split("/"),i=e.replace(/#|\//gi,"");if(!/^[0-9]*$/.test(t[0])&&i.length){let e;try{e=document.getElementById(decodeURIComponent(i))}catch(e){}let t=!!A&&A.getAttribute("id")===i;if(e){if(!t){let t=a.getIndices(e);Ie(t.h,t.v)}}else Ie(c||0,u||0)}else{let e,a=l.hashOneBasedIndex?1:0,i=parseInt(t[0],10)-a||0,r=parseInt(t[1],10)-a||0;l.fragmentInURL&&(e=parseInt(t[2],10),isNaN(e)&&(e=void 0)),i===c&&r===u&&void 0===e||Ie(i,r,e)}}function Qe(e){clearTimeout(W),"number"==typeof e?W=setTimeout(Qe,e):A&&(l.history||!window.history?window.location.hash=we():l.hash?window.history.replaceState(null,null,"#"+we()):window.history.replaceState(null,null,window.location.pathname+window.location.search))}function Ze(e){let t,a=c,i=u;if(e){let t=Se(e),r=t?e.parentNode:e,s=n(I.wrapper.querySelectorAll(".slides>section"));a=Math.max(s.indexOf(r),0),i=void 0,t&&(i=Math.max(n(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:i,f:t}}function Ge(){return n(I.wrapper.querySelectorAll('.slides section:not(.stack):not([data-visibility="uncounted"])'))}function et(){return n(I.wrapper.querySelectorAll(".slides>section"))}function tt(){return n(I.wrapper.querySelectorAll(".slides>section>section"))}function at(){return et().length>1}function it(){return tt().length>1}function rt(){return Ge().length}function nt(e,t){let a=et()[e],i=a&&a.querySelectorAll("section");return i&&i.length&&"number"==typeof t?i?i[t]:void 0:a}function st(e=A){if(e.hasAttribute("data-notes"))return e.getAttribute("data-notes");let t=e.querySelector("aside.notes");return t?t.innerHTML:null}function ot(){let e=Ze();return{indexh:e.h,indexv:e.v,indexf:e.f,paused:Pe(),overview:D.isActive()}}function lt(){if(dt(),A&&!1!==l.autoSlide){let e=A.querySelector(".current-fragment");e||(e=A.querySelector(".fragment"));let t=e?e.getAttribute("data-autoslide"):null,a=A.parentNode?A.parentNode.getAttribute("data-autoslide"):null,i=A.getAttribute("data-autoslide");V=t?parseInt(t,10):i?parseInt(i,10):a?parseInt(a,10):l.autoSlide,0===A.querySelectorAll(".fragment").length&&n(A.querySelectorAll("video, audio")).forEach(e=>{e.hasAttribute("data-autoplay")&&V&&1e3*e.duration/e.playbackRate>V&&(V=1e3*e.duration/e.playbackRate+1e3)}),!V||Y||Pe()||D.isActive()||Le()&&!H.availableRoutes().next&&!0!==l.loop||(F=setTimeout(()=>{"function"==typeof l.autoSlideMethod?l.autoSlideMethod():vt(),lt()},V),X=Date.now()),x&&x.setPlaying(-1!==F)}}function dt(){clearTimeout(F),F=-1}function ct(){V&&!Y&&(Y=!0,de("autoslidepaused"),clearTimeout(F),x&&x.setPlaying(!1))}function ut(){V&&Y&&(Y=!1,de("autoslideresumed"),lt())}function ht(){M=!0,l.rtl?(D.isActive()||!1===H.next())&&Xe().left&&Ie(c+1,"grid"===l.navigationMode?u:void 0):(D.isActive()||!1===H.prev())&&Xe().left&&Ie(c-1,"grid"===l.navigationMode?u:void 0)}function pt(){M=!0,l.rtl?(D.isActive()||!1===H.prev())&&Xe().right&&Ie(c-1,"grid"===l.navigationMode?u:void 0):(D.isActive()||!1===H.next())&&Xe().right&&Ie(c+1,"grid"===l.navigationMode?u:void 0)}function gt(){(D.isActive()||!1===H.prev())&&Xe().up&&Ie(c,u-1)}function ft(){C=!0,(D.isActive()||!1===H.next())&&Xe().down&&Ie(c,u+1)}function mt(){if(!1===H.prev())if(Xe().up)gt();else{let e;if(e=l.rtl?n(I.wrapper.querySelectorAll(".slides>section.future")).pop():n(I.wrapper.querySelectorAll(".slides>section.past")).pop(),e){let t=e.querySelectorAll("section").length-1||void 0;Ie(c-1,t)}}}function vt(){if(M=!0,C=!0,!1===H.next()){let e=Xe();e.down&&e.right&&l.loop&&Ee()&&(e.down=!1),e.down?ft():l.rtl?ht():pt()}}function bt(e){for(;e&&"function"==typeof e.hasAttribute;){if(e.hasAttribute("data-prevent-swipe"))return!0;e=e.parentNode}return!1}function yt(e){l.autoSlideStoppable&&ct()}function At(e){xe(),clearTimeout($),$=setTimeout(Re,l.hideCursorTime)}function wt(e){e.shiftKey&&63===e.charCode&&pe()}function St(e){if("function"==typeof l.keyboardCondition&&!1===l.keyboardCondition(e))return!0;let t=e.keyCode,i=Y;yt();let r=document.activeElement&&"inherit"!==document.activeElement.contentEditable,n=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,d=e.shiftKey&&37===t,c=e.shiftKey&&39===t,u=!o&&!d&&!c&&(e.shiftKey||e.altKey||e.ctrlKey||e.metaKey);if(r||n||s||u)return;let h,p=[66,86,190,191];if("object"==typeof l.keyboard)for(h in l.keyboard)"togglePause"===l.keyboard[h]&&p.push(parseInt(h,10));if(Pe()&&-1===p.indexOf(t))return!1;let g="linear"===l.navigationMode||!at()||!it(),f=!1;if("object"==typeof l.keyboard)for(h in l.keyboard)if(parseInt(h,10)===t){let t=l.keyboard[h];"function"==typeof t?t.apply(null,[e]):"string"==typeof t&&"function"==typeof a[t]&&a[t].call(),f=!0}if(!1===f)for(h in J)if(parseInt(h,10)===t){let t=J[h].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?mt():78===t||34===t?vt():72===t||37===t?d?Ie(0):!D.isActive()&&g?mt():ht():76===t||39===t?c?Ie(Number.MAX_VALUE):!D.isActive()&&g?vt():pt():75===t||38===t?!D.isActive()&&g?mt():gt():74===t||40===t?!D.isActive()&&g?vt():ft():36===t?Ie(0):35===t?Ie(Number.MAX_VALUE):32===t?(D.isActive()&&D.deactivate(),e.shiftKey?mt():vt()):58===t||59===t||66===t||86===t||190===t||191===t?Ne():70===t?(()=>{let e=document.documentElement,t=e.requestFullscreen||e.webkitRequestFullscreen||e.webkitRequestFullScreen||e.mozRequestFullScreen||e.msRequestFullscreen;t&&t.apply(e)})():65===t?l.autoSlideStoppable&&qe(i):f=!1),f?e.preventDefault&&e.preventDefault():27!==t&&79!==t||(I.overlay?fe():D.toggle(),e.preventDefault&&e.preventDefault()),lt()}function Et(e){if(bt(e.target))return!0;K.startX=e.touches[0].clientX,K.startY=e.touches[0].clientY,K.startCount=e.touches.length}function kt(e){if(bt(e.target))return!0;if(K.captured)g&&e.preventDefault();else{yt();let t=e.touches[0].clientX,a=e.touches[0].clientY;if(1===e.touches.length&&2!==K.startCount){let i=t-K.startX,r=a-K.startY;i>K.threshold&&Math.abs(i)>Math.abs(r)?(K.captured=!0,"linear"===l.navigationMode?l.rtl?vt():mt():ht()):i<-K.threshold&&Math.abs(i)>Math.abs(r)?(K.captured=!0,"linear"===l.navigationMode?l.rtl?mt():vt():pt()):r>K.threshold?(K.captured=!0,"linear"===l.navigationMode?mt():gt()):r<-K.threshold&&(K.captured=!0,"linear"===l.navigationMode?vt():ft()),l.embedded?(K.captured||Se(A))&&e.preventDefault():e.preventDefault()}}}function Lt(e){K.captured=!1}function xt(e){e.pointerType!==e.MSPOINTER_TYPE_TOUCH&&"touch"!==e.pointerType||(e.touches=[{clientX:e.clientX,clientY:e.clientY}],Et(e))}function Rt(e){e.pointerType!==e.MSPOINTER_TYPE_TOUCH&&"touch"!==e.pointerType||(e.touches=[{clientX:e.clientX,clientY:e.clientY}],kt(e))}function Mt(e){e.pointerType!==e.MSPOINTER_TYPE_TOUCH&&"touch"!==e.pointerType||(e.touches=[{clientX:e.clientX,clientY:e.clientY}],Lt())}function Ct(e){if(Date.now()-z>600){z=Date.now();let t=e.detail||-e.wheelDelta;t>0?vt():t<0&&mt()}}function Nt(e){yt(),e.preventDefault();let t=et().length,a=Math.floor(e.clientX/I.wrapper.offsetWidth*t);l.rtl&&(a=t-a),Ie(a)}function Pt(e){e.preventDefault(),yt(),"linear"===l.navigationMode?mt():ht()}function qt(e){e.preventDefault(),yt(),"linear"===l.navigationMode?vt():pt()}function It(e){e.preventDefault(),yt(),gt()}function Tt(e){e.preventDefault(),yt(),ft()}function Bt(e){e.preventDefault(),yt(),mt()}function Ot(e){e.preventDefault(),yt(),vt()}function Ht(e){Je()}function Dt(e){me()}function zt(e){!1===document.hidden&&document.activeElement!==document.body&&("function"==typeof document.activeElement.blur&&document.activeElement.blur(),document.body.focus())}function Wt(e){if(e.currentTarget&&e.currentTarget.hasAttribute("href")){let t=e.currentTarget.getAttribute("href");t&&(!function(e){fe(),I.overlay=document.createElement("div"),I.overlay.classList.add("overlay"),I.overlay.classList.add("overlay-preview"),I.wrapper.appendChild(I.overlay),I.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
`,I.overlay.querySelector("iframe").addEventListener("load",e=>{I.overlay.classList.add("loaded")},!1),I.overlay.querySelector(".close").addEventListener("click",e=>{fe(),e.preventDefault()},!1),I.overlay.querySelector(".external").addEventListener("click",e=>{fe()},!1)}(t),e.preventDefault())}}function jt(e){Le()&&!1===l.loop?(Ie(0,0),ut()):Y?ut():ct()}return r(a,{VERSION:"4.0.0-dev",initialize:function(){if(e)return I.wrapper=e,I.slides=e.querySelector(".slides"),window.addEventListener("load",me,!1),l={...E,...t,...a.getQueryHash()},T.load(l.dependencies).then(Q),a;console.warn("reveal.js can not initialize without a valid .reveal element.")},configure:re,sync:Te,syncSlide:function(e=A){ie(e),Be(e),B.load(e),Ve(),ze()},syncFragments:Be,slide:Ie,left:ht,right:pt,up:gt,down:ft,prev:mt,next:vt,navigateTo:Ie,navigateLeft:ht,navigateRight:pt,navigateUp:gt,navigateDown:ft,navigatePrev:mt,navigateNext:vt,navigateFragment:()=>H.goto.bind(H),prevFragment:()=>H.prev.bind(H),nextFragment:()=>H.next.bind(H),layout:me,shuffle:Oe,availableRoutes:Xe,availableFragments:H.availableRoutes.bind(H),toggleHelp:pe,toggleOverview:D.toggle.bind(D),togglePause:Ne,toggleAutoSlide:qe,isFirstSlide:ke,isLastSlide:Le,isLastVerticalSlide:Ee,isOverview:()=>D.isActive.bind(D),isPaused:Pe,isAutoSliding:function(){return!(!V||Y)},isSpeakerNotes:_e,loadSlide:()=>B.load.bind(B),unloadSlide:()=>B.unload.bind(B),addEventListeners:ne,removeEventListeners:se,dispatchEvent:de,getState:ot,setState:function(e){if("object"==typeof e){Ie(s(e.indexh),s(e.indexv),s(e.indexf));let t=s(e.paused),a=s(e.overview);"boolean"==typeof t&&t!==Pe()&&Ne(t),"boolean"==typeof a&&a!==D.isActive()&&D.toggle(a)}},getSlidePastCount:Ye,getProgress:Ke,getIndices:Ze,getSlides:Ge,getSlidesAttributes:function(){return Ge().map(e=>{let t={};for(let a=0;aSt({keyCode:e}),registerKeyboardShortcut:(e,t)=>_[e]=t,addEventListener:(e,t,i)=>{a.getRevealElement().addEventListener(e,t,i)},removeEventListener:(e,t,i)=>{a.getRevealElement().removeEventListener(e,t,i)},registerPlugin:()=>T.registerPlugin.bind(T),hasPlugin:()=>T.hasPlugin.bind(T),getPlugin:()=>T.getPlugin.bind(T),getPlugins:()=>T.getRegisteredPlugins.bind(T),getComputedSlideSize:be,getPreviousSlide:()=>p,getCurrentSlide:()=>A,getScale:()=>P,getConfig:()=>l,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:()=>I.wrapper||document.querySelector(".reveal"),getSlidesElement:()=>I.slides,getBackgroundsElement:()=>I.background,isReady:()=>R,announceStatus:Z,getStatusText:G,slideContent:B,updateControls:Ue,updateProgress:We,updateSlidesVisibility:De,writeURL:Qe,transformSlides:oe,cueAutoSlide:lt,cancelAutoSlide:dt})};window.Reveal=L,window.Reveal.initialize=e=>(window.Reveal=new L(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..9204524
--- /dev/null
+++ b/js/controllers/autoanimate.js
@@ -0,0 +1,548 @@
+import { extend, toArray, createStyleSheet } from '../utils/util.js'
+
+/**
+ * Automatically animates matching elements across
+ * slides with the [data-auto-animate] attribute.
+ */
+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/fragments.js b/js/controllers/fragments.js
new file mode 100644
index 0000000..008e5de
--- /dev/null
+++ b/js/controllers/fragments.js
@@ -0,0 +1,304 @@
+import { extend, toArray } from '../utils/util.js'
+
+/**
+ * Handles sorting and navigation of slide fragments.
+ * Fragments are elements within a slide that are
+ * revealed/animated incrementally.
+ */
+export default class Fragments {
+
+ constructor( Reveal ) {
+
+ this.Reveal = Reveal;
+
+ }
+
+ /**
+ * Shows all fragments in the presentation. Used when
+ * fragments are disabled presentation-wide.
+ */
+ showAll() {
+
+ toArray( this.Reveal.getSlidesElement().querySelectorAll( '.fragment' ) ).forEach( element => {
+ element.classList.add( 'visible' );
+ element.classList.remove( 'current-fragment' );
+ } );
+
+ }
+
+ /**
+ * Returns an object describing the available fragment
+ * directions.
+ *
+ * @return {{prev: boolean, next: boolean}}
+ */
+ availableRoutes() {
+
+ let currentSlide = this.Reveal.getCurrentSlide();
+ if( currentSlide && this.Reveal.getConfig().fragments ) {
+ let fragments = currentSlide.querySelectorAll( '.fragment' );
+ let hiddenFragments = currentSlide.querySelectorAll( '.fragment:not(.visible)' );
+
+ return {
+ prev: fragments.length - hiddenFragments.length > 0,
+ next: !!hiddenFragments.length
+ };
+ }
+ else {
+ return { prev: false, next: false };
+ }
+
+ }
+
+ /**
+ * Return a sorted fragments list, ordered by an increasing
+ * "data-fragment-index" attribute.
+ *
+ * Fragments will be revealed in the order that they are returned by
+ * this function, so you can use the index attributes to control the
+ * order of fragment appearance.
+ *
+ * To maintain a sensible default fragment order, fragments are presumed
+ * to be passed in document order. This function adds a "fragment-index"
+ * attribute to each node if such an attribute is not already present,
+ * and sets that attribute to an integer value which is the position of
+ * the fragment within the fragments list.
+ *
+ * @param {object[]|*} fragments
+ * @param {boolean} grouped If true the returned array will contain
+ * nested arrays for all fragments with the same index
+ * @return {object[]} sorted Sorted array of fragments
+ */
+ sort( fragments, grouped = false ) {
+
+ fragments = toArray( fragments );
+
+ let ordered = [],
+ unordered = [],
+ sorted = [];
+
+ // Group ordered and unordered elements
+ fragments.forEach( fragment => {
+ if( fragment.hasAttribute( 'data-fragment-index' ) ) {
+ let index = parseInt( fragment.getAttribute( 'data-fragment-index' ), 10 );
+
+ if( !ordered[index] ) {
+ ordered[index] = [];
+ }
+
+ ordered[index].push( fragment );
+ }
+ else {
+ unordered.push( [ fragment ] );
+ }
+ } );
+
+ // Append fragments without explicit indices in their
+ // DOM order
+ ordered = ordered.concat( unordered );
+
+ // Manually count the index up per group to ensure there
+ // are no gaps
+ let index = 0;
+
+ // Push all fragments in their sorted order to an array,
+ // this flattens the groups
+ ordered.forEach( group => {
+ group.forEach( fragment => {
+ sorted.push( fragment );
+ fragment.setAttribute( 'data-fragment-index', index );
+ } );
+
+ index ++;
+ } );
+
+ return grouped === true ? ordered : sorted;
+
+ }
+
+ /**
+ * Sorts and formats all of fragments in the
+ * presentation.
+ */
+ sortAll() {
+
+ this.Reveal.getHorizontalSlides().forEach( horizontalSlide => {
+
+ let verticalSlides = toArray( horizontalSlide.querySelectorAll( 'section' ) );
+ verticalSlides.forEach( ( verticalSlide, y ) => {
+
+ this.sort( verticalSlide.querySelectorAll( '.fragment' ) );
+
+ }, this );
+
+ if( verticalSlides.length === 0 ) this.sort( horizontalSlide.querySelectorAll( '.fragment' ) );
+
+ } );
+
+ }
+
+ /**
+ * Refreshes the fragments on the current slide so that they
+ * have the appropriate classes (.visible + .current-fragment).
+ *
+ * @param {number} [index] The index of the current fragment
+ * @param {array} [fragments] Array containing all fragments
+ * in the current slide
+ *
+ * @return {{shown: array, hidden: array}}
+ */
+ update( index, fragments ) {
+
+ let changedFragments = {
+ shown: [],
+ hidden: []
+ };
+
+ let currentSlide = this.Reveal.getCurrentSlide();
+ if( currentSlide && this.Reveal.getConfig().fragments ) {
+
+ fragments = fragments || this.sort( currentSlide.querySelectorAll( '.fragment' ) );
+
+ if( fragments.length ) {
+
+ let maxIndex = 0;
+
+ if( typeof index !== 'number' ) {
+ let currentFragment = this.sort( currentSlide.querySelectorAll( '.fragment.visible' ) ).pop();
+ if( currentFragment ) {
+ index = parseInt( currentFragment.getAttribute( 'data-fragment-index' ) || 0, 10 );
+ }
+ }
+
+ toArray( fragments ).forEach( ( el, i ) => {
+
+ if( el.hasAttribute( 'data-fragment-index' ) ) {
+ i = parseInt( el.getAttribute( 'data-fragment-index' ), 10 );
+ }
+
+ maxIndex = Math.max( maxIndex, i );
+
+ // Visible fragments
+ if( i <= index ) {
+ if( !el.classList.contains( 'visible' ) ) changedFragments.shown.push( el );
+ el.classList.add( 'visible' );
+ el.classList.remove( 'current-fragment' );
+
+ // Announce the fragments one by one to the Screen Reader
+ this.Reveal.announceStatus( this.Reveal.getStatusText( el ) );
+
+ if( i === index ) {
+ el.classList.add( 'current-fragment' );
+ this.Reveal.slideContent.startEmbeddedContent( el );
+ }
+ }
+ // Hidden fragments
+ else {
+ if( el.classList.contains( 'visible' ) ) changedFragments.hidden.push( el );
+ el.classList.remove( 'visible' );
+ el.classList.remove( 'current-fragment' );
+ }
+
+ } );
+
+ // Write the current fragment index to the slide .
+ // This can be used by end users to apply styles based on
+ // the current fragment index.
+ index = typeof index === 'number' ? index : -1;
+ index = Math.max( Math.min( index, maxIndex ), -1 );
+ currentSlide.setAttribute( 'data-fragment', index );
+
+ }
+
+ }
+
+ return changedFragments;
+
+ }
+
+ /**
+ * Navigate to the specified slide fragment.
+ *
+ * @param {?number} index The index of the fragment that
+ * should be shown, -1 means all are invisible
+ * @param {number} offset Integer offset to apply to the
+ * fragment index
+ *
+ * @return {boolean} true if a change was made in any
+ * fragments visibility as part of this call
+ */
+ goto( index, offset = 0 ) {
+
+ let currentSlide = this.Reveal.getCurrentSlide();
+ if( currentSlide && this.Reveal.getConfig().fragments ) {
+
+ let fragments = this.sort( currentSlide.querySelectorAll( '.fragment' ) );
+ if( fragments.length ) {
+
+ // If no index is specified, find the current
+ if( typeof index !== 'number' ) {
+ let lastVisibleFragment = this.sort( currentSlide.querySelectorAll( '.fragment.visible' ) ).pop();
+
+ if( lastVisibleFragment ) {
+ index = parseInt( lastVisibleFragment.getAttribute( 'data-fragment-index' ) || 0, 10 );
+ }
+ else {
+ index = -1;
+ }
+ }
+
+ // Apply the offset if there is one
+ index += offset;
+
+ let changedFragments = this.update( index, fragments );
+
+ if( changedFragments.hidden.length ) {
+ this.Reveal.dispatchEvent( 'fragmenthidden', { fragment: changedFragments.hidden[0], fragments: changedFragments.hidden } );
+ }
+
+ if( changedFragments.shown.length ) {
+ this.Reveal.dispatchEvent( 'fragmentshown', { fragment: changedFragments.shown[0], fragments: changedFragments.shown } );
+ }
+
+ this.Reveal.updateControls();
+ this.Reveal.updateProgress();
+
+ if( this.Reveal.getConfig().fragmentInURL ) {
+ this.Reveal.writeURL();
+ }
+
+ return !!( changedFragments.shown.length || changedFragments.hidden.length );
+
+ }
+
+ }
+
+ return false;
+
+ }
+
+ /**
+ * Navigate to the next slide fragment.
+ *
+ * @return {boolean} true if there was a next fragment,
+ * false otherwise
+ */
+ next() {
+
+ return this.goto( null, 1 );
+
+ }
+
+ /**
+ * Navigate to the previous slide fragment.
+ *
+ * @return {boolean} true if there was a previous fragment,
+ * false otherwise
+ */
+ prev() {
+
+ return this.goto( null, -1 );
+
+ }
+
+}
\ No newline at end of file
diff --git a/js/controllers/overview.js b/js/controllers/overview.js
new file mode 100644
index 0000000..08a2404
--- /dev/null
+++ b/js/controllers/overview.js
@@ -0,0 +1,249 @@
+import { SLIDES_SELECTOR } from '../utils/constants.js'
+import { extend, toArray, transformElement } from '../utils/util.js'
+
+/**
+ * Handles all logic related to the overview mode
+ * (birds-eye view of all slides).
+ */
+export default class Overview {
+
+ constructor( Reveal ) {
+
+ this.Reveal = Reveal;
+
+ this.active = false;
+
+ this.onSlideClicked = this.onSlideClicked.bind( this );
+
+ }
+
+ /**
+ * Displays the overview of slides (quick nav) by scaling
+ * down and arranging all slide elements.
+ */
+ activate() {
+
+ // Only proceed if enabled in config
+ if( this.Reveal.getConfig().overview && !this.isActive() ) {
+
+ this.active = true;
+
+ this.Reveal.getRevealElement().classList.add( 'overview' );
+
+ // Don't auto-slide while in overview mode
+ this.Reveal.cancelAutoSlide();
+
+ // Move the backgrounds element into the slide container to
+ // that the same scaling is applied
+ this.Reveal.getSlidesElement().appendChild( this.Reveal.getBackgroundsElement() );
+
+ // Clicking on an overview slide navigates to it
+ toArray( this.Reveal.getRevealElement().querySelectorAll( SLIDES_SELECTOR ) ).forEach( slide => {
+ if( !slide.classList.contains( 'stack' ) ) {
+ slide.addEventListener( 'click', this.onSlideClicked, true );
+ }
+ } );
+
+ // Calculate slide sizes
+ const margin = 70;
+ const slideSize = this.Reveal.getComputedSlideSize();
+ this.overviewSlideWidth = slideSize.width + margin;
+ this.overviewSlideHeight = slideSize.height + margin;
+
+ // Reverse in RTL mode
+ if( this.Reveal.getConfig().rtl ) {
+ this.overviewSlideWidth = -this.overviewSlideWidth;
+ }
+
+ this.Reveal.updateSlidesVisibility();
+
+ this.layout();
+ this.update();
+
+ this.Reveal.layout();
+
+ const indices = this.Reveal.getIndices();
+
+ // Notify observers of the overview showing
+ this.Reveal.dispatchEvent( 'overviewshown', {
+ 'indexh': indices.h,
+ 'indexv': indices.v,
+ 'currentSlide': this.Reveal.getCurrentSlide()
+ } );
+
+ }
+
+ }
+
+ /**
+ * Uses CSS transforms to position all slides in a grid for
+ * display inside of the overview mode.
+ */
+ layout() {
+
+ // Layout slides
+ this.Reveal.getHorizontalSlides().forEach( ( hslide, h ) => {
+ hslide.setAttribute( 'data-index-h', h );
+ transformElement( hslide, 'translate3d(' + ( h * this.overviewSlideWidth ) + 'px, 0, 0)' );
+
+ if( hslide.classList.contains( 'stack' ) ) {
+
+ toArray( hslide.querySelectorAll( 'section' ) ).forEach( ( vslide, v ) => {
+ vslide.setAttribute( 'data-index-h', h );
+ vslide.setAttribute( 'data-index-v', v );
+
+ transformElement( vslide, 'translate3d(0, ' + ( v * this.overviewSlideHeight ) + 'px, 0)' );
+ } );
+
+ }
+ } );
+
+ // Layout slide backgrounds
+ toArray( this.Reveal.getBackgroundsElement().childNodes ).forEach( ( hbackground, h ) => {
+ transformElement( hbackground, 'translate3d(' + ( h * this.overviewSlideWidth ) + 'px, 0, 0)' );
+
+ toArray( hbackground.querySelectorAll( '.slide-background' ) ).forEach( ( vbackground, v ) => {
+ transformElement( vbackground, 'translate3d(0, ' + ( v * this.overviewSlideHeight ) + 'px, 0)' );
+ } );
+ } );
+
+ }
+
+ /**
+ * Moves the overview viewport to the current slides.
+ * Called each time the current slide changes.
+ */
+ update() {
+
+ const vmin = Math.min( window.innerWidth, window.innerHeight );
+ const scale = Math.max( vmin / 5, 150 ) / vmin;
+ const indices = this.Reveal.getIndices();
+
+ this.Reveal.transformSlides( {
+ overview: [
+ 'scale('+ scale +')',
+ 'translateX('+ ( -indices.h * this.overviewSlideWidth ) +'px)',
+ 'translateY('+ ( -indices.v * this.overviewSlideHeight ) +'px)'
+ ].join( ' ' )
+ } );
+
+ }
+
+ /**
+ * Exits the slide overview and enters the currently
+ * active slide.
+ */
+ deactivate() {
+
+ // Only proceed if enabled in config
+ if( this.Reveal.getConfig().overview ) {
+
+ this.active = false;
+
+ this.Reveal.getRevealElement().classList.remove( 'overview' );
+
+ // Temporarily add a class so that transitions can do different things
+ // depending on whether they are exiting/entering overview, or just
+ // moving from slide to slide
+ this.Reveal.getRevealElement().classList.add( 'overview-deactivating' );
+
+ setTimeout( () => {
+ this.Reveal.getRevealElement().classList.remove( 'overview-deactivating' );
+ }, 1 );
+
+ // Move the background element back out
+ this.Reveal.getRevealElement().appendChild( this.Reveal.getBackgroundsElement() );
+
+ // Clean up changes made to slides
+ toArray( this.Reveal.getRevealElement().querySelectorAll( SLIDES_SELECTOR ) ).forEach( slide => {
+ transformElement( slide, '' );
+
+ slide.removeEventListener( 'click', this.onSlideClicked, true );
+ } );
+
+ // Clean up changes made to backgrounds
+ toArray( this.Reveal.getBackgroundsElement().querySelectorAll( '.slide-background' ) ).forEach( background => {
+ transformElement( background, '' );
+ } );
+
+ this.Reveal.transformSlides( { overview: '' } );
+
+ const indices = this.Reveal.getIndices();
+
+ this.Reveal.slide( indices.h, indices.v );
+ this.Reveal.layout();
+ this.Reveal.cueAutoSlide();
+
+ // Notify observers of the overview hiding
+ this.Reveal.dispatchEvent( 'overviewhidden', {
+ 'indexh': indices.h,
+ 'indexv': indices.v,
+ 'currentSlide': this.Reveal.getCurrentSlide()
+ } );
+
+ }
+ }
+
+ /**
+ * Toggles the slide overview mode on and off.
+ *
+ * @param {Boolean} [override] Flag which overrides the
+ * toggle logic and forcibly sets the desired state. True means
+ * overview is open, false means it's closed.
+ */
+ toggle( override ) {
+
+ if( typeof override === 'boolean' ) {
+ override ? this.activate() : this.deactivate();
+ }
+ else {
+ this.isActive() ? this.deactivate() : this.activate();
+ }
+
+ }
+
+ /**
+ * Checks if the overview is currently active.
+ *
+ * @return {Boolean} true if the overview is active,
+ * false otherwise
+ */
+ isActive() {
+
+ return this.active;
+
+ }
+
+ /**
+ * Invoked when a slide is and we're in the overview.
+ *
+ * @param {object} event
+ */
+ onSlideClicked( event ) {
+
+ if( this.isActive() ) {
+ event.preventDefault();
+
+ let element = event.target;
+
+ while( element && !element.nodeName.match( /section/gi ) ) {
+ element = element.parentNode;
+ }
+
+ if( element && !element.classList.contains( 'disabled' ) ) {
+
+ this.deactivate();
+
+ if( element.nodeName.match( /section/gi ) ) {
+ let h = parseInt( element.getAttribute( 'data-index-h' ), 10 ),
+ v = parseInt( element.getAttribute( 'data-index-v' ), 10 );
+
+ this.Reveal.slide( h, v );
+ }
+
+ }
+ }
+
+ }
+
+}
\ No newline at end of file
diff --git a/js/controllers/plugins.js b/js/controllers/plugins.js
index 94077f7..00b0c5e 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..f85be49
--- /dev/null
+++ b/js/controllers/slidecontent.js
@@ -0,0 +1,433 @@
+import { HORIZONTAL_SLIDES_SELECTOR, VERTICAL_SLIDES_SELECTOR } from '../utils/constants.js'
+import { extend, toArray, closestParent } from '../utils/util.js'
+import { isMobile } from '../utils/device.js'
+
+/**
+ * Handles loading, unloading and playback of slide
+ * content such as images, videos and iframes.
+ */
+export default class SlideContent {
+
+ constructor( Reveal ) {
+
+ this.Reveal = Reveal;
+
+ }
+
+ /**
+ * Should the given element be preloaded?
+ * Decides based on local element attributes and global config.
+ *
+ * @param {HTMLElement} element
+ */
+ shouldPreload( element ) {
+
+ // Prefer an explicit global preload setting
+ let preload = this.Reveal.getConfig().preloadIframes;
+
+ // If no global setting is available, fall back on the element's
+ // own preload setting
+ if( typeof preload !== 'boolean' ) {
+ preload = element.hasAttribute( 'data-preload' );
+ }
+
+ return preload;
+ }
+
+ /**
+ * 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' || this.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( isMobile ) {
+ 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( this.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 = this.Reveal.getConfig().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( isMobile ) {
+ 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 = this.Reveal.getConfig().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 a48377b..717a0d6 100644
--- a/js/reveal.js
+++ b/js/reveal.js
@@ -1,3 +1,7 @@
+import SlideContent from './controllers/slidecontent.js'
+import AutoAnimate from './controllers/autoanimate.js'
+import Fragments from './controllers/fragments.js'
+import Overview from './controllers/overview.js'
import Plugins from './controllers/plugins.js'
import Playback from './components/playback.js'
import defaultConfig from './config.js'
@@ -13,10 +17,11 @@ import {
distanceBetween,
deserialize,
transformElement,
- injectStyleSheet,
+ createStyleSheet,
closestParent,
enterFullscreen
} from './utils/util.js'
+import { isMobile, isChrome, isAndroid, supportsZoom } from './utils/device.js'
import { colorToRgb, colorBrightness } from './utils/color.js'
/**
@@ -24,30 +29,21 @@ 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';
- const UA = navigator.userAgent;
-
// Configuration defaults, can be overridden at initialization time
let config,
// Flags if reveal.js is loaded (has dispatched the 'ready' event)
ready = false,
- // Flags if the overview mode is currently active
- overview = false,
-
- // Holds the dimensions of our overview slides, including margins
- overviewSlideWidth = null,
- overviewSlideHeight = null,
-
// The horizontal and vertical index of the currently active slide
indexh,
indexv,
@@ -77,21 +73,23 @@ 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 ),
+
+ // Controls navigation between slide fragments
+ fragments = new Fragments( Reveal ),
+
+ overview = new Overview( Reveal ),
+
// List of asynchronously loaded reveal.js dependencies
asyncDependencies = [],
- // Features supported by the browser, see #checkCapabilities()
- features = {},
-
- // Client is a mobile device, see #checkCapabilities()
- isMobileDevice,
-
- // Client is a desktop Chrome, see #checkCapabilities()
- isChrome,
-
// Throttles mouse wheel navigation
lastMouseWheelStep = 0,
@@ -107,12 +105,6 @@ export default function( revealElement, options ) {
// Flags if the interaction event listeners are bound
eventsAreBound = false,
- //