Commit c79376da authored by Hakim El Hattab's avatar Hakim El Hattab
Browse files

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

parent df4e1fd3
......@@ -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.
......
......@@ -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;
......
......@@ -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;
}
......
......@@ -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;
}
......
......@@ -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;
}
......
......@@ -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;
}
......
......@@ -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;
}
......
......@@ -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;
}
......
......@@ -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>
......
......@@ -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' ); } );
}
}
......
This diff is collapsed.
Supports Markdown
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment