add color, constant and loader modules

js/controllers/plugins.js

@@ -1,4 +1,4 @@
-import { loadScript } from './../utils/util.js'
+import { loadScript } from '../utils/loader.js'
 
 /**
  * Manages loading and registering of reveal.js plugins.

js/reveal.js

@@ -1,6 +1,12 @@
 import Plugins from './controllers/plugins.js'
 import Playback from './components/playback.js'
 import defaultConfig from './config.js'
+import {
+	SLIDES_SELECTOR,
+	HORIZONTAL_SLIDES_SELECTOR,
+	VERTICAL_SLIDES_SELECTOR,
+	POST_MESSAGE_METHOD_BLACKLIST
+} from './utils/constants.js'
 import {
 	extend,
 	toArray,
@@ -9,10 +15,9 @@ import {
 	transformElement,
 	injectStyleSheet,
 	closestParent,
-	colorToRgb,
-	colorBrightness,
 	enterFullscreen
 } from './utils/util.js'
+import { colorToRgb, colorBrightness } from './utils/color.js'
 
 /**
  * reveal.js
@@ -28,16 +33,8 @@ export default function( revealElement, options ) {
 	// The reveal.js version
 	const VERSION = '4.0.0-dev';
 
-	const SLIDES_SELECTOR = '.slides section';
-	const HORIZONTAL_SLIDES_SELECTOR = '.slides>section';
-	const VERTICAL_SLIDES_SELECTOR = '.slides>section.present>section';
-	const HOME_SLIDE_SELECTOR = '.slides>section:first-of-type';
-
 	const UA = navigator.userAgent;
 
-	// Methods that may not be invoked via the postMessage API
-	const POST_MESSAGE_METHOD_BLACKLIST = /registerPlugin|registerKeyboardShortcut|addKeyBinding|addEventListener/;
-
 	// Configuration defaults, can be overridden at initialization time
 	let config,
 
@@ -147,7 +144,7 @@ export default function( revealElement, options ) {
 	function initialize() {
 
 		if( !revealElement ) {
-			console.warn( 'reveal.js must be instantiated with a valid .reveal element' );
+			console.warn( 'reveal.js can not initialize without a valid .reveal element.' );
 			return;
 		}
 
@@ -160,16 +157,10 @@ export default function( revealElement, options ) {
 		// Force a layout when the whole page, incl fonts, has loaded
 		window.addEventListener( 'load', layout, false );
 
-		let query = Reveal.getQueryHash();
-
-		// Do not accept new dependencies via query config to avoid
-		// the potential of malicious script injection
-		if( typeof query['dependencies'] !== 'undefined' ) delete query['dependencies'];
-
 		// Copy options over to our config object
-		config = { ...defaultConfig, ...options, ...query };
+		config = { ...defaultConfig, ...options, ...Reveal.getQueryHash() };
 
-		// Load plugins and move on to #start() once done
+		// Load plugins then move on to #start()
 		plugins.load( config.dependencies ).then( start )
 
 		return Reveal;
@@ -5471,7 +5462,7 @@ export default function( revealElement, options ) {
 
 
 	Reveal = {
-		VERSION: VERSION,
+		VERSION,
 
 		initialize,
 		configure,
@@ -5623,6 +5614,10 @@ export default function( revealElement, options ) {
 				query[ i ] = deserialize( unescape( value ) );
 			}
 
+			// Do not accept new dependencies via query config to avoid
+			// the potential of malicious script injection
+			if( typeof query['dependencies'] !== 'undefined' ) delete query['dependencies'];
+
 			return query;
 		},
 

js/utils/color.js

@@ -0,0 +1,77 @@
+/**
+ * Converts various color input formats to an {r:0,g:0,b:0} object.
+ *
+ * @param {string} color The string representation of a color
+ * @example
+ * colorToRgb('#000');
+ * @example
+ * colorToRgb('#000000');
+ * @example
+ * colorToRgb('rgb(0,0,0)');
+ * @example
+ * colorToRgb('rgba(0,0,0)');
+ *
+ * @return {{r: number, g: number, b: number, [a]: number}|null}
+ */
+export const colorToRgb = ( color ) => {
+
+	let hex3 = color.match( /^#([0-9a-f]{3})$/i );
+	if( hex3 && hex3[1] ) {
+		hex3 = hex3[1];
+		return {
+			r: parseInt( hex3.charAt( 0 ), 16 ) * 0x11,
+			g: parseInt( hex3.charAt( 1 ), 16 ) * 0x11,
+			b: parseInt( hex3.charAt( 2 ), 16 ) * 0x11
+		};
+	}
+
+	let hex6 = color.match( /^#([0-9a-f]{6})$/i );
+	if( hex6 && hex6[1] ) {
+		hex6 = hex6[1];
+		return {
+			r: parseInt( hex6.substr( 0, 2 ), 16 ),
+			g: parseInt( hex6.substr( 2, 2 ), 16 ),
+			b: parseInt( hex6.substr( 4, 2 ), 16 )
+		};
+	}
+
+	let rgb = color.match( /^rgb\s*\(\s*(\d+)\s*,\s*(\d+)\s*,\s*(\d+)\s*\)$/i );
+	if( rgb ) {
+		return {
+			r: parseInt( rgb[1], 10 ),
+			g: parseInt( rgb[2], 10 ),
+			b: parseInt( rgb[3], 10 )
+		};
+	}
+
+	let rgba = color.match( /^rgba\s*\(\s*(\d+)\s*,\s*(\d+)\s*,\s*(\d+)\s*\,\s*([\d]+|[\d]*.[\d]+)\s*\)$/i );
+	if( rgba ) {
+		return {
+			r: parseInt( rgba[1], 10 ),
+			g: parseInt( rgba[2], 10 ),
+			b: parseInt( rgba[3], 10 ),
+			a: parseFloat( rgba[4] )
+		};
+	}
+
+	return null;
+
+}
+
+/**
+ * Calculates brightness on a scale of 0-255.
+ *
+ * @param {string} color See colorToRgb for supported formats.
+ * @see {@link colorToRgb}
+ */
+export const colorBrightness = ( color ) => {
+
+	if( typeof color === 'string' ) color = colorToRgb( color );
+
+	if( color ) {
+		return ( color.r * 299 + color.g * 587 + color.b * 114 ) / 1000;
+	}
+
+	return null;
+
+}

js/utils/constants.js

@@ -0,0 +1,7 @@
+
+export const SLIDES_SELECTOR = '.slides section';
+export const HORIZONTAL_SLIDES_SELECTOR = '.slides>section';
+export const VERTICAL_SLIDES_SELECTOR = '.slides>section.present>section';
+
+// Methods that may not be invoked via the postMessage API
+export const POST_MESSAGE_METHOD_BLACKLIST = /registerPlugin|registerKeyboardShortcut|addKeyBinding|addEventListener/;

js/utils/loader.js

@@ -0,0 +1,46 @@
+/**
+ * Loads a JavaScript file from the given URL and executes it.
+ *
+ * @param {string} url Address of the .js file to load
+ * @param {function} callback Method to invoke when the script
+ * has loaded and executed
+ */
+export const loadScript = ( url, callback ) => {
+
+	const script = document.createElement( 'script' );
+	script.type = 'text/javascript';
+	script.async = false;
+	script.defer = false;
+	script.src = url;
+
+	if( typeof callback === 'function' ) {
+
+		// Success callback
+		script.onload = script.onreadystatechange = event => {
+			if( event.type === 'load' || /loaded|complete/.test( script.readyState ) ) {
+
+				// Kill event listeners
+				script.onload = script.onreadystatechange = script.onerror = null;
+
+				callback();
+
+			}
+		};
+
+		// Error callback
+		script.onerror = err => {
+
+			// Kill event listeners
+			script.onload = script.onreadystatechange = script.onerror = null;
+
+			callback( new Error( 'Failed loading script: ' + script.src + '\n' + err ) );
+
+		};
+
+	}
+
+	// Append the script at the end of <head>
+	const head = document.querySelector( 'head' );
+	head.insertBefore( script, head.lastChild );
+
+}

js/utils/util.js

@@ -112,84 +112,6 @@ export const closestParent = ( target, selector ) => {
 
 }
 
-/**
- * Converts various color input formats to an {r:0,g:0,b:0} object.
- *
- * @param {string} color The string representation of a color
- * @example
- * colorToRgb('#000');
- * @example
- * colorToRgb('#000000');
- * @example
- * colorToRgb('rgb(0,0,0)');
- * @example
- * colorToRgb('rgba(0,0,0)');
- *
- * @return {{r: number, g: number, b: number, [a]: number}|null}
- */
-export const colorToRgb = ( color ) => {
-
-	let hex3 = color.match( /^#([0-9a-f]{3})$/i );
-	if( hex3 && hex3[1] ) {
-		hex3 = hex3[1];
-		return {
-			r: parseInt( hex3.charAt( 0 ), 16 ) * 0x11,
-			g: parseInt( hex3.charAt( 1 ), 16 ) * 0x11,
-			b: parseInt( hex3.charAt( 2 ), 16 ) * 0x11
-		};
-	}
-
-	let hex6 = color.match( /^#([0-9a-f]{6})$/i );
-	if( hex6 && hex6[1] ) {
-		hex6 = hex6[1];
-		return {
-			r: parseInt( hex6.substr( 0, 2 ), 16 ),
-			g: parseInt( hex6.substr( 2, 2 ), 16 ),
-			b: parseInt( hex6.substr( 4, 2 ), 16 )
-		};
-	}
-
-	let rgb = color.match( /^rgb\s*\(\s*(\d+)\s*,\s*(\d+)\s*,\s*(\d+)\s*\)$/i );
-	if( rgb ) {
-		return {
-			r: parseInt( rgb[1], 10 ),
-			g: parseInt( rgb[2], 10 ),
-			b: parseInt( rgb[3], 10 )
-		};
-	}
-
-	let rgba = color.match( /^rgba\s*\(\s*(\d+)\s*,\s*(\d+)\s*,\s*(\d+)\s*\,\s*([\d]+|[\d]*.[\d]+)\s*\)$/i );
-	if( rgba ) {
-		return {
-			r: parseInt( rgba[1], 10 ),
-			g: parseInt( rgba[2], 10 ),
-			b: parseInt( rgba[3], 10 ),
-			a: parseFloat( rgba[4] )
-		};
-	}
-
-	return null;
-
-}
-
-/**
- * Calculates brightness on a scale of 0-255.
- *
- * @param {string} color See colorToRgb for supported formats.
- * @see {@link colorToRgb}
- */
-export const colorBrightness = ( color ) => {
-
-	if( typeof color === 'string' ) color = colorToRgb( color );
-
-	if( color ) {
-		return ( color.r * 299 + color.g * 587 + color.b * 114 ) / 1000;
-	}
-
-	return null;
-
-}
-
 /**
  * Handling the fullscreen functionality via the fullscreen API
  *
@@ -230,51 +152,4 @@ export const injectStyleSheet = ( value ) => {
 	}
 	document.getElementsByTagName( 'head' )[0].appendChild( tag );
 
-}
-
-/**
- * Loads a JavaScript file from the given URL and executes it.
- *
- * @param {string} url Address of the .js file to load
- * @param {function} callback Method to invoke when the script
- * has loaded and executed
- */
-export const loadScript = ( url, callback ) => {
-
-	const script = document.createElement( 'script' );
-	script.type = 'text/javascript';
-	script.async = false;
-	script.defer = false;
-	script.src = url;
-
-	if( typeof callback === 'function' ) {
-
-		// Success callback
-		script.onload = script.onreadystatechange = event => {
-			if( event.type === 'load' || /loaded|complete/.test( script.readyState ) ) {
-
-				// Kill event listeners
-				script.onload = script.onreadystatechange = script.onerror = null;
-
-				callback();
-
-			}
-		};
-
-		// Error callback
-		script.onerror = err => {
-
-			// Kill event listeners
-			script.onload = script.onreadystatechange = script.onerror = null;
-
-			callback( new Error( 'Failed loading script: ' + script.src + '\n' + err ) );
-
-		};
-
-	}
-
-	// Append the script at the end of <head>
-	const head = document.querySelector( 'head' );
-	head.insertBefore( script, head.lastChild );
-
 }