adjustments to custom state events

3 files changed, 34 insertions, 17 deletions

diff --git a/css/main.css b/css/main.css
index 6269d24..d2887bf 100644
--- a/css/main.css
+++ b/css/main.css
@@ -901,11 +901,7 @@ html {
  * STATES
  *********************************************/
 
-.blur body {
-	
-}
-
-.blur #reveal * {
+.blurred #reveal * {
 	color: rgba( 255, 255, 255, 0 );
 	text-shadow: 0px 0px 5px #fff;
 
diff --git a/index.html b/index.html
index 906376d..327236c 100644
--- a/index.html
+++ b/index.html
@@ -114,7 +114,7 @@
 					</ol>
 				</section>
 
-				<section data-state="blur">
+				<section data-state="blurred">
 					<h2>Global State</h2>
 					<p>
 						If you set <code>data-state="something"</code> on a slide, <code>"something"</code>
@@ -253,6 +253,12 @@
 				transition: query.transition || 'default' // default/cube/page/concave/linear(2d)
 			});
 
+			// Example of binding an event to a state. This listener will trigger
+			// when the slide with 'data-state="blurred"' is opened.
+			document.querySelector( '#reveal' ).addEventListener( 'blurred', function() {
+				
+			}, false );
+
 			hljs.initHighlightingOnLoad();
 		</script>
 
diff --git a/js/reveal.js b/js/reveal.js
index 49c4bc9..e35b8de 100644
--- a/js/reveal.js
+++ b/js/reveal.js
@@ -200,8 +200,6 @@ var Reveal = (function(){
 					case 40: navigateDown(); break; // down
 				}
 				
-				slide();
-				
 				event.preventDefault();
 				
 			}
@@ -490,21 +488,38 @@ var Reveal = (function(){
 	 * set indices. 
 	 */
 	function slide() {
-		// Clean up the current state
-		while( state.length ) {
-			document.documentElement.classList.remove( state.pop() );
-		}
+		// Remember the state before this slide
+		var stateBefore = state.concat();
+
+		// Reset the state array
+		state.length = 0;
 
+		// Activate and transition to the new slide
 		indexh = updateSlides( HORIZONTAL_SLIDES_SELECTOR, indexh );
 		indexv = updateSlides( VERTICAL_SLIDES_SELECTOR, indexv );
 
 		// Apply the new state
-		for( var i = 0, len = state.length; i < len; i++ ) {
+		stateLoop: for( var i = 0, len = state.length; i < len; i++ ) {
+			// Check if this state existed on the previous slide. If it 
+			// did, we will avoid adding it repeatedly.
+			for( var j = 0; j < stateBefore.length; j++ ) {
+				if( stateBefore[j] === state[i] ) {
+					stateBefore.splice( j, 1 );
+					continue stateLoop;
+				}
+			}
+
 			document.documentElement.classList.add( state[i] );
-			// dispatch custom event
-			var event = document.createEvent("HTMLEvents");
-			event.initEvent(state[i], true, true);
-			document.dispatchEvent(event);
+
+			// Dispatch custom event
+			var event = document.createEvent( "HTMLEvents" );
+			event.initEvent( state[i], false, true );
+			dom.wrapper.dispatchEvent( event );
+		}
+
+		// Clean up the remaints of the previous state
+		while( stateBefore.length ) {
+			document.documentElement.classList.remove( stateBefore.pop() );
 		}
 
 		// Update progress if enabled