adjustments to custom state events
This commit is contained in:
parent
2c78eea0ca
commit
8dc7ae85a1
@ -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>
|
||||
|
||||
|
37
js/reveal.js
37
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
|
||||
|
Loading…
Reference in New Issue
Block a user