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
*********************************************/
.blur body {
}
.blur #reveal * {
.blurred #reveal * {
color: rgba( 255, 255, 255, 0 );
text-shadow: 0px 0px 5px #fff;

View File

@ -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>

View File

@ -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
// Dispatch custom event
var event = document.createEvent( "HTMLEvents" );
event.initEvent(state[i], true, true);
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