break autoanimate and loading of slide content into separate controllers
This commit is contained in:
Hakim El Hattab committed
1 parent
ddd13ee9cf
commit
d42d88dae4
6 files changed
+999
-969
No files matched your search
Vendored
+1
-1
@@ -5,4 +5,4 @@
|
|||||||
*
|
*
|
||||||
* Copyright (C) 2020 Hakim El Hattab, https://hakim.se
|
* Copyright (C) 2020 Hakim El Hattab, https://hakim.se
|
||||||
*/
|
*/
|
||||||
!function(e){var t={};function a(r){if(t[r])return t[r].exports;var n=t[r]={i:r,l:!1,exports:{}};return e[r].call(n.exports,n,n.exports,a),n.l=!0,n.exports}a.m=e,a.c=t,a.d=function(e,t,r){a.o(e,t)||Object.defineProperty(e,t,{enumerable:!0,get:r})},a.r=function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},a.t=function(e,t){if(1&t&&(e=a(e)),8&t)return e;if(4&t&&"object"==typeof e&&e&&e.__esModule)return e;var r=Object.create(null);if(a.r(r),Object.defineProperty(r,"default",{enumerable:!0,value:e}),2&t&&"string"!=typeof e)for(var n in e)a.d(r,n,function(t){return e[t]}.bind(null,n));return r},a.n=function(e){var t=e&&e.__esModule?function(){return e.default}:function(){return e};return a.d(t,"a",t),t},a.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},a.p="",a(a.s=0)}([function(e,t,a){"use strict";a.r(t);const r=(e,t)=>{const a=document.createElement("script");a.type="text/javascript",a.async=!1,a.defer=!1,a.src=e,"function"==typeof t&&(a.onload=a.onreadystatechange=e=>{("load"===e.type||/loaded|complete/.test(a.readyState))&&(a.onload=a.onreadystatechange=a.onerror=null,t())},a.onerror=e=>{a.onload=a.onreadystatechange=a.onerror=null,t(new Error("Failed loading script: "+a.src+"\n"+e))});const r=document.querySelector("head");r.insertBefore(a,r.lastChild)};class n{constructor(){this.state="pending",this.registeredPlugins={},this.asyncDependencies=[]}load(e){return this.state="loading",new Promise(t=>{let a=[],n=0;e.forEach(e=>{e.condition&&!e.condition()||(e.async?this.asyncDependencies.push(e):a.push(e))}),a.length?(n=a.length,a.forEach(e=>{r(e.src,()=>{"function"==typeof e.callback&&e.callback(),0==--n&&this.initPlugins().then(t)})})):this.initPlugins().then(t)})}initPlugins(){return new Promise(e=>{let t=Object.keys(this.registeredPlugins).length;if(0===t)this.loadAsync().then(e);else{let a=()=>{0==--t&&this.loadAsync().then(e)};for(let e in this.registeredPlugins){let t=this.registeredPlugins[e];if("function"==typeof t.init){let e=t.init();e&&"function"==typeof e.then?e.then(a):a()}else a()}}})}loadAsync(){return this.state="loaded",this.asyncDependencies.length&&this.asyncDependencies.forEach(e=>{r(e.src,e.callback)}),Promise.resolve()}registerPlugin(e,t){void 0===this.registeredPlugins[e]?(this.registeredPlugins[e]=t,"loaded"===this.state&&"function"==typeof t.init&&t.init()):console.warn('reveal.js: "'+e+'" plugin has already been registered')}hasPlugin(e){return!!this.registeredPlugins[e]}getPlugin(e){return this.registeredPlugins[e]}getRegisteredPlugins(){return this.registeredPlugins}}class i{constructor(e,t){this.diameter=100,this.diameter2=this.diameter/2,this.thickness=6,this.playing=!1,this.progress=0,this.progressOffset=1,this.container=e,this.progressCheck=t,this.canvas=document.createElement("canvas"),this.canvas.className="playback",this.canvas.width=this.diameter,this.canvas.height=this.diameter,this.canvas.style.width=this.diameter2+"px",this.canvas.style.height=this.diameter2+"px",this.context=this.canvas.getContext("2d"),this.container.appendChild(this.canvas),this.render()}setPlaying(e){const t=this.playing;this.playing=e,!t&&this.playing?this.animate():this.render()}animate(){const e=this.progress;this.progress=this.progressCheck(),e>.8&&this.progress<.2&&(this.progressOffset=this.progress),this.render(),this.playing&&requestAnimationFrame(this.animate.bind(this))}render(){let e=this.playing?this.progress:0,t=this.diameter2-this.thickness,a=this.diameter2,r=this.diameter2;this.progressOffset+=.1*(1-this.progressOffset);const n=-Math.PI/2+e*(2*Math.PI),i=-Math.PI/2+this.progressOffset*(2*Math.PI);this.context.save(),this.context.clearRect(0,0,this.diameter,this.diameter),this.context.beginPath(),this.context.arc(a,r,t+4,0,2*Math.PI,!1),this.context.fillStyle="rgba( 0, 0, 0, 0.4 )",this.context.fill(),this.context.beginPath(),this.context.arc(a,r,t,0,2*Math.PI,!1),this.context.lineWidth=this.thickness,this.context.strokeStyle="rgba( 255, 255, 255, 0.2 )",this.context.stroke(),this.playing&&(this.context.beginPath(),this.context.arc(a,r,t,i,n,!1),this.context.lineWidth=this.thickness,this.context.strokeStyle="#fff",this.context.stroke()),this.context.translate(a-14,r-14),this.playing?(this.context.fillStyle="#fff",this.context.fillRect(0,0,10,28),this.context.fillRect(18,0,10,28)):(this.context.beginPath(),this.context.translate(4,0),this.context.moveTo(0,0),this.context.lineTo(24,14),this.context.lineTo(0,28),this.context.fillStyle="#fff",this.context.fill()),this.context.restore()}on(e,t){this.canvas.addEventListener(e,t,!1)}off(e,t){this.canvas.removeEventListener(e,t,!1)}destroy(){this.playing=!1,this.canvas.parentNode&&this.container.removeChild(this.canvas)}}var o={width:960,height:700,margin:.04,minScale:.2,maxScale:2,controls:!0,controlsTutorial:!0,controlsLayout:"bottom-right",controlsBackArrows:"faded",progress:!0,slideNumber:!1,showSlideNumber:Line truncated
|
!function(e){var t={};function a(r){if(t[r])return t[r].exports;var n=t[r]={i:r,l:!1,exports:{}};return e[r].call(n.exports,n,n.exports,a),n.l=!0,n.exports}a.m=e,a.c=t,a.d=function(e,t,r){a.o(e,t)||Object.defineProperty(e,t,{enumerable:!0,get:r})},a.r=function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},a.t=function(e,t){if(1&t&&(e=a(e)),8&t)return e;if(4&t&&"object"==typeof e&&e&&e.__esModule)return e;var r=Object.create(null);if(a.r(r),Object.defineProperty(r,"default",{enumerable:!0,value:e}),2&t&&"string"!=typeof e)for(var n in e)a.d(r,n,function(t){return e[t]}.bind(null,n));return r},a.n=function(e){var t=e&&e.__esModule?function(){return e.default}:function(){return e};return a.d(t,"a",t),t},a.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},a.p="",a(a.s=0)}([function(e,t,a){"use strict";a.r(t);const r=/registerPlugin|registerKeyboardShortcut|addKeyBinding|addEventListener/,n=(e,t)=>{for(let a in t)e[a]=t[a];return e},i=e=>Array.prototype.slice.call(e),s=e=>{if("string"==typeof e){if("null"===e)return null;if("true"===e)return!0;if("false"===e)return!1;if(e.match(/^-?[\d\.]+$/))return parseFloat(e)}return e},o=(e,t)=>{e.style.transform=t},l=(e,t)=>{let a=e.parentNode;for(;a;){let e=a.matches||a.matchesSelector||a.msMatchesSelector;if(e&&e.call(a,t))return a;a=a.parentNode}return null},d=e=>{let t=document.createElement("style");t.type="text/css",t.styleSheet?t.styleSheet.cssText=e:t.appendChild(document.createTextNode(e)),document.getElementsByTagName("head")[0].appendChild(t)};class c{constructor(e){this.Reveal=e}load(e,t={}){e.style.display=this.Reveal.getConfig().display,i(e.querySelectorAll("img[data-src], video[data-src], audio[data-src], iframe[data-src]")).forEach(e=>{("IFRAME"!==e.tagName||shouldPreload(e))&&(e.setAttribute("src",e.getAttribute("data-src")),e.setAttribute("data-lazy-loaded",""),e.removeAttribute("data-src"))}),i(e.querySelectorAll("video, audio")).forEach(e=>{let t=0;i(e.querySelectorAll("source[data-src]")).forEach(e=>{e.setAttribute("src",e.getAttribute("data-src")),e.removeAttribute("data-src"),e.setAttribute("data-lazy-loaded",""),t+=1}),t>0&&e.load()});let a=e.slideBackgroundElement;if(a){a.style.display="block";let r=e.slideBackgroundContentElement,n=e.getAttribute("data-background-iframe");if(!1===a.hasAttribute("data-loaded")){a.setAttribute("data-loaded","true");let i=e.getAttribute("data-background-image"),s=e.getAttribute("data-background-video"),o=e.hasAttribute("data-background-video-loop"),l=e.hasAttribute("data-background-video-muted");if(i)r.style.backgroundImage="url("+encodeURI(i)+")";else if(s&&!this.Reveal.isSpeakerNotes()){let e=document.createElement("video");o&&e.setAttribute("loop",""),l&&(e.muted=!0),isMobileDevice&&(e.muted=!0,e.autoplay=!0,e.setAttribute("playsinline","")),s.split(",").forEach(t=>{e.innerHTML+='<source src="'+t+'">'}),r.appendChild(e)}else if(n&&!0!==t.excludeIframes){let e=document.createElement("iframe");e.setAttribute("allowfullscreen",""),e.setAttribute("mozallowfullscreen",""),e.setAttribute("webkitallowfullscreen",""),e.setAttribute("allow","autoplay"),e.setAttribute("data-src",n),e.style.width="100%",e.style.height="100%",e.style.maxHeight="100%",e.style.maxWidth="100%",r.appendChild(e)}}let i=r.querySelector("iframe[data-src]");i&&shouldPreload(a)&&!/autoplay=(1|true|yes)/gi.test(n)&&i.getAttribute("src")!==n&&i.setAttribute("src",n)}}unload(e){e.style.display="none";let t=this.Reveal.getSlideBackground(e);t&&(t.style.display="none",i(t.querySelectorAll("iframe[src]")).forEach(e=>{e.removeAttribute("src")})),i(e.querySelectorAll("video[data-lazy-loaded][src], audio[data-lazy-loaded][src], iframe[data-lazy-loaded][src]")).forEach(e=>{e.setAttribute("data-src",e.getAttribute("src")),e.removeAttribute("src")}),i(e.querySelectorAll("video[data-lazy-loaded] source[src], audio source[src]")).forEach(e=>{e.setAttribute("data-src",e.getAttribute("src")),e.removeAttribute("src")})}formatEmbeddedContent(){let e=(e,t,a)=>{i(this.Reveal.getSlidesElement().querySelectorAll("iframe["+e+'*="'+t+'"]')).forEach(t=>{let r=t.getAttribute(e);r&&-1===r.indexOf(a)&&t.setAttribute(e,r+(/\?/.test(r)?"&":"?")+a)})};e("src","youtube.com/embed/","enablejsapi=1"),e("data-src","youtube.com/embed/","enablejsapi=1"),e("src","player.vimeo.com/","api=1"),e("data-src","player.vimeo.com/","api=1")}startEmbeddedContent(e){e&&!this.Reveal.isSpeakerNotes()&&(i(e.querySelectorAll('img[src$=".gif"]')).forEach(e=>{e.setAttribute("src",e.getAttribute("src"))}),i(e.querySelectorAll("video, audio")).forEach(e=>{if(l(e,".fragment")&&!l(e,".fragment.visible"))return;let t=config.autoPlayMedia;if("boolean"!=typeof t&&(t=e.hasAttribute("data-autoplay")||!!l(e,".slide-background")),t&&"function"==typeof e.play)if(e.readyState>1)this.startEmbeddedMedia({target:e});else if(isMobileDevice){let t=e.play();t&&"function"==typeof t.catch&&!1===e.Line truncated
|
||||||
@@ -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;
|
||||||
|
|
||||||
|
}, [] );
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
@@ -7,8 +7,8 @@ export default class Plugins {
|
|||||||
|
|
||||||
constructor() {
|
constructor() {
|
||||||
|
|
||||||
// Flags our current state (pending -> loading -> loaded)
|
// Flags our current state (idle -> loading -> loaded)
|
||||||
this.state = 'pending';
|
this.state = 'idle';
|
||||||
|
|
||||||
// An id:instance map of currently registed plugins
|
// An id:instance map of currently registed plugins
|
||||||
this.registeredPlugins = {};
|
this.registeredPlugins = {};
|
||||||
|
|||||||
@@ -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 <source> 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 += '<source src="'+ source +'">';
|
||||||
|
} );
|
||||||
|
|
||||||
|
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 <source> 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' );
|
||||||
|
} );
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
+36
-964
File diff suppressed because it is too large.
Load diff
+8
-2
@@ -140,16 +140,22 @@ export const enterFullscreen = () => {
|
|||||||
*
|
*
|
||||||
* @param {string} value
|
* @param {string} value
|
||||||
*/
|
*/
|
||||||
export const injectStyleSheet = ( value ) => {
|
export const createStyleSheet = ( value ) => {
|
||||||
|
|
||||||
let tag = document.createElement( 'style' );
|
let tag = document.createElement( 'style' );
|
||||||
tag.type = 'text/css';
|
tag.type = 'text/css';
|
||||||
|
|
||||||
|
if( value && value.length > 0 ) {
|
||||||
if( tag.styleSheet ) {
|
if( tag.styleSheet ) {
|
||||||
tag.styleSheet.cssText = value;
|
tag.styleSheet.cssText = value;
|
||||||
}
|
}
|
||||||
else {
|
else {
|
||||||
tag.appendChild( document.createTextNode( value ) );
|
tag.appendChild( document.createTextNode( value ) );
|
||||||
}
|
}
|
||||||
document.getElementsByTagName( 'head' )[0].appendChild( tag );
|
}
|
||||||
|
|
||||||
|
document.head.appendChild( tag );
|
||||||
|
|
||||||
|
return tag;
|
||||||
|
|
||||||
}
|
}
|
||||||
Reference in new issue
Block a user