浏览代码

merge conflicts w preview & backgrounds

Hakim El Hattab 11 年之前
父节点
当前提交
7094f44eb9
共有 14 个文件被更改,包括 507 次插入73 次删除
  1. 38 16
      README.md
  2. 27 15
      css/print/pdf.css
  3. 106 7
      css/reveal.css
  4. 0 0
      css/reveal.min.css
  5. 26 23
      index.html
  6. 151 8
      js/reveal.js
  7. 1 1
      js/reveal.min.js
  8. 1 0
      plugin/multiplex/index.js
  9. 1 0
      plugin/notes-server/index.js
  10. 3 3
      plugin/notes/notes.html
  11. 二进制
      test/assets/image1.png
  12. 二进制
      test/assets/image2.png
  13. 95 0
      test/background.html
  14. 58 0
      test/media.html

+ 38 - 16
README.md

@@ -5,7 +5,7 @@ A framework for easily creating beautiful presentations using HTML. [Check out t
 reveal.js comes with a broad range of features including [nested slides](https://github.com/hakimel/reveal.js#markup), [markdown contents](https://github.com/hakimel/reveal.js#markdown), [PDF export](https://github.com/hakimel/reveal.js#pdf-export), [speaker notes](https://github.com/hakimel/reveal.js#speaker-notes) and a [JavaScript API](https://github.com/hakimel/reveal.js#api). It's best viewed in a browser with support for CSS 3D transforms but [fallbacks](https://github.com/hakimel/reveal.js/wiki/Browser-Support) are available to make sure your presentation can still be viewed elsewhere.
 reveal.js comes with a broad range of features including [nested slides](https://github.com/hakimel/reveal.js#markup), [markdown contents](https://github.com/hakimel/reveal.js#markdown), [PDF export](https://github.com/hakimel/reveal.js#pdf-export), [speaker notes](https://github.com/hakimel/reveal.js#speaker-notes) and a [JavaScript API](https://github.com/hakimel/reveal.js#api). It's best viewed in a browser with support for CSS 3D transforms but [fallbacks](https://github.com/hakimel/reveal.js/wiki/Browser-Support) are available to make sure your presentation can still be viewed elsewhere.
 
 
 
 
-#### More reading::
+#### More reading:
 - [Installation](#installation): Step-by-step instructions for getting reveal.js running on your computer.
 - [Installation](#installation): Step-by-step instructions for getting reveal.js running on your computer.
 - [Changelog](https://github.com/hakimel/reveal.js/wiki/Changelog): Up-to-date version history.
 - [Changelog](https://github.com/hakimel/reveal.js/wiki/Changelog): Up-to-date version history.
 - [Examples](https://github.com/hakimel/reveal.js/wiki/Example-Presentations): Presentations created with reveal.js, add your own!
 - [Examples](https://github.com/hakimel/reveal.js/wiki/Example-Presentations): Presentations created with reveal.js, add your own!
@@ -106,6 +106,9 @@ Reveal.initialize({
 	// Transition speed
 	// Transition speed
 	transitionSpeed: 'default', // default/fast/slow
 	transitionSpeed: 'default', // default/fast/slow
 
 
+	// Transition style for full page backgrounds
+	backgroundTransition: 'default' // default/linear
+
 });
 });
 ```
 ```
 
 
@@ -211,18 +214,6 @@ Reveal.getCurrentSlide();
 Reveal.getIndices(); // { h: 0, v: 0 } }
 Reveal.getIndices(); // { h: 0, v: 0 } }
 ```
 ```
 
 
-### States
-
-If you set ``data-state="somestate"`` on a slide ``<section>``, "somestate" will be applied as a class on the document element when that slide is opened. This allows you to apply broad style changes to the page based on the active slide.
-
-Furthermore you can also listen to these changes in state via JavaScript:
-
-```javascript
-Reveal.addEventListener( 'somestate', function() {
-	// TODO: Sprinkle magic
-}, false );
-```
-
 ### Ready event
 ### Ready event
 
 
 The 'ready' event is fired when reveal.js has loaded all (synchronous) dependencies and is ready to start navigating.
 The 'ready' event is fired when reveal.js has loaded all (synchronous) dependencies and is ready to start navigating.
@@ -245,6 +236,37 @@ Reveal.addEventListener( 'slidechanged', function( event ) {
 } );
 } );
 ```
 ```
 
 
+### States
+
+If you set ``data-state="somestate"`` on a slide ``<section>``, "somestate" will be applied as a class on the document element when that slide is opened. This allows you to apply broad style changes to the page based on the active slide.
+
+Furthermore you can also listen to these changes in state via JavaScript:
+
+```javascript
+Reveal.addEventListener( 'somestate', function() {
+	// TODO: Sprinkle magic
+}, false );
+```
+
+### Slide backgrounds
+
+Slides are contained withing a limited portion of the screen by default to allow them to fit any display and scale uniformly. You can apply full page background colors or images by applying a ```data-background``` attribute to your ```<section>``` elements. Below are a few examples.
+
+```html
+<section data-background="#ff0000">
+	<h2>All CSS color formats are supported, like rgba() or hsl().</h2>
+</section>
+<section data-background="http://example.com/image.png">
+	<h2>This slide will have a full-size background image.</h2>
+</section>
+<section data-background="http://example.com/image.png" data-background-size="100px" data-background-repeat="repeat">
+	<h2>This background image will be sized to 100px and repeated.</h2>
+</section>
+```
+
+Backgrounds transition using a fade animation by default. This can be changed to a linear sliding transition by passing ```backgroundTransition: 'linear'``` to the ```Reveal.initialize()``` call.
+
+
 ### Internal links
 ### Internal links
 
 
 It's easy to link between slides. The first example below targets the index of another slide whereas the second targets a slide with an ID attribute (```<section id="some-slide">```):
 It's easy to link between slides. The first example below targets the index of another slide whereas the second targets a slide with an ID attribute (```<section id="some-slide">```):
@@ -282,7 +304,7 @@ Note that this does not work with the page and cube transitions.
 
 
 
 
 ### Fragments
 ### Fragments
-Fragments are used to highlight individual elements on a slide. Every elmement with the class ```fragment``` will be stepped through before moving on to the next slide. Here's an example: http://lab.hakim.se/reveal-js/#/16
+Fragments are used to highlight individual elements on a slide. Every element with the class ```fragment``` will be stepped through before moving on to the next slide. Here's an example: http://lab.hakim.se/reveal-js/#/16
 
 
 The default fragment style is to start out invisible and fade in. This style can be changed by appending a different class to the fragment:
 The default fragment style is to start out invisible and fade in. This style can be changed by appending a different class to the fragment:
 
 
@@ -583,11 +605,11 @@ The **basic setup** is for authoring presentations only. The **full setup** give
 
 
 ### Basic setup
 ### Basic setup
 
 
-The core of reveal.js is very easy to install. You'll simply need to download a copy of this repository and open the index.html file directly in your browser.g
+The core of reveal.js is very easy to install. You'll simply need to download a copy of this repository and open the index.html file directly in your browser.
 
 
 1. Download a copy of reveal.js from <https://github.com/hakimel/reveal.js/archive/master.zip>
 1. Download a copy of reveal.js from <https://github.com/hakimel/reveal.js/archive/master.zip>
 
 
-2. Unizp and replace the example contents in index.html with your own
+2. Unzip and replace the example contents in index.html with your own
 
 
 3. Open index.html in a browser to view it
 3. Open index.html in a browser to view it
 
 

+ 27 - 15
css/print/pdf.css

@@ -17,8 +17,9 @@
 
 
 body {
 body {
 	font-size: 18pt;
 	font-size: 18pt;
-	width: auto;
-	height: auto;
+	width: 297mm;
+	height: 229mm;
+	margin: 0 auto !important;
 	border: 0;
 	border: 0;
 	padding: 0;
 	padding: 0;
 	float: none !important;
 	float: none !important;
@@ -88,10 +89,8 @@ ul, ol, div, p {
 
 
 	left: auto;
 	left: auto;
 	top: auto;
 	top: auto;
-	margin-left: auto;
-	margin-right: auto;
-	margin-top: auto;
-	padding: auto;
+	margin: 0 !important;
+	padding: 0 !important;
 
 
 	overflow: visible;
 	overflow: visible;
 	display: block;
 	display: block;
@@ -113,18 +112,18 @@ ul, ol, div, p {
 	page-break-after: always !important;
 	page-break-after: always !important;
 
 
 	visibility: visible !important;
 	visibility: visible !important;
-	position: static !important;
+	position: relative !important;
 	width: 100% !important;
 	width: 100% !important;
-	height: auto !important;
-	min-height: initial !important;
+	height: 229mm !important;
+	min-height: 229mm !important;
 	display: block !important;
 	display: block !important;
-	overflow: visible !important;
+	overflow: hidden !important;
 
 
 	left: 0 !important;
 	left: 0 !important;
 	top: 0 !important;
 	top: 0 !important;
-	margin-left: 0px !important;
-	margin-top: 50px !important;
-	padding: 20px 0px !important;
+	margin: 0 !important;
+	padding: 2cm 1cm 0 1cm !important;
+	box-sizing: border-box !important;
 
 
 	opacity: 1 !important;
 	opacity: 1 !important;
 
 
@@ -139,9 +138,11 @@ ul, ol, div, p {
 	        transform: none !important;
 	        transform: none !important;
 }
 }
 .reveal section.stack {
 .reveal section.stack {
-	margin: 0px !important;
-	padding: 0px !important;
+	margin: 0 !important;
+	padding: 0 !important;
 	page-break-after: avoid !important;
 	page-break-after: avoid !important;
+	height: auto !important;
+	min-height: auto !important;
 }
 }
 .reveal section .fragment {
 .reveal section .fragment {
 	opacity: 1 !important;
 	opacity: 1 !important;
@@ -152,6 +153,17 @@ ul, ol, div, p {
 	    -ms-transform: none !important;
 	    -ms-transform: none !important;
 	        transform: none !important;
 	        transform: none !important;
 }
 }
+.reveal section .slide-background {
+	position: absolute;
+	top: 0;
+	left: 0;
+	width: 100%;
+	z-index: 0;
+}
+.reveal section>* {
+	position: relative;
+	z-index: 1;
+}
 .reveal img {
 .reveal img {
 	box-shadow: none;
 	box-shadow: none;
 }
 }

+ 106 - 7
css/reveal.css

@@ -1252,17 +1252,18 @@ body {
 	left: 0;
 	left: 0;
 }
 }
 
 
-.no-transition {
-	-webkit-transition: none;
-	   -moz-transition: none;
-	    -ms-transition: none;
-	     -o-transition: none;
-	        transition: none;
+.reveal .no-transition,
+.reveal .no-transition * {
+	-webkit-transition: none !important;
+	   -moz-transition: none !important;
+	    -ms-transition: none !important;
+	     -o-transition: none !important;
+	        transition: none !important;
 }
 }
 
 
 
 
 /*********************************************
 /*********************************************
- * BACKGROUND STATES
+ * BACKGROUND STATES [DEPRECATED]
  *********************************************/
  *********************************************/
 
 
 .reveal .state-background {
 .reveal .state-background {
@@ -1306,6 +1307,104 @@ body {
 }
 }
 
 
 
 
+/*********************************************
+ * 
+ *********************************************/
+
+.reveal>.backgrounds {
+	position: absolute;
+	width: 100%;
+	height: 100%;
+}
+	.reveal .slide-background {
+		position: absolute;
+		width: 100%;
+		height: 100%;
+		opacity: 0;
+		visibility: hidden;
+
+		background-color: rgba( 0, 0, 0, 0 );
+		background-position: 50% 50%;
+		background-repeat: no-repeat;
+		background-size: cover;
+
+		-webkit-transition: all 600ms cubic-bezier(0.260, 0.860, 0.440, 0.985);
+		   -moz-transition: all 600ms cubic-bezier(0.260, 0.860, 0.440, 0.985);
+		    -ms-transition: all 600ms cubic-bezier(0.260, 0.860, 0.440, 0.985);
+		     -o-transition: all 600ms cubic-bezier(0.260, 0.860, 0.440, 0.985);
+		        transition: all 600ms cubic-bezier(0.260, 0.860, 0.440, 0.985);
+	}
+	.reveal .slide-background.present {
+		opacity: 1;
+		visibility: visible;
+	}
+
+	.print-pdf .reveal .slide-background {
+		opacity: 1 !important;
+		visibility: visible !important;
+	}
+
+/* Linear sliding transition style */
+.reveal[data-background-transition=linear]>.backgrounds .slide-background {
+	opacity: 1;
+
+	-webkit-backface-visibility: hidden;
+	   -moz-backface-visibility: hidden;
+	    -ms-backface-visibility: hidden;
+	        backface-visibility: hidden;
+
+	-webkit-transition-duration: 800ms;
+	   -moz-transition-duration: 800ms;
+	    -ms-transition-duration: 800ms;
+	     -o-transition-duration: 800ms;
+	        transition-duration: 800ms;
+}
+	.reveal[data-background-transition=linear]>.backgrounds .slide-background.past {
+		-webkit-transform: translate(-100%, 0);
+		   -moz-transform: translate(-100%, 0);
+		    -ms-transform: translate(-100%, 0);
+		     -o-transform: translate(-100%, 0);
+		        transform: translate(-100%, 0);
+	}
+	.reveal[data-background-transition=linear]>.backgrounds .slide-background.future {
+		-webkit-transform: translate(100%, 0);
+		   -moz-transform: translate(100%, 0);
+		    -ms-transform: translate(100%, 0);
+		     -o-transform: translate(100%, 0);
+		        transform: translate(100%, 0);
+	}
+
+	.reveal[data-background-transition=linear]>.backgrounds .slide-background>.slide-background.past {
+		-webkit-transform: translate(0, -100%);
+		   -moz-transform: translate(0, -100%);
+		    -ms-transform: translate(0, -100%);
+		     -o-transform: translate(0, -100%);
+		        transform: translate(0, -100%);
+	}
+	.reveal[data-background-transition=linear]>.backgrounds .slide-background>.slide-background.future {
+		-webkit-transform: translate(0, 100%);
+		   -moz-transform: translate(0, 100%);
+		    -ms-transform: translate(0, 100%);
+		     -o-transform: translate(0, 100%);
+		        transform: translate(0, 100%);
+	}
+
+
+/* Global transition speed settings */
+.reveal[data-transition-speed="fast"]>.backgrounds .slide-background {
+	-webkit-transition-duration: 400ms;
+	   -moz-transition-duration: 400ms;
+	    -ms-transition-duration: 400ms;
+	        transition-duration: 400ms;
+}
+.reveal[data-transition-speed="slow"]>.backgrounds .slide-background {
+	-webkit-transition-duration: 1200ms;
+	   -moz-transition-duration: 1200ms;
+	    -ms-transition-duration: 1200ms;
+	        transition-duration: 1200ms;
+}
+
+
 /*********************************************
 /*********************************************
  * RTL SUPPORT
  * RTL SUPPORT
  *********************************************/
  *********************************************/

文件差异内容过多而无法显示
+ 0 - 0
css/reveal.min.css


+ 26 - 23
index.html

@@ -183,29 +183,12 @@
 				</section>
 				</section>
 
 
 				<section>
 				<section>
-					<section data-state="alert">
-						<h2>Global State</h2>
-						<p>
-							Set <code>data-state="something"</code> on a slide and <code>"something"</code>
-							will be added as a class to the document element when the slide is open. This lets you
-							apply broader style changes, like switching the background.
-						</p>
-						<a href="#" class="image navigate-down">
-							<img width="178" height="238" src="https://s3.amazonaws.com/hakim-static/reveal-js/arrow.png" alt="Down arrow">
-						</a>
-					</section>
-					<section data-state="blackout">
-						<h2>"blackout"</h2>
-						<a href="#" class="image navigate-down">
-							<img width="178" height="238" src="https://s3.amazonaws.com/hakim-static/reveal-js/arrow.png" alt="Down arrow">
-						</a>
-					</section>
-					<section data-state="soothe">
-						<h2>"soothe"</h2>
-						<a href="#" class="image navigate-next">
-							<img width="178" height="238" src="https://s3.amazonaws.com/hakim-static/reveal-js/arrow.png" alt="Up arrow" style="-webkit-transform: rotate(-90deg);">
-						</a>
-					</section>
+					<h2>Global State</h2>
+					<p>
+						Set <code>data-state="something"</code> on a slide and <code>"something"</code>
+						will be added as a class to the document element when the slide is open. This lets you
+						apply broader style changes, like switching the background.
+					</p>
 				</section>
 				</section>
 
 
 				<section data-state="customevent">
 				<section data-state="customevent">
@@ -220,6 +203,26 @@ Reveal.addEventListener( 'customevent', function() {
 					</code></pre>
 					</code></pre>
 				</section>
 				</section>
 
 
+				<section>
+					<section data-background="#007777">
+						<h2>Slide Backgrounds</h2>
+						<p>
+							Set <code>data-background="#007777"</code> on a slide to change the full page background to the given color. All CSS color formats are supported.
+						</p>
+						<a href="#" class="image navigate-down">
+							<img width="178" height="238" src="https://s3.amazonaws.com/hakim-static/reveal-js/arrow.png" alt="Down arrow">
+						</a>
+					</section>
+					<section data-background="https://s3.amazonaws.com/hakim-static/reveal-js/arrow.png">
+						<h2>Image Backgrounds</h2>
+						<pre><code>&lt;section data-background="image.png"&gt;</code></pre>
+					</section>
+					<section data-background="https://s3.amazonaws.com/hakim-static/reveal-js/arrow.png" data-background-repeat="repeat" data-background-size="100px">
+						<h2>Repeated Image Backgrounds</h2>
+						<pre><code style="word-wrap: break-word;">&lt;section data-background="image.png" data-background-repeat="repeat" data-background-size="100px"&gt;</code></pre>
+					</section>
+				</section>
+
 				<section>
 				<section>
 					<h2>Clever Quotes</h2>
 					<h2>Clever Quotes</h2>
 					<p>
 					<p>

+ 151 - 8
js/reveal.js

@@ -82,6 +82,9 @@ var Reveal = (function(){
 			// Transition speed
 			// Transition speed
 			transitionSpeed: 'default', // default/fast/slow
 			transitionSpeed: 'default', // default/fast/slow
 
 
+			// Transition style for full page slide backgrounds
+			backgroundTransition: 'default', // default/linear
+
 			// Script dependencies to load
 			// Script dependencies to load
 			dependencies: []
 			dependencies: []
 		},
 		},
@@ -189,6 +192,13 @@ var Reveal = (function(){
 		dom.wrapper = document.querySelector( '.reveal' );
 		dom.wrapper = document.querySelector( '.reveal' );
 		dom.slides = document.querySelector( '.reveal .slides' );
 		dom.slides = document.querySelector( '.reveal .slides' );
 
 
+		// Background element
+		if( !document.querySelector( '.reveal .backgrounds' ) ) {
+			dom.background = document.createElement( 'div' );
+			dom.background.classList.add( 'backgrounds' );
+			dom.wrapper.appendChild( dom.background );
+		}
+
 		// Progress bar
 		// Progress bar
 		if( !dom.wrapper.querySelector( '.progress' ) ) {
 		if( !dom.wrapper.querySelector( '.progress' ) ) {
 			var progressElement = document.createElement( 'div' );
 			var progressElement = document.createElement( 'div' );
@@ -208,11 +218,11 @@ var Reveal = (function(){
 			dom.wrapper.appendChild( controlsElement );
 			dom.wrapper.appendChild( controlsElement );
 		}
 		}
 
 
-		// Presentation background element
+		// State background element [DEPRECATED]
 		if( !dom.wrapper.querySelector( '.state-background' ) ) {
 		if( !dom.wrapper.querySelector( '.state-background' ) ) {
-			var backgroundElement = document.createElement( 'div' );
-			backgroundElement.classList.add( 'state-background' );
-			dom.wrapper.appendChild( backgroundElement );
+			var stateBackgroundElement = document.createElement( 'div' );
+			stateBackgroundElement.classList.add( 'state-background' );
+			dom.wrapper.appendChild( stateBackgroundElement );
 		}
 		}
 
 
 		// Overlay graphic which is displayed during the paused mode
 		// Overlay graphic which is displayed during the paused mode
@@ -240,6 +250,86 @@ var Reveal = (function(){
 
 
 	}
 	}
 
 
+	/**
+	 * Creates the slide background elements and appends them
+	 * to the background container. One element is created per
+	 * slide no matter if the given slide has visible background.
+	 */
+	function createBackgrounds() {
+
+		if( isPrintingPDF() ) {
+			document.body.classList.add( 'print-pdf' );
+		}
+
+		// Clear prior backgrounds
+		dom.background.innerHTML = '';
+		dom.background.classList.add( 'no-transition' );
+
+		// Helper method for creating a background element for the
+		// given slide
+		function _createBackground( slide, container ) {
+
+			var data = {
+				background: slide.getAttribute( 'data-background' ),
+				backgroundSize: slide.getAttribute( 'data-background-size' ),
+				backgroundColor: slide.getAttribute( 'data-background-color' ),
+				backgroundRepeat: slide.getAttribute( 'data-background-repeat' ),
+				backgroundPosition: slide.getAttribute( 'data-background-position' )
+			};
+
+			var element = document.createElement( 'div' );
+			element.className = 'slide-background';
+
+			if( data.background ) {
+				// Auto-wrap image urls in url(...)
+				if( /\.(png|jpg|jpeg|gif|bmp)$/gi.test( data.background ) ) {
+					element.style.backgroundImage = 'url('+ data.background +')';
+				}
+				else {
+					element.style.background = data.background;
+				}
+			}
+
+			// Additional and optional background properties
+			if( data.backgroundSize ) element.style.backgroundSize = data.backgroundSize;
+			if( data.backgroundColor ) element.style.backgroundColor = data.backgroundColor;
+			if( data.backgroundRepeat ) element.style.backgroundRepeat = data.backgroundRepeat;
+			if( data.backgroundPosition ) element.style.backgroundPosition = data.backgroundPosition;
+
+			container.appendChild( element );
+
+			return element;
+
+		}
+
+		// Iterate over all horizontal slides
+		toArray( document.querySelectorAll( HORIZONTAL_SLIDES_SELECTOR ) ).forEach( function( slideh ) {
+
+			var backgroundStack;
+
+			if( isPrintingPDF() ) {
+				backgroundStack = _createBackground( slideh, slideh );
+			}
+			else {
+				backgroundStack = _createBackground( slideh, dom.background );
+			}
+
+			// Iterate over all vertical slides
+			toArray( slideh.querySelectorAll( 'section' ) ).forEach( function( slidev ) {
+
+				if( isPrintingPDF() ) {
+					_createBackground( slidev, slidev );
+				}
+				else {
+					_createBackground( slidev, backgroundStack );
+				}
+
+			} );
+
+		} );
+
+	}
+
 	/**
 	/**
 	 * Hides the address bar if we're on a mobile device.
 	 * Hides the address bar if we're on a mobile device.
 	 */
 	 */
@@ -351,6 +441,7 @@ var Reveal = (function(){
 		dom.wrapper.classList.add( config.transition );
 		dom.wrapper.classList.add( config.transition );
 
 
 		dom.wrapper.setAttribute( 'data-transition-speed', config.transitionSpeed );
 		dom.wrapper.setAttribute( 'data-transition-speed', config.transitionSpeed );
+		dom.wrapper.setAttribute( 'data-background-transition', config.backgroundTransition );
 
 
 		if( dom.controls ) {
 		if( dom.controls ) {
 			dom.controls.style.display = ( config.controls && dom.controls ) ? 'block' : 'none';
 			dom.controls.style.display = ( config.controls && dom.controls ) ? 'block' : 'none';
@@ -570,6 +661,15 @@ var Reveal = (function(){
 
 
 	}
 	}
 
 
+	/**
+	 * Checks if this instance is being used to print a PDF.
+	 */
+	function isPrintingPDF() {
+
+		return ( /print-pdf/gi ).test( window.location.search );
+
+	}
+
 	/**
 	/**
 	 * Causes the address bar to hide on mobile devices,
 	 * Causes the address bar to hide on mobile devices,
 	 * more vertical space ftw.
 	 * more vertical space ftw.
@@ -770,7 +870,7 @@ var Reveal = (function(){
 	 */
 	 */
 	function layout() {
 	function layout() {
 
 
-		if( dom.wrapper ) {
+		if( dom.wrapper && !isPrintingPDF() ) {
 
 
 			// Available space to scale within
 			// Available space to scale within
 			var availableWidth = dom.wrapper.offsetWidth,
 			var availableWidth = dom.wrapper.offsetWidth,
@@ -1262,7 +1362,8 @@ var Reveal = (function(){
 		}
 		}
 
 
 		// Dispatch an event if the slide changed
 		// Dispatch an event if the slide changed
-		if( indexh !== indexhBefore || indexv !== indexvBefore ) {
+		var slideChanged = ( indexh !== indexhBefore || indexv !== indexvBefore );
+		if( slideChanged ) {
 			dispatchEvent( 'slidechanged', {
 			dispatchEvent( 'slidechanged', {
 				'indexh': indexh,
 				'indexh': indexh,
 				'indexv': indexv,
 				'indexv': indexv,
@@ -1299,11 +1400,14 @@ var Reveal = (function(){
 		}
 		}
 
 
 		// Handle embedded content
 		// Handle embedded content
-		stopEmbeddedContent( previousSlide );
-		startEmbeddedContent( currentSlide );
+		if( slideChanged ) {
+			stopEmbeddedContent( previousSlide );
+			startEmbeddedContent( currentSlide );
+		}
 
 
 		updateControls();
 		updateControls();
 		updateProgress();
 		updateProgress();
+		updateBackground();
 
 
 	}
 	}
 
 
@@ -1327,8 +1431,12 @@ var Reveal = (function(){
 		// Start auto-sliding if it's enabled
 		// Start auto-sliding if it's enabled
 		cueAutoSlide();
 		cueAutoSlide();
 
 
+		// Re-create the slide backgrounds
+		createBackgrounds();
+
 		updateControls();
 		updateControls();
 		updateProgress();
 		updateProgress();
+		updateBackground();
 
 
 	}
 	}
 
 
@@ -1385,6 +1493,9 @@ var Reveal = (function(){
 				element.classList.remove( 'present' );
 				element.classList.remove( 'present' );
 				element.classList.remove( 'future' );
 				element.classList.remove( 'future' );
 
 
+				// http://www.w3.org/html/wg/drafts/html/master/editing.html#the-hidden-attribute
+				element.setAttribute( 'hidden', '' );
+
 				if( i < index ) {
 				if( i < index ) {
 					// Any element previous to index is given the 'past' class
 					// Any element previous to index is given the 'past' class
 					element.classList.add( reverse ? 'future' : 'past' );
 					element.classList.add( reverse ? 'future' : 'past' );
@@ -1402,6 +1513,7 @@ 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' );
+			slides[index].removeAttribute( 'hidden' );
 
 
 			// If this slide has a state associated with it, add it
 			// If this slide has a state associated with it, add it
 			// onto the current state of the deck
 			// onto the current state of the deck
@@ -1533,6 +1645,37 @@ var Reveal = (function(){
 
 
 	}
 	}
 
 
+	/**
+	 * Updates the background elements to reflect the current 
+	 * slide.
+	 */
+	function updateBackground() {
+
+		// Update the classes of all backgrounds to match the 
+		// states of their slides (past/present/future)
+		toArray( dom.background.childNodes ).forEach( function( backgroundh, h ) {
+
+			// Reverse past/future classes when in RTL mode
+			var horizontalPast = config.rtl ? 'future' : 'past',
+				horizontalFuture = config.rtl ? 'past' : 'future';
+
+			backgroundh.className = 'slide-background ' + ( h < indexh ? horizontalPast : h > indexh ? horizontalFuture : 'present' );
+
+			toArray( backgroundh.childNodes ).forEach( function( backgroundv, v ) {
+
+				backgroundv.className = 'slide-background ' + ( v < indexv ? 'past' : v > indexv ? 'future' : 'present' );
+
+			} );
+
+		} );
+
+		// Allow the first background to apply without transition
+		setTimeout( function() {
+			dom.background.classList.remove( 'no-transition' );
+		}, 1 );
+
+	}
+
 	/**
 	/**
 	 * Determine what available routes there are for navigation.
 	 * Determine what available routes there are for navigation.
 	 *
 	 *

文件差异内容过多而无法显示
+ 1 - 1
js/reveal.min.js


+ 1 - 0
plugin/multiplex/index.js

@@ -30,6 +30,7 @@ app.configure(function() {
 });
 });
 
 
 app.get("/", function(req, res) {
 app.get("/", function(req, res) {
+	res.writeHead(200, {'Content-Type': 'text/html'});
 	fs.createReadStream(opts.baseDir + '/index.html').pipe(res);
 	fs.createReadStream(opts.baseDir + '/index.html').pipe(res);
 });
 });
 
 

+ 1 - 0
plugin/notes-server/index.js

@@ -30,6 +30,7 @@ app.configure(function() {
 });
 });
 
 
 app.get("/", function(req, res) {
 app.get("/", function(req, res) {
+	res.writeHead(200, {'Content-Type': 'text/html'});
 	fs.createReadStream(opts.baseDir + '/index.html').pipe(res);
 	fs.createReadStream(opts.baseDir + '/index.html').pipe(res);
 });
 });
 
 

+ 3 - 3
plugin/notes/notes.html

@@ -213,9 +213,9 @@
 							now = new Date();
 							now = new Date();
 
 
 						diff = now.getTime() - start.getTime();
 						diff = now.getTime() - start.getTime();
-						hours = parseInt( diff / ( 1000 * 60 * 60 ) );
-						minutes = parseInt( ( diff / ( 1000 * 60 ) ) % 60 );
-						seconds = parseInt( ( diff / 1000 ) % 60 );
+						hours = Math.floor( diff / ( 1000 * 60 * 60 ) );
+						minutes = Math.floor( ( diff / ( 1000 * 60 ) ) % 60 );
+						seconds = Math.floor( ( diff / 1000 ) % 60 );
 
 
 						clockEl.innerHTML = now.toLocaleTimeString();
 						clockEl.innerHTML = now.toLocaleTimeString();
 						hoursEl.innerHTML = zeroPadInteger( hours );
 						hoursEl.innerHTML = zeroPadInteger( hours );

二进制
test/assets/image1.png


二进制
test/assets/image2.png


+ 95 - 0
test/background.html

@@ -0,0 +1,95 @@
+<!doctype html>
+<html lang="en">
+
+	<head>
+		<meta charset="utf-8">
+
+		<title>reveal.js - Test</title>
+
+		<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
+
+		<link rel="stylesheet" href="../css/reveal.min.css">
+		<link rel="stylesheet" href="../css/theme/serif.css" id="theme">
+	</head>
+
+	<body>
+
+		<div class="reveal">
+
+			<div class="slides">
+
+				<section data-background="#00ffff">
+					<h2>data-background: #00ffff</h2>
+				</section>
+
+				<section data-background="#bb00bb">
+					<h2>data-background: #bb00bb</h2>
+				</section>
+
+				<section>
+					<section data-background="#ff0000">
+						<h2>data-background: #ff0000</h2>
+					</section>
+					<section data-background="rgba(0, 0, 0, 0.2)">
+						<h2>data-background: rgba(0, 0, 0, 0.2)</h2>
+					</section>
+					<section data-background="salmon">
+						<h2>data-background: salmon</h2>
+					</section>
+				</section>
+
+				<section data-background="rgba(0, 100, 100, 0.2)">
+					<section>
+						<h2>Background applied to stack</h2>
+					</section>
+					<section>
+						<h2>Background applied to stack</h2>
+					</section>
+					<section data-background="rgba(100, 0, 0, 0.2)">
+						<h2>Background applied to slide inside of stack</h2>
+					</section>
+				</section>
+
+				<section data-background="assets/image1.png" style="background: rgba(255,255,255,0.9)">
+					<h2>Background image</h2>
+				</section>
+
+				<section data-background="assets/image2.png" data-background-size="100px" data-background-repeat="repeat" data-background-color="#111" style="background: rgba(255,255,255,0.9)">
+					<h2>Background image</h2>
+					<pre>data-background-size="100px" data-background-repeat="repeat" data-background-color="#111"</pre>
+				</section>
+
+				<section data-background="#888888">
+					<h2>Same background twice (1/2)</h2>
+				</section>
+				<section data-background="#888888">
+					<h2>Same background twice (2/2)</h2>
+				</section>
+				
+			</div>
+
+		</div>
+
+		<script src="../lib/js/head.min.js"></script>
+		<script src="../js/reveal.min.js"></script>
+
+		<script>
+
+			// Full list of configuration options available here:
+			// https://github.com/hakimel/reveal.js#configuration
+			Reveal.initialize({
+				controls: true,
+				progress: true,
+				history: true,
+				center: true,
+				// rtl: true,
+
+				transition: 'linear',
+				// transitionSpeed: 'slow',
+				// backgroundTransition: 'linear'
+			});
+
+		</script>
+
+	</body>
+</html>

+ 58 - 0
test/media.html

@@ -0,0 +1,58 @@
+<!doctype html>
+<html lang="en">
+
+	<head>
+		<meta charset="utf-8">
+
+		<title>reveal.js - Test</title>
+
+		<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
+
+		<link rel="stylesheet" href="../css/reveal.min.css">
+		<link rel="stylesheet" href="../css/theme/default.css" id="theme">
+	</head>
+
+	<body>
+
+		<div class="reveal">
+
+			<div class="slides">
+
+				<section>
+					<h2>Embedded Media Test</h2>
+				</section>
+
+				<section>
+					<iframe data-autoplay width="420" height="345" src="http://www.youtube.com/embed/l3RQZ4mcr1c"></iframe>
+				</section>
+
+				<section>
+					<h2>Empty Slide</h2>
+				</section>
+
+			</div>
+
+		</div>
+
+		<script src="../lib/js/head.min.js"></script>
+		<script src="../js/reveal.min.js"></script>
+
+		<script>
+
+			// Full list of configuration options available here:
+			// https://github.com/hakimel/reveal.js#configuration
+			Reveal.initialize({
+				controls: true,
+				progress: true,
+				history: true,
+				center: true,
+
+				transition: 'linear',
+				// transitionSpeed: 'slow',
+				// backgroundTransition: 'linear'
+			});
+
+		</script>
+
+	</body>
+</html>

部分文件因为文件数量过多而无法显示