adjustments to custom state events

This commit is contained in:
Hakim El Hattab 2012-03-30 23:51:37 -04:00
parent 2c78eea0ca
commit 8dc7ae85a1
3 changed files with 34 additions and 17 deletions

View File

@ -901,11 +901,7 @@ html {
* STATES * STATES
*********************************************/ *********************************************/
.blur body { .blurred #reveal * {
}
.blur #reveal * {
color: rgba( 255, 255, 255, 0 ); color: rgba( 255, 255, 255, 0 );
text-shadow: 0px 0px 5px #fff; text-shadow: 0px 0px 5px #fff;

View File

@ -114,7 +114,7 @@
</ol> </ol>
</section> </section>
<section data-state="blur"> <section data-state="blurred">
<h2>Global State</h2> <h2>Global State</h2>
<p> <p>
If you set <code>data-state="something"</code> on a slide, <code>"something"</code> 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) 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(); hljs.initHighlightingOnLoad();
</script> </script>

View File

@ -200,8 +200,6 @@ var Reveal = (function(){
case 40: navigateDown(); break; // down case 40: navigateDown(); break; // down
} }
slide();
event.preventDefault(); event.preventDefault();
} }
@ -490,21 +488,38 @@ var Reveal = (function(){
* set indices. * set indices.
*/ */
function slide() { function slide() {
// Clean up the current state // Remember the state before this slide
while( state.length ) { var stateBefore = state.concat();
document.documentElement.classList.remove( state.pop() );
}
// Reset the state array
state.length = 0;
// Activate and transition to the new slide
indexh = updateSlides( HORIZONTAL_SLIDES_SELECTOR, indexh ); indexh = updateSlides( HORIZONTAL_SLIDES_SELECTOR, indexh );
indexv = updateSlides( VERTICAL_SLIDES_SELECTOR, indexv ); indexv = updateSlides( VERTICAL_SLIDES_SELECTOR, indexv );
// Apply the new state // 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] ); document.documentElement.classList.add( state[i] );
// dispatch custom event
var event = document.createEvent("HTMLEvents"); // Dispatch custom event
event.initEvent(state[i], true, true); var event = document.createEvent( "HTMLEvents" );
document.dispatchEvent(event); 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 // Update progress if enabled