Merge branch 'autoslide-API-and-fragments' of https://github.com/rajgoel/reveal.js into dev
This commit is contained in:
commit
5226321885
14
README.md
14
README.md
|
@ -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
|
||||||
|
|
57
js/reveal.js
57
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
|
* 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,
|
||||||
|
|
Loading…
Reference in New Issue