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