better example of state usage

Added support for wireless presenter

README.md

@@ -1,20 +1,76 @@
 # reveal.js
 
-A CSS 3D slideshow tool for quickly creating good looking HTML presentations. Requires a browser with support for CSS 3D transforms, querySelector and classList. Does not _rely_ on any external libraries but [highlight.js](http://softwaremaniacs.org/soft/highlight/en/description/) is included by default for code highlighting.
+A CSS 3D slideshow tool for quickly creating good looking HTML presentations. Doesn't _rely_ on any external libraries but [highlight.js](http://softwaremaniacs.org/soft/highlight/en/description/) is included by default for code highlighting.
+
+Note that this requires a browser with support for CSS 3D transforms and ``classList``. If CSS 3D support is not detected, the presentation will degrade to less exciting 2D transitions. You could also use a polyfill for ``classList`` to make this work in < iOS 5 and < Safari 5.1, [here's one](https://github.com/remy/polyfills/blob/master/classList.js) from [@remy](https://github.com/remy).
 
 Curious about how this looks in action? [Check out the demo page](http://lab.hakim.se/reveal-js/).
 
 # Examples
 
 * http://lab.hakim.se/reveal-js/ (original)
-* http://www.ideapolisagency.com/ from [@achrafkassioui](http://twitter.com/achrafkassioui)
-* http://lucienfrelin.com/ from [@lucienfrelin](http://twitter.com/lucienfrelin)
+* http://www.ideapolisagency.com/ by [@achrafkassioui](http://twitter.com/achrafkassioui)
+* http://lucienfrelin.com/ by [@lucienfrelin](http://twitter.com/lucienfrelin)
+* http://creatorrr.github.com/ThePoet/
+* http://moduscreate.com/ by [@ModusCreate](https://twitter.com/ModusCreate)
+* [Webapp Development Stack & Tooling](http://dl.dropbox.com/u/39519/talks/jquk-tooling%2Bappstack/index.html) by [@paul_irish](https://twitter.com/paul_irish)
+* http://idea.diwank.name/ by [Diwank Singh](http://diwank.name/)
+* http://concurrencykit.org/presentations/lockfree_introduction/ by Samy Al Bahra
+* http://www.thecssninja.com/talks/not_your_average_dnd/ by [@ryanseddon](http://twitter.com/ryanseddon)
+* http://spinscale.github.com/elasticsearch/2012-03-jugm.html by [@spinscale](http://twitter.com/spinscale)
+* [JavaScript Tooling](http://dl.dropbox.com/u/39519/talks/jsconf-tools/index.html) by [@paul_irish](https://twitter.com/paul_irish)
 
 [Send me a link](http://hakim.se/about/contact) if you used reveal.js for a project or presentation.
 
+# Usage
+
+Markup heirarchy needs to be ``<div id="reveal"> <div class="slides"> <section>`` where the ``<section>`` represents one slide and can be repeated indefinitely. If you place multiple ``<section>``'s inside of another ``<section>`` they will be shown as vertical slides.
+
+At the end of your page, after ``<script src="js/reveal.js"></script>``, you need to initialize reveal. Note that all config values are optional.
+
+```
+Reveal.initialize({
+  // Display controls in the bottom right corner
+	controls: true,
+
+	// Display a presentation progress bar
+	progress: true,
+
+	// If true; each slide will be pushed to the browser history
+	history: true,
+
+	// Flags if mouse wheel navigation should be enabled
+	mouseWheel: true,
+
+	// Apply a 3D roll to links on hover
+	rollingLinks: true,
+
+	// UI style
+	theme: 'default', // default/neon
+
+	// Transition style
+	transition: 'default' // default/cube/page/concave/linear(2d)
+});
+```
+
 # History
 
-### 1.1 (master)
+#### 1.2 (master)
+
+- Big changes to DOM structure:
+  - Previous #main wrapper is now called #reveal
+  - Slides were moved one level deeper, into #reveal .slides
+  - Controls and progress bar were moved into #reveal
+- CSS is now much more explicit, rooted at #reveal, to prevent conflicts
+- Config option for disabling updates to URL, defaults to true
+- Anchors with image children no longer rotate in 3D on hover
+- Support for mouse wheel navigation ([naugtur](https://github.com/naugtur))
+- 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
 
 - Added an optional presentation progress bar
 - Images wrapped in anchors no longer unexpectedly flip in 3D
@@ -24,7 +80,7 @@ Curious about how this looks in action? [Check out the demo page](http://lab.hak
 - New transitions: 'box' & 'page'
 - New theme: 'neon'
 
-### 1.0
+#### 1.0
 
 - New and improved style
 - Added controls in bottom right which indicate where you can navigate
@@ -32,19 +88,21 @@ Curious about how this looks in action? [Check out the demo page](http://lab.hak
 - Code sample syntax highlighting thanks to [highlight.js](http://softwaremaniacs.org/soft/highlight/en/description/)
 - Initialization options (toggling controls, toggling rolling links, transition theme)
 
-### 0.3
+#### 0.3
 
 - Added licensing terms
 - Fixed broken links on touch devices
 
-### 0.2
+#### 0.2
 
 - Refactored code and added inline documentation
 - Slides now have unique URL's
 - A basic API to invoke navigation was added
 
-### 0.1
+#### 0.1
+
 - First release
+- Transitions and a white theme
 
 # License
 

css/main.css

@@ -41,7 +41,7 @@ html, body {
 }
 
 html {
-	background: #555a5f;
+	background: #1c1e20;
 	background: -moz-radial-gradient(center, ellipse cover, #555a5f 0%, #1c1e20 100%);
 	background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%,#555a5f), color-stop(100%,#1c1e20));
 	background: -webkit-radial-gradient(center, ellipse cover, #555a5f 0%,#1c1e20 100%);
@@ -53,7 +53,10 @@ html {
 /*********************************************
  * HEADERS
  *********************************************/
-h1, h2, h3, h4 {
+#reveal h1, 
+#reveal h2, 
+#reveal h3, 
+#reveal h4 {
 	margin: 0 0 20px 0;
 	
 	color: #eee;
@@ -66,31 +69,31 @@ h1, h2, h3, h4 {
 	text-shadow: 0px 0px 6px rgba(0,0,0,0.2);
 }
 
-h1 { font-size: 136px; 	}
-h2 { font-size: 76px;	}
-h3 { font-size: 56px;	}
-h4 { font-size: 36px;	}
+#reveal h1 { font-size: 136px; 	}
+#reveal h2 { font-size: 76px;	}
+#reveal h3 { font-size: 56px;	}
+#reveal h4 { font-size: 36px;	}
 
-h1.inverted,
-h2.inverted,
-h3.inverted,
-h4.inverted {
+#reveal h1.inverted,
+#reveal h2.inverted,
+#reveal h3.inverted,
+#reveal h4.inverted {
 	color: #fff;
 	text-shadow: 0px 0px 2px rgba(0,0,0,0.2);
 }
 
-h1 {
+#reveal h1 {
 	text-shadow: 0 1px 0 #ccc,
-               0 2px 0 #c9c9c9,
-               0 3px 0 #bbb,
-               0 4px 0 #b9b9b9,
-               0 5px 0 #aaa,
-               0 6px 1px rgba(0,0,0,.1),
-               0 0 5px rgba(0,0,0,.1),
-               0 1px 3px rgba(0,0,0,.3),
-               0 3px 5px rgba(0,0,0,.2),
-               0 5px 10px rgba(0,0,0,.25),
-               0 20px 20px rgba(0,0,0,.15);
+                 0 2px 0 #c9c9c9,
+                 0 3px 0 #bbb,
+                 0 4px 0 #b9b9b9,
+                 0 5px 0 #aaa,
+                 0 6px 1px rgba(0,0,0,.1),
+                 0 0 5px rgba(0,0,0,.1),
+                 0 1px 3px rgba(0,0,0,.3),
+                 0 3px 5px rgba(0,0,0,.2),
+                 0 5px 10px rgba(0,0,0,.25),
+                 0 20px 20px rgba(0,0,0,.15);
 }
 
 
@@ -98,7 +101,7 @@ h1 {
  * VIEW FRAGMENTS
  *********************************************/
 
-#main section .fragment {
+#reveal .slides section .fragment {
 	opacity: 0;
 
 	-webkit-transition: all .2s ease;
@@ -107,7 +110,7 @@ h1 {
 	     -o-transition: all .2s ease;
 	        transition: all .2s ease;
 }
-	#main section .fragment.visible {
+	#reveal .slides section .fragment.visible {
 		opacity: 1;
 	}
 
@@ -116,40 +119,43 @@ h1 {
  * DEFAULT ELEMENT STYLES
  *********************************************/
 
-#main>section {
+#reveal .slides section {
 	line-height: 1.2em;
 	font-weight: normal;
 }
 
-strong, b {
+#reveal strong, 
+#reveal b {
 	font-weight: bold;
 }
 
-em, i {
+#reveal em, 
+#reveal i {
 	font-style: italic;
 }
 
-ol, ul {
+#reveal ol, 
+#reveal ul {
 	display: inline-block;
 
 	text-align: left;
 	margin: 0 auto;
 }
 
-ol {
+#reveal ol {
 	list-style: decimal;
 	list-style-position: inside;
 }
 
-ul {
+#reveal ul {
 	list-style: disc;
 }
 
-p {
+#reveal p {
 	margin-bottom: 10px;
 }
 
-blockquote {
+#reveal blockquote {
 	display: block;
 	position: relative;
 	width: 70%;
@@ -160,14 +166,14 @@ blockquote {
 	background: rgba(255, 255, 255, 0.05);
 	box-shadow: 0px 0px 2px rgba(0,0,0,0.2);
 }
-	blockquote:before {
+	#reveal blockquote:before {
 		content: '“';
 	}
-	blockquote:after {
+	#reveal blockquote:after {
 		content: '”';
 	}
 
-pre {
+#reveal pre {
 	display: block;
 	position: relative;
 	width: 90%;
@@ -183,27 +189,27 @@ pre {
 	box-shadow: 0px 0px 6px rgba(0,0,0,0.3);
 }
 
-code {
+#reveal code {
 	font-family: monospace;
 }
 
-small {
+#reveal small {
 	font-size: 60%;
 	line-height: 1em;
 	vertical-align: top;
 }
 
-q {	
+#reveal q {	
 	font-style: italic;
 }
-	q:before {
+	#reveal q:before {
 		content: '“';
 	}
-	q:after {
+	#reveal q:after {
 		content: '”';
 	}
 
-a:not(.image) {
+#reveal a:not(.image) {
 	color: hsl(185, 85%, 50%);
 	text-decoration: none;
 
@@ -214,7 +220,7 @@ a:not(.image) {
 	        transition: all .2s ease;
 }
 	
-	a:not(.image):hover {
+	#reveal a:not(.image):hover {
 		color: hsl(185, 85%, 70%);
 		background: hsla(185, 25%, 20%, 0.4);
 		text-shadow: none;
@@ -222,7 +228,7 @@ a:not(.image) {
 		border-radius: 2px;
 	}
 
-section img {
+#reveal section img {
 	margin: 30px 0 0 0;
 	background: rgba(255,255,255,0.12);
 	border: 4px solid #eee;
@@ -239,7 +245,7 @@ section img {
 	        transition: all .2s linear;
 }
 
-	a.image:hover img {
+	#reveal a:hover img {
 		background: rgba(255,255,255,0.2);
 		border-color: #13DAEC;
 		
@@ -254,7 +260,7 @@ section img {
  * CONTROLS
  *********************************************/
 
-.controls {
+#reveal .controls {
 	display: none;
 	position: fixed;
 	width: 100px;
@@ -264,36 +270,36 @@ section img {
 	bottom: 0;
 }
 	
-	.controls a {
+	#reveal .controls a {
 		font-size: 30px;
 		position: absolute;
 		opacity: 0.1;
 		color: #fff;
 	}
-		.controls a.enabled {
+		#reveal .controls a.enabled {
 			opacity: 0.6;
 			color: hsl(185, 85%, 70%);
 
 			text-shadow: 0px 0px 2px hsla(185, 45%, 70%, 0.3);
 		}
-		.controls a.enabled:active {
+		#reveal .controls a.enabled:active {
 			margin-top: 1px;
 		}
 
-	.controls .left {
+	#reveal .controls .left {
 		top: 30px;
 	}
 
-	.controls .right {
+	#reveal .controls .right {
 		left: 60px;
 		top: 30px;
 	}
 
-	.controls .up {
+	#reveal .controls .up {
 		left: 30px;
 	}
 
-	.controls .down {
+	#reveal .controls .down {
 		left: 30px;
 		top: 60px;
 
@@ -304,10 +310,10 @@ section img {
  * PROGRESS BAR
  *********************************************/
 
-.progress {
+#reveal .progress {
 	position: fixed;
 	display: none;
-	height: 4px;
+	height: 3px;
 	width: 100%;
 	bottom: 0;
 	left: 0;
@@ -315,7 +321,7 @@ section img {
 	background: rgba(0,0,0,0.2);
 }
 	
-	.progress span {
+	#reveal .progress span {
 		display: block;
 		background: hsl(185, 85%, 50%);
 		height: 100%;
@@ -332,7 +338,7 @@ section img {
  * ROLLING LINKS
  *********************************************/
 
-.roll {
+#reveal .roll {
     display: inline-block;
     overflow: hidden;
 
@@ -348,11 +354,11 @@ section img {
         -ms-perspective-origin: 50% 50%;
             perspective-origin: 50% 50%;
 }
-	.roll:hover {
+	#reveal .roll:hover {
 		background: none;
 		text-shadow: none;
 	}
-.roll span {
+#reveal .roll span {
     display: block;
     position: relative;
     padding: 0 2px;
@@ -374,7 +380,7 @@ section img {
         -ms-transform-style: preserve-3d;
             transform-style: preserve-3d;
 }
-    .roll:hover span {
+    #reveal .roll:hover span {
         background: rgba(0,0,0,0.5);
 
         -webkit-transform: translate3d( 0px, 0px, -45px ) rotateX( 90deg );
@@ -382,7 +388,7 @@ section img {
             -ms-transform: translate3d( 0px, 0px, -45px ) rotateX( 90deg );
                 transform: translate3d( 0px, 0px, -45px ) rotateX( 90deg );
     }
-.roll span:after {
+#reveal .roll span:after {
     content: attr(data-title);
 
     display: block;
@@ -410,7 +416,7 @@ section img {
  * SLIDES
  *********************************************/
 
-#main {
+#reveal .slides {
 	position: absolute;
 	width: 900px;
 	height: 600px;
@@ -422,6 +428,12 @@ section img {
 	padding: 20px 0px;
 	
 	text-align: center;
+
+	-webkit-transition: -webkit-perspective .4s ease;
+	   -moz-transition: -moz-perspective .4s ease;
+	    -ms-transition: -ms-perspective .4s ease;
+	     -o-transition: -o-perspective .4s ease;
+	        transition: perspective .4s ease;
 	
 	-webkit-perspective: 600px;
 	   -moz-perspective: 600px;
@@ -434,8 +446,8 @@ section img {
  	        perspective-origin: 50% 25%;
 }
 
-#main>section,
-#main>section>section {
+#reveal .slides>section,
+#reveal .slides>section>section {
 	display: none;
 	position: absolute;
 	width: 100%;
@@ -455,7 +467,7 @@ section img {
 	        transition: all 800ms cubic-bezier(0.260, 0.860, 0.440, 0.985);
 }
 
-#main section.present {
+#reveal .slides>section.present {
 	display: block;
 	z-index: 11;
 	opacity: 1;
@@ -466,7 +478,7 @@ section img {
  * DEFAULT TRANSITION
  *********************************************/
 
-#main section.past {
+#reveal .slides>section.past {
 	display: block;
 	opacity: 0;
 	
@@ -475,7 +487,7 @@ section img {
 	    -ms-transform: translate3d(-100%, 0, 0) rotateY(-90deg) translate3d(-100%, 0, 0);
 	        transform: translate3d(-100%, 0, 0) rotateY(-90deg) translate3d(-100%, 0, 0);
 }
-#main section.future {
+#reveal .slides>section.future {
 	display: block;
 	opacity: 0;
 	
@@ -485,7 +497,7 @@ section img {
 	        transform: translate3d(100%, 0, 0) rotateY(90deg) translate3d(100%, 0, 0);
 }
 
-#main section>section.past {
+#reveal .slides>section>section.past {
 	display: block;
 	opacity: 0;
 	
@@ -494,7 +506,7 @@ section img {
 	    -ms-transform: translate3d(0, -50%, 0) rotateX(70deg) translate3d(0, -50%, 0);
 	        transform: translate3d(0, -50%, 0) rotateX(70deg) translate3d(0, -50%, 0);
 }
-#main section>section.future {
+#reveal .slides>section>section.future {
 	display: block;
 	opacity: 0;
 	
@@ -509,26 +521,26 @@ section img {
  * CONCAVE TRANSITION
  *********************************************/
 
-.concave #main>section.past {
+#reveal.concave  .slides>section.past {
 	-webkit-transform: translate3d(-100%, 0, 0) rotateY(90deg) translate3d(-100%, 0, 0);
 	   -moz-transform: translate3d(-100%, 0, 0) rotateY(90deg) translate3d(-100%, 0, 0);
 	    -ms-transform: translate3d(-100%, 0, 0) rotateY(90deg) translate3d(-100%, 0, 0);
 	        transform: translate3d(-100%, 0, 0) rotateY(90deg) translate3d(-100%, 0, 0);
 }
-.concave #main>section.future {
+#reveal.concave  .slides>section.future {
 	-webkit-transform: translate3d(100%, 0, 0) rotateY(-90deg) translate3d(100%, 0, 0);
 	   -moz-transform: translate3d(100%, 0, 0) rotateY(-90deg) translate3d(100%, 0, 0);
 	    -ms-transform: translate3d(100%, 0, 0) rotateY(-90deg) translate3d(100%, 0, 0);
 	        transform: translate3d(100%, 0, 0) rotateY(-90deg) translate3d(100%, 0, 0);
 }
 
-.concave #main section>section.past {
+#reveal.concave  .slides>section>section.past {
 	-webkit-transform: translate3d(0, -80%, 0) rotateX(-70deg) translate3d(0, -80%, 0);
 	   -moz-transform: translate3d(0, -80%, 0) rotateX(-70deg) translate3d(0, -80%, 0);
 	    -ms-transform: translate3d(0, -80%, 0) rotateX(-70deg) translate3d(0, -80%, 0);
 	        transform: translate3d(0, -80%, 0) rotateX(-70deg) translate3d(0, -80%, 0);
 }
-.concave #main section>section.future {
+#reveal.concave  .slides>section>section.future {
 	-webkit-transform: translate3d(0, 80%, 0) rotateX(70deg) translate3d(0, 80%, 0);
 	   -moz-transform: translate3d(0, 80%, 0) rotateX(70deg) translate3d(0, 80%, 0);
 	    -ms-transform: translate3d(0, 80%, 0) rotateX(70deg) translate3d(0, 80%, 0);
@@ -540,14 +552,14 @@ section img {
  * LINEAR TRANSITION
  *********************************************/
 
-.linear #main>section.past {
+#reveal.linear .slides>section.past {
 	-webkit-transform: translate(-150%, 0);
 	   -moz-transform: translate(-150%, 0);
 	    -ms-transform: translate(-150%, 0);
 	     -o-transform: translate(-150%, 0);
 	        transform: translate(-150%, 0);
 }
-.linear #main>section.future {
+#reveal.linear .slides>section.future {
 	-webkit-transform: translate(150%, 0);
 	   -moz-transform: translate(150%, 0);
 	    -ms-transform: translate(150%, 0);
@@ -555,14 +567,14 @@ section img {
 	        transform: translate(150%, 0);
 }
 
-.linear #main section>section.past {
+#reveal.linear .slides>section>section.past {
 	-webkit-transform: translate(0, -150%);
 	   -moz-transform: translate(0, -150%);
 	    -ms-transform: translate(0, -150%);
 	     -o-transform: translate(0, -150%);
 	        transform: translate(0, -150%);
 }
-.linear #main section>section.future {
+#reveal.linear .slides>section>section.future {
 	-webkit-transform: translate(0, 150%);
 	   -moz-transform: translate(0, 150%);
 	    -ms-transform: translate(0, 150%);
@@ -574,7 +586,7 @@ section img {
  * BOX TRANSITION
  *********************************************/
 
-.box #main {
+#reveal.cube .slides {
 	margin-top: -350px;
 
 	-webkit-perspective-origin: 50% 25%;
@@ -588,14 +600,19 @@ section img {
 	        perspective: 1300px;
 }
 
-.box #main section {
+#reveal.cube .slides section {
 	padding: 30px;
+
+	-webkit-backface-visibility: hidden;
+	   -moz-backface-visibility: hidden;
+	    -ms-backface-visibility: hidden;
+	        backface-visibility: hidden;
 	
 	-webkit-box-sizing: border-box;
 	   -moz-box-sizing: border-box;
 	        box-sizing: border-box;
 }
-	.box #main section:not(.stack):before {
+	#reveal.cube .slides section:not(.stack):before {
 		content: '';
 		position: absolute;
 		display: block;
@@ -603,7 +620,7 @@ section img {
 		height: 100%;
 		left: 0;
 		top: 0;
-		background: #292929;
+		background: #232628;
 		border-radius: 4px;
 
 		-webkit-transform: translateZ( -20px );
@@ -612,7 +629,7 @@ section img {
 		     -o-transform: translateZ( -20px );
 		        transform: translateZ( -20px );
 	}
-	.box #main section:not(.stack):after {
+	#reveal.cube .slides section:not(.stack):after {
 		content: '';
 		position: absolute;
 		display: block;
@@ -633,12 +650,12 @@ section img {
 		        transform: translateZ(-90px) rotateX( 65deg );
 	}
 
-.box #main section.stack {
+#reveal.cube .slides>section.stack {
 	padding: 0;
 	background: none;
 }
 
-.box #main>section.past {
+#reveal.cube .slides>section.past {
 	-webkit-transform-origin: 100% 0%;
 	   -moz-transform-origin: 100% 0%;
 	    -ms-transform-origin: 100% 0%;
@@ -650,7 +667,7 @@ section img {
 	        transform: translate3d(-100%, 0, 0) rotateY(-90deg);
 }
 
-.box #main>section.future {
+#reveal.cube .slides>section.future {
 	-webkit-transform-origin: 0% 0%;
 	   -moz-transform-origin: 0% 0%;
 	    -ms-transform-origin: 0% 0%;
@@ -662,7 +679,7 @@ section img {
 	        transform: translate3d(100%, 0, 0) rotateY(90deg);
 }
 
-.box #main section>section.past {
+#reveal.cube .slides>section>section.past {
 	-webkit-transform-origin: 0% 100%;
 	   -moz-transform-origin: 0% 100%;
 	    -ms-transform-origin: 0% 100%;
@@ -674,7 +691,7 @@ section img {
 	        transform: translate3d(0, -100%, 0) rotateX(90deg);
 }
 
-.box #main section>section.future {
+#reveal.cube .slides>section>section.future {
 	-webkit-transform-origin: 0% 0%;
 	   -moz-transform-origin: 0% 0%;
 	    -ms-transform-origin: 0% 0%;
@@ -691,7 +708,7 @@ section img {
  * PAGE TRANSITION
  *********************************************/
 
-.page #main {
+#reveal.page .slides {
 	margin-top: -350px;
 
 	-webkit-perspective-origin: 50% 50%;
@@ -705,17 +722,17 @@ section img {
 	        perspective: 3000px;
 }
 
-.page #main section {
+#reveal.page .slides section {
 	padding: 30px;
 
 	-webkit-box-sizing: border-box;
 	   -moz-box-sizing: border-box;
 	        box-sizing: border-box;
 }
-	.page #main section.past {
+	#reveal.page .slides section.past {
 		z-index: 12;
 	}
-	.page #main section:not(.stack):before {
+	#reveal.page .slides section:not(.stack):before {
 		content: '';
 		position: absolute;
 		display: block;
@@ -723,7 +740,7 @@ section img {
 		height: 100%;
 		left: 0;
 		top: 0;
-		background: #292929;
+		background: #232628;
 
 		-webkit-transform: translateZ( -20px );
 		   -moz-transform: translateZ( -20px );
@@ -731,7 +748,7 @@ section img {
 		     -o-transform: translateZ( -20px );
 		        transform: translateZ( -20px );
 	}
-	.page #main section:not(.stack):after {
+	#reveal.page .slides section:not(.stack):after {
 		content: '';
 		position: absolute;
 		display: block;
@@ -748,12 +765,12 @@ section img {
 		-webkit-transform: translateZ(-90px) rotateX( 65deg );
 	}
 
-.page #main section.stack {
+#reveal.page .slides>section.stack {
 	padding: 0;
 	background: none;
 }
 
-.page #main>section.past {
+#reveal.page .slides>section.past {
 	-webkit-transform-origin: 0% 0%;
 	   -moz-transform-origin: 0% 0%;
 	    -ms-transform-origin: 0% 0%;
@@ -765,7 +782,7 @@ section img {
 	        transform: translate3d(-40%, 0, 0) rotateY(-80deg);
 }
 
-.page #main>section.future {
+#reveal.page .slides>section.future {
 	-webkit-transform-origin: 100% 0%;
 	   -moz-transform-origin: 100% 0%;
 	    -ms-transform-origin: 100% 0%;
@@ -777,7 +794,7 @@ section img {
 	        transform: translate3d(0, 0, 0);
 }
 
-.page #main section>section.past {
+#reveal.page .slides>section>section.past {
 	-webkit-transform-origin: 0% 0%;
 	   -moz-transform-origin: 0% 0%;
 	    -ms-transform-origin: 0% 0%;
@@ -789,7 +806,7 @@ section img {
 	        transform: translate3d(0, -40%, 0) rotateX(80deg);
 }
 
-.page #main section>section.future {
+#reveal.page .slides>section>section.future {
 	-webkit-transform-origin: 0% 100%;
 	   -moz-transform-origin: 0% 100%;
 	    -ms-transform-origin: 0% 100%;
@@ -806,18 +823,18 @@ section img {
  * NEON THEME
  *********************************************/
 
-.neon a,
-.neon a:hover,
-.neon .controls a.enabled {
+#reveal.neon a,
+#reveal.neon a:hover,
+#reveal.neon .controls a.enabled {
 	color: #5de048;
 }
 
-.neon .progress span,
-.neon .roll span:after {
+#reveal.neon .progress span,
+#reveal.neon .roll span:after {
 	background: #5de048;
 }
 
-a.image:hover img {
+#reveal.neon a.image:hover img {
 	border-color: #5de048;
 }
 
@@ -826,30 +843,86 @@ a.image:hover img {
  * OVERVIEW
  *********************************************/
 
-.overview #main section {
+#reveal.overview .slides {
+	-webkit-perspective: 700px;
+	   -moz-perspective: 700px;
+	    -ms-perspective: 700px;
+	        perspective: 700px;
+}
+
+#reveal.overview .slides section {
 	padding: 20px 0;
 	opacity: 1;
 	cursor: pointer;
 	background: rgba(0,0,0,0.1);
 }
-.overview #main section:after,
-.overview #main section:before {
+#reveal.overview .slides section:after,
+#reveal.overview .slides section:before {
 	display: none !important;
 }
-.overview #main section>section {
+#reveal.overview .slides section>section {
 	opacity: 1;
 	cursor: pointer;
 }
-	.overview #main section:hover {
+	#reveal.overview .slides section:hover {
 		background: rgba(0,0,0,0.3);
 	}
 
-	.overview #main section.present {
+	#reveal.overview .slides section.present {
 		background: rgba(0,0,0,0.3);
 	}
-.overview #main section.stack {
+#reveal.overview .slides>section.stack {
 	background: none;
 	padding: 0;
 }
 
 
+/*********************************************
+ * FALLBACK
+ *********************************************/
+
+.no-transforms {
+	overflow-y: auto;
+}
+
+.no-transforms .slides section {
+	-webkit-transform: none;
+	   -moz-transform: none;
+	    -ms-transform: none;
+	        transform: none;
+	
+	display: block!important;
+	opacity: 1!important;
+	position: relative!important;
+}
+
+
+/*********************************************
+ * DEFAULT STATES
+ *********************************************/
+
+.state-background {
+	position: absolute;
+	width: 100%;
+	height: 100%;
+	background: rgba( 0, 0, 0, 0 );
+
+	-webkit-transition: background 800ms ease;
+	   -moz-transition: background 800ms ease;
+	    -ms-transition: background 800ms ease;
+	     -o-transition: background 800ms ease;
+	        transition: background 800ms ease;
+}
+.alert .state-background {
+	background: rgba( 200, 50, 30, 0.6 );
+}
+.soothe .state-background {
+	background: rgba( 50, 200, 90, 0.4 );
+}
+.blackout .state-background {
+	background: rgba( 0, 0, 0, 0.6 );
+}
+
+
+
+

js/reveal.js

@@ -18,10 +18,8 @@
  * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
  * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
  * THE SOFTWARE.
- *
  * 
  * #############################################################################
- * 
  *
  * Reveal.js is an easy to use HTML based slideshow enhanced by 
  * sexy CSS 3D transforms.
@@ -36,59 +34,34 @@
  * - Reveal.navigateRight();
  * - Reveal.navigateUp();
  * - Reveal.navigateDown();
- * 
- * 
- * version 0.1:
- * - First release
- * 
- * version 0.2:		
- * - Refactored code and added inline documentation
- * - Slides now have unique URL's
- * - A basic API to invoke navigation was added
- * 
- * version 0.3:		
- * - Added licensing terms
- * - Fixed broken links on touch devices
- * 
- * version 1.0:
- * - Added controls
- * - Added initialization options
- * - Reveal views in fragments
- * - Revamped, darker, theme
- * - Tweaked markup styles (a, em, strong, b, i, blockquote, q, pre, ul, ol)
- * - Support for themes at initialization (default/linear/concave)
- * - Code highlighting via highlight.js
- * 
- * version 1.1:
- * - Optional progress bar UI element
- * - Slide overview available via SPACE
- * - Added 'transition' option for specifying transition styles
- * - Added 'theme' option for specifying UI styles
- * - Slides that contain nested-slides are given the 'stack' class
- * 
- * TODO:
- * - Touch/swipe interactions
- * - Presentation overview via keyboard shortcut
  * 	
  * @author Hakim El Hattab | http://hakim.se
- * @version 1.1
+ * @version 1.2
  */
 var Reveal = (function(){
 	
-	var HORIZONTAL_SLIDES_SELECTOR = '#main>section',
-		VERTICAL_SLIDES_SELECTOR = 'section.present>section',
+	var HORIZONTAL_SLIDES_SELECTOR = '#reveal .slides>section',
+		VERTICAL_SLIDES_SELECTOR = '#reveal .slides>section.present>section',
 
 		// The horizontal and verical index of the currently active slide
 		indexh = 0,
 		indexv = 0,
 
-		// Configurations options, including;
-		// > {Boolean} controls
-		// > {Boolean} progress
-		// > {String} theme
-		// > {String} transition
-		// > {Boolean} rollingLinks
-		config = {},
+		// Configurations options, can be overridden at initialization time 
+		config = {
+			controls: false,
+			progress: false,
+			history: false,
+			transition: 'default',
+			theme: 'default',
+			mouseWheel: 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
 		dom = {},
@@ -97,21 +70,43 @@ var Reveal = (function(){
 		supports3DTransforms =  document.body.style['perspectiveProperty'] !== undefined ||
 								document.body.style['WebkitPerspective'] !== undefined || 
                         		document.body.style['MozPerspective'] !== undefined ||
-                        		document.body.style['msTransform'] !== undefined;
+                        		document.body.style['msPerspective'] !== undefined,
+        
+        supports2DTransforms =  document.body.style['transformProperty'] !== undefined ||
+								document.body.style['WebkitTransform'] !== undefined || 
+                        		document.body.style['MozTransform'] !== undefined ||
+                        		document.body.style['msTransform'] !== undefined ||
+                        		document.body.style['OTransform'] !== undefined,
+		
+		// Throttles mouse wheel navigation
+		mouseWheelTimeout = 0,
+
+		// Delays updates to the URL due to a Chrome thumbnailer bug
+		writeURLTimeout = 0;
 	
 	/**
 	 * Starts up the slideshow by applying configuration
 	 * options and binding various events.
 	 */
 	function initialize( options ) {
+		
+		if( !supports2DTransforms && !supports3DTransforms ) {
+			document.body.setAttribute( 'class', 'no-transforms' );
+
+			// If the browser doesn't support transforms we won't be 
+			// using JavaScript to control the presentation
+			return;
+		}
+
 		// Cache references to DOM elements
-		dom.progress = document.querySelector( 'body>.progress' );
-		dom.progressbar = document.querySelector( 'body>.progress span' );
-		dom.controls = document.querySelector( '.controls' );
-		dom.controlsLeft = document.querySelector( '.controls .left' );
-		dom.controlsRight = document.querySelector( '.controls .right' );
-		dom.controlsUp = document.querySelector( '.controls .up' );
-		dom.controlsDown = document.querySelector( '.controls .down' );
+		dom.wrapper = document.querySelector( '#reveal' );
+		dom.progress = document.querySelector( '#reveal .progress' );
+		dom.progressbar = document.querySelector( '#reveal .progress span' );
+		dom.controls = document.querySelector( '#reveal .controls' );
+		dom.controlsLeft = document.querySelector( '#reveal .controls .left' );
+		dom.controlsRight = document.querySelector( '#reveal .controls .right' );
+		dom.controlsUp = document.querySelector( '#reveal .controls .up' );
+		dom.controlsDown = document.querySelector( '#reveal .controls .down' );
 
 		// Bind all view events
 		document.addEventListener('keydown', onDocumentKeyDown, false);
@@ -122,12 +117,8 @@ var Reveal = (function(){
 		dom.controlsUp.addEventListener('click', preventAndForward( navigateUp ), false);
 		dom.controlsDown.addEventListener('click', preventAndForward( navigateDown ), false);
 
-		// Fall back on default options
-		config.rollingLinks = options.rollingLinks === undefined ? true : options.rollingLinks;
-		config.controls = options.controls === undefined ? false : options.controls;
-		config.progress = options.progress === undefined ? false : options.progress;
-		config.transition = options.transition === undefined ? 'default' : options.transition;
-		config.theme = options.theme === undefined ? 'default' : options.theme;
+		// Copy options over to our config object
+		extend( config, options );
 
 		// Fall back on the 2D transform theme 'linear'
 		if( supports3DTransforms === false ) {
@@ -143,11 +134,16 @@ var Reveal = (function(){
 		}
 
 		if( config.transition !== 'default' ) {
-			document.body.classList.add( config.transition );
+			dom.wrapper.classList.add( config.transition );
 		}
 
 		if( config.theme !== 'default' ) {
-			document.body.classList.add( config.theme );
+			dom.wrapper.classList.add( config.theme );
+		}
+
+		if( config.mouseWheel ) {
+			document.addEventListener('DOMMouseScroll', onDocumentMouseScroll, false); // FF
+			document.addEventListener('mousewheel', onDocumentMouseScroll, false);
 		}
 
 		if( config.rollingLinks ) {
@@ -159,6 +155,16 @@ var Reveal = (function(){
 		readURL();
 	}
 
+	/**
+	 * Extend object a with the properties of object b. 
+	 * If there's a conflict, object b takes precedence.
+	 */
+	function extend( a, b ) {
+		for( var i in b ) {
+			a[ i ] = b[ i ];
+		}
+	}
+
 	/**
 	 * Prevents an events defaults behavior calls the 
 	 * specified delegate.
@@ -183,17 +189,17 @@ var Reveal = (function(){
 		// instead of checking contentEditable?
 
 		if( event.target.contentEditable === 'inherit' ) {
-			if( event.keyCode >= 37 && event.keyCode <= 40 ) {
+			if( event.keyCode >= 33 && event.keyCode <= 40 ) {
 				
 				switch( event.keyCode ) {
+					case 33: navigatePrev(); break; // prev for wireless presenter (PgUp)
+					case 34: navigateNext(); break; // next for wireless presenter (PgDn)
 					case 37: navigateLeft(); break; // left
 					case 39: navigateRight(); break; // right
 					case 38: navigateUp(); break; // up
 					case 40: navigateDown(); break; // down
 				}
 				
-				slide();
-				
 				event.preventDefault();
 				
 			}
@@ -205,6 +211,8 @@ var Reveal = (function(){
 				else {
 					activateOverview();
 				}
+
+				event.preventDefault();
 			}
 		}
 	}
@@ -255,6 +263,24 @@ var Reveal = (function(){
 			slide();
 		}
 	}
+
+	/**
+	 * Handles mouse wheel scrolling, throttled to avoid 
+	 * skipping multiple slides.
+	 */
+	function onDocumentMouseScroll( event ){
+		clearTimeout( mouseWheelTimeout );
+
+		mouseWheelTimeout = setTimeout( function() {
+			var delta = event.detail || -event.wheelDelta;
+			if( delta > 0 ) {
+				navigateNext();
+			}
+			else {
+				navigatePrev();
+			}
+		}, 100 );
+	}
 	
 	/**
 	 * Handler for the window level 'hashchange' event.
@@ -270,13 +296,13 @@ var Reveal = (function(){
 	 */
 	function linkify() {
         if( supports3DTransforms ) {
-        	var nodes = document.querySelectorAll( 'section a:not(.image)' );
+        	var nodes = document.querySelectorAll( '#reveal .slides section a:not(.image)' );
 
 	        for( var i = 0, len = nodes.length; i < len; i++ ) {
 	            var node = nodes[i];
 	            
-	            if( node.textContent && ( !node.className || !node.className.match( /roll/g ) ) ) {
-	                node.className += ' roll';
+	            if( node.textContent && !node.querySelector( 'img' ) && ( !node.className || !node.classList.contains( node, 'roll' ) ) ) {
+	                node.classList.add( 'roll' );
 	                node.innerHTML = '<span data-title="'+ node.text +'">' + node.innerHTML + '</span>';
 	            }
 	        };
@@ -291,7 +317,7 @@ var Reveal = (function(){
 	 * can't be improved.
 	 */
 	function activateOverview() {
-		document.body.classList.add( 'overview' );
+		dom.wrapper.classList.add( 'overview' );
 
 		var horizontalSlides = Array.prototype.slice.call( document.querySelectorAll( HORIZONTAL_SLIDES_SELECTOR ) );
 
@@ -307,8 +333,10 @@ var Reveal = (function(){
 			hslide.style.OTransform = htransform;
 			hslide.style.transform = htransform;
 
-			// Navigate to this slide on click
-			hslide.addEventListener( 'click', onOverviewSlideClicked, true );
+			if( !hslide.classList.contains( 'stack' ) ) {
+				// Navigate to this slide on click
+				hslide.addEventListener( 'click', onOverviewSlideClicked, true );
+			}
 
 			var verticalSlides = Array.prototype.slice.call( hslide.querySelectorAll( 'section' ) );
 
@@ -336,9 +364,9 @@ var Reveal = (function(){
 	 * active slide.
 	 */
 	function deactivateOverview() {
-		document.body.classList.remove( 'overview' );
+		dom.wrapper.classList.remove( 'overview' );
 
-		var slides = Array.prototype.slice.call( document.querySelectorAll( '#main section' ) );
+		var slides = Array.prototype.slice.call( document.querySelectorAll( '#reveal .slides section' ) );
 
 		for( var i = 0, len = slides.length; i < len; i++ ) {
 			var element = slides[i];
@@ -363,7 +391,7 @@ var Reveal = (function(){
 	 * false otherwise
 	 */
 	function overviewIsActive() {
-		return document.body.classList.contains( 'overview' );
+		return dom.wrapper.classList.contains( 'overview' );
 	}
 
 	/**
@@ -406,8 +434,6 @@ var Reveal = (function(){
 		if( slides.length ) {
 			// Enforce max and minimum index bounds
 			index = Math.max(Math.min(index, slides.length - 1), 0);
-			
-			slides[index].setAttribute('class', 'present');
 
 			for( var i = 0; i < slides.length; i++ ) {
 				var slide = slides[i];
@@ -418,20 +444,34 @@ var Reveal = (function(){
 					slide.style.display = Math.abs( index - i ) > 3 ? 'none' : 'block';
 				}
 
+				slides[i].classList.remove( 'past' );
+				slides[i].classList.remove( 'present' );
+				slides[i].classList.remove( 'future' );
+
 				if( i < index ) {
 					// Any element previous to index is given the 'past' class
-					slide.setAttribute('class', 'past');
+					slides[i].classList.add( 'past' );
 				}
 				else if( i > index ) {
 					// Any element subsequent to index is given the 'future' class
-					slide.setAttribute('class', 'future');
+					slides[i].classList.add( 'future' );
 				}
 
 				// If this element contains vertical slides
 				if( slide.querySelector( 'section' ) ) {
-					slide.classList.add( 'stack' );
+					slides[i].classList.add( 'stack' );
 				}
 			}
+
+			// 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 
@@ -448,9 +488,40 @@ var Reveal = (function(){
 	 * set indices. 
 	 */
 	function slide() {
+		// Remember the state before this slide
+		var stateBefore = state.concat();
+
+		// Reset the state array
+		state.length = 0;
+
+		// Activate and transition to the new slide
 		indexh = updateSlides( HORIZONTAL_SLIDES_SELECTOR, indexh );
 		indexv = updateSlides( VERTICAL_SLIDES_SELECTOR, indexv );
 
+		// Apply the new state
+		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] );
+
+			// Dispatch custom event
+			var event = document.createEvent( "HTMLEvents" );
+			event.initEvent( state[i], true, true );
+			document.dispatchEvent( event );
+		}
+
+		// Clean up the remaints of the previous state
+		while( stateBefore.length ) {
+			document.documentElement.classList.remove( stateBefore.pop() );
+		}
+
 		// Update progress if enabled
 		if( config.progress ) {
 			dom.progressbar.style.width = ( indexh / ( document.querySelectorAll( HORIZONTAL_SLIDES_SELECTOR ).length - 1 ) ) * window.innerWidth + 'px';
@@ -463,7 +534,8 @@ var Reveal = (function(){
 
 		updateControls();
 		
-		writeURL();
+		clearTimeout( writeURLTimeout );
+		writeURLTimeout = setTimeout( writeURL, 1500 );
 	}
 
 	/**
@@ -508,8 +580,8 @@ var Reveal = (function(){
 		var bits = window.location.hash.slice(2).split('/');
 		
 		// Read the index components of the hash
-		indexh = bits[0] ? parseInt( bits[0] ) : 0;
-		indexv = bits[1] ? parseInt( bits[1] ) : 0;
+		indexh = parseInt( bits[0] ) || 0 ;
+		indexv = parseInt( bits[1] ) || 0 ;
 		
 		navigateTo( indexh, indexv );
 	}
@@ -519,14 +591,16 @@ var Reveal = (function(){
 	 * state. 
 	 */
 	function writeURL() {
-		var url = '/';
-		
-		// Only include the minimum possible number of components in
-		// the URL
-		if( indexh > 0 || indexv > 0 ) url += indexh;
-		if( indexv > 0 ) url += '/' + indexv;
-		
-		window.location.hash = url;
+		if( config.history ) {
+			var url = '/';
+			
+			// Only include the minimum possible number of components in
+			// the URL
+			if( indexh > 0 || indexv > 0 ) url += indexh;
+			if( indexv > 0 ) url += '/' + indexv;
+			
+			window.location.hash = url;
+		}
 	}
 
 	/**
@@ -626,6 +700,41 @@ var Reveal = (function(){
 			slide();
 		}
 	}
+
+	/**
+	 * Navigates backwards, prioritized in the following order:
+	 * 1) Previous fragment
+	 * 2) Previous vertical slide
+	 * 3) Previous horizontal slide
+	 */
+	function navigatePrev() {
+		// Prioritize revealing fragments
+		if( previousFragment() === false ) {
+			if( availableRoutes().up ) {
+				navigateUp();
+			}
+			else {
+				// Fetch the previous horizontal slide, if there is one
+				var previousSlide = document.querySelector( '#reveal .slides>section.past:nth-child(' + indexh + ')' );
+
+				if( previousSlide ) {
+					indexv = ( previousSlide.querySelectorAll('section').length + 1 ) || 0;
+					indexh --;
+					slide();
+				}
+			}
+		}
+	}
+
+	/**
+	 * Same as #navigatePrev() but navigates forwards.
+	 */
+	function navigateNext() {
+		// Prioritize revealing fragments
+		if( nextFragment() === false ) {
+			availableRoutes().down ? navigateDown() : navigateRight();
+		}
+	}
 	
 	// Expose some methods publicly
 	return {

lib/classList.js

@@ -0,0 +1,3 @@
+// classList polyfill from https://github.com/remy/polyfills/blob/master/classList.js
+(function(){function c(a){this._element=a;if(a.className!=this.classCache){this._classCache=a.className;var a=this._classCache.split(" "),b;for(b=0;b<a.length;b++)e.call(this,a[b])}}if(!("undefined"===typeof Element||Element.prototype.hasOwnProperty("classList"))){var d=[].indexOf,f=[].slice,e=[].push,g=[].splice,h=[].join;c.prototype={add:function(a){e.call(this,a);this._element.className=f.call(this,0).join(" ")},contains:function(a){return-1!==d.call(this,a)},item:function(a){return this[a]||null},
+remove:function(a){a=d.call(this,a);g.call(this,a,1);this._element.className=f.call(this,0).join(" ")},toString:function(){return h.call(this," ")},toggle:function(a){-1===d.call(this,a)?this.add(a):this.remove(a)}};window.DOMTokenList=c;Element.prototype.__defineGetter__("classList",function(){return new c(this)})}})();