diff options
| -rw-r--r-- | README.md | 37 | ||||
| -rw-r--r-- | js/reveal.js | 128 | ||||
| -rw-r--r-- | plugin/highlight/highlight.js | 5 | ||||
| -rw-r--r-- | test/test-iframe-backgrounds.html | 104 |
4 files changed, 248 insertions, 26 deletions
@@ -629,6 +629,15 @@ Reveal.getProgress(); // (0 == first slide, 1 == last slide) Reveal.getSlides(); // Array of all slides Reveal.getTotalSlides(); // Total number of slides +// Returns an array with all horizontal/vertical slides in the deck +Reveal.getHorizontalSlides(); +Reveal.getVerticalSlides(); + +// Checks if the presentation contains two or more +// horizontal/vertical slides +Reveal.hasHorizontalSlides(); +Reveal.hasVerticalSlides(); + // Returns the speaker notes for the current slide Reveal.getSlideNotes(); @@ -640,7 +649,7 @@ Reveal.isPaused(); Reveal.isAutoSliding(); // Returns the top-level DOM element -getRevealElement(); // <div class="reveal">...</div> +Reveal.getRevealElement(); // <div class="reveal">...</div> ``` ### Custom Key Bindings @@ -778,6 +787,8 @@ Embeds a web page as a slide background that covers 100% of the reveal.js width </section> ``` +Iframes are lazy-loaded when they become visible. If you'd like to preload iframes aehad of time, you can append a `data-preload` attribute to the slide `<section>`. You can also enable preloading globally for all iframes using the `preloadIframes` configuration option. + #### Background Transitions Backgrounds transition using a fade animation by default. This can be changed to a linear sliding transition by passing `backgroundTransition: 'slide'` to the `Reveal.initialize()` call. Alternatively you can set `data-background-transition` on any section with a background to override that specific transition. @@ -1065,18 +1076,38 @@ The framework has a built-in postMessage API that can be used when communicating <window>.postMessage( JSON.stringify({ method: 'slide', args: [ 2 ] }), '*' ); ``` +#### postMessage Events + When reveal.js runs inside of an iframe it can optionally bubble all of its events to the parent. Bubbled events are stringified JSON with three fields: namespace, eventName and state. Here's how you subscribe to them from the parent window: ```javascript window.addEventListener( 'message', function( event ) { var data = JSON.parse( event.data ); - if( data.namespace === 'reveal' && data.eventName ==='slidechanged' ) { + if( data.namespace === 'reveal' && data.eventName === 'slidechanged' ) { // Slide changed, see data.state for slide number } } ); ``` -This cross-window messaging can be toggled on or off using configuration flags. +#### postMessage Callbacks + +When you call any method via the postMessage API, reveal.js will dispatch a message with the return value. This is done so that you can call a getter method and see what the result is. Check out this example: + +```javascript +<revealWindow>.postMessage( JSON.stringify({ method: 'getTotalSlides' }), '*' ); + +window.addEventListener( 'message', function( event ) { + var data = JSON.parse( event.data ); + // `data.method`` is the method that we invoked + if( data.namespace === 'reveal' && data.eventName === 'callback' && data.method === 'getTotalSlides' ) { + data.result // = the total number of slides + } +} ); +``` + +#### Turning postMessage on/off + +This cross-window messaging can be toggled on or off using configuration flags. These are the default values. ```javascript Reveal.initialize({ diff --git a/js/reveal.js b/js/reveal.js index 20a967a..4aa50aa 100644 --- a/js/reveal.js +++ b/js/reveal.js @@ -1217,6 +1217,8 @@ if( data.backgroundColor ) element.style.backgroundColor = data.backgroundColor; if( data.backgroundTransition ) element.setAttribute( 'data-background-transition', data.backgroundTransition ); + if( slide.hasAttribute( 'data-preload' ) ) element.setAttribute( 'data-preload', '' ); + // Background image options are set on the content wrapper if( data.backgroundSize ) contentElement.style.backgroundSize = data.backgroundSize; if( data.backgroundRepeat ) contentElement.style.backgroundRepeat = data.backgroundRepeat; @@ -1276,7 +1278,11 @@ // Check if the requested method can be found if( data.method && typeof Reveal[data.method] === 'function' ) { - Reveal[data.method].apply( Reveal, data.args ); + var result = Reveal[data.method].apply( Reveal, data.args ); + + // Dispatch a postMessage event with the returned value from + // our method invocation for getter functions + dispatchPostMessage( 'callback', { method: data.method, result: result } ); } } }, false ); @@ -1981,8 +1987,25 @@ // If we're in an iframe, post each reveal.js event to the // parent window. Used by the notes plugin + dispatchPostMessage( type ); + + } + + /** + * Dispatched a postMessage of the given type from our window. + */ + function dispatchPostMessage( type, data ) { + if( config.postMessageEvents && window.parent !== window.self ) { - window.parent.postMessage( JSON.stringify({ namespace: 'reveal', eventName: type, state: getState() }), '*' ); + var message = { + namespace: 'reveal', + eventName: type, + state: getState() + }; + + extend( message, data ); + + window.parent.postMessage( JSON.stringify( message ), '*' ); } } @@ -3044,11 +3067,11 @@ syncBackground( slide ); syncFragments( slide ); + loadSlide( slide ); + updateBackground(); updateNotes(); - loadSlide( slide ); - } /** @@ -3314,7 +3337,7 @@ } // Flag if there are ANY vertical slides, anywhere in the deck - if( dom.wrapper.querySelectorAll( '.slides>section>section' ).length ) { + if( hasVerticalSlides() ) { dom.wrapper.classList.add( 'has-vertical-slides' ); } else { @@ -3322,7 +3345,7 @@ } // Flag if there are ANY horizontal slides, anywhere in the deck - if( dom.wrapper.querySelectorAll( '.slides>section' ).length > 1 ) { + if( hasHorizontalSlides() ) { dom.wrapper.classList.add( 'has-horizontal-slides' ); } else { @@ -3604,7 +3627,7 @@ // Stop content inside of previous backgrounds if( previousBackground ) { - stopEmbeddedContent( previousBackground ); + stopEmbeddedContent( previousBackground, { unloadIframes: !shouldPreload( previousBackground ) } ); } @@ -3783,6 +3806,7 @@ background.style.display = 'block'; var backgroundContent = slide.slideBackgroundContentElement; + var backgroundIframe = slide.getAttribute( 'data-background-iframe' ); // If the background contains media, load it if( background.hasAttribute( 'data-loaded' ) === false ) { @@ -3791,8 +3815,7 @@ var 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' ), - backgroundIframe = slide.getAttribute( 'data-background-iframe' ); + backgroundVideoMuted = slide.hasAttribute( 'data-background-video-muted' ); // Images if( backgroundImage ) { @@ -3833,14 +3856,7 @@ iframe.setAttribute( 'mozallowfullscreen', '' ); iframe.setAttribute( 'webkitallowfullscreen', '' ); - // Only load autoplaying content when the slide is shown to - // avoid having it play in the background - if( /autoplay=(1|true|yes)/gi.test( backgroundIframe ) ) { - iframe.setAttribute( 'data-src', backgroundIframe ); - } - else { - iframe.setAttribute( 'src', backgroundIframe ); - } + iframe.setAttribute( 'data-src', backgroundIframe ); iframe.style.width = '100%'; iframe.style.height = '100%'; @@ -3851,6 +3867,19 @@ } } + // Start loading preloadable iframes + var 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 ); + } + } + + } + } } @@ -3870,6 +3899,11 @@ var background = getSlideBackground( slide ); if( background ) { background.style.display = 'none'; + + // Unload any background iframes + toArray( background.querySelectorAll( 'iframe[src]' ) ).forEach( function( element ) { + element.removeAttribute( 'src' ); + } ); } // Reset lazy-loaded media elements with src attributes @@ -4434,7 +4468,44 @@ */ function getSlides() { - return toArray( dom.wrapper.querySelectorAll( SLIDES_SELECTOR + ':not(.stack)' )); + return toArray( dom.wrapper.querySelectorAll( SLIDES_SELECTOR + ':not(.stack)' ) ); + + } + + /** + * Returns a list of all horizontal slides in the deck. Each + * vertical stack is included as one horizontal slide in the + * resulting array. + */ + function getHorizontalSlides() { + + return toArray( dom.wrapper.querySelectorAll( HORIZONTAL_SLIDES_SELECTOR ) ); + + } + + /** + * Returns all vertical slides that exist within this deck. + */ + function getVerticalSlides() { + + return toArray( dom.wrapper.querySelectorAll( '.slides>section>section' ) ); + + } + + /** + * Returns true if there are at least two horizontal slides. + */ + function hasHorizontalSlides() { + + return getHorizontalSlides().length > 1; + } + + /** + * Returns true if there are at least two vertical slides. + */ + function hasVerticalSlides() { + + return getVerticalSlides().length > 1; } @@ -5149,6 +5220,10 @@ return false; } + // Use linear navigation if we're configured to OR if + // the presentation is one-dimensional + var useLinearMode = config.navigationMode === 'linear' || !hasHorizontalSlides() || !hasVerticalSlides(); + var triggered = false; // 1. User defined key bindings @@ -5221,7 +5296,7 @@ if( firstSlideShortcut ) { slide( 0 ); } - else if( !isOverview() && config.navigationMode === 'linear' ) { + else if( !isOverview() && useLinearMode ) { navigatePrev(); } else { @@ -5233,7 +5308,7 @@ if( lastSlideShortcut ) { slide( Number.MAX_VALUE ); } - else if( !isOverview() && config.navigationMode === 'linear' ) { + else if( !isOverview() && useLinearMode ) { navigateNext(); } else { @@ -5242,7 +5317,7 @@ } // K, UP else if( keyCode === 75 || keyCode === 38 ) { - if( !isOverview() && config.navigationMode === 'linear' ) { + if( !isOverview() && useLinearMode ) { navigatePrev(); } else { @@ -5251,7 +5326,7 @@ } // J, DOWN else if( keyCode === 74 || keyCode === 40 ) { - if( !isOverview() && config.navigationMode === 'linear' ) { + if( !isOverview() && useLinearMode ) { navigateNext(); } else { @@ -5910,6 +5985,15 @@ // Returns the speaker notes string for a slide, or null getSlideNotes: getSlideNotes, + // Returns an array with all horizontal/vertical slides in the deck + getHorizontalSlides: getHorizontalSlides, + getVerticalSlides: getVerticalSlides, + + // Checks if the presentation contains two or more + // horizontal/vertical slides + hasHorizontalSlides: hasHorizontalSlides, + hasVerticalSlides: hasVerticalSlides, + // Returns the previous slide element, may be null getPreviousSlide: function() { return previousSlide; diff --git a/plugin/highlight/highlight.js b/plugin/highlight/highlight.js index 9dacd6f..776f09c 100644 --- a/plugin/highlight/highlight.js +++ b/plugin/highlight/highlight.js @@ -117,6 +117,9 @@ c:[{cN:"comment",b:/\(\*/,e:/\*\)/},e.ASM,e.QSM,e.CNM,{b:/\{/,e:/\}/,i:/:/}]}}); hljs.highlightBlock( block ); + // Don't generate line numbers for empty code blocks + if( block.innerHTML.trim().length === 0 ) return; + if( block.hasAttribute( 'data-line-numbers' ) ) { hljs.lineNumbersBlock( block, { singleLine: true } ); @@ -141,7 +144,7 @@ c:[{cN:"comment",b:/\(\*/,e:/\*\)/},e.ASM,e.QSM,e.CNM,{b:/\{/,e:/\}/,i:/:/}]}}); block.parentNode.appendChild( fragmentBlock ); RevealHighlight.highlightLines( fragmentBlock ); - if( fragmentIndex ) { + if( typeof fragmentIndex === 'number' ) { fragmentBlock.setAttribute( 'data-fragment-index', fragmentIndex ); fragmentIndex += 1; } diff --git a/test/test-iframe-backgrounds.html b/test/test-iframe-backgrounds.html new file mode 100644 index 0000000..15888bc --- /dev/null +++ b/test/test-iframe-backgrounds.html @@ -0,0 +1,104 @@ +<!doctype html> +<html lang="en"> + + <head> + <meta charset="utf-8"> + + <title>reveal.js - Test Iframe Backgrounds</title> + + <link rel="stylesheet" href="../css/reveal.css"> + <link rel="stylesheet" href="qunit-2.5.0.css"> + </head> + + <body style="overflow: auto;"> + + <div id="qunit"></div> + <div id="qunit-fixture"></div> + + <div class="reveal" style="display: none;"> + + <div class="slides"> + + <section data-background-iframe="#1">1</section> + <section data-background-iframe="#2">2</section> + <section data-background-iframe="#3" data-preload>3</section> + <section data-background-iframe="#4">4</section> + <section data-background-iframe="#5">5</section> + <section data-background-iframe="#6">6</section> + + </div> + + </div> + + <script src="../js/reveal.js"></script> + <script src="qunit-2.5.0.js"></script> + + <script> + + + Reveal.addEventListener( 'ready', function() { + + function getIframe( index ) { + return document.querySelectorAll( '.slide-background' )[index].querySelector( 'iframe' ); + } + + QUnit.module( 'Iframe' ); + + QUnit.test( 'Using default settings', function( assert ) { + + Reveal.slide(0); + assert.strictEqual( getIframe(1).hasAttribute( 'src' ), false, 'not preloaded when within viewDistance' ); + + Reveal.slide(1); + assert.strictEqual( getIframe(1).hasAttribute( 'src' ), true, 'loaded when slide becomes visible' ); + + Reveal.slide(0); + assert.strictEqual( getIframe(1).hasAttribute( 'src' ), false, 'unloaded when slide becomes invisible' ); + + }); + + QUnit.test( 'Using data-preload', function( assert ) { + + Reveal.slide(1); + assert.strictEqual( getIframe(2).hasAttribute( 'src' ), true, 'preloaded within viewDistance' ); + assert.strictEqual( getIframe(1).hasAttribute( 'src' ), true, 'loaded when slide becomes visible' ); + + Reveal.slide(0); + assert.strictEqual( getIframe(3).hasAttribute( 'src' ), false, 'unloads outside of viewDistance' ); + + }); + + QUnit.test( 'Using preloadIframes: true', function( assert ) { + + Reveal.configure({ preloadIframes: true }); + + Reveal.slide(1); + assert.strictEqual( getIframe(0).hasAttribute( 'src' ), true, 'preloaded within viewDistance' ); + assert.strictEqual( getIframe(1).hasAttribute( 'src' ), true, 'preloaded within viewDistance' ); + assert.strictEqual( getIframe(2).hasAttribute( 'src' ), true, 'preloaded within viewDistance' ); + + }); + + QUnit.test( 'Using preloadIframes: false', function( assert ) { + + Reveal.configure({ preloadIframes: false }); + + Reveal.slide(0); + assert.strictEqual( getIframe(1).hasAttribute( 'src' ), false, 'not preloaded within viewDistance' ); + assert.strictEqual( getIframe(2).hasAttribute( 'src' ), false, 'not preloaded within viewDistance' ); + + Reveal.slide(1); + assert.strictEqual( getIframe(1).hasAttribute( 'src' ), true, 'loaded when slide becomes visible' ); + + + }); + + } ); + + Reveal.initialize({ + viewDistance: 3 + }); + </script> + + </body> +</html> |