merge conflicts w preview & backgrounds
This commit is contained in:
		
							
								
								
									
										54
									
								
								README.md
									
									
									
									
									
								
							
							
						
						
									
										54
									
								
								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. | ||||
|  | ||||
|  | ||||
| #### More reading:: | ||||
| #### More reading: | ||||
| - [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. | ||||
| - [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 | ||||
| 	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 } } | ||||
| ``` | ||||
|  | ||||
| ### 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 | ||||
|  | ||||
| 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 | ||||
|  | ||||
| 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 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: | ||||
|  | ||||
| @@ -583,11 +605,11 @@ The **basic setup** is for authoring presentations only. The **full setup** give | ||||
|  | ||||
| ### 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> | ||||
|  | ||||
| 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 | ||||
|  | ||||
|   | ||||
| @@ -17,8 +17,9 @@ | ||||
|  | ||||
| body { | ||||
| 	font-size: 18pt; | ||||
| 	width: auto; | ||||
| 	height: auto; | ||||
| 	width: 297mm; | ||||
| 	height: 229mm; | ||||
| 	margin: 0 auto !important; | ||||
| 	border: 0; | ||||
| 	padding: 0; | ||||
| 	float: none !important; | ||||
| @@ -88,10 +89,8 @@ ul, ol, div, p { | ||||
|  | ||||
| 	left: auto; | ||||
| 	top: auto; | ||||
| 	margin-left: auto; | ||||
| 	margin-right: auto; | ||||
| 	margin-top: auto; | ||||
| 	padding: auto; | ||||
| 	margin: 0 !important; | ||||
| 	padding: 0 !important; | ||||
|  | ||||
| 	overflow: visible; | ||||
| 	display: block; | ||||
| @@ -113,18 +112,18 @@ ul, ol, div, p { | ||||
| 	page-break-after: always !important; | ||||
|  | ||||
| 	visibility: visible !important; | ||||
| 	position: static !important; | ||||
| 	position: relative !important; | ||||
| 	width: 100% !important; | ||||
| 	height: auto !important; | ||||
| 	min-height: initial !important; | ||||
| 	height: 229mm !important; | ||||
| 	min-height: 229mm !important; | ||||
| 	display: block !important; | ||||
| 	overflow: visible !important; | ||||
| 	overflow: hidden !important; | ||||
|  | ||||
| 	left: 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; | ||||
|  | ||||
| @@ -139,9 +138,11 @@ ul, ol, div, p { | ||||
| 	        transform: none !important; | ||||
| } | ||||
| .reveal section.stack { | ||||
| 	margin: 0px !important; | ||||
| 	padding: 0px !important; | ||||
| 	margin: 0 !important; | ||||
| 	padding: 0 !important; | ||||
| 	page-break-after: avoid !important; | ||||
| 	height: auto !important; | ||||
| 	min-height: auto !important; | ||||
| } | ||||
| .reveal section .fragment { | ||||
| 	opacity: 1 !important; | ||||
| @@ -152,6 +153,17 @@ ul, ol, div, p { | ||||
| 	    -ms-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 { | ||||
| 	box-shadow: none; | ||||
| } | ||||
|   | ||||
							
								
								
									
										113
									
								
								css/reveal.css
									
									
									
									
									
								
							
							
						
						
									
										113
									
								
								css/reveal.css
									
									
									
									
									
								
							| @@ -1252,17 +1252,18 @@ body { | ||||
| 	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 { | ||||
| @@ -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 | ||||
|  *********************************************/ | ||||
|   | ||||
							
								
								
									
										2
									
								
								css/reveal.min.css
									
									
									
									
										vendored
									
									
								
							
							
						
						
									
										2
									
								
								css/reveal.min.css
									
									
									
									
										vendored
									
									
								
							
										
											
												File diff suppressed because one or more lines are too long
											
										
									
								
							
							
								
								
									
										49
									
								
								index.html
									
									
									
									
									
								
							
							
						
						
									
										49
									
								
								index.html
									
									
									
									
									
								
							| @@ -183,29 +183,12 @@ | ||||
| 				</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 data-state="customevent"> | ||||
| @@ -220,6 +203,26 @@ Reveal.addEventListener( 'customevent', function() { | ||||
| 					</code></pre> | ||||
| 				</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><section data-background="image.png"></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;"><section data-background="image.png" data-background-repeat="repeat" data-background-size="100px"></code></pre> | ||||
| 					</section> | ||||
| 				</section> | ||||
|  | ||||
| 				<section> | ||||
| 					<h2>Clever Quotes</h2> | ||||
| 					<p> | ||||
|   | ||||
							
								
								
									
										159
									
								
								js/reveal.js
									
									
									
									
									
								
							
							
						
						
									
										159
									
								
								js/reveal.js
									
									
									
									
									
								
							| @@ -82,6 +82,9 @@ var Reveal = (function(){ | ||||
| 			// Transition speed | ||||
| 			transitionSpeed: 'default', // default/fast/slow | ||||
|  | ||||
| 			// Transition style for full page slide backgrounds | ||||
| 			backgroundTransition: 'default', // default/linear | ||||
|  | ||||
| 			// Script dependencies to load | ||||
| 			dependencies: [] | ||||
| 		}, | ||||
| @@ -189,6 +192,13 @@ var Reveal = (function(){ | ||||
| 		dom.wrapper = document.querySelector( '.reveal' ); | ||||
| 		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 | ||||
| 		if( !dom.wrapper.querySelector( '.progress' ) ) { | ||||
| 			var progressElement = document.createElement( 'div' ); | ||||
| @@ -208,11 +218,11 @@ var Reveal = (function(){ | ||||
| 			dom.wrapper.appendChild( controlsElement ); | ||||
| 		} | ||||
|  | ||||
| 		// Presentation background element | ||||
| 		// State background element [DEPRECATED] | ||||
| 		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 | ||||
| @@ -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. | ||||
| 	 */ | ||||
| @@ -351,6 +441,7 @@ var Reveal = (function(){ | ||||
| 		dom.wrapper.classList.add( config.transition ); | ||||
|  | ||||
| 		dom.wrapper.setAttribute( 'data-transition-speed', config.transitionSpeed ); | ||||
| 		dom.wrapper.setAttribute( 'data-background-transition', config.backgroundTransition ); | ||||
|  | ||||
| 		if( dom.controls ) { | ||||
| 			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, | ||||
| 	 * more vertical space ftw. | ||||
| @@ -770,7 +870,7 @@ var Reveal = (function(){ | ||||
| 	 */ | ||||
| 	function layout() { | ||||
|  | ||||
| 		if( dom.wrapper ) { | ||||
| 		if( dom.wrapper && !isPrintingPDF() ) { | ||||
|  | ||||
| 			// Available space to scale within | ||||
| 			var availableWidth = dom.wrapper.offsetWidth, | ||||
| @@ -1262,7 +1362,8 @@ var Reveal = (function(){ | ||||
| 		} | ||||
|  | ||||
| 		// Dispatch an event if the slide changed | ||||
| 		if( indexh !== indexhBefore || indexv !== indexvBefore ) { | ||||
| 		var slideChanged = ( indexh !== indexhBefore || indexv !== indexvBefore ); | ||||
| 		if( slideChanged ) { | ||||
| 			dispatchEvent( 'slidechanged', { | ||||
| 				'indexh': indexh, | ||||
| 				'indexv': indexv, | ||||
| @@ -1299,11 +1400,14 @@ var Reveal = (function(){ | ||||
| 		} | ||||
|  | ||||
| 		// Handle embedded content | ||||
| 		stopEmbeddedContent( previousSlide ); | ||||
| 		startEmbeddedContent( currentSlide ); | ||||
| 		if( slideChanged ) { | ||||
| 			stopEmbeddedContent( previousSlide ); | ||||
| 			startEmbeddedContent( currentSlide ); | ||||
| 		} | ||||
|  | ||||
| 		updateControls(); | ||||
| 		updateProgress(); | ||||
| 		updateBackground(); | ||||
|  | ||||
| 	} | ||||
|  | ||||
| @@ -1327,8 +1431,12 @@ var Reveal = (function(){ | ||||
| 		// Start auto-sliding if it's enabled | ||||
| 		cueAutoSlide(); | ||||
|  | ||||
| 		// Re-create the slide backgrounds | ||||
| 		createBackgrounds(); | ||||
|  | ||||
| 		updateControls(); | ||||
| 		updateProgress(); | ||||
| 		updateBackground(); | ||||
|  | ||||
| 	} | ||||
|  | ||||
| @@ -1385,6 +1493,9 @@ var Reveal = (function(){ | ||||
| 				element.classList.remove( 'present' ); | ||||
| 				element.classList.remove( 'future' ); | ||||
|  | ||||
| 				// http://www.w3.org/html/wg/drafts/html/master/editing.html#the-hidden-attribute | ||||
| 				element.setAttribute( 'hidden', '' ); | ||||
|  | ||||
| 				if( i < index ) { | ||||
| 					// Any element previous to index is given the 'past' class | ||||
| 					element.classList.add( reverse ? 'future' : 'past' ); | ||||
| @@ -1402,6 +1513,7 @@ var Reveal = (function(){ | ||||
|  | ||||
| 			// Mark the current slide as present | ||||
| 			slides[index].classList.add( 'present' ); | ||||
| 			slides[index].removeAttribute( 'hidden' ); | ||||
|  | ||||
| 			// If this slide has a state associated with it, add it | ||||
| 			// 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. | ||||
| 	 * | ||||
|   | ||||
							
								
								
									
										4
									
								
								js/reveal.min.js
									
									
									
									
										vendored
									
									
								
							
							
						
						
									
										4
									
								
								js/reveal.min.js
									
									
									
									
										vendored
									
									
								
							
										
											
												File diff suppressed because one or more lines are too long
											
										
									
								
							| @@ -30,6 +30,7 @@ app.configure(function() { | ||||
| }); | ||||
|  | ||||
| app.get("/", function(req, res) { | ||||
| 	res.writeHead(200, {'Content-Type': 'text/html'}); | ||||
| 	fs.createReadStream(opts.baseDir + '/index.html').pipe(res); | ||||
| }); | ||||
|  | ||||
|   | ||||
| @@ -30,6 +30,7 @@ app.configure(function() { | ||||
| }); | ||||
|  | ||||
| app.get("/", function(req, res) { | ||||
| 	res.writeHead(200, {'Content-Type': 'text/html'}); | ||||
| 	fs.createReadStream(opts.baseDir + '/index.html').pipe(res); | ||||
| }); | ||||
|  | ||||
|   | ||||
| @@ -213,9 +213,9 @@ | ||||
| 							now = new Date(); | ||||
|  | ||||
| 						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(); | ||||
| 						hoursEl.innerHTML = zeroPadInteger( hours ); | ||||
|   | ||||
							
								
								
									
										
											BIN
										
									
								
								test/assets/image1.png
									
									
									
									
									
										Normal file
									
								
							
							
						
						
									
										
											BIN
										
									
								
								test/assets/image1.png
									
									
									
									
									
										Normal file
									
								
							
										
											Binary file not shown.
										
									
								
							| After Width: | Height: | Size: 22 KiB | 
							
								
								
									
										
											BIN
										
									
								
								test/assets/image2.png
									
									
									
									
									
										Normal file
									
								
							
							
						
						
									
										
											BIN
										
									
								
								test/assets/image2.png
									
									
									
									
									
										Normal file
									
								
							
										
											Binary file not shown.
										
									
								
							| After Width: | Height: | Size: 10 KiB | 
							
								
								
									
										95
									
								
								test/background.html
									
									
									
									
									
										Normal file
									
								
							
							
						
						
									
										95
									
								
								test/background.html
									
									
									
									
									
										Normal file
									
								
							| @@ -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
									
								
								test/media.html
									
									
									
									
									
										Normal file
									
								
							
							
						
						
									
										58
									
								
								test/media.html
									
									
									
									
									
										Normal file
									
								
							| @@ -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> | ||||
		Reference in New Issue
	
	Block a user