new paused mode feature (closes #144), controls and progress DOM elements are no longer required in HTML

css/reveal.css

@@ -410,6 +410,7 @@ body {
 	margin-top: -320px;
 	padding: 20px 0px;
 	overflow: visible;
+	z-index: 1;
 	
 	text-align: center;
 
@@ -921,6 +922,33 @@ body {
 }
 
 
+/*********************************************
+ * PAUSED MODE
+ *********************************************/
+
+.reveal .pause-overlay {
+	position: absolute;
+	top: 0;
+	left: 0;
+	width: 100%;
+	height: 100%;
+	background: black;
+	visibility: hidden;
+	opacity: 0;
+	z-index: 100;
+
+	-webkit-transition: all 1s ease;
+	   -moz-transition: all 1s ease;
+	    -ms-transition: all 1s ease;
+	     -o-transition: all 1s ease;
+	        transition: all 1s ease;
+}
+.reveal.paused .pause-overlay {
+	visibility: visible;
+	opacity: 1;
+}
+
+
 /*********************************************
  * FALLBACK
  *********************************************/
@@ -945,10 +973,10 @@ body {
 
 
 /*********************************************
- * DEFAULT STATES
+ * BACKGROUND STATES
  *********************************************/
 
-.state-background {
+.reveal .state-background {
 	position: absolute;
 	width: 100%;
 	height: 100%;
@@ -960,13 +988,13 @@ body {
 	     -o-transition: background 800ms ease;
 	        transition: background 800ms ease;
 }
-.alert .state-background {
+.alert .reveal .state-background {
 	background: rgba( 200, 50, 30, 0.6 );
 }
-.soothe .state-background {
+.soothe .reveal .state-background {
 	background: rgba( 50, 200, 90, 0.4 );
 }
-.blackout .state-background {
+.blackout .reveal .state-background {
 	background: rgba( 0, 0, 0, 0.6 );
 }
 

index.html

@@ -34,9 +34,6 @@
 		
 		<div class="reveal">
 
-			<!-- Used to fade in a background when a specific slide state is reached -->
-			<div class="state-background"></div>
-			
 			<!-- Any section element inside of this container is displayed as a slide -->
 			<div class="slides">
 				<section>
@@ -278,6 +275,14 @@ function linkify( selector ) {
 					</script>
 				</section>
 				
+				<section>
+					<h2>Take a Moment</h2>
+					<p>
+						Press b or period on your keyboard to enter the 'paused' mode. This mode is helpful when you want to take disctracting slides off the screen 
+						during a presentaion.
+					</p>
+				</section>
+
 				<section>
 					<h2>Stellar Links</h2>
 					<ul>
@@ -310,17 +315,6 @@ function linkify( selector ) {
 					<h3>BY Hakim El Hattab / hakim.se</h3>
 				</section>
 			</div>
-
-			<!-- The navigational controls UI -->
-			<aside class="controls">
-				<a class="left" href="#">&#x25C4;</a>
-				<a class="right" href="#">&#x25BA;</a>
-				<a class="up" href="#">&#x25B2;</a>
-				<a class="down" href="#">&#x25BC;</a>
-			</aside>
-
-			<!-- Presentation progress bar -->
-			<div class="progress"><span></span></div>
 			
 		</div>
 
@@ -346,7 +340,7 @@ function linkify( selector ) {
 					{ src: 'lib/js/showdown.js', condition: function() { return !!document.querySelector( '[data-markdown]' ); } },
 					{ src: 'lib/js/data-markdown.js', condition: function() { return !!document.querySelector( '[data-markdown]' ); } },
 					{ src: '/socket.io/socket.io.js', async: true, condition: function() { return window.location.host === 'localhost:1947'; } },
-					{ src: 'plugin/speakernotes/client.js', async: true, condition: function() { return window.location.host === 'localhost:1947'; } },
+					{ src: 'plugin/speakernotes/client.js', async: true, condition: function() { return window.location.host === 'localhost:1947'; } }
 				]
 			});
 			

js/reveal.js

@@ -1,5 +1,5 @@
 /*!
- * reveal.js 2.1 r28
+ * reveal.js 2.1 r29
  * http://lab.hakim.se/reveal-js
  * MIT licensed
  * 
@@ -116,9 +116,61 @@ var Reveal = (function(){
 		// Copy options over to our config object
 		extend( config, options );
 
-		// Cache references to DOM elements
+		// Make sure we've got all the DOM elements we need
+		setupDOM();
+
+		// Hide the address bar in mobile browsers
+		hideAddressBar();
+
+		// Loads the dependencies and continues to #start() once done
+		load();
+		
+	}
+
+	/**
+	 * Finds and stores references to DOM elements which are 
+	 * required by the presentation. If a required element is 
+	 * not found, it is created.
+	 */
+	function setupDOM() {
+		// Cache references to key DOM elements
 		dom.theme = document.querySelector( '#theme' );
 		dom.wrapper = document.querySelector( '.reveal' );
+
+		// Progress bar
+		if( !dom.wrapper.querySelector( '.progress' ) && config.progress ) {
+			var progressElement = document.createElement( 'div' );
+			progressElement.classList.add( 'progress' );
+			progressElement.innerHTML = '<span></span>';
+			dom.wrapper.appendChild( progressElement );
+		}
+
+		// Arrow controls
+		if( !dom.wrapper.querySelector( '.controls' ) && config.controls ) {
+			var controlsElement = document.createElement( 'aside' );
+			controlsElement.classList.add( 'controls' );
+			controlsElement.innerHTML = '<a class="left" href="#">&#x25C4;</a>' +
+										'<a class="right" href="#">&#x25BA;</a>' +
+										'<a class="up" href="#">&#x25B2;</a>' +
+										'<a class="down" href="#">&#x25BC;</a>';
+			dom.wrapper.appendChild( controlsElement );
+		}
+
+		// Presentation background element
+		if( !dom.wrapper.querySelector( '.state-background' ) ) {
+			var backgroundElement = document.createElement( 'div' );
+			backgroundElement.classList.add( 'state-background' );
+			dom.wrapper.appendChild( backgroundElement );
+		}
+
+		// Overlay graphic which is displayed during the paused mode
+		if( !dom.wrapper.querySelector( '.pause-overlay' ) ) {
+			var pausedElement = document.createElement( 'div' );
+			pausedElement.classList.add( 'pause-overlay' );
+			dom.wrapper.appendChild( pausedElement );
+		}
+
+		// Cache references to elements
 		dom.progress = document.querySelector( '.reveal .progress' );
 		dom.progressbar = document.querySelector( '.reveal .progress span' );
 
@@ -129,11 +181,12 @@ var Reveal = (function(){
 			dom.controlsUp = document.querySelector( '.reveal .controls .up' );
 			dom.controlsDown = document.querySelector( '.reveal .controls .down' );
 		}
+	}
 
-		// Loads the dependencies and continues to #start() once done
-		load();
-
-		// Set up hiding of the browser address bar
+	/**
+	 * Hides the address bar if we're on a mobile device.
+	 */
+	function hideAddressBar() {
 		if( navigator.userAgent.match( /(iphone|ipod|android)/i ) ) {
 			// Give the page some scrollable overflow
 			document.documentElement.style.overflow = 'scroll';
@@ -143,7 +196,6 @@ var Reveal = (function(){
 			window.addEventListener( 'load', removeAddressBar, false );
 			window.addEventListener( 'orientationchange', removeAddressBar, false );
 		}
-		
 	}
 
 	/**
@@ -378,9 +430,11 @@ var Reveal = (function(){
 			// end
 			case 35: navigateTo( Number.MAX_VALUE ); break;
 			// space
-			case 32: overviewIsActive() ? deactivateOverview() : navigateNext(); break;
+			case 32: isOverviewActive() ? deactivateOverview() : navigateNext(); break;
 			// return
-			case 13: overviewIsActive() ? deactivateOverview() : triggered = false; break;
+			case 13: isOverviewActive() ? deactivateOverview() : triggered = false; break;
+			// b, period
+			case 66: case 190: togglePause(); break;
 			default:
 				triggered = false;
 		}
@@ -532,7 +586,7 @@ var Reveal = (function(){
 	function onOverviewSlideClicked( event ) {
 		// TODO There's a bug here where the event listeners are not 
 		// removed after deactivating the overview.
-		if( overviewIsActive() ) {
+		if( isOverviewActive() ) {
 			event.preventDefault();
 
 			deactivateOverview();
@@ -652,16 +706,66 @@ var Reveal = (function(){
 		}
 	}
 
+	/**
+	 * Toggles the slide overview mode on and off.
+	 *
+	 * @param {Boolean} override Optional flag which overrides the 
+	 * toggle logic and forcibly sets the desired state. True means 
+	 * overview is open, false means it's closed.
+	 */
+	function toggleOverview( override ) {
+		if( typeof override === 'boolean' ) {
+			override ? activateOverview() : deactivateOverview();
+		}
+		else {
+			isOverviewActive() ? deactivateOverview() : activateOverview();
+		}
+	}
+
 	/**
 	 * Checks if the overview is currently active.
 	 * 
 	 * @return {Boolean} true if the overview is active,
 	 * false otherwise
 	 */
-	function overviewIsActive() {
+	function isOverviewActive() {
 		return dom.wrapper.classList.contains( 'overview' );
 	}
 
+	/**
+	 * Enters the paused mode which fades everything on screen to 
+	 * black.
+	 */
+	function pause() {
+		dom.wrapper.classList.add( 'paused' );
+	}
+
+	/**
+	 * Exits from the paused mode.
+	 */
+	function resume() {
+		dom.wrapper.classList.remove( 'paused' );
+	}
+
+	/**
+	 * Toggles the paused mode on and off.
+	 */
+	function togglePause() {
+		if( isPaused() ) {
+			resume();
+		}
+		else {
+			pause();
+		}
+	}
+
+	/**
+	 * Checks if we are currently in the paused mode.
+	 */
+	function isPaused() {
+		return dom.wrapper.classList.contains( 'paused' );
+	}
+
 	/**
 	 * Updates one dimension of slides by showing the slide
 	 * with the specified index.
@@ -701,7 +805,7 @@ var Reveal = (function(){
 
 				// Optimization; hide all slides that are three or more steps 
 				// away from the present slide
-				if( overviewIsActive() === false ) {
+				if( isOverviewActive() === false ) {
 					// The distance loops so that it measures 1 between the first
 					// and last slides
 					var distance = Math.abs( ( index - i ) % ( slidesLength - 3 ) ) || 0;
@@ -801,7 +905,7 @@ var Reveal = (function(){
 		}
 
 		// If the overview is active, re-activate it to update positions
-		if( overviewIsActive() ) {
+		if( isOverviewActive() ) {
 			activateOverview();
 		}
 
@@ -1024,28 +1128,28 @@ var Reveal = (function(){
 	
 	function navigateLeft() {
 		// Prioritize hiding fragments
-		if( overviewIsActive() || previousFragment() === false ) {
+		if( isOverviewActive() || previousFragment() === false ) {
 			slide( indexh - 1, 0 );
 		}
 	}
 
 	function navigateRight() {
 		// Prioritize revealing fragments
-		if( overviewIsActive() || nextFragment() === false ) {
+		if( isOverviewActive() || nextFragment() === false ) {
 			slide( indexh + 1, 0 );
 		}
 	}
 
 	function navigateUp() {
 		// Prioritize hiding fragments
-		if( overviewIsActive() || previousFragment() === false ) {
+		if( isOverviewActive() || previousFragment() === false ) {
 			slide( indexh, indexv - 1 );
 		}
 	}
 
 	function navigateDown() {
 		// Prioritize revealing fragments
-		if( overviewIsActive() || nextFragment() === false ) {
+		if( isOverviewActive() || nextFragment() === false ) {
 			slide( indexh, indexv + 1 );
 		}
 	}
@@ -1088,22 +1192,6 @@ var Reveal = (function(){
 		// another timeout
 		cueAutoSlide();
 	}
-
-	/**
-	 * Toggles the slide overview mode on and off.
-	 *
-	 * @param {Boolean} override Optional flag which overrides the 
-	 * toggle logic and forcibly sets the desired state. True means 
-	 * overview is open, false means it's closed.
-	 */
-	function toggleOverview( override ) {
-		if( typeof override === 'boolean' ) {
-			override ? activateOverview() : deactivateOverview();
-		}
-		else {
-			overviewIsActive() ? deactivateOverview() : activateOverview();
-		}
-	}
 	
 	// Expose some methods publicly
 	return {