move notes-server plugin out of reveal.js core
This commit is contained in:
Hakim El Hattab
parent
93cdf8cfcc
commit
ad113ba69d
72
README.md
72
README.md
@ -54,9 +54,9 @@ This project was started and is maintained by [@hakimel](https://github.com/haki
|
|||||||
- [Speaker Notes](#speaker-notes)
|
- [Speaker Notes](#speaker-notes)
|
||||||
- [Share and Print Speaker Notes](#share-and-print-speaker-notes)
|
- [Share and Print Speaker Notes](#share-and-print-speaker-notes)
|
||||||
- [Server Side Speaker Notes](#server-side-speaker-notes)
|
- [Server Side Speaker Notes](#server-side-speaker-notes)
|
||||||
- [Plugins](#plugins)
|
|
||||||
- [Multiplexing](#multiplexing)
|
- [Multiplexing](#multiplexing)
|
||||||
- [MathJax](#mathjax)
|
- [MathJax](#mathjax)
|
||||||
|
- [Plugins](#plugins)
|
||||||
- [License](#license)
|
- [License](#license)
|
||||||
|
|
||||||
#### More reading
|
#### More reading
|
||||||
@ -1399,54 +1399,12 @@ The pacing timer can be enabled by configuring the `defaultTiming` parameter in
|
|||||||
|
|
||||||
## Server Side Speaker Notes
|
## Server Side Speaker Notes
|
||||||
|
|
||||||
In some cases it can be desirable to run notes on a separate device from the one you're presenting on. The Node.js-based notes plugin lets you do this using the same note definitions as its client side counterpart. Include the required scripts by adding the following dependencies:
|
In some cases it can be desirable to run notes on a separate device from the one you're presenting on. The Node.js-based notes plugin lets you do this using the same note definitions as its client side counterpart. See <https://github.com/reveal/notes-server>.
|
||||||
|
|
||||||
```javascript
|
|
||||||
Reveal.initialize({
|
|
||||||
// ...
|
|
||||||
|
|
||||||
dependencies: [
|
|
||||||
{ src: 'socket.io/socket.io.js', async: true },
|
|
||||||
{ src: 'plugin/notes-server/client.js', async: true }
|
|
||||||
]
|
|
||||||
});
|
|
||||||
```
|
|
||||||
|
|
||||||
Then:
|
|
||||||
|
|
||||||
1. Install [Node.js](http://nodejs.org/) (9.0.0 or later)
|
|
||||||
2. Run `npm install`
|
|
||||||
3. Run `node plugin/notes-server`
|
|
||||||
|
|
||||||
|
|
||||||
## Plugins
|
|
||||||
|
|
||||||
Plugins should register themselves with reveal.js by calling `Reveal.registerPlugin( MyPlugin )`. Registered plugins _must_ expose a unique `id` property and can optionally expose an `init` function that reveal.js will call to initialize them.
|
|
||||||
|
|
||||||
When reveal.js is booted up via `initialize()`, it will go through all registered plugins and invoke their `init` methods. If the `init` method returns a Promise, reveal.js will wait for that promise to be fulfilled before finishing the startup sequence and firing the [ready](#ready-event) event. Here's an example of a plugin that does some asynchronous work before reveal.js can proceed:
|
|
||||||
|
|
||||||
```javascript
|
|
||||||
let MyPlugin = {
|
|
||||||
id: 'myPlugin',
|
|
||||||
init: deck => new Promise( resolve => setTimeout( resolve, 3000 ) )
|
|
||||||
};
|
|
||||||
Reveal.initialize({
|
|
||||||
dependencies: [ { plugin: MyPlugin } ]
|
|
||||||
}).then( () => {
|
|
||||||
console.log( 'Three seconds later...' )
|
|
||||||
} );
|
|
||||||
```
|
|
||||||
|
|
||||||
Note that reveal.js will *not* wait for init Promise fulfillment if the plugin is loaded as an [async dependency](#dependencies). If the plugin's init method does _not_ return a Promise, the plugin is considered ready right away and will not hold up the reveal.js startup sequence.
|
|
||||||
|
|
||||||
### Retrieving Plugins
|
|
||||||
|
|
||||||
If you want to check if a specific plugin is registered you can use the `Reveal.hasPlugin` method and pass in a plugin ID, for example: `Reveal.hasPlugin( 'myPlugin' )`. If you want to retrieve a plugin instance you can use `Reveal.getPlugin( 'myPlugin' )`.
|
|
||||||
|
|
||||||
|
|
||||||
## Multiplexing
|
## Multiplexing
|
||||||
|
|
||||||
The multiplex plugin allows your audience to follow the slides of the presentation you are controlling on their own phone, tablet or laptop. As of 4.0.0 this plugin has moved to its own repo at <https://github.com/reveal/multiplex>;
|
The multiplex plugin allows your audience to follow the slides of the presentation you are controlling on their own phone, tablet or laptop. As of 4.0.0 this plugin has moved to its own repo at <https://github.com/reveal/multiplex>.
|
||||||
|
|
||||||
|
|
||||||
## MathJax
|
## MathJax
|
||||||
@ -1483,6 +1441,30 @@ If you want to include math inside of a presentation written in Markdown you nee
|
|||||||
`$$ J(\theta_0,\theta_1) = \sum_{i=0} $$`
|
`$$ J(\theta_0,\theta_1) = \sum_{i=0} $$`
|
||||||
```
|
```
|
||||||
|
|
||||||
|
## Plugins
|
||||||
|
|
||||||
|
Plugins should register themselves with reveal.js by calling `Reveal.registerPlugin( MyPlugin )`. Registered plugins _must_ expose a unique `id` property and can optionally expose an `init` function that reveal.js will call to initialize them.
|
||||||
|
|
||||||
|
When reveal.js is booted up via `initialize()`, it will go through all registered plugins and invoke their `init` methods. If the `init` method returns a Promise, reveal.js will wait for that promise to be fulfilled before finishing the startup sequence and firing the [ready](#ready-event) event. Here's an example of a plugin that does some asynchronous work before reveal.js can proceed:
|
||||||
|
|
||||||
|
```javascript
|
||||||
|
let MyPlugin = {
|
||||||
|
id: 'myPlugin',
|
||||||
|
init: deck => new Promise( resolve => setTimeout( resolve, 3000 ) )
|
||||||
|
};
|
||||||
|
Reveal.initialize({
|
||||||
|
dependencies: [ { plugin: MyPlugin } ]
|
||||||
|
}).then( () => {
|
||||||
|
console.log( 'Three seconds later...' )
|
||||||
|
} );
|
||||||
|
```
|
||||||
|
|
||||||
|
Note that reveal.js will *not* wait for init Promise fulfillment if the plugin is loaded as an [async dependency](#dependencies). If the plugin's init method does _not_ return a Promise, the plugin is considered ready right away and will not hold up the reveal.js startup sequence.
|
||||||
|
|
||||||
|
### Retrieving Plugins
|
||||||
|
|
||||||
|
If you want to check if a specific plugin is registered you can use the `Reveal.hasPlugin` method and pass in a plugin ID, for example: `Reveal.hasPlugin( 'myPlugin' )`. If you want to retrieve a plugin instance you can use `Reveal.getPlugin( 'myPlugin' )`.
|
||||||
|
|
||||||
## License
|
## License
|
||||||
|
|
||||||
MIT licensed
|
MIT licensed
|
||||||
|
|||||||
@ -1,65 +0,0 @@
|
|||||||
(function() {
|
|
||||||
|
|
||||||
// don't emit events from inside the previews themselves
|
|
||||||
if( window.location.search.match( /receiver/gi ) ) { return; }
|
|
||||||
|
|
||||||
var socket = io.connect( window.location.origin ),
|
|
||||||
socketId = Math.random().toString().slice( 2 );
|
|
||||||
|
|
||||||
console.log( 'View slide notes at ' + window.location.origin + '/notes/' + socketId );
|
|
||||||
|
|
||||||
window.open( window.location.origin + '/notes/' + socketId, 'notes-' + socketId );
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Posts the current slide data to the notes window
|
|
||||||
*/
|
|
||||||
function post() {
|
|
||||||
|
|
||||||
var slideElement = Reveal.getCurrentSlide(),
|
|
||||||
notesElement = slideElement.querySelector( 'aside.notes' );
|
|
||||||
|
|
||||||
var messageData = {
|
|
||||||
notes: '',
|
|
||||||
markdown: false,
|
|
||||||
socketId: socketId,
|
|
||||||
state: Reveal.getState()
|
|
||||||
};
|
|
||||||
|
|
||||||
// Look for notes defined in a slide attribute
|
|
||||||
if( slideElement.hasAttribute( 'data-notes' ) ) {
|
|
||||||
messageData.notes = slideElement.getAttribute( 'data-notes' );
|
|
||||||
}
|
|
||||||
|
|
||||||
// Look for notes defined in an aside element
|
|
||||||
if( notesElement ) {
|
|
||||||
messageData.notes = notesElement.innerHTML;
|
|
||||||
messageData.markdown = typeof notesElement.getAttribute( 'data-markdown' ) === 'string';
|
|
||||||
}
|
|
||||||
|
|
||||||
socket.emit( 'statechanged', messageData );
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
// When a new notes window connects, post our current state
|
|
||||||
socket.on( 'new-subscriber', function( data ) {
|
|
||||||
post();
|
|
||||||
} );
|
|
||||||
|
|
||||||
// When the state changes from inside of the speaker view
|
|
||||||
socket.on( 'statechanged-speaker', function( data ) {
|
|
||||||
Reveal.setState( data.state );
|
|
||||||
} );
|
|
||||||
|
|
||||||
// Monitor events that trigger a change in state
|
|
||||||
Reveal.on( 'slidechanged', post );
|
|
||||||
Reveal.on( 'fragmentshown', post );
|
|
||||||
Reveal.on( 'fragmenthidden', post );
|
|
||||||
Reveal.on( 'overviewhidden', post );
|
|
||||||
Reveal.on( 'overviewshown', post );
|
|
||||||
Reveal.on( 'paused', post );
|
|
||||||
Reveal.on( 'resumed', post );
|
|
||||||
|
|
||||||
// Post the initial state
|
|
||||||
post();
|
|
||||||
|
|
||||||
}());
|
|
||||||
@ -1,69 +0,0 @@
|
|||||||
var http = require('http');
|
|
||||||
var express = require('express');
|
|
||||||
var fs = require('fs');
|
|
||||||
var io = require('socket.io');
|
|
||||||
var Mustache = require('mustache');
|
|
||||||
|
|
||||||
var app = express();
|
|
||||||
var staticDir = express.static;
|
|
||||||
var server = http.createServer(app);
|
|
||||||
|
|
||||||
io = io(server);
|
|
||||||
|
|
||||||
var opts = {
|
|
||||||
port : 1947,
|
|
||||||
baseDir : __dirname + '/../../'
|
|
||||||
};
|
|
||||||
|
|
||||||
io.on( 'connection', function( socket ) {
|
|
||||||
|
|
||||||
socket.on( 'new-subscriber', function( data ) {
|
|
||||||
socket.broadcast.emit( 'new-subscriber', data );
|
|
||||||
});
|
|
||||||
|
|
||||||
socket.on( 'statechanged', function( data ) {
|
|
||||||
delete data.state.overview;
|
|
||||||
socket.broadcast.emit( 'statechanged', data );
|
|
||||||
});
|
|
||||||
|
|
||||||
socket.on( 'statechanged-speaker', function( data ) {
|
|
||||||
delete data.state.overview;
|
|
||||||
socket.broadcast.emit( 'statechanged-speaker', data );
|
|
||||||
});
|
|
||||||
|
|
||||||
});
|
|
||||||
|
|
||||||
[ 'css', 'js', 'images', 'plugin', 'lib' ].forEach( function( dir ) {
|
|
||||||
app.use( '/' + dir, staticDir( opts.baseDir + dir ) );
|
|
||||||
});
|
|
||||||
|
|
||||||
app.get('/', function( req, res ) {
|
|
||||||
|
|
||||||
res.writeHead( 200, { 'Content-Type': 'text/html' } );
|
|
||||||
fs.createReadStream( opts.baseDir + '/index.html' ).pipe( res );
|
|
||||||
|
|
||||||
});
|
|
||||||
|
|
||||||
app.get( '/notes/:socketId', function( req, res ) {
|
|
||||||
|
|
||||||
fs.readFile( opts.baseDir + 'plugin/notes-server/notes.html', function( err, data ) {
|
|
||||||
res.send( Mustache.to_html( data.toString(), {
|
|
||||||
socketId : req.params.socketId
|
|
||||||
}));
|
|
||||||
});
|
|
||||||
|
|
||||||
});
|
|
||||||
|
|
||||||
// Actually listen
|
|
||||||
server.listen( opts.port || null );
|
|
||||||
|
|
||||||
var brown = '\033[33m',
|
|
||||||
green = '\033[32m',
|
|
||||||
reset = '\033[0m';
|
|
||||||
|
|
||||||
var slidesLocation = 'http://localhost' + ( opts.port ? ( ':' + opts.port ) : '' );
|
|
||||||
|
|
||||||
console.log( brown + 'reveal.js - Speaker Notes' + reset );
|
|
||||||
console.log( '1. Open the slides at ' + green + slidesLocation + reset );
|
|
||||||
console.log( '2. Click on the link in your JS console to go to the notes page' );
|
|
||||||
console.log( '3. Advance through your slides and your notes will advance automatically' );
|
|
||||||
@ -1,585 +0,0 @@
|
|||||||
<!doctype html>
|
|
||||||
<html lang="en">
|
|
||||||
<head>
|
|
||||||
<meta charset="utf-8">
|
|
||||||
|
|
||||||
<title>reveal.js - Slide Notes</title>
|
|
||||||
|
|
||||||
<style>
|
|
||||||
body {
|
|
||||||
font-family: Helvetica;
|
|
||||||
font-size: 18px;
|
|
||||||
}
|
|
||||||
|
|
||||||
#current-slide,
|
|
||||||
#upcoming-slide,
|
|
||||||
#speaker-controls {
|
|
||||||
padding: 6px;
|
|
||||||
box-sizing: border-box;
|
|
||||||
-moz-box-sizing: border-box;
|
|
||||||
}
|
|
||||||
|
|
||||||
#current-slide iframe,
|
|
||||||
#upcoming-slide iframe {
|
|
||||||
width: 100%;
|
|
||||||
height: 100%;
|
|
||||||
border: 1px solid #ddd;
|
|
||||||
}
|
|
||||||
|
|
||||||
#current-slide .label,
|
|
||||||
#upcoming-slide .label {
|
|
||||||
position: absolute;
|
|
||||||
top: 10px;
|
|
||||||
left: 10px;
|
|
||||||
z-index: 2;
|
|
||||||
}
|
|
||||||
|
|
||||||
.overlay-element {
|
|
||||||
height: 34px;
|
|
||||||
line-height: 34px;
|
|
||||||
padding: 0 10px;
|
|
||||||
text-shadow: none;
|
|
||||||
background: rgba( 220, 220, 220, 0.8 );
|
|
||||||
color: #222;
|
|
||||||
font-size: 14px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.overlay-element.interactive:hover {
|
|
||||||
background: rgba( 220, 220, 220, 1 );
|
|
||||||
}
|
|
||||||
|
|
||||||
#current-slide {
|
|
||||||
position: absolute;
|
|
||||||
width: 60%;
|
|
||||||
height: 100%;
|
|
||||||
top: 0;
|
|
||||||
left: 0;
|
|
||||||
padding-right: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
#upcoming-slide {
|
|
||||||
position: absolute;
|
|
||||||
width: 40%;
|
|
||||||
height: 40%;
|
|
||||||
right: 0;
|
|
||||||
top: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Speaker controls */
|
|
||||||
#speaker-controls {
|
|
||||||
position: absolute;
|
|
||||||
top: 40%;
|
|
||||||
right: 0;
|
|
||||||
width: 40%;
|
|
||||||
height: 60%;
|
|
||||||
overflow: auto;
|
|
||||||
font-size: 18px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.speaker-controls-time.hidden,
|
|
||||||
.speaker-controls-notes.hidden {
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
.speaker-controls-time .label,
|
|
||||||
.speaker-controls-notes .label {
|
|
||||||
text-transform: uppercase;
|
|
||||||
font-weight: normal;
|
|
||||||
font-size: 0.66em;
|
|
||||||
color: #666;
|
|
||||||
margin: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.speaker-controls-time {
|
|
||||||
border-bottom: 1px solid rgba( 200, 200, 200, 0.5 );
|
|
||||||
margin-bottom: 10px;
|
|
||||||
padding: 10px 16px;
|
|
||||||
padding-bottom: 20px;
|
|
||||||
cursor: pointer;
|
|
||||||
}
|
|
||||||
|
|
||||||
.speaker-controls-time .reset-button {
|
|
||||||
opacity: 0;
|
|
||||||
float: right;
|
|
||||||
color: #666;
|
|
||||||
text-decoration: none;
|
|
||||||
}
|
|
||||||
.speaker-controls-time:hover .reset-button {
|
|
||||||
opacity: 1;
|
|
||||||
}
|
|
||||||
|
|
||||||
.speaker-controls-time .timer,
|
|
||||||
.speaker-controls-time .clock {
|
|
||||||
width: 50%;
|
|
||||||
font-size: 1.9em;
|
|
||||||
}
|
|
||||||
|
|
||||||
.speaker-controls-time .timer {
|
|
||||||
float: left;
|
|
||||||
}
|
|
||||||
|
|
||||||
.speaker-controls-time .clock {
|
|
||||||
float: right;
|
|
||||||
text-align: right;
|
|
||||||
}
|
|
||||||
|
|
||||||
.speaker-controls-time span.mute {
|
|
||||||
color: #bbb;
|
|
||||||
}
|
|
||||||
|
|
||||||
.speaker-controls-notes {
|
|
||||||
padding: 10px 16px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.speaker-controls-notes .value {
|
|
||||||
margin-top: 5px;
|
|
||||||
line-height: 1.4;
|
|
||||||
font-size: 1.2em;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Layout selector */
|
|
||||||
#speaker-layout {
|
|
||||||
position: absolute;
|
|
||||||
top: 10px;
|
|
||||||
right: 10px;
|
|
||||||
color: #222;
|
|
||||||
z-index: 10;
|
|
||||||
}
|
|
||||||
#speaker-layout select {
|
|
||||||
position: absolute;
|
|
||||||
width: 100%;
|
|
||||||
height: 100%;
|
|
||||||
top: 0;
|
|
||||||
left: 0;
|
|
||||||
border: 0;
|
|
||||||
box-shadow: 0;
|
|
||||||
cursor: pointer;
|
|
||||||
opacity: 0;
|
|
||||||
|
|
||||||
font-size: 1em;
|
|
||||||
background-color: transparent;
|
|
||||||
|
|
||||||
-moz-appearance: none;
|
|
||||||
-webkit-appearance: none;
|
|
||||||
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
|
|
||||||
}
|
|
||||||
|
|
||||||
#speaker-layout select:focus {
|
|
||||||
outline: none;
|
|
||||||
box-shadow: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
.clear {
|
|
||||||
clear: both;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Speaker layout: Wide */
|
|
||||||
body[data-speaker-layout="wide"] #current-slide,
|
|
||||||
body[data-speaker-layout="wide"] #upcoming-slide {
|
|
||||||
width: 50%;
|
|
||||||
height: 45%;
|
|
||||||
padding: 6px;
|
|
||||||
}
|
|
||||||
|
|
||||||
body[data-speaker-layout="wide"] #current-slide {
|
|
||||||
top: 0;
|
|
||||||
left: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
body[data-speaker-layout="wide"] #upcoming-slide {
|
|
||||||
top: 0;
|
|
||||||
left: 50%;
|
|
||||||
}
|
|
||||||
|
|
||||||
body[data-speaker-layout="wide"] #speaker-controls {
|
|
||||||
top: 45%;
|
|
||||||
left: 0;
|
|
||||||
width: 100%;
|
|
||||||
height: 50%;
|
|
||||||
font-size: 1.25em;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Speaker layout: Tall */
|
|
||||||
body[data-speaker-layout="tall"] #current-slide,
|
|
||||||
body[data-speaker-layout="tall"] #upcoming-slide {
|
|
||||||
width: 45%;
|
|
||||||
height: 50%;
|
|
||||||
padding: 6px;
|
|
||||||
}
|
|
||||||
|
|
||||||
body[data-speaker-layout="tall"] #current-slide {
|
|
||||||
top: 0;
|
|
||||||
left: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
body[data-speaker-layout="tall"] #upcoming-slide {
|
|
||||||
top: 50%;
|
|
||||||
left: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
body[data-speaker-layout="tall"] #speaker-controls {
|
|
||||||
padding-top: 40px;
|
|
||||||
top: 0;
|
|
||||||
left: 45%;
|
|
||||||
width: 55%;
|
|
||||||
height: 100%;
|
|
||||||
font-size: 1.25em;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Speaker layout: Notes only */
|
|
||||||
body[data-speaker-layout="notes-only"] #current-slide,
|
|
||||||
body[data-speaker-layout="notes-only"] #upcoming-slide {
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
body[data-speaker-layout="notes-only"] #speaker-controls {
|
|
||||||
padding-top: 40px;
|
|
||||||
top: 0;
|
|
||||||
left: 0;
|
|
||||||
width: 100%;
|
|
||||||
height: 100%;
|
|
||||||
font-size: 1.25em;
|
|
||||||
}
|
|
||||||
|
|
||||||
</style>
|
|
||||||
</head>
|
|
||||||
|
|
||||||
<body>
|
|
||||||
|
|
||||||
<div id="current-slide"></div>
|
|
||||||
<div id="upcoming-slide"><span class="overlay-element label">Upcoming</span></div>
|
|
||||||
<div id="speaker-controls">
|
|
||||||
<div class="speaker-controls-time">
|
|
||||||
<h4 class="label">Time <span class="reset-button">Click to Reset</span></h4>
|
|
||||||
<div class="clock">
|
|
||||||
<span class="clock-value">0:00 AM</span>
|
|
||||||
</div>
|
|
||||||
<div class="timer">
|
|
||||||
<span class="hours-value">00</span><span class="minutes-value">:00</span><span class="seconds-value">:00</span>
|
|
||||||
</div>
|
|
||||||
<div class="clear"></div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="speaker-controls-notes hidden">
|
|
||||||
<h4 class="label">Notes</h4>
|
|
||||||
<div class="value"></div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div id="speaker-layout" class="overlay-element interactive">
|
|
||||||
<span class="speaker-layout-label"></span>
|
|
||||||
<select class="speaker-layout-dropdown"></select>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<script src="/socket.io/socket.io.js"></script>
|
|
||||||
<script src="/plugin/markdown/marked.js"></script>
|
|
||||||
|
|
||||||
<script>
|
|
||||||
(function() {
|
|
||||||
|
|
||||||
var notes,
|
|
||||||
notesValue,
|
|
||||||
currentState,
|
|
||||||
currentSlide,
|
|
||||||
upcomingSlide,
|
|
||||||
layoutLabel,
|
|
||||||
layoutDropdown,
|
|
||||||
connected = false;
|
|
||||||
|
|
||||||
var socket = io.connect( window.location.origin ),
|
|
||||||
socketId = '{{socketId}}';
|
|
||||||
|
|
||||||
var SPEAKER_LAYOUTS = {
|
|
||||||
'default': 'Default',
|
|
||||||
'wide': 'Wide',
|
|
||||||
'tall': 'Tall',
|
|
||||||
'notes-only': 'Notes only'
|
|
||||||
};
|
|
||||||
|
|
||||||
socket.on( 'statechanged', function( data ) {
|
|
||||||
|
|
||||||
// ignore data from sockets that aren't ours
|
|
||||||
if( data.socketId !== socketId ) { return; }
|
|
||||||
|
|
||||||
if( connected === false ) {
|
|
||||||
connected = true;
|
|
||||||
|
|
||||||
setupKeyboard();
|
|
||||||
setupNotes();
|
|
||||||
setupTimer();
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
handleStateMessage( data );
|
|
||||||
|
|
||||||
} );
|
|
||||||
|
|
||||||
setupLayout();
|
|
||||||
|
|
||||||
// Load our presentation iframes
|
|
||||||
setupIframes();
|
|
||||||
|
|
||||||
// Once the iframes have loaded, emit a signal saying there's
|
|
||||||
// a new subscriber which will trigger a 'statechanged'
|
|
||||||
// message to be sent back
|
|
||||||
window.addEventListener( 'message', function( event ) {
|
|
||||||
|
|
||||||
var data = JSON.parse( event.data );
|
|
||||||
|
|
||||||
if( data && data.namespace === 'reveal' ) {
|
|
||||||
if( /ready/.test( data.eventName ) ) {
|
|
||||||
socket.emit( 'new-subscriber', { socketId: socketId } );
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// Messages sent by reveal.js inside of the current slide preview
|
|
||||||
if( data && data.namespace === 'reveal' ) {
|
|
||||||
if( /slidechanged|fragmentshown|fragmenthidden|overviewshown|overviewhidden|paused|resumed/.test( data.eventName ) && currentState !== JSON.stringify( data.state ) ) {
|
|
||||||
socket.emit( 'statechanged-speaker', { state: data.state } );
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
} );
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Called when the main window sends an updated state.
|
|
||||||
*/
|
|
||||||
function handleStateMessage( data ) {
|
|
||||||
|
|
||||||
// Store the most recently set state to avoid circular loops
|
|
||||||
// applying the same state
|
|
||||||
currentState = JSON.stringify( data.state );
|
|
||||||
|
|
||||||
// No need for updating the notes in case of fragment changes
|
|
||||||
if ( data.notes ) {
|
|
||||||
notes.classList.remove( 'hidden' );
|
|
||||||
if( data.markdown ) {
|
|
||||||
notesValue.innerHTML = marked( data.notes );
|
|
||||||
}
|
|
||||||
else {
|
|
||||||
notesValue.innerHTML = data.notes;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
else {
|
|
||||||
notes.classList.add( 'hidden' );
|
|
||||||
}
|
|
||||||
|
|
||||||
// Update the note slides
|
|
||||||
currentSlide.contentWindow.postMessage( JSON.stringify({ method: 'setState', args: [ data.state ] }), '*' );
|
|
||||||
upcomingSlide.contentWindow.postMessage( JSON.stringify({ method: 'setState', args: [ data.state ] }), '*' );
|
|
||||||
upcomingSlide.contentWindow.postMessage( JSON.stringify({ method: 'next' }), '*' );
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
// Limit to max one state update per X ms
|
|
||||||
handleStateMessage = debounce( handleStateMessage, 200 );
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Forward keyboard events to the current slide window.
|
|
||||||
* This enables keyboard events to work even if focus
|
|
||||||
* isn't set on the current slide iframe.
|
|
||||||
*/
|
|
||||||
function setupKeyboard() {
|
|
||||||
|
|
||||||
document.addEventListener( 'keydown', function( event ) {
|
|
||||||
currentSlide.contentWindow.postMessage( JSON.stringify({ method: 'triggerKey', args: [ event.keyCode ] }), '*' );
|
|
||||||
} );
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Creates the preview iframes.
|
|
||||||
*/
|
|
||||||
function setupIframes() {
|
|
||||||
|
|
||||||
var params = [
|
|
||||||
'receiver',
|
|
||||||
'progress=false',
|
|
||||||
'history=false',
|
|
||||||
'transition=none',
|
|
||||||
'backgroundTransition=none'
|
|
||||||
].join( '&' );
|
|
||||||
|
|
||||||
var currentURL = '/?' + params + '&postMessageEvents=true';
|
|
||||||
var upcomingURL = '/?' + params + '&controls=false';
|
|
||||||
|
|
||||||
currentSlide = document.createElement( 'iframe' );
|
|
||||||
currentSlide.setAttribute( 'width', 1280 );
|
|
||||||
currentSlide.setAttribute( 'height', 1024 );
|
|
||||||
currentSlide.setAttribute( 'src', currentURL );
|
|
||||||
document.querySelector( '#current-slide' ).appendChild( currentSlide );
|
|
||||||
|
|
||||||
upcomingSlide = document.createElement( 'iframe' );
|
|
||||||
upcomingSlide.setAttribute( 'width', 640 );
|
|
||||||
upcomingSlide.setAttribute( 'height', 512 );
|
|
||||||
upcomingSlide.setAttribute( 'src', upcomingURL );
|
|
||||||
document.querySelector( '#upcoming-slide' ).appendChild( upcomingSlide );
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Setup the notes UI.
|
|
||||||
*/
|
|
||||||
function setupNotes() {
|
|
||||||
|
|
||||||
notes = document.querySelector( '.speaker-controls-notes' );
|
|
||||||
notesValue = document.querySelector( '.speaker-controls-notes .value' );
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Create the timer and clock and start updating them
|
|
||||||
* at an interval.
|
|
||||||
*/
|
|
||||||
function setupTimer() {
|
|
||||||
|
|
||||||
var start = new Date(),
|
|
||||||
timeEl = document.querySelector( '.speaker-controls-time' ),
|
|
||||||
clockEl = timeEl.querySelector( '.clock-value' ),
|
|
||||||
hoursEl = timeEl.querySelector( '.hours-value' ),
|
|
||||||
minutesEl = timeEl.querySelector( '.minutes-value' ),
|
|
||||||
secondsEl = timeEl.querySelector( '.seconds-value' );
|
|
||||||
|
|
||||||
function _updateTimer() {
|
|
||||||
|
|
||||||
var diff, hours, minutes, seconds,
|
|
||||||
now = new Date();
|
|
||||||
|
|
||||||
diff = now.getTime() - start.getTime();
|
|
||||||
hours = Math.floor( diff / ( 1000 * 60 * 60 ) );
|
|
||||||
minutes = Math.floor( ( diff / ( 1000 * 60 ) ) % 60 );
|
|
||||||
seconds = Math.floor( ( diff / 1000 ) % 60 );
|
|
||||||
|
|
||||||
clockEl.innerHTML = now.toLocaleTimeString( 'en-US', { hour12: true, hour: '2-digit', minute:'2-digit' } );
|
|
||||||
hoursEl.innerHTML = zeroPadInteger( hours );
|
|
||||||
hoursEl.className = hours > 0 ? '' : 'mute';
|
|
||||||
minutesEl.innerHTML = ':' + zeroPadInteger( minutes );
|
|
||||||
minutesEl.className = minutes > 0 ? '' : 'mute';
|
|
||||||
secondsEl.innerHTML = ':' + zeroPadInteger( seconds );
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
// Update once directly
|
|
||||||
_updateTimer();
|
|
||||||
|
|
||||||
// Then update every second
|
|
||||||
setInterval( _updateTimer, 1000 );
|
|
||||||
|
|
||||||
timeEl.addEventListener( 'click', function() {
|
|
||||||
start = new Date();
|
|
||||||
_updateTimer();
|
|
||||||
return false;
|
|
||||||
} );
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Sets up the speaker view layout and layout selector.
|
|
||||||
*/
|
|
||||||
function setupLayout() {
|
|
||||||
|
|
||||||
layoutDropdown = document.querySelector( '.speaker-layout-dropdown' );
|
|
||||||
layoutLabel = document.querySelector( '.speaker-layout-label' );
|
|
||||||
|
|
||||||
// Render the list of available layouts
|
|
||||||
for( var id in SPEAKER_LAYOUTS ) {
|
|
||||||
var option = document.createElement( 'option' );
|
|
||||||
option.setAttribute( 'value', id );
|
|
||||||
option.textContent = SPEAKER_LAYOUTS[ id ];
|
|
||||||
layoutDropdown.appendChild( option );
|
|
||||||
}
|
|
||||||
|
|
||||||
// Monitor the dropdown for changes
|
|
||||||
layoutDropdown.addEventListener( 'change', function( event ) {
|
|
||||||
|
|
||||||
setLayout( layoutDropdown.value );
|
|
||||||
|
|
||||||
}, false );
|
|
||||||
|
|
||||||
// Restore any currently persisted layout
|
|
||||||
setLayout( getLayout() );
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Sets a new speaker view layout. The layout is persisted
|
|
||||||
* in local storage.
|
|
||||||
*/
|
|
||||||
function setLayout( value ) {
|
|
||||||
|
|
||||||
var title = SPEAKER_LAYOUTS[ value ];
|
|
||||||
|
|
||||||
layoutLabel.innerHTML = 'Layout' + ( title ? ( ': ' + title ) : '' );
|
|
||||||
layoutDropdown.value = value;
|
|
||||||
|
|
||||||
document.body.setAttribute( 'data-speaker-layout', value );
|
|
||||||
|
|
||||||
// Persist locally
|
|
||||||
if( window.localStorage ) {
|
|
||||||
window.localStorage.setItem( 'reveal-speaker-layout', value );
|
|
||||||
}
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Returns the ID of the most recently set speaker layout
|
|
||||||
* or our default layout if none has been set.
|
|
||||||
*/
|
|
||||||
function getLayout() {
|
|
||||||
|
|
||||||
if( window.localStorage ) {
|
|
||||||
var layout = window.localStorage.getItem( 'reveal-speaker-layout' );
|
|
||||||
if( layout ) {
|
|
||||||
return layout;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// Default to the first record in the layouts hash
|
|
||||||
for( var id in SPEAKER_LAYOUTS ) {
|
|
||||||
return id;
|
|
||||||
}
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
function zeroPadInteger( num ) {
|
|
||||||
|
|
||||||
var str = '00' + parseInt( num );
|
|
||||||
return str.substring( str.length - 2 );
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Limits the frequency at which a function can be called.
|
|
||||||
*/
|
|
||||||
function debounce( fn, ms ) {
|
|
||||||
|
|
||||||
var lastTime = 0,
|
|
||||||
timeout;
|
|
||||||
|
|
||||||
return function() {
|
|
||||||
|
|
||||||
var args = arguments;
|
|
||||||
var context = this;
|
|
||||||
|
|
||||||
clearTimeout( timeout );
|
|
||||||
|
|
||||||
var timeSinceLastCall = Date.now() - lastTime;
|
|
||||||
if( timeSinceLastCall > ms ) {
|
|
||||||
fn.apply( context, args );
|
|
||||||
lastTime = Date.now();
|
|
||||||
}
|
|
||||||
else {
|
|
||||||
timeout = setTimeout( function() {
|
|
||||||
fn.apply( context, args );
|
|
||||||
lastTime = Date.now();
|
|
||||||
}, ms - timeSinceLastCall );
|
|
||||||
}
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
})();
|
|
||||||
</script>
|
|
||||||
|
|
||||||
</body>
|
|
||||||
</html>
|
|
||||||
Loading…
Reference in New Issue
Block a user