Merge branch 'autoslide-API-and-fragments' of https://github.com/rajgoel/reveal.js into dev

This commit is contained in:
Hakim El Hattab 2013-12-21 17:16:51 +01:00
commit 5226321885
2 changed files with 63 additions and 8 deletions

View File

@ -266,15 +266,19 @@ Reveal.configure({
autoSlide: 5000 autoSlide: 5000
}); });
``` ```
When this is turned on a control element will appear that enables users to pause and resume auto-sliding. Alternatively, sliding can be paused or resumed by pressing »a« on the keyboard. Sliding is paused automatically as soon as the user starts navigating. You can disable these controls by specifying ```autoSlideStoppable: false``` in your reveal.js config.
When this is turned on a control element will appear that enables users to pause and resume auto-sliding. Sliding is also paused automatically as soon as the user starts navigating. You can disable these controls by specifying ```autoSlideStoppable: false``` in your reveal.js config. You can also override the slide duration for individual slides and fragments by using the ```data-autoslide``` attribute on individual sections or fragments:
You can also override the slide duration for individual slides by using the ```data-autoslide``` attribute on individual sections:
```html ```html
<section data-autoslide="10000">This will remain on screen for 10 seconds</section> <section data-autoslide="2000">
<p>After 2 seconds the first fragment will be shown.</p>
<p class="fragment" data-autoslide="10000">After 10 seconds the next fragment will be shown.</p>
<p class="fragment">Now, the fragment is displayed for 2 seconds before the next slide is shown.</p>
</section>
``` ```
Whenever the auto-slide mode is resumed or paused the ```autoslideresumed``` and ```autoslidepaused``` events are fired.
### Keyboard Bindings ### Keyboard Bindings
@ -308,6 +312,7 @@ Reveal.prevFragment();
Reveal.nextFragment(); Reveal.nextFragment();
Reveal.toggleOverview(); Reveal.toggleOverview();
Reveal.togglePause(); Reveal.togglePause();
Reveal.toggleAutoSlide();
// Retrieves the previous and current slide elements // Retrieves the previous and current slide elements
Reveal.getPreviousSlide(); Reveal.getPreviousSlide();
@ -320,6 +325,7 @@ Reveal.isFirstSlide();
Reveal.isLastSlide(); Reveal.isLastSlide();
Reveal.isOverview(); Reveal.isOverview();
Reveal.isPaused(); Reveal.isPaused();
Reveal.isSliding(); // auto slide mode
``` ```
### Ready Event ### Ready Event

View File

@ -1448,6 +1448,33 @@ var Reveal = (function(){
} }
/**
* Toggles the auto slide mode on and off.
*
* @param {Boolean} override Optional flag which sets the desired state.
* True means autoplay starts, false means it stops.
*/
function toggleAutoSlide( override ) {
if( typeof override === 'boolean' ) {
override ? resumeAutoSlide() : pauseAutoSlide();
}
else {
autoSlidePaused ? resumeAutoSlide() : pauseAutoSlide();
}
}
/**
* Checks if the auto slide mode is currently on.
*/
function isSliding() {
return !autoSlidePaused;
}
/** /**
* Steps from the current point in the presentation to the * Steps from the current point in the presentation to the
* slide which matches the specified horizontal and vertical * slide which matches the specified horizontal and vertical
@ -2473,14 +2500,26 @@ var Reveal = (function(){
if( currentSlide ) { if( currentSlide ) {
var fragmentAutoSlide = null;
// it is assumed that any given data-autoslide value (for each of the current fragments) can be chosen
toArray( Reveal.getCurrentSlide().querySelectorAll( '.current-fragment' ) ).forEach( function( el ) {
if( el.hasAttribute( 'data-autoslide' ) ) {
fragmentAutoSlide = el.getAttribute( 'data-autoslide' );
}
} );
var parentAutoSlide = currentSlide.parentNode ? currentSlide.parentNode.getAttribute( 'data-autoslide' ) : null; var parentAutoSlide = currentSlide.parentNode ? currentSlide.parentNode.getAttribute( 'data-autoslide' ) : null;
var slideAutoSlide = currentSlide.getAttribute( 'data-autoslide' ); var slideAutoSlide = currentSlide.getAttribute( 'data-autoslide' );
// Pick value in the following priority order: // Pick value in the following priority order:
// 1. Current slide's data-autoslide // 1. Current fragment's data-autoslide
// 2. Parent slide's data-autoslide // 2. Current slide's data-autoslide
// 3. Global autoSlide setting // 3. Parent slide's data-autoslide
if( slideAutoSlide ) { // 4. Global autoSlide setting
if( fragmentAutoSlide ) {
autoSlide = parseInt( fragmentAutoSlide, 10 );
}
else if( slideAutoSlide ) {
autoSlide = parseInt( slideAutoSlide, 10 ); autoSlide = parseInt( slideAutoSlide, 10 );
} }
else if( parentAutoSlide ) { else if( parentAutoSlide ) {
@ -2533,6 +2572,7 @@ var Reveal = (function(){
function pauseAutoSlide() { function pauseAutoSlide() {
autoSlidePaused = true; autoSlidePaused = true;
dispatchEvent( 'autoslidepaused' );
clearTimeout( autoSlideTimeout ); clearTimeout( autoSlideTimeout );
if( autoSlidePlayer ) { if( autoSlidePlayer ) {
@ -2544,6 +2584,7 @@ var Reveal = (function(){
function resumeAutoSlide() { function resumeAutoSlide() {
autoSlidePaused = false; autoSlidePaused = false;
dispatchEvent( 'autoslideresumed' );
cueAutoSlide(); cueAutoSlide();
} }
@ -2661,6 +2702,8 @@ var Reveal = (function(){
*/ */
function onDocumentKeyDown( event ) { function onDocumentKeyDown( event ) {
// store auto slide value to be able to toggle auto sliding
var currentAutoSlideValue = autoSlidePaused;
onUserInput( event ); onUserInput( event );
// Check if there's a focused element that could be using // Check if there's a focused element that could be using
@ -2737,6 +2780,8 @@ var Reveal = (function(){
case 66: case 190: case 191: togglePause(); break; case 66: case 190: case 191: togglePause(); break;
// f // f
case 70: enterFullscreen(); break; case 70: enterFullscreen(); break;
// a
case 65: if ( config.autoSlideStoppable ) toggleAutoSlide( currentAutoSlideValue ); break;
default: default:
triggered = false; triggered = false;
} }
@ -3289,9 +3334,13 @@ var Reveal = (function(){
// Toggles the "black screen" mode on/off // Toggles the "black screen" mode on/off
togglePause: togglePause, togglePause: togglePause,
// Toggles the auto slide mode on/off
toggleAutoSlide: toggleAutoSlide,
// State checks // State checks
isOverview: isOverview, isOverview: isOverview,
isPaused: isPaused, isPaused: isPaused,
isSliding: isSliding,
// Adds or removes all internal event listeners (such as keyboard) // Adds or removes all internal event listeners (such as keyboard)
addEventListeners: addEventListeners, addEventListeners: addEventListeners,