diff options
| -rw-r--r-- | css/main.css | 6 | ||||
| -rw-r--r-- | index.html | 8 | ||||
| -rw-r--r-- | js/reveal.js | 37 |
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; @@ -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 |