diff --git a/README.md b/README.md index 1548b90e6d55a5ef781ce68201bbb1ae58d4b29d..379aeff0c553a9917876645ec1cfeaa404ef3ee1 100644 --- a/README.md +++ b/README.md @@ -67,6 +67,7 @@ Reveal.initialize({ - Delayed updates to URL hash to work around a bug in Chrome - Included a classList polyfill for IE9 - 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 diff --git a/css/main.css b/css/main.css index 2bff45d0d478ae7d2edcf4fc5bff8fbb7abe67b7..6269d24598858cf4bb5199c17b12fb7b44e51264 100644 --- a/css/main.css +++ b/css/main.css @@ -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; +} diff --git a/index.html b/index.html index 9db7802ee333b465d00f2cc2f08404a5b290404f..906376db3eeb49d6c8eda3edd9e60d4b1c4cf8b6 100644 --- a/index.html +++ b/index.html @@ -79,7 +79,7 @@ <section> <h2>Holistic Overview</h2> <p> - Press <strong>SPACE</strong> to enter the slide overview. + Press <strong>SPACE</strong> to enter the slide overview! </p> </section> @@ -94,7 +94,7 @@ <li><a href="http://lab.hakim.se/reveal-js/?transition=concave">Concave</a></li> </ul> </section> - + <section> <h2>Marvelous Unordered List</h2> <ul> @@ -114,6 +114,15 @@ </ol> </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> <h2>Clever Quotes</h2> <p> @@ -213,7 +222,7 @@ <!-- Optional libraries for code syntax highlighting and classList support in IE9 --> <script src="lib/highlight.js"></script> <script src="lib/classList.js"></script> - + <script> // Parse the query string into a key/value object var query = {}; diff --git a/js/reveal.js b/js/reveal.js index 885884f96dd18aeefbef19d1dfb5f54c21194a01..1e6ce4d70590018f27f86647f68a1ab4e7576db3 100644 --- a/js/reveal.js +++ b/js/reveal.js @@ -58,6 +58,11 @@ var Reveal = (function(){ 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 dom = {}, @@ -462,6 +467,13 @@ var Reveal = (function(){ // Mark the current slide as 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 { // Since there are no slides we can't be anywhere beyond the @@ -478,9 +490,19 @@ var Reveal = (function(){ * set indices. */ function slide() { + // Clean up the current state + while( state.length ) { + document.documentElement.classList.remove( state.pop() ); + } + 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++ ) { + document.documentElement.classList.add( state[i] ); + } + // Update progress if enabled if( config.progress ) { dom.progressbar.style.width = ( indexh / ( document.querySelectorAll( HORIZONTAL_SLIDES_SELECTOR ).length - 1 ) ) * window.innerWidth + 'px';