diff options
| -rw-r--r-- | README.md | 13 | ||||
| -rw-r--r-- | css/reveal.css | 13 | ||||
| -rw-r--r-- | css/reveal.scss | 9 | ||||
| -rw-r--r-- | js/reveal.js | 103 | ||||
| -rw-r--r-- | plugin/highlight/highlight.js | 3 | ||||
| -rw-r--r-- | test/test-iframe-backgrounds.html | 104 |
6 files changed, 214 insertions, 31 deletions
@@ -642,6 +642,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(); @@ -653,7 +662,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 @@ -791,6 +800,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. diff --git a/css/reveal.css b/css/reveal.css index 91ee6dc..fb47296 100644 --- a/css/reveal.css +++ b/css/reveal.css @@ -227,7 +227,7 @@ body { bottom: 12px; right: 12px; left: auto; - z-index: 1; + z-index: 11; color: #000; pointer-events: none; font-size: 10px; } @@ -312,7 +312,8 @@ body { transform: rotate(90deg); } .reveal .controls .navigate-down { right: 3.2em; - bottom: 0; + bottom: -1.4em; + padding-bottom: 1.4em; -webkit-transform: translateY(10px); transform: translateY(10px); } .reveal .controls .navigate-down .controls-arrow { @@ -395,18 +396,18 @@ body { right: auto; } .reveal .controls[data-controls-layout="edges"] .navigate-left { top: 50%; - left: 8px; + left: 0.8em; margin-top: -1.8em; } .reveal .controls[data-controls-layout="edges"] .navigate-right { top: 50%; - right: 8px; + right: 0.8em; margin-top: -1.8em; } .reveal .controls[data-controls-layout="edges"] .navigate-up { - top: 8px; + top: 0.8em; left: 50%; margin-left: -1.8em; } .reveal .controls[data-controls-layout="edges"] .navigate-down { - bottom: 8px; + bottom: -0.3em; left: 50%; margin-left: -1.8em; } } diff --git a/css/reveal.scss b/css/reveal.scss index a6cb9bc..a7b148c 100644 --- a/css/reveal.scss +++ b/css/reveal.scss @@ -263,7 +263,7 @@ $controlsArrowAngleActive: 36deg; bottom: $spacing; right: $spacing; left: auto; - z-index: 1; + z-index: 11; color: #000; pointer-events: none; font-size: 10px; @@ -355,7 +355,8 @@ $controlsArrowAngleActive: 36deg; .navigate-down { right: $controlArrowSpacing + $controlArrowSize/2; - bottom: 0; + bottom: -$controlArrowSpacing; + padding-bottom: $controlArrowSpacing; transform: translateY( 10px ); .controls-arrow { @@ -452,7 +453,7 @@ $controlsArrowAngleActive: 36deg; // Edge aligned controls layout @media screen and (min-width: 500px) { - $spacing: 8px; + $spacing: 0.8em; .reveal .controls[data-controls-layout="edges"] { & { @@ -489,7 +490,7 @@ $controlsArrowAngleActive: 36deg; } .navigate-down { - bottom: $spacing; + bottom: $spacing - $controlArrowSpacing + 0.3em; left: 50%; margin-left: -$controlArrowSize/2; } diff --git a/js/reveal.js b/js/reveal.js index 91e7396..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; @@ -3065,11 +3067,11 @@ syncBackground( slide ); syncFragments( slide ); + loadSlide( slide ); + updateBackground(); updateNotes(); - loadSlide( slide ); - } /** @@ -3335,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 { @@ -3343,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 { @@ -3625,7 +3627,7 @@ // Stop content inside of previous backgrounds if( previousBackground ) { - stopEmbeddedContent( previousBackground ); + stopEmbeddedContent( previousBackground, { unloadIframes: !shouldPreload( previousBackground ) } ); } @@ -3804,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 ) { @@ -3812,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 ) { @@ -3854,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%'; @@ -3872,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 ); + } + } + + } + } } @@ -3891,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 @@ -4455,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; } @@ -5170,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 @@ -5242,7 +5296,7 @@ if( firstSlideShortcut ) { slide( 0 ); } - else if( !isOverview() && config.navigationMode === 'linear' ) { + else if( !isOverview() && useLinearMode ) { navigatePrev(); } else { @@ -5254,7 +5308,7 @@ if( lastSlideShortcut ) { slide( Number.MAX_VALUE ); } - else if( !isOverview() && config.navigationMode === 'linear' ) { + else if( !isOverview() && useLinearMode ) { navigateNext(); } else { @@ -5263,7 +5317,7 @@ } // K, UP else if( keyCode === 75 || keyCode === 38 ) { - if( !isOverview() && config.navigationMode === 'linear' ) { + if( !isOverview() && useLinearMode ) { navigatePrev(); } else { @@ -5272,7 +5326,7 @@ } // J, DOWN else if( keyCode === 74 || keyCode === 40 ) { - if( !isOverview() && config.navigationMode === 'linear' ) { + if( !isOverview() && useLinearMode ) { navigateNext(); } else { @@ -5931,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 e50676f..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 } ); 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> |