Merge branch 'dev' into plugin-key-bindings

This commit is contained in:
Greg Denehy
2017-04-30 17:42:16 +09:30
52 changed files with 2828 additions and 1100 deletions

View File

@ -1,5 +1,52 @@
// START CUSTOM REVEAL.JS INTEGRATION
(function() {
// Function to perform a better "data-trim" on code snippets
// Will slice an indentation amount on each line of the snippet (amount based on the line having the lowest indentation length)
function betterTrim(snippetEl) {
// Helper functions
function trimLeft(val) {
// Adapted from https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/Trim#Polyfill
return val.replace(/^[\s\uFEFF\xA0]+/g, '');
}
function trimLineBreaks(input) {
var lines = input.split('\n');
// Trim line-breaks from the beginning
for (var i = 0; i < lines.length; i++) {
if (lines[i].trim() === '') {
lines.splice(i--, 1);
} else break;
}
// Trim line-breaks from the end
for (var i = lines.length-1; i >= 0; i--) {
if (lines[i].trim() === '') {
lines.splice(i, 1);
} else break;
}
return lines.join('\n');
}
// Main function for betterTrim()
return (function(snippetEl) {
var content = trimLineBreaks(snippetEl.innerHTML);
var lines = content.split('\n');
// Calculate the minimum amount to remove on each line start of the snippet (can be 0)
var pad = lines.reduce(function(acc, line) {
if (line.length > 0 && trimLeft(line).length > 0 && acc > line.length - trimLeft(line).length) {
return line.length - trimLeft(line).length;
}
return acc;
}, Number.POSITIVE_INFINITY);
// Slice each line with this amount
return lines.map(function(line, index) {
return line.slice(pad);
})
.join('\n');
})(snippetEl);
}
if( typeof window.addEventListener === 'function' ) {
var hljs_nodes = document.querySelectorAll( 'pre code' );
@ -8,7 +55,7 @@
// trim whitespace if data-trim attribute is present
if( element.hasAttribute( 'data-trim' ) && typeof element.innerHTML.trim === 'function' ) {
element.innerHTML = element.innerHTML.trim();
element.innerHTML = betterTrim(element);
}
// Now escape html unless prevented by author

View File

@ -4,28 +4,19 @@
* of external markdown documents.
*/
(function( root, factory ) {
if( typeof exports === 'object' ) {
if (typeof define === 'function' && define.amd) {
root.marked = require( './marked' );
root.RevealMarkdown = factory( root.marked );
root.RevealMarkdown.initialize();
} else if( typeof exports === 'object' ) {
module.exports = factory( require( './marked' ) );
}
else {
} else {
// Browser globals (root is window)
root.RevealMarkdown = factory( root.marked );
root.RevealMarkdown.initialize();
}
}( this, function( marked ) {
if( typeof marked === 'undefined' ) {
throw 'The reveal.js Markdown plugin requires marked to be loaded';
}
if( typeof hljs !== 'undefined' ) {
marked.setOptions({
highlight: function( lang, code ) {
return hljs.highlightAuto( lang, code ).value;
}
});
}
var DEFAULT_SLIDE_SEPARATOR = '^\r?\n---\r?\n$',
DEFAULT_NOTES_SEPARATOR = 'note:',
DEFAULT_ELEMENT_ATTRIBUTES_SEPARATOR = '\\\.element\\\s*?(.+?)$',
@ -40,7 +31,8 @@
*/
function getMarkdownFromSlide( section ) {
var template = section.querySelector( 'script' );
// look for a <script> or <textarea data-template> wrapper
var template = section.querySelector( '[data-template]' ) || section.querySelector( 'script' );
// strip leading whitespace so it isn't evaluated as code
var text = ( template || section ).textContent;
@ -117,7 +109,7 @@
var notesMatch = content.split( new RegExp( options.notesSeparator, 'mgi' ) );
if( notesMatch.length === 2 ) {
content = notesMatch[0] + '<aside class="notes" data-markdown>' + notesMatch[1].trim() + '</aside>';
content = notesMatch[0] + '<aside class="notes">' + marked(notesMatch[1].trim()) + '</aside>';
}
// prevent script end tags in the content from interfering
@ -186,7 +178,7 @@
markdownSections += '<section '+ options.attributes +'>';
sectionStack[i].forEach( function( child ) {
markdownSections += '<section data-markdown>' + createMarkdownSlide( child, options ) + '</section>';
markdownSections += '<section data-markdown>' + createMarkdownSlide( child, options ) + '</section>';
} );
markdownSections += '</section>';
@ -388,6 +380,24 @@
return {
initialize: function() {
if( typeof marked === 'undefined' ) {
throw 'The reveal.js Markdown plugin requires marked to be loaded';
}
if( typeof hljs !== 'undefined' ) {
marked.setOptions({
highlight: function( code, lang ) {
return hljs.highlightAuto( code, [lang] ).value;
}
});
}
var options = Reveal.getConfig().markdown;
if ( options ) {
marked.setOptions( options );
}
processSlides();
convertSlides();
},

File diff suppressed because one or more lines are too long

View File

@ -7,7 +7,7 @@
var RevealMath = window.RevealMath || (function(){
var options = Reveal.getConfig().math || {};
options.mathjax = options.mathjax || 'https://cdn.mathjax.org/mathjax/latest/MathJax.js';
options.mathjax = options.mathjax || 'https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.0/MathJax.js';
options.config = options.config || 'TeX-AMS_HTML-full';
loadScript( options.mathjax + '?config=' + options.config, function() {

View File

@ -31,7 +31,15 @@ io.on( 'connection', function( socket ) {
app.get("/", function(req, res) {
res.writeHead(200, {'Content-Type': 'text/html'});
fs.createReadStream(opts.baseDir + '/index.html').pipe(res);
var stream = fs.createReadStream(opts.baseDir + '/index.html');
stream.on('error', function( error ) {
res.write('<style>body{font-family: sans-serif;}</style><h2>reveal.js multiplex server.</h2><a href="/token">Generate token</a>');
res.end();
});
stream.on('readable', function() {
stream.pipe(res);
});
});
app.get("/token", function(req,res) {

View File

@ -0,0 +1,19 @@
{
"name": "reveal-js-multiplex",
"version": "1.0.0",
"description": "reveal.js multiplex server",
"homepage": "http://lab.hakim.se/reveal-js",
"scripts": {
"start": "node index.js"
},
"engines": {
"node": "~4.1.1"
},
"dependencies": {
"express": "~4.13.3",
"grunt-cli": "~0.1.13",
"mustache": "~2.2.1",
"socket.io": "~1.3.7"
},
"license": "MIT"
}

View File

@ -2,7 +2,6 @@ var http = require('http');
var express = require('express');
var fs = require('fs');
var io = require('socket.io');
var _ = require('underscore');
var Mustache = require('mustache');
var app = express();
@ -23,10 +22,12 @@ io.on( 'connection', function( socket ) {
});
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 );
});
@ -64,5 +65,5 @@ 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 your JS console to go to the notes page' );
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' );

View File

@ -8,6 +8,7 @@
<style>
body {
font-family: Helvetica;
font-size: 18px;
}
#current-slide,
@ -30,15 +31,26 @@
position: absolute;
top: 10px;
left: 10px;
font-weight: bold;
font-size: 14px;
z-index: 2;
color: rgba( 255, 255, 255, 0.9 );
}
.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: 65%;
width: 60%;
height: 100%;
top: 0;
left: 0;
@ -47,19 +59,20 @@
#upcoming-slide {
position: absolute;
width: 35%;
width: 40%;
height: 40%;
right: 0;
top: 0;
}
/* Speaker controls */
#speaker-controls {
position: absolute;
top: 40%;
right: 0;
width: 35%;
width: 40%;
height: 60%;
overflow: auto;
font-size: 18px;
}
@ -124,26 +137,108 @@
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;
}
@media screen and (max-width: 1080px) {
#speaker-controls {
font-size: 16px;
}
/* Speaker layout: Wide */
body[data-speaker-layout="wide"] #current-slide,
body[data-speaker-layout="wide"] #upcoming-slide {
width: 50%;
height: 45%;
padding: 6px;
}
@media screen and (max-width: 900px) {
#speaker-controls {
font-size: 14px;
}
body[data-speaker-layout="wide"] #current-slide {
top: 0;
left: 0;
}
@media screen and (max-width: 800px) {
#speaker-controls {
font-size: 12px;
}
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>
@ -152,7 +247,7 @@
<body>
<div id="current-slide"></div>
<div id="upcoming-slide"><span class="label">UPCOMING:</span></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>
@ -170,6 +265,10 @@
<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>
@ -182,11 +281,20 @@
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
@ -205,6 +313,8 @@
} );
setupLayout();
// Load our presentation iframes
setupIframes();
@ -362,6 +472,74 @@
}
/**
* 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 );

View File

@ -8,6 +8,7 @@
<style>
body {
font-family: Helvetica;
font-size: 18px;
}
#current-slide,
@ -30,15 +31,26 @@
position: absolute;
top: 10px;
left: 10px;
font-weight: bold;
font-size: 14px;
z-index: 2;
color: rgba( 255, 255, 255, 0.9 );
}
.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: 65%;
width: 60%;
height: 100%;
top: 0;
left: 0;
@ -47,20 +59,20 @@
#upcoming-slide {
position: absolute;
width: 35%;
width: 40%;
height: 40%;
right: 0;
top: 0;
}
/* Speaker controls */
#speaker-controls {
position: absolute;
top: 40%;
right: 0;
width: 35%;
width: 40%;
height: 60%;
overflow: auto;
font-size: 18px;
}
@ -70,6 +82,7 @@
}
.speaker-controls-time .label,
.speaker-controls-pace .label,
.speaker-controls-notes .label {
text-transform: uppercase;
font-weight: normal;
@ -78,7 +91,7 @@
margin: 0;
}
.speaker-controls-time {
.speaker-controls-time, .speaker-controls-pace {
border-bottom: 1px solid rgba( 200, 200, 200, 0.5 );
margin-bottom: 10px;
padding: 10px 16px;
@ -99,6 +112,13 @@
.speaker-controls-time .timer,
.speaker-controls-time .clock {
width: 50%;
}
.speaker-controls-time .timer,
.speaker-controls-time .clock,
.speaker-controls-time .pacing .hours-value,
.speaker-controls-time .pacing .minutes-value,
.speaker-controls-time .pacing .seconds-value {
font-size: 1.9em;
}
@ -112,7 +132,23 @@
}
.speaker-controls-time span.mute {
color: #bbb;
opacity: 0.3;
}
.speaker-controls-time .pacing-title {
margin-top: 5px;
}
.speaker-controls-time .pacing.ahead {
color: blue;
}
.speaker-controls-time .pacing.on-track {
color: green;
}
.speaker-controls-time .pacing.behind {
color: red;
}
.speaker-controls-notes {
@ -125,24 +161,124 @@
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;
}
@media screen and (max-width: 1080px) {
#speaker-controls {
body[data-speaker-layout="default"] #speaker-controls {
font-size: 16px;
}
}
@media screen and (max-width: 900px) {
#speaker-controls {
body[data-speaker-layout="default"] #speaker-controls {
font-size: 14px;
}
}
@media screen and (max-width: 800px) {
#speaker-controls {
body[data-speaker-layout="default"] #speaker-controls {
font-size: 12px;
}
}
@ -153,7 +289,7 @@
<body>
<div id="current-slide"></div>
<div id="upcoming-slide"><span class="label">UPCOMING:</span></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>
@ -164,6 +300,11 @@
<span class="hours-value">00</span><span class="minutes-value">:00</span><span class="seconds-value">:00</span>
</div>
<div class="clear"></div>
<h4 class="label pacing-title" style="display: none">Pacing Time to finish current slide</h4>
<div class="pacing" style="display: none">
<span class="hours-value">00</span><span class="minutes-value">:00</span><span class="seconds-value">:00</span>
</div>
</div>
<div class="speaker-controls-notes hidden">
@ -171,6 +312,10 @@
<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="../../plugin/markdown/marked.js"></script>
<script>
@ -182,12 +327,27 @@
currentState,
currentSlide,
upcomingSlide,
layoutLabel,
layoutDropdown,
connected = false;
var SPEAKER_LAYOUTS = {
'default': 'Default',
'wide': 'Wide',
'tall': 'Tall',
'notes-only': 'Notes only'
};
setupLayout();
window.addEventListener( 'message', function( event ) {
var data = JSON.parse( event.data );
// The overview mode is only useful to the reveal.js instance
// where navigation occurs so we don't sync it
if( data.state ) delete data.state.overview;
// Messages sent by the notes plugin inside of the main window
if( data && data.namespace === 'reveal-notes' ) {
if( data.type === 'connect' ) {
@ -203,8 +363,10 @@
// Send a message back to notify that the handshake is complete
window.opener.postMessage( JSON.stringify({ namespace: 'reveal-notes', type: 'connected'} ), '*' );
}
else if( /slidechanged|fragmentshown|fragmenthidden|overviewshown|overviewhidden|paused|resumed/.test( data.eventName ) && currentState !== JSON.stringify( data.state ) ) {
else if( /slidechanged|fragmentshown|fragmenthidden|paused|resumed/.test( data.eventName ) && currentState !== JSON.stringify( data.state ) ) {
window.opener.postMessage( JSON.stringify({ method: 'setState', args: [ data.state ]} ), '*' );
}
}
@ -288,9 +450,10 @@
'backgroundTransition=none'
].join( '&' );
var urlSeparator = /\?/.test(data.url) ? '&' : '?';
var hash = '#/' + data.state.indexh + '/' + data.state.indexv;
var currentURL = data.url + '?' + params + '&postMessageEvents=true' + hash;
var upcomingURL = data.url + '?' + params + '&controls=false' + hash;
var currentURL = data.url + urlSeparator + params + '&postMessageEvents=true' + hash;
var upcomingURL = data.url + urlSeparator + params + '&controls=false' + hash;
currentSlide = document.createElement( 'iframe' );
currentSlide.setAttribute( 'width', 1280 );
@ -316,6 +479,47 @@
}
function getTimings() {
var slides = Reveal.getSlides();
var defaultTiming = Reveal.getConfig().defaultTiming;
if (defaultTiming == null) {
return null;
}
var timings = [];
for ( var i in slides ) {
var slide = slides[i];
var timing = defaultTiming;
if( slide.hasAttribute( 'data-timing' )) {
var t = slide.getAttribute( 'data-timing' );
timing = parseInt(t);
if( isNaN(timing) ) {
console.warn("Could not parse timing '" + t + "' of slide " + i + "; using default of " + defaultTiming);
timing = defaultTiming;
}
}
timings.push(timing);
}
return timings;
}
/**
* Return the number of seconds allocated for presenting
* all slides up to and including this one.
*/
function getTimeAllocated(timings) {
var slides = Reveal.getSlides();
var allocated = 0;
var currentSlide = Reveal.getSlidePastCount();
for (var i in slides.slice(0, currentSlide + 1)) {
allocated += timings[i];
}
return allocated;
}
/**
* Create the timer and clock and start updating them
* at an interval.
@ -323,28 +527,78 @@
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' );
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' ),
pacingTitleEl = timeEl.querySelector( '.pacing-title' ),
pacingEl = timeEl.querySelector( '.pacing' ),
pacingHoursEl = pacingEl.querySelector( '.hours-value' ),
pacingMinutesEl = pacingEl.querySelector( '.minutes-value' ),
pacingSecondsEl = pacingEl.querySelector( '.seconds-value' );
var timings = getTimings();
if (timings !== null) {
pacingTitleEl.style.removeProperty('display');
pacingEl.style.removeProperty('display');
}
function _displayTime( hrEl, minEl, secEl, time) {
var sign = Math.sign(time) == -1 ? "-" : "";
time = Math.abs(Math.round(time / 1000));
var seconds = time % 60;
var minutes = Math.floor( time / 60 ) % 60 ;
var hours = Math.floor( time / ( 60 * 60 )) ;
hrEl.innerHTML = sign + zeroPadInteger( hours );
if (hours == 0) {
hrEl.classList.add( 'mute' );
}
else {
hrEl.classList.remove( 'mute' );
}
minEl.innerHTML = ':' + zeroPadInteger( minutes );
if (hours == 0 && minutes == 0) {
minEl.classList.add( 'mute' );
}
else {
minEl.classList.remove( 'mute' );
}
secEl.innerHTML = ':' + zeroPadInteger( seconds );
}
function _updateTimer() {
var diff, hours, minutes, seconds,
now = new Date();
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 );
_displayTime( hoursEl, minutesEl, secondsEl, diff );
if (timings !== null) {
_updatePacing(diff);
}
}
function _updatePacing(diff) {
var slideEndTiming = getTimeAllocated(timings) * 1000;
var currentSlide = Reveal.getSlidePastCount();
var currentSlideTiming = timings[currentSlide] * 1000;
var timeLeftCurrentSlide = slideEndTiming - diff;
if (timeLeftCurrentSlide < 0) {
pacingEl.className = 'pacing behind';
}
else if (timeLeftCurrentSlide < currentSlideTiming) {
pacingEl.className = 'pacing on-track';
}
else {
pacingEl.className = 'pacing ahead';
}
_displayTime( pacingHoursEl, pacingMinutesEl, pacingSecondsEl, timeLeftCurrentSlide );
}
@ -354,14 +608,99 @@
// Then update every second
setInterval( _updateTimer, 1000 );
timeEl.addEventListener( 'click', function() {
start = new Date();
function _resetTimer() {
if (timings == null) {
start = new Date();
}
else {
// Reset timer to beginning of current slide
var slideEndTiming = getTimeAllocated(timings) * 1000;
var currentSlide = Reveal.getSlidePastCount();
var currentSlideTiming = timings[currentSlide] * 1000;
var previousSlidesTiming = slideEndTiming - currentSlideTiming;
var now = new Date();
start = new Date(now.getTime() - previousSlidesTiming);
}
_updateTimer();
}
timeEl.addEventListener( 'click', function() {
_resetTimer();
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 );

View File

@ -11,10 +11,18 @@
*/
var RevealNotes = (function() {
function openNotes() {
var jsFileLocation = document.querySelector('script[src$="notes.js"]').src; // this js file path
jsFileLocation = jsFileLocation.replace(/notes\.js(\?.*)?$/, ''); // the js folder path
var notesPopup = window.open( jsFileLocation + 'notes.html', 'reveal.js - Notes', 'width=1100,height=700' );
function openNotes( notesFilePath ) {
if( !notesFilePath ) {
var jsFileLocation = document.querySelector('script[src$="notes.js"]').src; // this js file path
jsFileLocation = jsFileLocation.replace(/notes\.js(\?.*)?$/, ''); // the js folder path
notesFilePath = jsFileLocation + 'notes.html';
}
var notesPopup = window.open( notesFilePath, 'reveal.js - Notes', 'width=1100,height=700' );
// Allow popup window access to Reveal API
notesPopup.Reveal = this.Reveal;
/**
* Connect to the notes window through a postmessage handshake.
@ -45,10 +53,11 @@ var RevealNotes = (function() {
/**
* Posts the current slide data to the notes window
*/
function post() {
function post( event ) {
var slideElement = Reveal.getCurrentSlide(),
notesElement = slideElement.querySelector( 'aside.notes' );
notesElement = slideElement.querySelector( 'aside.notes' ),
fragmentElement = slideElement.querySelector( '.current-fragment' );
var messageData = {
namespace: 'reveal-notes',
@ -65,6 +74,21 @@ var RevealNotes = (function() {
messageData.whitespace = 'pre-wrap';
}
// Look for notes defined in a fragment
if( fragmentElement ) {
var fragmentNotes = fragmentElement.querySelector( 'aside.notes' );
if( fragmentNotes ) {
notesElement = fragmentNotes;
}
else if( fragmentElement.hasAttribute( 'data-notes' ) ) {
messageData.notes = fragmentElement.getAttribute( 'data-notes' );
messageData.whitespace = 'pre-wrap';
// In case there are slide notes
notesElement = null;
}
}
// Look for notes defined in an aside element
if( notesElement ) {
messageData.notes = notesElement.innerHTML;
@ -96,6 +120,7 @@ var RevealNotes = (function() {
}
connect();
}
if( !/receiver/i.test( window.location.search ) ) {
@ -108,6 +133,9 @@ var RevealNotes = (function() {
// Open the notes when the 's' key is hit
Reveal.addKeyBinding({keyCode: 83, key: 'S', description: 'Speaker notes'}, openNotes);
// Show our keyboard shortcut in the reveal.js help overlay
if( window.Reveal ) Reveal.registerKeyboardShortcut( 'S', 'Speaker notes view' );
}
return { open: openNotes };

View File

@ -4,30 +4,16 @@
* Example:
* phantomjs print-pdf.js "http://lab.hakim.se/reveal-js?print-pdf" reveal-demo.pdf
*
* By Manuel Bieh (https://github.com/manuelbieh)
* @author Manuel Bieh (https://github.com/manuelbieh)
* @author Hakim El Hattab (https://github.com/hakimel)
* @author Manuel Riezebosch (https://github.com/riezebosch)
*/
// html2pdf.js
var page = new WebPage();
var system = require( 'system' );
var slideWidth = system.args[3] ? system.args[3].split( 'x' )[0] : 960;
var slideHeight = system.args[3] ? system.args[3].split( 'x' )[1] : 700;
page.viewportSize = {
width: slideWidth,
height: slideHeight
};
// TODO
// Something is wrong with these config values. An input
// paper width of 1920px actually results in a 756px wide
// PDF.
page.paperSize = {
width: Math.round( slideWidth * 2 ),
height: Math.round( slideHeight * 2 ),
border: 0
};
var probePage = new WebPage();
var printPage = new WebPage();
var inputFile = system.args[1] || 'index.html?print-pdf';
var outputFile = system.args[2] || 'slides.pdf';
@ -36,13 +22,48 @@ if( outputFile.match( /\.pdf$/gi ) === null ) {
outputFile += '.pdf';
}
console.log( 'Printing PDF (Paper size: '+ page.paperSize.width + 'x' + page.paperSize.height +')' );
console.log( 'Export PDF: Reading reveal.js config [1/4]' );
page.open( inputFile, function( status ) {
window.setTimeout( function() {
console.log( 'Printed succesfully' );
page.render( outputFile );
phantom.exit();
}, 1000 );
probePage.open( inputFile, function( status ) {
console.log( 'Export PDF: Preparing print layout [2/4]' );
var config = probePage.evaluate( function() {
return Reveal.getConfig();
} );
if( config ) {
printPage.paperSize = {
width: Math.floor( config.width * ( 1 + config.margin ) ),
height: Math.floor( config.height * ( 1 + config.margin ) ),
border: 0
};
printPage.open( inputFile, function( status ) {
console.log( 'Export PDF: Preparing pdf [3/4]')
printPage.evaluate(function() {
Reveal.isReady() ? window.callPhantom() : Reveal.addEventListener( 'pdf-ready', window.callPhantom );
});
} );
printPage.onCallback = function(data) {
// For some reason we need to "jump the queue" for syntax highlighting to work.
// See: http://stackoverflow.com/a/3580132/129269
setTimeout(function() {
console.log( 'Export PDF: Writing file [4/4]' );
printPage.render( outputFile );
console.log( 'Export PDF: Finished successfully!' );
phantom.exit();
}, 0);
};
}
else {
console.log( 'Export PDF: Unable to read reveal.js config. Make sure the input address points to a reveal.js page.' );
phantom.exit(1);
}
} );

View File

@ -11,7 +11,17 @@
if( event[ modifier ] && isEnabled ) {
event.preventDefault();
var bounds = event.target.getBoundingClientRect();
var bounds;
var originalDisplay = event.target.style.display;
// Get the bounding rect of the contents, not the containing box
if( window.getComputedStyle( event.target ).display === 'block' ) {
event.target.style.display = 'inline-block';
bounds = event.target.getBoundingClientRect();
event.target.style.display = originalDisplay;
} else {
bounds = event.target.getBoundingClientRect();
}
zoom.to({
x: ( bounds.left * revealScale ) - zoomPadding,