add overviewshown and overviewhidden events (closes #298)

README.md

@@ -256,7 +256,15 @@ Reveal.addEventListener( 'fragmenthidden', function( event ) {
 ### Overview mode
 
 Press "Esc" key to toggle the overview mode on and off. While you're in this mode, you can still navigate between slides,
-as if you were at 1,000 feet above your presentation.
+as if you were at 1,000 feet above your presentation. The overview mode comes with a few API hooks:
+
+```javascript
+Reveal.addEventListener( 'overviewshown', function( event ) { /* ... */ } );
+Reveal.addEventListener( 'overviewhidden', function( event ) { /* ... */ } );
+
+// Toggle the overview mode programmatically
+Reveal.toggleOverview();
+```
 
 ### Fullscreen mode
 Just press »F« on your keyboard to show your presentation in fullscreen mode. Press the »ESC« key to exit fullscreen mode.

js/reveal.js

@@ -622,6 +622,8 @@ var Reveal = (function(){
 		// Only proceed if enabled in config
 		if( config.overview ) {
 
+			var wasActive = dom.wrapper.classList.contains( 'overview' );
+
 			dom.wrapper.classList.add( 'overview' );
 			dom.wrapper.classList.remove( 'exit-overview' );
 
@@ -681,6 +683,15 @@ var Reveal = (function(){
 
 				layout();
 
+				if( !wasActive ) {
+					// Notify observers of the overview showing
+					dispatchEvent( 'overviewshown', {
+						'indexh': indexh,
+						'indexv': indexv,
+						'currentSlide': currentSlide
+					} );
+				}
+
 			}, 10 );
 
 		}
@@ -730,6 +741,13 @@ var Reveal = (function(){
 
 			slide( indexh, indexv );
 
+			// Notify observers of the overview hiding
+			dispatchEvent( 'overviewhidden', {
+				'indexh': indexh,
+				'indexv': indexv,
+				'currentSlide': currentSlide
+			} );
+
 		}
 	}