From 5a8da0555cd08a97864582359ca51609badd416c Mon Sep 17 00:00:00 2001 From: rajgoel Date: Fri, 20 Dec 2013 16:22:32 +0100 Subject: [PATCH 1/2] Add auto-slide API and data-autoslide for fragments --- js/reveal.js | 57 ++++++++++++++++++++++++++++++++++++++++++++++++---- 1 file changed, 53 insertions(+), 4 deletions(-) diff --git a/js/reveal.js b/js/reveal.js index ef4add9..86eb825 100644 --- a/js/reveal.js +++ b/js/reveal.js @@ -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 * slide which matches the specified horizontal and vertical @@ -2473,14 +2500,26 @@ var Reveal = (function(){ 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 slideAutoSlide = currentSlide.getAttribute( 'data-autoslide' ); // Pick value in the following priority order: - // 1. Current slide's data-autoslide - // 2. Parent slide's data-autoslide - // 3. Global autoSlide setting - if( slideAutoSlide ) { + // 1. Current fragment's data-autoslide + // 2. Current slide's data-autoslide + // 3. Parent slide's data-autoslide + // 4. Global autoSlide setting + if( fragmentAutoSlide ) { + autoSlide = parseInt( fragmentAutoSlide, 10 ); + } + else if( slideAutoSlide ) { autoSlide = parseInt( slideAutoSlide, 10 ); } else if( parentAutoSlide ) { @@ -2533,6 +2572,7 @@ var Reveal = (function(){ function pauseAutoSlide() { autoSlidePaused = true; + dispatchEvent( 'autoslidepaused' ); clearTimeout( autoSlideTimeout ); if( autoSlidePlayer ) { @@ -2544,6 +2584,7 @@ var Reveal = (function(){ function resumeAutoSlide() { autoSlidePaused = false; + dispatchEvent( 'autoslideresumed' ); cueAutoSlide(); } @@ -2661,6 +2702,8 @@ var Reveal = (function(){ */ function onDocumentKeyDown( event ) { + // store auto slide value to be able to toggle auto sliding + var currentAutoSlideValue = autoSlidePaused; onUserInput( event ); // 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; // f case 70: enterFullscreen(); break; + // a + case 65: if ( config.autoSlideStoppable ) toggleAutoSlide( currentAutoSlideValue ); break; default: triggered = false; } @@ -3289,9 +3334,13 @@ var Reveal = (function(){ // Toggles the "black screen" mode on/off togglePause: togglePause, + // Toggles the auto slide mode on/off + toggleAutoSlide: toggleAutoSlide, + // State checks isOverview: isOverview, isPaused: isPaused, + isSliding: isSliding, // Adds or removes all internal event listeners (such as keyboard) addEventListeners: addEventListeners, From 4498e6e609bbd9cca098815bd5ecf0179be8dbf4 Mon Sep 17 00:00:00 2001 From: rajgoel Date: Fri, 20 Dec 2013 16:38:13 +0100 Subject: [PATCH 2/2] Update README.md --- README.md | 14 ++++++++++---- 1 file changed, 10 insertions(+), 4 deletions(-) diff --git a/README.md b/README.md index b7bb0d3..808a06a 100644 --- a/README.md +++ b/README.md @@ -266,15 +266,19 @@ Reveal.configure({ 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 by using the ```data-autoslide``` attribute on individual sections: +You can also override the slide duration for individual slides and fragments by using the ```data-autoslide``` attribute on individual sections or fragments: ```html -
This will remain on screen for 10 seconds
+
+

After 2 seconds the first fragment will be shown.

+

After 10 seconds the next fragment will be shown.

+

Now, the fragment is displayed for 2 seconds before the next slide is shown.

+
``` +Whenever the auto-slide mode is resumed or paused the ```autoslideresumed``` and ```autoslidepaused``` events are fired. ### Keyboard Bindings @@ -308,6 +312,7 @@ Reveal.prevFragment(); Reveal.nextFragment(); Reveal.toggleOverview(); Reveal.togglePause(); +Reveal.toggleAutoSlide(); // Retrieves the previous and current slide elements Reveal.getPreviousSlide(); @@ -320,6 +325,7 @@ Reveal.isFirstSlide(); Reveal.isLastSlide(); Reveal.isOverview(); Reveal.isPaused(); +Reveal.isSliding(); // auto slide mode ``` ### Ready Event