From 40a46e1c0c7836bdc26d25993a5c785be82e9973 Mon Sep 17 00:00:00 2001
From: Greg Denehy
Date: Sun, 30 Apr 2017 17:19:01 +0930
Subject: Added description of custom key binding API to readme

---
 README.md | 31 +++++++++++++++++++++++++++++++
 1 file changed, 31 insertions(+)

(limited to 'README.md')

diff --git a/README.md b/README.md
index c52a492..0455089 100644
--- a/README.md
+++ b/README.md
@@ -393,6 +393,37 @@ Reveal.isPaused();
 Reveal.isAutoSliding();
 ```
 
+### Custom Key Bindings
+
+Custom key bindings can be added and removed using the following Javascript API. Custom key bindings will override the default keyboard bindings, but will in turn be overridden by the user defined bindings in the ``keyboard`` config option.
+
+```javascript
+Reveal.addKeyBinding( binding, callback );
+Reveal.removeKeyBinding( keyCode );
+```
+
+For example
+
+```javascript
+// The binding parameter provides the following properties
+//      keyCode: the keycode for binding to the callback
+//          key: the key label to show in the help overlay
+//  description: the description of the action to show in the help overlay
+Reveal.addKeyBinding( { keyCode: 84, key: 'T', description: 'Start timer' }, function() {
+	// start timer
+} )
+
+// The binding parameter can also be a direct keycode without providing the help description
+Reveal.addKeyBinding( 82, function() {
+	// reset timer
+} )
+```
+
+This allows plugins to add key bindings directly to Reveal so they can
+
+* make use of Reveal's pre-processing logic for key handling (for example, ignoring key presses when paused); and
+* be included in the help overlay (optional)
+
 ### Slide Changed Event
 
 A 'slidechanged' event is fired each time the slide is changed (regardless of state). The event object holds the index values of the current slide as well as a reference to the previous and current slide HTML nodes.
-- 
cgit v1.2.3


From 260f28792644055998c7237cf879ec2a9ffe857e Mon Sep 17 00:00:00 2001
From: Dougal J. Sutherland
Date: Thu, 4 Jan 2018 20:09:01 +0000
Subject: optionally put the fragment in the URL

---
 README.md    |  4 ++++
 js/reveal.js | 32 +++++++++++++++++++++++++-------
 2 files changed, 29 insertions(+), 7 deletions(-)

(limited to 'README.md')

diff --git a/README.md b/README.md
index 9d71472..9a2d516 100644
--- a/README.md
+++ b/README.md
@@ -231,6 +231,10 @@ Reveal.initialize({
 	// Turns fragments on and off globally
 	fragments: true,
 
+	// Flags whether to include the current fragment in the URL,
+	// so that reloading brings you to the same fragment position
+	fragmentInURL: false,
+
 	// Flags if the presentation is running in an embedded mode,
 	// i.e. contained within a limited portion of the screen
 	embedded: false,
diff --git a/js/reveal.js b/js/reveal.js
index f125c55..8edf66a 100644
--- a/js/reveal.js
+++ b/js/reveal.js
@@ -102,6 +102,10 @@
 			// Turns fragments on and off globally
 			fragments: true,
 
+			// Flags whether to include the current fragment in the URL,
+			// so that reloading brings you to the same fragment position
+			fragmentInURL: false,
+
 			// Flags if the presentation is running in an embedded mode,
 			// i.e. contained within a limited portion of the screen
 			embedded: false,
@@ -3709,10 +3713,14 @@
 		else {
 			// Read the index components of the hash
 			var h = parseInt( bits[0], 10 ) || 0,
-				v = parseInt( bits[1], 10 ) || 0;
+				v = parseInt( bits[1], 10 ) || 0,
+				f;
+			if( config.fragmentInURL ) {
+				f = parseInt( bits[2], 10 ) || undefined;
+			}
 
-			if( h !== indexh || v !== indexv ) {
-				slide( h, v );
+			if( h !== indexh || v !== indexv || f !== undefined ) {
+				slide( h, v, f );
 			}
 		}
 
@@ -3745,14 +3753,21 @@
 					id = id.replace( /[^a-zA-Z0-9\-\_\:\.]/g, '' );
 				}
 
-				// If the current slide has an ID, use that as a named link
-				if( typeof id === 'string' && id.length ) {
+				var indexf;
+				if( config.fragmentInURL ) {
+					indexf = getIndices().f;
+				}
+
+				// If the current slide has an ID, use that as a named link,
+				// but we don't support named links with a fragment index
+				if( typeof id === 'string' && id.length && indexf === undefined ) {
 					url = '/' + id;
 				}
 				// Otherwise use the /h/v index
 				else {
-					if( indexh > 0 || indexv > 0 ) url += indexh;
-					if( indexv > 0 ) url += '/' + indexv;
+					if( indexh > 0 || indexv > 0 || indexf !== undefined ) url += indexh;
+					if( indexv > 0 || indexf !== undefined ) url += '/' + indexv;
+					if( indexf !== undefined ) url += '/' + indexf;
 				}
 
 				window.location.hash = url;
@@ -4089,6 +4104,9 @@
 
 				updateControls();
 				updateProgress();
+				if( config.fragmentInURL ) {
+					writeURL();
+				}
 
 				return !!( fragmentsShown.length || fragmentsHidden.length );
 
-- 
cgit v1.2.3


From de746bb64242820dc688b17f47935911ba7bfa86 Mon Sep 17 00:00:00 2001
From: Hakim El Hattab
Date: Thu, 25 Jan 2018 09:26:10 +0100
Subject: reorganize config options

---
 README.md    | 8 +++++---
 js/reveal.js | 5 +++++
 2 files changed, 10 insertions(+), 3 deletions(-)

(limited to 'README.md')

diff --git a/README.md b/README.md
index 94726ab..0c77d0e 100644
--- a/README.md
+++ b/README.md
@@ -198,9 +198,6 @@ Reveal.initialize({
 	// Display a presentation progress bar
 	progress: true,
 
-	// Set default timing of 2 minutes per slide
-	defaultTiming: 120,
-
 	// Display the page number of the current slide
 	slideNumber: false,
 
@@ -259,6 +256,11 @@ Reveal.initialize({
 	// Use this method for navigation when auto-sliding
 	autoSlideMethod: Reveal.navigateNext,
 
+	// Specify the average time in seconds that you think you will spend
+	// presenting each slide. This is used to show a pacing timer in the
+	// speaker view
+	defaultTiming: 120,
+
 	// Enable slide navigation via mouse wheel
 	mouseWheel: false,
 
diff --git a/js/reveal.js b/js/reveal.js
index 0120f31..c9fa9f1 100644
--- a/js/reveal.js
+++ b/js/reveal.js
@@ -135,6 +135,11 @@
 			// Use this method for navigation when auto-sliding (defaults to navigateNext)
 			autoSlideMethod: null,
 
+			// Specify the average time in seconds that you think you will spend
+			// presenting each slide. This is used to show a pacing timer in the
+			// speaker view
+			defaultTiming: null,
+
 			// Enable slide navigation via mouse wheel
 			mouseWheel: false,
 
-- 
cgit v1.2.3


From 8ff5fe4986a8f83a660c0f28a14e3542d986c884 Mon Sep 17 00:00:00 2001
From: craigsdennis
Date: Fri, 16 Mar 2018 22:41:16 -0700
Subject: Updates copyright to 2018

---
 Gruntfile.js    | 4 ++--
 LICENSE         | 2 +-
 README.md       | 2 +-
 css/reveal.css  | 2 +-
 css/reveal.scss | 2 +-
 js/reveal.js    | 4 ++--
 6 files changed, 8 insertions(+), 8 deletions(-)

(limited to 'README.md')

diff --git a/Gruntfile.js b/Gruntfile.js
index ff7da2d..fc38abb 100644
--- a/Gruntfile.js
+++ b/Gruntfile.js
@@ -15,7 +15,7 @@ module.exports = function(grunt) {
 				' * http://revealjs.com\n' +
 				' * MIT licensed\n' +
 				' *\n' +
-				' * Copyright (C) 2017 Hakim El Hattab, http://hakim.se\n' +
+				' * Copyright (C) 2018 Hakim El Hattab, http://hakim.se\n' +
 				' */'
 		},
 
@@ -164,7 +164,7 @@ module.exports = function(grunt) {
 	grunt.loadNpmTasks( 'grunt-retire' );
 	grunt.loadNpmTasks( 'grunt-sass' );
 	grunt.loadNpmTasks( 'grunt-zip' );
-	
+
 	// Default task
 	grunt.registerTask( 'default', [ 'css', 'js' ] );
 
diff --git a/LICENSE b/LICENSE
index c3e6e5f..1b8b5a7 100644
--- a/LICENSE
+++ b/LICENSE
@@ -1,4 +1,4 @@
-Copyright (C) 2017 Hakim El Hattab, http://hakim.se, and reveal.js contributors
+Copyright (C) 2018 Hakim El Hattab, http://hakim.se, and reveal.js contributors
 
 Permission is hereby granted, free of charge, to any person obtaining a copy
 of this software and associated documentation files (the "Software"), to deal
diff --git a/README.md b/README.md
index ad7d539..b7bbafc 100644
--- a/README.md
+++ b/README.md
@@ -1280,4 +1280,4 @@ Some reveal.js features, like external Markdown and speaker notes, require that
 
 MIT licensed
 
-Copyright (C) 2017 Hakim El Hattab, http://hakim.se
+Copyright (C) 2018 Hakim El Hattab, http://hakim.se
diff --git a/css/reveal.css b/css/reveal.css
index 3392753..d79024c 100644
--- a/css/reveal.css
+++ b/css/reveal.css
@@ -3,7 +3,7 @@
  * http://revealjs.com
  * MIT licensed
  *
- * Copyright (C) 2017 Hakim El Hattab, http://hakim.se
+ * Copyright (C) 2018 Hakim El Hattab, http://hakim.se
  */
 /*********************************************
  * RESET STYLES
diff --git a/css/reveal.scss b/css/reveal.scss
index 1a87624..6fb5419 100644
--- a/css/reveal.scss
+++ b/css/reveal.scss
@@ -3,7 +3,7 @@
  * http://revealjs.com
  * MIT licensed
  *
- * Copyright (C) 2017 Hakim El Hattab, http://hakim.se
+ * Copyright (C) 2018 Hakim El Hattab, http://hakim.se
  */
 
 
diff --git a/js/reveal.js b/js/reveal.js
index dcd09c7..e246db7 100644
--- a/js/reveal.js
+++ b/js/reveal.js
@@ -3,7 +3,7 @@
  * http://revealjs.com
  * MIT licensed
  *
- * Copyright (C) 2017 Hakim El Hattab, http://hakim.se
+ * Copyright (C) 2018 Hakim El Hattab, http://hakim.se
  */
 (function( root, factory ) {
 	if( typeof define === 'function' && define.amd ) {
@@ -300,7 +300,7 @@
 			'F':					'Fullscreen',
 			'ESC, O':				'Slide overview'
 		},
-		
+
 		// Holds custom key code mappings
 		registeredKeyBindings = {};
 
-- 
cgit v1.2.3


From 4ba0d733458408ee666163792c0dc13ebec41ac4 Mon Sep 17 00:00:00 2001
From: Hakim El Hattab
Date: Fri, 27 Apr 2018 15:53:02 +0200
Subject: add , adds wrapper element around background images/videos/iframes

---
 README.md       | 26 ++++++++++++++------------
 css/reveal.css  |  9 +++++++--
 css/reveal.scss | 11 +++++++++--
 js/reveal.js    | 34 +++++++++++++++++++++++-----------
 test/test.js    |  8 ++++----
 5 files changed, 57 insertions(+), 31 deletions(-)

(limited to 'README.md')

diff --git a/README.md b/README.md
index b7bbafc..9694d52 100644
--- a/README.md
+++ b/README.md
@@ -624,12 +624,13 @@ All CSS color formats are supported, like rgba() or hsl().
 #### Image Backgrounds
 By default, background images are resized to cover the full page. Available options:
 
-| Attribute                    | Default    | Description |
-| :--------------------------- | :--------- | :---------- |
-| data-background-image        |            | URL of the image to show. GIFs restart when the slide opens. |
-| data-background-size         | cover      | See [background-size](https://developer.mozilla.org/docs/Web/CSS/background-size) on MDN.  |
-| data-background-position     | center     | See [background-position](https://developer.mozilla.org/docs/Web/CSS/background-position) on MDN. |
-| data-background-repeat       | no-repeat  | See [background-repeat](https://developer.mozilla.org/docs/Web/CSS/background-repeat) on MDN. |
+| Attribute                        | Default    | Description |
+| :------------------------------- | :--------- | :---------- |
+| data-background-image            |            | URL of the image to show. GIFs restart when the slide opens. |
+| data-background-size             | cover      | See [background-size](https://developer.mozilla.org/docs/Web/CSS/background-size) on MDN.  |
+| data-background-position         | center     | See [background-position](https://developer.mozilla.org/docs/Web/CSS/background-position) on MDN. |
+| data-background-repeat           | no-repeat  | See [background-repeat](https://developer.mozilla.org/docs/Web/CSS/background-repeat) on MDN. |
+| data-background-content-opacity  | 1          | Opacity of the background image on a 0-1 scale. 0 is transparent and 1 is fully opaque. |
 ```html
 <section data-background-image="http://example.com/image.png">
 	<h2>Image</h2>
@@ -642,12 +643,13 @@ By default, background images are resized to cover the full page. Available opti
 #### Video Backgrounds
 Automatically plays a full size video behind the slide.
 
-| Attribute                    | Default | Description |
-| :--------------------------- | :------ | :---------- |
-| data-background-video        |         | A single video source, or a comma separated list of video sources. |
-| data-background-video-loop   | false   | Flags if the video should play repeatedly. |
-| data-background-video-muted  | false   | Flags if the audio should be muted. |
-| data-background-size         | cover   | Use `cover` for full screen and some cropping or `contain` for letterboxing. |
+| Attribute                        | Default | Description |
+| :---------------------------     | :------ | :---------- |
+| data-background-video            |         | A single video source, or a comma separated list of video sources. |
+| data-background-video-loop       | false   | Flags if the video should play repeatedly. |
+| data-background-video-muted      | false   | Flags if the audio should be muted. |
+| data-background-size             | cover   | Use `cover` for full screen and some cropping or `contain` for letterboxing. |
+| data-background-content-opacity  | 1       | Opacity of the background video on a 0-1 scale. 0 is transparent and 1 is fully opaque. |
 
 ```html
 <section data-background-video="https://s3.amazonaws.com/static.slid.es/site/homepage/v1/homepage-video-editor.mp4,https://s3.amazonaws.com/static.slid.es/site/homepage/v1/homepage-video-editor.webm" data-background-video-loop data-background-video-muted>
diff --git a/css/reveal.css b/css/reveal.css
index 05c2e8d..ac095f4 100644
--- a/css/reveal.css
+++ b/css/reveal.css
@@ -1015,10 +1015,15 @@ body {
   visibility: hidden;
   overflow: hidden;
   background-color: transparent;
+  transition: all 800ms cubic-bezier(0.26, 0.86, 0.44, 0.985); }
+
+.reveal .slide-background-content {
+  position: absolute;
+  width: 100%;
+  height: 100%;
   background-position: 50% 50%;
   background-repeat: no-repeat;
-  background-size: cover;
-  transition: all 800ms cubic-bezier(0.26, 0.86, 0.44, 0.985); }
+  background-size: cover; }
 
 .reveal .slide-background.stack {
   display: block; }
diff --git a/css/reveal.scss b/css/reveal.scss
index 065a0a1..efb4114 100644
--- a/css/reveal.scss
+++ b/css/reveal.scss
@@ -1091,11 +1091,18 @@ $controlsArrowAngleActive: 36deg;
 		overflow: hidden;
 
 		background-color: rgba( 0, 0, 0, 0 );
+
+		transition: all 800ms cubic-bezier(0.260, 0.860, 0.440, 0.985);
+	}
+
+	.reveal .slide-background-content {
+		position: absolute;
+		width: 100%;
+		height: 100%;
+
 		background-position: 50% 50%;
 		background-repeat: no-repeat;
 		background-size: cover;
-
-		transition: all 800ms cubic-bezier(0.260, 0.860, 0.440, 0.985);
 	}
 
 	.reveal .slide-background.stack {
diff --git a/js/reveal.js b/js/reveal.js
index ebdeb9f..ae1c4ae 100644
--- a/js/reveal.js
+++ b/js/reveal.js
@@ -933,14 +933,18 @@
 			backgroundColor: slide.getAttribute( 'data-background-color' ),
 			backgroundRepeat: slide.getAttribute( 'data-background-repeat' ),
 			backgroundPosition: slide.getAttribute( 'data-background-position' ),
-			backgroundTransition: slide.getAttribute( 'data-background-transition' )
+			backgroundTransition: slide.getAttribute( 'data-background-transition' ),
+			backgroundContentOpacity: slide.getAttribute( 'data-background-content-opacity' )
 		};
 
+		// Main slide background element
 		var element = document.createElement( 'div' );
-
-		// Carry over custom classes from the slide to the background
 		element.className = 'slide-background ' + slide.className.replace( /present|past|future/, '' );
 
+		// Inner background element that wraps images/videos/iframes
+		var contentElement = document.createElement( 'div' );
+		contentElement.className = 'slide-background-content';
+
 		if( data.background ) {
 			// Auto-wrap image urls in url(...)
 			if( /^(http|file|\/\/)/gi.test( data.background ) || /\.(svg|png|jpg|jpeg|gif|bmp)([?#\s]|$)/gi.test( data.background ) ) {
@@ -963,17 +967,22 @@
 															data.backgroundColor +
 															data.backgroundRepeat +
 															data.backgroundPosition +
-															data.backgroundTransition );
+															data.backgroundTransition +
+															data.backgroundContentOpacity );
 		}
 
 		// Additional and optional background properties
-		if( data.backgroundSize ) element.style.backgroundSize = data.backgroundSize;
 		if( data.backgroundSize ) element.setAttribute( 'data-background-size', data.backgroundSize );
 		if( data.backgroundColor ) element.style.backgroundColor = data.backgroundColor;
-		if( data.backgroundRepeat ) element.style.backgroundRepeat = data.backgroundRepeat;
-		if( data.backgroundPosition ) element.style.backgroundPosition = data.backgroundPosition;
 		if( data.backgroundTransition ) element.setAttribute( 'data-background-transition', data.backgroundTransition );
 
+		// 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;
+		if( data.backgroundPosition ) contentElement.style.backgroundPosition = data.backgroundPosition;
+		if( data.backgroundContentOpacity ) contentElement.style.opacity = data.backgroundContentOpacity;
+
+		element.appendChild( contentElement );
 		container.appendChild( element );
 
 		// If backgrounds are being recreated, clear old classes
@@ -981,6 +990,7 @@
 		slide.classList.remove( 'has-light-background' );
 
 		slide.slideBackgroundElement = element;
+		slide.slideBackgroundContentElement = contentElement;
 
 		// If this slide has a background color, add a class that
 		// signals if it is light or dark. If the slide has no background
@@ -3311,10 +3321,12 @@
 
 
 		// Show the corresponding background element
-		var background = getSlideBackground( slide );
+		var background = slide.slideBackgroundElement;
 		if( background ) {
 			background.style.display = 'block';
 
+			var backgroundContent = slide.slideBackgroundContentElement;
+
 			// If the background contains media, load it
 			if( background.hasAttribute( 'data-loaded' ) === false ) {
 				background.setAttribute( 'data-loaded', 'true' );
@@ -3327,7 +3339,7 @@
 
 				// Images
 				if( backgroundImage ) {
-					background.style.backgroundImage = 'url('+ encodeURI( backgroundImage ) +')';
+					backgroundContent.style.backgroundImage = 'url('+ encodeURI( backgroundImage ) +')';
 				}
 				// Videos
 				else if ( backgroundVideo && !isSpeakerNotes() ) {
@@ -3355,7 +3367,7 @@
 						video.innerHTML += '<source src="'+ source +'">';
 					} );
 
-					background.appendChild( video );
+					backgroundContent.appendChild( video );
 				}
 				// Iframes
 				else if( backgroundIframe && options.excludeIframes !== true ) {
@@ -3378,7 +3390,7 @@
 					iframe.style.maxHeight = '100%';
 					iframe.style.maxWidth = '100%';
 
-					background.appendChild( iframe );
+					backgroundContent.appendChild( iframe );
 				}
 			}
 
diff --git a/test/test.js b/test/test.js
index 042e4e8..f8515a0 100644
--- a/test/test.js
+++ b/test/test.js
@@ -130,8 +130,8 @@ Reveal.addEventListener( 'ready', function() {
 	QUnit.test( 'Reveal.getSlideBackground', function( assert ) {
 		assert.equal( Reveal.getSlideBackground( 0 ), document.querySelector( '.reveal .backgrounds>.slide-background:first-child' ), 'gets correct first background' );
 		assert.equal( Reveal.getSlideBackground( 1 ), document.querySelector( '.reveal .backgrounds>.slide-background:nth-child(2)' ), 'no v index returns stack' );
-		assert.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' );
-		assert.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' );
+		assert.equal( Reveal.getSlideBackground( 1, 0 ), document.querySelector( '.reveal .backgrounds>.slide-background:nth-child(2) .slide-background:nth-child(2)' ), 'v index 0 returns first vertical child' );
+		assert.equal( Reveal.getSlideBackground( 1, 1 ), document.querySelector( '.reveal .backgrounds>.slide-background:nth-child(2) .slide-background:nth-child(3)' ), 'v index 1 returns second vertical child' );
 
 		assert.strictEqual( Reveal.getSlideBackground( 100 ), undefined, 'undefined when out of horizontal bounds' );
 		assert.strictEqual( Reveal.getSlideBackground( 1, 100 ), undefined, 'undefined when out of vertical bounds' );
@@ -523,8 +523,8 @@ Reveal.addEventListener( 'ready', function() {
 		var imageSource2 = Reveal.getSlide( 1, 0 ).getAttribute( 'data-background' );
 
 		// check that the images are applied to the background elements
-		assert.ok( Reveal.getSlideBackground( 0 ).style.backgroundImage.indexOf( imageSource1 ) !== -1, 'data-background-image worked' );
-		assert.ok( Reveal.getSlideBackground( 1, 0 ).style.backgroundImage.indexOf( imageSource2 ) !== -1, 'data-background worked' );
+		assert.ok( Reveal.getSlideBackground( 0 ).querySelector( '.slide-background-content' ).style.backgroundImage.indexOf( imageSource1 ) !== -1, 'data-background-image worked' );
+		assert.ok( Reveal.getSlideBackground( 1, 0 ).querySelector( '.slide-background-content' ).style.backgroundImage.indexOf( imageSource2 ) !== -1, 'data-background worked' );
 	});
 
 
-- 
cgit v1.2.3


From 042fbde61baa76d2b6241c0ef3c7579b28f6e8c0 Mon Sep 17 00:00:00 2001
From: Hakim El Hattab
Date: Thu, 3 May 2018 11:02:36 +0200
Subject: data-background-content-opacity -> data-background-opacity

---
 README.md    | 4 ++--
 js/reveal.js | 6 +++---
 2 files changed, 5 insertions(+), 5 deletions(-)

(limited to 'README.md')

diff --git a/README.md b/README.md
index 9694d52..9d094a1 100644
--- a/README.md
+++ b/README.md
@@ -630,7 +630,7 @@ By default, background images are resized to cover the full page. Available opti
 | data-background-size             | cover      | See [background-size](https://developer.mozilla.org/docs/Web/CSS/background-size) on MDN.  |
 | data-background-position         | center     | See [background-position](https://developer.mozilla.org/docs/Web/CSS/background-position) on MDN. |
 | data-background-repeat           | no-repeat  | See [background-repeat](https://developer.mozilla.org/docs/Web/CSS/background-repeat) on MDN. |
-| data-background-content-opacity  | 1          | Opacity of the background image on a 0-1 scale. 0 is transparent and 1 is fully opaque. |
+| data-background-opacity          | 1          | Opacity of the background image on a 0-1 scale. 0 is transparent and 1 is fully opaque. |
 ```html
 <section data-background-image="http://example.com/image.png">
 	<h2>Image</h2>
@@ -649,7 +649,7 @@ Automatically plays a full size video behind the slide.
 | data-background-video-loop       | false   | Flags if the video should play repeatedly. |
 | data-background-video-muted      | false   | Flags if the audio should be muted. |
 | data-background-size             | cover   | Use `cover` for full screen and some cropping or `contain` for letterboxing. |
-| data-background-content-opacity  | 1       | Opacity of the background video on a 0-1 scale. 0 is transparent and 1 is fully opaque. |
+| data-background-opacity          | 1       | Opacity of the background video on a 0-1 scale. 0 is transparent and 1 is fully opaque. |
 
 ```html
 <section data-background-video="https://s3.amazonaws.com/static.slid.es/site/homepage/v1/homepage-video-editor.mp4,https://s3.amazonaws.com/static.slid.es/site/homepage/v1/homepage-video-editor.webm" data-background-video-loop data-background-video-muted>
diff --git a/js/reveal.js b/js/reveal.js
index ae1c4ae..e3bbb23 100644
--- a/js/reveal.js
+++ b/js/reveal.js
@@ -934,7 +934,7 @@
 			backgroundRepeat: slide.getAttribute( 'data-background-repeat' ),
 			backgroundPosition: slide.getAttribute( 'data-background-position' ),
 			backgroundTransition: slide.getAttribute( 'data-background-transition' ),
-			backgroundContentOpacity: slide.getAttribute( 'data-background-content-opacity' )
+			backgroundOpacity: slide.getAttribute( 'data-background-opacity' )
 		};
 
 		// Main slide background element
@@ -968,7 +968,7 @@
 															data.backgroundRepeat +
 															data.backgroundPosition +
 															data.backgroundTransition +
-															data.backgroundContentOpacity );
+															data.backgroundOpacity );
 		}
 
 		// Additional and optional background properties
@@ -980,7 +980,7 @@
 		if( data.backgroundSize ) contentElement.style.backgroundSize = data.backgroundSize;
 		if( data.backgroundRepeat ) contentElement.style.backgroundRepeat = data.backgroundRepeat;
 		if( data.backgroundPosition ) contentElement.style.backgroundPosition = data.backgroundPosition;
-		if( data.backgroundContentOpacity ) contentElement.style.opacity = data.backgroundContentOpacity;
+		if( data.backgroundOpacity ) contentElement.style.opacity = data.backgroundOpacity;
 
 		element.appendChild( contentElement );
 		container.appendChild( element );
-- 
cgit v1.2.3


From 4bea8e17e8a6dd1580286aa3b0b927e0aebae75b Mon Sep 17 00:00:00 2001
From: Hakim El Hattab
Date: Mon, 11 Jun 2018 10:59:31 +0200
Subject: add 'fade-in-then-half-out' fragment style, 'current-visible' was
 renamed to 'fade-in-then-out'

---
 README.md       |  3 ++-
 css/reveal.css  | 12 ++++++++++++
 css/reveal.scss | 16 ++++++++++++++++
 demo.html       | 10 ++++++++--
 4 files changed, 38 insertions(+), 3 deletions(-)

(limited to 'README.md')

diff --git a/README.md b/README.md
index 9d094a1..dfe6f35 100644
--- a/README.md
+++ b/README.md
@@ -761,7 +761,8 @@ The default fragment style is to start out invisible and fade in. This style can
 	<p class="fragment shrink">shrink</p>
 	<p class="fragment fade-out">fade-out</p>
 	<p class="fragment fade-up">fade-up (also down, left and right!)</p>
-	<p class="fragment current-visible">visible only once</p>
+	<p class="fragment fade-in-then-out">fades in, then out when we move to the next step</p>
+	<p class="fragment fade-in-then-half-out">fades in, then 50% out when we move to the next step</p>
 	<p class="fragment highlight-current-blue">blue only once</p>
 	<p class="fragment highlight-red">highlight-red</p>
 	<p class="fragment highlight-green">highlight-green</p>
diff --git a/css/reveal.css b/css/reveal.css
index ac095f4..04b704d 100644
--- a/css/reveal.css
+++ b/css/reveal.css
@@ -127,13 +127,25 @@ body {
     -webkit-transform: translate(0, 0);
             transform: translate(0, 0); }
 
+.reveal .slides section .fragment.fade-in-then-out,
 .reveal .slides section .fragment.current-visible {
   opacity: 0;
   visibility: hidden; }
+  .reveal .slides section .fragment.fade-in-then-out.current-fragment,
   .reveal .slides section .fragment.current-visible.current-fragment {
     opacity: 1;
     visibility: inherit; }
 
+.reveal .slides section .fragment.fade-in-then-half-out {
+  opacity: 0;
+  visibility: hidden; }
+  .reveal .slides section .fragment.fade-in-then-half-out.visible {
+    opacity: 0.5;
+    visibility: inherit; }
+  .reveal .slides section .fragment.fade-in-then-half-out.current-fragment {
+    opacity: 1;
+    visibility: inherit; }
+
 .reveal .slides section .fragment.highlight-red,
 .reveal .slides section .fragment.highlight-current-red,
 .reveal .slides section .fragment.highlight-green,
diff --git a/css/reveal.scss b/css/reveal.scss
index efb4114..7e2701b 100644
--- a/css/reveal.scss
+++ b/css/reveal.scss
@@ -160,6 +160,7 @@ body {
 	}
 }
 
+.reveal .slides section .fragment.fade-in-then-out,
 .reveal .slides section .fragment.current-visible {
 	opacity: 0;
 	visibility: hidden;
@@ -170,6 +171,21 @@ body {
 	}
 }
 
+.reveal .slides section .fragment.fade-in-then-half-out {
+	opacity: 0;
+	visibility: hidden;
+
+	&.visible {
+		opacity: 0.5;
+		visibility: inherit;
+	}
+
+	&.current-fragment {
+		opacity: 1;
+		visibility: inherit;
+	}
+}
+
 .reveal .slides section .fragment.highlight-red,
 .reveal .slides section .fragment.highlight-current-red,
 .reveal .slides section .fragment.highlight-green,
diff --git a/demo.html b/demo.html
index 505bb18..df87fb2 100644
--- a/demo.html
+++ b/demo.html
@@ -139,8 +139,14 @@
 						<p class="fragment grow">grow</p>
 						<p class="fragment shrink">shrink</p>
 						<p class="fragment fade-out">fade-out</p>
-						<p class="fragment fade-up">fade-up (also down, left and right!)</p>
-						<p class="fragment current-visible">current-visible</p>
+						<p>
+							<span style="display: inline-block;" class="fragment fade-right">fade-right, </span>
+							<span style="display: inline-block;" class="fragment fade-up">up, </span>
+							<span style="display: inline-block;" class="fragment fade-down">down, </span>
+							<span style="display: inline-block;" class="fragment fade-left">left</span>
+						</p>
+						<p class="fragment fade-in-then-out">fade-in-then-out</p>
+						<p class="fragment fade-in-then-half-out">fade-in-then-half-out</p>
 						<p>Highlight <span class="fragment highlight-red">red</span> <span class="fragment highlight-blue">blue</span> <span class="fragment highlight-green">green</span></p>
 					</section>
 				</section>
-- 
cgit v1.2.3


From 3680f1ad10d1cbb4a48eb98673fa7018d1ab36e5 Mon Sep 17 00:00:00 2001
From: Hakim El Hattab
Date: Mon, 11 Jun 2018 12:35:11 +0200
Subject: merge #1955 with minor changes

---
 Gruntfile.js |  1 +
 README.md    |  5 +++++
 js/reveal.js | 27 +++++++++++++++++++--------
 3 files changed, 25 insertions(+), 8 deletions(-)

(limited to 'README.md')

diff --git a/Gruntfile.js b/Gruntfile.js
index fc38abb..8d8300b 100644
--- a/Gruntfile.js
+++ b/Gruntfile.js
@@ -78,6 +78,7 @@ module.exports = function(grunt) {
 				eqnull: true,
 				browser: true,
 				expr: true,
+				loopfunc: true,
 				globals: {
 					head: false,
 					module: false,
diff --git a/README.md b/README.md
index 9c7b3d8..7a570d5 100644
--- a/README.md
+++ b/README.md
@@ -947,6 +947,11 @@ Reveal.initialize({
 Presentations can be exported to PDF via a special print stylesheet. This feature requires that you use [Google Chrome](http://google.com/chrome) or [Chromium](https://www.chromium.org/Home) and to be serving the presentation from a webserver.
 Here's an example of an exported presentation that's been uploaded to SlideShare: http://www.slideshare.net/hakimel/revealjs-300.
 
+### Separate pages for fragments
+[Fragments](#fragments) are printed on separate slides by default. Meaning if you have a slide with three fragment steps, it will generate three separate slides where the fragments appear incrementally.
+
+If you prefer printing all fragments in their visible states on the same slide you can set the `pdfSeparateFragments` config option to false.
+
 ### Page size
 
 Export dimensions are inferred from the configured [presentation size](#presentation-size). Slides that are too tall to fit within a single page will expand onto multiple pages. You can limit how many pages a slide may expand onto using the `pdfMaxPagesPerSlide` config option, for example `Reveal.configure({ pdfMaxPagesPerSlide: 1 })` ensures that no slide ever grows to more than one printed page.
diff --git a/js/reveal.js b/js/reveal.js
index 926b1d9..921b633 100644
--- a/js/reveal.js
+++ b/js/reveal.js
@@ -204,6 +204,9 @@
 			// to PDF, unlimited by default
 			pdfMaxPagesPerSlide: Number.POSITIVE_INFINITY,
 
+			// Prints each fragment on a separate slide
+			pdfSeparateFragments: true,
+
 			// Offset used to reduce the height of content within exported PDF pages.
 			// This exists to account for environment differences based on how you
 			// print to PDF. CLI printing options, like phantomjs and wkpdf, can end
@@ -789,29 +792,38 @@
 				}
 
 				// Copy page and show fragments one after another
-				if ( isPrintingPDFFragments() ) {
+				if( config.pdfSeparateFragments ) {
 
 					var numberOfFragments = toArray( page.querySelectorAll( '.fragment' ) ).length;
 
-					for ( var currentFragment = 0; currentFragment < numberOfFragments; currentFragment++ ) {
+					for( var currentFragment = 0; currentFragment < numberOfFragments; currentFragment++ ) {
+
 						var clonedPage = page.cloneNode( true );
 						page.parentNode.insertBefore( clonedPage, page.nextSibling );
 
-						toArray( sortFragments( clonedPage.querySelectorAll( '.fragment' ))).forEach( function ( fragment, fragmentIndex ) {
-							if ( fragmentIndex <= currentFragment ) {
+						toArray( sortFragments( clonedPage.querySelectorAll( '.fragment' ) ) ).forEach( function( fragment, fragmentIndex ) {
+
+							if( fragmentIndex < currentFragment ) {
 								fragment.classList.add( 'visible' );
-							} else {
-								fragment.classList.remove( 'visible' );
+								fragment.classList.remove( 'current-fragment' );
+							}
+							else if( fragmentIndex === currentFragment ) {
+								fragment.classList.add( 'visible', 'current-fragment' );
 							}
+							else {
+								fragment.classList.remove( 'visible', 'current-fragment' );
+							}
+
 						} );
 
 						page = clonedPage;
+
 					}
 
 				}
 				// Show all fragments
 				else {
-					toArray( page.querySelectorAll( '.fragment' ) ).forEach( function( fragment ) {
+					toArray( page.querySelectorAll( '.fragment:not(.fade-out)' ) ).forEach( function( fragment ) {
 						fragment.classList.add( 'visible' );
 					} );
 				}
@@ -820,7 +832,6 @@
 
 		} );
 
-
 		// Notify subscribers that the PDF layout is good to go
 		dispatchEvent( 'pdf-ready' );
 
-- 
cgit v1.2.3


From be87adcdf8227fce0152e575c240d774408c38a3 Mon Sep 17 00:00:00 2001
From: Hakim El Hattab
Date: Wed, 13 Jun 2018 14:12:25 +0200
Subject: rename new fragment style

---
 README.md       | 2 +-
 css/reveal.css  | 6 +++---
 css/reveal.scss | 2 +-
 demo.html       | 2 +-
 4 files changed, 6 insertions(+), 6 deletions(-)

(limited to 'README.md')

diff --git a/README.md b/README.md
index 7a570d5..8db54c8 100644
--- a/README.md
+++ b/README.md
@@ -768,7 +768,7 @@ The default fragment style is to start out invisible and fade in. This style can
 	<p class="fragment fade-out">fade-out</p>
 	<p class="fragment fade-up">fade-up (also down, left and right!)</p>
 	<p class="fragment fade-in-then-out">fades in, then out when we move to the next step</p>
-	<p class="fragment fade-in-then-half-out">fades in, then 50% out when we move to the next step</p>
+	<p class="fragment fade-in-then-semi-out">fades in, then obfuscate when we move to the next step</p>
 	<p class="fragment highlight-current-blue">blue only once</p>
 	<p class="fragment highlight-red">highlight-red</p>
 	<p class="fragment highlight-green">highlight-green</p>
diff --git a/css/reveal.css b/css/reveal.css
index 04b704d..d937704 100644
--- a/css/reveal.css
+++ b/css/reveal.css
@@ -136,13 +136,13 @@ body {
     opacity: 1;
     visibility: inherit; }
 
-.reveal .slides section .fragment.fade-in-then-half-out {
+.reveal .slides section .fragment.fade-in-then-semi-out {
   opacity: 0;
   visibility: hidden; }
-  .reveal .slides section .fragment.fade-in-then-half-out.visible {
+  .reveal .slides section .fragment.fade-in-then-semi-out.visible {
     opacity: 0.5;
     visibility: inherit; }
-  .reveal .slides section .fragment.fade-in-then-half-out.current-fragment {
+  .reveal .slides section .fragment.fade-in-then-semi-out.current-fragment {
     opacity: 1;
     visibility: inherit; }
 
diff --git a/css/reveal.scss b/css/reveal.scss
index 7e2701b..80798d3 100644
--- a/css/reveal.scss
+++ b/css/reveal.scss
@@ -171,7 +171,7 @@ body {
 	}
 }
 
-.reveal .slides section .fragment.fade-in-then-half-out {
+.reveal .slides section .fragment.fade-in-then-semi-out {
 	opacity: 0;
 	visibility: hidden;
 
diff --git a/demo.html b/demo.html
index df87fb2..8aa4aba 100644
--- a/demo.html
+++ b/demo.html
@@ -146,7 +146,7 @@
 							<span style="display: inline-block;" class="fragment fade-left">left</span>
 						</p>
 						<p class="fragment fade-in-then-out">fade-in-then-out</p>
-						<p class="fragment fade-in-then-half-out">fade-in-then-half-out</p>
+						<p class="fragment fade-in-then-semi-out">fade-in-then-semi-out</p>
 						<p>Highlight <span class="fragment highlight-red">red</span> <span class="fragment highlight-blue">blue</span> <span class="fragment highlight-green">green</span></p>
 					</section>
 				</section>
-- 
cgit v1.2.3