allow multiple control elements, document usage of global controls (#184, #204)

README.md

@@ -186,6 +186,19 @@ It's easy to link between slides. The first example below targets the index of a
 <a href="#/2/2">Link</a>
 <a href="#/some-slide">Link</a>
 ```
+
+You can also add relative navigation links, similar to the built in reveal.js controls, by appending one of the following classes on any element. Note that each element is automatically given an ```enabled``` class when its a valid navigation route based on the current slide.
+
+```html
+<a href="#" class="navigate-left">
+<a href="#" class="navigate-right">
+<a href="#" class="navigate-up">
+<a href="#" class="navigate-down">
+<a href="#" class="navigate-prev"> <!-- Previous vertical slide or horizontal slide -->
+<a href="#" class="navigate-next"> <!-- Next vertical or horizontal slide -->
+```
+
+
 ### Fullscreen mode
 Just press »F« on your keyboard to show your presentation in fullscreen mode. Press the »ESC« key to exit fullscreen mode.
 

css/reveal.css

@@ -346,14 +346,14 @@ body {
 	margin-top: 1px;
 }
 
-.reveal .controls div.left {
+.reveal .controls div.navigate-left {
 	top: 42px;
 
 	border-right-width: 22px;
 	border-right-color: #eee;
 }
 
-.reveal .controls div.right {
+.reveal .controls div.navigate-right {
 	left: 74px;
 	top: 42px;
 
@@ -361,14 +361,14 @@ body {
 	border-left-color: #eee;
 }
 
-.reveal .controls div.up {
+.reveal .controls div.navigate-up {
 	left: 42px;
 
 	border-bottom-width: 22px;
 	border-bottom-color: #eee;
 }
 
-.reveal .controls div.down {
+.reveal .controls div.navigate-down {
 	left: 42px;
 	top: 74px;
 

css/theme/beige.css

@@ -110,39 +110,39 @@ body {
 /*********************************************
  * NAVIGATION CONTROLS
  *********************************************/
-.reveal .controls div.left,
-.reveal .controls div.left.enabled {
+.reveal .controls div.navigate-left,
+.reveal .controls div.navigate-left.enabled {
   border-right-color: #8b743d;
 }
 
-.reveal .controls div.right,
-.reveal .controls div.right.enabled {
+.reveal .controls div.navigate-right,
+.reveal .controls div.navigate-right.enabled {
   border-left-color: #8b743d;
 }
 
-.reveal .controls div.up,
-.reveal .controls div.up.enabled {
+.reveal .controls div.navigate-up,
+.reveal .controls div.navigate-up.enabled {
   border-bottom-color: #8b743d;
 }
 
-.reveal .controls div.down,
-.reveal .controls div.down.enabled {
+.reveal .controls div.navigate-down,
+.reveal .controls div.navigate-down.enabled {
   border-top-color: #8b743d;
 }
 
-.reveal .controls div.left.enabled:hover {
+.reveal .controls div.navigate-left.enabled:hover {
   border-right-color: #c0a86e;
 }
 
-.reveal .controls div.right.enabled:hover {
+.reveal .controls div.navigate-right.enabled:hover {
   border-left-color: #c0a86e;
 }
 
-.reveal .controls div.up.enabled:hover {
+.reveal .controls div.navigate-up.enabled:hover {
   border-bottom-color: #c0a86e;
 }
 
-.reveal .controls div.down.enabled:hover {
+.reveal .controls div.navigate-down.enabled:hover {
   border-top-color: #c0a86e;
 }
 

css/theme/default.css

@@ -110,39 +110,39 @@ body {
 /*********************************************
  * NAVIGATION CONTROLS
  *********************************************/
-.reveal .controls div.left,
-.reveal .controls div.left.enabled {
+.reveal .controls div.navigate-left,
+.reveal .controls div.navigate-left.enabled {
   border-right-color: #13daec;
 }
 
-.reveal .controls div.right,
-.reveal .controls div.right.enabled {
+.reveal .controls div.navigate-right,
+.reveal .controls div.navigate-right.enabled {
   border-left-color: #13daec;
 }
 
-.reveal .controls div.up,
-.reveal .controls div.up.enabled {
+.reveal .controls div.navigate-up,
+.reveal .controls div.navigate-up.enabled {
   border-bottom-color: #13daec;
 }
 
-.reveal .controls div.down,
-.reveal .controls div.down.enabled {
+.reveal .controls div.navigate-down,
+.reveal .controls div.navigate-down.enabled {
   border-top-color: #13daec;
 }
 
-.reveal .controls div.left.enabled:hover {
+.reveal .controls div.navigate-left.enabled:hover {
   border-right-color: #71e9f4;
 }
 
-.reveal .controls div.right.enabled:hover {
+.reveal .controls div.navigate-right.enabled:hover {
   border-left-color: #71e9f4;
 }
 
-.reveal .controls div.up.enabled:hover {
+.reveal .controls div.navigate-up.enabled:hover {
   border-bottom-color: #71e9f4;
 }
 
-.reveal .controls div.down.enabled:hover {
+.reveal .controls div.navigate-down.enabled:hover {
   border-top-color: #71e9f4;
 }
 

css/theme/serif.css

@@ -97,39 +97,39 @@ body {
 /*********************************************
  * NAVIGATION CONTROLS
  *********************************************/
-.reveal .controls div.left,
-.reveal .controls div.left.enabled {
+.reveal .controls div.navigate-left,
+.reveal .controls div.navigate-left.enabled {
   border-right-color: #51483d;
 }
 
-.reveal .controls div.right,
-.reveal .controls div.right.enabled {
+.reveal .controls div.navigate-right,
+.reveal .controls div.navigate-right.enabled {
   border-left-color: #51483d;
 }
 
-.reveal .controls div.up,
-.reveal .controls div.up.enabled {
+.reveal .controls div.navigate-up,
+.reveal .controls div.navigate-up.enabled {
   border-bottom-color: #51483d;
 }
 
-.reveal .controls div.down,
-.reveal .controls div.down.enabled {
+.reveal .controls div.navigate-down,
+.reveal .controls div.navigate-down.enabled {
   border-top-color: #51483d;
 }
 
-.reveal .controls div.left.enabled:hover {
+.reveal .controls div.navigate-left.enabled:hover {
   border-right-color: #8b7c69;
 }
 
-.reveal .controls div.right.enabled:hover {
+.reveal .controls div.navigate-right.enabled:hover {
   border-left-color: #8b7c69;
 }
 
-.reveal .controls div.up.enabled:hover {
+.reveal .controls div.navigate-up.enabled:hover {
   border-bottom-color: #8b7c69;
 }
 
-.reveal .controls div.down.enabled:hover {
+.reveal .controls div.navigate-down.enabled:hover {
   border-top-color: #8b7c69;
 }
 

css/theme/simple.css

@@ -99,39 +99,39 @@ body {
 /*********************************************
  * NAVIGATION CONTROLS
  *********************************************/
-.reveal .controls div.left,
-.reveal .controls div.left.enabled {
+.reveal .controls div.navigate-left,
+.reveal .controls div.navigate-left.enabled {
   border-right-color: darkblue;
 }
 
-.reveal .controls div.right,
-.reveal .controls div.right.enabled {
+.reveal .controls div.navigate-right,
+.reveal .controls div.navigate-right.enabled {
   border-left-color: darkblue;
 }
 
-.reveal .controls div.up,
-.reveal .controls div.up.enabled {
+.reveal .controls div.navigate-up,
+.reveal .controls div.navigate-up.enabled {
   border-bottom-color: darkblue;
 }
 
-.reveal .controls div.down,
-.reveal .controls div.down.enabled {
+.reveal .controls div.navigate-down,
+.reveal .controls div.navigate-down.enabled {
   border-top-color: darkblue;
 }
 
-.reveal .controls div.left.enabled:hover {
+.reveal .controls div.navigate-left.enabled:hover {
   border-right-color: #0000f1;
 }
 
-.reveal .controls div.right.enabled:hover {
+.reveal .controls div.navigate-right.enabled:hover {
   border-left-color: #0000f1;
 }
 
-.reveal .controls div.up.enabled:hover {
+.reveal .controls div.navigate-up.enabled:hover {
   border-bottom-color: #0000f1;
 }
 
-.reveal .controls div.down.enabled:hover {
+.reveal .controls div.navigate-down.enabled:hover {
   border-top-color: #0000f1;
 }
 

css/theme/sky.css

@@ -103,39 +103,39 @@ body {
 /*********************************************
  * NAVIGATION CONTROLS
  *********************************************/
-.reveal .controls div.left,
-.reveal .controls div.left.enabled {
+.reveal .controls div.navigate-left,
+.reveal .controls div.navigate-left.enabled {
   border-right-color: #3b759e;
 }
 
-.reveal .controls div.right,
-.reveal .controls div.right.enabled {
+.reveal .controls div.navigate-right,
+.reveal .controls div.navigate-right.enabled {
   border-left-color: #3b759e;
 }
 
-.reveal .controls div.up,
-.reveal .controls div.up.enabled {
+.reveal .controls div.navigate-up,
+.reveal .controls div.navigate-up.enabled {
   border-bottom-color: #3b759e;
 }
 
-.reveal .controls div.down,
-.reveal .controls div.down.enabled {
+.reveal .controls div.navigate-down,
+.reveal .controls div.navigate-down.enabled {
   border-top-color: #3b759e;
 }
 
-.reveal .controls div.left.enabled:hover {
+.reveal .controls div.navigate-left.enabled:hover {
   border-right-color: #74a7cb;
 }
 
-.reveal .controls div.right.enabled:hover {
+.reveal .controls div.navigate-right.enabled:hover {
   border-left-color: #74a7cb;
 }
 
-.reveal .controls div.up.enabled:hover {
+.reveal .controls div.navigate-up.enabled:hover {
   border-bottom-color: #74a7cb;
 }
 
-.reveal .controls div.down.enabled:hover {
+.reveal .controls div.navigate-down.enabled:hover {
   border-top-color: #74a7cb;
 }
 

css/theme/template/theme.scss

@@ -106,39 +106,39 @@ body {
  * NAVIGATION CONTROLS
  *********************************************/
 
-.reveal .controls div.left,
-.reveal .controls div.left.enabled {
+.reveal .controls div.navigate-left,
+.reveal .controls div.navigate-left.enabled {
 	border-right-color: $linkColor;
 }
 
-.reveal .controls div.right,
-.reveal .controls div.right.enabled {
+.reveal .controls div.navigate-right,
+.reveal .controls div.navigate-right.enabled {
 	border-left-color: $linkColor;
 }
 
-.reveal .controls div.up,
-.reveal .controls div.up.enabled {
+.reveal .controls div.navigate-up,
+.reveal .controls div.navigate-up.enabled {
 	border-bottom-color: $linkColor;
 }
 
-.reveal .controls div.down,
-.reveal .controls div.down.enabled {
+.reveal .controls div.navigate-down,
+.reveal .controls div.navigate-down.enabled {
 	border-top-color: $linkColor;
 }
 
-.reveal .controls div.left.enabled:hover {
+.reveal .controls div.navigate-left.enabled:hover {
 	border-right-color: $linkColorHover;
 }
 
-.reveal .controls div.right.enabled:hover {
+.reveal .controls div.navigate-right.enabled:hover {
 	border-left-color: $linkColorHover;
 }
 
-.reveal .controls div.up.enabled:hover {
+.reveal .controls div.navigate-up.enabled:hover {
 	border-bottom-color: $linkColorHover;
 }
 
-.reveal .controls div.down.enabled:hover {
+.reveal .controls div.navigate-down.enabled:hover {
 	border-top-color: $linkColorHover;
 }
 

index.html

@@ -61,9 +61,9 @@
 						<h2>Vertical Slides</h2>
 						<p>
 							Slides can be nested inside of other slides,
-							try pressing <a href="#/2/1">down</a>.
+							try pressing <a href="#" class="navigate-down">down</a>.
 						</p>
-						<a href="#/2/1" class="image">
+						<a href="#" class="image navigate-down">
 							<img width="178" height="238" src="https://s3.amazonaws.com/hakim-static/reveal-js/arrow.png" alt="Down arrow">
 						</a>
 					</section>
@@ -181,20 +181,20 @@
 							will be added as a class to the document element when the slide is open. This lets you
 							apply broader style changes, like switching the background.
 						</p>
-						<a href="#/7/1" class="image">
+						<a href="#" class="image navigate-down">
 							<img width="178" height="238" src="https://s3.amazonaws.com/hakim-static/reveal-js/arrow.png" alt="Down arrow">
 						</a>
 					</section>
 					<section data-state="blackout">
 						<h2>"blackout"</h2>
-						<a href="#/7/2" class="image">
+						<a href="#" class="image navigate-down">
 							<img width="178" height="238" src="https://s3.amazonaws.com/hakim-static/reveal-js/arrow.png" alt="Down arrow">
 						</a>
 					</section>
 					<section data-state="soothe">
 						<h2>"soothe"</h2>
-						<a href="#/7/0" class="image">
-							<img width="178" height="238" src="https://s3.amazonaws.com/hakim-static/reveal-js/arrow.png" alt="Up arrow" style="-webkit-transform: rotate(180deg);">
+						<a href="#" class="image navigate-next">
+							<img width="178" height="238" src="https://s3.amazonaws.com/hakim-static/reveal-js/arrow.png" alt="Up arrow" style="-webkit-transform: rotate(-90deg);">
 						</a>
 					</section>
 				</section>
@@ -340,7 +340,7 @@ function linkify( selector ) {
 		</div>
 
 		<script src="lib/js/head.min.js"></script>
-		<script src="js/reveal.min.js"></script>
+		<script src="js/reveal.js"></script>
 
 		<script>
 

js/reveal.js

@@ -153,10 +153,10 @@ var Reveal = (function(){
 		if( !dom.wrapper.querySelector( '.controls' ) && config.controls ) {
 			var controlsElement = document.createElement( 'aside' );
 			controlsElement.classList.add( 'controls' );
-			controlsElement.innerHTML = '<div class="left"></div>' +
-										'<div class="right"></div>' +
-										'<div class="up"></div>' +
-										'<div class="down"></div>';
+			controlsElement.innerHTML = '<div class="navigate-left"></div>' +
+										'<div class="navigate-right"></div>' +
+										'<div class="navigate-up"></div>' +
+										'<div class="navigate-down"></div>';
 			dom.wrapper.appendChild( controlsElement );
 		}
 
@@ -180,10 +180,14 @@ var Reveal = (function(){
 
 		if ( config.controls ) {
 			dom.controls = document.querySelector( '.reveal .controls' );
-			dom.controlsLeft = document.querySelector( '.reveal .controls .left' );
-			dom.controlsRight = document.querySelector( '.reveal .controls .right' );
-			dom.controlsUp = document.querySelector( '.reveal .controls .up' );
-			dom.controlsDown = document.querySelector( '.reveal .controls .down' );
+
+			// There can be multiple instances of controls throughout the page
+			dom.controlsLeft = toArray( document.querySelectorAll( '.navigate-left' ) );
+			dom.controlsRight = toArray( document.querySelectorAll( '.navigate-right' ) );
+			dom.controlsUp = toArray( document.querySelectorAll( '.navigate-up' ) );
+			dom.controlsDown = toArray( document.querySelectorAll( '.navigate-down' ) );
+			dom.controlsPrev = toArray( document.querySelectorAll( '.navigate-prev' ) );
+			dom.controlsNext = toArray( document.querySelectorAll( '.navigate-next' ) );
 		}
 	}
 
@@ -354,10 +358,12 @@ var Reveal = (function(){
 		}
 
 		if ( config.controls && dom.controls ) {
-			dom.controlsLeft.addEventListener( 'click', preventAndForward( navigateLeft ), false );
-			dom.controlsRight.addEventListener( 'click', preventAndForward( navigateRight ), false );
-			dom.controlsUp.addEventListener( 'click', preventAndForward( navigateUp ), false );
-			dom.controlsDown.addEventListener( 'click', preventAndForward( navigateDown ), false );
+			dom.controlsLeft.forEach( function( el ) { 		el.addEventListener( 'click', preventAndForward( navigateLeft ), false ); 		} );
+			dom.controlsRight.forEach( function( el ) { 	el.addEventListener( 'click', preventAndForward( navigateRight ), false ); 		} );
+			dom.controlsUp.forEach( function( el ) { 		el.addEventListener( 'click', preventAndForward( navigateUp ), false ); 		} );
+			dom.controlsDown.forEach( function( el ) { 		el.addEventListener( 'click', preventAndForward( navigateDown ), false ); 		} );
+			dom.controlsPrev.forEach( function( el ) { 		el.addEventListener( 'click', preventAndForward( navigatePrev ), false ); 		} );
+			dom.controlsNext.forEach( function( el ) { 		el.addEventListener( 'click', preventAndForward( navigateNext ), false ); 		} );
 		}
 	}
 
@@ -377,10 +383,12 @@ var Reveal = (function(){
 		}
 
 		if ( config.controls && dom.controls ) {
-			dom.controlsLeft.removeEventListener( 'click', preventAndForward( navigateLeft ), false );
-			dom.controlsRight.removeEventListener( 'click', preventAndForward( navigateRight ), false );
-			dom.controlsUp.removeEventListener( 'click', preventAndForward( navigateUp ), false );
-			dom.controlsDown.removeEventListener( 'click', preventAndForward( navigateDown ), false );
+			dom.controlsLeft.forEach( function( el ) { 		el.removeEventListener( 'click', preventAndForward( navigateLeft ), false ); 		} );
+			dom.controlsRight.forEach( function( el ) { 	el.removeEventListener( 'click', preventAndForward( navigateRight ), false ); 		} );
+			dom.controlsUp.forEach( function( el ) { 		el.removeEventListener( 'click', preventAndForward( navigateUp ), false ); 			} );
+			dom.controlsDown.forEach( function( el ) { 		el.removeEventListener( 'click', preventAndForward( navigateDown ), false ); 		} );
+			dom.controlsPrev.forEach( function( el ) { 		el.removeEventListener( 'click', preventAndForward( navigatePrev ), false ); 		} );
+			dom.controlsNext.forEach( function( el ) { 		el.removeEventListener( 'click', preventAndForward( navigateNext ), false ); 		} );
 		}
 	}
 
@@ -394,6 +402,19 @@ var Reveal = (function(){
 		}
 	}
 
+	/**
+	 * Converts the target object to an array.
+	 */
+	function toArray( o ) {
+		return Array.prototype.slice.call( o );
+	}
+
+	function each( targets, method, args ) {
+		targets.forEach( function( el ) {
+			el[method].apply( el, args );
+		} );
+	}
+
 	/**
 	 * Measures the distance in pixels between point a
 	 * and point b.
@@ -865,15 +886,23 @@ var Reveal = (function(){
 			var routes = availableRoutes();
 
 			// Remove the 'enabled' class from all directions
-			[ dom.controlsLeft, dom.controlsRight, dom.controlsUp, dom.controlsDown ].forEach( function( node ) {
+			dom.controlsLeft.concat( dom.controlsRight )
+							.concat( dom.controlsUp )
+							.concat( dom.controlsDown )
+							.concat( dom.controlsPrev )
+							.concat( dom.controlsNext ).forEach( function( node ) {
 				node.classList.remove( 'enabled' );
 			} );
 
 			// Add the 'enabled' class to the available routes
-			if( routes.left ) dom.controlsLeft.classList.add( 'enabled' );
-			if( routes.right ) dom.controlsRight.classList.add( 'enabled' );
-			if( routes.up ) dom.controlsUp.classList.add( 'enabled' );
-			if( routes.down ) dom.controlsDown.classList.add( 'enabled' );
+			if( routes.left ) dom.controlsLeft.forEach( function( el ) { 	el.classList.add( 'enabled' );		} );
+			if( routes.right ) dom.controlsRight.forEach( function( el ) { 	el.classList.add( 'enabled' );		} );
+			if( routes.up ) dom.controlsUp.forEach( function( el ) { 		el.classList.add( 'enabled' );		} );
+			if( routes.down ) dom.controlsDown.forEach( function( el ) { 	el.classList.add( 'enabled' );		} );
+
+			// Prev/next buttons
+			if( routes.left || routes.up ) dom.controlsPrev.forEach( function( el ) { 		el.classList.add( 'enabled' );		} );
+			if( routes.right || routes.down ) dom.controlsNext.forEach( function( el ) { 	el.classList.add( 'enabled' );		} );
 
 		}
 	}