now capturing data-state on slides and lifting it to document element classList when slide is open

This commit is contained in:
Hakim El Hattab 2012-03-30 00:13:45 -04:00
parent 0cd3b8d430
commit 831236890c
4 changed files with 58 additions and 3 deletions

View File

@ -67,6 +67,7 @@ Reveal.initialize({
- Delayed updates to URL hash to work around a bug in Chrome - Delayed updates to URL hash to work around a bug in Chrome
- Included a classList polyfill for IE9 - Included a classList polyfill for IE9
- Support for wireless presenter keys - Support for wireless presenter keys
- States can now be applied as classes on the document element by adding data-state on a slide
#### 1.1 #### 1.1

View File

@ -897,6 +897,29 @@ html {
} }
/*********************************************
* STATES
*********************************************/
.blur body {
}
.blur #reveal * {
color: rgba( 255, 255, 255, 0 );
text-shadow: 0px 0px 5px #fff;
-webkit-transition: color .8s ease,
text-shadow .8s ease;
-moz-transition: color .8s ease,
text-shadow .8s ease;
-ms-transition: color .8s ease,
text-shadow .8s ease;
-o-transition: color .8s ease,
text-shadow .8s ease;
transition: color .8s ease,
text-shadow .8s ease;
}

View File

@ -79,7 +79,7 @@
<section> <section>
<h2>Holistic Overview</h2> <h2>Holistic Overview</h2>
<p> <p>
Press <strong>SPACE</strong> to enter the slide overview. Press <strong>SPACE</strong> to enter the slide overview!
</p> </p>
</section> </section>
@ -94,7 +94,7 @@
<li><a href="http://lab.hakim.se/reveal-js/?transition=concave">Concave</a></li> <li><a href="http://lab.hakim.se/reveal-js/?transition=concave">Concave</a></li>
</ul> </ul>
</section> </section>
<section> <section>
<h2>Marvelous Unordered List</h2> <h2>Marvelous Unordered List</h2>
<ul> <ul>
@ -114,6 +114,15 @@
</ol> </ol>
</section> </section>
<section data-state="blur">
<h2>Global State</h2>
<p>
If you set <code>data-state="something"</code> on a slide, <code>"something"</code>
will be added as a class to the document element when the slide is open. Like the <code>"blur"</code>
effect on this slide.
</p>
</section>
<section> <section>
<h2>Clever Quotes</h2> <h2>Clever Quotes</h2>
<p> <p>
@ -213,7 +222,7 @@
<!-- Optional libraries for code syntax highlighting and classList support in IE9 --> <!-- Optional libraries for code syntax highlighting and classList support in IE9 -->
<script src="lib/highlight.js"></script> <script src="lib/highlight.js"></script>
<script src="lib/classList.js"></script> <script src="lib/classList.js"></script>
<script> <script>
// Parse the query string into a key/value object // Parse the query string into a key/value object
var query = {}; var query = {};

View File

@ -58,6 +58,11 @@ var Reveal = (function(){
rollingLinks: true rollingLinks: true
}, },
// Slides may hold a data-state attribute which we pick up and apply
// as a class to the body. This list contains the combined state of
// all current slides.
state = [],
// Cached references to DOM elements // Cached references to DOM elements
dom = {}, dom = {},
@ -462,6 +467,13 @@ var Reveal = (function(){
// Mark the current slide as present // Mark the current slide as present
slides[index].classList.add( 'present' ); slides[index].classList.add( 'present' );
// If this slide has a state associated with it, add it
// onto the current state of the deck
var slideState = slides[index].dataset.state;
if( slideState ) {
state = state.concat( slideState.split( ' ' ) );
}
} }
else { else {
// Since there are no slides we can't be anywhere beyond the // Since there are no slides we can't be anywhere beyond the
@ -478,9 +490,19 @@ var Reveal = (function(){
* set indices. * set indices.
*/ */
function slide() { function slide() {
// Clean up the current state
while( state.length ) {
document.documentElement.classList.remove( state.pop() );
}
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
for( var i = 0, len = state.length; i < len; i++ ) {
document.documentElement.classList.add( state[i] );
}
// Update progress if enabled // Update progress if enabled
if( config.progress ) { if( config.progress ) {
dom.progressbar.style.width = ( indexh / ( document.querySelectorAll( HORIZONTAL_SLIDES_SELECTOR ).length - 1 ) ) * window.innerWidth + 'px'; dom.progressbar.style.width = ( indexh / ( document.querySelectorAll( HORIZONTAL_SLIDES_SELECTOR ).length - 1 ) ) * window.innerWidth + 'px';