merge conflicts w preview & backgrounds
This commit is contained in:
commit
7094f44eb9
14 changed files with 509 additions and 75 deletions
54
README.md
54
README.md
|
@ -5,7 +5,7 @@ A framework for easily creating beautiful presentations using HTML. [Check out t
|
||||||
reveal.js comes with a broad range of features including [nested slides](https://github.com/hakimel/reveal.js#markup), [markdown contents](https://github.com/hakimel/reveal.js#markdown), [PDF export](https://github.com/hakimel/reveal.js#pdf-export), [speaker notes](https://github.com/hakimel/reveal.js#speaker-notes) and a [JavaScript API](https://github.com/hakimel/reveal.js#api). It's best viewed in a browser with support for CSS 3D transforms but [fallbacks](https://github.com/hakimel/reveal.js/wiki/Browser-Support) are available to make sure your presentation can still be viewed elsewhere.
|
reveal.js comes with a broad range of features including [nested slides](https://github.com/hakimel/reveal.js#markup), [markdown contents](https://github.com/hakimel/reveal.js#markdown), [PDF export](https://github.com/hakimel/reveal.js#pdf-export), [speaker notes](https://github.com/hakimel/reveal.js#speaker-notes) and a [JavaScript API](https://github.com/hakimel/reveal.js#api). It's best viewed in a browser with support for CSS 3D transforms but [fallbacks](https://github.com/hakimel/reveal.js/wiki/Browser-Support) are available to make sure your presentation can still be viewed elsewhere.
|
||||||
|
|
||||||
|
|
||||||
#### More reading::
|
#### More reading:
|
||||||
- [Installation](#installation): Step-by-step instructions for getting reveal.js running on your computer.
|
- [Installation](#installation): Step-by-step instructions for getting reveal.js running on your computer.
|
||||||
- [Changelog](https://github.com/hakimel/reveal.js/wiki/Changelog): Up-to-date version history.
|
- [Changelog](https://github.com/hakimel/reveal.js/wiki/Changelog): Up-to-date version history.
|
||||||
- [Examples](https://github.com/hakimel/reveal.js/wiki/Example-Presentations): Presentations created with reveal.js, add your own!
|
- [Examples](https://github.com/hakimel/reveal.js/wiki/Example-Presentations): Presentations created with reveal.js, add your own!
|
||||||
|
@ -106,6 +106,9 @@ Reveal.initialize({
|
||||||
// Transition speed
|
// Transition speed
|
||||||
transitionSpeed: 'default', // default/fast/slow
|
transitionSpeed: 'default', // default/fast/slow
|
||||||
|
|
||||||
|
// Transition style for full page backgrounds
|
||||||
|
backgroundTransition: 'default' // default/linear
|
||||||
|
|
||||||
});
|
});
|
||||||
```
|
```
|
||||||
|
|
||||||
|
@ -211,18 +214,6 @@ Reveal.getCurrentSlide();
|
||||||
Reveal.getIndices(); // { h: 0, v: 0 } }
|
Reveal.getIndices(); // { h: 0, v: 0 } }
|
||||||
```
|
```
|
||||||
|
|
||||||
### States
|
|
||||||
|
|
||||||
If you set ``data-state="somestate"`` on a slide ``<section>``, "somestate" will be applied as a class on the document element when that slide is opened. This allows you to apply broad style changes to the page based on the active slide.
|
|
||||||
|
|
||||||
Furthermore you can also listen to these changes in state via JavaScript:
|
|
||||||
|
|
||||||
```javascript
|
|
||||||
Reveal.addEventListener( 'somestate', function() {
|
|
||||||
// TODO: Sprinkle magic
|
|
||||||
}, false );
|
|
||||||
```
|
|
||||||
|
|
||||||
### Ready event
|
### Ready event
|
||||||
|
|
||||||
The 'ready' event is fired when reveal.js has loaded all (synchronous) dependencies and is ready to start navigating.
|
The 'ready' event is fired when reveal.js has loaded all (synchronous) dependencies and is ready to start navigating.
|
||||||
|
@ -245,6 +236,37 @@ Reveal.addEventListener( 'slidechanged', function( event ) {
|
||||||
} );
|
} );
|
||||||
```
|
```
|
||||||
|
|
||||||
|
### States
|
||||||
|
|
||||||
|
If you set ``data-state="somestate"`` on a slide ``<section>``, "somestate" will be applied as a class on the document element when that slide is opened. This allows you to apply broad style changes to the page based on the active slide.
|
||||||
|
|
||||||
|
Furthermore you can also listen to these changes in state via JavaScript:
|
||||||
|
|
||||||
|
```javascript
|
||||||
|
Reveal.addEventListener( 'somestate', function() {
|
||||||
|
// TODO: Sprinkle magic
|
||||||
|
}, false );
|
||||||
|
```
|
||||||
|
|
||||||
|
### Slide backgrounds
|
||||||
|
|
||||||
|
Slides are contained withing a limited portion of the screen by default to allow them to fit any display and scale uniformly. You can apply full page background colors or images by applying a ```data-background``` attribute to your ```<section>``` elements. Below are a few examples.
|
||||||
|
|
||||||
|
```html
|
||||||
|
<section data-background="#ff0000">
|
||||||
|
<h2>All CSS color formats are supported, like rgba() or hsl().</h2>
|
||||||
|
</section>
|
||||||
|
<section data-background="http://example.com/image.png">
|
||||||
|
<h2>This slide will have a full-size background image.</h2>
|
||||||
|
</section>
|
||||||
|
<section data-background="http://example.com/image.png" data-background-size="100px" data-background-repeat="repeat">
|
||||||
|
<h2>This background image will be sized to 100px and repeated.</h2>
|
||||||
|
</section>
|
||||||
|
```
|
||||||
|
|
||||||
|
Backgrounds transition using a fade animation by default. This can be changed to a linear sliding transition by passing ```backgroundTransition: 'linear'``` to the ```Reveal.initialize()``` call.
|
||||||
|
|
||||||
|
|
||||||
### Internal links
|
### Internal links
|
||||||
|
|
||||||
It's easy to link between slides. The first example below targets the index of another slide whereas the second targets a slide with an ID attribute (```<section id="some-slide">```):
|
It's easy to link between slides. The first example below targets the index of another slide whereas the second targets a slide with an ID attribute (```<section id="some-slide">```):
|
||||||
|
@ -282,7 +304,7 @@ Note that this does not work with the page and cube transitions.
|
||||||
|
|
||||||
|
|
||||||
### Fragments
|
### Fragments
|
||||||
Fragments are used to highlight individual elements on a slide. Every elmement with the class ```fragment``` will be stepped through before moving on to the next slide. Here's an example: http://lab.hakim.se/reveal-js/#/16
|
Fragments are used to highlight individual elements on a slide. Every element with the class ```fragment``` will be stepped through before moving on to the next slide. Here's an example: http://lab.hakim.se/reveal-js/#/16
|
||||||
|
|
||||||
The default fragment style is to start out invisible and fade in. This style can be changed by appending a different class to the fragment:
|
The default fragment style is to start out invisible and fade in. This style can be changed by appending a different class to the fragment:
|
||||||
|
|
||||||
|
@ -583,11 +605,11 @@ The **basic setup** is for authoring presentations only. The **full setup** give
|
||||||
|
|
||||||
### Basic setup
|
### Basic setup
|
||||||
|
|
||||||
The core of reveal.js is very easy to install. You'll simply need to download a copy of this repository and open the index.html file directly in your browser.g
|
The core of reveal.js is very easy to install. You'll simply need to download a copy of this repository and open the index.html file directly in your browser.
|
||||||
|
|
||||||
1. Download a copy of reveal.js from <https://github.com/hakimel/reveal.js/archive/master.zip>
|
1. Download a copy of reveal.js from <https://github.com/hakimel/reveal.js/archive/master.zip>
|
||||||
|
|
||||||
2. Unizp and replace the example contents in index.html with your own
|
2. Unzip and replace the example contents in index.html with your own
|
||||||
|
|
||||||
3. Open index.html in a browser to view it
|
3. Open index.html in a browser to view it
|
||||||
|
|
||||||
|
|
|
@ -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;
|
||||||
}
|
}
|
||||||
|
|
113
css/reveal.css
113
css/reveal.css
|
@ -1252,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 {
|
||||||
|
@ -1306,6 +1307,104 @@ body {
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
|
/*********************************************
|
||||||
|
*
|
||||||
|
*********************************************/
|
||||||
|
|
||||||
|
.reveal>.backgrounds {
|
||||||
|
position: absolute;
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
}
|
||||||
|
.reveal .slide-background {
|
||||||
|
position: absolute;
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
opacity: 0;
|
||||||
|
visibility: hidden;
|
||||||
|
|
||||||
|
background-color: rgba( 0, 0, 0, 0 );
|
||||||
|
background-position: 50% 50%;
|
||||||
|
background-repeat: no-repeat;
|
||||||
|
background-size: cover;
|
||||||
|
|
||||||
|
-webkit-transition: all 600ms cubic-bezier(0.260, 0.860, 0.440, 0.985);
|
||||||
|
-moz-transition: all 600ms cubic-bezier(0.260, 0.860, 0.440, 0.985);
|
||||||
|
-ms-transition: all 600ms cubic-bezier(0.260, 0.860, 0.440, 0.985);
|
||||||
|
-o-transition: all 600ms cubic-bezier(0.260, 0.860, 0.440, 0.985);
|
||||||
|
transition: all 600ms cubic-bezier(0.260, 0.860, 0.440, 0.985);
|
||||||
|
}
|
||||||
|
.reveal .slide-background.present {
|
||||||
|
opacity: 1;
|
||||||
|
visibility: visible;
|
||||||
|
}
|
||||||
|
|
||||||
|
.print-pdf .reveal .slide-background {
|
||||||
|
opacity: 1 !important;
|
||||||
|
visibility: visible !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Linear sliding transition style */
|
||||||
|
.reveal[data-background-transition=linear]>.backgrounds .slide-background {
|
||||||
|
opacity: 1;
|
||||||
|
|
||||||
|
-webkit-backface-visibility: hidden;
|
||||||
|
-moz-backface-visibility: hidden;
|
||||||
|
-ms-backface-visibility: hidden;
|
||||||
|
backface-visibility: hidden;
|
||||||
|
|
||||||
|
-webkit-transition-duration: 800ms;
|
||||||
|
-moz-transition-duration: 800ms;
|
||||||
|
-ms-transition-duration: 800ms;
|
||||||
|
-o-transition-duration: 800ms;
|
||||||
|
transition-duration: 800ms;
|
||||||
|
}
|
||||||
|
.reveal[data-background-transition=linear]>.backgrounds .slide-background.past {
|
||||||
|
-webkit-transform: translate(-100%, 0);
|
||||||
|
-moz-transform: translate(-100%, 0);
|
||||||
|
-ms-transform: translate(-100%, 0);
|
||||||
|
-o-transform: translate(-100%, 0);
|
||||||
|
transform: translate(-100%, 0);
|
||||||
|
}
|
||||||
|
.reveal[data-background-transition=linear]>.backgrounds .slide-background.future {
|
||||||
|
-webkit-transform: translate(100%, 0);
|
||||||
|
-moz-transform: translate(100%, 0);
|
||||||
|
-ms-transform: translate(100%, 0);
|
||||||
|
-o-transform: translate(100%, 0);
|
||||||
|
transform: translate(100%, 0);
|
||||||
|
}
|
||||||
|
|
||||||
|
.reveal[data-background-transition=linear]>.backgrounds .slide-background>.slide-background.past {
|
||||||
|
-webkit-transform: translate(0, -100%);
|
||||||
|
-moz-transform: translate(0, -100%);
|
||||||
|
-ms-transform: translate(0, -100%);
|
||||||
|
-o-transform: translate(0, -100%);
|
||||||
|
transform: translate(0, -100%);
|
||||||
|
}
|
||||||
|
.reveal[data-background-transition=linear]>.backgrounds .slide-background>.slide-background.future {
|
||||||
|
-webkit-transform: translate(0, 100%);
|
||||||
|
-moz-transform: translate(0, 100%);
|
||||||
|
-ms-transform: translate(0, 100%);
|
||||||
|
-o-transform: translate(0, 100%);
|
||||||
|
transform: translate(0, 100%);
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
/* Global transition speed settings */
|
||||||
|
.reveal[data-transition-speed="fast"]>.backgrounds .slide-background {
|
||||||
|
-webkit-transition-duration: 400ms;
|
||||||
|
-moz-transition-duration: 400ms;
|
||||||
|
-ms-transition-duration: 400ms;
|
||||||
|
transition-duration: 400ms;
|
||||||
|
}
|
||||||
|
.reveal[data-transition-speed="slow"]>.backgrounds .slide-background {
|
||||||
|
-webkit-transition-duration: 1200ms;
|
||||||
|
-moz-transition-duration: 1200ms;
|
||||||
|
-ms-transition-duration: 1200ms;
|
||||||
|
transition-duration: 1200ms;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
/*********************************************
|
/*********************************************
|
||||||
* RTL SUPPORT
|
* RTL SUPPORT
|
||||||
*********************************************/
|
*********************************************/
|
||||||
|
|
2
css/reveal.min.css
vendored
2
css/reveal.min.css
vendored
File diff suppressed because one or more lines are too long
37
index.html
37
index.html
|
@ -183,29 +183,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 +203,26 @@ Reveal.addEventListener( 'customevent', function() {
|
||||||
</code></pre>
|
</code></pre>
|
||||||
</section>
|
</section>
|
||||||
|
|
||||||
|
<section>
|
||||||
|
<section data-background="#007777">
|
||||||
|
<h2>Slide Backgrounds</h2>
|
||||||
|
<p>
|
||||||
|
Set <code>data-background="#007777"</code> on a slide to change the full page background to the given color. All CSS color formats are supported.
|
||||||
|
</p>
|
||||||
|
<a href="#" class="image navigate-down">
|
||||||
|
<img width="178" height="238" src="https://s3.amazonaws.com/hakim-static/reveal-js/arrow.png" alt="Down arrow">
|
||||||
|
</a>
|
||||||
|
</section>
|
||||||
|
<section data-background="https://s3.amazonaws.com/hakim-static/reveal-js/arrow.png">
|
||||||
|
<h2>Image Backgrounds</h2>
|
||||||
|
<pre><code><section data-background="image.png"></code></pre>
|
||||||
|
</section>
|
||||||
|
<section data-background="https://s3.amazonaws.com/hakim-static/reveal-js/arrow.png" data-background-repeat="repeat" data-background-size="100px">
|
||||||
|
<h2>Repeated Image Backgrounds</h2>
|
||||||
|
<pre><code style="word-wrap: break-word;"><section data-background="image.png" data-background-repeat="repeat" data-background-size="100px"></code></pre>
|
||||||
|
</section>
|
||||||
|
</section>
|
||||||
|
|
||||||
<section>
|
<section>
|
||||||
<h2>Clever Quotes</h2>
|
<h2>Clever Quotes</h2>
|
||||||
<p>
|
<p>
|
||||||
|
|
155
js/reveal.js
155
js/reveal.js
|
@ -82,6 +82,9 @@ var Reveal = (function(){
|
||||||
// Transition speed
|
// Transition speed
|
||||||
transitionSpeed: 'default', // default/fast/slow
|
transitionSpeed: 'default', // default/fast/slow
|
||||||
|
|
||||||
|
// Transition style for full page slide backgrounds
|
||||||
|
backgroundTransition: 'default', // default/linear
|
||||||
|
|
||||||
// Script dependencies to load
|
// Script dependencies to load
|
||||||
dependencies: []
|
dependencies: []
|
||||||
},
|
},
|
||||||
|
@ -189,6 +192,13 @@ var Reveal = (function(){
|
||||||
dom.wrapper = document.querySelector( '.reveal' );
|
dom.wrapper = document.querySelector( '.reveal' );
|
||||||
dom.slides = document.querySelector( '.reveal .slides' );
|
dom.slides = document.querySelector( '.reveal .slides' );
|
||||||
|
|
||||||
|
// Background element
|
||||||
|
if( !document.querySelector( '.reveal .backgrounds' ) ) {
|
||||||
|
dom.background = document.createElement( 'div' );
|
||||||
|
dom.background.classList.add( 'backgrounds' );
|
||||||
|
dom.wrapper.appendChild( dom.background );
|
||||||
|
}
|
||||||
|
|
||||||
// Progress bar
|
// Progress bar
|
||||||
if( !dom.wrapper.querySelector( '.progress' ) ) {
|
if( !dom.wrapper.querySelector( '.progress' ) ) {
|
||||||
var progressElement = document.createElement( 'div' );
|
var progressElement = document.createElement( 'div' );
|
||||||
|
@ -208,11 +218,11 @@ var Reveal = (function(){
|
||||||
dom.wrapper.appendChild( controlsElement );
|
dom.wrapper.appendChild( controlsElement );
|
||||||
}
|
}
|
||||||
|
|
||||||
// Presentation background element
|
// State background element [DEPRECATED]
|
||||||
if( !dom.wrapper.querySelector( '.state-background' ) ) {
|
if( !dom.wrapper.querySelector( '.state-background' ) ) {
|
||||||
var backgroundElement = document.createElement( 'div' );
|
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
|
||||||
|
@ -240,6 +250,86 @@ var Reveal = (function(){
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Creates the slide background elements and appends them
|
||||||
|
* to the background container. One element is created per
|
||||||
|
* slide no matter if the given slide has visible background.
|
||||||
|
*/
|
||||||
|
function createBackgrounds() {
|
||||||
|
|
||||||
|
if( isPrintingPDF() ) {
|
||||||
|
document.body.classList.add( 'print-pdf' );
|
||||||
|
}
|
||||||
|
|
||||||
|
// Clear prior backgrounds
|
||||||
|
dom.background.innerHTML = '';
|
||||||
|
dom.background.classList.add( 'no-transition' );
|
||||||
|
|
||||||
|
// Helper method for creating a background element for the
|
||||||
|
// given slide
|
||||||
|
function _createBackground( slide, container ) {
|
||||||
|
|
||||||
|
var data = {
|
||||||
|
background: slide.getAttribute( 'data-background' ),
|
||||||
|
backgroundSize: slide.getAttribute( 'data-background-size' ),
|
||||||
|
backgroundColor: slide.getAttribute( 'data-background-color' ),
|
||||||
|
backgroundRepeat: slide.getAttribute( 'data-background-repeat' ),
|
||||||
|
backgroundPosition: slide.getAttribute( 'data-background-position' )
|
||||||
|
};
|
||||||
|
|
||||||
|
var element = document.createElement( 'div' );
|
||||||
|
element.className = 'slide-background';
|
||||||
|
|
||||||
|
if( data.background ) {
|
||||||
|
// Auto-wrap image urls in url(...)
|
||||||
|
if( /\.(png|jpg|jpeg|gif|bmp)$/gi.test( data.background ) ) {
|
||||||
|
element.style.backgroundImage = 'url('+ data.background +')';
|
||||||
|
}
|
||||||
|
else {
|
||||||
|
element.style.background = data.background;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// Additional and optional background properties
|
||||||
|
if( data.backgroundSize ) element.style.backgroundSize = data.backgroundSize;
|
||||||
|
if( data.backgroundColor ) element.style.backgroundColor = data.backgroundColor;
|
||||||
|
if( data.backgroundRepeat ) element.style.backgroundRepeat = data.backgroundRepeat;
|
||||||
|
if( data.backgroundPosition ) element.style.backgroundPosition = data.backgroundPosition;
|
||||||
|
|
||||||
|
container.appendChild( element );
|
||||||
|
|
||||||
|
return element;
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
// Iterate over all horizontal slides
|
||||||
|
toArray( document.querySelectorAll( HORIZONTAL_SLIDES_SELECTOR ) ).forEach( function( slideh ) {
|
||||||
|
|
||||||
|
var backgroundStack;
|
||||||
|
|
||||||
|
if( isPrintingPDF() ) {
|
||||||
|
backgroundStack = _createBackground( slideh, slideh );
|
||||||
|
}
|
||||||
|
else {
|
||||||
|
backgroundStack = _createBackground( slideh, dom.background );
|
||||||
|
}
|
||||||
|
|
||||||
|
// Iterate over all vertical slides
|
||||||
|
toArray( slideh.querySelectorAll( 'section' ) ).forEach( function( slidev ) {
|
||||||
|
|
||||||
|
if( isPrintingPDF() ) {
|
||||||
|
_createBackground( slidev, slidev );
|
||||||
|
}
|
||||||
|
else {
|
||||||
|
_createBackground( slidev, backgroundStack );
|
||||||
|
}
|
||||||
|
|
||||||
|
} );
|
||||||
|
|
||||||
|
} );
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Hides the address bar if we're on a mobile device.
|
* Hides the address bar if we're on a mobile device.
|
||||||
*/
|
*/
|
||||||
|
@ -351,6 +441,7 @@ var Reveal = (function(){
|
||||||
dom.wrapper.classList.add( config.transition );
|
dom.wrapper.classList.add( config.transition );
|
||||||
|
|
||||||
dom.wrapper.setAttribute( 'data-transition-speed', config.transitionSpeed );
|
dom.wrapper.setAttribute( 'data-transition-speed', config.transitionSpeed );
|
||||||
|
dom.wrapper.setAttribute( 'data-background-transition', config.backgroundTransition );
|
||||||
|
|
||||||
if( dom.controls ) {
|
if( dom.controls ) {
|
||||||
dom.controls.style.display = ( config.controls && dom.controls ) ? 'block' : 'none';
|
dom.controls.style.display = ( config.controls && dom.controls ) ? 'block' : 'none';
|
||||||
|
@ -570,6 +661,15 @@ var Reveal = (function(){
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Checks if this instance is being used to print a PDF.
|
||||||
|
*/
|
||||||
|
function isPrintingPDF() {
|
||||||
|
|
||||||
|
return ( /print-pdf/gi ).test( window.location.search );
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Causes the address bar to hide on mobile devices,
|
* Causes the address bar to hide on mobile devices,
|
||||||
* more vertical space ftw.
|
* more vertical space ftw.
|
||||||
|
@ -770,7 +870,7 @@ var Reveal = (function(){
|
||||||
*/
|
*/
|
||||||
function layout() {
|
function layout() {
|
||||||
|
|
||||||
if( dom.wrapper ) {
|
if( dom.wrapper && !isPrintingPDF() ) {
|
||||||
|
|
||||||
// Available space to scale within
|
// Available space to scale within
|
||||||
var availableWidth = dom.wrapper.offsetWidth,
|
var availableWidth = dom.wrapper.offsetWidth,
|
||||||
|
@ -1262,7 +1362,8 @@ var Reveal = (function(){
|
||||||
}
|
}
|
||||||
|
|
||||||
// Dispatch an event if the slide changed
|
// Dispatch an event if the slide changed
|
||||||
if( indexh !== indexhBefore || indexv !== indexvBefore ) {
|
var slideChanged = ( indexh !== indexhBefore || indexv !== indexvBefore );
|
||||||
|
if( slideChanged ) {
|
||||||
dispatchEvent( 'slidechanged', {
|
dispatchEvent( 'slidechanged', {
|
||||||
'indexh': indexh,
|
'indexh': indexh,
|
||||||
'indexv': indexv,
|
'indexv': indexv,
|
||||||
|
@ -1299,11 +1400,14 @@ var Reveal = (function(){
|
||||||
}
|
}
|
||||||
|
|
||||||
// Handle embedded content
|
// Handle embedded content
|
||||||
|
if( slideChanged ) {
|
||||||
stopEmbeddedContent( previousSlide );
|
stopEmbeddedContent( previousSlide );
|
||||||
startEmbeddedContent( currentSlide );
|
startEmbeddedContent( currentSlide );
|
||||||
|
}
|
||||||
|
|
||||||
updateControls();
|
updateControls();
|
||||||
updateProgress();
|
updateProgress();
|
||||||
|
updateBackground();
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -1327,8 +1431,12 @@ var Reveal = (function(){
|
||||||
// Start auto-sliding if it's enabled
|
// Start auto-sliding if it's enabled
|
||||||
cueAutoSlide();
|
cueAutoSlide();
|
||||||
|
|
||||||
|
// Re-create the slide backgrounds
|
||||||
|
createBackgrounds();
|
||||||
|
|
||||||
updateControls();
|
updateControls();
|
||||||
updateProgress();
|
updateProgress();
|
||||||
|
updateBackground();
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -1385,6 +1493,9 @@ var Reveal = (function(){
|
||||||
element.classList.remove( 'present' );
|
element.classList.remove( 'present' );
|
||||||
element.classList.remove( 'future' );
|
element.classList.remove( 'future' );
|
||||||
|
|
||||||
|
// http://www.w3.org/html/wg/drafts/html/master/editing.html#the-hidden-attribute
|
||||||
|
element.setAttribute( 'hidden', '' );
|
||||||
|
|
||||||
if( i < index ) {
|
if( i < index ) {
|
||||||
// Any element previous to index is given the 'past' class
|
// Any element previous to index is given the 'past' class
|
||||||
element.classList.add( reverse ? 'future' : 'past' );
|
element.classList.add( reverse ? 'future' : 'past' );
|
||||||
|
@ -1402,6 +1513,7 @@ var Reveal = (function(){
|
||||||
|
|
||||||
// Mark the current slide as present
|
// Mark the current slide as present
|
||||||
slides[index].classList.add( 'present' );
|
slides[index].classList.add( 'present' );
|
||||||
|
slides[index].removeAttribute( 'hidden' );
|
||||||
|
|
||||||
// If this slide has a state associated with it, add it
|
// If this slide has a state associated with it, add it
|
||||||
// onto the current state of the deck
|
// onto the current state of the deck
|
||||||
|
@ -1533,6 +1645,37 @@ var Reveal = (function(){
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Updates the background elements to reflect the current
|
||||||
|
* slide.
|
||||||
|
*/
|
||||||
|
function updateBackground() {
|
||||||
|
|
||||||
|
// Update the classes of all backgrounds to match the
|
||||||
|
// states of their slides (past/present/future)
|
||||||
|
toArray( dom.background.childNodes ).forEach( function( backgroundh, h ) {
|
||||||
|
|
||||||
|
// Reverse past/future classes when in RTL mode
|
||||||
|
var horizontalPast = config.rtl ? 'future' : 'past',
|
||||||
|
horizontalFuture = config.rtl ? 'past' : 'future';
|
||||||
|
|
||||||
|
backgroundh.className = 'slide-background ' + ( h < indexh ? horizontalPast : h > indexh ? horizontalFuture : 'present' );
|
||||||
|
|
||||||
|
toArray( backgroundh.childNodes ).forEach( function( backgroundv, v ) {
|
||||||
|
|
||||||
|
backgroundv.className = 'slide-background ' + ( v < indexv ? 'past' : v > indexv ? 'future' : 'present' );
|
||||||
|
|
||||||
|
} );
|
||||||
|
|
||||||
|
} );
|
||||||
|
|
||||||
|
// Allow the first background to apply without transition
|
||||||
|
setTimeout( function() {
|
||||||
|
dom.background.classList.remove( 'no-transition' );
|
||||||
|
}, 1 );
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Determine what available routes there are for navigation.
|
* Determine what available routes there are for navigation.
|
||||||
*
|
*
|
||||||
|
|
4
js/reveal.min.js
vendored
4
js/reveal.min.js
vendored
File diff suppressed because one or more lines are too long
|
@ -30,6 +30,7 @@ app.configure(function() {
|
||||||
});
|
});
|
||||||
|
|
||||||
app.get("/", function(req, res) {
|
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);
|
||||||
});
|
});
|
||||||
|
|
||||||
|
|
|
@ -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);
|
||||||
});
|
});
|
||||||
|
|
||||||
|
|
|
@ -213,9 +213,9 @@
|
||||||
now = new Date();
|
now = new Date();
|
||||||
|
|
||||||
diff = now.getTime() - start.getTime();
|
diff = now.getTime() - start.getTime();
|
||||||
hours = parseInt( diff / ( 1000 * 60 * 60 ) );
|
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 );
|
||||||
|
|
BIN
test/assets/image1.png
Normal file
BIN
test/assets/image1.png
Normal file
Binary file not shown.
After Width: | Height: | Size: 22 KiB |
BIN
test/assets/image2.png
Normal file
BIN
test/assets/image2.png
Normal file
Binary file not shown.
After Width: | Height: | Size: 10 KiB |
95
test/background.html
Normal file
95
test/background.html
Normal file
|
@ -0,0 +1,95 @@
|
||||||
|
<!doctype html>
|
||||||
|
<html lang="en">
|
||||||
|
|
||||||
|
<head>
|
||||||
|
<meta charset="utf-8">
|
||||||
|
|
||||||
|
<title>reveal.js - Test</title>
|
||||||
|
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
|
||||||
|
|
||||||
|
<link rel="stylesheet" href="../css/reveal.min.css">
|
||||||
|
<link rel="stylesheet" href="../css/theme/serif.css" id="theme">
|
||||||
|
</head>
|
||||||
|
|
||||||
|
<body>
|
||||||
|
|
||||||
|
<div class="reveal">
|
||||||
|
|
||||||
|
<div class="slides">
|
||||||
|
|
||||||
|
<section data-background="#00ffff">
|
||||||
|
<h2>data-background: #00ffff</h2>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<section data-background="#bb00bb">
|
||||||
|
<h2>data-background: #bb00bb</h2>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<section>
|
||||||
|
<section data-background="#ff0000">
|
||||||
|
<h2>data-background: #ff0000</h2>
|
||||||
|
</section>
|
||||||
|
<section data-background="rgba(0, 0, 0, 0.2)">
|
||||||
|
<h2>data-background: rgba(0, 0, 0, 0.2)</h2>
|
||||||
|
</section>
|
||||||
|
<section data-background="salmon">
|
||||||
|
<h2>data-background: salmon</h2>
|
||||||
|
</section>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<section data-background="rgba(0, 100, 100, 0.2)">
|
||||||
|
<section>
|
||||||
|
<h2>Background applied to stack</h2>
|
||||||
|
</section>
|
||||||
|
<section>
|
||||||
|
<h2>Background applied to stack</h2>
|
||||||
|
</section>
|
||||||
|
<section data-background="rgba(100, 0, 0, 0.2)">
|
||||||
|
<h2>Background applied to slide inside of stack</h2>
|
||||||
|
</section>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<section data-background="assets/image1.png" style="background: rgba(255,255,255,0.9)">
|
||||||
|
<h2>Background image</h2>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<section data-background="assets/image2.png" data-background-size="100px" data-background-repeat="repeat" data-background-color="#111" style="background: rgba(255,255,255,0.9)">
|
||||||
|
<h2>Background image</h2>
|
||||||
|
<pre>data-background-size="100px" data-background-repeat="repeat" data-background-color="#111"</pre>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<section data-background="#888888">
|
||||||
|
<h2>Same background twice (1/2)</h2>
|
||||||
|
</section>
|
||||||
|
<section data-background="#888888">
|
||||||
|
<h2>Same background twice (2/2)</h2>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<script src="../lib/js/head.min.js"></script>
|
||||||
|
<script src="../js/reveal.min.js"></script>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
|
||||||
|
// Full list of configuration options available here:
|
||||||
|
// https://github.com/hakimel/reveal.js#configuration
|
||||||
|
Reveal.initialize({
|
||||||
|
controls: true,
|
||||||
|
progress: true,
|
||||||
|
history: true,
|
||||||
|
center: true,
|
||||||
|
// rtl: true,
|
||||||
|
|
||||||
|
transition: 'linear',
|
||||||
|
// transitionSpeed: 'slow',
|
||||||
|
// backgroundTransition: 'linear'
|
||||||
|
});
|
||||||
|
|
||||||
|
</script>
|
||||||
|
|
||||||
|
</body>
|
||||||
|
</html>
|
58
test/media.html
Normal file
58
test/media.html
Normal file
|
@ -0,0 +1,58 @@
|
||||||
|
<!doctype html>
|
||||||
|
<html lang="en">
|
||||||
|
|
||||||
|
<head>
|
||||||
|
<meta charset="utf-8">
|
||||||
|
|
||||||
|
<title>reveal.js - Test</title>
|
||||||
|
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
|
||||||
|
|
||||||
|
<link rel="stylesheet" href="../css/reveal.min.css">
|
||||||
|
<link rel="stylesheet" href="../css/theme/default.css" id="theme">
|
||||||
|
</head>
|
||||||
|
|
||||||
|
<body>
|
||||||
|
|
||||||
|
<div class="reveal">
|
||||||
|
|
||||||
|
<div class="slides">
|
||||||
|
|
||||||
|
<section>
|
||||||
|
<h2>Embedded Media Test</h2>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<section>
|
||||||
|
<iframe data-autoplay width="420" height="345" src="http://www.youtube.com/embed/l3RQZ4mcr1c"></iframe>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<section>
|
||||||
|
<h2>Empty Slide</h2>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<script src="../lib/js/head.min.js"></script>
|
||||||
|
<script src="../js/reveal.min.js"></script>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
|
||||||
|
// Full list of configuration options available here:
|
||||||
|
// https://github.com/hakimel/reveal.js#configuration
|
||||||
|
Reveal.initialize({
|
||||||
|
controls: true,
|
||||||
|
progress: true,
|
||||||
|
history: true,
|
||||||
|
center: true,
|
||||||
|
|
||||||
|
transition: 'linear',
|
||||||
|
// transitionSpeed: 'slow',
|
||||||
|
// backgroundTransition: 'linear'
|
||||||
|
});
|
||||||
|
|
||||||
|
</script>
|
||||||
|
|
||||||
|
</body>
|
||||||
|
</html>
|
Loading…
Reference in a new issue