now capturing data-state on slides and lifting it to document element classList when...

diff --git a/README.md b/README.md
index 1548b90e6d55a5ef781ce68201bbb1ae58d4b29d..379aeff0c553a9917876645ec1cfeaa404ef3ee1 100644 (file)
--- 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 (file)
--- 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 (file)
--- 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 (file)
--- 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';