diff options
-rw-r--r-- | README.md | 55 | ||||
-rw-r--r-- | css/print/paper.css | 9 | ||||
-rw-r--r-- | css/print/pdf.css | 28 | ||||
-rw-r--r-- | css/reveal.css | 189 | ||||
-rw-r--r-- | css/reveal.min.css | 7 | ||||
-rw-r--r-- | css/theme/beige.css | 24 | ||||
-rw-r--r-- | css/theme/default.css | 24 | ||||
-rw-r--r-- | css/theme/night.css | 150 | ||||
-rw-r--r-- | css/theme/serif.css | 24 | ||||
-rw-r--r-- | css/theme/simple.css | 24 | ||||
-rw-r--r-- | css/theme/sky.css | 24 | ||||
-rw-r--r-- | css/theme/source/night.scss | 35 | ||||
-rw-r--r-- | css/theme/template/theme.scss | 24 | ||||
-rw-r--r-- | grunt.js | 84 | ||||
-rw-r--r-- | index.html | 17 | ||||
-rw-r--r-- | js/reveal.js | 500 | ||||
-rw-r--r-- | js/reveal.min.js | 79 | ||||
-rw-r--r-- | package.json | 15 | ||||
-rw-r--r-- | plugin/markdown/markdown.js | 5 | ||||
-rw-r--r-- | plugin/notes/notes.html | 9 | ||||
-rw-r--r-- | plugin/postmessage/example.html | 39 | ||||
-rw-r--r-- | plugin/postmessage/postmessage.js | 42 | ||||
-rw-r--r-- | plugin/remotes/remotes.js | 19 |
23 files changed, 1019 insertions, 407 deletions
@@ -71,6 +71,9 @@ Reveal.initialize({ // Enable the slide overview mode overview: true, + // Vertical centering of slides + center: true, + // Loop the presentation loop: false, @@ -80,7 +83,7 @@ Reveal.initialize({ autoSlide: 0, // Enable slide navigation via mouse wheel - mouseWheel: true, + mouseWheel: false, // Apply a 3D roll to links on hover rollingLinks: true, @@ -90,6 +93,8 @@ Reveal.initialize({ }); ``` +Note that the new default vertical centering option will break compatibility with slides that were using transitions with backgrounds (`cube` and `page`). To restore the previous behavior, set `center` to `false`. + ### Dependencies Reveal.js doesn't _rely_ on any third party scripts to work but a few optional libraries are included by default. These libraries are loaded as dependencies in the order they appear, for example: @@ -99,15 +104,22 @@ Reveal.initialize({ dependencies: [ // Cross-browser shim that fully implements classList - https://github.com/eligrey/classList.js/ { src: 'lib/js/classList.js', condition: function() { return !document.body.classList; } }, + // Interpret Markdown in <section> elements { src: 'plugin/markdown/showdown.js', condition: function() { return !!document.querySelector( '[data-markdown]' ); } }, { src: 'plugin/markdown/markdown.js', condition: function() { return !!document.querySelector( '[data-markdown]' ); } }, + // Syntax highlight for <code> elements { src: 'plugin/highlight/highlight.js', async: true, callback: function() { hljs.initHighlightingOnLoad(); } }, + // Zoom in and out with Alt+click { src: 'plugin/zoom-js/zoom.js', async: true, condition: function() { return !!document.body.classList; } }, + // Speaker notes - { src: 'plugin/notes/notes.js', async: true, condition: function() { return !!document.body.classList; } } + { src: 'plugin/notes/notes.js', async: true, condition: function() { return !!document.body.classList; } }, + + // Remote control your reveal.js presentation using a touch device + { src: 'plugin/remotes/remotes.js', async: true, condition: function() { return !!document.body.classList; } } ] }); ``` @@ -169,6 +181,8 @@ Reveal.addEventListener( 'ready', function( event ) { An 'slidechanged' event is fired each time the slide is changed (regardless of state). The event object holds the index values of the current slide as well as a reference to the previous and current slide HTML nodes. +Some libraries, like MathJax (see [#226](https://github.com/hakimel/reveal.js/issues/226#issuecomment-10261609)), get confused by the transforms and display states of slides. Often times, this can be fixed by calling their update or render function from this callback. + ```javascript Reveal.addEventListener( 'slidechanged', function( event ) { // event.previousSlide, event.currentSlide, event.indexh, event.indexv @@ -183,6 +197,19 @@ It's easy to link between slides. The first example below targets the index of a <a href="#/2/2">Link</a> <a href="#/some-slide">Link</a> ``` + +You can also add relative navigation links, similar to the built in reveal.js controls, by appending one of the following classes on any element. Note that each element is automatically given an ```enabled``` class when it's a valid navigation route based on the current slide. + +```html +<a href="#" class="navigate-left"> +<a href="#" class="navigate-right"> +<a href="#" class="navigate-up"> +<a href="#" class="navigate-down"> +<a href="#" class="navigate-prev"> <!-- Previous vertical slide or horizontal slide --> +<a href="#" class="navigate-next"> <!-- Next vertical or horizontal slide --> +``` + + ### Fullscreen mode Just press »F« on your keyboard to show your presentation in fullscreen mode. Press the »ESC« key to exit fullscreen mode. @@ -203,6 +230,21 @@ The default fragment style is to start out invisible and fade in. This style can </section> ``` +Multiple fragments can be applied to the same element sequentially by wrapping it, this will fade in the text on the first step and fade it back out on the second. + +``` +<section> + <span class="fragment fade-out"> + <span class="fragment fade-out">I'll fade in, then out</span> + </span> +</section> +``` + +### Overview mode + +Press "Esc" key to toggle the overview mode on and off. While you're in this mode, you can still navigate between slides, +as if you were at 1,000 feet above your presentation. + ### Fragment events When a slide fragment is either shown or hidden reveal.js will dispatch an event. @@ -264,12 +306,19 @@ Then: 3. Run ```node plugin/notes-server``` -## Folder Structure +## Development Environment + +reveal.js is built using the task-based command line build tool [grunt.js](http://gruntjs.com) ([installation instructions](https://github.com/gruntjs/grunt#installing-grunt)). With Node.js and grunt.js installed, you need to start by running ```npm install``` in the reveal.js root. When the dependencies have been installed you should run ```grunt watch``` to start monitoring files for changes. + +If you want to customise reveal.js without running grunt.js you can alter the HTML to point to the uncompressed source files (css/reveal.css & js/reveal.js). + +### Folder Structure - **css/** Core styles without which the project does not function - **js/** Like above but for JavaScript - **plugin/** Components that have been developed as extensions to reveal.js - **lib/** All other third party assets (JavaScript, CSS, fonts) + ## License MIT licensed diff --git a/css/print/paper.css b/css/print/paper.css index 61fa0a9..ec8a8bd 100644 --- a/css/print/paper.css +++ b/css/print/paper.css @@ -155,11 +155,14 @@ ul, ol, div, p { page-break-after: always !important; display: block !important; } -.reveal section.stack { - page-break-after: avoid !important; -} .reveal section .fragment { opacity: 1 !important; + visibility: visible !important; + + -webkit-transform: none !important; + -moz-transform: none !important; + -ms-transform: none !important; + transform: none !important; } .reveal section:last-of-type { page-break-after: avoid !important; diff --git a/css/print/pdf.css b/css/print/pdf.css index 7c1a496..f0c20b7 100644 --- a/css/print/pdf.css +++ b/css/print/pdf.css @@ -23,7 +23,7 @@ body { padding: 0; float: none !important; overflow: visible; - background-image: none; + background-image: none !important; } html { @@ -92,6 +92,7 @@ ul, ol, div, p { display: block; text-align: center; + -webkit-perspective: none; -moz-perspective: none; -ms-perspective: none; @@ -102,8 +103,10 @@ ul, ol, div, p { -ms-perspective-origin: 50% 50%; perspective-origin: 50% 50%; } -.reveal .slides>section, .reveal .slides>section>section { - +.reveal .slides section { + + page-break-after: always !important; + visibility: visible !important; position: static !important; width: 100% !important; @@ -112,8 +115,8 @@ ul, ol, div, p { display: block !important; overflow: visible !important; - left: 0% !important; - top: 0% !important; + left: 0 !important; + top: 0 !important; margin-left: 0px !important; margin-top: 50px !important; padding: 20px 0px !important; @@ -130,10 +133,6 @@ ul, ol, div, p { -ms-transform: none !important; transform: none !important; } -.reveal section { - page-break-after: always !important; - display: block !important; -} .reveal section.stack { margin: 0px !important; padding: 0px !important; @@ -141,6 +140,12 @@ ul, ol, div, p { } .reveal section .fragment { opacity: 1 !important; + visibility: visible !important; + + -webkit-transform: none !important; + -moz-transform: none !important; + -ms-transform: none !important; + transform: none !important; } .reveal img { box-shadow: none; @@ -149,11 +154,6 @@ ul, ol, div, p { overflow: visible; line-height: 1em; } - .reveal small a { font-size: 16pt !important; } - -pre { - font-size: 9pt !important; -} diff --git a/css/reveal.css b/css/reveal.css index 412e8ec..bb3d003 100644 --- a/css/reveal.css +++ b/css/reveal.css @@ -48,7 +48,6 @@ html, body { width: 100%; height: 100%; - min-height: 600px; overflow: hidden; } @@ -58,14 +57,20 @@ body { } ::selection { - background:#FF5E99; - color:#fff; + background: #FF5E99; + color: #fff; text-shadow: none; } -@media screen and (max-width: 900px) { - .reveal { - font-size: 30px; +@media screen and (max-width: 900px), (max-height: 600px) { + .reveal .slides { + font-size: 0.82em; + } +} + +@media screen and (max-width: 700px), (max-height: 400px) { + .reveal .slides { + font-size: 0.66em; } } @@ -164,13 +169,15 @@ body { * DEFAULT ELEMENT STYLES *********************************************/ -.reveal .slides section { - line-height: 1.2em; - font-weight: normal; +/* Fixes issue in Chrome where italic fonts did not appear when printing to PDF */ +.reveal:after { + content: ''; + font-style: italic; } -.reveal img { - /* preserve aspect ratio and scale image so it's bound within the section */ +/* Preserve aspect ratio and scale image so it's bound within the section */ +.reveal img, +.reveal iframe { max-width: 100%; max-height: 100%; } @@ -238,6 +245,10 @@ body { background: rgba(255, 255, 255, 0.05); box-shadow: 0px 0px 2px rgba(0,0,0,0.2); } + .reveal blockquote p:first-child, + .reveal blockquote p:last-child { + display: inline-block; + } .reveal blockquote:before { content: '\201C'; } @@ -346,14 +357,14 @@ body { margin-top: 1px; } -.reveal .controls div.left { +.reveal .controls div.navigate-left { top: 42px; border-right-width: 22px; border-right-color: #eee; } -.reveal .controls div.right { +.reveal .controls div.navigate-right { left: 74px; top: 42px; @@ -361,14 +372,14 @@ body { border-left-color: #eee; } -.reveal .controls div.up { +.reveal .controls div.navigate-up { left: 42px; border-bottom-width: 22px; border-bottom-color: #eee; } -.reveal .controls div.down { +.reveal .controls div.navigate-down { left: 42px; top: 74px; @@ -495,18 +506,23 @@ body { * SLIDES *********************************************/ +.reveal { + position: relative; + width: 100%; + height: 100%; + min-height: 640px; /* min height + 40 to account for padding */ +} + .reveal .slides { position: absolute; max-width: 900px; + min-height: 600px; width: 80%; - height: 60%; left: 50%; top: 50%; - margin-top: -320px; - padding: 20px 0px; + overflow: visible; z-index: 1; - text-align: center; -webkit-transition: -webkit-perspective .4s ease; @@ -520,10 +536,10 @@ body { -ms-perspective: 600px; perspective: 600px; - -webkit-perspective-origin: 0% 25%; - -moz-perspective-origin: 0% 25%; - -ms-perspective-origin: 0% 25%; - perspective-origin: 0% 25%; + -webkit-perspective-origin: 0px -100px; + -moz-perspective-origin: 0px -100px; + -ms-perspective-origin: 0px -100px; + perspective-origin: 0px -100px; } .reveal .slides>section, @@ -531,33 +547,58 @@ body { display: none; position: absolute; width: 100%; - min-height: 600px; + padding: 20px 0px; z-index: 10; + line-height: 1.2em; + font-weight: normal; -webkit-transform-style: preserve-3d; -moz-transform-style: preserve-3d; -ms-transform-style: preserve-3d; transform-style: preserve-3d; - -webkit-transition: all 800ms cubic-bezier(0.260, 0.860, 0.440, 0.985); - -moz-transition: all 800ms cubic-bezier(0.260, 0.860, 0.440, 0.985); - -ms-transition: all 800ms cubic-bezier(0.260, 0.860, 0.440, 0.985); - -o-transition: all 800ms cubic-bezier(0.260, 0.860, 0.440, 0.985); - transition: all 800ms cubic-bezier(0.260, 0.860, 0.440, 0.985); + -webkit-transition: -webkit-transform-origin 800ms cubic-bezier(0.260, 0.860, 0.440, 0.985), + -webkit-transform 800ms cubic-bezier(0.260, 0.860, 0.440, 0.985), + visibility 800ms cubic-bezier(0.260, 0.860, 0.440, 0.985), + opacity 800ms cubic-bezier(0.260, 0.860, 0.440, 0.985); + -moz-transition: -moz-transform-origin 800ms cubic-bezier(0.260, 0.860, 0.440, 0.985), + -moz-transform 800ms cubic-bezier(0.260, 0.860, 0.440, 0.985), + visibility 800ms cubic-bezier(0.260, 0.860, 0.440, 0.985), + opacity 800ms cubic-bezier(0.260, 0.860, 0.440, 0.985); + -ms-transition: -ms-transform-origin 800ms cubic-bezier(0.260, 0.860, 0.440, 0.985), + -ms-transform 800ms cubic-bezier(0.260, 0.860, 0.440, 0.985), + visibility 800ms cubic-bezier(0.260, 0.860, 0.440, 0.985), + opacity 800ms cubic-bezier(0.260, 0.860, 0.440, 0.985); + -o-transition: -o-transform-origin 800ms cubic-bezier(0.260, 0.860, 0.440, 0.985), + -o-transform 800ms cubic-bezier(0.260, 0.860, 0.440, 0.985), + visibility 800ms cubic-bezier(0.260, 0.860, 0.440, 0.985), + opacity 800ms cubic-bezier(0.260, 0.860, 0.440, 0.985); + transition: transform-origin 800ms cubic-bezier(0.260, 0.860, 0.440, 0.985), + transform 800ms cubic-bezier(0.260, 0.860, 0.440, 0.985), + visibility 800ms cubic-bezier(0.260, 0.860, 0.440, 0.985), + opacity 800ms cubic-bezier(0.260, 0.860, 0.440, 0.985); +} + +.reveal .slides>section { + left: -50%; + top: -50%; } -.reveal .slides>section.present { +.reveal .slides>section.present, +.reveal .slides>section>section.present { display: block; z-index: 11; opacity: 1; } -.reveal .slides>section { - margin-left: -50%; +.reveal.center, +.reveal.center .slides { + min-height: auto; } + /********************************************* * DEFAULT TRANSITION *********************************************/ @@ -585,19 +626,19 @@ body { display: block; opacity: 0; - -webkit-transform: translate3d(0, -50%, 0) rotateX(70deg) translate3d(0, -50%, 0); - -moz-transform: translate3d(0, -50%, 0) rotateX(70deg) translate3d(0, -50%, 0); - -ms-transform: translate3d(0, -50%, 0) rotateX(70deg) translate3d(0, -50%, 0); - transform: translate3d(0, -50%, 0) rotateX(70deg) translate3d(0, -50%, 0); + -webkit-transform: translate3d(0, -300px, 0) rotateX(70deg) translate3d(0, -300px, 0); + -moz-transform: translate3d(0, -300px, 0) rotateX(70deg) translate3d(0, -300px, 0); + -ms-transform: translate3d(0, -300px, 0) rotateX(70deg) translate3d(0, -300px, 0); + transform: translate3d(0, -300px, 0) rotateX(70deg) translate3d(0, -300px, 0); } .reveal .slides>section>section.future { display: block; opacity: 0; - -webkit-transform: translate3d(0, 50%, 0) rotateX(-70deg) translate3d(0, 50%, 0); - -moz-transform: translate3d(0, 50%, 0) rotateX(-70deg) translate3d(0, 50%, 0); - -ms-transform: translate3d(0, 50%, 0) rotateX(-70deg) translate3d(0, 50%, 0); - transform: translate3d(0, 50%, 0) rotateX(-70deg) translate3d(0, 50%, 0); + -webkit-transform: translate3d(0, 300px, 0) rotateX(-70deg) translate3d(0, 300px, 0); + -moz-transform: translate3d(0, 300px, 0) rotateX(-70deg) translate3d(0, 300px, 0); + -ms-transform: translate3d(0, 300px, 0) rotateX(-70deg) translate3d(0, 300px, 0); + transform: translate3d(0, 300px, 0) rotateX(-70deg) translate3d(0, 300px, 0); } @@ -636,15 +677,6 @@ body { * ZOOM TRANSITION *********************************************/ -.reveal.zoom .slides>section, -.reveal.zoom .slides>section>section { - -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.zoom .slides>section.past { opacity: 0; visibility: hidden; @@ -722,11 +754,6 @@ body { *********************************************/ .reveal.cube .slides { - -webkit-perspective-origin: 0% 25%; - -moz-perspective-origin: 0% 25%; - -ms-perspective-origin: 0% 25%; - perspective-origin: 0% 25%; - -webkit-perspective: 1300px; -moz-perspective: 1300px; -ms-perspective: 1300px; @@ -735,6 +762,7 @@ body { .reveal.cube .slides section { padding: 30px; + min-height: 600px; -webkit-backface-visibility: hidden; -moz-backface-visibility: hidden; @@ -745,6 +773,9 @@ body { -moz-box-sizing: border-box; box-sizing: border-box; } + .reveal.center.cube .slides section { + min-height: auto; + } .reveal.cube .slides section:not(.stack):before { content: ''; position: absolute; @@ -1031,8 +1062,7 @@ body { } .reveal.overview .slides section { - padding: 20px 0; - max-height: 600px; + height: 600px; overflow: hidden; opacity: 1!important; visibility: visible!important; @@ -1053,13 +1083,12 @@ body { .reveal.overview .slides section:hover { background: rgba(0,0,0,0.3); } - .reveal.overview .slides section.present { background: rgba(0,0,0,0.3); } .reveal.overview .slides>section.stack { - background: none; padding: 0; + background: none; overflow: visible; } @@ -1099,13 +1128,22 @@ body { overflow-y: auto; } +.no-transforms .slides { + top: 0; + left: 50%; + margin: 0; + text-align: center; +} + .no-transforms .slides section { display: block!important; opacity: 1!important; position: relative!important; height: auto; min-height: auto; - margin-bottom: 100px; + top: 0; + left: -50%; + margin: 70px 0; -webkit-transform: none; -moz-transform: none; @@ -1113,6 +1151,18 @@ body { transform: none; } +.no-transforms .slides section section { + left: 0; +} + +.no-transition { + -webkit-transition: none; + -moz-transition: none; + -ms-transition: none; + -o-transition: none; + transition: none; +} + /********************************************* * BACKGROUND STATES @@ -1142,6 +1192,27 @@ body { /********************************************* + * RTL SUPPORT + *********************************************/ + +.reveal.rtl .slides, +.reveal.rtl .slides h1, +.reveal.rtl .slides h2, +.reveal.rtl .slides h3, +.reveal.rtl .slides h4, +.reveal.rtl .slides h5, +.reveal.rtl .slides h6 { + direction: rtl; + font-family: sans-serif; +} + +.reveal.rtl pre, +.reveal.rtl code { + direction: ltr; +} + + +/********************************************* * SPEAKER NOTES *********************************************/ diff --git a/css/reveal.min.css b/css/reveal.min.css new file mode 100644 index 0000000..601cdd6 --- /dev/null +++ b/css/reveal.min.css @@ -0,0 +1,7 @@ +@charset "UTF-8";/*! + * reveal.js + * http://lab.hakim.se/reveal-js + * MIT licensed + * + * Copyright (C) 2011-2012 Hakim El Hattab, http://hakim.se + */html,body,.reveal div,.reveal span,.reveal applet,.reveal object,.reveal iframe,.reveal h1,.reveal h2,.reveal h3,.reveal h4,.reveal h5,.reveal h6,.reveal p,.reveal blockquote,.reveal pre,.reveal a,.reveal abbr,.reveal acronym,.reveal address,.reveal big,.reveal cite,.reveal code,.reveal del,.reveal dfn,.reveal em,.reveal img,.reveal ins,.reveal kbd,.reveal q,.reveal s,.reveal samp,.reveal small,.reveal strike,.reveal strong,.reveal sub,.reveal sup,.reveal tt,.reveal var,.reveal b,.reveal u,.reveal i,.reveal center,.reveal dl,.reveal dt,.reveal dd,.reveal ol,.reveal ul,.reveal li,.reveal fieldset,.reveal form,.reveal label,.reveal legend,.reveal table,.reveal caption,.reveal tbody,.reveal tfoot,.reveal thead,.reveal tr,.reveal th,.reveal td,.reveal article,.reveal aside,.reveal canvas,.reveal details,.reveal embed,.reveal figure,.reveal figcaption,.reveal footer,.reveal header,.reveal hgroup,.reveal menu,.reveal nav,.reveal output,.reveal ruby,.reveal section,.reveal summary,.reveal time,.reveal mark,.reveal audio,video{margin:0;padding:0;border:0;font-size:100%;font:inherit;vertical-align:baseline}.reveal article,.reveal aside,.reveal details,.reveal figcaption,.reveal figure,.reveal footer,.reveal header,.reveal hgroup,.reveal menu,.reveal nav,.reveal section{display:block}html,body{width:100%;height:100%;overflow:hidden}body{position:relative;line-height:1}::selection{background:#FF5E99;color:#fff;text-shadow:none}@media screen and (max-width: 900px),(max-height: 600px){.reveal .slides{ font-size:.82em}}@media screen and (max-width: 700px),(max-height: 400px){.reveal .slides{ font-size:.66em}}.reveal h1{font-size:3.77em}.reveal h2{font-size:2.11em}.reveal h3{font-size:1.55em}.reveal h4{font-size:1em}.reveal .slides section .fragment{opacity:0;-webkit-transition:all .2s ease;-moz-transition:all .2s ease;-ms-transition:all .2s ease;-o-transition:all .2s ease;transition:all .2s ease}.reveal .slides section .fragment.visible{opacity:1}.reveal .slides section .fragment.grow{opacity:1}.reveal .slides section .fragment.grow.visible{-webkit-transform:scale( 1.3 );-moz-transform:scale( 1.3 );-ms-transform:scale( 1.3 );-o-transform:scale( 1.3 );transform:scale( 1.3 )}.reveal .slides section .fragment.shrink{opacity:1}.reveal .slides section .fragment.shrink.visible{-webkit-transform:scale( .7 );-moz-transform:scale( .7 );-ms-transform:scale( .7 );-o-transform:scale( .7 );transform:scale( .7 )}.reveal .slides section .fragment.roll-in{opacity:0;-webkit-transform:rotateX( 90deg );-moz-transform:rotateX( 90deg );-ms-transform:rotateX( 90deg );-o-transform:rotateX( 90deg );transform:rotateX( 90deg )}.reveal .slides section .fragment.roll-in.visible{opacity:1;-webkit-transform:rotateX( 0 );-moz-transform:rotateX( 0 );-ms-transform:rotateX( 0 );-o-transform:rotateX( 0 );transform:rotateX( 0 )}.reveal .slides section .fragment.fade-out{opacity:1}.reveal .slides section .fragment.fade-out.visible{opacity:0}.reveal .slides section .fragment.highlight-red,.reveal .slides section .fragment.highlight-green,.reveal .slides section .fragment.highlight-blue{opacity:1}.reveal .slides section .fragment.highlight-red.visible{color:#ff2c2d}.reveal .slides section .fragment.highlight-green.visible{color:#17ff2e}.reveal .slides section .fragment.highlight-blue.visible{color:#1b91ff}.reveal:after{content:'';font-style:italic}.reveal img,.reveal iframe{max-width:100%;max-height:100%}.reveal strong,.reveal b{font-weight:700}.reveal em,.reveal i{font-style:italic}.reveal ol,.reveal ul{display:inline-block;text-align:left;margin:0 0 0 1em}.reveal ol{list-style-type:decimal}.reveal ul{list-style-type:disc}.reveal ul ul{list-style-type:square}.reveal ul ul ul{list-style-type:circle}.reveal ul ul,.reveal ul ol,.reveal ol ol,.reveal ol ul{display:block;margin-left:40px}.reveal p{margin-bottom:10px;line-height:1.2em}.reveal q,.reveal blockquote{quotes:none}.reveal blockquote{display:block;position:relative;width:70%;margin:5px auto;padding:5px;font-style:italic;background:rgba(255,255,255,.05);box-shadow:0 0 2px rgba(0,0,0,.2)}.reveal blockquote p:first-child,.reveal blockquote p:last-child{display:inline-block}.reveal blockquote:before{content:'\201C'}.reveal blockquote:after{content:'\201D'}.reveal q{font-style:italic}.reveal q:before{content:'\201C'}.reveal q:after{content:'\201D'}.reveal pre{display:block;position:relative;width:90%;margin:15px auto;text-align:left;font-size:.55em;font-family:monospace;line-height:1.2em;word-wrap:break-word;box-shadow:0 0 6px rgba(0,0,0,.3)}.reveal pre code{padding:5px}.reveal code{font-family:monospace;overflow:auto;max-height:400px}.reveal table th,.reveal table td{text-align:left;padding-right:.3em}.reveal table th{text-shadow:#fff 1px 1px 2px}.reveal sup{vertical-align:super}.reveal sub{vertical-align:sub}.reveal small{display:inline-block;font-size:.6em;line-height:1.2em;vertical-align:top}.reveal small *{vertical-align:top}.reveal .controls{display:none;position:fixed;width:110px;height:110px;z-index:30;right:10px;bottom:10px}.reveal .controls div{position:absolute;opacity:.1;width:0;height:0;border:12px solid transparent;-webkit-transition:opacity .2s ease;-moz-transition:opacity .2s ease;-ms-transition:opacity .2s ease;-o-transition:opacity .2s ease;transition:opacity .2s ease}.reveal .controls div.enabled{opacity:.6;cursor:pointer}.reveal .controls div.enabled:active{margin-top:1px}.reveal .controls div.navigate-left{top:42px;border-right-width:22px;border-right-color:#eee}.reveal .controls div.navigate-right{left:74px;top:42px;border-left-width:22px;border-left-color:#eee}.reveal .controls div.navigate-up{left:42px;border-bottom-width:22px;border-bottom-color:#eee}.reveal .controls div.navigate-down{left:42px;top:74px;border-top-width:22px;border-top-color:#eee}.reveal .progress{position:fixed;display:none;height:3px;width:100%;bottom:0;left:0;z-index:10}.reveal .progress:after{content:'';display:'block';position:absolute;height:20px;width:100%;top:-20px}.reveal .progress span{display:block;height:100%;width:0;-webkit-transition:width 800ms cubic-bezier(0.260,.860,.440,.985);-moz-transition:width 800ms cubic-bezier(0.260,.860,.440,.985);-ms-transition:width 800ms cubic-bezier(0.260,.860,.440,.985);-o-transition:width 800ms cubic-bezier(0.260,.860,.440,.985);transition:width 800ms cubic-bezier(0.260,.860,.440,.985)}.reveal .roll{display:inline-block;line-height:1.2;overflow:hidden;vertical-align:top;-webkit-perspective:400px;-moz-perspective:400px;-ms-perspective:400px;perspective:400px;-webkit-perspective-origin:50% 50%;-moz-perspective-origin:50% 50%;-ms-perspective-origin:50% 50%;perspective-origin:50% 50%}.reveal .roll:hover{background:0;text-shadow:none}.reveal .roll span{display:block;position:relative;padding:0 2px;pointer-events:none;-webkit-transition:all 400ms ease;-moz-transition:all 400ms ease;-ms-transition:all 400ms ease;transition:all 400ms ease;-webkit-transform-origin:50% 0;-moz-transform-origin:50% 0;-ms-transform-origin:50% 0;transform-origin:50% 0;-webkit-transform-style:preserve-3d;-moz-transform-style:preserve-3d;-ms-transform-style:preserve-3d;transform-style:preserve-3d;-webkit-backface-visibility:hidden;-moz-backface-visibility:hidden;backface-visibility:hidden}.reveal .roll:hover span{background:rgba(0,0,0,.5);-webkit-transform:translate3d( 0,0,-45px ) rotateX( 90deg );-moz-transform:translate3d( 0,0,-45px ) rotateX( 90deg );-ms-transform:translate3d( 0,0,-45px ) rotateX( 90deg );transform:translate3d( 0,0,-45px ) rotateX( 90deg )}.reveal .roll span:after{content:attr(data-title);display:block;position:absolute;left:0;top:0;padding:0 2px;-webkit-transform-origin:50% 0;-moz-transform-origin:50% 0;-ms-transform-origin:50% 0;transform-origin:50% 0;-webkit-transform:translate3d( 0,110%,0 ) rotateX( -90deg );-moz-transform:translate3d( 0,110%,0 ) rotateX( -90deg );-ms-transform:translate3d( 0,110%,0 ) rotateX( -90deg );transform:translate3d( 0,110%,0 ) rotateX( -90deg )}.reveal{position:relative;width:100%;height:100%;min-height:640px}.reveal .slides{position:absolute;max-width:900px;min-height:600px;width:80%;left:50%;top:50%;overflow:visible;z-index:1;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;-ms-perspective:600px;perspective:600px;-webkit-perspective-origin:0 -100px;-moz-perspective-origin:0 -100px;-ms-perspective-origin:0 -100px;perspective-origin:0 -100px}.reveal .slides>section,.reveal .slides>section>section{display:none;position:absolute;width:100%;padding:20px 0;z-index:10;line-height:1.2em;font-weight:400;-webkit-transform-style:preserve-3d;-moz-transform-style:preserve-3d;-ms-transform-style:preserve-3d;transform-style:preserve-3d;-webkit-transition:-webkit-transform-origin 800ms cubic-bezier(0.260,.860,.440,.985),-webkit-transform 800ms cubic-bezier(0.260,.860,.440,.985),visibility 800ms cubic-bezier(0.260,.860,.440,.985),opacity 800ms cubic-bezier(0.260,.860,.440,.985);-moz-transition:-moz-transform-origin 800ms cubic-bezier(0.260,.860,.440,.985),-moz-transform 800ms cubic-bezier(0.260,.860,.440,.985),visibility 800ms cubic-bezier(0.260,.860,.440,.985),opacity 800ms cubic-bezier(0.260,.860,.440,.985);-ms-transition:-ms-transform-origin 800ms cubic-bezier(0.260,.860,.440,.985),-ms-transform 800ms cubic-bezier(0.260,.860,.440,.985),visibility 800ms cubic-bezier(0.260,.860,.440,.985),opacity 800ms cubic-bezier(0.260,.860,.440,.985);-o-transition:-o-transform-origin 800ms cubic-bezier(0.260,.860,.440,.985),-o-transform 800ms cubic-bezier(0.260,.860,.440,.985),visibility 800ms cubic-bezier(0.260,.860,.440,.985),opacity 800ms cubic-bezier(0.260,.860,.440,.985);transition:transform-origin 800ms cubic-bezier(0.260,.860,.440,.985),transform 800ms cubic-bezier(0.260,.860,.440,.985),visibility 800ms cubic-bezier(0.260,.860,.440,.985),opacity 800ms cubic-bezier(0.260,.860,.440,.985)}.reveal .slides>section{left:-50%;top:-50%}.reveal .slides>section.present,.reveal .slides>section>section.present{display:block;z-index:11;opacity:1}.reveal.center,.reveal.center .slides{min-height:auto}.reveal .slides>section.past{display:block;opacity:0;-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)}.reveal .slides>section.future{display:block;opacity:0;-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)}.reveal .slides>section>section.past{display:block;opacity:0;-webkit-transform:translate3d(0,-300px,0) rotateX(70deg) translate3d(0,-300px,0);-moz-transform:translate3d(0,-300px,0) rotateX(70deg) translate3d(0,-300px,0);-ms-transform:translate3d(0,-300px,0) rotateX(70deg) translate3d(0,-300px,0);transform:translate3d(0,-300px,0) rotateX(70deg) translate3d(0,-300px,0)}.reveal .slides>section>section.future{display:block;opacity:0;-webkit-transform:translate3d(0,300px,0) rotateX(-70deg) translate3d(0,300px,0);-moz-transform:translate3d(0,300px,0) rotateX(-70deg) translate3d(0,300px,0);-ms-transform:translate3d(0,300px,0) rotateX(-70deg) translate3d(0,300px,0);transform:translate3d(0,300px,0) rotateX(-70deg) translate3d(0,300px,0)}.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)}.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)}.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)}.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);transform:translate3d(0,80%,0) rotateX(70deg) translate3d(0,80%,0)}.reveal.zoom .slides>section.past{opacity:0;visibility:hidden;-webkit-transform:scale(16);-moz-transform:scale(16);-ms-transform:scale(16);-o-transform:scale(16);transform:scale(16)}.reveal.zoom .slides>section.future{opacity:0;visibility:hidden;-webkit-transform:scale(0.2);-moz-transform:scale(0.2);-ms-transform:scale(0.2);-o-transform:scale(0.2);transform:scale(0.2)}.reveal.zoom .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%)}.reveal.zoom .slides>section>section.future{-webkit-transform:translate(0,150%);-moz-transform:translate(0,150%);-ms-transform:translate(0,150%);-o-transform:translate(0,150%);transform:translate(0,150%)}.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)}.reveal.linear .slides>section.future{-webkit-transform:translate(150%,0);-moz-transform:translate(150%,0);-ms-transform:translate(150%,0);-o-transform:translate(150%,0);transform:translate(150%,0)}.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%)}.reveal.linear .slides>section>section.future{-webkit-transform:translate(0,150%);-moz-transform:translate(0,150%);-ms-transform:translate(0,150%);-o-transform:translate(0,150%);transform:translate(0,150%)}.reveal.cube .slides{-webkit-perspective:1300px;-moz-perspective:1300px;-ms-perspective:1300px;perspective:1300px}.reveal.cube .slides section{padding:30px;min-height:600px;-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}.reveal.center.cube .slides section{min-height:auto}.reveal.cube .slides section:not(.stack):before{content:'';position:absolute;display:block;width:100%;height:100%;left:0;top:0;background:rgba(0,0,0,.1);border-radius:4px;-webkit-transform:translateZ( -20px );-moz-transform:translateZ( -20px );-ms-transform:translateZ( -20px );-o-transform:translateZ( -20px );transform:translateZ( -20px )}.reveal.cube .slides section:not(.stack):after{content:'';position:absolute;display:block;width:90%;height:30px;left:5%;bottom:0;background:0;z-index:1;border-radius:4px;box-shadow:0 95px 25px rgba(0,0,0,.2);-webkit-transform:translateZ(-90px) rotateX( 65deg );-moz-transform:translateZ(-90px) rotateX( 65deg );-ms-transform:translateZ(-90px) rotateX( 65deg );-o-transform:translateZ(-90px) rotateX( 65deg );transform:translateZ(-90px) rotateX( 65deg )}.reveal.cube .slides>section.stack{padding:0;background:0}.reveal.cube .slides>section.past{-webkit-transform-origin:100% 0;-moz-transform-origin:100% 0;-ms-transform-origin:100% 0;transform-origin:100% 0;-webkit-transform:translate3d(-100%,0,0) rotateY(-90deg);-moz-transform:translate3d(-100%,0,0) rotateY(-90deg);-ms-transform:translate3d(-100%,0,0) rotateY(-90deg);transform:translate3d(-100%,0,0) rotateY(-90deg)}.reveal.cube .slides>section.future{-webkit-transform-origin:0 0;-moz-transform-origin:0 0;-ms-transform-origin:0 0;transform-origin:0 0;-webkit-transform:translate3d(100%,0,0) rotateY(90deg);-moz-transform:translate3d(100%,0,0) rotateY(90deg);-ms-transform:translate3d(100%,0,0) rotateY(90deg);transform:translate3d(100%,0,0) rotateY(90deg)}.reveal.cube .slides>section>section.past{-webkit-transform-origin:0 100%;-moz-transform-origin:0 100%;-ms-transform-origin:0 100%;transform-origin:0 100%;-webkit-transform:translate3d(0,-100%,0) rotateX(90deg);-moz-transform:translate3d(0,-100%,0) rotateX(90deg);-ms-transform:translate3d(0,-100%,0) rotateX(90deg);transform:translate3d(0,-100%,0) rotateX(90deg)}.reveal.cube .slides>section>section.future{-webkit-transform-origin:0 0;-moz-transform-origin:0 0;-ms-transform-origin:0 0;transform-origin:0 0;-webkit-transform:translate3d(0,100%,0) rotateX(-90deg);-moz-transform:translate3d(0,100%,0) rotateX(-90deg);-ms-transform:translate3d(0,100%,0) rotateX(-90deg);transform:translate3d(0,100%,0) rotateX(-90deg)}.reveal.page .slides{-webkit-perspective-origin:0 50%;-moz-perspective-origin:0 50%;-ms-perspective-origin:0 50%;perspective-origin:0 50%;-webkit-perspective:3000px;-moz-perspective:3000px;-ms-perspective:3000px;perspective:3000px}.reveal.page .slides section{padding:30px;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}.reveal.page .slides section.past{z-index:12}.reveal.page .slides section:not(.stack):before{content:'';position:absolute;display:block;width:100%;height:100%;left:0;top:0;background:rgba(0,0,0,.1);-webkit-transform:translateZ( -20px );-moz-transform:translateZ( -20px );-ms-transform:translateZ( -20px );-o-transform:translateZ( -20px );transform:translateZ( -20px )}.reveal.page .slides section:not(.stack):after{content:'';position:absolute;display:block;width:90%;height:30px;left:5%;bottom:0;background:0;z-index:1;border-radius:4px;box-shadow:0 95px 25px rgba(0,0,0,.2);-webkit-transform:translateZ(-90px) rotateX( 65deg )}.reveal.page .slides>section.stack{padding:0;background:0}.reveal.page .slides>section.past{-webkit-transform-origin:0 0;-moz-transform-origin:0 0;-ms-transform-origin:0 0;transform-origin:0 0;-webkit-transform:translate3d(-40%,0,0) rotateY(-80deg);-moz-transform:translate3d(-40%,0,0) rotateY(-80deg);-ms-transform:translate3d(-40%,0,0) rotateY(-80deg);transform:translate3d(-40%,0,0) rotateY(-80deg)}.reveal.page .slides>section.future{-webkit-transform-origin:100% 0;-moz-transform-origin:100% 0;-ms-transform-origin:100% 0;transform-origin:100% 0;-webkit-transform:translate3d(0,0,0);-moz-transform:translate3d(0,0,0);-ms-transform:translate3d(0,0,0);transform:translate3d(0,0,0)}.reveal.page .slides>section>section.past{-webkit-transform-origin:0 0;-moz-transform-origin:0 0;-ms-transform-origin:0 0;transform-origin:0 0;-webkit-transform:translate3d(0,-40%,0) rotateX(80deg);-moz-transform:translate3d(0,-40%,0) rotateX(80deg);-ms-transform:translate3d(0,-40%,0) rotateX(80deg);transform:translate3d(0,-40%,0) rotateX(80deg)}.reveal.page .slides>section>section.future{-webkit-transform-origin:0 100%;-moz-transform-origin:0 100%;-ms-transform-origin:0 100%;transform-origin:0 100%;-webkit-transform:translate3d(0,0,0);-moz-transform:translate3d(0,0,0);-ms-transform:translate3d(0,0,0);transform:translate3d(0,0,0)}.reveal.tileflip .slides section.present{-webkit-transform:none;-webkit-transition-duration:800ms;-webkit-filter:custom( url(shaders/tile-flip.vs) mix(url(shaders/tile-flip.fs) multiply source-atop),10 10 border-box detached,transform perspective(1000) scale(1) rotateX(0deg) rotateY(0deg) rotateZ(0deg),amount 0,randomness 0,flipAxis 0 1 0,tileOutline 1 )}.reveal.tileflip .slides section.past{-webkit-transform:none;-webkit-transition-duration:800ms;-webkit-filter:custom( url(shaders/tile-flip.vs) mix(url(shaders/tile-flip.fs) multiply source-atop),10 10 border-box detached,transform perspective(1000) scale(1) rotateX(0deg) rotateY(0deg) rotateZ(0deg),amount 1,randomness 0,flipAxis 0 1 0,tileOutline 1 )}.reveal.tileflip .slides section.future{-webkit-transform:none;-webkit-transition-duration:800ms;-webkit-filter:custom( url(shaders/tile-flip.vs) mix(url(shaders/tile-flip.fs) multiply source-atop),10 10 border-box detached,transform perspective(1000) scale(1) rotateX(0deg) rotateY(0deg) rotateZ(0deg),amount 1,randomness 0,flipAxis 0 1 0,tileOutline 1 )}.reveal.tileflip .slides>section>section.present{-webkit-filter:custom( url(shaders/tile-flip.vs) mix(url(shaders/tile-flip.fs) multiply source-atop),10 10 border-box detached,transform perspective(1000) scale(1) rotateX(0deg) rotateY(0deg) rotateZ(0deg),amount 0,randomness 2,flipAxis 1 0 0,tileOutline 1 )}.reveal.tileflip .slides>section>section.past{-webkit-filter:custom( url(shaders/tile-flip.vs) mix(url(shaders/tile-flip.fs) multiply source-atop),10 10 border-box detached,transform perspective(1000) scale(1) rotateX(0deg) rotateY(0deg) rotateZ(0deg),amount 1,randomness 2,flipAxis 1 0 0,tileOutline 1 )}.reveal.tileflip .slides>section>section.future{-webkit-filter:custom( url(shaders/tile-flip.vs) mix(url(shaders/tile-flip.fs) multiply source-atop),10 10 border-box detached,transform perspective(1000) scale(1) rotateX(0deg) rotateY(0deg) rotateZ(0deg),amount 1,randomness 2,flipAxis 1 0 0,tileOutline 1 )}.reveal.none .slides section{-webkit-transform:none;-moz-transform:none;-ms-transform:none;-o-transform:none;transform:none;-webkit-transition:none;-moz-transition:none;-ms-transition:none;-o-transition:none;transition:none}.reveal.overview .slides{-webkit-perspective:700px;-moz-perspective:700px;-ms-perspective:700px;perspective:700px}.reveal.overview .slides section{height:600px;overflow:hidden;opacity:1!important;visibility:visible!important;cursor:pointer;background:rgba(0,0,0,.1)}.reveal.overview .slides section .fragment{opacity:1}.reveal.overview .slides section:after,.reveal.overview .slides section:before{display:none!important}.reveal.overview .slides section>section{opacity:1;cursor:pointer}.reveal.overview .slides section:hover{background:rgba(0,0,0,.3)}.reveal.overview .slides section.present{background:rgba(0,0,0,.3)}.reveal.overview .slides>section.stack{padding:0;background:0;overflow:visible}.reveal .pause-overlay{position:absolute;top:0;left:0;width:100%;height:100%;background:#000;visibility:hidden;opacity:0;z-index:100;-webkit-transition:all 1s ease;-moz-transition:all 1s ease;-ms-transition:all 1s ease;-o-transition:all 1s ease;transition:all 1s ease}.reveal.paused .pause-overlay{visibility:visible;opacity:1}.no-transforms{overflow-y:auto}.no-transforms .slides{top:0;left:50%;margin:0;text-align:center}.no-transforms .slides section{display:block!important;opacity:1!important;position:relative!important;height:auto;min-height:auto;top:0;left:-50%;margin:70px 0;-webkit-transform:none;-moz-transform:none;-ms-transform:none;transform:none}.no-transforms .slides section section{left:0}.no-transition{-webkit-transition:none;-moz-transition:none;-ms-transition:none;-o-transition:none;transition:none}.reveal .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 .reveal .state-background{background:rgba( 200,50,30,.6 )}.soothe .reveal .state-background{background:rgba( 50,200,90,.4 )}.blackout .reveal .state-background{background:rgba( 0,0,0,.6 )}.reveal.rtl .slides,.reveal.rtl .slides h1,.reveal.rtl .slides h2,.reveal.rtl .slides h3,.reveal.rtl .slides h4,.reveal.rtl .slides h5,.reveal.rtl .slides h6{direction:rtl;font-family:sans-serif}.reveal.rtl pre,.reveal.rtl code{direction:ltr}.reveal aside.notes{display:none}.zoomed .reveal *,.zoomed .reveal :before,.zoomed .reveal :after{-webkit-transform:none!important;-moz-transform:none!important;-ms-transform:none!important;transform:none!important;-webkit-backface-visibility:visible!important;-moz-backface-visibility:visible!important;-ms-backface-visibility:visible!important;backface-visibility:visible!important}.zoomed .reveal .progress,.zoomed .reveal .controls{opacity:0}.zoomed .reveal .roll span{background:0}.zoomed .reveal .roll span:after{visibility:hidden}
\ No newline at end of file diff --git a/css/theme/beige.css b/css/theme/beige.css index 5e40883..c8d38f2 100644 --- a/css/theme/beige.css +++ b/css/theme/beige.css @@ -110,39 +110,39 @@ body { /********************************************* * NAVIGATION CONTROLS *********************************************/ -.reveal .controls div.left, -.reveal .controls div.left.enabled { +.reveal .controls div.navigate-left, +.reveal .controls div.navigate-left.enabled { border-right-color: #8b743d; } -.reveal .controls div.right, -.reveal .controls div.right.enabled { +.reveal .controls div.navigate-right, +.reveal .controls div.navigate-right.enabled { border-left-color: #8b743d; } -.reveal .controls div.up, -.reveal .controls div.up.enabled { +.reveal .controls div.navigate-up, +.reveal .controls div.navigate-up.enabled { border-bottom-color: #8b743d; } -.reveal .controls div.down, -.reveal .controls div.down.enabled { +.reveal .controls div.navigate-down, +.reveal .controls div.navigate-down.enabled { border-top-color: #8b743d; } -.reveal .controls div.left.enabled:hover { +.reveal .controls div.navigate-left.enabled:hover { border-right-color: #c0a86e; } -.reveal .controls div.right.enabled:hover { +.reveal .controls div.navigate-right.enabled:hover { border-left-color: #c0a86e; } -.reveal .controls div.up.enabled:hover { +.reveal .controls div.navigate-up.enabled:hover { border-bottom-color: #c0a86e; } -.reveal .controls div.down.enabled:hover { +.reveal .controls div.navigate-down.enabled:hover { border-top-color: #c0a86e; } diff --git a/css/theme/default.css b/css/theme/default.css index 28ed7d3..30d7463 100644 --- a/css/theme/default.css +++ b/css/theme/default.css @@ -110,39 +110,39 @@ body { /********************************************* * NAVIGATION CONTROLS *********************************************/ -.reveal .controls div.left, -.reveal .controls div.left.enabled { +.reveal .controls div.navigate-left, +.reveal .controls div.navigate-left.enabled { border-right-color: #13daec; } -.reveal .controls div.right, -.reveal .controls div.right.enabled { +.reveal .controls div.navigate-right, +.reveal .controls div.navigate-right.enabled { border-left-color: #13daec; } -.reveal .controls div.up, -.reveal .controls div.up.enabled { +.reveal .controls div.navigate-up, +.reveal .controls div.navigate-up.enabled { border-bottom-color: #13daec; } -.reveal .controls div.down, -.reveal .controls div.down.enabled { +.reveal .controls div.navigate-down, +.reveal .controls div.navigate-down.enabled { border-top-color: #13daec; } -.reveal .controls div.left.enabled:hover { +.reveal .controls div.navigate-left.enabled:hover { border-right-color: #71e9f4; } -.reveal .controls div.right.enabled:hover { +.reveal .controls div.navigate-right.enabled:hover { border-left-color: #71e9f4; } -.reveal .controls div.up.enabled:hover { +.reveal .controls div.navigate-up.enabled:hover { border-bottom-color: #71e9f4; } -.reveal .controls div.down.enabled:hover { +.reveal .controls div.navigate-down.enabled:hover { border-top-color: #71e9f4; } diff --git a/css/theme/night.css b/css/theme/night.css new file mode 100644 index 0000000..4c1f824 --- /dev/null +++ b/css/theme/night.css @@ -0,0 +1,150 @@ +@import url(http://fonts.googleapis.com/css?family=Montserrat:700); +@import url(http://fonts.googleapis.com/css?family=Open+Sans:400,700,400italic,700italic); +/** + * Black theme for reveal.js. + * + * Copyright (C) 2011-2012 Hakim El Hattab, http://hakim.se + */ +/********************************************* + * GLOBAL STYLES + *********************************************/ +body { + background: #111111; + background-color: #111111; +} + +.reveal { + font-family: "Open Sans", Times, "Times New Roman", serif; + font-size: 30px; + font-weight: 200; + letter-spacing: -0.02em; + color: #eeeeee; +} + +::selection { + color: white; + background: #e7ad52; + text-shadow: none; +} + +/********************************************* + * HEADERS + *********************************************/ +.reveal h1, +.reveal h2, +.reveal h3, +.reveal h4, +.reveal h5, +.reveal h6 { + margin: 0 0 20px 0; + color: #eeeeee; + font-family: "Montserrat", Impact, sans-serif; + line-height: 0.9em; + letter-spacing: -0.03em; + text-transform: none; + text-shadow: none; +} + +.reveal h1 { + text-shadow: 0px 0px 6px rgba(0, 0, 0, 0.2); +} + +/********************************************* + * LINKS + *********************************************/ +.reveal a:not(.image) { + color: #e7ad52; + text-decoration: none; + -webkit-transition: color .15s ease; + -moz-transition: color .15s ease; + -ms-transition: color .15s ease; + -o-transition: color .15s ease; + transition: color .15s ease; +} + +.reveal a:not(.image):hover { + color: #f3d7ac; + text-shadow: none; + border: none; +} + +.reveal .roll span:after { + color: #fff; + background: #d08a1d; +} + +/********************************************* + * IMAGES + *********************************************/ +.reveal section img { + margin: 15px; + background: rgba(255, 255, 255, 0.12); + border: 4px solid #eeeeee; + box-shadow: 0 0 10px rgba(0, 0, 0, 0.15); + -webkit-transition: all .2s linear; + -moz-transition: all .2s linear; + -ms-transition: all .2s linear; + -o-transition: all .2s linear; + transition: all .2s linear; +} + +.reveal a:hover img { + background: rgba(255, 255, 255, 0.2); + border-color: #e7ad52; + box-shadow: 0 0 20px rgba(0, 0, 0, 0.55); +} + +/********************************************* + * NAVIGATION CONTROLS + *********************************************/ +.reveal .controls div.navigate-left, +.reveal .controls div.navigate-left.enabled { + border-right-color: #e7ad52; +} + +.reveal .controls div.navigate-right, +.reveal .controls div.navigate-right.enabled { + border-left-color: #e7ad52; +} + +.reveal .controls div.navigate-up, +.reveal .controls div.navigate-up.enabled { + border-bottom-color: #e7ad52; +} + +.reveal .controls div.navigate-down, +.reveal .controls div.navigate-down.enabled { + border-top-color: #e7ad52; +} + +.reveal .controls div.navigate-left.enabled:hover { + border-right-color: #f3d7ac; +} + +.reveal .controls div.navigate-right.enabled:hover { + border-left-color: #f3d7ac; +} + +.reveal .controls div.navigate-up.enabled:hover { + border-bottom-color: #f3d7ac; +} + +.reveal .controls div.navigate-down.enabled:hover { + border-top-color: #f3d7ac; +} + +/********************************************* + * PROGRESS BAR + *********************************************/ +.reveal .progress { + background: rgba(0, 0, 0, 0.2); +} + +.reveal .progress span { + background: #e7ad52; + -webkit-transition: width 800ms cubic-bezier(0.26, 0.86, 0.44, 0.985); + -moz-transition: width 800ms cubic-bezier(0.26, 0.86, 0.44, 0.985); + -ms-transition: width 800ms cubic-bezier(0.26, 0.86, 0.44, 0.985); + -o-transition: width 800ms cubic-bezier(0.26, 0.86, 0.44, 0.985); + transition: width 800ms cubic-bezier(0.26, 0.86, 0.44, 0.985); +} diff --git a/css/theme/serif.css b/css/theme/serif.css index ece6124..3d406af 100644 --- a/css/theme/serif.css +++ b/css/theme/serif.css @@ -97,39 +97,39 @@ body { /********************************************* * NAVIGATION CONTROLS *********************************************/ -.reveal .controls div.left, -.reveal .controls div.left.enabled { +.reveal .controls div.navigate-left, +.reveal .controls div.navigate-left.enabled { border-right-color: #51483d; } -.reveal .controls div.right, -.reveal .controls div.right.enabled { +.reveal .controls div.navigate-right, +.reveal .controls div.navigate-right.enabled { border-left-color: #51483d; } -.reveal .controls div.up, -.reveal .controls div.up.enabled { +.reveal .controls div.navigate-up, +.reveal .controls div.navigate-up.enabled { border-bottom-color: #51483d; } -.reveal .controls div.down, -.reveal .controls div.down.enabled { +.reveal .controls div.navigate-down, +.reveal .controls div.navigate-down.enabled { border-top-color: #51483d; } -.reveal .controls div.left.enabled:hover { +.reveal .controls div.navigate-left.enabled:hover { border-right-color: #8b7c69; } -.reveal .controls div.right.enabled:hover { +.reveal .controls div.navigate-right.enabled:hover { border-left-color: #8b7c69; } -.reveal .controls div.up.enabled:hover { +.reveal .controls div.navigate-up.enabled:hover { border-bottom-color: #8b7c69; } -.reveal .controls div.down.enabled:hover { +.reveal .controls div.navigate-down.enabled:hover { border-top-color: #8b7c69; } diff --git a/css/theme/simple.css b/css/theme/simple.css index 6d0771a..cf4f042 100644 --- a/css/theme/simple.css +++ b/css/theme/simple.css @@ -99,39 +99,39 @@ body { /********************************************* * NAVIGATION CONTROLS *********************************************/ -.reveal .controls div.left, -.reveal .controls div.left.enabled { +.reveal .controls div.navigate-left, +.reveal .controls div.navigate-left.enabled { border-right-color: darkblue; } -.reveal .controls div.right, -.reveal .controls div.right.enabled { +.reveal .controls div.navigate-right, +.reveal .controls div.navigate-right.enabled { border-left-color: darkblue; } -.reveal .controls div.up, -.reveal .controls div.up.enabled { +.reveal .controls div.navigate-up, +.reveal .controls div.navigate-up.enabled { border-bottom-color: darkblue; } -.reveal .controls div.down, -.reveal .controls div.down.enabled { +.reveal .controls div.navigate-down, +.reveal .controls div.navigate-down.enabled { border-top-color: darkblue; } -.reveal .controls div.left.enabled:hover { +.reveal .controls div.navigate-left.enabled:hover { border-right-color: #0000f1; } -.reveal .controls div.right.enabled:hover { +.reveal .controls div.navigate-right.enabled:hover { border-left-color: #0000f1; } -.reveal .controls div.up.enabled:hover { +.reveal .controls div.navigate-up.enabled:hover { border-bottom-color: #0000f1; } -.reveal .controls div.down.enabled:hover { +.reveal .controls div.navigate-down.enabled:hover { border-top-color: #0000f1; } diff --git a/css/theme/sky.css b/css/theme/sky.css index 18a4863..43bb4f4 100644 --- a/css/theme/sky.css +++ b/css/theme/sky.css @@ -103,39 +103,39 @@ body { /********************************************* * NAVIGATION CONTROLS *********************************************/ -.reveal .controls div.left, -.reveal .controls div.left.enabled { +.reveal .controls div.navigate-left, +.reveal .controls div.navigate-left.enabled { border-right-color: #3b759e; } -.reveal .controls div.right, -.reveal .controls div.right.enabled { +.reveal .controls div.navigate-right, +.reveal .controls div.navigate-right.enabled { border-left-color: #3b759e; } -.reveal .controls div.up, -.reveal .controls div.up.enabled { +.reveal .controls div.navigate-up, +.reveal .controls div.navigate-up.enabled { border-bottom-color: #3b759e; } -.reveal .controls div.down, -.reveal .controls div.down.enabled { +.reveal .controls div.navigate-down, +.reveal .controls div.navigate-down.enabled { border-top-color: #3b759e; } -.reveal .controls div.left.enabled:hover { +.reveal .controls div.navigate-left.enabled:hover { border-right-color: #74a7cb; } -.reveal .controls div.right.enabled:hover { +.reveal .controls div.navigate-right.enabled:hover { border-left-color: #74a7cb; } -.reveal .controls div.up.enabled:hover { +.reveal .controls div.navigate-up.enabled:hover { border-bottom-color: #74a7cb; } -.reveal .controls div.down.enabled:hover { +.reveal .controls div.navigate-down.enabled:hover { border-top-color: #74a7cb; } diff --git a/css/theme/source/night.scss b/css/theme/source/night.scss new file mode 100644 index 0000000..6646857 --- /dev/null +++ b/css/theme/source/night.scss @@ -0,0 +1,35 @@ +/** + * Black theme for reveal.js. + * + * Copyright (C) 2011-2012 Hakim El Hattab, http://hakim.se + */ + + +// Default mixins and settings ----------------- +@import "../template/mixins"; +@import "../template/settings"; +// --------------------------------------------- + + +// Include theme-specific fonts +@import url(http://fonts.googleapis.com/css?family=Montserrat:700); +@import url(http://fonts.googleapis.com/css?family=Open+Sans:400,700,400italic,700italic); + + +// Override theme settings (see ../template/settings.scss) +$backgroundColor: #111; + +$mainFont: 'Open Sans', Times, 'Times New Roman', serif; +$linkColor: #e7ad52; +$linkColorHover: lighten( $linkColor, 20% ); +$headingFont: 'Montserrat', Impact, sans-serif; +$headingTextShadow: none; +$headingLetterSpacing: -0.03em; +$headingTextTransform: none; +$selectionBackgroundColor: #e7ad52; +$mainFontSize: 30px; + + +// Theme template ------------------------------ +@import "../template/theme"; +// ---------------------------------------------
\ No newline at end of file diff --git a/css/theme/template/theme.scss b/css/theme/template/theme.scss index 6a80b62..a818ec2 100644 --- a/css/theme/template/theme.scss +++ b/css/theme/template/theme.scss @@ -106,39 +106,39 @@ body { * NAVIGATION CONTROLS *********************************************/ -.reveal .controls div.left, -.reveal .controls div.left.enabled { +.reveal .controls div.navigate-left, +.reveal .controls div.navigate-left.enabled { border-right-color: $linkColor; } -.reveal .controls div.right, -.reveal .controls div.right.enabled { +.reveal .controls div.navigate-right, +.reveal .controls div.navigate-right.enabled { border-left-color: $linkColor; } -.reveal .controls div.up, -.reveal .controls div.up.enabled { +.reveal .controls div.navigate-up, +.reveal .controls div.navigate-up.enabled { border-bottom-color: $linkColor; } -.reveal .controls div.down, -.reveal .controls div.down.enabled { +.reveal .controls div.navigate-down, +.reveal .controls div.navigate-down.enabled { border-top-color: $linkColor; } -.reveal .controls div.left.enabled:hover { +.reveal .controls div.navigate-left.enabled:hover { border-right-color: $linkColorHover; } -.reveal .controls div.right.enabled:hover { +.reveal .controls div.navigate-right.enabled:hover { border-left-color: $linkColorHover; } -.reveal .controls div.up.enabled:hover { +.reveal .controls div.navigate-up.enabled:hover { border-bottom-color: $linkColorHover; } -.reveal .controls div.down.enabled:hover { +.reveal .controls div.navigate-down.enabled:hover { border-top-color: $linkColorHover; } diff --git a/grunt.js b/grunt.js new file mode 100644 index 0000000..b1d6e3d --- /dev/null +++ b/grunt.js @@ -0,0 +1,84 @@ +/* global module:false */ +module.exports = function(grunt) { + + // Project configuration + grunt.initConfig({ + pkg: '<json:package.json>', + + inputJS: 'js/reveal.js', + inputCSS: 'css/reveal.css', + + outputJS: 'js/reveal.min.js', + outputCSS: 'css/reveal.min.css', + + meta: { + version: '2.2', + banner: + '/*!\n' + + ' * reveal.js <%= meta.version %> (<%= grunt.template.today("yyyy-mm-dd, HH:MM") %>)\n' + + ' * http://lab.hakim.se/reveal-js\n' + + ' * MIT licensed\n' + + ' *\n' + + ' * Copyright (C) 2011-2012 Hakim El Hattab, http://hakim.se\n' + + ' */' + }, + + lint: { + files: [ 'grunt.js', '<%= inputJS %>' ] + }, + + // Tests will be added soon + qunit: { + files: [ 'test/**/*.html' ] + }, + + min: { + dist: { + src: [ '<banner:meta.banner>', '<%= inputJS %>' ], + dest: '<%= outputJS %>' + } + }, + + mincss: { + compress: { + files: { + '<%= outputCSS %>': [ '<%= inputCSS %>' ] + } + } + }, + + jshint: { + options: { + curly: false, + eqeqeq: true, + immed: true, + latedef: true, + newcap: true, + noarg: true, + sub: true, + undef: true, + eqnull: true, + browser: true, + expr: true + }, + globals: { + head: false, + module: false, + console: false + } + }, + + watch: { + files: [ 'grunt.js', '<%= inputJS %>', '<%= inputCSS %>' ], + tasks: 'default' + } + + }); + + // Dependencies + grunt.loadNpmTasks( 'grunt-contrib-mincss' ); + + // Default task + grunt.registerTask( 'default', [ 'lint', 'mincss', 'min' ] ); + +}; @@ -12,7 +12,7 @@ <meta name="apple-mobile-web-app-capable" content="yes" /> <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" /> - <link rel="stylesheet" href="css/reveal.css"> + <link rel="stylesheet" href="css/reveal.min.css"> <link rel="stylesheet" href="css/theme/default.css" id="theme"> <!-- For syntax highlighting --> @@ -61,9 +61,9 @@ <h2>Vertical Slides</h2> <p> Slides can be nested inside of other slides, - try pressing <a href="#/2/1">down</a>. + try pressing <a href="#" class="navigate-down">down</a>. </p> - <a href="#/2/1" class="image"> + <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> @@ -164,6 +164,7 @@ <a href="?theme=beige#/themes">Beige</a> - <a href="?theme=simple#/themes">Simple</a> - <a href="?theme=serif#/themes">Serif</a> - + <a href="?theme=night#/themes">Night</a> - <a href="?#/themes">Default</a> </p> <p> @@ -181,20 +182,20 @@ 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="#/7/1" class="image"> + <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="#/7/2" class="image"> + <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="#/7/0" class="image"> - <img width="178" height="238" src="https://s3.amazonaws.com/hakim-static/reveal-js/arrow.png" alt="Up arrow" style="-webkit-transform: rotate(180deg);"> + <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> </section> @@ -350,6 +351,7 @@ function linkify( selector ) { controls: true, progress: true, history: true, + center: true, theme: Reveal.getQueryHash().theme, // available themes are in /css/theme transition: Reveal.getQueryHash().transition || 'default', // default/cube/page/concave/zoom/linear/none @@ -362,6 +364,7 @@ function linkify( selector ) { { src: 'plugin/highlight/highlight.js', async: true, callback: function() { hljs.initHighlightingOnLoad(); } }, { src: 'plugin/zoom-js/zoom.js', async: true, condition: function() { return !!document.body.classList; } }, { src: 'plugin/notes/notes.js', async: true, condition: function() { return !!document.body.classList; } } + // { src: 'plugin/remotes/remotes.js', async: true, condition: function() { return !!document.body.classList; } } ] }); diff --git a/js/reveal.js b/js/reveal.js index 58cb58e..5ee5702 100644 --- a/js/reveal.js +++ b/js/reveal.js @@ -1,5 +1,5 @@ /*! - * reveal.js 2.1 r37 + * reveal.js * http://lab.hakim.se/reveal-js * MIT licensed * @@ -9,7 +9,8 @@ var Reveal = (function(){ 'use strict'; - var HORIZONTAL_SLIDES_SELECTOR = '.reveal .slides>section', + var SLIDES_SELECTOR = '.reveal .slides section', + HORIZONTAL_SLIDES_SELECTOR = '.reveal .slides>section', VERTICAL_SLIDES_SELECTOR = '.reveal .slides>section.present>section', // Configurations defaults, can be overridden at initialization time @@ -29,16 +30,22 @@ var Reveal = (function(){ // Enable the slide overview mode overview: true, + // Vertical centering of slides + center: true, + // Loop the presentation loop: false, + // Experimental support for RTL + rtl: false, + // Number of milliseconds between automatically proceeding to the // next slide, disabled when set to 0, this value can be overwritten // by using a data-autoslide attribute on your slides autoSlide: 0, // Enable slide navigation via mouse wheel - mouseWheel: true, + mouseWheel: false, // Apply a 3D roll to links on hover rollingLinks: true, @@ -60,9 +67,6 @@ var Reveal = (function(){ // The horizontal and verical index of the currently active slide indexh = 0, indexv = 0, - - // the fragment index - indexf = 0, // The previous and current slide HTML elements previousSlide, @@ -140,6 +144,7 @@ var Reveal = (function(){ // Cache references to key DOM elements dom.theme = document.querySelector( '#theme' ); dom.wrapper = document.querySelector( '.reveal' ); + dom.slides = document.querySelector( '.reveal .slides' ); // Progress bar if( !dom.wrapper.querySelector( '.progress' ) && config.progress ) { @@ -153,10 +158,10 @@ var Reveal = (function(){ if( !dom.wrapper.querySelector( '.controls' ) && config.controls ) { var controlsElement = document.createElement( 'aside' ); controlsElement.classList.add( 'controls' ); - controlsElement.innerHTML = '<div class="left"></div>' + - '<div class="right"></div>' + - '<div class="up"></div>' + - '<div class="down"></div>'; + controlsElement.innerHTML = '<div class="navigate-left"></div>' + + '<div class="navigate-right"></div>' + + '<div class="navigate-up"></div>' + + '<div class="navigate-down"></div>'; dom.wrapper.appendChild( controlsElement ); } @@ -180,10 +185,14 @@ var Reveal = (function(){ if ( config.controls ) { 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' ); + + // There can be multiple instances of controls throughout the page + dom.controlsLeft = toArray( document.querySelectorAll( '.navigate-left' ) ); + dom.controlsRight = toArray( document.querySelectorAll( '.navigate-right' ) ); + dom.controlsUp = toArray( document.querySelectorAll( '.navigate-up' ) ); + dom.controlsDown = toArray( document.querySelectorAll( '.navigate-down' ) ); + dom.controlsPrev = toArray( document.querySelectorAll( '.navigate-prev' ) ); + dom.controlsNext = toArray( document.querySelectorAll( '.navigate-next' ) ); } } @@ -191,7 +200,7 @@ var Reveal = (function(){ * Hides the address bar if we're on a mobile device. */ function hideAddressBar() { - if( navigator.userAgent.match( /(iphone|ipod|android)/i ) ) { + if( navigator.userAgent.match( /(iphone|ipod)/i ) ) { // Give the page some scrollable overflow document.documentElement.style.overflow = 'scroll'; document.body.style.height = '120%'; @@ -227,7 +236,7 @@ var Reveal = (function(){ // Extension may contain callback functions if( typeof s.callback === 'function' ) { - head.ready( s.src.match( /([\w\d_\-]*)\.?[^\\\/]*$/i )[0], s.callback ); + head.ready( s.src.match( /([\w\d_\-]*)\.?js$|[^\\\/]*$/i )[0], s.callback ); } } } @@ -267,6 +276,10 @@ var Reveal = (function(){ // Updates the presentation to match the current configuration values configure(); + // Force an initial layout, will thereafter be invoked as the window + // is resized + layout(); + // Read the initial hash readURL(); @@ -304,6 +317,14 @@ var Reveal = (function(){ dom.wrapper.classList.add( config.transition ); } + if( config.rtl ) { + dom.wrapper.classList.add( 'rtl' ); + } + + if( config.center ) { + dom.wrapper.classList.add( 'center' ); + } + if( config.mouseWheel ) { document.addEventListener( 'DOMMouseScroll', onDocumentMouseScroll, false ); // FF document.addEventListener( 'mousewheel', onDocumentMouseScroll, false ); @@ -335,6 +356,7 @@ var Reveal = (function(){ document.addEventListener( 'touchmove', onDocumentTouchMove, false ); document.addEventListener( 'touchend', onDocumentTouchEnd, false ); window.addEventListener( 'hashchange', onWindowHashChange, false ); + window.addEventListener( 'resize', onWindowResize, false ); if( config.keyboard ) { document.addEventListener( 'keydown', onDocumentKeyDown, false ); @@ -345,10 +367,12 @@ var Reveal = (function(){ } if ( config.controls && dom.controls ) { - dom.controlsLeft.addEventListener( 'click', preventAndForward( navigateLeft ), false ); - dom.controlsRight.addEventListener( 'click', preventAndForward( navigateRight ), false ); - dom.controlsUp.addEventListener( 'click', preventAndForward( navigateUp ), false ); - dom.controlsDown.addEventListener( 'click', preventAndForward( navigateDown ), false ); + dom.controlsLeft.forEach( function( el ) { el.addEventListener( 'click', preventAndForward( navigateLeft ), false ); } ); + dom.controlsRight.forEach( function( el ) { el.addEventListener( 'click', preventAndForward( navigateRight ), false ); } ); + dom.controlsUp.forEach( function( el ) { el.addEventListener( 'click', preventAndForward( navigateUp ), false ); } ); + dom.controlsDown.forEach( function( el ) { el.addEventListener( 'click', preventAndForward( navigateDown ), false ); } ); + dom.controlsPrev.forEach( function( el ) { el.addEventListener( 'click', preventAndForward( navigatePrev ), false ); } ); + dom.controlsNext.forEach( function( el ) { el.addEventListener( 'click', preventAndForward( navigateNext ), false ); } ); } } @@ -361,16 +385,19 @@ var Reveal = (function(){ document.removeEventListener( 'touchmove', onDocumentTouchMove, false ); document.removeEventListener( 'touchend', onDocumentTouchEnd, false ); window.removeEventListener( 'hashchange', onWindowHashChange, false ); + window.removeEventListener( 'resize', onWindowResize, false ); if ( config.progress && dom.progress ) { dom.progress.removeEventListener( 'click', preventAndForward( onProgressClick ), false ); } if ( config.controls && dom.controls ) { - dom.controlsLeft.removeEventListener( 'click', preventAndForward( navigateLeft ), false ); - dom.controlsRight.removeEventListener( 'click', preventAndForward( navigateRight ), false ); - dom.controlsUp.removeEventListener( 'click', preventAndForward( navigateUp ), false ); - dom.controlsDown.removeEventListener( 'click', preventAndForward( navigateDown ), false ); + dom.controlsLeft.forEach( function( el ) { el.removeEventListener( 'click', preventAndForward( navigateLeft ), false ); } ); + dom.controlsRight.forEach( function( el ) { el.removeEventListener( 'click', preventAndForward( navigateRight ), false ); } ); + dom.controlsUp.forEach( function( el ) { el.removeEventListener( 'click', preventAndForward( navigateUp ), false ); } ); + dom.controlsDown.forEach( function( el ) { el.removeEventListener( 'click', preventAndForward( navigateDown ), false ); } ); + dom.controlsPrev.forEach( function( el ) { el.removeEventListener( 'click', preventAndForward( navigatePrev ), false ); } ); + dom.controlsNext.forEach( function( el ) { el.removeEventListener( 'click', preventAndForward( navigateNext ), false ); } ); } } @@ -385,6 +412,19 @@ var Reveal = (function(){ } /** + * Converts the target object to an array. + */ + function toArray( o ) { + return Array.prototype.slice.call( o ); + } + + function each( targets, method, args ) { + targets.forEach( function( el ) { + el[method].apply( el, args ); + } ); + } + + /** * Measures the distance in pixels between point a * and point b. * @@ -438,7 +478,7 @@ var Reveal = (function(){ */ function linkify() { if( supports3DTransforms && !( 'msPerspective' in document.body.style ) ) { - var nodes = document.querySelectorAll( '.reveal .slides section a:not(.image)' ); + var nodes = document.querySelectorAll( SLIDES_SELECTOR + ' a:not(.image)' ); for( var i = 0, len = nodes.length; i < len; i++ ) { var node = nodes[i]; @@ -452,6 +492,71 @@ var Reveal = (function(){ } /** + * Applies JavaScript-controlled layout rules to the + * presentation. + */ + function layout() { + + if( config.center ) { + + // Select all slides, vertical and horizontal + var slides = toArray( document.querySelectorAll( SLIDES_SELECTOR ) ); + + // Determine the minimum top offset for slides + var minTop = -dom.wrapper.offsetHeight / 2; + + for( var i = 0, len = slides.length; i < len; i++ ) { + var slide = slides[ i ]; + + // Don't bother update invisible slides + if( slide.style.display === 'none' ) { + continue; + } + + // Vertical stacks are not centered since their section + // children will be + if( slide.classList.contains( 'stack' ) ) { + slide.style.top = 0; + } + else { + slide.style.top = Math.max( - ( slide.offsetHeight / 2 ) - 20, minTop ) + 'px'; + } + } + + } + + } + + /** + * Stores the vertical index of a stack so that the same + * vertical slide can be selected when navigating to and + * from the stack. + * + * @param {HTMLElement} stack The vertical stack element + * @param {int} v Index to memorize + */ + function setPreviousVerticalIndex( stack, v ) { + if( stack ) { + stack.setAttribute( 'data-previous-indexv', v || 0 ); + } + } + + /** + * Retrieves the vertical index which was stored using + * #setPreviousVerticalIndex() or 0 if no previous index + * exists. + * + * @param {HTMLElement} stack The vertical stack element + */ + function getPreviousVerticalIndex( stack ) { + if( stack && stack.classList.contains( 'stack' ) ) { + return parseInt( stack.getAttribute( 'data-previous-indexv' ) || 0, 10 ); + } + + return 0; + } + + /** * Displays the overview of slides (quick nav) by * scaling down and arranging all slide elements. * @@ -479,32 +584,40 @@ var Reveal = (function(){ hslide.style.OTransform = htransform; hslide.style.transform = htransform; - if( !hslide.classList.contains( 'stack' ) ) { - // Navigate to this slide on click - hslide.addEventListener( 'click', onOverviewSlideClicked, true ); - } + if( hslide.classList.contains( 'stack' ) ) { - var verticalSlides = hslide.querySelectorAll( 'section' ); + var verticalSlides = hslide.querySelectorAll( 'section' ); - for( var j = 0, len2 = verticalSlides.length; j < len2; j++ ) { - var vslide = verticalSlides[j], - vtransform = 'translate(0%, ' + ( ( j - ( i === indexh ? indexv : 0 ) ) * 105 ) + '%)'; + for( var j = 0, len2 = verticalSlides.length; j < len2; j++ ) { + var verticalIndex = i === indexh ? indexv : getPreviousVerticalIndex( hslide ); - vslide.setAttribute( 'data-index-h', i ); - vslide.setAttribute( 'data-index-v', j ); - vslide.style.display = 'block'; - vslide.style.WebkitTransform = vtransform; - vslide.style.MozTransform = vtransform; - vslide.style.msTransform = vtransform; - vslide.style.OTransform = vtransform; - vslide.style.transform = vtransform; + var vslide = verticalSlides[j], + vtransform = 'translate(0%, ' + ( ( j - verticalIndex ) * 105 ) + '%)'; - // Navigate to this slide on click - vslide.addEventListener( 'click', onOverviewSlideClicked, true ); + vslide.setAttribute( 'data-index-h', i ); + vslide.setAttribute( 'data-index-v', j ); + vslide.style.display = 'block'; + vslide.style.WebkitTransform = vtransform; + vslide.style.MozTransform = vtransform; + vslide.style.msTransform = vtransform; + vslide.style.OTransform = vtransform; + vslide.style.transform = vtransform; + + // Navigate to this slide on click + vslide.addEventListener( 'click', onOverviewSlideClicked, true ); + } + } + else { + + // Navigate to this slide on click + hslide.addEventListener( 'click', onOverviewSlideClicked, true ); + } } + layout(); + } } @@ -521,7 +634,7 @@ var Reveal = (function(){ dom.wrapper.classList.remove( 'overview' ); // Select all slides - var slides = Array.prototype.slice.call( document.querySelectorAll( '.reveal .slides section' ) ); + var slides = toArray( document.querySelectorAll( SLIDES_SELECTOR ) ); for( var i = 0, len = slides.length; i < len; i++ ) { var element = slides[i]; @@ -536,7 +649,7 @@ var Reveal = (function(){ element.removeEventListener( 'click', onOverviewSlideClicked ); } - slide(); + slide( indexh, indexv ); } } @@ -628,11 +741,28 @@ var Reveal = (function(){ * * @param {int} h Horizontal index of the target slide * @param {int} v Vertical index of the target slide + * @param {int} f Optional index of a fragment within the + * target slide to activate */ - function slide( h, v, f) { + function slide( h, v, f ) { // Remember where we were at before previousSlide = currentSlide; + // Query all horizontal slides in the deck + var horizontalSlides = document.querySelectorAll( HORIZONTAL_SLIDES_SELECTOR ); + + // If no vertical index is specified and the upcoming slide is a + // stack, resume at its previous vertical index + if( v === undefined ) { + v = getPreviousVerticalIndex( horizontalSlides[ h ] ); + } + + // If we were on a vertical stack, remember what vertical index + // it was on so we can resume at the same position when returning + if( previousSlide && previousSlide.parentNode && previousSlide.parentNode.classList.contains( 'stack' ) ) { + setPreviousVerticalIndex( previousSlide.parentNode, indexv ); + } + // Remember the state before this slide var stateBefore = state.concat(); @@ -645,29 +775,19 @@ var Reveal = (function(){ // Activate and transition to the new slide indexh = updateSlides( HORIZONTAL_SLIDES_SELECTOR, h === undefined ? indexh : h ); indexv = updateSlides( VERTICAL_SLIDES_SELECTOR, v === undefined ? indexv : v ); - - // Show fragment, if specified - if ( typeof f !== undefined ) { - // Hide all fragments in current slide - while ( previousFragment() ) { - // loop - } - if ( f !== 0 ) { - var fragmentIndex = 0; - while ( indexf < f && nextFragment() ) { - fragmentIndex++; - } - // We cannot trust nextFragment for setting indexf: it can go beyond the max number of fragments available - indexf = fragmentIndex; - } - } else { - indexf = 0; + + // No need to proceed if we're navigating to the same slide as + // we're already on, unless a fragment index is specified + if( indexh === indexhBefore && indexv === indexvBefore && !f ) { + return; } + layout(); + // 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. + // did, we will avoid adding it repeatedly for( var j = 0; j < stateBefore.length; j++ ) { if( stateBefore[j] === state[i] ) { stateBefore.splice( j, 1 ); @@ -686,22 +806,14 @@ var Reveal = (function(){ document.documentElement.classList.remove( stateBefore.pop() ); } - // Update progress if enabled - if( config.progress && dom.progress ) { - dom.progressbar.style.width = ( indexh / ( document.querySelectorAll( HORIZONTAL_SLIDES_SELECTOR ).length - 1 ) ) * window.innerWidth + 'px'; - } - // If the overview is active, re-activate it to update positions if( isOverviewActive() ) { activateOverview(); } - updateControls(); - - updateURL(); - - // Query all horizontal slides in the deck - var horizontalSlides = document.querySelectorAll( HORIZONTAL_SLIDES_SELECTOR ); + // Update the URL hash after a delay since updating it mid-transition + // is likely to cause visual lag + writeURL( 1500 ); // Find the current horizontal slide and any possible vertical slides // within it @@ -711,6 +823,20 @@ var Reveal = (function(){ // Store references to the previous and current slides currentSlide = currentVerticalSlides[ indexv ] || currentHorizontalSlide; + // Show fragment, if specified + if ( typeof f !== undefined ) { + var fragments = currentSlide.querySelectorAll( '.fragment' ); + + toArray( fragments ).forEach( function( fragment, indexf ) { + if( indexf < f ) { + fragment.classList.add( 'visible' ); + } + else { + fragment.classList.remove( 'visible' ); + } + } ); + } + // Dispatch an event if the slide changed if( indexh !== indexhBefore || indexv !== indexvBefore ) { dispatchEvent( 'slidechanged', { @@ -731,6 +857,9 @@ var Reveal = (function(){ if( previousSlide ) { previousSlide.classList.remove( 'present' ); } + + updateControls(); + updateProgress(); } /** @@ -749,7 +878,7 @@ var Reveal = (function(){ function updateSlides( selector, index ) { // Select all slides and convert the NodeList result to // an array - var slides = Array.prototype.slice.call( document.querySelectorAll( selector ) ), + var slides = toArray( document.querySelectorAll( selector ) ), slidesLength = slides.length; if( slidesLength ) { @@ -812,9 +941,9 @@ var Reveal = (function(){ // autoSlide value otherwise use the global configured time var slideAutoSlide = slides[index].getAttribute( 'data-autoslide' ); if( slideAutoSlide ) { - autoSlide = parseInt( slideAutoSlide ); + autoSlide = parseInt( slideAutoSlide, 10 ); } else { - autoSlide = config.autoSlide + autoSlide = config.autoSlide; } } @@ -829,7 +958,54 @@ var Reveal = (function(){ } /** - * Updates the state and link pointers of the controls. + * Updates the progress bar to reflect the current slide. + */ + function updateProgress() { + // Update progress if enabled + if( config.progress && dom.progress ) { + + var horizontalSlides = toArray( document.querySelectorAll( HORIZONTAL_SLIDES_SELECTOR ) ); + + // The number of past and total slides + var totalCount = document.querySelectorAll( SLIDES_SELECTOR + ':not(.stack)' ).length; + var pastCount = 0; + + // Step through all slides and count the past ones + mainLoop: for( var i = 0; i < horizontalSlides.length; i++ ) { + + var horizontalSlide = horizontalSlides[i]; + var verticalSlides = toArray( horizontalSlide.querySelectorAll( 'section' ) ); + + for( var j = 0; j < verticalSlides.length; j++ ) { + + // Stop as soon as we arrive at the present + if( verticalSlides[j].classList.contains( 'present' ) ) { + break mainLoop; + } + + pastCount++; + + } + + // Stop as soon as we arrive at the present + if( horizontalSlide.classList.contains( 'present' ) ) { + break; + } + + // Don't count the wrapping section for vertical slides + if( horizontalSlide.classList.contains( 'stack' ) === false ) { + pastCount++; + } + + } + + dom.progressbar.style.width = ( pastCount / ( totalCount - 1 ) ) * window.innerWidth + 'px'; + + } + } + + /** + * Updates the state of all control/navigation arrows. */ function updateControls() { if ( config.controls && dom.controls ) { @@ -837,15 +1013,23 @@ var Reveal = (function(){ var routes = availableRoutes(); // Remove the 'enabled' class from all directions - [ dom.controlsLeft, dom.controlsRight, dom.controlsUp, dom.controlsDown ].forEach( function( node ) { + dom.controlsLeft.concat( dom.controlsRight ) + .concat( dom.controlsUp ) + .concat( dom.controlsDown ) + .concat( dom.controlsPrev ) + .concat( dom.controlsNext ).forEach( function( node ) { node.classList.remove( 'enabled' ); } ); // Add the 'enabled' class to the available routes - if( routes.left ) dom.controlsLeft.classList.add( 'enabled' ); - if( routes.right ) dom.controlsRight.classList.add( 'enabled' ); - if( routes.up ) dom.controlsUp.classList.add( 'enabled' ); - if( routes.down ) dom.controlsDown.classList.add( 'enabled' ); + if( routes.left ) dom.controlsLeft.forEach( function( el ) { el.classList.add( 'enabled' ); } ); + if( routes.right ) dom.controlsRight.forEach( function( el ) { el.classList.add( 'enabled' ); } ); + if( routes.up ) dom.controlsUp.forEach( function( el ) { el.classList.add( 'enabled' ); } ); + if( routes.down ) dom.controlsDown.forEach( function( el ) { el.classList.add( 'enabled' ); } ); + + // Prev/next buttons + if( routes.left || routes.up ) dom.controlsPrev.forEach( function( el ) { el.classList.add( 'enabled' ); } ); + if( routes.right || routes.down ) dom.controlsNext.forEach( function( el ) { el.classList.add( 'enabled' ); } ); } } @@ -873,11 +1057,9 @@ var Reveal = (function(){ function readURL() { var hash = window.location.hash; - var hashParts = hash.split( '?' ); - // Attempt to parse the hash as either an index or name - var bits = hashParts[0].slice( 2 ).split( '/' ), - name = hashParts[0].replace( /#|\//gi, '' ); + var bits = hash.slice( 2 ).split( '/' ), + name = hash.replace( /#|\//gi, '' ); // If the first bit is invalid and there is a name we can // assume that this is a named link @@ -899,38 +1081,43 @@ var Reveal = (function(){ // Read the index components of the hash var h = parseInt( bits[0], 10 ) || 0, v = parseInt( bits[1], 10 ) || 0; - - var f = 0; - if ( hashParts.length > 1 ) { - f = parseInt( hashParts[1] ); - } - slide( h, v, f ); + slide( h, v ); } } - - function updateURL () { - // Update the URL hash after a delay since updating it mid-transition - // is likely to cause visual lag - clearTimeout( writeURLTimeout ); - writeURLTimeout = setTimeout( writeURL, 1500 ); - } /** * Updates the page URL (hash) to reflect the current * state. + * + * @param {Number} delay The time in ms to wait before + * writing the hash */ - function writeURL() { + function writeURL( delay ) { 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; - if( indexf > 0 ) url += '?' + indexf; + // Make sure there's never more than one timeout running + clearTimeout( writeURLTimeout ); - window.location.hash = url; + // If a delay is specified, timeout this call + if( typeof delay === 'number' ) { + writeURLTimeout = setTimeout( writeURL, delay ); + } + else { + var url = '/'; + + // If the current slide has an ID, use that as a named link + if( currentSlide && typeof currentSlide.getAttribute( 'id' ) === 'string' ) { + url = '/' + currentSlide.getAttribute( 'id' ); + } + // Otherwise use the /h/v index + else { + if( indexh > 0 || indexv > 0 ) url += indexh; + if( indexv > 0 ) url += '/' + indexv; + } + + window.location.hash = url; + } } } @@ -955,14 +1142,14 @@ var Reveal = (function(){ var slideh = isVertical ? slide.parentNode : slide; // Select all horizontal slides - var horizontalSlides = Array.prototype.slice.call( document.querySelectorAll( HORIZONTAL_SLIDES_SELECTOR ) ); + var horizontalSlides = toArray( document.querySelectorAll( HORIZONTAL_SLIDES_SELECTOR ) ); // Now that we know which the horizontal slide is, get its index h = Math.max( horizontalSlides.indexOf( slideh ), 0 ); // If this is a vertical slide, grab the vertical index if( isVertical ) { - v = Math.max( Array.prototype.slice.call( slide.parentNode.children ).indexOf( slide ), 0 ); + v = Math.max( toArray( slide.parentNode.children ).indexOf( slide ), 0 ); } } @@ -977,15 +1164,14 @@ var Reveal = (function(){ */ function nextFragment() { // Vertical slides: - var fragment, - fragmentFound = false; - if( document.querySelector( VERTICAL_SLIDES_SELECTOR + '.present' ) ) { var verticalFragments = document.querySelectorAll( VERTICAL_SLIDES_SELECTOR + '.present .fragment:not(.visible)' ); if( verticalFragments.length ) { verticalFragments[0].classList.add( 'visible' ); - fragment = verticalFragments[0]; - fragmentFound = true; + + // Notify subscribers of the change + dispatchEvent( 'fragmentshown', { fragment: verticalFragments[0] } ); + return true; } } // Horizontal slides: @@ -993,23 +1179,14 @@ var Reveal = (function(){ var horizontalFragments = document.querySelectorAll( HORIZONTAL_SLIDES_SELECTOR + '.present .fragment:not(.visible)' ); if( horizontalFragments.length ) { horizontalFragments[0].classList.add( 'visible' ); - fragment = horizontalFragments[0]; - fragmentFound = true; - } - } - - if ( fragmentFound ) { - indexf++; - - // Notify subscribers of the change - dispatchEvent( 'fragmentshown', { fragment: fragment, index: indexf } ); - updateURL(); - } else { - indexf = 0; + // Notify subscribers of the change + dispatchEvent( 'fragmentshown', { fragment: horizontalFragments[0] } ); + return true; + } } - return fragmentFound; + return false; } /** @@ -1019,16 +1196,15 @@ var Reveal = (function(){ * false otherwise */ function previousFragment() { - var fragment, - fragmentFound = false; - // Vertical slides: if( document.querySelector( VERTICAL_SLIDES_SELECTOR + '.present' ) ) { var verticalFragments = document.querySelectorAll( VERTICAL_SLIDES_SELECTOR + '.present .fragment.visible' ); if( verticalFragments.length ) { verticalFragments[ verticalFragments.length - 1 ].classList.remove( 'visible' ); - fragment = verticalFragments[ verticalFragments.length - 1 ]; - fragmentFound = true; + + // Notify subscribers of the change + dispatchEvent( 'fragmenthidden', { fragment: verticalFragments[ verticalFragments.length - 1 ] } ); + return true; } } // Horizontal slides: @@ -1036,23 +1212,14 @@ var Reveal = (function(){ var horizontalFragments = document.querySelectorAll( HORIZONTAL_SLIDES_SELECTOR + '.present .fragment.visible' ); if( horizontalFragments.length ) { horizontalFragments[ horizontalFragments.length - 1 ].classList.remove( 'visible' ); - fragment = horizontalFragments[ horizontalFragments.length - 1 ]; - fragmentFound = true; - } - } - if ( fragmentFound ) { - indexf--; - - // Notify subscribers of the change - dispatchEvent( 'fragmenthidden', { fragment: fragment, index: indexf } ); - - updateURL(); - } else { - indexf = 0; + // Notify subscribers of the change + dispatchEvent( 'fragmenthidden', { fragment: horizontalFragments[ horizontalFragments.length - 1 ] } ); + return true; + } } - return fragmentFound; + return false; } /** @@ -1069,28 +1236,28 @@ var Reveal = (function(){ function navigateLeft() { // Prioritize hiding fragments - if( availableRoutes().left && ( isOverviewActive() || previousFragment() === false ) ) { - slide( indexh - 1, 0, Number.MAX_VALUE ); + if( availableRoutes().left && isOverviewActive() || previousFragment() === false ) { + slide( indexh - 1 ); } } function navigateRight() { // Prioritize revealing fragments - if( availableRoutes().right && ( isOverviewActive() || nextFragment() === false ) ) { - slide( indexh + 1, 0 ); + if( availableRoutes().right && isOverviewActive() || nextFragment() === false ) { + slide( indexh + 1 ); } } function navigateUp() { // Prioritize hiding fragments - if( availableRoutes().up && ( isOverviewActive() || previousFragment() === false ) ) { + if( availableRoutes().up && isOverviewActive() || previousFragment() === false ) { slide( indexh, indexv - 1 ); } } function navigateDown() { // Prioritize revealing fragments - if( availableRoutes().down && ( isOverviewActive() || nextFragment() === false ) ) { + if( availableRoutes().down && isOverviewActive() || nextFragment() === false ) { slide( indexh, indexv + 1 ); } } @@ -1109,10 +1276,10 @@ var Reveal = (function(){ } else { // Fetch the previous horizontal slide, if there is one - var previousSlide = document.querySelector( '.reveal .slides>section.past:nth-child(' + indexh + ')' ); + var previousSlide = document.querySelector( HORIZONTAL_SLIDES_SELECTOR + '.past:nth-child(' + indexh + ')' ); if( previousSlide ) { - indexv = ( previousSlide.querySelectorAll( 'section' ).length + 1 ) || 0; + indexv = ( previousSlide.querySelectorAll( 'section' ).length + 1 ) || undefined; indexh --; slide(); } @@ -1149,7 +1316,7 @@ var Reveal = (function(){ // Check if there's a focused element that could be using // the keyboard var activeElement = document.activeElement; - var hasFocus = !!( document.activeElement && ( document.activeElement.type || document.activeElement.href || document.activeElement.contentEditable !== 'inherit' ) ); + var hasFocus = !!( document.activeElement && ( document.activeElement.type || document.activeElement.href || document.activeElement.contentEditable !== 'inherit' ) ); // Disregard the event if there's a focused element or a // keyboard modifier key is present @@ -1329,7 +1496,7 @@ var Reveal = (function(){ * ( clickX / presentationWidth ) * numberOfSlides */ function onProgressClick( event ) { - var slidesTotal = Array.prototype.slice.call( document.querySelectorAll( HORIZONTAL_SLIDES_SELECTOR ) ).length; + var slidesTotal = toArray( document.querySelectorAll( HORIZONTAL_SLIDES_SELECTOR ) ).length; var slideIndex = Math.floor( ( event.clientX / dom.wrapper.offsetWidth ) * slidesTotal ); slide( slideIndex ); @@ -1337,14 +1504,19 @@ var Reveal = (function(){ /** * Handler for the window level 'hashchange' event. - * - * @param {Object} event */ function onWindowHashChange( event ) { readURL(); } /** + * Handler for the window level 'resize' event. + */ + function onWindowResize( event ) { + layout(); + } + + /** * Invoked when a slide is and we're in the overview. */ function onOverviewSlideClicked( event ) { @@ -1355,10 +1527,10 @@ var Reveal = (function(){ deactivateOverview(); - indexh = this.getAttribute( 'data-index-h' ); - indexv = this.getAttribute( 'data-index-v' ); + var h = parseInt( event.target.getAttribute( 'data-index-h' ), 10 ), + v = parseInt( event.target.getAttribute( 'data-index-v' ), 10 ); - slide(); + slide( h, v ); } } diff --git a/js/reveal.min.js b/js/reveal.min.js index e31d807..7a15975 100644 --- a/js/reveal.min.js +++ b/js/reveal.min.js @@ -1,83 +1,8 @@ /*! - * reveal.js 2.1 r37 + * reveal.js 2.2 (2012-11-22, 09:09) * http://lab.hakim.se/reveal-js * MIT licensed * * Copyright (C) 2011-2012 Hakim El Hattab, http://hakim.se */ -var Reveal=(function(){var l=".reveal .slides>section",b=".reveal .slides>section.present>section",R={controls:true,progress:true,history:false,keyboard:true,overview:true,loop:false,autoSlide:0,mouseWheel:true,rollingLinks:true,theme:null,transition:"default",dependencies:[]},Y=R.autoSlide,m=0,e=0,y,G,ak=[],f={},T="WebkitPerspective" in document.body.style||"MozPerspective" in document.body.style||"msPerspective" in document.body.style||"OPerspective" in document.body.style||"perspective" in document.body.style,n="WebkitTransform" in document.body.style||"MozTransform" in document.body.style||"msTransform" in document.body.style||"OTransform" in document.body.style||"transform" in document.body.style,z=0,k=0,D=0,ac={startX:0,startY:0,startSpan:0,startCount:0,handled:false,threshold:80}; -function i(al){if((!n&&!T)){document.body.setAttribute("class","no-transforms");return;}t(R,al);d();V();}function P(){f.theme=document.querySelector("#theme"); -f.wrapper=document.querySelector(".reveal");if(!f.wrapper.querySelector(".progress")&&R.progress){var ao=document.createElement("div");ao.classList.add("progress"); -ao.innerHTML="<span></span>";f.wrapper.appendChild(ao);}if(!f.wrapper.querySelector(".controls")&&R.controls){var an=document.createElement("aside");an.classList.add("controls"); -an.innerHTML='<div class="left"></div><div class="right"></div><div class="up"></div><div class="down"></div>';f.wrapper.appendChild(an);}if(!f.wrapper.querySelector(".state-background")){var am=document.createElement("div"); -am.classList.add("state-background");f.wrapper.appendChild(am);}if(!f.wrapper.querySelector(".pause-overlay")){var al=document.createElement("div");al.classList.add("pause-overlay"); -f.wrapper.appendChild(al);}f.progress=document.querySelector(".reveal .progress");f.progressbar=document.querySelector(".reveal .progress span");if(R.controls){f.controls=document.querySelector(".reveal .controls"); -f.controlsLeft=document.querySelector(".reveal .controls .left");f.controlsRight=document.querySelector(".reveal .controls .right");f.controlsUp=document.querySelector(".reveal .controls .up"); -f.controlsDown=document.querySelector(".reveal .controls .down");}}function d(){if(navigator.userAgent.match(/(iphone|ipod|android)/i)){document.documentElement.style.overflow="scroll"; -document.body.style.height="120%";window.addEventListener("load",ad,false);window.addEventListener("orientationchange",ad,false);}}function V(){var am=[],aq=[]; -for(var an=0,al=R.dependencies.length;an<al;an++){var ao=R.dependencies[an];if(!ao.condition||ao.condition()){if(ao.async){aq.push(ao.src);}else{am.push(ao.src); -}if(typeof ao.callback==="function"){head.ready(ao.src.match(/([\w\d_\-]*)\.?[^\\\/]*$/i)[0],ao.callback);}}}function ap(){if(aq.length){head.js.apply(null,aq); -}H();}if(am.length){head.ready(ap);head.js.apply(null,am);}else{ap();}}function H(){P();E();K();J();O();setTimeout(function(){r("ready",{indexh:m,indexv:e,currentSlide:G}); -},1);}function K(){if(T===false){R.transition="linear";}if(R.controls&&f.controls){f.controls.style.display="block";}if(R.progress&&f.progress){f.progress.style.display="block"; -}if(R.transition!=="default"){f.wrapper.classList.add(R.transition);}if(R.mouseWheel){document.addEventListener("DOMMouseScroll",o,false);document.addEventListener("mousewheel",o,false); -}if(R.rollingLinks){N();}if(R.theme&&f.theme){var an=f.theme.getAttribute("href");var al=/[^\/]*?(?=\.css)/;var am=an.match(al)[0];if(R.theme!==am){an=an.replace(al,R.theme); -f.theme.setAttribute("href",an);}}}function E(){document.addEventListener("touchstart",A,false);document.addEventListener("touchmove",af,false);document.addEventListener("touchend",W,false); -window.addEventListener("hashchange",w,false);if(R.keyboard){document.addEventListener("keydown",ah,false);}if(R.progress&&f.progress){f.progress.addEventListener("click",q(ai),false); -}if(R.controls&&f.controls){f.controlsLeft.addEventListener("click",q(B),false);f.controlsRight.addEventListener("click",q(j),false);f.controlsUp.addEventListener("click",q(u),false); -f.controlsDown.addEventListener("click",q(F),false);}}function U(){document.removeEventListener("keydown",ah,false);document.removeEventListener("touchstart",A,false); -document.removeEventListener("touchmove",af,false);document.removeEventListener("touchend",W,false);window.removeEventListener("hashchange",w,false);if(R.progress&&f.progress){f.progress.removeEventListener("click",q(ai),false); -}if(R.controls&&f.controls){f.controlsLeft.removeEventListener("click",q(B),false);f.controlsRight.removeEventListener("click",q(j),false);f.controlsUp.removeEventListener("click",q(u),false); -f.controlsDown.removeEventListener("click",q(F),false);}}function t(am,al){for(var an in al){am[an]=al[an];}}function S(an,al){var ao=an.x-al.x,am=an.y-al.y; -return Math.sqrt(ao*ao+am*am);}function q(al){return function(am){am.preventDefault();al.call(null,am);};}function ad(){setTimeout(function(){window.scrollTo(0,1); -},0);}function r(am,al){var an=document.createEvent("HTMLEvents",1,2);an.initEvent(am,true,true);t(an,al);f.wrapper.dispatchEvent(an);}function N(){if(T&&!("msPerspective" in document.body.style)){var am=document.querySelectorAll(".reveal .slides section a:not(.image)"); -for(var an=0,al=am.length;an<al;an++){var ao=am[an];if(ao.textContent&&!ao.querySelector("img")&&(!ao.className||!ao.classList.contains(ao,"roll"))){ao.classList.add("roll"); -ao.innerHTML='<span data-title="'+ao.text+'">'+ao.innerHTML+"</span>";}}}}function I(){if(R.overview){f.wrapper.classList.add("overview");var al=document.querySelectorAll(l); -for(var aq=0,ao=al.length;aq<ao;aq++){var an=al[aq],av="translateZ(-2500px) translate("+((aq-m)*105)+"%, 0%)";an.setAttribute("data-index-h",aq);an.style.display="block"; -an.style.WebkitTransform=av;an.style.MozTransform=av;an.style.msTransform=av;an.style.OTransform=av;an.style.transform=av;if(!an.classList.contains("stack")){an.addEventListener("click",C,true); -}var au=an.querySelectorAll("section");for(var ap=0,am=au.length;ap<am;ap++){var at=au[ap],ar="translate(0%, "+((ap-(aq===m?e:0))*105)+"%)";at.setAttribute("data-index-h",aq); -at.setAttribute("data-index-v",ap);at.style.display="block";at.style.WebkitTransform=ar;at.style.MozTransform=ar;at.style.msTransform=ar;at.style.OTransform=ar; -at.style.transform=ar;at.addEventListener("click",C,true);}}}}function ae(){if(R.overview){f.wrapper.classList.remove("overview");var ao=Array.prototype.slice.call(document.querySelectorAll(".reveal .slides section")); -for(var an=0,al=ao.length;an<al;an++){var am=ao[an];am.style.WebkitTransform="";am.style.MozTransform="";am.style.msTransform="";am.style.OTransform=""; -am.style.transform="";am.removeEventListener("click",C);}a();}}function X(al){if(typeof al==="boolean"){al?I():ae();}else{L()?ae():I();}}function L(){return f.wrapper.classList.contains("overview"); -}function ab(){var al=document.body;var am=al.requestFullScreen||al.webkitRequestFullScreen||al.mozRequestFullScreen||al.msRequestFullScreen;if(am){am.apply(al); -}}function c(){f.wrapper.classList.add("paused");}function p(){f.wrapper.classList.remove("paused");}function aa(){if(ag()){p();}else{c();}}function ag(){return f.wrapper.classList.contains("paused"); -}function a(ar,aw){y=G;var ao=ak.concat();ak.length=0;var av=m,am=e;m=aj(l,ar===undefined?m:ar);e=aj(b,aw===undefined?e:aw);stateLoop:for(var ap=0,at=ak.length; -ap<at;ap++){for(var an=0;an<ao.length;an++){if(ao[an]===ak[ap]){ao.splice(an,1);continue stateLoop;}}document.documentElement.classList.add(ak[ap]);r(ak[ap]); -}while(ao.length){document.documentElement.classList.remove(ao.pop());}if(R.progress&&f.progress){f.progressbar.style.width=(m/(document.querySelectorAll(l).length-1))*window.innerWidth+"px"; -}if(L()){I();}s();clearTimeout(D);D=setTimeout(h,1500);var al=document.querySelectorAll(l);var au=al[m],aq=au.querySelectorAll("section");G=aq[e]||au;if(m!==av||e!==am){r("slidechanged",{indexh:m,indexv:e,previousSlide:y,currentSlide:G}); -}else{y=null;}if(y){y.classList.remove("present");}}function aj(ao,au){var am=Array.prototype.slice.call(document.querySelectorAll(ao)),at=am.length;if(at){if(R.loop){au%=at; -if(au<0){au=at+au;}}au=Math.max(Math.min(au,at-1),0);for(var aq=0;aq<at;aq++){var ar=am[aq];if(L()===false){var al=Math.abs((au-aq)%(at-3))||0;ar.style.display=al>3?"none":"block"; -}am[aq].classList.remove("past");am[aq].classList.remove("present");am[aq].classList.remove("future");if(aq<au){am[aq].classList.add("past");}else{if(aq>au){am[aq].classList.add("future"); -}}if(ar.querySelector("section")){am[aq].classList.add("stack");}}am[au].classList.add("present");var an=am[au].getAttribute("data-state");if(an){ak=ak.concat(an.split(" ")); -}var ap=am[au].getAttribute("data-autoslide");if(ap){Y=parseInt(ap);}else{Y=R.autoSlide;}}else{au=0;}return au;}function s(){if(R.controls&&f.controls){var al=g(); -[f.controlsLeft,f.controlsRight,f.controlsUp,f.controlsDown].forEach(function(am){am.classList.remove("enabled");});if(al.left){f.controlsLeft.classList.add("enabled"); -}if(al.right){f.controlsRight.classList.add("enabled");}if(al.up){f.controlsUp.classList.add("enabled");}if(al.down){f.controlsDown.classList.add("enabled"); -}}}function g(){var al=document.querySelectorAll(l),am=document.querySelectorAll(b);return{left:m>0,right:m<al.length-1,up:e>0,down:e<am.length-1};}function J(){var aq=window.location.hash; -var ap=aq.slice(2).split("/"),am=aq.replace(/#|\//gi,"");if(isNaN(parseInt(ap[0],10))&&am.length){var an=document.querySelector("#"+am);if(an){var ar=Reveal.getIndices(an); -a(ar.h,ar.v);}else{a(m,e);}}else{var ao=parseInt(ap[0],10)||0,al=parseInt(ap[1],10)||0;a(ao,al);}}function h(){if(R.history){var al="/";if(m>0||e>0){al+=m; -}if(e>0){al+="/"+e;}window.location.hash=al;}}function M(al){var ap=m,an=e;if(al){var aq=!!al.parentNode.nodeName.match(/section/gi);var ao=aq?al.parentNode:al; -var am=Array.prototype.slice.call(document.querySelectorAll(l));ap=Math.max(am.indexOf(ao),0);if(aq){an=Math.max(Array.prototype.slice.call(al.parentNode.children).indexOf(al),0); -}}return{h:ap,v:an};}function v(){if(document.querySelector(b+".present")){var am=document.querySelectorAll(b+".present .fragment:not(.visible)");if(am.length){am[0].classList.add("visible"); -r("fragmentshown",{fragment:am[0]});return true;}}else{var al=document.querySelectorAll(l+".present .fragment:not(.visible)");if(al.length){al[0].classList.add("visible"); -r("fragmentshown",{fragment:al[0]});return true;}}return false;}function Q(){if(document.querySelector(b+".present")){var am=document.querySelectorAll(b+".present .fragment.visible"); -if(am.length){am[am.length-1].classList.remove("visible");r("fragmenthidden",{fragment:am[am.length-1]});return true;}}else{var al=document.querySelectorAll(l+".present .fragment.visible"); -if(al.length){al[al.length-1].classList.remove("visible");r("fragmenthidden",{fragment:al[al.length-1]});return true;}}return false;}function O(){clearTimeout(k); -if(Y){k=setTimeout(x,Y);}}function B(){if(g().left&&(L()||Q()===false)){a(m-1,0);}}function j(){if(g().right&&(L()||v()===false)){a(m+1,0);}}function u(){if(g().up&&(L()||Q()===false)){a(m,e-1); -}}function F(){if(g().down&&(L()||v()===false)){a(m,e+1);}}function Z(){if(Q()===false){if(g().up){u();}else{var al=document.querySelector(".reveal .slides>section.past:nth-child("+m+")"); -if(al){e=(al.querySelectorAll("section").length+1)||0;m--;a();}}}}function x(){if(v()===false){g().down?F():j();}O();}function ah(an){var am=document.activeElement; -var ao=!!(document.activeElement&&(document.activeElement.type||document.activeElement.href||document.activeElement.contentEditable!=="inherit"));if(ao||an.shiftKey||an.altKey||an.ctrlKey||an.metaKey){return; -}var al=true;switch(an.keyCode){case 80:case 33:Z();break;case 78:case 34:x();break;case 72:case 37:B();break;case 76:case 39:j();break;case 75:case 38:u(); -break;case 74:case 40:F();break;case 36:a(0);break;case 35:a(Number.MAX_VALUE);break;case 32:L()?ae():x();break;case 13:L()?ae():al=false;break;case 66:case 190:aa(); -break;case 70:ab();break;default:al=false;}if(al){an.preventDefault();}else{if(an.keyCode===27&&T){X();an.preventDefault();}}O();}function A(al){ac.startX=al.touches[0].clientX; -ac.startY=al.touches[0].clientY;ac.startCount=al.touches.length;if(al.touches.length===2&&R.overview){ac.startSpan=S({x:al.touches[1].clientX,y:al.touches[1].clientY},{x:ac.startX,y:ac.startY}); -}}function af(aq){if(!ac.handled){var ao=aq.touches[0].clientX;var an=aq.touches[0].clientY;if(aq.touches.length===2&&ac.startCount===2&&R.overview){var ap=S({x:aq.touches[1].clientX,y:aq.touches[1].clientY},{x:ac.startX,y:ac.startY}); -if(Math.abs(ac.startSpan-ap)>ac.threshold){ac.handled=true;if(ap<ac.startSpan){I();}else{ae();}}aq.preventDefault();}else{if(aq.touches.length===1&&ac.startCount!==2){var am=ao-ac.startX,al=an-ac.startY; -if(am>ac.threshold&&Math.abs(am)>Math.abs(al)){ac.handled=true;B();}else{if(am<-ac.threshold&&Math.abs(am)>Math.abs(al)){ac.handled=true;j();}else{if(al>ac.threshold){ac.handled=true; -u();}else{if(al<-ac.threshold){ac.handled=true;F();}}}}aq.preventDefault();}}}else{if(navigator.userAgent.match(/android/gi)){aq.preventDefault();}}}function W(al){ac.handled=false; -}function o(al){clearTimeout(z);z=setTimeout(function(){var am=al.detail||-al.wheelDelta;if(am>0){x();}else{Z();}},100);}function ai(am){var al=Array.prototype.slice.call(document.querySelectorAll(l)).length; -var an=Math.floor((am.clientX/f.wrapper.offsetWidth)*al);a(an);}function w(al){J();}function C(al){if(L()){al.preventDefault();ae();m=this.getAttribute("data-index-h"); -e=this.getAttribute("data-index-v");a();}}return{initialize:i,slide:a,left:B,right:j,up:u,down:F,prev:Z,next:x,prevFragment:Q,nextFragment:v,navigateTo:a,navigateLeft:B,navigateRight:j,navigateUp:u,navigateDown:F,navigatePrev:Z,navigateNext:x,toggleOverview:X,addEventListeners:E,removeEventListeners:U,getIndices:M,getPreviousSlide:function(){return y; -},getCurrentSlide:function(){return G;},getQueryHash:function(){var al={};location.search.replace(/[A-Z0-9]+?=(\w*)/gi,function(am){al[am.split("=").shift()]=am.split("=").pop(); -});return al;},addEventListener:function(am,an,al){if("addEventListener" in window){(f.wrapper||document.querySelector(".reveal")).addEventListener(am,an,al); -}},removeEventListener:function(am,an,al){if("addEventListener" in window){(f.wrapper||document.querySelector(".reveal")).removeEventListener(am,an,al); -}}};})();
\ No newline at end of file +var Reveal=function(){"use strict";function g(e){if(!h&&!c){document.body.setAttribute("class","no-transforms");return}N(r,e),b(),w()}function y(){l.theme=document.querySelector("#theme"),l.wrapper=document.querySelector(".reveal"),l.slides=document.querySelector(".reveal .slides");if(!l.wrapper.querySelector(".progress")&&r.progress){var e=document.createElement("div");e.classList.add("progress"),e.innerHTML="<span></span>",l.wrapper.appendChild(e)}if(!l.wrapper.querySelector(".controls")&&r.controls){var t=document.createElement("aside");t.classList.add("controls"),t.innerHTML='<div class="navigate-left"></div><div class="navigate-right"></div><div class="navigate-up"></div><div class="navigate-down"></div>',l.wrapper.appendChild(t)}if(!l.wrapper.querySelector(".state-background")){var n=document.createElement("div");n.classList.add("state-background"),l.wrapper.appendChild(n)}if(!l.wrapper.querySelector(".pause-overlay")){var i=document.createElement("div");i.classList.add("pause-overlay"),l.wrapper.appendChild(i)}l.progress=document.querySelector(".reveal .progress"),l.progressbar=document.querySelector(".reveal .progress span"),r.controls&&(l.controls=document.querySelector(".reveal .controls"),l.controlsLeft=C(document.querySelectorAll(".navigate-left")),l.controlsRight=C(document.querySelectorAll(".navigate-right")),l.controlsUp=C(document.querySelectorAll(".navigate-up")),l.controlsDown=C(document.querySelectorAll(".navigate-down")),l.controlsPrev=C(document.querySelectorAll(".navigate-prev")),l.controlsNext=C(document.querySelectorAll(".navigate-next")))}function b(){navigator.userAgent.match(/(iphone|ipod)/i)&&(document.documentElement.style.overflow="scroll",document.body.style.height="120%",window.addEventListener("load",O,!1),window.addEventListener("orientationchange",O,!1))}function w(){function o(){t.length&&head.js.apply(null,t),E()}var e=[],t=[];for(var n=0,i=r.dependencies.length;n<i;n++){var s=r.dependencies[n];if(!s.condition||s.condition())s.async?t.push(s.src):e.push(s.src),typeof s.callback=="function"&&head.ready(s.src.match(/([\w\d_\-]*)\.?js$|[^\\\/]*$/i)[0],s.callback)}e.length?(head.ready(o),head.js.apply(null,e)):o()}function E(){y(),x(),S(),D(),Q(),tt(),setTimeout(function(){M("ready",{indexh:s,indexv:o,currentSlide:a})},1)}function S(){c===!1&&(r.transition="linear"),r.controls&&l.controls&&(l.controls.style.display="block"),r.progress&&l.progress&&(l.progress.style.display="block"),r.transition!=="default"&&l.wrapper.classList.add(r.transition),r.rtl&&l.wrapper.classList.add("rtl"),r.center&&l.wrapper.classList.add("center"),r.mouseWheel&&(document.addEventListener("DOMMouseScroll",ht,!1),document.addEventListener("mousewheel",ht,!1)),r.rollingLinks&&_();if(r.theme&&l.theme){var e=l.theme.getAttribute("href"),t=/[^\/]*?(?=\.css)/,n=e.match(t)[0];r.theme!==n&&(e=e.replace(t,r.theme),l.theme.setAttribute("href",e))}}function x(){document.addEventListener("touchstart",ft,!1),document.addEventListener("touchmove",lt,!1),document.addEventListener("touchend",ct,!1),window.addEventListener("hashchange",dt,!1),window.addEventListener("resize",vt,!1),r.keyboard&&document.addEventListener("keydown",at,!1),r.progress&&l.progress&&l.progress.addEventListener("click",A(pt),!1),r.controls&&l.controls&&(l.controlsLeft.forEach(function(e){e.addEventListener("click",A(nt),!1)}),l.controlsRight.forEach(function(e){e.addEventListener("click",A(rt),!1)}),l.controlsUp.forEach(function(e){e.addEventListener("click",A(it),!1)}),l.controlsDown.forEach(function(e){e.addEventListener("click",A(st),!1)}),l.controlsPrev.forEach(function(e){e.addEventListener("click",A(ot),!1)}),l.controlsNext.forEach(function(e){e.addEventListener("click",A(ut),!1)}))}function T(){document.removeEventListener("keydown",at,!1),document.removeEventListener("touchstart",ft,!1),document.removeEventListener("touchmove",lt,!1),document.removeEventListener("touchend",ct,!1),window.removeEventListener("hashchange",dt,!1),window.removeEventListener("resize",vt,!1),r.progress&&l.progress&&l.progress.removeEventListener("click",A(pt),!1),r.controls&&l.controls&&(l.controlsLeft.forEach(function(e){e.removeEventListener("click",A(nt),!1)}),l.controlsRight.forEach(function(e){e.removeEventListener("click",A(rt),!1)}),l.controlsUp.forEach(function(e){e.removeEventListener("click",A(it),!1)}),l.controlsDown.forEach(function(e){e.removeEventListener("click",A(st),!1)}),l.controlsPrev.forEach(function(e){e.removeEventListener("click",A(ot),!1)}),l.controlsNext.forEach(function(e){e.removeEventListener("click",A(ut),!1)}))}function N(e,t){for(var n in t)e[n]=t[n]}function C(e){return Array.prototype.slice.call(e)}function k(e,t,n){e.forEach(function(e){e[t].apply(e,n)})}function L(e,t){var n=e.x-t.x,r=e.y-t.y;return Math.sqrt(n*n+r*r)}function A(e){return function(t){t.preventDefault(),e.call(null,t)}}function O(){setTimeout(function(){window.scrollTo(0,1)},0)}function M(e,t){var n=document.createEvent("HTMLEvents",1,2);n.initEvent(e,!0,!0),N(n,t),l.wrapper.dispatchEvent(n)}function _(){if(c&&!("msPerspective"in document.body.style)){var t=document.querySelectorAll(e+" a:not(.image)");for(var n=0,r=t.length;n<r;n++){var i=t[n];i.textContent&&!i.querySelector("img")&&(!i.className||!i.classList.contains(i,"roll"))&&(i.classList.add("roll"),i.innerHTML='<span data-title="'+i.text+'">'+i.innerHTML+"</span>")}}}function D(){if(r.center){var t=C(document.querySelectorAll(e)),n=-l.wrapper.offsetHeight/2;for(var i=0,s=t.length;i<s;i++){var o=t[i];if(o.style.display==="none")continue;o.classList.contains("stack")?o.style.top=0:o.style.top=Math.max(-(o.offsetHeight/2)-20,n)+"px"}}}function P(e,t){e&&e.setAttribute("data-previous-indexv",t||0)}function H(e){return e&&e.classList.contains("stack")?parseInt(e.getAttribute("data-previous-indexv")||0,10):0}function B(){if(r.overview){l.wrapper.classList.add("overview");var e=document.querySelectorAll(t);for(var n=0,i=e.length;n<i;n++){var u=e[n],a="translateZ(-2500px) translate("+(n-s)*105+"%, 0%)";u.setAttribute("data-index-h",n),u.style.display="block",u.style.WebkitTransform=a,u.style.MozTransform=a,u.style.msTransform=a,u.style.OTransform=a,u.style.transform=a;if(u.classList.contains("stack")){var f=u.querySelectorAll("section");for(var c=0,h=f.length;c<h;c++){var p=n===s?o:H(u),d=f[c],v="translate(0%, "+(c-p)*105+"%)";d.setAttribute("data-index-h",n),d.setAttribute("data-index-v",c),d.style.display="block",d.style.WebkitTransform=v,d.style.MozTransform=v,d.style.msTransform=v,d.style.OTransform=v,d.style.transform=v,d.addEventListener("click",mt,!0)}}else u.addEventListener("click",mt,!0)}D()}}function j(){if(r.overview){l.wrapper.classList.remove("overview");var t=C(document.querySelectorAll(e));for(var n=0,i=t.length;n<i;n++){var u=t[n];u.style.WebkitTransform="",u.style.MozTransform="",u.style.msTransform="",u.style.OTransform="",u.style.transform="",u.removeEventListener("click",mt)}X(s,o)}}function F(e){typeof e=="boolean"?e?B():j():I()?j():B()}function I(){return l.wrapper.classList.contains("overview")}function q(){var e=document.body,t=e.requestFullScreen||e.webkitRequestFullScreen||e.mozRequestFullScreen||e.msRequestFullScreen;t&&t.apply(e)}function R(){l.wrapper.classList.add("paused")}function U(){l.wrapper.classList.remove("paused")}function z(){W()?U():R()}function W(){return l.wrapper.classList.contains("paused")}function X(e,r,i){u=a;var l=document.querySelectorAll(t);r===undefined&&(r=H(l[e])),u&&u.parentNode&&u.parentNode.classList.contains("stack")&&P(u.parentNode,o);var c=f.concat();f.length=0;var h=s,p=o;s=V(t,e===undefined?s:e),o=V(n,r===undefined?o:r);if(s===h&&o===p&&!i)return;D();e:for(var d=0,v=f.length;d<v;d++){for(var m=0;m<c.length;m++)if(c[m]===f[d]){c.splice(m,1);continue e}document.documentElement.classList.add(f[d]),M(f[d])}while(c.length)document.documentElement.classList.remove(c.pop());I()&&B(),G(1500);var g=l[s],y=g.querySelectorAll("section");a=y[o]||g;if(typeof i!==undefined){var b=a.querySelectorAll(".fragment");C(b).forEach(function(e,t){t<i?e.classList.add("visible"):e.classList.remove("visible")})}s!==h||o!==p?M("slidechanged",{indexh:s,indexv:o,previousSlide:u,currentSlide:a}):u=null,u&&u.classList.remove("present"),J(),$()}function V(e,t){var n=C(document.querySelectorAll(e)),s=n.length;if(s){r.loop&&(t%=s,t<0&&(t=s+t)),t=Math.max(Math.min(t,s-1),0);for(var o=0;o<s;o++){var u=n[o];if(I()===!1){var a=Math.abs((t-o)%(s-3))||0;u.style.display=a>3?"none":"block"}n[o].classList.remove("past"),n[o].classList.remove("present"),n[o].classList.remove("future"),o<t?n[o].classList.add("past"):o>t&&n[o].classList.add("future"),u.querySelector("section")&&n[o].classList.add("stack")}n[t].classList.add("present");var l=n[t].getAttribute("data-state");l&&(f=f.concat(l.split(" ")));var c=n[t].getAttribute("data-autoslide");c?i=parseInt(c,10):i=r.autoSlide}else t=0;return t}function $(){if(r.progress&&l.progress){var n=C(document.querySelectorAll(t)),i=document.querySelectorAll(e+":not(.stack)").length,s=0;e:for(var o=0;o<n.length;o++){var u=n[o],a=C(u.querySelectorAll("section"));for(var f=0;f<a.length;f++){if(a[f].classList.contains("present"))break e;s++}if(u.classList.contains("present"))break;u.classList.contains("stack")===!1&&s++}l.progressbar.style.width=s/(i-1)*window.innerWidth+"px"}}function J(){if(r.controls&&l.controls){var e=K();l.controlsLeft.concat(l.controlsRight).concat(l.controlsUp).concat(l.controlsDown).concat(l.controlsPrev).concat(l.controlsNext).forEach(function(e){e.classList.remove("enabled")}),e.left&&l.controlsLeft.forEach(function(e){e.classList.add("enabled")}),e.right&&l.controlsRight.forEach(function(e){e.classList.add("enabled")}),e.up&&l.controlsUp.forEach(function(e){e.classList.add("enabled")}),e.down&&l.controlsDown.forEach(function(e){e.classList.add("enabled")}),(e.left||e.up)&&l.controlsPrev.forEach(function(e){e.classList.add("enabled")}),(e.right||e.down)&&l.controlsNext.forEach(function(e){e.classList.add("enabled")})}}function K(){var e=document.querySelectorAll(t),r=document.querySelectorAll(n);return{left:s>0,right:s<e.length-1,up:o>0,down:o<r.length-1}}function Q(){var e=window.location.hash,t=e.slice(2).split("/"),n=e.replace(/#|\//gi,"");if(isNaN(parseInt(t[0],10))&&n.length){var r=document.querySelector("#"+n);if(r){var i=Reveal.getIndices(r);X(i.h,i.v)}else X(s,o)}else{var u=parseInt(t[0],10)||0,a=parseInt(t[1],10)||0;X(u,a)}}function G(e){if(r.history){clearTimeout(v);if(typeof e=="number")v=setTimeout(G,e);else{var t="/";if(a&&typeof a.getAttribute("id")=="string")t="/"+a.getAttribute("id");else{if(s>0||o>0)t+=s;o>0&&(t+="/"+o)}window.location.hash=t}}}function Y(e){var n=s,r=o;if(e){var i=!!e.parentNode.nodeName.match(/section/gi),u=i?e.parentNode:e,a=C(document.querySelectorAll(t));n=Math.max(a.indexOf(u),0),i&&(r=Math.max(C(e.parentNode.children).indexOf(e),0))}return{h:n,v:r}}function Z(){if(document.querySelector(n+".present")){var e=document.querySelectorAll(n+".present .fragment:not(.visible)");if(e.length)return e[0].classList.add("visible"),M("fragmentshown",{fragment:e[0]}),!0}else{var r=document.querySelectorAll(t+".present .fragment:not(.visible)");if(r.length)return r[0].classList.add("visible"),M("fragmentshown",{fragment:r[0]}),!0}return!1}function et(){if(document.querySelector(n+".present")){var e=document.querySelectorAll(n+".present .fragment.visible");if(e.length)return e[e.length-1].classList.remove("visible"),M("fragmenthidden",{fragment:e[e.length-1]}),!0}else{var r=document.querySelectorAll(t+".present .fragment.visible");if(r.length)return r[r.length-1].classList.remove("visible"),M("fragmenthidden",{fragment:r[r.length-1]}),!0}return!1}function tt(){clearTimeout(d),i&&(d=setTimeout(ut,i))}function nt(){(K().left&&I()||et()===!1)&&X(s-1)}function rt(){(K().right&&I()||Z()===!1)&&X(s+1)}function it(){(K().up&&I()||et()===!1)&&X(s,o-1)}function st(){(K().down&&I()||Z()===!1)&&X(s,o+1)}function ot(){if(et()===!1)if(K().up)it();else{var e=document.querySelector(t+".past:nth-child("+s+")");e&&(o=e.querySelectorAll("section").length+1||undefined,s--,X())}}function ut(){Z()===!1&&(K().down?st():rt()),tt()}function at(e){var t=document.activeElement,n=!(!document.activeElement||!document.activeElement.type&&!document.activeElement.href&&document.activeElement.contentEditable==="inherit");if(n||e.shiftKey||e.altKey||e.ctrlKey||e.metaKey)return;var r=!0;switch(e.keyCode){case 80:case 33:ot();break;case 78:case 34:ut();break;case 72:case 37:nt();break;case 76:case 39:rt();break;case 75:case 38:it();break;case 74:case 40:st();break;case 36:X(0);break;case 35:X(Number.MAX_VALUE);break;case 32:I()?j():ut();break;case 13:I()?j():r=!1;break;case 66:case 190:z();break;case 70:q();break;default:r=!1}r?e.preventDefault():e.keyCode===27&&c&&(F(),e.preventDefault()),tt()}function ft(e){m.startX=e.touches[0].clientX,m.startY=e.touches[0].clientY,m.startCount=e.touches.length,e.touches.length===2&&r.overview&&(m.startSpan=L({x:e.touches[1].clientX,y:e.touches[1].clientY},{x:m.startX,y:m.startY}))}function lt(e){if(!m.handled){var t=e.touches[0].clientX,n=e.touches[0].clientY;if(e.touches.length===2&&m.startCount===2&&r.overview){var i=L({x:e.touches[1].clientX,y:e.touches[1].clientY},{x:m.startX,y:m.startY});Math.abs(m.startSpan-i)>m.threshold&&(m.handled=!0,i<m.startSpan?B():j()),e.preventDefault()}else if(e.touches.length===1&&m.startCount!==2){var s=t-m.startX,o=n-m.startY;s>m.threshold&&Math.abs(s)>Math.abs(o)?(m.handled=!0,nt()):s<-m.threshold&&Math.abs(s)>Math.abs(o)?(m.handled=!0,rt()):o>m.threshold?(m.handled=!0,it()):o<-m.threshold&&(m.handled=!0,st()),e.preventDefault()}}else navigator.userAgent.match(/android/gi)&&e.preventDefault()}function ct(e){m.handled=!1}function ht(e){clearTimeout(p),p=setTimeout(function(){var t=e.detail||-e.wheelDelta;t>0?ut():ot()},100)}function pt(e){var n=C(document.querySelectorAll(t)).length,r=Math.floor(e.clientX/l.wrapper.offsetWidth*n);X(r)}function dt(e){Q()}function vt(e){D()}function mt(e){if(I()){e.preventDefault(),j();var t=parseInt(e.target.getAttribute("data-index-h"),10),n=parseInt(e.target.getAttribute("data-index-v"),10);X(t,n)}}var e=".reveal .slides section",t=".reveal .slides>section",n=".reveal .slides>section.present>section",r={controls:!0,progress:!0,history:!1,keyboard:!0,overview:!0,center:!0,loop:!1,rtl:!1,autoSlide:0,mouseWheel:!1,rollingLinks:!0,theme:null,transition:"default",dependencies:[]},i=r.autoSlide,s=0,o=0,u,a,f=[],l={},c="WebkitPerspective"in document.body.style||"MozPerspective"in document.body.style||"msPerspective"in document.body.style||"OPerspective"in document.body.style||"perspective"in document.body.style,h="WebkitTransform"in document.body.style||"MozTransform"in document.body.style||"msTransform"in document.body.style||"OTransform"in document.body.style||"transform"in document.body.style,p=0,d=0,v=0,m={startX:0,startY:0,startSpan:0,startCount:0,handled:!1,threshold:80};return{initialize:g,slide:X,left:nt,right:rt,up:it,down:st,prev:ot,next:ut,prevFragment:et,nextFragment:Z,navigateTo:X,navigateLeft:nt,navigateRight:rt,navigateUp:it,navigateDown:st,navigatePrev:ot,navigateNext:ut,toggleOverview:F,addEventListeners:x,removeEventListeners:T,getIndices:Y,getPreviousSlide:function(){return u},getCurrentSlide:function(){return a},getQueryHash:function(){var e={};return location.search.replace(/[A-Z0-9]+?=(\w*)/gi,function(t){e[t.split("=").shift()]=t.split("=").pop()}),e},addEventListener:function(e,t,n){"addEventListener"in window&&(l.wrapper||document.querySelector(".reveal")).addEventListener(e,t,n)},removeEventListener:function(e,t,n){"addEventListener"in window&&(l.wrapper||document.querySelector(".reveal")).removeEventListener(e,t,n)}}}();
\ No newline at end of file diff --git a/package.json b/package.json index ea6045a..44289a2 100644 --- a/package.json +++ b/package.json @@ -1,8 +1,13 @@ { - "author": "Hakim El Hattab", "name": "reveal.js", - "description": "HTML5 Slideware with Presenter Notes", - "version": "1.5.0", + "version": "2.2.0", + "description": "The HTML Presentation Framework", + "homepage": "http://lab.hakim.se/reveal-js", + "author": { + "name": "Hakim El Hattab", + "email": "hakim.elhattab@gmail.com", + "web": "http://hakim.se" + }, "repository": { "type": "git", "url": "git://github.com/hakimel/reveal.js.git" @@ -16,5 +21,7 @@ "socket.io" : "~0.9.6", "mustache" : "~0.4.0" }, - "devDependencies": {} + "devDependencies": { + "grunt-contrib-mincss": "~0.3.1" + } } diff --git a/plugin/markdown/markdown.js b/plugin/markdown/markdown.js index 07ffd80..b1660a1 100644 --- a/plugin/markdown/markdown.js +++ b/plugin/markdown/markdown.js @@ -10,6 +10,7 @@ for( var i = 0, len = sections.length; i < len; i++ ) { var section = sections[i]; + var notes = section.querySelector( 'aside.notes' ); var template = section.querySelector( 'script' ); @@ -27,6 +28,10 @@ } section.innerHTML = (new Showdown.converter()).makeHtml(text); + + if( notes ) { + section.appendChild( notes ); + } } })();
\ No newline at end of file diff --git a/plugin/notes/notes.html b/plugin/notes/notes.html index 8763056..64b921c 100644 --- a/plugin/notes/notes.html +++ b/plugin/notes/notes.html @@ -119,10 +119,6 @@ } } - // Update the note slides - currentSlide.contentWindow.Reveal.slide( data.indexh, data.indexv ); - nextSlide.contentWindow.Reveal.slide( data.nextindexh, data.nextindexv ); - // Showing and hiding fragments if( data.fragment === 'next' ) { currentSlide.contentWindow.Reveal.nextFragment(); @@ -130,6 +126,11 @@ else if( data.fragment === 'prev' ) { currentSlide.contentWindow.Reveal.prevFragment(); } + else { + // Update the note slides + currentSlide.contentWindow.Reveal.slide( data.indexh, data.indexv ); + nextSlide.contentWindow.Reveal.slide( data.nextindexh, data.nextindexv ); + } }, false ); diff --git a/plugin/postmessage/example.html b/plugin/postmessage/example.html new file mode 100644 index 0000000..cc57a7b --- /dev/null +++ b/plugin/postmessage/example.html @@ -0,0 +1,39 @@ +<html> + <body> + + <iframe id="reveal" src="../../index.html" style="border: 0;" width="500" height="500"></iframe> + + <div> + <input id="back" type="button" value="go back"/> + <input id="ahead" type="button" value="go ahead"/> + <input id="slideto" type="button" value="slideto 2-2"/> + </div> + + <script> + + (function (){ + + var back = document.getElementById( 'back' ), + ahead = document.getElementById( 'ahead' ), + slideto = document.getElementById( 'slideto' ), + reveal = window.frames[0]; + + back.addEventListener( 'click', function () { + + reveal.postMessage( JSON.stringify({method: 'prev', args: []}), '*' ); + }, false ); + + ahead.addEventListener( 'click', function (){ + reveal.postMessage( JSON.stringify({method: 'next', args: []}), '*' ); + }, false ); + + slideto.addEventListener( 'click', function (){ + reveal.postMessage( JSON.stringify({method: 'slide', args: [2,2]}), '*' ); + }, false ); + + }()); + + </script> + + </body> +</html> diff --git a/plugin/postmessage/postmessage.js b/plugin/postmessage/postmessage.js new file mode 100644 index 0000000..d0f4140 --- /dev/null +++ b/plugin/postmessage/postmessage.js @@ -0,0 +1,42 @@ +/* + + simple postmessage plugin + + Useful when a reveal slideshow is inside an iframe. + It allows to call reveal methods from outside. + + Example: + var reveal = window.frames[0]; + + // Reveal.prev(); + reveal.postMessage(JSON.stringify({method: 'prev', args: []}), '*'); + // Reveal.next(); + reveal.postMessage(JSON.stringify({method: 'next', args: []}), '*'); + // Reveal.slide(2, 2); + reveal.postMessage(JSON.stringify({method: 'slide', args: [2,2]}), '*'); + + Add to the slideshow: + + dependencies: [ + ... + { src: 'plugin/postmessage/postmessage.js', async: true, condition: function() { return !!document.body.classList; } } + ] + +*/ + +(function (){ + + window.addEventListener( "message", function ( event ) { + var data = JSON.parse( event.data ), + method = data.method, + args = data.args; + + if( typeof Reveal[method] === 'function' ) { + Reveal[method].apply( Reveal, data.args ); + } + }, false); + +}()); + + + diff --git a/plugin/remotes/remotes.js b/plugin/remotes/remotes.js new file mode 100644 index 0000000..a739bb2 --- /dev/null +++ b/plugin/remotes/remotes.js @@ -0,0 +1,19 @@ +/** + * Touch-based remote controller for your presentation courtesy + * of the folks at http://remotes.io + */ + +head.ready( 'remotes.ne.min.js', function() { + + new Remotes("preview") + .on("swipe-left", function(e){ Reveal.right(); }) + .on("swipe-right", function(e){ Reveal.left(); }) + .on("swipe-up", function(e){ Reveal.down(); }) + .on("swipe-down", function(e){ Reveal.up(); }) + .on("tap", function(e){ + Reveal.toggleOverview(); + }); + +} ); + +head.js( 'https://raw.github.com/Remotes/Remotes/master/dist/remotes.ne.min.js' );
\ No newline at end of file |