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