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

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
 

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;
+}
 
 
 

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 = {};

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';