4.0.2

Add link for README badge

.npmignore

@@ -4,4 +4,6 @@
 /js
 .github
 .gulpfile
-.sass-cache
+.sass-cache
+gulpfile.js
+CONTRIBUTING.md

README.md

@@ -1,8 +1,10 @@
 <p align="center">
+  <a href="https://revealjs.com">
   <img src="https://hakim-static.s3.amazonaws.com/reveal-js/logo/v1/reveal-black-text.svg" alt="reveal.js" width="450">
+  </a>
   <br><br>
-  <img src="https://github.com/hakimel/reveal.js/workflows/tests/badge.svg">
-  <img src="https://s3.amazonaws.com/static.slid.es/images/slides-github-banner-320x40.png?1" alt="Slides" width="160" height="20"></a>
+  <a href="https://github.com/hakimel/reveal.js/actions"><img src="https://github.com/hakimel/reveal.js/workflows/tests/badge.svg"></a>
+  <a href="https://slides.com/"><img src="https://s3.amazonaws.com/static.slid.es/images/slides-github-banner-320x40.png?1" alt="Slides" width="160" height="20"></a>
 </p>
 
 reveal.js is an open source HTML presentation framework. It enables anyone with a web browser to create fully featured and beautiful presentations for free. [Check out the live demo](https://revealjs.com/).
@@ -16,6 +18,9 @@ The framework comes with a broad range of features including [nested slides](htt
 ## Documentation
 The full reveal.js documentation is available at [revealjs.com](https://revealjs.com).
 
+## Online Editor
+Want to create your presentation using a visual editor? Try the official reveal.js presentation platform for free at [Slides.com](https://slides.com). It's made by the same people behind reveal.js.
+
 ## License
 
 MIT licensed

css/layout.scss

@@ -34,16 +34,24 @@
 
 .reveal .r-vstack {
 	flex-direction: column;
+	align-items: center;
+	justify-content: center;
 }
 
 .reveal .r-hstack {
 	flex-direction: row;
-}
-
-.reveal .items-center {
 	align-items: center;
+	justify-content: center;
 }
 
-.reveal .justify-center {
-	justify-content: center;
-}
+// Naming based on tailwindcss
+.reveal .items-stretch { align-items: stretch; }
+.reveal .items-start { align-items: flex-start; }
+.reveal .items-center { align-items: center; }
+.reveal .items-end { align-items: flex-end; }
+
+.reveal .justify-between { justify-content: space-between; }
+.reveal .justify-around { justify-content: space-around; }
+.reveal .justify-start { justify-content: flex-start; }
+.reveal .justify-center { justify-content: center; }
+.reveal .justify-end { justify-content: flex-end; }

css/print/pdf.scss

@@ -30,30 +30,15 @@ html.print-pdf {
 	.reveal .progress,
 	.reveal .playback,
 	.reveal.overview,
-	.fork-reveal,
-	.share-reveal,
 	.state-background {
 		display: none !important;
 	}
 
-	h1, h2, h3, h4, h5, h6 {
-		text-shadow: 0 0 0 #000 !important;
-	}
-
 	.reveal pre code {
 		overflow: hidden !important;
 		font-family: Courier, 'Courier New', monospace !important;
 	}
 
-	ul, ol, div, p {
-		visibility: visible;
-		position: static;
-		width: auto;
-		height: auto;
-		display: block;
-		overflow: visible;
-		margin: auto;
-	}
 	.reveal {
 		width: auto !important;
 		height: auto !important;
@@ -115,12 +100,11 @@ html.print-pdf {
 		box-shadow: none;
 	}
 
-	.reveal .roll {
-		overflow: visible;
-		line-height: 1em;
-	}
 
 	/* Slide backgrounds are placed inside of their slide when exporting to PDF */
+	.reveal .backgrounds {
+		display: none;
+	}
 	.reveal .slide-background {
 		display: block !important;
 		position: absolute;

css/reveal.scss

@@ -1396,7 +1396,7 @@ $controlsArrowAngleActive: 36deg;
 }
 
 .reveal.rtl .progress span {
-	float: right
+	transform-origin: 100% 0;
 }
 
 /*********************************************

demo.html

@@ -29,7 +29,9 @@
 			<!-- Any section element inside of this container is displayed as a slide -->
 			<div class="slides">
 				<section>
-					<h1>Reveal.js</h1>
+					<a href="https://revealjs.com">
+						<img src="https://static.slid.es/reveal/logo-v1/reveal-white-text.svg" alt="reveal.js logo" style="height: 180px; margin: 0 auto 4rem auto; background: transparent;" class="demo-logo">
+					</a>
 					<h3>The HTML Presentation Framework</h3>
 					<p>
 						<small>Created by <a href="http://hakim.se">Hakim El Hattab</a> and <a href="https://github.com/hakimel/reveal.js/graphs/contributors">contributors</a></small>
@@ -51,7 +53,7 @@
 						<p>Use the <em>Space</em> key to navigate through all slides.</p>
 						<br>
 						<a href="#" class="navigate-down">
-							<img class="r-frame" style="background: rgba(255,255,255,0.1);" width="178" height="238" data-src="https://s3.amazonaws.com/hakim-static/reveal-js/arrow.png" alt="Down arrow">
+							<img class="r-frame" style="background: rgba(255,255,255,0.1);" width="178" height="238" data-src="https://static.slid.es/reveal/arrow.png" alt="Down arrow">
 						</a>
 					</section>
 					<section>
@@ -63,7 +65,7 @@
 						<p>That's it, time to go back up.</p>
 						<br>
 						<a href="#/2">
-							<img class="r-frame" style="background: rgba(255,255,255,0.1); transform: rotate(180deg);" width="178" height="238" data-src="https://s3.amazonaws.com/hakim-static/reveal-js/arrow.png" alt="Up arrow">
+							<img class="r-frame" style="background: rgba(255,255,255,0.1); transform: rotate(180deg);" width="178" height="238" data-src="https://static.slid.es/reveal/arrow.png" alt="Up arrow">
 						</a>
 					</section>
 				</section>
@@ -256,18 +258,18 @@
 							Set <code>data-background="#dddddd"</code> on a slide to change the background color. All CSS color formats are supported.
 						</p>
 						<a href="#" class="navigate-down">
-							<img class="r-frame" style="background: rgba(255,255,255,0.1);" width="178" height="238" data-src="https://s3.amazonaws.com/hakim-static/reveal-js/arrow.png" alt="Down arrow">
+							<img class="r-frame" style="background: rgba(255,255,255,0.1);" width="178" height="238" data-src="https://static.slid.es/reveal/arrow.png" alt="Down arrow">
 						</a>
 					</section>
-					<section data-background="https://s3.amazonaws.com/hakim-static/reveal-js/image-placeholder.png">
+					<section data-background="https://static.slid.es/reveal/image-placeholder.png">
 						<h2>Image Backgrounds</h2>
 						<pre><code class="hljs html">&lt;section data-background="image.png"&gt;</code></pre>
 					</section>
-					<section data-background="https://s3.amazonaws.com/hakim-static/reveal-js/image-placeholder.png" data-background-repeat="repeat" data-background-size="100px">
+					<section data-background="https://static.slid.es/reveal/image-placeholder.png" data-background-repeat="repeat" data-background-size="100px">
 						<h2>Tiled Backgrounds</h2>
 						<pre><code class="hljs html" style="word-wrap: break-word;">&lt;section data-background="image.png" data-background-repeat="repeat" data-background-size="100px"&gt;</code></pre>
 					</section>
-					<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-color="#000000">
+					<section data-background-video="https://s3.amazonaws.com/static.slid.es/site/homepage/v1/homepage-video-editor.mp4" data-background-color="#000000">
 						<div style="background-color: rgba(0, 0, 0, 0.9); color: #fff; padding: 20px;">
 							<h2>Video Backgrounds</h2>
 							<pre><code class="hljs html" style="word-wrap: break-word;">&lt;section data-background-video="video.mp4,video.webm"&gt;</code></pre>

examples/layout-helpers.html

@@ -24,6 +24,8 @@
 					<ul>
 						<li><a href="#/stretch">Stretch</a></li>
 						<li><a href="#/stack">Stack</a></li>
+						<li><a href="#/hstack">HStack</a></li>
+						<li><a href="#/vstack">VStack</a></li>
 					</ul>
 				</section>
 
@@ -74,6 +76,27 @@
 					</div>
 				</section>
 
+				<section id="hstack">
+					<h2>HStack</h2>
+					<p>Stacks multiple elements horizontally.</p>
+					<pre><code class="html" data-trim data-line-numbers>
+					  <div class="r-hstack">
+					    &lt;img width="450" height="300" src="..."&gt;
+					    &lt;img width="300" height="450" src="..."&gt;
+					    &lt;img width="400" height="400" src="..."&gt;
+					  </div>
+					</code></pre>
+				</section>
+
+				<section data-auto-animate>
+					<h2>HStack Example</h2>
+					<div class="r-hstack">
+						<p style="padding: 0.50em; background: #eee; margin: 0.25em">One</p>
+						<p style="padding: 0.75em; background: #eee; margin: 0.25em">Two</p>
+						<p style="padding: 1.00em; background: #eee; margin: 0.25em">Three</p>
+					</div>
+				</section>
+
 			</div>
 
 		</div>

examples/media.html

@@ -31,11 +31,28 @@
 					<h2 style="color: #fff;">Iframe Background</h2>
 				</section>
 
+				<section>
+					<h2>Video</h2>
+					<video src="https://static.slid.es/site/homepage/v1/homepage-video-editor.mp4" data-autoplay></video>
+				</section>
+
 				<section>
 					<h2>Auto-playing audio</h2>
 					<audio src="assets/beeping.wav" data-autoplay></audio>
 				</section>
 
+				<section>
+					<h2>Audio inside slide fragments</h2>
+					<div class="fragment">
+						Beep 1
+						<audio src="assets/beeping.wav" data-autoplay></audio>
+					</div>
+					<div class="fragment">
+						Beep 2
+						<audio src="assets/beeping.wav" data-autoplay></audio>
+					</div>
+				</section>
+
 				<section>
 					<h2>Audio with controls</h2>
 					<audio src="assets/beeping.wav" controls></audio>
@@ -47,9 +64,7 @@
 
 		<script src="../dist/reveal.js"></script>
 		<script>
-			Reveal.initialize({
-				transition: 'linear'
-			});
+			Reveal.initialize();
 		</script>
 
 	</body>

gulpfile.js

@@ -7,9 +7,9 @@ const qunit = require('node-qunit-puppeteer')
 
 const {rollup} = require('rollup')
 const {terser} = require('rollup-plugin-terser')
-const babel = require('rollup-plugin-babel')
+const babel = require('@rollup/plugin-babel').default
 const commonjs = require('@rollup/plugin-commonjs')
-const resolve = require('@rollup/plugin-node-resolve')
+const resolve = require('@rollup/plugin-node-resolve').default
 
 const gulp = require('gulp')
 const tap = require('gulp-tap')
@@ -25,7 +25,7 @@ const root = yargs.argv.root || '.'
 const port = yargs.argv.port || 8000
 
 const banner = `/*!
-* reveal.js ${pkg.version} (${new Date().toDateString()})
+* reveal.js ${pkg.version}
 * ${pkg.homepage}
 * MIT licensed
 *
@@ -36,54 +36,52 @@ const banner = `/*!
 process.setMaxListeners(20);
 
 const babelConfig = {
-    exclude: 'node_modules/**',
+    babelHelpers: 'bundled',
+    ignore: ['node_modules'],
     compact: false,
     extensions: ['.js', '.html'],
-    plugins: ['transform-html-import-to-string'],
+    plugins: [
+        'transform-html-import-to-string'
+    ],
     presets: [[
         '@babel/preset-env',
         {
             corejs: 3,
-            useBuiltIns: 'entry',
+            useBuiltIns: 'usage',
             modules: false
         }
     ]]
 };
 
-const rollupConfig = {
-    plugins: [
-        babel( babelConfig ),
-        resolve(),
-        commonjs(),
-        terser()
-    ]
-};
-
-// Our ES module bundle only needs to support modern
-// browser features
+// Our ES module bundle only targets newer browsers with
+// module support. Browsers are targeted explicitly instead
+// of using the "esmodule: true" target since that leads to
+// polyfilling older browsers and a larger bundle.
 const babelConfigESM = JSON.parse( JSON.stringify( babelConfig ) );
-babelConfigESM.presets[0][1].targets = { esmodules: true };
+babelConfigESM.presets[0][1].targets = { browsers: [
+    'last 2 Chrome versions', 'not Chrome < 60',
+    'last 2 Safari versions', 'not Safari < 10.1',
+    'last 2 iOS versions', 'not iOS < 10.3',
+    'last 2 Firefox versions', 'not Firefox < 60',
+    'last 2 Edge versions', 'not Edge < 16',
+] };
 
-const rollupConfigESM = {
-    plugins: [
-        babel( babelConfigESM ),
-        resolve(),
-        commonjs(),
-        terser()
-    ]
-};
-
-let rollupCache;
+let cache = {};
 
 // Creates a bundle with broad browser support, exposed
 // as UMD
 gulp.task('js-es5', () => {
     return rollup({
-        cache: rollupCache,
+        cache: cache.umd,
         input: 'js/index.js',
-        ...rollupConfig
+        plugins: [
+            resolve(),
+            commonjs(),
+            babel( babelConfig ),
+            terser()
+        ]
     }).then( bundle => {
-        rollupCache = bundle.cache;
+        cache.umd = bundle.cache;
         return bundle.write({
             name: 'Reveal',
             file: './dist/reveal.js',
@@ -97,11 +95,16 @@ gulp.task('js-es5', () => {
 // Creates an ES module bundle
 gulp.task('js-es6', () => {
     return rollup({
-        cache: rollupCache,
+        cache: cache.esm,
         input: 'js/index.js',
-        ...rollupConfigESM
+        plugins: [
+            resolve(),
+            commonjs(),
+            babel( babelConfigESM ),
+            terser()
+        ]
     }).then( bundle => {
-        rollupCache = bundle.cache;
+        cache.esm = bundle.cache;
         return bundle.write({
             file: './dist/reveal.esm.js',
             format: 'es',
@@ -124,9 +127,19 @@ gulp.task('plugins', () => {
         { name: 'RevealMath', input: './plugin/math/plugin.js', output: './plugin/math/math' },
     ].map( plugin => {
         return rollup({
+                cache: cache[plugin.input],
                 input: plugin.input,
-                ...rollupConfig
+                plugins: [
+                    resolve(),
+                    commonjs(),
+                    babel({
+                        ...babelConfig,
+                        ignore: [/node_modules\/(?!(highlight\.js|marked)\/).*/],
+                    }),
+                    terser()
+                ]
             }).then( bundle => {
+                cache[plugin.input] = bundle.cache;
                 bundle.write({
                     file: plugin.output + '.esm.js',
                     name: plugin.name,

js/controllers/autoanimate.js

@@ -1,6 +1,9 @@
-import { queryAll, extend, createStyleSheet } from '../utils/util.js'
+import { queryAll, extend, createStyleSheet, matches, closest } from '../utils/util.js'
 import { FRAGMENT_STYLE_REGEX } from '../utils/constants.js'
 
+// Counter used to generate unique IDs for auto-animated elements
+let autoAnimateCounter = 0;
+
 /**
  * Automatically animates matching elements across
  * slides with the [data-auto-animate] attribute.
@@ -11,9 +14,6 @@ export default class AutoAnimate {
 
 		this.Reveal = Reveal;
 
-		// Counter used to generate unique IDs for auto-animated elements
-		this.autoAnimateCounter = 0;
-
 	}
 
 	/**
@@ -45,7 +45,7 @@ export default class AutoAnimate {
 
 			// Inject our auto-animate styles for this transition
 			let css = this.getAutoAnimatableElements( fromSlide, toSlide ).map( elements => {
-				return this.autoAnimateElements( elements.from, elements.to, elements.options || {}, animationOptions, this.autoAnimateCounter++ );
+				return this.autoAnimateElements( elements.from, elements.to, elements.options || {}, animationOptions, autoAnimateCounter++ );
 			} );
 
 			// Animate unmatched elements, if enabled
@@ -63,7 +63,7 @@ export default class AutoAnimate {
 					// If there is a duration or delay set specifically for this
 					// element our unmatched elements should adhere to those
 					if( unmatchedOptions.duration !== animationOptions.duration || unmatchedOptions.delay !== animationOptions.delay ) {
-						id = 'unmatched-' + this.autoAnimateCounter++;
+						id = 'unmatched-' + autoAnimateCounter++;
 						css.push( `[data-auto-animate="running"] [data-auto-animate-target="${id}"] { transition: opacity ${unmatchedOptions.duration}s ease ${unmatchedOptions.delay}s; }` );
 					}
 
@@ -299,8 +299,8 @@ export default class AutoAnimate {
 		options = extend( options, inheritedOptions );
 
 		// Inherit options from parent elements
-		if( element.closest && element.parentNode ) {
-			let autoAnimatedParent = element.parentNode.closest( '[data-auto-animate-target]' );
+		if( element.parentNode ) {
+			let autoAnimatedParent = closest( element.parentNode, '[data-auto-animate-target]' );
 			if( autoAnimatedParent ) {
 				options = this.getAutoAnimateOptions( autoAnimatedParent, options );
 			}
@@ -463,11 +463,11 @@ export default class AutoAnimate {
 
 			// Disable scale transformations on text nodes, we transiition
 			// each individual text property instead
-			if( pair.from.matches( textNodes ) ) {
+			if( matches( pair.from, textNodes ) ) {
 				pair.options = { scale: false };
 			}
 			// Animate individual lines of code
-			else if( pair.from.matches( codeNodes ) ) {
+			else if( matches( pair.from, codeNodes ) ) {
 
 				// Transition the code block's width and height instead of scaling
 				// to prevent its content from being squished

js/controllers/focus.js

@@ -1,3 +1,5 @@
+import { closest } from '../utils/util.js'
+
 /**
  * Manages focus when a presentation is embedded. This
  * helps us only capture keyboard from the presentation
@@ -85,7 +87,7 @@ export default class Focus {
 
 	onDocumentPointerDown( event ) {
 
-		let revealElement = event.target.closest( '.reveal' );
+		let revealElement = closest( event.target, '.reveal' );
 		if( !revealElement || revealElement !== this.Reveal.getRevealElement() ) {
 			this.blur();
 		}

js/controllers/notes.js

@@ -54,7 +54,7 @@ export default class Notes {
 	 */
 	updateVisibility() {
 
-		if( this.Reveal.getConfig().showNotes && this.hasNotes() ) {
+		if( this.Reveal.getConfig().showNotes && this.hasNotes() && !this.Reveal.print.isPrintingPDF() ) {
 			this.Reveal.getRevealElement().classList.add( 'show-notes' );
 		}
 		else {

js/controllers/print.js

@@ -91,7 +91,7 @@ export default class Print {
 				if( config.showNotes ) {
 
 					// Are there notes for this slide?
-					let notes = getSlideNotes( slide );
+					let notes = this.Reveal.getSlideNotes( slide );
 					if( notes ) {
 
 						let notesSpacing = 8;

js/controllers/slidecontent.js

@@ -1,5 +1,5 @@
 import { HORIZONTAL_SLIDES_SELECTOR, VERTICAL_SLIDES_SELECTOR } from '../utils/constants.js'
-import { extend, queryAll, closestParent } from '../utils/util.js'
+import { extend, queryAll, closest } from '../utils/util.js'
 import { isMobile } from '../utils/device.js'
 
 /**
@@ -240,7 +240,7 @@ export default class SlideContent {
 
 			// HTML5 media elements
 			queryAll( element, 'video, audio' ).forEach( el => {
-				if( closestParent( el, '.fragment' ) && !closestParent( el, '.fragment.visible' ) ) {
+				if( closest( el, '.fragment' ) && !closest( el, '.fragment.visible' ) ) {
 					return;
 				}
 
@@ -250,7 +250,7 @@ export default class SlideContent {
 				// If no global setting is available, fall back on the element's
 				// own autoplay setting
 				if( typeof autoplay !== 'boolean' ) {
-					autoplay = el.hasAttribute( 'data-autoplay' ) || !!closestParent( el, '.slide-background' );
+					autoplay = el.hasAttribute( 'data-autoplay' ) || !!closest( el, '.slide-background' );
 				}
 
 				if( autoplay && typeof el.play === 'function' ) {
@@ -288,7 +288,7 @@ export default class SlideContent {
 
 			// Normal iframes
 			queryAll( element, 'iframe[src]' ).forEach( el => {
-				if( closestParent( el, '.fragment' ) && !closestParent( el, '.fragment.visible' ) ) {
+				if( closest( el, '.fragment' ) && !closest( el, '.fragment.visible' ) ) {
 					return;
 				}
 
@@ -297,7 +297,7 @@ export default class SlideContent {
 
 			// Lazy loading iframes
 			queryAll( element, 'iframe[data-src]' ).forEach( el => {
-				if( closestParent( el, '.fragment' ) && !closestParent( el, '.fragment.visible' ) ) {
+				if( closest( el, '.fragment' ) && !closest( el, '.fragment.visible' ) ) {
 					return;
 				}
 
@@ -320,8 +320,8 @@ export default class SlideContent {
 	 */
 	startEmbeddedMedia( event ) {
 
-		let isAttachedToDOM = !!closestParent( event.target, 'html' ),
-			isVisible  		= !!closestParent( event.target, '.present' );
+		let isAttachedToDOM = !!closest( event.target, 'html' ),
+			isVisible  		= !!closest( event.target, '.present' );
 
 		if( isAttachedToDOM && isVisible ) {
 			event.target.currentTime = 0;
@@ -344,8 +344,8 @@ export default class SlideContent {
 
 		if( iframe && iframe.contentWindow ) {
 
-			let isAttachedToDOM = !!closestParent( event.target, 'html' ),
-				isVisible  		= !!closestParent( event.target, '.present' );
+			let isAttachedToDOM = !!closest( event.target, 'html' ),
+				isVisible  		= !!closest( event.target, '.present' );
 
 			if( isAttachedToDOM && isVisible ) {
 
@@ -355,7 +355,7 @@ export default class SlideContent {
 				// If no global setting is available, fall back on the element's
 				// own autoplay setting
 				if( typeof autoplay !== 'boolean' ) {
-					autoplay = iframe.hasAttribute( 'data-autoplay' ) || !!closestParent( iframe, '.slide-background' );
+					autoplay = iframe.hasAttribute( 'data-autoplay' ) || !!closest( iframe, '.slide-background' );
 				}
 
 				// YouTube postMessage API

js/index.js

@@ -45,12 +45,14 @@ Reveal.initialize = options => {
  * queuing up premature API calls and invoking all
  * of them when Reveal.initialize is called.
  */
-[ 'on', 'off', 'addEventListener', 'removeEventListener', 'registerPlugin' ].forEach( method => {
+[ 'configure', 'on', 'off', 'addEventListener', 'removeEventListener', 'registerPlugin' ].forEach( method => {
 	Reveal[method] = ( ...args ) => {
 		enqueuedAPICalls.push( deck => deck[method].call( null, ...args ) );
 	}
 } );
 
+Reveal.isReady = () => false;
+
 Reveal.VERSION = VERSION;
 
 export default Reveal;

js/reveal.js

@@ -26,7 +26,7 @@ import {
 } from './utils/constants.js'
 
 // The reveal.js version
-export const VERSION = '4.0.0';
+export const VERSION = '4.0.2';
 
 /**
  * reveal.js
@@ -47,7 +47,7 @@ export default function( revealElement, options ) {
 	const Reveal = {};
 
 	// Configuration defaults, can be overridden at initialization time
-	let config,
+	let config = {},
 
 		// Flags if reveal.js is loaded (has dispatched the 'ready' event)
 		ready = false,
@@ -125,8 +125,14 @@ export default function( revealElement, options ) {
 		dom.wrapper = revealElement;
 		dom.slides = revealElement.querySelector( '.slides' );
 
-		// Compose our config object
-		config = { ...defaultConfig, ...options, ...initOptions, ...Util.getQueryHash() };
+		// Compose our config object in order of increasing precedence:
+		// 1. Default reveal.js options
+		// 2. Options provided via Reveal.configure() prior to
+		//    initialization
+		// 3. Options passed to the Reveal constructor
+		// 4. Options passed to Reveal.initialize
+		// 5. Query params
+		config = { ...defaultConfig, ...config, ...options, ...initOptions, ...Util.getQueryHash() };
 
 		setViewport();
 
@@ -148,7 +154,7 @@ export default function( revealElement, options ) {
 
 		// Embedded decks use the reveal element as their viewport
 		if( config.embedded === true ) {
-			dom.viewport = revealElement.closest( '.reveal-viewport' ) || revealElement;
+			dom.viewport = Util.closest( revealElement, '.reveal-viewport' ) || revealElement;
 		}
 		// Full-page decks use the body as their viewport
 		else {
@@ -1489,7 +1495,10 @@ export default function( revealElement, options ) {
 
 				let reverse = config.rtl && !isVerticalSlide( element );
 
-				element.classList.remove( 'past', 'present', 'future' );
+				// Avoid .remove() with multiple args for IE11 support
+				element.classList.remove( 'past' );
+				element.classList.remove( 'present' );
+				element.classList.remove( 'future' );
 
 				// http://www.w3.org/html/wg/drafts/html/master/editing.html#the-hidden-attribute
 				element.setAttribute( 'hidden', '' );
@@ -2064,21 +2073,21 @@ export default function( revealElement, options ) {
 			}
 			else {
 				autoSlide = config.autoSlide;
-			}
 
-			// If there are media elements with data-autoplay,
-			// automatically set the autoSlide duration to the
-			// length of that media. Not applicable if the slide
-			// is divided up into fragments.
-			// playbackRate is accounted for in the duration.
-			if( currentSlide.querySelectorAll( '.fragment' ).length === 0 ) {
-				Util.queryAll( currentSlide, 'video, audio' ).forEach( el => {
-					if( el.hasAttribute( 'data-autoplay' ) ) {
-						if( autoSlide && (el.duration * 1000 / el.playbackRate ) > autoSlide ) {
-							autoSlide = ( el.duration * 1000 / el.playbackRate ) + 1000;
+				// If there are media elements with data-autoplay,
+				// automatically set the autoSlide duration to the
+				// length of that media. Not applicable if the slide
+				// is divided up into fragments.
+				// playbackRate is accounted for in the duration.
+				if( currentSlide.querySelectorAll( '.fragment' ).length === 0 ) {
+					Util.queryAll( currentSlide, 'video, audio' ).forEach( el => {
+						if( el.hasAttribute( 'data-autoplay' ) ) {
+							if( autoSlide && (el.duration * 1000 / el.playbackRate ) > autoSlide ) {
+								autoSlide = ( el.duration * 1000 / el.playbackRate ) + 1000;
+							}
 						}
-					}
-				} );
+					} );
+				}
 			}
 
 			// Cue the next auto-slide if:

js/utils/util.js

@@ -85,6 +85,23 @@ export const transformElement = ( element, transform ) => {
 
 }
 
+/**
+ * Element.matches with IE support.
+ *
+ * @param {HTMLElement} target The element to match
+ * @param {String} selector The CSS selector to match
+ * the element against
+ *
+ * @return {Boolean}
+ */
+export const matches = ( target, selector ) => {
+
+	let matchesMethod = target.matches || target.matchesSelector || target.msMatchesSelector;
+
+	return !!( matchesMethod && matchesMethod.call( target, selector ) );
+
+}
+
 /**
  * Find the closest parent that matches the given
  * selector.
@@ -96,25 +113,21 @@ export const transformElement = ( element, transform ) => {
  * @return {HTMLElement} The matched parent or null
  * if no matching parent was found
  */
-export const closestParent = ( target, selector ) => {
+export const closest = ( target, selector ) => {
 
-	let parent = target.parentNode;
+	// Native Element.closest
+	if( typeof target.closest === 'function' ) {
+		return target.closest( selector );
+	}
 
-	while( parent ) {
-
-		// There's some overhead doing this each time, we don't
-		// want to rewrite the element prototype but should still
-		// be enough to feature detect once at startup...
-		let matchesMethod = parent.matches || parent.matchesSelector || parent.msMatchesSelector;
-
-		// If we find a match, we're all set
-		if( matchesMethod && matchesMethod.call( parent, selector ) ) {
-			return parent;
+	// Polyfill
+	while( target ) {
+		if( matches( target, selector ) ) {
+			return target;
 		}
 
 		// Keep searching
-		parent = parent.parentNode;
-
+		target = target.parentNode;
 	}
 
 	return null;

package-lock.json

@@ -1,6 +1,6 @@
 {
   "name": "reveal.js",
-  "version": "4.0.0-rc.1",
+  "version": "4.0.1",
   "lockfileVersion": 1,
   "requires": true,
   "dependencies": {
@@ -1065,10 +1065,20 @@
         "to-fast-properties": "^2.0.0"
       }
     },
+    "@rollup/plugin-babel": {
+      "version": "5.0.2",
+      "resolved": "https://registry.npmjs.org/@rollup/plugin-babel/-/plugin-babel-5.0.2.tgz",
+      "integrity": "sha512-GiL7jL+FGppzQ1Sn4y2ER4UYXlgXFFEt+sHm4WJEzQwI76Yf9oy2QDqIvcon6xApZWlik3L8fezRGC6Mj2vRXg==",
+      "dev": true,
+      "requires": {
+        "@babel/helper-module-imports": "^7.7.4",
+        "@rollup/pluginutils": "^3.0.8"
+      }
+    },
     "@rollup/plugin-commonjs": {
-      "version": "11.1.0",
-      "resolved": "https://registry.npmjs.org/@rollup/plugin-commonjs/-/plugin-commonjs-11.1.0.tgz",
-      "integrity": "sha512-Ycr12N3ZPN96Fw2STurD21jMqzKwL9QuFhms3SD7KKRK7oaXUsBU9Zt0jL/rOPHiPYisI21/rXGO3jr9BnLHUA==",
+      "version": "12.0.0",
+      "resolved": "https://registry.npmjs.org/@rollup/plugin-commonjs/-/plugin-commonjs-12.0.0.tgz",
+      "integrity": "sha512-8+mDQt1QUmN+4Y9D3yCG8AJNewuTSLYPJVzKKUZ+lGeQrI+bV12Tc5HCyt2WdlnG6ihIL/DPbKRJlB40DX40mw==",
       "dev": true,
       "requires": {
         "@rollup/pluginutils": "^3.0.8",
@@ -1081,72 +1091,29 @@
       }
     },
     "@rollup/plugin-node-resolve": {
-      "version": "7.1.3",
-      "resolved": "https://registry.npmjs.org/@rollup/plugin-node-resolve/-/plugin-node-resolve-7.1.3.tgz",
-      "integrity": "sha512-RxtSL3XmdTAE2byxekYLnx+98kEUOrPHF/KRVjLH+DEIHy6kjIw7YINQzn+NXiH/NTrQLAwYs0GWB+csWygA9Q==",
+      "version": "8.0.0",
+      "resolved": "https://registry.npmjs.org/@rollup/plugin-node-resolve/-/plugin-node-resolve-8.0.0.tgz",
+      "integrity": "sha512-5poJCChrkVggXXND/sQ7yNqwjUNT4fP31gpRWCnSNnlXuUXTCMHT33xZrTGxgjm5Rl18MHj7iEzlCT8rYWwQSA==",
       "dev": true,
       "requires": {
         "@rollup/pluginutils": "^3.0.8",
         "@types/resolve": "0.0.8",
         "builtin-modules": "^3.1.0",
+        "deep-freeze": "^0.0.1",
+        "deepmerge": "^4.2.2",
         "is-module": "^1.0.0",
         "resolve": "^1.14.2"
       }
     },
     "@rollup/pluginutils": {
-      "version": "3.0.9",
-      "resolved": "https://registry.npmjs.org/@rollup/pluginutils/-/pluginutils-3.0.9.tgz",
-      "integrity": "sha512-TLZavlfPAZYI7v33wQh4mTP6zojne14yok3DNSLcjoG/Hirxfkonn6icP5rrNWRn8nZsirJBFFpijVOJzkUHDg==",
+      "version": "3.0.10",
+      "resolved": "https://registry.npmjs.org/@rollup/pluginutils/-/pluginutils-3.0.10.tgz",
+      "integrity": "sha512-d44M7t+PjmMrASHbhgpSbVgtL6EFyX7J4mYxwQ/c5eoaE6N2VgCgEcWVzNnwycIloti+/MpwFr8qfw+nRw00sw==",
       "dev": true,
       "requires": {
         "@types/estree": "0.0.39",
         "estree-walker": "^1.0.1",
-        "micromatch": "^4.0.2"
-      },
-      "dependencies": {
-        "braces": {
-          "version": "3.0.2",
-          "resolved": "https://registry.npmjs.org/braces/-/braces-3.0.2.tgz",
-          "integrity": "sha512-b8um+L1RzM3WDSzvhm6gIz1yfTbBt6YTlcEKAvsmqCZZFw46z626lVj9j1yEPW33H5H+lBQpZMP1k8l+78Ha0A==",
-          "dev": true,
-          "requires": {
-            "fill-range": "^7.0.1"
-          }
-        },
-        "fill-range": {
-          "version": "7.0.1",
-          "resolved": "https://registry.npmjs.org/fill-range/-/fill-range-7.0.1.tgz",
-          "integrity": "sha512-qOo9F+dMUmC2Lcb4BbVvnKJxTPjCm+RRpe4gDuGrzkL7mEVl/djYSu2OdQ2Pa302N4oqkSg9ir6jaLWJ2USVpQ==",
-          "dev": true,
-          "requires": {
-            "to-regex-range": "^5.0.1"
-          }
-        },
-        "is-number": {
-          "version": "7.0.0",
-          "resolved": "https://registry.npmjs.org/is-number/-/is-number-7.0.0.tgz",
-          "integrity": "sha512-41Cifkg6e8TylSpdtTpeLVMqvSBEVzTttHvERD741+pnZ8ANv0004MRL43QKPDlK9cGvNp6NZWZUBlbGXYxxng==",
-          "dev": true
-        },
-        "micromatch": {
-          "version": "4.0.2",
-          "resolved": "https://registry.npmjs.org/micromatch/-/micromatch-4.0.2.tgz",
-          "integrity": "sha512-y7FpHSbMUMoyPbYUSzO6PaZ6FyRnQOpHuKwbo1G+Knck95XVU4QAiKdGEnj5wwoS7PlOgthX/09u5iFJ+aYf5Q==",
-          "dev": true,
-          "requires": {
-            "braces": "^3.0.1",
-            "picomatch": "^2.0.5"
-          }
-        },
-        "to-regex-range": {
-          "version": "5.0.1",
-          "resolved": "https://registry.npmjs.org/to-regex-range/-/to-regex-range-5.0.1.tgz",
-          "integrity": "sha512-65P7iz6X5yEr1cwcgvQxbbIw7Uk3gOy5dIdtZ4rDveLqhrdJP+Li/Hx6tyK0NEb+2GCyneCMJiGqrADCSNk8sQ==",
-          "dev": true,
-          "requires": {
-            "is-number": "^7.0.0"
-          }
-        }
+        "picomatch": "^2.2.2"
       }
     },
     "@types/color-name": {
@@ -1168,9 +1135,9 @@
       "dev": true
     },
     "@types/node": {
-      "version": "13.13.4",
-      "resolved": "https://registry.npmjs.org/@types/node/-/node-13.13.4.tgz",
-      "integrity": "sha512-x26ur3dSXgv5AwKS0lNfbjpCakGIduWU1DU91Zz58ONRWrIKGunmZBNv4P7N+e27sJkiGDsw/3fT4AtsqQBrBA==",
+      "version": "14.0.5",
+      "resolved": "https://registry.npmjs.org/@types/node/-/node-14.0.5.tgz",
+      "integrity": "sha512-90hiq6/VqtQgX8Sp0EzeIsv3r+ellbGj4URKj5j30tLlZvRUpnAe9YbYnjl3pJM93GyXU0tghHhvXHq+5rnCKA==",
       "dev": true
     },
     "@types/resolve": {
@@ -2278,12 +2245,24 @@
       "integrity": "sha1-6zkTMzRYd1y4TNGh+uBiEGu4dUU=",
       "dev": true
     },
+    "deep-freeze": {
+      "version": "0.0.1",
+      "resolved": "https://registry.npmjs.org/deep-freeze/-/deep-freeze-0.0.1.tgz",
+      "integrity": "sha1-OgsABd4YZygZ39OM0x+RF5yJPoQ=",
+      "dev": true
+    },
     "deep-is": {
       "version": "0.1.3",
       "resolved": "https://registry.npmjs.org/deep-is/-/deep-is-0.1.3.tgz",
       "integrity": "sha1-s2nW+128E+7PUk+RsHD+7cNXzzQ=",
       "dev": true
     },
+    "deepmerge": {
+      "version": "4.2.2",
+      "resolved": "https://registry.npmjs.org/deepmerge/-/deepmerge-4.2.2.tgz",
+      "integrity": "sha512-FJ3UgI4gIl+PHZm53knsuSFpE+nESMr7M4v9QcgB7S63Kj/6WqMiFQJpBBYz1Pt+66bZpP3Q7Lye0Oo9MPKEdg==",
+      "dev": true
+    },
     "default-compare": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/default-compare/-/default-compare-1.0.0.tgz",
@@ -6448,9 +6427,9 @@
       }
     },
     "rollup": {
-      "version": "2.10.4",
-      "resolved": "https://registry.npmjs.org/rollup/-/rollup-2.10.4.tgz",
-      "integrity": "sha512-aYvoYjeu9DwrUTEfRlHiugW1eoHz7EGxETaOISpw+zkH9oOaQLO85eG+14ky4vyYgi3mUofbpWJgb+yLBE0PKw==",
+      "version": "2.10.9",
+      "resolved": "https://registry.npmjs.org/rollup/-/rollup-2.10.9.tgz",
+      "integrity": "sha512-dY/EbjiWC17ZCUSyk14hkxATAMAShkMsD43XmZGWjLrgFj15M3Dw2kEkA9ns64BiLFm9PKN6vTQw8neHwK74eg==",
       "dev": true,
       "requires": {
         "fsevents": "~2.1.2"
@@ -6465,16 +6444,6 @@
         }
       }
     },
-    "rollup-plugin-babel": {
-      "version": "4.4.0",
-      "resolved": "https://registry.npmjs.org/rollup-plugin-babel/-/rollup-plugin-babel-4.4.0.tgz",
-      "integrity": "sha512-Lek/TYp1+7g7I+uMfJnnSJ7YWoD58ajo6Oarhlex7lvUce+RCKRuGRSgztDO3/MF/PuGKmUL5iTHKf208UNszw==",
-      "dev": true,
-      "requires": {
-        "@babel/helper-module-imports": "^7.0.0",
-        "rollup-pluginutils": "^2.8.1"
-      }
-    },
     "rollup-plugin-terser": {
       "version": "5.3.0",
       "resolved": "https://registry.npmjs.org/rollup-plugin-terser/-/rollup-plugin-terser-5.3.0.tgz",

package.json

@@ -1,6 +1,6 @@
 {
   "name": "reveal.js",
-  "version": "4.0.0",
+  "version": "4.0.2",
   "description": "The HTML Presentation Framework",
   "homepage": "https://revealjs.com",
   "subdomain": "revealjs",
@@ -32,8 +32,9 @@
   "devDependencies": {
     "@babel/core": "^7.9.6",
     "@babel/preset-env": "^7.9.6",
-    "@rollup/plugin-commonjs": "^11.1.0",
-    "@rollup/plugin-node-resolve": "^7.1.3",
+    "@rollup/plugin-babel": "^5.0.2",
+    "@rollup/plugin-commonjs": "^12.0.0",
+    "@rollup/plugin-node-resolve": "^8.0.0",
     "babel-eslint": "^10.1.0",
     "babel-plugin-transform-html-import-to-string": "0.0.1",
     "colors": "^1.4.0",
@@ -52,8 +53,7 @@
     "marked": "^1.1.0",
     "node-qunit-puppeteer": "^2.0.1",
     "qunit": "^2.10.0",
-    "rollup": "^2.10.4",
-    "rollup-plugin-babel": "^4.4.0",
+    "rollup": "^2.10.9",
     "rollup-plugin-terser": "^5.3.0",
     "yargs": "^15.1.0"
   },

plugin/highlight/plugin.js

@@ -16,6 +16,8 @@ const Plugin = {
 	HIGHLIGHT_LINE_DELIMITER: ',',
 	HIGHLIGHT_LINE_RANGE_DELIMITER: '-',
 
+	hljs: hljs,
+
 	/**
 	 * Highlights code blocks withing the given deck.
 	 *

plugin/notes/plugin.js

@@ -1,6 +1,6 @@
 import speakerViewHTML from './speaker-view.html';
 
-import marked from 'marked'
+import marked from 'marked';
 
 /**
  * Handles opening of and synchronization with the reveal.js

test/test.html

@@ -81,6 +81,8 @@
 		<script>
 			window.location.hash = '';
 
+			Reveal.configure({maxScale: 1.11});
+
 			// These tests expect the DOM to contain a presentation
 			// with the following slide structure:
 			//
@@ -113,6 +115,10 @@
 
 				QUnit.module( 'API' );
 
+				QUnit.test( 'Reveal.configure before initialization', function( assert ) {
+					assert.strictEqual( Reveal.getConfig().maxScale, 1.11 );
+				});
+
 				QUnit.test( 'Reveal.isReady', function( assert ) {
 					assert.strictEqual( Reveal.isReady(), true, 'returns true' );
 				});