xobs/lca2019-talk
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

merge conflicts w preview & backgrounds

Browse Source
This commit is contained in:
Hakim El Hattab
2013-06-10 16:53:41 -04:00
parent 8b355eaba0 424f8ee961
commit 7094f44eb9
14 changed files with 509 additions and 75 deletions
Download Patch File Download Diff File Expand all files Collapse all files

54
README.md
View File

@@ -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

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;
} }

113
css/reveal.css
View File

@@ -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
View File

File diff suppressed because one or more lines are too long

49
index.html
View File

@@ -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>&lt;section data-background="image.png"&gt;</code></pre>
</section>
<section data-background="https://s3.amazonaws.com/hakim-static/reveal-js/arrow.png" data-background-repeat="repeat" data-background-size="100px">
<h2>Repeated Image Backgrounds</h2>
<pre><code style="word-wrap: break-word;">&lt;section data-background="image.png" data-background-repeat="repeat" data-background-size="100px"&gt;</code></pre>
</section>
</section>
<section> <section>
<h2>Clever Quotes</h2> <h2>Clever Quotes</h2>
<p> <p>

159
js/reveal.js
View File

@@ -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
stopEmbeddedContent( previousSlide ); if( slideChanged ) {
startEmbeddedContent( currentSlide ); stopEmbeddedContent( previousSlide );
startEmbeddedContent( currentSlide );
}
updateControls(); updateControls();
updateProgress(); updateProgress();
updateBackground();
} }
@@ -1327,8 +1431,12 @@ var Reveal = (function(){
// Start auto-sliding if it's enabled // Start auto-sliding if it's enabled
cueAutoSlide(); cueAutoSlide();
// Re-create the slide backgrounds
createBackgrounds();
updateControls(); updateControls();
updateProgress(); updateProgress();
updateBackground();
} }
@@ -1385,6 +1493,9 @@ var Reveal = (function(){
element.classList.remove( 'present' ); element.classList.remove( 'present' );
element.classList.remove( 'future' ); element.classList.remove( 'future' );
// http://www.w3.org/html/wg/drafts/html/master/editing.html#the-hidden-attribute
element.setAttribute( 'hidden', '' );
if( i < index ) { if( i < index ) {
// Any element previous to index is given the 'past' class // Any element previous to index is given the 'past' class
element.classList.add( reverse ? 'future' : 'past' ); element.classList.add( reverse ? 'future' : 'past' );
@@ -1402,6 +1513,7 @@ var Reveal = (function(){
// Mark the current slide as present // Mark the current slide as present
slides[index].classList.add( 'present' ); slides[index].classList.add( 'present' );
slides[index].removeAttribute( 'hidden' );
// If this slide has a state associated with it, add it // If this slide has a state associated with it, add it
// onto the current state of the deck // onto the current state of the deck
@@ -1533,6 +1645,37 @@ var Reveal = (function(){
} }
/**
* Updates the background elements to reflect the current
* slide.
*/
function updateBackground() {
// Update the classes of all backgrounds to match the
// states of their slides (past/present/future)
toArray( dom.background.childNodes ).forEach( function( backgroundh, h ) {
// Reverse past/future classes when in RTL mode
var horizontalPast = config.rtl ? 'future' : 'past',
horizontalFuture = config.rtl ? 'past' : 'future';
backgroundh.className = 'slide-background ' + ( h < indexh ? horizontalPast : h > indexh ? horizontalFuture : 'present' );
toArray( backgroundh.childNodes ).forEach( function( backgroundv, v ) {
backgroundv.className = 'slide-background ' + ( v < indexv ? 'past' : v > indexv ? 'future' : 'present' );
} );
} );
// Allow the first background to apply without transition
setTimeout( function() {
dom.background.classList.remove( 'no-transition' );
}, 1 );
}
/** /**
* Determine what available routes there are for navigation. * Determine what available routes there are for navigation.
* *

4
js/reveal.min.js vendored
View File

File diff suppressed because one or more lines are too long

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);
}); });

6
plugin/notes/notes.html
View File

@@ -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
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>