tweak plugin initialization to enable multi-instance plugins

README.md

@@ -173,17 +173,33 @@ If you want to run multiple presentations side-by-side on the same page you can
 ```html
 <div class="reveal deck-1">...</div>
 <div class="reveal deck-2">...</div>
-<script type="module">
-  import Deck from 'js/reveal.js';
-
-  let deck1 = new Deck( document.querySelector( 'deck-1' ), { embedded: true } );
-  let deck2 = new Deck( document.querySelector( 'deck-2' ), { embedded: true } );
+<script src="dist/reveal.es5.js"></script>
+<script>
+  let deck1 = new Reveal( document.querySelector( 'deck-1' ), { embedded: true } );
+  let deck2 = new Reveal( document.querySelector( 'deck-2' ), { embedded: true } );
 
   deck1.initialize();
   deck2.initialize();
 </script>
 ```
 
+### ES Module
+
+We provide two JavaScript bundles; `/dist/reveal.es5.js` with support for legacy browers and `/dist/reveal.js` which targets modern browsers with ES6 support.
+
+Here's how to import and initialize the ES module version of reveal.js, including the Markdown plugin:
+
+```html
+<script type="module">
+  import Reveal from '/dist/reveal.js';
+  import markdown from '/plugin/markdown/markdown.js';
+  Reveal.initialize({
+    keyboard: true,
+    plugins: [ markdown() ]
+  });
+</script>
+```
+
 ### Configuration
 
 At the end of your page you need to initialize reveal by running the following code. Note that all configuration values are optional and will default to the values specified below.

demo.html

@@ -413,11 +413,11 @@ Reveal.on( 'customevent', function() {
 		<script type="module">
 
 			import Reveal from '/dist/reveal.js';
-			import Zoom from '/plugin/zoom/zoom.js';
-			import Notes from '/plugin/notes/notes.js';
-			import Search from '/plugin/search/search.js';
-			import Markdown from '/plugin/markdown/markdown.js';
-			import Highlight from '/plugin/highlight/highlight.js';
+			import zoom from '/plugin/zoom/zoom.js';
+			import notes from '/plugin/notes/notes.js';
+			import search from '/plugin/search/search.js';
+			import markdown from '/plugin/markdown/markdown.js';
+			import highlight from '/plugin/highlight/highlight.js';
 
 			// More info https://github.com/hakimel/reveal.js#configuration
 			Reveal.initialize({
@@ -429,7 +429,7 @@ Reveal.on( 'customevent', function() {
 				transition: 'slide', // none/fade/slide/convex/concave/zoom
 
 				// More info https://github.com/hakimel/reveal.js#dependencies
-				plugins: [ Zoom, Notes, Search, Markdown, Highlight ]
+				plugins: [ zoom(), notes(), search(), markdown(), highlight() ]
 			});
 
 		</script>

index.html

@@ -31,7 +31,7 @@
 			// - https://github.com/hakimel/reveal.js#dependencies
 			Reveal.initialize({
 				hash: true,
-				plugins: [ RevealMarkdown, RevealHighlight, RevealNotes ]
+				plugins: [ RevealMarkdown(), RevealHighlight(), RevealNotes() ]
 			});
 		</script>
 	</body>

js/controllers/plugins.js

@@ -56,7 +56,7 @@ export default class Plugins {
 				scriptsToLoad = scripts.length;
 
 				const scriptLoadedCallback = (s) => {
-					if( typeof s.callback === 'function' ) s.callback();
+					if( s && typeof s.callback === 'function' ) s.callback();
 
 					if( --scriptsToLoad === 0 ) {
 						this.initPlugins().then( resolve );
@@ -69,9 +69,13 @@ export default class Plugins {
 						this.registerPlugin( s );
 						scriptLoadedCallback( s );
 					}
-					else {
+					else if( typeof s.src === 'string' ) {
 						loadScript( s.src, () => scriptLoadedCallback(s) );
 					}
+					else {
+						console.warn( 'Unrecognized plugin format', s );
+						scriptLoadedCallback();
+					}
 				} );
 			}
 			else {

plugin/highlight/highlight.js

@@ -5,54 +5,7 @@ import './highlight-line-numbers.js'
  * reveal.js plugin that adds syntax highlight support.
  */
 
-// Function to perform a better "data-trim" on code snippets
-// Will slice an indentation amount on each line of the snippet (amount based on the line having the lowest indentation length)
-function betterTrim(snippetEl) {
-	// Helper functions
-	function trimLeft(val) {
-		// Adapted from https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/Trim#Polyfill
-		return val.replace(/^[\s\uFEFF\xA0]+/g, '');
-	}
-	function trimLineBreaks(input) {
-		var lines = input.split('\n');
-
-		// Trim line-breaks from the beginning
-		for (var i = 0; i < lines.length; i++) {
-			if (lines[i].trim() === '') {
-				lines.splice(i--, 1);
-			} else break;
-		}
-
-		// Trim line-breaks from the end
-		for (var i = lines.length-1; i >= 0; i--) {
-			if (lines[i].trim() === '') {
-				lines.splice(i, 1);
-			} else break;
-		}
-
-		return lines.join('\n');
-	}
-
-	// Main function for betterTrim()
-	return (function(snippetEl) {
-		var content = trimLineBreaks(snippetEl.innerHTML);
-		var lines = content.split('\n');
-		// Calculate the minimum amount to remove on each line start of the snippet (can be 0)
-		var pad = lines.reduce(function(acc, line) {
-			if (line.length > 0 && trimLeft(line).length > 0 && acc > line.length - trimLeft(line).length) {
-				return line.length - trimLeft(line).length;
-			}
-			return acc;
-		}, Number.POSITIVE_INFINITY);
-		// Slice each line with this amount
-		return lines.map(function(line, index) {
-			return line.slice(pad);
-		})
-		.join('\n');
-	})(snippetEl);
-}
-
-var RevealHighlight = {
+let Plugin = {
 
 	id: 'highlight',
 
@@ -85,7 +38,7 @@ var RevealHighlight = {
 			}, false );
 
 			if( config.highlightOnLoad ) {
-				RevealHighlight.highlightBlock( block );
+				Plugin.highlightBlock( block );
 			}
 
 		} );
@@ -94,7 +47,7 @@ var RevealHighlight = {
 		// all blocks in the deck into view at once
 		deck.on( 'pdf-ready', function() {
 			[].slice.call( document.querySelectorAll( '.reveal pre code[data-line-numbers].current-fragment' ) ).forEach( function( block ) {
-				RevealHighlight.scrollHighlightedLineIntoView( block, {}, true );
+				Plugin.scrollHighlightedLineIntoView( block, {}, true );
 			} );
 		} );
 
@@ -122,7 +75,7 @@ var RevealHighlight = {
 
 			// If there is at least one highlight step, generate
 			// fragments
-			var highlightSteps = RevealHighlight.deserializeHighlightSteps( block.getAttribute( 'data-line-numbers' ) );
+			var highlightSteps = Plugin.deserializeHighlightSteps( block.getAttribute( 'data-line-numbers' ) );
 			if( highlightSteps.length > 1 ) {
 
 				// If the original code block has a fragment-index,
@@ -137,10 +90,10 @@ var RevealHighlight = {
 				highlightSteps.slice(1).forEach( function( highlight ) {
 
 					var fragmentBlock = block.cloneNode( true );
-					fragmentBlock.setAttribute( 'data-line-numbers', RevealHighlight.serializeHighlightSteps( [ highlight ] ) );
+					fragmentBlock.setAttribute( 'data-line-numbers', Plugin.serializeHighlightSteps( [ highlight ] ) );
 					fragmentBlock.classList.add( 'fragment' );
 					block.parentNode.appendChild( fragmentBlock );
-					RevealHighlight.highlightLines( fragmentBlock );
+					Plugin.highlightLines( fragmentBlock );
 
 					if( typeof fragmentIndex === 'number' ) {
 						fragmentBlock.setAttribute( 'data-fragment-index', fragmentIndex );
@@ -151,13 +104,13 @@ var RevealHighlight = {
 					}
 
 					// Scroll highlights into view as we step through them
-					fragmentBlock.addEventListener( 'visible', RevealHighlight.scrollHighlightedLineIntoView.bind( RevealHighlight, fragmentBlock, scrollState ) );
-					fragmentBlock.addEventListener( 'hidden', RevealHighlight.scrollHighlightedLineIntoView.bind( RevealHighlight, fragmentBlock.previousSibling, scrollState ) );
+					fragmentBlock.addEventListener( 'visible', Plugin.scrollHighlightedLineIntoView.bind( Plugin, fragmentBlock, scrollState ) );
+					fragmentBlock.addEventListener( 'hidden', Plugin.scrollHighlightedLineIntoView.bind( Plugin, fragmentBlock.previousSibling, scrollState ) );
 
 				} );
 
 				block.removeAttribute( 'data-fragment-index' )
-				block.setAttribute( 'data-line-numbers', RevealHighlight.serializeHighlightSteps( [ highlightSteps[0] ] ) );
+				block.setAttribute( 'data-line-numbers', Plugin.serializeHighlightSteps( [ highlightSteps[0] ] ) );
 
 			}
 
@@ -167,13 +120,13 @@ var RevealHighlight = {
 			var slide = typeof block.closest === 'function' ? block.closest( 'section:not(.stack)' ) : null;
 			if( slide ) {
 				var scrollFirstHighlightIntoView = function() {
-					RevealHighlight.scrollHighlightedLineIntoView( block, scrollState, true );
+					Plugin.scrollHighlightedLineIntoView( block, scrollState, true );
 					slide.removeEventListener( 'visible', scrollFirstHighlightIntoView );
 				}
 				slide.addEventListener( 'visible', scrollFirstHighlightIntoView );
 			}
 
-			RevealHighlight.highlightLines( block );
+			Plugin.highlightLines( block );
 
 		}
 
@@ -229,7 +182,7 @@ var RevealHighlight = {
 				time = Math.min( time + 0.02, 1 );
 
 				// Update our eased scroll position
-				block.scrollTop = startTop + ( targetTop - startTop ) * RevealHighlight.easeInOutQuart( time );
+				block.scrollTop = startTop + ( targetTop - startTop ) * Plugin.easeInOutQuart( time );
 
 				// Keep animating unless we've reached the end
 				if( time < 1 ) {
@@ -284,7 +237,7 @@ var RevealHighlight = {
 	 */
 	highlightLines: function( block, linesToHighlight ) {
 
-		var highlightSteps = RevealHighlight.deserializeHighlightSteps( linesToHighlight || block.getAttribute( 'data-line-numbers' ) );
+		var highlightSteps = Plugin.deserializeHighlightSteps( linesToHighlight || block.getAttribute( 'data-line-numbers' ) );
 
 		if( highlightSteps.length ) {
 
@@ -320,7 +273,7 @@ var RevealHighlight = {
 	 * numbers to highlight.
 	 *
 	 * @example
-	 * RevealHighlight.deserializeHighlightSteps( '1,2|3,5-10' )
+	 * Plugin.deserializeHighlightSteps( '1,2|3,5-10' )
 	 * // [
 	 * //   [ { start: 1 }, { start: 2 } ],
 	 * //   [ { start: 3 }, { start: 5, end: 10 } ]
@@ -332,16 +285,16 @@ var RevealHighlight = {
 		highlightSteps = highlightSteps.replace( /\s/g, '' );
 
 		// Divide up our line number groups
-		highlightSteps = highlightSteps.split( RevealHighlight.HIGHLIGHT_STEP_DELIMITER );
+		highlightSteps = highlightSteps.split( Plugin.HIGHLIGHT_STEP_DELIMITER );
 
 		return highlightSteps.map( function( highlights ) {
 
-			return highlights.split( RevealHighlight.HIGHLIGHT_LINE_DELIMITER ).map( function( highlight ) {
+			return highlights.split( Plugin.HIGHLIGHT_LINE_DELIMITER ).map( function( highlight ) {
 
 				// Parse valid line numbers
 				if( /^[\d-]+$/.test( highlight ) ) {
 
-					highlight = highlight.split( RevealHighlight.HIGHLIGHT_LINE_RANGE_DELIMITER );
+					highlight = highlight.split( Plugin.HIGHLIGHT_LINE_RANGE_DELIMITER );
 
 					var lineStart = parseInt( highlight[0], 10 ),
 						lineEnd = parseInt( highlight[1], 10 );
@@ -384,7 +337,7 @@ var RevealHighlight = {
 
 				// Line range
 				if( typeof highlight.end === 'number' ) {
-					return highlight.start + RevealHighlight.HIGHLIGHT_LINE_RANGE_DELIMITER + highlight.end;
+					return highlight.start + Plugin.HIGHLIGHT_LINE_RANGE_DELIMITER + highlight.end;
 				}
 				// Single line
 				else if( typeof highlight.start === 'number' ) {
@@ -395,12 +348,59 @@ var RevealHighlight = {
 					return '';
 				}
 
-			} ).join( RevealHighlight.HIGHLIGHT_LINE_DELIMITER );
+			} ).join( Plugin.HIGHLIGHT_LINE_DELIMITER );
 
-		} ).join( RevealHighlight.HIGHLIGHT_STEP_DELIMITER );
+		} ).join( Plugin.HIGHLIGHT_STEP_DELIMITER );
 
 	}
 
 }
 
-export default RevealHighlight;
+// Function to perform a better "data-trim" on code snippets
+// Will slice an indentation amount on each line of the snippet (amount based on the line having the lowest indentation length)
+function betterTrim(snippetEl) {
+	// Helper functions
+	function trimLeft(val) {
+		// Adapted from https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/Trim#Polyfill
+		return val.replace(/^[\s\uFEFF\xA0]+/g, '');
+	}
+	function trimLineBreaks(input) {
+		var lines = input.split('\n');
+
+		// Trim line-breaks from the beginning
+		for (var i = 0; i < lines.length; i++) {
+			if (lines[i].trim() === '') {
+				lines.splice(i--, 1);
+			} else break;
+		}
+
+		// Trim line-breaks from the end
+		for (var i = lines.length-1; i >= 0; i--) {
+			if (lines[i].trim() === '') {
+				lines.splice(i, 1);
+			} else break;
+		}
+
+		return lines.join('\n');
+	}
+
+	// Main function for betterTrim()
+	return (function(snippetEl) {
+		var content = trimLineBreaks(snippetEl.innerHTML);
+		var lines = content.split('\n');
+		// Calculate the minimum amount to remove on each line start of the snippet (can be 0)
+		var pad = lines.reduce(function(acc, line) {
+			if (line.length > 0 && trimLeft(line).length > 0 && acc > line.length - trimLeft(line).length) {
+				return line.length - trimLeft(line).length;
+			}
+			return acc;
+		}, Number.POSITIVE_INFINITY);
+		// Slice each line with this amount
+		return lines.map(function(line, index) {
+			return line.slice(pad);
+		})
+		.join('\n');
+	})(snippetEl);
+}
+
+export default () => Plugin;

plugin/markdown/markdown.js

@@ -6,7 +6,7 @@
 
 import marked from './marked.js'
 
-export default {
+let Plugin = {
 
 	id: 'markdown',
 
@@ -15,6 +15,7 @@ export default {
 	 * current reveal.js deck.
 	 */
 	init: function( deck ) {
+
 		// This should no longer be needed, as long as the highlight.js
 		// plugin is included after the markdown plugin
 		// if( typeof window.hljs !== 'undefined' ) {
@@ -43,6 +44,8 @@ export default {
 
 };
 
+export default () => Plugin;
+
 var DEFAULT_SLIDE_SEPARATOR = '^\r?\n---\r?\n$',
 	DEFAULT_NOTES_SEPARATOR = 'notes?:',
 	DEFAULT_ELEMENT_ATTRIBUTES_SEPARATOR = '\\\.element\\\s*?(.+?)$',

plugin/math/math.js

@@ -4,7 +4,7 @@
  *
  * @author Hakim El Hattab
  */
-var RevealMath = (function(){
+let Plugin = (function(){
 
 	var options = Reveal.getConfig().math || {};
 	var mathjax = options.mathjax || 'https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.0/MathJax.js';
@@ -91,4 +91,4 @@ var RevealMath = (function(){
 
 })();
 
-export default RevealMath;
+export default () => Plugin;

plugin/notes/notes.js

@@ -9,7 +9,7 @@
  * 3. This window proceeds to send the current presentation state
  *    to the notes window
  */
-var RevealNotes = (function() {
+let Plugin = (function() {
 
     var notesPopup = null;
 
@@ -182,4 +182,4 @@ var RevealNotes = (function() {
 
 })();
 
-export default RevealNotes;
+export default () => Plugin;

plugin/search/search.js

@@ -5,7 +5,7 @@
  * By Jon Snyder <snyder.jon@gmail.com>, February 2013
  */
 
-var RevealSearch = (function() {
+var Plugin = (function() {
 
 	var matchedSlides;
 	var currentMatchedIndex;
@@ -218,4 +218,4 @@ function Hilitor(id, tag)
 	}
 })();
 
-export default RevealSearch;
+export default () => Plugin;

plugin/zoom/zoom.js

@@ -1,7 +1,7 @@
 /*!
  * reveal.js Zoom plugin
  */
-export default {
+var Plugin = {
 
 	id: 'zoom',
 
@@ -29,6 +29,8 @@ export default {
 
 };
 
+export default () => Plugin;
+
 /*!
  * zoom.js 0.3 (modified for use with reveal.js)
  * http://lab.hakim.se/zoom-js