adjustments to custom state events

diff --git a/css/main.css b/css/main.css
index 6269d24598858cf4bb5199c17b12fb7b44e51264..d2887bf53048de9ef335d0631b82656a98a34857 100644 (file)
--- 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 906376db3eeb49d6c8eda3edd9e60d4b1c4cf8b6..327236c8b2d60663b59b0049618059a50d9cff7f 100644 (file)
--- 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 49c4bc9d13ab94215214f205dd5ae9c9af28bfc1..e35b8de89f6cc1cdac20da7a29dbcfabf86f4d11 100644 (file)
--- 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