blallo/presentazione-papero
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
Hakim El Hattab 2012-11-10 11:40:19 -05:00
parent df4e1fd346
commit c79376dab2
11 changed files with 231 additions and 182 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

13
README.md
View File

@ -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="#/2/2">Link</a>
<a href="#/some-slide">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 ### Fullscreen mode
Just press »F« on your keyboard to show your presentation in fullscreen mode. Press the »ESC« key to exit fullscreen mode. Just press »F« on your keyboard to show your presentation in fullscreen mode. Press the »ESC« key to exit fullscreen mode.

8
css/reveal.css
View File

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

24
css/theme/beige.css
View File

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

24
css/theme/default.css
View File

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

24
css/theme/serif.css
View File

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

24
css/theme/simple.css
View File

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

24
css/theme/sky.css
View File

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

24
css/theme/template/theme.scss
View File

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

14
index.html
View File

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

71
js/reveal.js
View File

@ -153,10 +153,10 @@ var Reveal = (function(){
if( !dom.wrapper.querySelector( '.controls' ) && config.controls ) { if( !dom.wrapper.querySelector( '.controls' ) && config.controls ) {
var controlsElement = document.createElement( 'aside' ); var controlsElement = document.createElement( 'aside' );
controlsElement.classList.add( 'controls' ); controlsElement.classList.add( 'controls' );
controlsElement.innerHTML = '<div class="left"></div>' + controlsElement.innerHTML = '<div class="navigate-left"></div>' +
'<div class="right"></div>' + '<div class="navigate-right"></div>' +
'<div class="up"></div>' + '<div class="navigate-up"></div>' +
'<div class="down"></div>'; '<div class="navigate-down"></div>';
dom.wrapper.appendChild( controlsElement ); dom.wrapper.appendChild( controlsElement );
} }
@ -180,10 +180,14 @@ var Reveal = (function(){
if ( config.controls ) { if ( config.controls ) {
dom.controls = document.querySelector( '.reveal .controls' ); dom.controls = document.querySelector( '.reveal .controls' );
dom.controlsLeft = document.querySelector( '.reveal .controls .left' );
dom.controlsRight = document.querySelector( '.reveal .controls .right' ); // There can be multiple instances of controls throughout the page
dom.controlsUp = document.querySelector( '.reveal .controls .up' ); dom.controlsLeft = toArray( document.querySelectorAll( '.navigate-left' ) );
dom.controlsDown = document.querySelector( '.reveal .controls .down' ); 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 ) { if ( config.controls && dom.controls ) {
dom.controlsLeft.addEventListener( 'click', preventAndForward( navigateLeft ), false ); dom.controlsLeft.forEach( function( el ) { el.addEventListener( 'click', preventAndForward( navigateLeft ), false ); } );
dom.controlsRight.addEventListener( 'click', preventAndForward( navigateRight ), false ); dom.controlsRight.forEach( function( el ) { el.addEventListener( 'click', preventAndForward( navigateRight ), false ); } );
dom.controlsUp.addEventListener( 'click', preventAndForward( navigateUp ), false ); dom.controlsUp.forEach( function( el ) { el.addEventListener( 'click', preventAndForward( navigateUp ), false ); } );
dom.controlsDown.addEventListener( 'click', preventAndForward( navigateDown ), 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 ) { if ( config.controls && dom.controls ) {
dom.controlsLeft.removeEventListener( 'click', preventAndForward( navigateLeft ), false ); dom.controlsLeft.forEach( function( el ) { el.removeEventListener( 'click', preventAndForward( navigateLeft ), false ); } );
dom.controlsRight.removeEventListener( 'click', preventAndForward( navigateRight ), false ); dom.controlsRight.forEach( function( el ) { el.removeEventListener( 'click', preventAndForward( navigateRight ), false ); } );
dom.controlsUp.removeEventListener( 'click', preventAndForward( navigateUp ), false ); dom.controlsUp.forEach( function( el ) { el.removeEventListener( 'click', preventAndForward( navigateUp ), false ); } );
dom.controlsDown.removeEventListener( 'click', preventAndForward( navigateDown ), 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 * Measures the distance in pixels between point a
* and point b. * and point b.
@ -865,15 +886,23 @@ var Reveal = (function(){
var routes = availableRoutes(); var routes = availableRoutes();
// Remove the 'enabled' class from all directions // 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' ); node.classList.remove( 'enabled' );
} ); } );
// Add the 'enabled' class to the available routes // Add the 'enabled' class to the available routes
if( routes.left ) dom.controlsLeft.classList.add( 'enabled' ); if( routes.left ) dom.controlsLeft.forEach( function( el ) { el.classList.add( 'enabled' ); } );
if( routes.right ) dom.controlsRight.classList.add( 'enabled' ); if( routes.right ) dom.controlsRight.forEach( function( el ) { el.classList.add( 'enabled' ); } );
if( routes.up ) dom.controlsUp.classList.add( 'enabled' ); if( routes.up ) dom.controlsUp.forEach( function( el ) { el.classList.add( 'enabled' ); } );
if( routes.down ) dom.controlsDown.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' ); } );
} }
} }

163
js/reveal.min.js vendored
View File

File diff suppressed because one or more lines are too long