summaryrefslogtreecommitdiffhomepage
diff options
context:
space:
mode:
Diffstat
-rw-r--r--README.md23
-rw-r--r--css/reveal.css79
-rw-r--r--css/reveal.scss149
-rw-r--r--js/reveal.js119
-rw-r--r--package.json2
-rw-r--r--test/examples/slide-transitions.html101
-rw-r--r--test/test.html3
-rw-r--r--test/test.js17
8 files changed, 356 insertions, 137 deletions
diff --git a/README.md b/README.md
index d263f24..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
<section>
@@ -482,6 +482,27 @@ The global presentation transition is set using the ```transition``` config valu
</section>
```
+You can also use different in and out transitions for the same slide:
+
+```html
+<section data-transition="slide">
+ The train goes on …
+</section>
+<section data-transition="slide">
+ and on …
+</section>
+<section data-transition="slide-in fade-out">
+ and stops.
+</section>
+<section data-transition="fade-in slide-out">
+ (Passengers entering and leaving)
+</section>
+<section data-transition="slide">
+ And it starts again.
+</section>
+```
+
+
Note that this does not work with the page and cube transitions.
diff --git a/css/reveal.css b/css/reveal.css
index 6127a5b..258e975 100644
--- a/css/reveal.css
+++ b/css/reveal.css
@@ -335,29 +335,56 @@ body {
opacity: 0; }
/*********************************************
+ * Mixins for readability of transitions
+ *********************************************/
+/*********************************************
* SLIDE TRANSITION
* Aliased 'linear' for backwards compatibility
*********************************************/
-.reveal.slide section, .reveal.linear section {
+.reveal.slide section {
-webkit-backface-visibility: hidden;
backface-visibility: hidden; }
-.reveal .slides > section[data-transition=slide].past, .reveal.slide .slides > section:not([data-transition]).past, .reveal .slides > section[data-transition=linear].past, .reveal.linear .slides > section:not([data-transition]).past {
+.reveal .slides > section[data-transition=slide].past, .reveal .slides > section[data-transition~=slide-out].past, .reveal.slide .slides > section:not([data-transition]).past {
-webkit-transform: translate(-150%, 0);
-ms-transform: translate(-150%, 0);
transform: translate(-150%, 0); }
-.reveal .slides > section[data-transition=slide].future, .reveal.slide .slides > section:not([data-transition]).future, .reveal .slides > section[data-transition=linear].future, .reveal.linear .slides > section:not([data-transition]).future {
+.reveal .slides > section[data-transition=slide].future, .reveal .slides > section[data-transition~=slide-in].future, .reveal.slide .slides > section:not([data-transition]).future {
-webkit-transform: translate(150%, 0);
-ms-transform: translate(150%, 0);
transform: translate(150%, 0); }
-.reveal .slides > section > section[data-transition=slide].past, .reveal.slide .slides > section > section:not([data-transition]).past, .reveal .slides > section > section[data-transition=linear].past, .reveal.linear .slides > section > section:not([data-transition]).past {
+.reveal .slides > section > section[data-transition=slide].past, .reveal .slides > section > section[data-transition~=slide-out].past, .reveal.slide .slides > section > section:not([data-transition]).past {
-webkit-transform: translate(0, -150%);
-ms-transform: translate(0, -150%);
transform: translate(0, -150%); }
-.reveal .slides > section > section[data-transition=slide].future, .reveal.slide .slides > section > section:not([data-transition]).future, .reveal .slides > section > section[data-transition=linear].future, .reveal.linear .slides > section > section:not([data-transition]).future {
+.reveal .slides > section > section[data-transition=slide].future, .reveal .slides > section > section[data-transition~=slide-in].future, .reveal.slide .slides > section > section:not([data-transition]).future {
+ -webkit-transform: translate(0, 150%);
+ -ms-transform: translate(0, 150%);
+ transform: translate(0, 150%); }
+
+.reveal.linear section {
+ -webkit-backface-visibility: hidden;
+ backface-visibility: hidden; }
+
+.reveal .slides > section[data-transition=linear].past, .reveal .slides > section[data-transition~=linear-out].past, .reveal.linear .slides > section:not([data-transition]).past {
+ -webkit-transform: translate(-150%, 0);
+ -ms-transform: translate(-150%, 0);
+ transform: translate(-150%, 0); }
+
+.reveal .slides > section[data-transition=linear].future, .reveal .slides > section[data-transition~=linear-in].future, .reveal.linear .slides > section:not([data-transition]).future {
+ -webkit-transform: translate(150%, 0);
+ -ms-transform: translate(150%, 0);
+ transform: translate(150%, 0); }
+
+.reveal .slides > section > section[data-transition=linear].past, .reveal .slides > section > section[data-transition~=linear-out].past, .reveal.linear .slides > section > section:not([data-transition]).past {
+ -webkit-transform: translate(0, -150%);
+ -ms-transform: translate(0, -150%);
+ transform: translate(0, -150%); }
+
+.reveal .slides > section > section[data-transition=linear].future, .reveal .slides > section > section[data-transition~=linear-in].future, .reveal.linear .slides > section > section:not([data-transition]).future {
-webkit-transform: translate(0, 150%);
-ms-transform: translate(0, 150%);
transform: translate(0, 150%); }
@@ -366,38 +393,54 @@ body {
* CONVEX TRANSITION
* Aliased 'default' for backwards compatibility
*********************************************/
-.reveal .slides > section[data-transition=default].past, .reveal.default .slides > section:not([data-transition]).past, .reveal .slides > section[data-transition=convex].past, .reveal.convex .slides > section:not([data-transition]).past {
+.reveal .slides > section[data-transition=default].past, .reveal .slides > section[data-transition~=default-out].past, .reveal.default .slides > section:not([data-transition]).past {
+ -webkit-transform: translate3d(-100%, 0, 0) rotateY(-90deg) translate3d(-100%, 0, 0);
+ transform: translate3d(-100%, 0, 0) rotateY(-90deg) translate3d(-100%, 0, 0); }
+
+.reveal .slides > section[data-transition=default].future, .reveal .slides > section[data-transition~=default-in].future, .reveal.default .slides > section:not([data-transition]).future {
+ -webkit-transform: translate3d(100%, 0, 0) rotateY(90deg) translate3d(100%, 0, 0);
+ transform: translate3d(100%, 0, 0) rotateY(90deg) translate3d(100%, 0, 0); }
+
+.reveal .slides > section > section[data-transition=default].past, .reveal .slides > section > section[data-transition~=default-out].past, .reveal.default .slides > section > section:not([data-transition]).past {
+ -webkit-transform: translate3d(0, -300px, 0) rotateX(70deg) translate3d(0, -300px, 0);
+ transform: translate3d(0, -300px, 0) rotateX(70deg) translate3d(0, -300px, 0); }
+
+.reveal .slides > section > section[data-transition=default].future, .reveal .slides > section > section[data-transition~=default-in].future, .reveal.default .slides > section > section:not([data-transition]).future {
+ -webkit-transform: translate3d(0, 300px, 0) rotateX(-70deg) translate3d(0, 300px, 0);
+ transform: translate3d(0, 300px, 0) rotateX(-70deg) translate3d(0, 300px, 0); }
+
+.reveal .slides > section[data-transition=convex].past, .reveal .slides > section[data-transition~=convex-out].past, .reveal.convex .slides > section:not([data-transition]).past {
-webkit-transform: translate3d(-100%, 0, 0) rotateY(-90deg) translate3d(-100%, 0, 0);
transform: translate3d(-100%, 0, 0) rotateY(-90deg) translate3d(-100%, 0, 0); }
-.reveal .slides > section[data-transition=default].future, .reveal.default .slides > section:not([data-transition]).future, .reveal .slides > section[data-transition=convex].future, .reveal.convex .slides > section:not([data-transition]).future {
+.reveal .slides > section[data-transition=convex].future, .reveal .slides > section[data-transition~=convex-in].future, .reveal.convex .slides > section:not([data-transition]).future {
-webkit-transform: translate3d(100%, 0, 0) rotateY(90deg) translate3d(100%, 0, 0);
transform: translate3d(100%, 0, 0) rotateY(90deg) translate3d(100%, 0, 0); }
-.reveal .slides > section > section[data-transition=default].past, .reveal.default .slides > section > section:not([data-transition]).past, .reveal .slides > section > section[data-transition=convex].past, .reveal.convex .slides > section > section:not([data-transition]).past {
+.reveal .slides > section > section[data-transition=convex].past, .reveal .slides > section > section[data-transition~=convex-out].past, .reveal.convex .slides > section > section:not([data-transition]).past {
-webkit-transform: translate3d(0, -300px, 0) rotateX(70deg) translate3d(0, -300px, 0);
transform: translate3d(0, -300px, 0) rotateX(70deg) translate3d(0, -300px, 0); }
-.reveal .slides > section > section[data-transition=default].future, .reveal.default .slides > section > section:not([data-transition]).future, .reveal .slides > section > section[data-transition=convex].future, .reveal.convex .slides > section > section:not([data-transition]).future {
+.reveal .slides > section > section[data-transition=convex].future, .reveal .slides > section > section[data-transition~=convex-in].future, .reveal.convex .slides > section > section:not([data-transition]).future {
-webkit-transform: translate3d(0, 300px, 0) rotateX(-70deg) translate3d(0, 300px, 0);
transform: translate3d(0, 300px, 0) rotateX(-70deg) translate3d(0, 300px, 0); }
/*********************************************
* CONCAVE TRANSITION
*********************************************/
-.reveal .slides > section[data-transition=concave].past, .reveal.concave .slides > section:not([data-transition]).past {
+.reveal .slides > section[data-transition=concave].past, .reveal .slides > section[data-transition~=concave-out].past, .reveal.concave .slides > section:not([data-transition]).past {
-webkit-transform: translate3d(-100%, 0, 0) rotateY(90deg) translate3d(-100%, 0, 0);
transform: translate3d(-100%, 0, 0) rotateY(90deg) translate3d(-100%, 0, 0); }
-.reveal .slides > section[data-transition=concave].future, .reveal.concave .slides > section:not([data-transition]).future {
+.reveal .slides > section[data-transition=concave].future, .reveal .slides > section[data-transition~=concave-in].future, .reveal.concave .slides > section:not([data-transition]).future {
-webkit-transform: translate3d(100%, 0, 0) rotateY(-90deg) translate3d(100%, 0, 0);
transform: translate3d(100%, 0, 0) rotateY(-90deg) translate3d(100%, 0, 0); }
-.reveal .slides > section > section[data-transition=concave].past, .reveal.concave .slides > section > section:not([data-transition]).past {
+.reveal .slides > section > section[data-transition=concave].past, .reveal .slides > section > section[data-transition~=concave-out].past, .reveal.concave .slides > section > section:not([data-transition]).past {
-webkit-transform: translate3d(0, -80%, 0) rotateX(-70deg) translate3d(0, -80%, 0);
transform: translate3d(0, -80%, 0) rotateX(-70deg) translate3d(0, -80%, 0); }
-.reveal .slides > section > section[data-transition=concave].future, .reveal.concave .slides > section > section:not([data-transition]).future {
+.reveal .slides > section > section[data-transition=concave].future, .reveal .slides > section > section[data-transition~=concave-in].future, .reveal.concave .slides > section > section:not([data-transition]).future {
-webkit-transform: translate3d(0, 80%, 0) rotateX(70deg) translate3d(0, 80%, 0);
transform: translate3d(0, 80%, 0) rotateX(70deg) translate3d(0, 80%, 0); }
@@ -408,24 +451,24 @@ body {
-webkit-transition-timing-function: ease;
transition-timing-function: ease; }
-.reveal .slides > section[data-transition=zoom].past, .reveal.zoom .slides > section:not([data-transition]).past {
+.reveal .slides > section[data-transition=zoom].past, .reveal .slides > section[data-transition~=zoom-out].past, .reveal.zoom .slides > section:not([data-transition]).past {
visibility: hidden;
-webkit-transform: scale(16);
-ms-transform: scale(16);
transform: scale(16); }
-.reveal .slides > section[data-transition=zoom].future, .reveal.zoom .slides > section:not([data-transition]).future {
+.reveal .slides > section[data-transition=zoom].future, .reveal .slides > section[data-transition~=zoom-in].future, .reveal.zoom .slides > section:not([data-transition]).future {
visibility: hidden;
-webkit-transform: scale(0.2);
-ms-transform: scale(0.2);
transform: scale(0.2); }
-.reveal .slides > section > section[data-transition=zoom].past, .reveal.zoom .slides > section > section:not([data-transition]).past {
+.reveal .slides > section > section[data-transition=zoom].past, .reveal .slides > section > section[data-transition~=zoom-out].past, .reveal.zoom .slides > section > section:not([data-transition]).past {
-webkit-transform: translate(0, -150%);
-ms-transform: translate(0, -150%);
transform: translate(0, -150%); }
-.reveal .slides > section > section[data-transition=zoom].future, .reveal.zoom .slides > section > section:not([data-transition]).future {
+.reveal .slides > section > section[data-transition=zoom].future, .reveal .slides > section > section[data-transition~=zoom-in].future, .reveal.zoom .slides > section > section:not([data-transition]).future {
-webkit-transform: translate(0, 150%);
-ms-transform: translate(0, 150%);
transform: translate(0, 150%); }
@@ -601,7 +644,7 @@ body {
/*********************************************
* NO TRANSITION
*********************************************/
-.reveal .slides section[data-transition=none], .reveal.none .slides section:not([data-transition]) {
+.reveal .slides > section[data-transition=none], .reveal.none .slides > section:not([data-transition]) {
-webkit-transform: none;
-ms-transform: none;
transform: none;
diff --git a/css/reveal.scss b/css/reveal.scss
index 2ec75e9..3321c98 100644
--- a/css/reveal.scss
+++ b/css/reveal.scss
@@ -428,93 +428,102 @@ body {
/*********************************************
- * SLIDE TRANSITION
- * Aliased 'linear' for backwards compatibility
+ * Mixins for readability of transitions
*********************************************/
-.reveal.slide section,
-.reveal.linear section {
- backface-visibility: hidden;
+@mixin transition-global($style) {
+ .reveal .slides>section[data-transition=#{$style}],
+ .reveal.#{$style} .slides>section:not([data-transition]) {
+ @content;
+ }
}
-
-.reveal .slides>section[data-transition=slide].past,
-.reveal.slide .slides>section:not([data-transition]).past,
-.reveal .slides>section[data-transition=linear].past,
-.reveal.linear .slides>section:not([data-transition]).past {
- transform: translate(-150%, 0);
+@mixin transition-horizontal-past($style) {
+ .reveal .slides>section[data-transition=#{$style}].past,
+ .reveal .slides>section[data-transition~=#{$style}-out].past,
+ .reveal.#{$style} .slides>section:not([data-transition]).past {
+ @content;
+ }
}
-.reveal .slides>section[data-transition=slide].future,
-.reveal.slide .slides>section:not([data-transition]).future,
-.reveal .slides>section[data-transition=linear].future,
-.reveal.linear .slides>section:not([data-transition]).future {
- transform: translate(150%, 0);
+@mixin transition-horizontal-future($style) {
+ .reveal .slides>section[data-transition=#{$style}].future,
+ .reveal .slides>section[data-transition~=#{$style}-in].future,
+ .reveal.#{$style} .slides>section:not([data-transition]).future {
+ @content;
+ }
}
-.reveal .slides>section>section[data-transition=slide].past,
-.reveal.slide .slides>section>section:not([data-transition]).past,
-.reveal .slides>section>section[data-transition=linear].past,
-.reveal.linear .slides>section>section:not([data-transition]).past {
- transform: translate(0, -150%);
+@mixin transition-vertical-past($style) {
+ .reveal .slides>section>section[data-transition=#{$style}].past,
+ .reveal .slides>section>section[data-transition~=#{$style}-out].past,
+ .reveal.#{$style} .slides>section>section:not([data-transition]).past {
+ @content;
+ }
}
-.reveal .slides>section>section[data-transition=slide].future,
-.reveal.slide .slides>section>section:not([data-transition]).future,
-.reveal .slides>section>section[data-transition=linear].future,
-.reveal.linear .slides>section>section:not([data-transition]).future {
- transform: translate(0, 150%);
+@mixin transition-vertical-future($style) {
+ .reveal .slides>section>section[data-transition=#{$style}].future,
+ .reveal .slides>section>section[data-transition~=#{$style}-in].future,
+ .reveal.#{$style} .slides>section>section:not([data-transition]).future {
+ @content;
+ }
}
+/*********************************************
+ * SLIDE TRANSITION
+ * Aliased 'linear' for backwards compatibility
+ *********************************************/
+
+@each $stylename in slide, linear {
+ .reveal.#{$stylename} section {
+ backface-visibility: hidden;
+ }
+ @include transition-horizontal-past(#{$stylename}) {
+ transform: translate(-150%, 0);
+ }
+ @include transition-horizontal-future(#{$stylename}) {
+ transform: translate(150%, 0);
+ }
+ @include transition-vertical-past(#{$stylename}) {
+ transform: translate(0, -150%);
+ }
+ @include transition-vertical-future(#{$stylename}) {
+ transform: translate(0, 150%);
+ }
+}
/*********************************************
* CONVEX TRANSITION
* Aliased 'default' for backwards compatibility
*********************************************/
-.reveal .slides>section[data-transition=default].past,
-.reveal.default .slides>section:not([data-transition]).past,
-.reveal .slides>section[data-transition=convex].past,
-.reveal.convex .slides>section:not([data-transition]).past {
- transform: translate3d(-100%, 0, 0) rotateY(-90deg) translate3d(-100%, 0, 0);
-}
-.reveal .slides>section[data-transition=default].future,
-.reveal.default .slides>section:not([data-transition]).future,
-.reveal .slides>section[data-transition=convex].future,
-.reveal.convex .slides>section:not([data-transition]).future {
- transform: translate3d(100%, 0, 0) rotateY(90deg) translate3d(100%, 0, 0);
-}
-
-.reveal .slides>section>section[data-transition=default].past,
-.reveal.default .slides>section>section:not([data-transition]).past,
-.reveal .slides>section>section[data-transition=convex].past,
-.reveal.convex .slides>section>section:not([data-transition]).past {
- transform: translate3d(0, -300px, 0) rotateX(70deg) translate3d(0, -300px, 0);
-}
-.reveal .slides>section>section[data-transition=default].future,
-.reveal.default .slides>section>section:not([data-transition]).future,
-.reveal .slides>section>section[data-transition=convex].future,
-.reveal.convex .slides>section>section:not([data-transition]).future {
- transform: translate3d(0, 300px, 0) rotateX(-70deg) translate3d(0, 300px, 0);
+@each $stylename in default, convex {
+ @include transition-horizontal-past(#{$stylename}) {
+ transform: translate3d(-100%, 0, 0) rotateY(-90deg) translate3d(-100%, 0, 0);
+ }
+ @include transition-horizontal-future(#{$stylename}) {
+ transform: translate3d(100%, 0, 0) rotateY(90deg) translate3d(100%, 0, 0);
+ }
+ @include transition-vertical-past(#{$stylename}) {
+ transform: translate3d(0, -300px, 0) rotateX(70deg) translate3d(0, -300px, 0);
+ }
+ @include transition-vertical-future(#{$stylename}) {
+ transform: translate3d(0, 300px, 0) rotateX(-70deg) translate3d(0, 300px, 0);
+ }
}
-
/*********************************************
* CONCAVE TRANSITION
*********************************************/
-.reveal .slides>section[data-transition=concave].past,
-.reveal.concave .slides>section:not([data-transition]).past {
+@include transition-horizontal-past(concave) {
transform: translate3d(-100%, 0, 0) rotateY(90deg) translate3d(-100%, 0, 0);
}
-.reveal .slides>section[data-transition=concave].future,
-.reveal.concave .slides>section:not([data-transition]).future {
+@include transition-horizontal-future(concave) {
transform: translate3d(100%, 0, 0) rotateY(-90deg) translate3d(100%, 0, 0);
}
-
-.reveal .slides>section>section[data-transition=concave].past,
-.reveal.concave .slides>section>section:not([data-transition]).past {
+@include transition-vertical-past(concave) {
transform: translate3d(0, -80%, 0) rotateX(-70deg) translate3d(0, -80%, 0);
}
-.reveal .slides>section>section[data-transition=concave].future,
-.reveal.concave .slides>section>section:not([data-transition]).future {
+@include transition-vertical-future(concave) {
transform: translate3d(0, 80%, 0) rotateX(70deg) translate3d(0, 80%, 0);
}
@@ -523,28 +532,21 @@ body {
* ZOOM TRANSITION
*********************************************/
-.reveal .slides>section[data-transition=zoom],
-.reveal.zoom .slides>section:not([data-transition]) {
+@include transition-global(zoom) {
transition-timing-function: ease;
}
-
-.reveal .slides>section[data-transition=zoom].past,
-.reveal.zoom .slides>section:not([data-transition]).past {
+@include transition-horizontal-past(zoom) {
visibility: hidden;
transform: scale(16);
}
-.reveal .slides>section[data-transition=zoom].future,
-.reveal.zoom .slides>section:not([data-transition]).future {
+@include transition-horizontal-future(zoom) {
visibility: hidden;
transform: scale(0.2);
}
-
-.reveal .slides>section>section[data-transition=zoom].past,
-.reveal.zoom .slides>section>section:not([data-transition]).past {
+@include transition-vertical-past(zoom) {
transform: translate(0, -150%);
}
-.reveal .slides>section>section[data-transition=zoom].future,
-.reveal.zoom .slides>section>section:not([data-transition]).future {
+@include transition-vertical-future(zoom) {
transform: translate(0, 150%);
}
@@ -713,8 +715,7 @@ body {
* NO TRANSITION
*********************************************/
-.reveal .slides section[data-transition=none],
-.reveal.none .slides section:not([data-transition]) {
+@include transition-global(none) {
transform: none;
transition: none;
}
diff --git a/js/reveal.js b/js/reveal.js
index d9ba333..ff5ea53 100644
--- a/js/reveal.js
+++ b/js/reveal.js
@@ -30,7 +30,7 @@
VERTICAL_SLIDES_SELECTOR = '.slides>section.present>section',
HOME_SLIDE_SELECTOR = '.slides>section:first-of-type',
- // Configurations defaults, can be overridden at initialization time
+ // Configuration defaults, can be overridden at initialization time
config = {
// The "normal" size of the presentation, aspect ratio will be preserved
@@ -238,14 +238,18 @@
if( !features.transforms2d && !features.transforms3d ) {
document.body.setAttribute( 'class', 'no-transforms' );
- // Since JS won't be running any further, we need to load all
- // images that were intended to lazy load now
- var images = document.getElementsByTagName( 'img' );
- for( var i = 0, len = images.length; i < len; i++ ) {
- var image = images[i];
- if( image.getAttribute( 'data-src' ) ) {
- image.setAttribute( 'src', image.getAttribute( 'data-src' ) );
- image.removeAttribute( 'data-src' );
+ // Since JS won't be running any further, we load all lazy
+ // loading elements upfront
+ var images = toArray( document.getElementsByTagName( 'img' ) ),
+ iframes = toArray( document.getElementsByTagName( 'iframe' ) );
+
+ var lazyLoadable = images.concat( iframes );
+
+ for( var i = 0, len = lazyLoadable.length; i < len; i++ ) {
+ var element = lazyLoadable[i];
+ if( element.getAttribute( 'data-src' ) ) {
+ element.setAttribute( 'src', element.getAttribute( 'data-src' ) );
+ element.removeAttribute( 'data-src' );
}
}
@@ -1132,7 +1136,7 @@
}
/**
- * Measures the distance in pixels between point a and point b.
+ * Converts various color input formats to an {r:0,g:0,b:0} object.
*
* @param {String} color The string representation of a color,
* the following formats are supported:
@@ -2193,6 +2197,7 @@
updateSlidesVisibility();
formatEmbeddedContent();
+ startEmbeddedContent( currentSlide );
if( isOverview() ) {
layoutOverview();
@@ -2719,7 +2724,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' );
} );
@@ -2866,21 +2871,22 @@
*/
function formatEmbeddedContent() {
+ var _appendParamToIframeSource = function( sourceAttribute, sourceURL, param ) {
+ toArray( dom.slides.querySelectorAll( 'iframe['+ sourceAttribute +'*="'+ sourceURL +'"]' ) ).forEach( function( el ) {
+ var src = el.getAttribute( sourceAttribute );
+ if( src && src.indexOf( param ) === -1 ) {
+ el.setAttribute( sourceAttribute, src + ( !/\?/.test( src ) ? '?' : '&' ) + param );
+ }
+ });
+ };
+
// YouTube frames must include "?enablejsapi=1"
- toArray( dom.slides.querySelectorAll( 'iframe[src*="youtube.com/embed/"]' ) ).forEach( function( el ) {
- var src = el.getAttribute( 'src' );
- if( !/enablejsapi\=1/gi.test( src ) ) {
- el.setAttribute( 'src', src + ( !/\?/.test( src ) ? '?' : '&' ) + 'enablejsapi=1' );
- }
- });
+ _appendParamToIframeSource( 'src', 'youtube.com/embed/', 'enablejsapi=1' );
+ _appendParamToIframeSource( 'data-src', 'youtube.com/embed/', 'enablejsapi=1' );
// Vimeo frames must include "?api=1"
- toArray( dom.slides.querySelectorAll( 'iframe[src*="player.vimeo.com/"]' ) ).forEach( function( el ) {
- var src = el.getAttribute( 'src' );
- if( !/api\=1/gi.test( src ) ) {
- el.setAttribute( 'src', src + ( !/\?/.test( src ) ? '?' : '&' ) + 'api=1' );
- }
- });
+ _appendParamToIframeSource( 'src', 'player.vimeo.com/', 'api=1' );
+ _appendParamToIframeSource( 'data-src', 'player.vimeo.com/', 'api=1' );
}
@@ -2900,29 +2906,47 @@
// HTML5 media elements
toArray( slide.querySelectorAll( 'video, audio' ) ).forEach( function( el ) {
- if( el.hasAttribute( 'data-autoplay' ) ) {
+ if( el.hasAttribute( 'data-autoplay' ) && typeof el.play === 'function' ) {
el.play();
}
} );
- // iframe embeds
- toArray( slide.querySelectorAll( 'iframe' ) ).forEach( function( el ) {
- el.contentWindow.postMessage( 'slide:start', '*' );
- });
+ // Normal iframes
+ toArray( slide.querySelectorAll( 'iframe[src]' ) ).forEach( function( el ) {
+ startEmbeddedIframe( { target: el } );
+ } );
- // YouTube embeds
- toArray( slide.querySelectorAll( 'iframe[src*="youtube.com/embed/"]' ) ).forEach( function( el ) {
- if( el.hasAttribute( 'data-autoplay' ) ) {
- el.contentWindow.postMessage( '{"event":"command","func":"playVideo","args":""}', '*' );
+ // Lazy loading iframes
+ toArray( slide.querySelectorAll( 'iframe[data-src]' ) ).forEach( function( el ) {
+ if( el.getAttribute( 'src' ) !== el.getAttribute( 'data-src' ) ) {
+ el.removeEventListener( 'load', startEmbeddedIframe ); // remove first to avoid dupes
+ el.addEventListener( 'load', startEmbeddedIframe );
+ el.setAttribute( 'src', el.getAttribute( 'data-src' ) );
}
- });
+ } );
+ }
- // Vimeo embeds
- toArray( slide.querySelectorAll( 'iframe[src*="player.vimeo.com/"]' ) ).forEach( function( el ) {
- if( el.hasAttribute( 'data-autoplay' ) ) {
- el.contentWindow.postMessage( '{"method":"play"}', '*' );
- }
- });
+ }
+
+ /**
+ * "Starts" the content of an embedded iframe using the
+ * postmessage API.
+ */
+ function startEmbeddedIframe( event ) {
+
+ var iframe = event.target;
+
+ // YouTube postMessage API
+ if( /youtube\.com\/embed\//.test( iframe.getAttribute( 'src' ) ) && iframe.hasAttribute( 'data-autoplay' ) ) {
+ iframe.contentWindow.postMessage( '{"event":"command","func":"playVideo","args":""}', '*' );
+ }
+ // Vimeo postMessage API
+ else if( /player\.vimeo\.com\//.test( iframe.getAttribute( 'src' ) ) && iframe.hasAttribute( 'data-autoplay' ) ) {
+ iframe.contentWindow.postMessage( '{"method":"play"}', '*' );
+ }
+ // Generic postMessage API
+ else {
+ iframe.contentWindow.postMessage( 'slide:start', '*' );
}
}
@@ -2936,29 +2960,38 @@
if( slide && slide.parentNode ) {
// HTML5 media elements
toArray( slide.querySelectorAll( 'video, audio' ) ).forEach( function( el ) {
- if( !el.hasAttribute( 'data-ignore' ) ) {
+ if( !el.hasAttribute( 'data-ignore' ) && typeof el.pause === 'function' ) {
el.pause();
}
} );
- // iframe embeds
+ // Generic postMessage API for non-lazy loaded iframes
toArray( slide.querySelectorAll( 'iframe' ) ).forEach( function( el ) {
el.contentWindow.postMessage( 'slide:stop', '*' );
+ el.removeEventListener( 'load', startEmbeddedIframe );
});
- // 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"}', '*' );
}
});
+
+ // Lazy loading iframes
+ toArray( slide.querySelectorAll( 'iframe[data-src]' ) ).forEach( function( 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' );
+ } );
}
}
diff --git a/package.json b/package.json
index 3801546..201c6bf 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
{
"name": "reveal.js",
- "version": "3.0.0",
+ "version": "3.1.0",
"description": "The HTML Presentation Framework",
"homepage": "http://lab.hakim.se/reveal-js",
"subdomain": "revealjs",
diff --git a/test/examples/slide-transitions.html b/test/examples/slide-transitions.html
new file mode 100644
index 0000000..88119dc
--- /dev/null
+++ b/test/examples/slide-transitions.html
@@ -0,0 +1,101 @@
+<!doctype html>
+<html lang="en">
+
+ <head>
+ <meta charset="utf-8">
+
+ <title>reveal.js - Slide Transitions</title>
+
+ <link rel="stylesheet" href="../../css/reveal.css">
+ <link rel="stylesheet" href="../../css/theme/white.css" id="theme">
+ <style type="text/css" media="screen">
+ .slides section.has-dark-background,
+ .slides section.has-dark-background h3 {
+ color: #fff;
+ }
+ .slides section.has-light-background,
+ .slides section.has-light-background h3 {
+ color: #222;
+ }
+ </style>
+ </head>
+
+ <body>
+
+ <div class="reveal">
+
+ <div class="slides">
+
+ <section>
+ <h3>Default</h3>
+ </section>
+
+ <section>
+ <h3>Default</h3>
+ </section>
+
+ <section data-transition="zoom">
+ <h3>data-transition: zoom</h3>
+ </section>
+
+ <section data-transition="zoom-in fade-out">
+ <h3>data-transition: zoom-in fade-out</h3>
+ </section>
+
+ <section>
+ <h3>Default</h3>
+ </section>
+
+ <section data-transition="convex">
+ <h3>data-transition: convex</h3>
+ </section>
+
+ <section data-transition="convex-in concave-out">
+ <h3>data-transition: convex-in concave-out</h3>
+ </section>
+
+ <section>
+ <section data-transition="zoom">
+ <h3>Default</h3>
+ </section>
+ <section data-transition="concave">
+ <h3>data-transition: concave</h3>
+ </section>
+ <section data-transition="convex-in fade-out">
+ <h3>data-transition: convex-in fade-out</h3>
+ </section>
+ <section>
+ <h3>Default</h3>
+ </section>
+ </section>
+
+ <section data-transition="none">
+ <h3>data-transition: none</h3>
+ </section>
+
+ <section>
+ <h3>Default</h3>
+ </section>
+
+ </div>
+
+ </div>
+
+ <script src="../../lib/js/head.min.js"></script>
+ <script src="../../js/reveal.js"></script>
+
+ <script>
+
+ Reveal.initialize({
+ center: true,
+ history: true,
+
+ // transition: 'slide',
+ // transitionSpeed: 'slow',
+ // backgroundTransition: 'slide'
+ });
+
+ </script>
+
+ </body>
+</html>
diff --git a/test/test.html b/test/test.html
index 29d02a9..34cf832 100644
--- a/test/test.html
+++ b/test/test.html
@@ -22,6 +22,8 @@
<section data-background-image="examples/assets/image1.png">
<h1>1</h1>
<img data-src="fake-url.png">
+ <video data-src="fake-url.mp4"></video>
+ <audio data-src="fake-url.mp3"></audio>
</section>
<section>
@@ -52,6 +54,7 @@
<li class="fragment" data-fragment-index="0">4.1</li>
<li class="fragment" data-fragment-index="0">4.2</li>
</ul>
+ <iframe data-src="http://example.com"></iframe>
</section>
<section>
diff --git a/test/test.js b/test/test.js
index 3f93d3c..79ff81e 100644
--- a/test/test.js
+++ b/test/test.js
@@ -495,6 +495,23 @@ 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' );
+ 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' );
+ });
+
test( 'background images', function() {
var imageSource1 = Reveal.getSlide( 0 ).getAttribute( 'data-background-image' );
var imageSource2 = Reveal.getSlide( 1, 0 ).getAttribute( 'data-background' );