improvements to legacy API

demo.html

@@ -411,7 +411,6 @@ Reveal.on( 'customevent', function() {
 		</div>
 
 		<script type="module" src="js/index.js"></script>
-
 		<script type="module">
 
 			// More info https://github.com/hakimel/reveal.js#configuration
@@ -436,22 +435,5 @@ Reveal.on( 'customevent', function() {
 
 		</script>
 
-		<!--
-		<script type="module">
-
-			// WIP support for multiple reveal.js instances
-			import Reveal from '/js/reveal.js'
-
-			window.a = new Reveal(document.querySelector( '.reveal' ), {controls: false});
-			a.initialize();
-
-			window.b = new Reveal(document.querySelector( '.reveal' ), {controls: true});
-			b.initialize();
-
-			console.log(a.getConfig().controls,b.getConfig().controls);
-
-		</script>
-		-->
-
 	</body>
 </html>

js/index.js

@@ -1,14 +1,52 @@
 import Presentation from './reveal.js'
 
+/**
+ * Expose the Reveal class to the window. To create a
+ * new instance:
+ * let deck = new Reveal( document.querySelector( '.reveal' ), {
+ *   controls: false
+ * } );
+ * deck.initialize().then(() => {
+ *   // reveal.js is ready
+ * });
+ */
 window.Reveal = Presentation;
 
-// Provides a backwards compatible way to initialize
-// reveal.js when there is only one presentation on
-// the page.
-//
-// Reveal.initialize({ controls: false })
-// Reveal.slide(2)
+
+/**
+ * The below is a thin shell that mimics the pre 4.0
+ * reveal.js API and ensures backwards compatibility.
+ * This API only allows for once Reveal instance per
+ * page, whereas the new API above lets you run many
+ * presentations on the same page.
+ *
+ * Reveal.initialize( { controls: false } ).then(() => {
+ *   // reveal.js is ready
+ * });
+ */
+
+let enqueuedAPICalls = [];
+
 window.Reveal.initialize = options => {
+
+	// Create our singleton reveal.js instance
 	window.Reveal = new Presentation( document.querySelector( '.reveal' ), options );
+
+	// Invoke any enqueued API calls
+	enqueuedAPICalls.map( method => method( window.Reveal ) );
+
 	return window.Reveal.initialize();
-}
+
+}
+
+/**
+ * The pre 4.0 API let you add event listener before
+ * initializing. We maintain the same behavior by
+ * queuing up early API calls and invoking all of them
+ * when Reveal.initialize is called.
+ */
+[ 'on', 'off', 'addEventListener', 'removeEventListener' ].forEach( method => {
+	window.Reveal[method] = ( ...args ) => {
+		enqueuedAPICalls.push( deck => deck[method].call( null, ...args ) );
+	}
+} );

test/test-multiple-instances.html

@@ -43,11 +43,13 @@
 
 			let r1 = new Reveal( document.querySelector( '.deck1 .reveal' ), {
 				embedded: true
+				keyboard: true
 			} );
 			r1.initialize();
 
 			let r2 = new Reveal( document.querySelector( '.deck2 .reveal' ), {
-				embedded: true
+				embedded: true,
+				keyboard: false
 			} );
 			r2.initialize();
 
@@ -63,6 +65,9 @@
 				assert.strictEqual( r2.isOverview(), true );
 				r2.toggleOverview( false );
 
+				assert.strictEqual( r1.getConfig().keyboard, true );
+				assert.strictEqual( r2.getConfig().keyboard, false );
+
 			});
 
 		</script>