From 3aaca471b193cf2ff4bb54432e59798b6c688a43 Mon Sep 17 00:00:00 2001 From: Hakim El Hattab Date: Sun, 6 Apr 2014 10:09:25 +0200 Subject: stop tracking minified files #783 --- test/test.html | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) (limited to 'test/test.html') diff --git a/test/test.html b/test/test.html index 094f3c7..aa233c8 100644 --- a/test/test.html +++ b/test/test.html @@ -6,7 +6,7 @@ reveal.js - Tests - + @@ -72,7 +72,7 @@ - + -- cgit v1.2.3 From 3ad0d6adc026c620af1b2eaadabd2ce2c338e2f1 Mon Sep 17 00:00:00 2001 From: Hakim El Hattab Date: Tue, 22 Apr 2014 15:58:21 +0200 Subject: tests for lazy loading --- test/test.html | 5 +++++ test/test.js | 12 ++++++++++++ 2 files changed, 17 insertions(+) (limited to 'test/test.html') diff --git a/test/test.html b/test/test.html index aa233c8..31c31dd 100644 --- a/test/test.html +++ b/test/test.html @@ -21,6 +21,11 @@

1

+ +
diff --git a/test/test.js b/test/test.js index 90a002a..367373e 100644 --- a/test/test.js +++ b/test/test.js @@ -449,6 +449,18 @@ Reveal.addEventListener( 'ready', function() { }); + // --------------------------------------------------------------- + // LAZY-LOADING TESTS + + QUnit.module( 'Lazy-Loading' ); + + test( 'img with data-src', function() { + strictEqual( document.querySelectorAll( '.reveal section img[src]' ).length, 1, 'Image source has been set' ); + + strictEqual( document.querySelectorAll( '.reveal section video source[src]' ).length, 2, 'Video sources have been set' ); + }); + + // --------------------------------------------------------------- // EVENT TESTS -- cgit v1.2.3 From 73f96f1d284bca6e01c36c888c2620b376c06598 Mon Sep 17 00:00:00 2001 From: Hakim El Hattab Date: Tue, 22 Apr 2014 16:10:08 +0200 Subject: lazy-load support for audio #793 --- js/reveal.js | 14 +++++++------- test/test.html | 4 ---- test/test.js | 2 -- 3 files changed, 7 insertions(+), 13 deletions(-) (limited to 'test/test.html') diff --git a/js/reveal.js b/js/reveal.js index e910682..42edf90 100644 --- a/js/reveal.js +++ b/js/reveal.js @@ -2173,25 +2173,25 @@ var Reveal = (function(){ function loadSlide( slide ) { // Media elements with data-src attributes - toArray( slide.querySelectorAll( 'img[data-src], video[data-src]' ) ).forEach( function( element ) { + toArray( slide.querySelectorAll( 'img[data-src], video[data-src], audio[data-src]' ) ).forEach( function( element ) { element.setAttribute( 'src', element.getAttribute( 'data-src' ) ); element.removeAttribute( 'data-src' ); } ); - // Video elements with multiple s - toArray( slide.querySelectorAll( 'video' ) ).forEach( function( video ) { + // Media elements with multiple s + toArray( slide.querySelectorAll( 'video, audio' ) ).forEach( function( media ) { var sources = 0; - toArray( slide.querySelectorAll( 'source[data-src]' ) ).forEach( function( source ) { + toArray( media.querySelectorAll( 'source[data-src]' ) ).forEach( function( source ) { source.setAttribute( 'src', source.getAttribute( 'data-src' ) ); source.removeAttribute( 'data-src' ); sources += 1; } ); - // If we rewrote sources for this video, we need to manually - // tell it to load from its new origin + // If we rewrote sources for this video/audio element, we need + // to manually tell it to load from its new origin if( sources > 0 ) { - video.load(); + media.load(); } } ); diff --git a/test/test.html b/test/test.html index 31c31dd..edb1623 100644 --- a/test/test.html +++ b/test/test.html @@ -22,10 +22,6 @@

1

-
diff --git a/test/test.js b/test/test.js index 367373e..93a3d61 100644 --- a/test/test.js +++ b/test/test.js @@ -456,8 +456,6 @@ Reveal.addEventListener( 'ready', function() { test( 'img with data-src', function() { strictEqual( document.querySelectorAll( '.reveal section img[src]' ).length, 1, 'Image source has been set' ); - - strictEqual( document.querySelectorAll( '.reveal section video source[src]' ).length, 2, 'Video sources have been set' ); }); -- cgit v1.2.3 From 635e51f8f54ba519c7b865b7b4f62cb65a927d2f Mon Sep 17 00:00:00 2001 From: Hakim El Hattab Date: Mon, 28 Apr 2014 11:51:35 +0200 Subject: addition background image and getSlideBackground tests --- test/test.html | 4 ++-- test/test.js | 19 +++++++++++++++---- 2 files changed, 17 insertions(+), 6 deletions(-) (limited to 'test/test.html') diff --git a/test/test.html b/test/test.html index edb1623..29d02a9 100644 --- a/test/test.html +++ b/test/test.html @@ -19,13 +19,13 @@
-
+

1

-
+

2.1

diff --git a/test/test.js b/test/test.js index 3bc934f..c0c25fb 100644 --- a/test/test.js +++ b/test/test.js @@ -114,11 +114,13 @@ Reveal.addEventListener( 'ready', function() { }); test( 'Reveal.getSlideBackground', function() { - var firstBackground = document.querySelector( '.reveal .backgrounds>.slide-background:first-child' ); + equal( Reveal.getSlideBackground( 0 ), document.querySelector( '.reveal .backgrounds>.slide-background:first-child' ), 'gets correct first background' ); + equal( Reveal.getSlideBackground( 1 ), document.querySelector( '.reveal .backgrounds>.slide-background:nth-child(2)' ), 'no v index returns stack' ); + equal( Reveal.getSlideBackground( 1, 0 ), document.querySelector( '.reveal .backgrounds>.slide-background:nth-child(2) .slide-background:nth-child(1)' ), 'v index 0 returns first vertical child' ); + equal( Reveal.getSlideBackground( 1, 1 ), document.querySelector( '.reveal .backgrounds>.slide-background:nth-child(2) .slide-background:nth-child(2)' ), 'v index 1 returns second vertical child' ); - equal( Reveal.getSlideBackground( 0 ), firstBackground, 'gets correct first background' ); - - strictEqual( Reveal.getSlideBackground( 100 ), undefined, 'returns undefined when background can\'t be found' ); + strictEqual( Reveal.getSlideBackground( 100 ), undefined, 'undefined when out of horizontal bounds' ); + strictEqual( Reveal.getSlideBackground( 1, 100 ), undefined, 'undefined when out of vertical bounds' ); }); test( 'Reveal.getPreviousSlide/getCurrentSlide', function() { @@ -470,6 +472,15 @@ Reveal.addEventListener( 'ready', function() { strictEqual( document.querySelectorAll( '.reveal section img[src]' ).length, 1, 'Image source has been set' ); }); + test( 'background images', function() { + var imageSource1 = Reveal.getSlide( 0 ).getAttribute( 'data-background-image' ); + var imageSource2 = Reveal.getSlide( 1, 0 ).getAttribute( 'data-background' ); + + // check that the images are applied to the background elements + ok( Reveal.getSlideBackground( 0 ).style.backgroundImage.indexOf( imageSource1 ) !== -1, 'data-background-image worked' ); + ok( Reveal.getSlideBackground( 1, 0 ).style.backgroundImage.indexOf( imageSource2 ) !== -1, 'data-background worked' ); + }); + // --------------------------------------------------------------- // EVENT TESTS -- cgit v1.2.3 From 7dd33f188fe14fd3cfa358aad523410d646c98fb Mon Sep 17 00:00:00 2001 From: Hakim El Hattab Date: Mon, 4 May 2015 20:58:58 -0400 Subject: lazy-load iframes only for current slide, unload when hidden --- README.md | 2 +- js/reveal.js | 24 +++++++++++++++++------- test/test.html | 1 + test/test.js | 9 +++++++++ 4 files changed, 28 insertions(+), 8 deletions(-) (limited to 'test/test.html') diff --git a/README.md b/README.md index 929dcc8..3068c03 100644 --- a/README.md +++ b/README.md @@ -317,7 +317,7 @@ Reveal.configure({ When working on presentation with a lot of media or iframe content it's important to load lazily. Lazy loading means that reveal.js will only load content for the few slides nearest to the current slide. The number of slides that are preloaded is determined by the `viewDistance` configuration option. -To enable lazy loading all you need to do is change your "src" attributes to "data-src" as shown below. This is supported for image, video, audio and iframe elements. +To enable lazy loading all you need to do is change your "src" attributes to "data-src" as shown below. This is supported for image, video, audio and iframe elements. Lazy loaded iframes will also unload when the containing slide is no longer visible. ```html
diff --git a/js/reveal.js b/js/reveal.js index 79c8bbb..ad99fdc 100644 --- a/js/reveal.js +++ b/js/reveal.js @@ -2723,7 +2723,7 @@ slide.style.display = 'block'; // Media elements with data-src attributes - toArray( slide.querySelectorAll( 'img[data-src], video[data-src], audio[data-src], iframe[data-src]' ) ).forEach( function( element ) { + toArray( slide.querySelectorAll( 'img[data-src]', 'video[data-src]', 'audio[data-src]' ) ).forEach( function( element ) { element.setAttribute( 'src', element.getAttribute( 'data-src' ) ); element.removeAttribute( 'data-src' ); } ); @@ -2909,19 +2909,24 @@ } } ); - // iframe embeds + // Lazy loading iframes + toArray( slide.querySelectorAll( 'iframe[data-src]' ) ).forEach( function( element ) { + element.setAttribute( 'src', element.getAttribute( 'data-src' ) ); + } ); + + // Generic postMessage API for non-lazy loaded iframes toArray( slide.querySelectorAll( 'iframe' ) ).forEach( function( el ) { el.contentWindow.postMessage( 'slide:start', '*' ); }); - // YouTube embeds + // YouTube postMessage API toArray( slide.querySelectorAll( 'iframe[src*="youtube.com/embed/"]' ) ).forEach( function( el ) { if( el.hasAttribute( 'data-autoplay' ) ) { el.contentWindow.postMessage( '{"event":"command","func":"playVideo","args":""}', '*' ); } }); - // Vimeo embeds + // Vimeo postMessage API toArray( slide.querySelectorAll( 'iframe[src*="player.vimeo.com/"]' ) ).forEach( function( el ) { if( el.hasAttribute( 'data-autoplay' ) ) { el.contentWindow.postMessage( '{"method":"play"}', '*' ); @@ -2945,19 +2950,24 @@ } } ); - // iframe embeds + // Lazy loading iframes + toArray( slide.querySelectorAll( 'iframe[data-src]' ) ).forEach( function( element ) { + element.removeAttribute( 'src' ); + } ); + + // Generic postMessage API for non-lazy loaded iframes toArray( slide.querySelectorAll( 'iframe' ) ).forEach( function( el ) { el.contentWindow.postMessage( 'slide:stop', '*' ); }); - // YouTube embeds + // YouTube postMessage API toArray( slide.querySelectorAll( 'iframe[src*="youtube.com/embed/"]' ) ).forEach( function( el ) { if( !el.hasAttribute( 'data-ignore' ) && typeof el.contentWindow.postMessage === 'function' ) { el.contentWindow.postMessage( '{"event":"command","func":"pauseVideo","args":""}', '*' ); } }); - // Vimeo embeds + // Vimeo postMessage API toArray( slide.querySelectorAll( 'iframe[src*="player.vimeo.com/"]' ) ).forEach( function( el ) { if( !el.hasAttribute( 'data-ignore' ) && typeof el.contentWindow.postMessage === 'function' ) { el.contentWindow.postMessage( '{"method":"pause"}', '*' ); diff --git a/test/test.html b/test/test.html index 29d02a9..18f7504 100644 --- a/test/test.html +++ b/test/test.html @@ -44,6 +44,7 @@
  • 4.2
  • 4.3
    • +
    diff --git a/test/test.js b/test/test.js index 3f93d3c..d59ddfa 100644 --- a/test/test.js +++ b/test/test.js @@ -495,6 +495,15 @@ Reveal.addEventListener( 'ready', function() { strictEqual( document.querySelectorAll( '.reveal section img[src]' ).length, 1, 'Image source has been set' ); }); + test( 'iframe with data-src', function() { + Reveal.slide( 0, 0 ); + strictEqual( document.querySelectorAll( '.reveal section iframe[src]' ).length, 0, 'Iframe source is not set' ); + Reveal.slide( 2, 0 ); + strictEqual( document.querySelectorAll( '.reveal section iframe[src]' ).length, 1, 'Iframe source is set' ); + Reveal.slide( 2, 1 ); + strictEqual( document.querySelectorAll( '.reveal section iframe[src]' ).length, 0, 'Iframe source is not set' ); + }); + test( 'background images', function() { var imageSource1 = Reveal.getSlide( 0 ).getAttribute( 'data-background-image' ); var imageSource2 = Reveal.getSlide( 1, 0 ).getAttribute( 'data-background' ); -- cgit v1.2.3 From e67dc9251a38d19cf588eb226d32a67f4d71c7d7 Mon Sep 17 00:00:00 2001 From: Hakim El Hattab Date: Wed, 6 May 2015 11:02:41 +0200 Subject: tweak to iframe lazy load test --- test/test.html | 2 +- test/test.js | 4 ++-- 2 files changed, 3 insertions(+), 3 deletions(-) (limited to 'test/test.html') diff --git a/test/test.html b/test/test.html index 18f7504..93de5b1 100644 --- a/test/test.html +++ b/test/test.html @@ -44,7 +44,6 @@
  • 4.2
  • 4.3
    • -
    @@ -53,6 +52,7 @@
  • 4.1
  • 4.2
    • +
    diff --git a/test/test.js b/test/test.js index d59ddfa..ff32ee8 100644 --- a/test/test.js +++ b/test/test.js @@ -498,9 +498,9 @@ Reveal.addEventListener( 'ready', function() { test( 'iframe with data-src', function() { Reveal.slide( 0, 0 ); strictEqual( document.querySelectorAll( '.reveal section iframe[src]' ).length, 0, 'Iframe source is not set' ); - Reveal.slide( 2, 0 ); - strictEqual( document.querySelectorAll( '.reveal section iframe[src]' ).length, 1, 'Iframe source is set' ); Reveal.slide( 2, 1 ); + strictEqual( document.querySelectorAll( '.reveal section iframe[src]' ).length, 1, 'Iframe source is set' ); + Reveal.slide( 2, 2 ); strictEqual( document.querySelectorAll( '.reveal section iframe[src]' ).length, 0, 'Iframe source is not set' ); }); -- cgit v1.2.3 From 207b0c71ede4a37ec06797802c22e7c5d61346f6 Mon Sep 17 00:00:00 2001 From: Hakim El Hattab Date: Wed, 6 May 2015 11:25:50 +0200 Subject: fix lazy load selector error --- js/reveal.js | 2 +- test/test.html | 2 ++ test/test.js | 8 ++++++++ 3 files changed, 11 insertions(+), 1 deletion(-) (limited to 'test/test.html') diff --git a/js/reveal.js b/js/reveal.js index 3bd292a..ecba3a9 100644 --- a/js/reveal.js +++ b/js/reveal.js @@ -2723,7 +2723,7 @@ slide.style.display = 'block'; // Media elements with data-src attributes - toArray( slide.querySelectorAll( 'img[data-src]', 'video[data-src]', 'audio[data-src]' ) ).forEach( function( element ) { + toArray( slide.querySelectorAll( 'img[data-src], video[data-src], audio[data-src]' ) ).forEach( function( element ) { element.setAttribute( 'src', element.getAttribute( 'data-src' ) ); element.removeAttribute( 'data-src' ); } ); diff --git a/test/test.html b/test/test.html index 93de5b1..34cf832 100644 --- a/test/test.html +++ b/test/test.html @@ -22,6 +22,8 @@

    1

    + +
    diff --git a/test/test.js b/test/test.js index ff32ee8..79ff81e 100644 --- a/test/test.js +++ b/test/test.js @@ -495,6 +495,14 @@ Reveal.addEventListener( 'ready', function() { strictEqual( document.querySelectorAll( '.reveal section img[src]' ).length, 1, 'Image source has been set' ); }); + test( 'video with data-src', function() { + strictEqual( document.querySelectorAll( '.reveal section video[src]' ).length, 1, 'Video source has been set' ); + }); + + test( 'audio with data-src', function() { + strictEqual( document.querySelectorAll( '.reveal section audio[src]' ).length, 1, 'Audio source has been set' ); + }); + test( 'iframe with data-src', function() { Reveal.slide( 0, 0 ); strictEqual( document.querySelectorAll( '.reveal section iframe[src]' ).length, 0, 'Iframe source is not set' ); -- cgit v1.2.3 From 0338f280d3942094782da57ea3b5b72bdb833e9d Mon Sep 17 00:00:00 2001 From: Hakim El Hattab Date: Thu, 10 Sep 2015 08:28:52 +0200 Subject: add getSlideNotes API method and tests --- README.md | 3 +++ js/reveal.js | 46 ++++++++++++++++++++++++++++++---------------- test/test.html | 3 ++- test/test.js | 10 +++++++++- 4 files changed, 44 insertions(+), 18 deletions(-) (limited to 'test/test.html') diff --git a/README.md b/README.md index 8d25fa7..9011605 100644 --- a/README.md +++ b/README.md @@ -372,6 +372,9 @@ Reveal.getIndices(); // { h: 0, v: 0 } } Reveal.getProgress(); // 0-1 Reveal.getTotalSlides(); +// Returns the speaker notes for the current slide +Reveal.getSlideNotes(); + // State checks Reveal.isFirstSlide(); Reveal.isLastSlide(); diff --git a/js/reveal.js b/js/reveal.js index 83c180b..2b8fec7 100644 --- a/js/reveal.js +++ b/js/reveal.js @@ -2475,22 +2475,7 @@ if( config.showNotes && dom.speakerNotes && currentSlide && !isPrintingPDF() ) { - var notes = ''; - - // Notes can be specified via the data-notes attribute... - if( currentSlide.hasAttribute( 'data-notes' ) ) { - notes = currentSlide.getAttribute( 'data-notes' ); - } - - // ... or using an