078ba62050
The current pacing timer operates on the assumption that there is a default amount of time to be allocated to each slide, and that individual slides can deviate from that default by specifying their own data-timing attribute. This patch introduces an alternate pacing method: by specifying the totalTime configuration option, the presenter can set the total time available to present. The pacing timer will then continue to allocate the exact pacing time for slides that do have data-timing set, as before. However, rather than applying the defaultTiming constant to all others, it will - Add up the time already allocated to slides via data-timing; - subtract that from totalTime; - divide the difference by the number of slides without data-timing set; - apply the thus-calculated average to those slides. totalTime has no default, and if both defaultTiming and totalTime are set, totalTime wins. This preserves backward compatibility: if a presenter has set defaultTiming and updates reveal.js, totalTime will be null and defaultTiming is still applied to all slides without a data-timing attribute. The presenter can then switch to the automatic calculation, if desired, by setting a value for totalTime.
849 lines
21 KiB
HTML
849 lines
21 KiB
HTML
<!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;
|
||
}
|
||
|
||
#connection-status {
|
||
position: absolute;
|
||
top: 0;
|
||
left: 0;
|
||
width: 100%;
|
||
height: 100%;
|
||
z-index: 20;
|
||
padding: 30% 20% 20% 20%;
|
||
font-size: 18px;
|
||
color: #222;
|
||
background: #fff;
|
||
text-align: center;
|
||
box-sizing: border-box;
|
||
line-height: 1.4;
|
||
}
|
||
|
||
.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-pace .label,
|
||
.speaker-controls-notes .label {
|
||
text-transform: uppercase;
|
||
font-weight: normal;
|
||
font-size: 0.66em;
|
||
color: #666;
|
||
margin: 0;
|
||
}
|
||
|
||
.speaker-controls-time, .speaker-controls-pace {
|
||
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%;
|
||
}
|
||
|
||
.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;
|
||
}
|
||
|
||
.speaker-controls-time .timer {
|
||
float: left;
|
||
}
|
||
|
||
.speaker-controls-time .clock {
|
||
float: right;
|
||
text-align: right;
|
||
}
|
||
|
||
.speaker-controls-time span.mute {
|
||
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 {
|
||
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;
|
||
}
|
||
|
||
@media screen and (max-width: 1080px) {
|
||
body[data-speaker-layout="default"] #speaker-controls {
|
||
font-size: 16px;
|
||
}
|
||
}
|
||
|
||
@media screen and (max-width: 900px) {
|
||
body[data-speaker-layout="default"] #speaker-controls {
|
||
font-size: 14px;
|
||
}
|
||
}
|
||
|
||
@media screen and (max-width: 800px) {
|
||
body[data-speaker-layout="default"] #speaker-controls {
|
||
font-size: 12px;
|
||
}
|
||
}
|
||
|
||
</style>
|
||
</head>
|
||
|
||
<body>
|
||
|
||
<div id="connection-status">Loading speaker view...</div>
|
||
|
||
<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>
|
||
|
||
<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">
|
||
<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="../../plugin/markdown/marked.js"></script>
|
||
<script>
|
||
|
||
(function() {
|
||
|
||
var notes,
|
||
notesValue,
|
||
currentState,
|
||
currentSlide,
|
||
upcomingSlide,
|
||
layoutLabel,
|
||
layoutDropdown,
|
||
pendingCalls = {},
|
||
lastRevealApiCallId = 0,
|
||
connected = false;
|
||
|
||
var SPEAKER_LAYOUTS = {
|
||
'default': 'Default',
|
||
'wide': 'Wide',
|
||
'tall': 'Tall',
|
||
'notes-only': 'Notes only'
|
||
};
|
||
|
||
setupLayout();
|
||
|
||
var connectionStatus = document.querySelector( '#connection-status' );
|
||
var connectionTimeout = setTimeout( function() {
|
||
connectionStatus.innerHTML = 'Error connecting to main window.<br>Please try closing and reopening the speaker view.';
|
||
}, 5000 );
|
||
|
||
window.addEventListener( 'message', function( event ) {
|
||
|
||
clearTimeout( connectionTimeout );
|
||
connectionStatus.style.display = 'none';
|
||
|
||
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' ) {
|
||
handleConnectMessage( data );
|
||
}
|
||
else if( data.type === 'state' ) {
|
||
handleStateMessage( data );
|
||
}
|
||
else if( data.type === 'return' ) {
|
||
pendingCalls[data.callId](data.result);
|
||
delete pendingCalls[data.callId];
|
||
}
|
||
}
|
||
// Messages sent by the reveal.js inside of the current slide preview
|
||
else if( data && data.namespace === 'reveal' ) {
|
||
if( /ready/.test( data.eventName ) ) {
|
||
// 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|paused|resumed/.test( data.eventName ) && currentState !== JSON.stringify( data.state ) ) {
|
||
|
||
window.opener.postMessage( JSON.stringify({ method: 'setState', args: [ data.state ]} ), '*' );
|
||
|
||
}
|
||
}
|
||
|
||
} );
|
||
|
||
/**
|
||
* Asynchronously calls the Reveal.js API of the main frame.
|
||
*/
|
||
function callRevealApi( methodName, methodArguments, callback ) {
|
||
|
||
var callId = ++lastRevealApiCallId;
|
||
pendingCalls[callId] = callback;
|
||
window.opener.postMessage( JSON.stringify( {
|
||
namespace: 'reveal-notes',
|
||
type: 'call',
|
||
callId: callId,
|
||
methodName: methodName,
|
||
arguments: methodArguments
|
||
} ), '*' );
|
||
|
||
}
|
||
|
||
/**
|
||
* Called when the main window is trying to establish a
|
||
* connection.
|
||
*/
|
||
function handleConnectMessage( data ) {
|
||
|
||
if( connected === false ) {
|
||
connected = true;
|
||
|
||
setupIframes( data );
|
||
setupKeyboard();
|
||
setupNotes();
|
||
setupTimer();
|
||
}
|
||
|
||
}
|
||
|
||
/**
|
||
* 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' );
|
||
notesValue.style.whiteSpace = data.whitespace;
|
||
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.
|
||
*
|
||
* Block F5 default handling, it reloads and disconnects
|
||
* the speaker notes window.
|
||
*/
|
||
function setupKeyboard() {
|
||
|
||
document.addEventListener( 'keydown', function( event ) {
|
||
if( event.keyCode === 116 || ( event.metaKey && event.keyCode === 82 ) ) {
|
||
event.preventDefault();
|
||
return false;
|
||
}
|
||
currentSlide.contentWindow.postMessage( JSON.stringify({ method: 'triggerKey', args: [ event.keyCode ] }), '*' );
|
||
} );
|
||
|
||
}
|
||
|
||
/**
|
||
* Creates the preview iframes.
|
||
*/
|
||
function setupIframes( data ) {
|
||
|
||
var params = [
|
||
'receiver',
|
||
'progress=false',
|
||
'history=false',
|
||
'transition=none',
|
||
'autoSlide=0',
|
||
'backgroundTransition=none'
|
||
].join( '&' );
|
||
|
||
var urlSeparator = /\?/.test(data.url) ? '&' : '?';
|
||
var hash = '#/' + data.state.indexh + '/' + data.state.indexv;
|
||
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 );
|
||
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' );
|
||
|
||
}
|
||
|
||
function getTimings( callback ) {
|
||
|
||
callRevealApi( 'getSlidesAttributes', [], function ( slideAttributes ) {
|
||
callRevealApi( 'getConfig', [], function ( config ) {
|
||
var totalTime = config.totalTime;
|
||
var defaultTiming = config.defaultTiming;
|
||
if ((defaultTiming == null) && (totalTime == null)) {
|
||
callback(null);
|
||
return;
|
||
}
|
||
// Setting totalTime overrides defaultTiming
|
||
if (totalTime) {
|
||
defaultTiming = 0;
|
||
}
|
||
var timings = [];
|
||
for ( var i in slideAttributes ) {
|
||
var slide = slideAttributes[ i ];
|
||
var timing = defaultTiming;
|
||
if( slide.hasOwnProperty( 'data-timing' )) {
|
||
var t = slide[ '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);
|
||
}
|
||
if ( totalTime ) {
|
||
// After we've allocated time to individual slides, we summarize it and
|
||
// subtract it from the total time
|
||
var remainingTime = totalTime - timings.reduce( function(a, b) { return a + b; }, 0 );
|
||
// The remaining time is divided by the number of slides that have 0 seconds
|
||
// allocated at the moment, giving the average time-per-slide on the remaining slides
|
||
var remainingSlides = (timings.filter( function(x) { return x == 0 }) ).length
|
||
var timePerSlide = Math.round( remainingTime / remainingSlides, 0 )
|
||
// And now we replace every zero-value timing with that average
|
||
timings = timings.map( function(x) { return (x==0 ? timePerSlide : x) } );
|
||
}
|
||
callback( timings );
|
||
} );
|
||
} );
|
||
|
||
}
|
||
|
||
/**
|
||
* Return the number of seconds allocated for presenting
|
||
* all slides up to and including this one.
|
||
*/
|
||
function getTimeAllocated( timings, callback ) {
|
||
|
||
callRevealApi( 'getSlidePastCount', [], function ( currentSlide ) {
|
||
var allocated = 0;
|
||
for (var i in timings.slice(0, currentSlide + 1)) {
|
||
allocated += timings[i];
|
||
}
|
||
callback( allocated );
|
||
} );
|
||
|
||
}
|
||
|
||
/**
|
||
* 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' ),
|
||
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 = null;
|
||
getTimings( function ( _timings ) {
|
||
|
||
timings = _timings;
|
||
if (_timings !== null) {
|
||
pacingTitleEl.style.removeProperty('display');
|
||
pacingEl.style.removeProperty('display');
|
||
}
|
||
|
||
// Update once directly
|
||
_updateTimer();
|
||
|
||
// Then update every second
|
||
setInterval( _updateTimer, 1000 );
|
||
|
||
} );
|
||
|
||
|
||
function _resetTimer() {
|
||
|
||
if (timings == null) {
|
||
start = new Date();
|
||
_updateTimer();
|
||
}
|
||
else {
|
||
// Reset timer to beginning of current slide
|
||
getTimeAllocated( timings, function ( slideEndTimingSeconds ) {
|
||
var slideEndTiming = slideEndTimingSeconds * 1000;
|
||
callRevealApi( 'getSlidePastCount', [], function ( currentSlide ) {
|
||
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;
|
||
} );
|
||
|
||
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();
|
||
|
||
diff = now.getTime() - start.getTime();
|
||
|
||
clockEl.innerHTML = now.toLocaleTimeString( 'en-US', { hour12: true, hour: '2-digit', minute:'2-digit' } );
|
||
_displayTime( hoursEl, minutesEl, secondsEl, diff );
|
||
if (timings !== null) {
|
||
_updatePacing(diff);
|
||
}
|
||
|
||
}
|
||
|
||
function _updatePacing(diff) {
|
||
|
||
getTimeAllocated( timings, function ( slideEndTimingSeconds ) {
|
||
var slideEndTiming = slideEndTimingSeconds * 1000;
|
||
|
||
callRevealApi( 'getSlidePastCount', [], function ( currentSlide ) {
|
||
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 );
|
||
} );
|
||
} );
|
||
}
|
||
|
||
}
|
||
|
||
/**
|
||
* 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( supportsLocalStorage() ) {
|
||
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( supportsLocalStorage() ) {
|
||
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 supportsLocalStorage() {
|
||
|
||
try {
|
||
localStorage.setItem('test', 'test');
|
||
localStorage.removeItem('test');
|
||
return true;
|
||
}
|
||
catch( e ) {
|
||
return false;
|
||
}
|
||
|
||
}
|
||
|
||
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>
|