jan/revproxy-presentation
1
0
Fork 0
Code Issues Pull requests Releases Wiki Activity

Merge remote-tracking branch 'upstream/master'

Browse source
This commit is contained in:
Chris Lawrence 2013-06-21 17:57:09 -04:00
commit 7b119763f8
17 changed files with 990 additions and 175 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

160
README.md
View file

@ -106,6 +106,9 @@ Reveal.initialize({
// Transition speed // Transition speed
transitionSpeed: 'default', // default/fast/slow transitionSpeed: 'default', // default/fast/slow
// Transition style for full page backgrounds
backgroundTransition: 'default' // default/linear
}); });
``` ```
@ -123,34 +126,6 @@ Reveal.configure({ autoSlide: 5000 });
``` ```
### Presentation Size
All presentations have a normal size, that is the resolution at which they are authored. The framework will automatically scale presentations uniformly based on this size to ensure that everything fits on any given display or viewport.
See below for a list of configuration options related to sizing, including default values:
```javascript
Reveal.initialize({
...
// The "normal" size of the presentation, aspect ratio will be preserved
// when the presentation is scaled to fit different resolutions. Can be
// specified using percentage units.
width: 960,
height: 700,
// Factor of the display size that should remain empty around the content
margin: 0.1,
// Bounds for smallest/largest possible scale to apply to content
minScale: 0.2,
maxScale: 1.0
});
```
### Dependencies ### 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: 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:
@ -187,9 +162,51 @@ You can add your own extensions using the same syntax. The following properties
- **condition**: [optional] Function which must return true for the script to be loaded - **condition**: [optional] Function which must return true for the script to be loaded
### Presentation Size
All presentations have a normal size, that is the resolution at which they are authored. The framework will automatically scale presentations uniformly based on this size to ensure that everything fits on any given display or viewport.
See below for a list of configuration options related to sizing, including default values:
```javascript
Reveal.initialize({
...
// The "normal" size of the presentation, aspect ratio will be preserved
// when the presentation is scaled to fit different resolutions. Can be
// specified using percentage units.
width: 960,
height: 700,
// Factor of the display size that should remain empty around the content
margin: 0.1,
// Bounds for smallest/largest possible scale to apply to content
minScale: 0.2,
maxScale: 1.0
});
```
### Keyboard Bindings
If you're unhappy with any of the default keyboard bindings you can override them using the ```keyboard``` config option:
```javascript
Reveal.configure({
keyboard: {
13: 'next', // go to the next slide when the ENTER key is pressed
27: function() {}, // do something custom when ESC is pressed
32: null // don't do anything when SPACE is pressed (i.e. disable a reveal.js default binding)
}
});
```
### API ### API
The ``Reveal`` class provides a minimal JavaScript API for controlling navigation and reading state: The ``Reveal`` class provides a JavaScript API for controlling navigation and reading state:
```javascript ```javascript
// Navigation // Navigation
@ -203,14 +220,44 @@ Reveal.next();
Reveal.prevFragment(); Reveal.prevFragment();
Reveal.nextFragment(); Reveal.nextFragment();
Reveal.toggleOverview(); Reveal.toggleOverview();
Reveal.togglePause();
// Retrieves the previous and current slide elements // Retrieves the previous and current slide elements
Reveal.getPreviousSlide(); Reveal.getPreviousSlide();
Reveal.getCurrentSlide(); Reveal.getCurrentSlide();
Reveal.getIndices(); // { h: 0, v: 0 } } Reveal.getIndices(); // { h: 0, v: 0 } }
// State checks
Reveal.isFirstSlide();
Reveal.isLastSlide();
Reveal.isOverview();
Reveal.isPaused();
``` ```
### Ready Event
The 'ready' event is fired when reveal.js has loaded all (synchronous) dependencies and is ready to start navigating.
```javascript
Reveal.addEventListener( 'ready', function( event ) {
// event.currentSlide, event.indexh, event.indexv
} );
```
### Slide Changed 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
} );
```
### States ### States
If you set ``data-state="somestate"`` on a slide ``<section>``, "somestate" will be applied as a class on the document element when that slide is opened. This allows you to apply broad style changes to the page based on the active slide. If you set ``data-state="somestate"`` on a slide ``<section>``, "somestate" will be applied as a class on the document element when that slide is opened. This allows you to apply broad style changes to the page based on the active slide.
@ -223,28 +270,41 @@ Reveal.addEventListener( 'somestate', function() {
}, false ); }, false );
``` ```
### Ready event ### Slide Backgrounds
The 'ready' event is fired when reveal.js has loaded all (synchronous) dependencies and is ready to start navigating. Slides are contained within a limited portion of the screen by default to allow them to fit any display and scale uniformly. You can apply full page background colors or images by applying a ```data-background``` attribute to your ```<section>``` elements. Below are a few examples.
```javascript ```html
Reveal.addEventListener( 'ready', function( event ) { <section data-background="#ff0000">
// event.currentSlide, event.indexh, event.indexv <h2>All CSS color formats are supported, like rgba() or hsl().</h2>
} ); </section>
<section data-background="http://example.com/image.png">
<h2>This slide will have a full-size background image.</h2>
</section>
<section data-background="http://example.com/image.png" data-background-size="100px" data-background-repeat="repeat">
<h2>This background image will be sized to 100px and repeated.</h2>
</section>
``` ```
### Slide change event Backgrounds transition using a fade animation by default. This can be changed to a linear sliding transition by passing ```backgroundTransition: 'slide'``` to the ```Reveal.initialize()``` call. Alternatively you can set ```data-background-transition``` on any section with a background to override that specific transition.
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. ### Slide Transitions
The global presentation transition is set using the ```transition``` config value. You can override the global transition for a specific slide by using the ```data-transition``` attribute:
```javascript ```html
Reveal.addEventListener( 'slidechanged', function( event ) { <section data-transition="zoom">
// event.previousSlide, event.currentSlide, event.indexh, event.indexv <h2>This slide will override the presentation transition and zoom!</h2>
} ); </section>
<section data-transition-speed="fast">
<h2>Choose from three transition speeds: default, fast or slow!</h2>
</section>
``` ```
Note that this does not work with the page and cube transitions.
### Internal links ### Internal links
It's easy to link between slides. The first example below targets the index of another slide whereas the second targets a slide with an ID attribute (```<section id="some-slide">```): It's easy to link between slides. The first example below targets the index of another slide whereas the second targets a slide with an ID attribute (```<section id="some-slide">```):
@ -265,21 +325,6 @@ You can also add relative navigation links, similar to the built in reveal.js co
<a href="#" class="navigate-next"> <!-- Next vertical or horizontal slide --> <a href="#" class="navigate-next"> <!-- Next vertical or horizontal slide -->
``` ```
### Alternating transitions
The global presentation transition is set using the ```transition``` config value. You can override the global transition for a specific slide by using the ```data-transition``` attribute:
```html
<section data-transition="zoom">
<h2>This slide will override the presentation transition and zoom!</h2>
</section>
<section data-transition-speed="fast">
<h2>Choose from three transition speeds: default, fast or slow!</h2>
</section>
```
Note that this does not work with the page and cube transitions.
### Fragments ### Fragments
Fragments are used to highlight individual elements on a slide. Every element with the class ```fragment``` will be stepped through before moving on to the next slide. Here's an example: http://lab.hakim.se/reveal-js/#/16 Fragments are used to highlight individual elements on a slide. Every element with the class ```fragment``` will be stepped through before moving on to the next slide. Here's an example: http://lab.hakim.se/reveal-js/#/16
@ -631,4 +676,3 @@ $ grunt serve
MIT licensed MIT licensed
Copyright (C) 2013 Hakim El Hattab, http://hakim.se Copyright (C) 2013 Hakim El Hattab, http://hakim.se

42
css/print/pdf.css
View file

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

250
css/reveal.css
View file

@ -171,6 +171,13 @@ body {
opacity: 0; opacity: 0;
} }
.reveal .slides section .fragment.semi-fade-out {
opacity: 1;
}
.reveal .slides section .fragment.semi-fade-out.visible {
opacity: 0.5;
}
.reveal .slides section .fragment.highlight-red, .reveal .slides section .fragment.highlight-red,
.reveal .slides section .fragment.highlight-green, .reveal .slides section .fragment.highlight-green,
.reveal .slides section .fragment.highlight-blue { .reveal .slides section .fragment.highlight-blue {
@ -544,6 +551,8 @@ body {
position: relative; position: relative;
width: 100%; width: 100%;
height: 100%; height: 100%;
-ms-touch-action: none;
} }
.reveal .slides { .reveal .slides {
@ -1243,17 +1252,18 @@ body {
left: 0; left: 0;
} }
.no-transition { .reveal .no-transition,
-webkit-transition: none; .reveal .no-transition * {
-moz-transition: none; -webkit-transition: none !important;
-ms-transition: none; -moz-transition: none !important;
-o-transition: none; -ms-transition: none !important;
transition: none; -o-transition: none !important;
transition: none !important;
} }
/********************************************* /*********************************************
* BACKGROUND STATES * BACKGROUND STATES [DEPRECATED]
*********************************************/ *********************************************/
.reveal .state-background { .reveal .state-background {
@ -1297,6 +1307,109 @@ body {
} }
/*********************************************
* PER-SLIDE BACKGROUNDS
*********************************************/
.reveal>.backgrounds {
position: absolute;
width: 100%;
height: 100%;
}
.reveal .slide-background {
position: absolute;
width: 100%;
height: 100%;
opacity: 0;
visibility: hidden;
background-color: rgba( 0, 0, 0, 0 );
background-position: 50% 50%;
background-repeat: no-repeat;
background-size: cover;
-webkit-transition: all 600ms cubic-bezier(0.260, 0.860, 0.440, 0.985);
-moz-transition: all 600ms cubic-bezier(0.260, 0.860, 0.440, 0.985);
-ms-transition: all 600ms cubic-bezier(0.260, 0.860, 0.440, 0.985);
-o-transition: all 600ms cubic-bezier(0.260, 0.860, 0.440, 0.985);
transition: all 600ms cubic-bezier(0.260, 0.860, 0.440, 0.985);
}
.reveal .slide-background.present {
opacity: 1;
visibility: visible;
}
.print-pdf .reveal .slide-background {
opacity: 1 !important;
visibility: visible !important;
}
/* Linear sliding transition style */
.reveal[data-background-transition=slide]>.backgrounds .slide-background,
.reveal>.backgrounds .slide-background[data-background-transition=slide] {
opacity: 1;
-webkit-backface-visibility: hidden;
-moz-backface-visibility: hidden;
-ms-backface-visibility: hidden;
backface-visibility: hidden;
-webkit-transition-duration: 800ms;
-moz-transition-duration: 800ms;
-ms-transition-duration: 800ms;
-o-transition-duration: 800ms;
transition-duration: 800ms;
}
.reveal[data-background-transition=slide]>.backgrounds .slide-background.past,
.reveal>.backgrounds .slide-background.past[data-background-transition=slide] {
-webkit-transform: translate(-100%, 0);
-moz-transform: translate(-100%, 0);
-ms-transform: translate(-100%, 0);
-o-transform: translate(-100%, 0);
transform: translate(-100%, 0);
}
.reveal[data-background-transition=slide]>.backgrounds .slide-background.future,
.reveal>.backgrounds .slide-background.future[data-background-transition=slide] {
-webkit-transform: translate(100%, 0);
-moz-transform: translate(100%, 0);
-ms-transform: translate(100%, 0);
-o-transform: translate(100%, 0);
transform: translate(100%, 0);
}
.reveal[data-background-transition=slide]>.backgrounds .slide-background>.slide-background.past,
.reveal>.backgrounds .slide-background>.slide-background.past[data-background-transition=slide] {
-webkit-transform: translate(0, -100%);
-moz-transform: translate(0, -100%);
-ms-transform: translate(0, -100%);
-o-transform: translate(0, -100%);
transform: translate(0, -100%);
}
.reveal[data-background-transition=slide]>.backgrounds .slide-background>.slide-background.future,
.reveal>.backgrounds .slide-background>.slide-background.future[data-background-transition=slide] {
-webkit-transform: translate(0, 100%);
-moz-transform: translate(0, 100%);
-ms-transform: translate(0, 100%);
-o-transform: translate(0, 100%);
transform: translate(0, 100%);
}
/* Global transition speed settings */
.reveal[data-transition-speed="fast"]>.backgrounds .slide-background {
-webkit-transition-duration: 400ms;
-moz-transition-duration: 400ms;
-ms-transition-duration: 400ms;
transition-duration: 400ms;
}
.reveal[data-transition-speed="slow"]>.backgrounds .slide-background {
-webkit-transition-duration: 1200ms;
-moz-transition-duration: 1200ms;
-ms-transition-duration: 1200ms;
transition-duration: 1200ms;
}
/********************************************* /*********************************************
* RTL SUPPORT * RTL SUPPORT
*********************************************/ *********************************************/
@ -1327,6 +1440,129 @@ body {
} }
/*********************************************
* LINK PREVIEW OVERLAY
*********************************************/
.reveal .preview-link-overlay {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 1000;
background: rgba( 0, 0, 0, 0.9 );
opacity: 0;
visibility: hidden;
-webkit-transition: all 0.3s ease;
-moz-transition: all 0.3s ease;
-ms-transition: all 0.3s ease;
transition: all 0.3s ease;
}
.reveal .preview-link-overlay.visible {
opacity: 1;
visibility: visible;
}
.reveal .preview-link-overlay .spinner {
position: absolute;
display: block;
top: 50%;
left: 50%;
width: 32px;
height: 32px;
margin: -16px 0 0 -16px;
z-index: 10;
background-image: url(data:image/gif;base64,R0lGODlhIAAgAPMAAJmZmf%2F%2F%2F6%2Bvr8nJybW1tcDAwOjo6Nvb26ioqKOjo7Ozs%2FLy8vz8%2FAAAAAAAAAAAACH%2FC05FVFNDQVBFMi4wAwEAAAAh%2FhpDcmVhdGVkIHdpdGggYWpheGxvYWQuaW5mbwAh%2BQQJCgAAACwAAAAAIAAgAAAE5xDISWlhperN52JLhSSdRgwVo1ICQZRUsiwHpTJT4iowNS8vyW2icCF6k8HMMBkCEDskxTBDAZwuAkkqIfxIQyhBQBFvAQSDITM5VDW6XNE4KagNh6Bgwe60smQUB3d4Rz1ZBApnFASDd0hihh12BkE9kjAJVlycXIg7CQIFA6SlnJ87paqbSKiKoqusnbMdmDC2tXQlkUhziYtyWTxIfy6BE8WJt5YJvpJivxNaGmLHT0VnOgSYf0dZXS7APdpB309RnHOG5gDqXGLDaC457D1zZ%2FV%2FnmOM82XiHRLYKhKP1oZmADdEAAAh%2BQQJCgAAACwAAAAAIAAgAAAE6hDISWlZpOrNp1lGNRSdRpDUolIGw5RUYhhHukqFu8DsrEyqnWThGvAmhVlteBvojpTDDBUEIFwMFBRAmBkSgOrBFZogCASwBDEY%2FCZSg7GSE0gSCjQBMVG023xWBhklAnoEdhQEfyNqMIcKjhRsjEdnezB%2BA4k8gTwJhFuiW4dokXiloUepBAp5qaKpp6%2BHo7aWW54wl7obvEe0kRuoplCGepwSx2jJvqHEmGt6whJpGpfJCHmOoNHKaHx61WiSR92E4lbFoq%2BB6QDtuetcaBPnW6%2BO7wDHpIiK9SaVK5GgV543tzjgGcghAgAh%2BQQJCgAAACwAAAAAIAAgAAAE7hDISSkxpOrN5zFHNWRdhSiVoVLHspRUMoyUakyEe8PTPCATW9A14E0UvuAKMNAZKYUZCiBMuBakSQKG8G2FzUWox2AUtAQFcBKlVQoLgQReZhQlCIJesQXI5B0CBnUMOxMCenoCfTCEWBsJColTMANldx15BGs8B5wlCZ9Po6OJkwmRpnqkqnuSrayqfKmqpLajoiW5HJq7FL1Gr2mMMcKUMIiJgIemy7xZtJsTmsM4xHiKv5KMCXqfyUCJEonXPN2rAOIAmsfB3uPoAK%2B%2BG%2Bw48edZPK%2BM6hLJpQg484enXIdQFSS1u6UhksENEQAAIfkECQoAAAAsAAAAACAAIAAABOcQyEmpGKLqzWcZRVUQnZYg1aBSh2GUVEIQ2aQOE%2BG%2BcD4ntpWkZQj1JIiZIogDFFyHI0UxQwFugMSOFIPJftfVAEoZLBbcLEFhlQiqGp1Vd140AUklUN3eCA51C1EWMzMCezCBBmkxVIVHBWd3HHl9JQOIJSdSnJ0TDKChCwUJjoWMPaGqDKannasMo6WnM562R5YluZRwur0wpgqZE7NKUm%2BFNRPIhjBJxKZteWuIBMN4zRMIVIhffcgojwCF117i4nlLnY5ztRLsnOk%2BaV%2BoJY7V7m76PdkS4trKcdg0Zc0tTcKkRAAAIfkECQoAAAAsAAAAACAAIAAABO4QyEkpKqjqzScpRaVkXZWQEximw1BSCUEIlDohrft6cpKCk5xid5MNJTaAIkekKGQkWyKHkvhKsR7ARmitkAYDYRIbUQRQjWBwJRzChi9CRlBcY1UN4g0%2FVNB0AlcvcAYHRyZPdEQFYV8ccwR5HWxEJ02YmRMLnJ1xCYp0Y5idpQuhopmmC2KgojKasUQDk5BNAwwMOh2RtRq5uQuPZKGIJQIGwAwGf6I0JXMpC8C7kXWDBINFMxS4DKMAWVWAGYsAdNqW5uaRxkSKJOZKaU3tPOBZ4DuK2LATgJhkPJMgTwKCdFjyPHEnKxFCDhEAACH5BAkKAAAALAAAAAAgACAAAATzEMhJaVKp6s2nIkolIJ2WkBShpkVRWqqQrhLSEu9MZJKK9y1ZrqYK9WiClmvoUaF8gIQSNeF1Er4MNFn4SRSDARWroAIETg1iVwuHjYB1kYc1mwruwXKC9gmsJXliGxc%2BXiUCby9ydh1sOSdMkpMTBpaXBzsfhoc5l58Gm5yToAaZhaOUqjkDgCWNHAULCwOLaTmzswadEqggQwgHuQsHIoZCHQMMQgQGubVEcxOPFAcMDAYUA85eWARmfSRQCdcMe0zeP1AAygwLlJtPNAAL19DARdPzBOWSm1brJBi45soRAWQAAkrQIykShQ9wVhHCwCQCACH5BAkKAAAALAAAAAAgACAAAATrEMhJaVKp6s2nIkqFZF2VIBWhUsJaTokqUCoBq%2BE71SRQeyqUToLA7VxF0JDyIQh%2FMVVPMt1ECZlfcjZJ9mIKoaTl1MRIl5o4CUKXOwmyrCInCKqcWtvadL2SYhyASyNDJ0uIiRMDjI0Fd30%2FiI2UA5GSS5UDj2l6NoqgOgN4gksEBgYFf0FDqKgHnyZ9OX8HrgYHdHpcHQULXAS2qKpENRg7eAMLC7kTBaixUYFkKAzWAAnLC7FLVxLWDBLKCwaKTULgEwbLA4hJtOkSBNqITT3xEgfLpBtzE%2FjiuL04RGEBgwWhShRgQExHBAAh%2BQQJCgAAACwAAAAAIAAgAAAE7xDISWlSqerNpyJKhWRdlSAVoVLCWk6JKlAqAavhO9UkUHsqlE6CwO1cRdCQ8iEIfzFVTzLdRAmZX3I2SfZiCqGk5dTESJeaOAlClzsJsqwiJwiqnFrb2nS9kmIcgEsjQydLiIlHehhpejaIjzh9eomSjZR%2BipslWIRLAgMDOR2DOqKogTB9pCUJBagDBXR6XB0EBkIIsaRsGGMMAxoDBgYHTKJiUYEGDAzHC9EACcUGkIgFzgwZ0QsSBcXHiQvOwgDdEwfFs0sDzt4S6BK4xYjkDOzn0unFeBzOBijIm1Dgmg5YFQwsCMjp1oJ8LyIAACH5BAkKAAAALAAAAAAgACAAAATwEMhJaVKp6s2nIkqFZF2VIBWhUsJaTokqUCoBq%2BE71SRQeyqUToLA7VxF0JDyIQh%2FMVVPMt1ECZlfcjZJ9mIKoaTl1MRIl5o4CUKXOwmyrCInCKqcWtvadL2SYhyASyNDJ0uIiUd6GGl6NoiPOH16iZKNlH6KmyWFOggHhEEvAwwMA0N9GBsEC6amhnVcEwavDAazGwIDaH1ipaYLBUTCGgQDA8NdHz0FpqgTBwsLqAbWAAnIA4FWKdMLGdYGEgraigbT0OITBcg5QwPT4xLrROZL6AuQAPUS7bxLpoWidY0JtxLHKhwwMJBTHgPKdEQAACH5BAkKAAAALAAAAAAgACAAAATrEMhJaVKp6s2nIkqFZF2VIBWhUsJaTokqUCoBq%2BE71SRQeyqUToLA7VxF0JDyIQh%2FMVVPMt1ECZlfcjZJ9mIKoaTl1MRIl5o4CUKXOwmyrCInCKqcWtvadL2SYhyASyNDJ0uIiUd6GAULDJCRiXo1CpGXDJOUjY%2BYip9DhToJA4RBLwMLCwVDfRgbBAaqqoZ1XBMHswsHtxtFaH1iqaoGNgAIxRpbFAgfPQSqpbgGBqUD1wBXeCYp1AYZ19JJOYgH1KwA4UBvQwXUBxPqVD9L3sbp2BNk2xvvFPJd%2BMFCN6HAAIKgNggY0KtEBAAh%2BQQJCgAAACwAAAAAIAAgAAAE6BDISWlSqerNpyJKhWRdlSAVoVLCWk6JKlAqAavhO9UkUHsqlE6CwO1cRdCQ8iEIfzFVTzLdRAmZX3I2SfYIDMaAFdTESJeaEDAIMxYFqrOUaNW4E4ObYcCXaiBVEgULe0NJaxxtYksjh2NLkZISgDgJhHthkpU4mW6blRiYmZOlh4JWkDqILwUGBnE6TYEbCgevr0N1gH4At7gHiRpFaLNrrq8HNgAJA70AWxQIH1%2BvsYMDAzZQPC9VCNkDWUhGkuE5PxJNwiUK4UfLzOlD4WvzAHaoG9nxPi5d%2BjYUqfAhhykOFwJWiAAAIfkECQoAAAAsAAAAACAAIAAABPAQyElpUqnqzaciSoVkXVUMFaFSwlpOCcMYlErAavhOMnNLNo8KsZsMZItJEIDIFSkLGQoQTNhIsFehRww2CQLKF0tYGKYSg%2BygsZIuNqJksKgbfgIGepNo2cIUB3V1B3IvNiBYNQaDSTtfhhx0CwVPI0UJe0%2Bbm4g5VgcGoqOcnjmjqDSdnhgEoamcsZuXO1aWQy8KAwOAuTYYGwi7w5h%2BKr0SJ8MFihpNbx%2B4Erq7BYBuzsdiH1jCAzoSfl0rVirNbRXlBBlLX%2BBP0XJLAPGzTkAuAOqb0WT5AH7OcdCm5B8TgRwSRKIHQtaLCwg1RAAAOwAAAAAAAAAAAA%3D%3D);
visibility: visible;
opacity: 0.6;
-webkit-transition: all 0.3s ease;
-moz-transition: all 0.3s ease;
-ms-transition: all 0.3s ease;
transition: all 0.3s ease;
}
.reveal .preview-link-overlay header {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 40px;
z-index: 2;
border-bottom: 1px solid #222;
}
.reveal .preview-link-overlay header a {
display: inline-block;
width: 40px;
height: 40px;
padding: 0 10px;
float: right;
opacity: 0.6;
box-sizing: border-box;
}
.reveal .preview-link-overlay header a:hover {
opacity: 1;
}
.reveal .preview-link-overlay header a .icon {
display: inline-block;
width: 20px;
height: 20px;
background-position: 50% 50%;
background-size: 100%;
background-repeat: no-repeat;
}
.reveal .preview-link-overlay header a.close .icon {
background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAABkklEQVRYR8WX4VHDMAxG6wnoJrABZQPYBCaBTWAD2g1gE5gg6OOsXuxIlr40d81dfrSJ9V4c2VLK7spHuTJ/5wpM07QXuXc5X0opX2tEJcadjHuV80li/FgxTIEK/5QBCICBD6xEhSMGHgQPgBgLiYVAB1dpSqKDawxTohFw4JSEA3clzgIBPCURwE2JucBR7rhPJJv5OpJwDX+SfDjgx1wACQeJG1aChP9K/IMmdZ8DtESV1WyP3Bt4MwM6sj4NMxMYiqUWHQu4KYA/SYkIjOsm3BXYWMKFDwU2khjCQ4ELJUJ4SmClRArOCmSXGuKma0fYD5CbzHxFpCSGAhfAVSSUGDUk2BWZaff2g6GE15BsBQ9nwmpIGDiyHQddwNTMKkbZaf9fajXQca1EX44puJZUsnY0ObGmITE3GVLCbEhQUjGVt146j6oasWN+49Vph2w1pZ5EansNZqKBm1txbU57iRRcZ86RWMDdWtBJUHBHwoQPi1GV+JCbntmvok7iTX4/Up9mgyTc/FJYDTcndgH/AA5A/CHsyEkVAAAAAElFTkSuQmCC);
}
.reveal .preview-link-overlay header a.external .icon {
background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAAcElEQVRYR+2WSQoAIQwEzf8f7XiOMkUQxUPlGkM3hVmiQfQR9GYnH1SsAQlI4DiBqkCMoNb9y2e90IAEJPAcgdznU9+engMaeJ7Azh5Y1U67gAho4DqBqmB1buAf0MB1AlVBek83ZPkmJMGc1wAR+AAqod/B97TRpQAAAABJRU5ErkJggg==);
}
.reveal .preview-link-overlay .viewport {
position: absolute;
top: 40px;
right: 0;
bottom: 0;
left: 0;
}
.reveal .preview-link-overlay .viewport iframe {
width: 100%;
height: 100%;
max-width: 100%;
max-height: 100%;
border: 0;
opacity: 0;
visibility: hidden;
-webkit-transition: all 0.3s ease;
-moz-transition: all 0.3s ease;
-ms-transition: all 0.3s ease;
transition: all 0.3s ease;
}
.reveal .preview-link-overlay.loaded .viewport iframe {
opacity: 1;
visibility: visible;
}
.reveal .preview-link-overlay.loaded .spinner {
opacity: 0;
visibility: hidden;
-webkit-transform: scale(0.2);
-moz-transform: scale(0.2);
-ms-transform: scale(0.2);
transform: scale(0.2);
}
/********************************************* /*********************************************
* SPEAKER NOTES * SPEAKER NOTES
*********************************************/ *********************************************/

2
css/reveal.min.css vendored
View file

File diff suppressed because one or more lines are too long

64
index.html
View file

@ -36,7 +36,6 @@
<!-- Any section element inside of this container is displayed as a slide --> <!-- Any section element inside of this container is displayed as a slide -->
<div class="slides"> <div class="slides">
<section> <section>
<h1>Reveal.js</h1> <h1>Reveal.js</h1>
<h3>HTML Presentations Made Easy</h3> <h3>HTML Presentations Made Easy</h3>
@ -183,29 +182,12 @@
</section> </section>
<section> <section>
<section data-state="alert"> <h2>Global State</h2>
<h2>Global State</h2> <p>
<p> Set <code>data-state="something"</code> on a slide and <code>"something"</code>
Set <code>data-state="something"</code> on a slide and <code>"something"</code> will be added as a class to the document element when the slide is open. This lets you
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.
apply broader style changes, like switching the background. </p>
</p>
<a href="#" class="image navigate-down">
<img width="178" height="238" src="https://s3.amazonaws.com/hakim-static/reveal-js/arrow.png" alt="Down arrow">
</a>
</section>
<section data-state="blackout">
<h2>"blackout"</h2>
<a href="#" class="image navigate-down">
<img width="178" height="238" src="https://s3.amazonaws.com/hakim-static/reveal-js/arrow.png" alt="Down arrow">
</a>
</section>
<section data-state="soothe">
<h2>"soothe"</h2>
<a href="#" class="image navigate-next">
<img width="178" height="238" src="https://s3.amazonaws.com/hakim-static/reveal-js/arrow.png" alt="Up arrow" style="-webkit-transform: rotate(-90deg);">
</a>
</section>
</section> </section>
<section data-state="customevent"> <section data-state="customevent">
@ -220,6 +202,40 @@ Reveal.addEventListener( 'customevent', function() {
</code></pre> </code></pre>
</section> </section>
<section>
<section data-background="#007777">
<h2>Slide Backgrounds</h2>
<p>
Set <code>data-background="#007777"</code> on a slide to change the full page background to the given color. All CSS color formats are supported.
</p>
<a href="#" class="image navigate-down">
<img width="178" height="238" src="https://s3.amazonaws.com/hakim-static/reveal-js/arrow.png" alt="Down arrow">
</a>
</section>
<section data-background="https://s3.amazonaws.com/hakim-static/reveal-js/arrow.png">
<h2>Image Backgrounds</h2>
<pre><code>&lt;section data-background="image.png"&gt;</code></pre>
</section>
<section data-background="https://s3.amazonaws.com/hakim-static/reveal-js/arrow.png" data-background-repeat="repeat" data-background-size="100px">
<h2>Repeated Image Backgrounds</h2>
<pre><code style="word-wrap: break-word;">&lt;section data-background="image.png" data-background-repeat="repeat" data-background-size="100px"&gt;</code></pre>
</section>
</section>
<section data-transition="linear" data-background="#4d7e65" data-background-transition="slide">
<h2>Background Transitions</h2>
<p>
Pass reveal.js the <code>backgroundTransition: 'slide'</code> config argument to make backgrounds slide rather than fade.
</p>
</section>
<section data-transition="linear" data-background="#8c4738" data-background-transition="slide">
<h2>Background Transition Override</h2>
<p>
You can override background transitions per slide by using <code>data-background-transition="slide"</code>.
</p>
</section>
<section> <section>
<h2>Clever Quotes</h2> <h2>Clever Quotes</h2>
<p> <p>

459
js/reveal.js
View file

@ -70,6 +70,9 @@ var Reveal = (function(){
// Apply a 3D roll to links on hover // Apply a 3D roll to links on hover
rollingLinks: true, rollingLinks: true,
// Opens links in an iframe preview overlay
previewLinks: false,
// Theme (see /css/theme) // Theme (see /css/theme)
theme: null, theme: null,
@ -79,6 +82,9 @@ var Reveal = (function(){
// Transition speed // Transition speed
transitionSpeed: 'default', // default/fast/slow transitionSpeed: 'default', // default/fast/slow
// Transition style for full page slide backgrounds
backgroundTransition: 'default', // default/linear
// Script dependencies to load // Script dependencies to load
dependencies: [] dependencies: []
}, },
@ -120,7 +126,7 @@ var Reveal = (function(){
'transform' in document.body.style, 'transform' in document.body.style,
// Throttles mouse wheel navigation // Throttles mouse wheel navigation
mouseWheelTimeout = 0, lastMouseWheelStep = 0,
// An interval used to automatically move on to the next slide // An interval used to automatically move on to the next slide
autoSlideTimeout = 0, autoSlideTimeout = 0,
@ -186,6 +192,13 @@ var Reveal = (function(){
dom.wrapper = document.querySelector( '.reveal' ); dom.wrapper = document.querySelector( '.reveal' );
dom.slides = document.querySelector( '.reveal .slides' ); dom.slides = document.querySelector( '.reveal .slides' );
// Background element
if( !document.querySelector( '.reveal .backgrounds' ) ) {
dom.background = document.createElement( 'div' );
dom.background.classList.add( 'backgrounds' );
dom.wrapper.appendChild( dom.background );
}
// Progress bar // Progress bar
if( !dom.wrapper.querySelector( '.progress' ) ) { if( !dom.wrapper.querySelector( '.progress' ) ) {
var progressElement = document.createElement( 'div' ); var progressElement = document.createElement( 'div' );
@ -205,11 +218,11 @@ var Reveal = (function(){
dom.wrapper.appendChild( controlsElement ); dom.wrapper.appendChild( controlsElement );
} }
// Presentation background element // State background element [DEPRECATED]
if( !dom.wrapper.querySelector( '.state-background' ) ) { if( !dom.wrapper.querySelector( '.state-background' ) ) {
var backgroundElement = document.createElement( 'div' ); var stateBackgroundElement = document.createElement( 'div' );
backgroundElement.classList.add( 'state-background' ); stateBackgroundElement.classList.add( 'state-background' );
dom.wrapper.appendChild( backgroundElement ); dom.wrapper.appendChild( stateBackgroundElement );
} }
// Overlay graphic which is displayed during the paused mode // Overlay graphic which is displayed during the paused mode
@ -237,6 +250,88 @@ var Reveal = (function(){
} }
/**
* Creates the slide background elements and appends them
* to the background container. One element is created per
* slide no matter if the given slide has visible background.
*/
function createBackgrounds() {
if( isPrintingPDF() ) {
document.body.classList.add( 'print-pdf' );
}
// Clear prior backgrounds
dom.background.innerHTML = '';
dom.background.classList.add( 'no-transition' );
// Helper method for creating a background element for the
// given slide
function _createBackground( slide, container ) {
var data = {
background: slide.getAttribute( 'data-background' ),
backgroundSize: slide.getAttribute( 'data-background-size' ),
backgroundColor: slide.getAttribute( 'data-background-color' ),
backgroundRepeat: slide.getAttribute( 'data-background-repeat' ),
backgroundPosition: slide.getAttribute( 'data-background-position' ),
backgroundTransition: slide.getAttribute( 'data-background-transition' )
};
var element = document.createElement( 'div' );
element.className = 'slide-background';
if( data.background ) {
// Auto-wrap image urls in url(...)
if( /^(http|file|\/\/)/gi.test( data.background ) || /\.(png|jpg|jpeg|gif|bmp)$/gi.test( data.background ) ) {
element.style.backgroundImage = 'url('+ data.background +')';
}
else {
element.style.background = data.background;
}
}
// Additional and optional background properties
if( data.backgroundSize ) element.style.backgroundSize = data.backgroundSize;
if( data.backgroundColor ) element.style.backgroundColor = data.backgroundColor;
if( data.backgroundRepeat ) element.style.backgroundRepeat = data.backgroundRepeat;
if( data.backgroundPosition ) element.style.backgroundPosition = data.backgroundPosition;
if( data.backgroundTransition ) element.setAttribute( 'data-background-transition', data.backgroundTransition );
container.appendChild( element );
return element;
}
// Iterate over all horizontal slides
toArray( document.querySelectorAll( HORIZONTAL_SLIDES_SELECTOR ) ).forEach( function( slideh ) {
var backgroundStack;
if( isPrintingPDF() ) {
backgroundStack = _createBackground( slideh, slideh );
}
else {
backgroundStack = _createBackground( slideh, dom.background );
}
// Iterate over all vertical slides
toArray( slideh.querySelectorAll( 'section' ) ).forEach( function( slidev ) {
if( isPrintingPDF() ) {
_createBackground( slidev, slidev );
}
else {
_createBackground( slidev, backgroundStack );
}
} );
} );
}
/** /**
* Hides the address bar if we're on a mobile device. * Hides the address bar if we're on a mobile device.
*/ */
@ -348,6 +443,7 @@ var Reveal = (function(){
dom.wrapper.classList.add( config.transition ); dom.wrapper.classList.add( config.transition );
dom.wrapper.setAttribute( 'data-transition-speed', config.transitionSpeed ); dom.wrapper.setAttribute( 'data-transition-speed', config.transitionSpeed );
dom.wrapper.setAttribute( 'data-background-transition', config.backgroundTransition );
if( dom.controls ) { if( dom.controls ) {
dom.controls.style.display = ( config.controls && dom.controls ) ? 'block' : 'none'; dom.controls.style.display = ( config.controls && dom.controls ) ? 'block' : 'none';
@ -380,12 +476,21 @@ var Reveal = (function(){
document.removeEventListener( 'mousewheel', onDocumentMouseScroll, false ); document.removeEventListener( 'mousewheel', onDocumentMouseScroll, false );
} }
// 3D links // Rolling 3D links
if( config.rollingLinks ) { if( config.rollingLinks ) {
enable3DLinks(); enableRollingLinks();
} }
else { else {
disable3DLinks(); disableRollingLinks();
}
// Iframe link previews
if( config.previewLinks ) {
enablePreviewLinks();
}
else {
disablePreviewLinks();
enablePreviewLinks( '[data-preview-link]' );
} }
// Load the theme in the config, if it's not already loaded // Load the theme in the config, if it's not already loaded
@ -523,6 +628,50 @@ var Reveal = (function(){
} }
/**
* Retrieves the height of the given element by looking
* at the position and height of its immediate children.
*/
function getAbsoluteHeight( element ) {
var height = 0;
if( element ) {
var absoluteChildren = 0;
toArray( element.childNodes ).forEach( function( child ) {
if( typeof child.offsetTop === 'number' && child.style ) {
// Count # of abs children
if( child.style.position === 'absolute' ) {
absoluteChildren += 1;
}
height = Math.max( height, child.offsetTop + child.offsetHeight );
}
} );
// If there are no absolute children, use offsetHeight
if( absoluteChildren === 0 ) {
height = element.offsetHeight;
}
}
return height;
}
/**
* Checks if this instance is being used to print a PDF.
*/
function isPrintingPDF() {
return ( /print-pdf/gi ).test( window.location.search );
}
/** /**
* Causes the address bar to hide on mobile devices, * Causes the address bar to hide on mobile devices,
* more vertical space ftw. * more vertical space ftw.
@ -560,7 +709,7 @@ var Reveal = (function(){
/** /**
* Wrap all links in 3D goodness. * Wrap all links in 3D goodness.
*/ */
function enable3DLinks() { function enableRollingLinks() {
if( supports3DTransforms && !( 'msPerspective' in document.body.style ) ) { if( supports3DTransforms && !( 'msPerspective' in document.body.style ) ) {
var anchors = document.querySelectorAll( SLIDES_SELECTOR + ' a:not(.image)' ); var anchors = document.querySelectorAll( SLIDES_SELECTOR + ' a:not(.image)' );
@ -585,7 +734,7 @@ var Reveal = (function(){
/** /**
* Unwrap all 3D links. * Unwrap all 3D links.
*/ */
function disable3DLinks() { function disableRollingLinks() {
var anchors = document.querySelectorAll( SLIDES_SELECTOR + ' a.roll' ); var anchors = document.querySelectorAll( SLIDES_SELECTOR + ' a.roll' );
@ -601,6 +750,90 @@ var Reveal = (function(){
} }
/**
* Bind preview frame links.
*/
function enablePreviewLinks( selector ) {
var anchors = toArray( document.querySelectorAll( selector ? selector : 'a' ) );
anchors.forEach( function( element ) {
if( /^(http|www)/gi.test( element.getAttribute( 'href' ) ) ) {
element.addEventListener( 'click', onPreviewLinkClicked, false );
}
} );
}
/**
* Unbind preview frame links.
*/
function disablePreviewLinks() {
var anchors = toArray( document.querySelectorAll( 'a' ) );
anchors.forEach( function( element ) {
if( /^(http|www)/gi.test( element.getAttribute( 'href' ) ) ) {
element.removeEventListener( 'click', onPreviewLinkClicked, false );
}
} );
}
/**
* Opens a preview window for the target URL.
*/
function openPreview( url ) {
closePreview();
dom.preview = document.createElement( 'div' );
dom.preview.classList.add( 'preview-link-overlay' );
dom.wrapper.appendChild( dom.preview );
dom.preview.innerHTML = [
'<header>',
'<a class="close" href="#"><span class="icon"></span></a>',
'<a class="external" href="'+ url +'" target="_blank"><span class="icon"></span></a>',
'</header>',
'<div class="spinner"></div>',
'<div class="viewport">',
'<iframe src="'+ url +'"></iframe>',
'</div>'
].join('');
dom.preview.querySelector( 'iframe' ).addEventListener( 'load', function( event ) {
dom.preview.classList.add( 'loaded' );
}, false );
dom.preview.querySelector( '.close' ).addEventListener( 'click', function( event ) {
closePreview();
event.preventDefault();
}, false );
dom.preview.querySelector( '.external' ).addEventListener( 'click', function( event ) {
closePreview();
}, false );
setTimeout( function() {
dom.preview.classList.add( 'visible' );
}, 1 );
}
/**
* Closes the iframe preview window.
*/
function closePreview() {
if( dom.preview ) {
dom.preview.setAttribute( 'src', '' );
dom.preview.parentNode.removeChild( dom.preview );
dom.preview = null;
}
}
/** /**
* Return a sorted fragments list, ordered by an increasing * Return a sorted fragments list, ordered by an increasing
* "data-fragment-index" attribute. * "data-fragment-index" attribute.
@ -639,7 +872,7 @@ var Reveal = (function(){
*/ */
function layout() { function layout() {
if( dom.wrapper ) { if( dom.wrapper && !isPrintingPDF() ) {
// Available space to scale within // Available space to scale within
var availableWidth = dom.wrapper.offsetWidth, var availableWidth = dom.wrapper.offsetWidth,
@ -707,7 +940,7 @@ var Reveal = (function(){
slide.style.top = 0; slide.style.top = 0;
} }
else { else {
slide.style.top = Math.max( - ( slide.offsetHeight / 2 ) - 20, -slideHeight / 2 ) + 'px'; slide.style.top = Math.max( - ( getAbsoluteHeight( slide ) / 2 ) - 20, -slideHeight / 2 ) + 'px';
} }
} }
else { else {
@ -748,7 +981,10 @@ var Reveal = (function(){
function getPreviousVerticalIndex( stack ) { function getPreviousVerticalIndex( stack ) {
if( typeof stack === 'object' && typeof stack.setAttribute === 'function' && stack.classList.contains( 'stack' ) ) { if( typeof stack === 'object' && typeof stack.setAttribute === 'function' && stack.classList.contains( 'stack' ) ) {
return parseInt( stack.getAttribute( 'data-previous-indexv' ) || 0, 10 ); // Prefer manually defined start-indexv
var attributeName = stack.hasAttribute( 'data-start-indexv' ) ? 'data-start-indexv' : 'data-previous-indexv';
return parseInt( stack.getAttribute( attributeName ) || 0, 10 );
} }
return 0; return 0;
@ -1128,7 +1364,7 @@ var Reveal = (function(){
} }
// Dispatch an event if the slide changed // Dispatch an event if the slide changed
var slideChanged = (indexh !== indexhBefore || indexv !== indexvBefore); var slideChanged = ( indexh !== indexhBefore || indexv !== indexvBefore );
if( slideChanged ) { if( slideChanged ) {
dispatchEvent( 'slidechanged', { dispatchEvent( 'slidechanged', {
'indexh': indexh, 'indexh': indexh,
@ -1166,13 +1402,14 @@ var Reveal = (function(){
} }
// Handle embedded content // Handle embedded content
if (slideChanged) { if( slideChanged ) {
stopEmbeddedContent( previousSlide ); stopEmbeddedContent( previousSlide );
startEmbeddedContent( currentSlide ); startEmbeddedContent( currentSlide );
} }
updateControls(); updateControls();
updateProgress(); updateProgress();
updateBackground();
} }
@ -1196,8 +1433,12 @@ var Reveal = (function(){
// Start auto-sliding if it's enabled // Start auto-sliding if it's enabled
cueAutoSlide(); cueAutoSlide();
// Re-create the slide backgrounds
createBackgrounds();
updateControls(); updateControls();
updateProgress(); updateProgress();
updateBackground();
} }
@ -1254,6 +1495,9 @@ var Reveal = (function(){
element.classList.remove( 'present' ); element.classList.remove( 'present' );
element.classList.remove( 'future' ); element.classList.remove( 'future' );
// http://www.w3.org/html/wg/drafts/html/master/editing.html#the-hidden-attribute
element.setAttribute( 'hidden', '' );
if( i < index ) { if( i < index ) {
// Any element previous to index is given the 'past' class // Any element previous to index is given the 'past' class
element.classList.add( reverse ? 'future' : 'past' ); element.classList.add( reverse ? 'future' : 'past' );
@ -1271,6 +1515,7 @@ var Reveal = (function(){
// Mark the current slide as present // Mark the current slide as present
slides[index].classList.add( 'present' ); slides[index].classList.add( 'present' );
slides[index].removeAttribute( 'hidden' );
// If this slide has a state associated with it, add it // If this slide has a state associated with it, add it
// onto the current state of the deck // onto the current state of the deck
@ -1402,6 +1647,37 @@ var Reveal = (function(){
} }
/**
* Updates the background elements to reflect the current
* slide.
*/
function updateBackground() {
// Update the classes of all backgrounds to match the
// states of their slides (past/present/future)
toArray( dom.background.childNodes ).forEach( function( backgroundh, h ) {
// Reverse past/future classes when in RTL mode
var horizontalPast = config.rtl ? 'future' : 'past',
horizontalFuture = config.rtl ? 'past' : 'future';
backgroundh.className = 'slide-background ' + ( h < indexh ? horizontalPast : h > indexh ? horizontalFuture : 'present' );
toArray( backgroundh.childNodes ).forEach( function( backgroundv, v ) {
backgroundv.className = 'slide-background ' + ( v < indexv ? 'past' : v > indexv ? 'future' : 'present' );
} );
} );
// Allow the first background to apply without transition
setTimeout( function() {
dom.background.classList.remove( 'no-transition' );
}, 1 );
}
/** /**
* Determine what available routes there are for navigation. * Determine what available routes there are for navigation.
* *
@ -1632,10 +1908,18 @@ var Reveal = (function(){
var fragments = sortFragments( currentSlide.querySelectorAll( '.fragment:not(.visible)' ) ); var fragments = sortFragments( currentSlide.querySelectorAll( '.fragment:not(.visible)' ) );
if( fragments.length ) { if( fragments.length ) {
fragments[0].classList.add( 'visible' ); // Find the index of the next fragment
var index = fragments[0].getAttribute( 'data-fragment-index' );
// Notify subscribers of the change // Find all fragments with the same index
dispatchEvent( 'fragmentshown', { fragment: fragments[0] } ); fragments = currentSlide.querySelectorAll( '.fragment[data-fragment-index="'+ index +'"]' );
toArray( fragments ).forEach( function( element ) {
element.classList.add( 'visible' );
// Notify subscribers of the change
dispatchEvent( 'fragmentshown', { fragment: element } );
} );
updateControls(); updateControls();
return true; return true;
@ -1658,10 +1942,18 @@ var Reveal = (function(){
var fragments = sortFragments( currentSlide.querySelectorAll( '.fragment.visible' ) ); var fragments = sortFragments( currentSlide.querySelectorAll( '.fragment.visible' ) );
if( fragments.length ) { if( fragments.length ) {
fragments[ fragments.length - 1 ].classList.remove( 'visible' ); // Find the index of the previous fragment
var index = fragments[ fragments.length - 1 ].getAttribute( 'data-fragment-index' );
// Notify subscribers of the change // Find all fragments with the same index
dispatchEvent( 'fragmenthidden', { fragment: fragments[ fragments.length - 1 ] } ); fragments = currentSlide.querySelectorAll( '.fragment[data-fragment-index="'+ index +'"]' );
toArray( fragments ).forEach( function( f ) {
f.classList.remove( 'visible' );
// Notify subscribers of the change
dispatchEvent( 'fragmenthidden', { fragment: f } );
} );
updateControls(); updateControls();
return true; return true;
@ -1761,9 +2053,9 @@ var Reveal = (function(){
var previousSlide = document.querySelector( HORIZONTAL_SLIDES_SELECTOR + '.past:nth-child(' + indexh + ')' ); var previousSlide = document.querySelector( HORIZONTAL_SLIDES_SELECTOR + '.past:nth-child(' + indexh + ')' );
if( previousSlide ) { if( previousSlide ) {
indexv = ( previousSlide.querySelectorAll( 'section' ).length + 1 ) || undefined; var v = ( previousSlide.querySelectorAll( 'section' ).length - 1 ) || undefined;
indexh --; var h = indexh - 1;
slide( indexh, indexv ); slide( h, v );
} }
} }
} }
@ -1808,40 +2100,75 @@ var Reveal = (function(){
// keyboard modifier key is present // keyboard modifier key is present
if( hasFocus || (event.shiftKey && event.keyCode !== 32) || event.altKey || event.ctrlKey || event.metaKey ) return; if( hasFocus || (event.shiftKey && event.keyCode !== 32) || event.altKey || event.ctrlKey || event.metaKey ) return;
var triggered = true; // While paused only allow "unpausing" keyboard events (b and .)
// while paused only allow "unpausing" keyboard events (b and .)
if( isPaused() && [66,190,191].indexOf( event.keyCode ) === -1 ) { if( isPaused() && [66,190,191].indexOf( event.keyCode ) === -1 ) {
return false; return false;
} }
switch( event.keyCode ) { var triggered = false;
// p, page up
case 80: case 33: navigatePrev(); break; // 1. User defined key bindings
// n, page down if( typeof config.keyboard === 'object' ) {
case 78: case 34: navigateNext(); break;
// h, left for( var key in config.keyboard ) {
case 72: case 37: navigateLeft(); break;
// l, right // Check if this binding matches the pressed key
case 76: case 39: navigateRight(); break; if( parseInt( key, 10 ) === event.keyCode ) {
// k, up
case 75: case 38: navigateUp(); break; var value = config.keyboard[ key ];
// j, down
case 74: case 40: navigateDown(); break; // Calback function
// home if( typeof value === 'function' ) {
case 36: slide( 0 ); break; value.apply( null, [ event ] );
// end }
case 35: slide( Number.MAX_VALUE ); break; // String shortcuts to reveal.js API
// space else if( typeof value === 'string' && typeof Reveal[ value ] === 'function' ) {
case 32: isOverview() ? deactivateOverview() : event.shiftKey ? navigatePrev() : navigateNext(); break; Reveal[ value ].call();
// return }
case 13: isOverview() ? deactivateOverview() : triggered = false; break;
// b, period, Logitech presenter tools "black screen" button triggered = true;
case 66: case 190: case 191: togglePause(); break;
// f }
case 70: enterFullscreen(); break;
default: }
triggered = false;
}
// 2. System defined key bindings
if( triggered === false ) {
// Assume true and try to prove false
triggered = true;
switch( event.keyCode ) {
// p, page up
case 80: case 33: navigatePrev(); break;
// n, page down
case 78: case 34: navigateNext(); break;
// h, left
case 72: case 37: navigateLeft(); break;
// l, right
case 76: case 39: navigateRight(); break;
// k, up
case 75: case 38: navigateUp(); break;
// j, down
case 74: case 40: navigateDown(); break;
// home
case 36: slide( 0 ); break;
// end
case 35: slide( Number.MAX_VALUE ); break;
// space
case 32: isOverview() ? deactivateOverview() : event.shiftKey ? navigatePrev() : navigateNext(); break;
// return
case 13: isOverview() ? deactivateOverview() : triggered = false; break;
// b, period, Logitech presenter tools "black screen" button
case 66: case 190: case 191: togglePause(); break;
// f
case 70: enterFullscreen(); break;
default:
triggered = false;
}
} }
// If the input resulted in a triggered action we should prevent // If the input resulted in a triggered action we should prevent
@ -2010,9 +2337,10 @@ var Reveal = (function(){
*/ */
function onDocumentMouseScroll( event ) { function onDocumentMouseScroll( event ) {
clearTimeout( mouseWheelTimeout ); if( Date.now() - lastMouseWheelStep > 600 ) {
lastMouseWheelStep = Date.now();
mouseWheelTimeout = setTimeout( function() {
var delta = event.detail || -event.wheelDelta; var delta = event.detail || -event.wheelDelta;
if( delta > 0 ) { if( delta > 0 ) {
navigateNext(); navigateNext();
@ -2020,7 +2348,8 @@ var Reveal = (function(){
else { else {
navigatePrev(); navigatePrev();
} }
}, 100 );
}
} }
@ -2101,6 +2430,20 @@ var Reveal = (function(){
} }
/**
* Handles clicks on links that are set to preview in the
* iframe overlay.
*/
function onPreviewLinkClicked( event ) {
var url = event.target.getAttribute( 'href' );
if( url ) {
openPreview( url );
event.preventDefault();
}
}
// --------------------------------------------------------------------// // --------------------------------------------------------------------//
// ------------------------------- API --------------------------------// // ------------------------------- API --------------------------------//
@ -2229,4 +2572,4 @@ var Reveal = (function(){
} }
}; };
})(); })();

4
js/reveal.min.js vendored
View file

File diff suppressed because one or more lines are too long

2
package.json
View file

@ -1,6 +1,6 @@
{ {
"name": "reveal.js", "name": "reveal.js",
"version": "2.4.0", "version": "2.5.0",
"description": "The HTML Presentation Framework", "description": "The HTML Presentation Framework",
"homepage": "http://lab.hakim.se/reveal-js", "homepage": "http://lab.hakim.se/reveal-js",
"subdomain": "revealjs", "subdomain": "revealjs",

1
plugin/multiplex/index.js
View file

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

1
plugin/notes-server/index.js
View file

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

9
plugin/notes-server/notes.html
View file

@ -3,6 +3,8 @@
<head> <head>
<meta charset="utf-8"> <meta charset="utf-8">
<meta name="viewport" content="width=1150">
<title>reveal.js - Slide Notes</title> <title>reveal.js - Slide Notes</title>
<style> <style>
@ -14,6 +16,7 @@
font-size: 24px; font-size: 24px;
width: 640px; width: 640px;
margin-top: 5px; margin-top: 5px;
clear: left;
} }
#wrap-current-slide { #wrap-current-slide {
@ -27,13 +30,13 @@
width: 1280px; width: 1280px;
height: 1024px; height: 1024px;
border: none; border: none;
-webkit-transform-origin: 0 0; -webkit-transform-origin: 0 0;
-moz-transform-origin: 0 0; -moz-transform-origin: 0 0;
-ms-transform-origin: 0 0; -ms-transform-origin: 0 0;
-o-transform-origin: 0 0; -o-transform-origin: 0 0;
transform-origin: 0 0; transform-origin: 0 0;
-webkit-transform: scale(0.5); -webkit-transform: scale(0.5);
-moz-transform: scale(0.5); -moz-transform: scale(0.5);
-ms-transform: scale(0.5); -ms-transform: scale(0.5);
@ -53,7 +56,7 @@
width: 1280px; width: 1280px;
height: 1024px; height: 1024px;
border: none; border: none;
-webkit-transform-origin: 0 0; -webkit-transform-origin: 0 0;
-moz-transform-origin: 0 0; -moz-transform-origin: 0 0;
-ms-transform-origin: 0 0; -ms-transform-origin: 0 0;

7
plugin/notes/notes.html
View file

@ -14,6 +14,7 @@
font-size: 24px; font-size: 24px;
width: 640px; width: 640px;
margin-top: 5px; margin-top: 5px;
clear: left;
} }
#wrap-current-slide { #wrap-current-slide {
@ -212,9 +213,9 @@
now = new Date(); now = new Date();
diff = now.getTime() - start.getTime(); diff = now.getTime() - start.getTime();
hours = parseInt( diff / ( 1000 * 60 * 60 ) ); hours = Math.floor( diff / ( 1000 * 60 * 60 ) );
minutes = parseInt( ( diff / ( 1000 * 60 ) ) % 60 ); minutes = Math.floor( ( diff / ( 1000 * 60 ) ) % 60 );
seconds = parseInt( ( diff / 1000 ) % 60 ); seconds = Math.floor( ( diff / 1000 ) % 60 );
clockEl.innerHTML = now.toLocaleTimeString(); clockEl.innerHTML = now.toLocaleTimeString();
hoursEl.innerHTML = zeroPadInteger( hours ); hoursEl.innerHTML = zeroPadInteger( hours );

11
plugin/print-pdf/print-pdf.js
View file

@ -11,8 +11,13 @@
var page = new WebPage(); var page = new WebPage();
var system = require( 'system' ); var system = require( 'system' );
page.viewportSize = {
width: 1024,
height: 768
};
page.paperSize = { page.paperSize = {
format: 'A4', format: 'letter',
orientation: 'landscape', orientation: 'landscape',
margin: { margin: {
left: '0', left: '0',
@ -21,7 +26,6 @@ page.paperSize = {
bottom: '0' bottom: '0'
} }
}; };
page.zoomFactor = 1.5;
var revealFile = system.args[1] || 'index.html?print-pdf'; var revealFile = system.args[1] || 'index.html?print-pdf';
var slideFile = system.args[2] || 'slides.pdf'; var slideFile = system.args[2] || 'slides.pdf';
@ -36,4 +40,5 @@ page.open( revealFile, function( status ) {
console.log( 'Printed succesfully' ); console.log( 'Printed succesfully' );
page.render( slideFile ); page.render( slideFile );
phantom.exit(); phantom.exit();
} ); } );

BIN
test/assets/image1.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 22 KiB

BIN
test/assets/image2.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 10 KiB

95
test/background.html Normal file
View file

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

58
test/media.html Normal file
View file

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