xobs/lca20-bt
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity
c0109d948f
lca20-bt/plugin/notes/notes.html

766 lines
18 KiB
HTML
Raw Normal View History

new postMessage-based notes plugin, moved node-based notes to notes-server (#190)
2012-10-21 00:40:52 +00:00
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>reveal.js - Slide Notes</title>
<style>
body {
font-family: Helvetica;
layout selector for speaker view; includes four options
2016-09-21 11:54:42 +00:00
font-size: 18px;
new postMessage-based notes plugin, moved node-based notes to notes-server (#190)
2012-10-21 00:40:52 +00:00
}
update style of notes plugin to match Slides
2014-04-20 08:26:00 +00:00
#current-slide,
notes code format tweaks
2014-04-22 12:14:21 +00:00
#upcoming-slide,
update style of notes plugin to match Slides
2014-04-20 08:26:00 +00:00
#speaker-controls {
padding: 6px;
box-sizing: border-box;
-moz-box-sizing: border-box;
new postMessage-based notes plugin, moved node-based notes to notes-server (#190)
2012-10-21 00:40:52 +00:00
}
update style of notes plugin to match Slides
2014-04-20 08:26:00 +00:00
#current-slide iframe,
notes code format tweaks
2014-04-22 12:14:21 +00:00
#upcoming-slide iframe {
update style of notes plugin to match Slides
2014-04-20 08:26:00 +00:00
width: 100%;
height: 100%;
border: 1px solid #ddd;
new postMessage-based notes plugin, moved node-based notes to notes-server (#190)
2012-10-21 00:40:52 +00:00
}
update style of notes plugin to match Slides
2014-04-20 08:26:00 +00:00
#current-slide .label,
notes code format tweaks
2014-04-22 12:14:21 +00:00
#upcoming-slide .label {
update style of notes plugin to match Slides
2014-04-20 08:26:00 +00:00
position: absolute;
top: 10px;
left: 10px;
z-index: 2;
layout selector for speaker view; includes four options
2016-09-21 11:54:42 +00:00
}
.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 );
new postMessage-based notes plugin, moved node-based notes to notes-server (#190)
2012-10-21 00:40:52 +00:00
}
update style of notes plugin to match Slides
2014-04-20 08:26:00 +00:00
#current-slide {
position: absolute;
layout selector for speaker view; includes four options
2016-09-21 11:54:42 +00:00
width: 60%;
height: 100%;
update style of notes plugin to match Slides
2014-04-20 08:26:00 +00:00
top: 0;
left: 0;
padding-right: 0;
new postMessage-based notes plugin, moved node-based notes to notes-server (#190)
2012-10-21 00:40:52 +00:00
}
notes code format tweaks
2014-04-22 12:14:21 +00:00
#upcoming-slide {
update style of notes plugin to match Slides
2014-04-20 08:26:00 +00:00
position: absolute;
layout selector for speaker view; includes four options
2016-09-21 11:54:42 +00:00
width: 40%;
height: 40%;
update style of notes plugin to match Slides
2014-04-20 08:26:00 +00:00
right: 0;
top: 0;
new postMessage-based notes plugin, moved node-based notes to notes-server (#190)
2012-10-21 00:40:52 +00:00
}
layout selector for speaker view; includes four options
2016-09-21 11:54:42 +00:00
/* Speaker controls */
update style of notes plugin to match Slides
2014-04-20 08:26:00 +00:00
#speaker-controls {
new postMessage-based notes plugin, moved node-based notes to notes-server (#190)
2012-10-21 00:40:52 +00:00
position: absolute;
layout selector for speaker view; includes four options
2016-09-21 11:54:42 +00:00
top: 40%;
right: 0;
width: 40%;
height: 60%;
better handling of overflowing speaker notes #1017
2014-10-16 11:09:54 +00:00
overflow: auto;
update style of notes plugin to match Slides
2014-04-20 08:26:00 +00:00
font-size: 18px;
show error when notes run on non-http, fix load order to make sure upcoming slide is correct when notes open (#278)
2013-01-23 16:04:04 +00:00
}
update style of notes plugin to match Slides
2014-04-20 08:26:00 +00:00
.speaker-controls-time.hidden,
.speaker-controls-notes.hidden {
display: none;
}
.speaker-controls-time .label,
optionally display pacing advice based on slide timings Add an option to display advice on whether the current pace of the presentation is on track for the right timing (shown as green), and if not, whether the presenter should speed up (shown as red) or has the luxury of slowing down (blue). The pacing timer can be enabled by configuring by the `defaultTiming` parameter in the `Reveal` configuration block, which specifies the number of seconds per slide. 120 can be a reasonable rule of thumb. Timings can also be given per slide `<section>` by setting the `data-timing` attribute. Both values are in numbers of seconds. When the option is enabled, clicking on the timers will reset the timer to the beginning of the current slide, i.e. as if pacing was perfectly on track, not to zero as if the presentation had just begun.
2016-04-16 14:43:44 +00:00
.speaker-controls-pace .label,
update style of notes plugin to match Slides
2014-04-20 08:26:00 +00:00
.speaker-controls-notes .label {
text-transform: uppercase;
font-weight: normal;
font-size: 0.66em;
color: #666;
margin: 0;
}
optionally display pacing advice based on slide timings Add an option to display advice on whether the current pace of the presentation is on track for the right timing (shown as green), and if not, whether the presenter should speed up (shown as red) or has the luxury of slowing down (blue). The pacing timer can be enabled by configuring by the `defaultTiming` parameter in the `Reveal` configuration block, which specifies the number of seconds per slide. 120 can be a reasonable rule of thumb. Timings can also be given per slide `<section>` by setting the `data-timing` attribute. Both values are in numbers of seconds. When the option is enabled, clicking on the timers will reset the timer to the beginning of the current slide, i.e. as if pacing was perfectly on track, not to zero as if the presentation had just begun.
2016-04-16 14:43:44 +00:00
.speaker-controls-time, .speaker-controls-pace {
update style of notes plugin to match Slides
2014-04-20 08:26:00 +00:00
border-bottom: 1px solid rgba( 200, 200, 200, 0.5 );
margin-bottom: 10px;
padding: 10px 16px;
padding-bottom: 20px;
clicking on notes timer now resets it #779
2014-05-04 06:13:03 +00:00
cursor: pointer;
}
.speaker-controls-time .reset-button {
opacity: 0;
float: right;
color: #666;
text-decoration: none;
}
.speaker-controls-time:hover .reset-button {
opacity: 1;
update style of notes plugin to match Slides
2014-04-20 08:26:00 +00:00
}
.speaker-controls-time .timer,
.speaker-controls-time .clock {
width: 50%;
optionally display pacing advice based on slide timings Add an option to display advice on whether the current pace of the presentation is on track for the right timing (shown as green), and if not, whether the presenter should speed up (shown as red) or has the luxury of slowing down (blue). The pacing timer can be enabled by configuring by the `defaultTiming` parameter in the `Reveal` configuration block, which specifies the number of seconds per slide. 120 can be a reasonable rule of thumb. Timings can also be given per slide `<section>` by setting the `data-timing` attribute. Both values are in numbers of seconds. When the option is enabled, clicking on the timers will reset the timer to the beginning of the current slide, i.e. as if pacing was perfectly on track, not to zero as if the presentation had just begun.
2016-04-16 14:43:44 +00:00
}
.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 {
update style of notes plugin to match Slides
2014-04-20 08:26:00 +00:00
font-size: 1.9em;
}
.speaker-controls-time .timer {
float: left;
}
merge in timer in notes window, timer now stays hidden until initial time is set
2013-01-26 18:32:07 +00:00
update style of notes plugin to match Slides
2014-04-20 08:26:00 +00:00
.speaker-controls-time .clock {
float: right;
text-align: right;
}
.speaker-controls-time span.mute {
use opacity for muted clock elements This allows us to use different colours for different timers, which will be useful when we add a pacing timer.
2016-04-16 16:10:58 +00:00
opacity: 0.3;
update style of notes plugin to match Slides
2014-04-20 08:26:00 +00:00
}
minor tweak for #1564
2017-04-21 07:35:51 +00:00
.speaker-controls-time .pacing-title {
margin-top: 5px;
}
optionally display pacing advice based on slide timings Add an option to display advice on whether the current pace of the presentation is on track for the right timing (shown as green), and if not, whether the presenter should speed up (shown as red) or has the luxury of slowing down (blue). The pacing timer can be enabled by configuring by the `defaultTiming` parameter in the `Reveal` configuration block, which specifies the number of seconds per slide. 120 can be a reasonable rule of thumb. Timings can also be given per slide `<section>` by setting the `data-timing` attribute. Both values are in numbers of seconds. When the option is enabled, clicking on the timers will reset the timer to the beginning of the current slide, i.e. as if pacing was perfectly on track, not to zero as if the presentation had just begun.
2016-04-16 14:43:44 +00:00
.speaker-controls-time .pacing.ahead {
color: blue;
}
.speaker-controls-time .pacing.on-track {
color: green;
}
.speaker-controls-time .pacing.behind {
color: red;
}
update style of notes plugin to match Slides
2014-04-20 08:26:00 +00:00
.speaker-controls-notes {
padding: 10px 16px;
}
.speaker-controls-notes .value {
margin-top: 5px;
line-height: 1.4;
font-size: 1.2em;
}
layout selector for speaker view; includes four options
2016-09-21 11:54:42 +00:00
/* 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;
}
update style of notes plugin to match Slides
2014-04-20 08:26:00 +00:00
.clear {
clear: both;
Add clock and elapsed time to notes view
2013-01-26 16:49:19 +00:00
}
merge in timer in notes window, timer now stays hidden until initial time is set
2013-01-26 18:32:07 +00:00
layout selector for speaker view; includes four options
2016-09-21 11:54:42 +00:00
/* 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;
}
update style of notes plugin to match Slides
2014-04-20 08:26:00 +00:00
@media screen and (max-width: 1080px) {
layout selector for speaker view; includes four options
2016-09-21 11:54:42 +00:00
body[data-speaker-layout="default"] #speaker-controls {
update style of notes plugin to match Slides
2014-04-20 08:26:00 +00:00
font-size: 16px;
}
Add clock and elapsed time to notes view
2013-01-26 16:49:19 +00:00
}
merge in timer in notes window, timer now stays hidden until initial time is set
2013-01-26 18:32:07 +00:00
update style of notes plugin to match Slides
2014-04-20 08:26:00 +00:00
@media screen and (max-width: 900px) {
layout selector for speaker view; includes four options
2016-09-21 11:54:42 +00:00
body[data-speaker-layout="default"] #speaker-controls {
update style of notes plugin to match Slides
2014-04-20 08:26:00 +00:00
font-size: 14px;
}
Add clock and elapsed time to notes view
2013-01-26 16:49:19 +00:00
}
merge in timer in notes window, timer now stays hidden until initial time is set
2013-01-26 18:32:07 +00:00
update style of notes plugin to match Slides
2014-04-20 08:26:00 +00:00
@media screen and (max-width: 800px) {
layout selector for speaker view; includes four options
2016-09-21 11:54:42 +00:00
body[data-speaker-layout="default"] #speaker-controls {
update style of notes plugin to match Slides
2014-04-20 08:26:00 +00:00
font-size: 12px;
}
Add clock and elapsed time to notes view
2013-01-26 16:49:19 +00:00
}
new postMessage-based notes plugin, moved node-based notes to notes-server (#190)
2012-10-21 00:40:52 +00:00
</style>
</head>
<body>
update style of notes plugin to match Slides
2014-04-20 08:26:00 +00:00
<div id="current-slide"></div>
layout selector for speaker view; includes four options
2016-09-21 11:54:42 +00:00
<div id="upcoming-slide"><span class="overlay-element label">Upcoming</span></div>
update style of notes plugin to match Slides
2014-04-20 08:26:00 +00:00
<div id="speaker-controls">
<div class="speaker-controls-time">
clicking on notes timer now resets it #779
2014-05-04 06:13:03 +00:00
<h4 class="label">Time <span class="reset-button">Click to Reset</span></h4>
update style of notes plugin to match Slides
2014-04-20 08:26:00 +00:00
<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>
optionally display pacing advice based on slide timings Add an option to display advice on whether the current pace of the presentation is on track for the right timing (shown as green), and if not, whether the presenter should speed up (shown as red) or has the luxury of slowing down (blue). The pacing timer can be enabled by configuring by the `defaultTiming` parameter in the `Reveal` configuration block, which specifies the number of seconds per slide. 120 can be a reasonable rule of thumb. Timings can also be given per slide `<section>` by setting the `data-timing` attribute. Both values are in numbers of seconds. When the option is enabled, clicking on the timers will reset the timer to the beginning of the current slide, i.e. as if pacing was perfectly on track, not to zero as if the presentation had just begun.
2016-04-16 14:43:44 +00:00
minor tweak for #1564
2017-04-21 07:35:51 +00:00
<h4 class="label pacing-title" style="display: none">Pacing – Time to finish current slide</h4>
optionally display pacing advice based on slide timings Add an option to display advice on whether the current pace of the presentation is on track for the right timing (shown as green), and if not, whether the presenter should speed up (shown as red) or has the luxury of slowing down (blue). The pacing timer can be enabled by configuring by the `defaultTiming` parameter in the `Reveal` configuration block, which specifies the number of seconds per slide. 120 can be a reasonable rule of thumb. Timings can also be given per slide `<section>` by setting the `data-timing` attribute. Both values are in numbers of seconds. When the option is enabled, clicking on the timers will reset the timer to the beginning of the current slide, i.e. as if pacing was perfectly on track, not to zero as if the presentation had just begun.
2016-04-16 14:43:44 +00:00
<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>
Add clock and elapsed time to notes view
2013-01-26 16:49:19 +00:00
</div>
update style of notes plugin to match Slides
2014-04-20 08:26:00 +00:00
<div class="speaker-controls-notes hidden">
<h4 class="label">Notes</h4>
<div class="value"></div>
Add clock and elapsed time to notes view
2013-01-26 16:49:19 +00:00
</div>
</div>
layout selector for speaker view; includes four options
2016-09-21 11:54:42 +00:00
<div id="speaker-layout" class="overlay-element interactive">
<span class="speaker-layout-label"></span>
<select class="speaker-layout-dropdown"></select>
</div>
merge in timer in notes window, timer now stays hidden until initial time is set
2013-01-26 18:32:07 +00:00
Replace the ShowDown Markdown engine with marked
2013-05-01 20:10:31 +00:00
<script src="../../plugin/markdown/marked.js"></script>
new postMessage-based notes plugin, moved node-based notes to notes-server (#190)
2012-10-21 00:40:52 +00:00
<script>
merge in timer in notes window, timer now stays hidden until initial time is set
2013-01-26 18:32:07 +00:00
notes plugin now operates entirely through window.postMessage, adding support for file protocol
2014-04-19 08:54:14 +00:00
(function() {
var notes,
update style of notes plugin to match Slides
2014-04-20 08:26:00 +00:00
notesValue,
notes plugin now operates entirely through window.postMessage, adding support for file protocol
2014-04-19 08:54:14 +00:00
currentState,
currentSlide,
notes code format tweaks
2014-04-22 12:14:21 +00:00
upcomingSlide,
layout selector for speaker view; includes four options
2016-09-21 11:54:42 +00:00
layoutLabel,
layoutDropdown,
notes plugin now operates entirely through window.postMessage, adding support for file protocol
2014-04-19 08:54:14 +00:00
connected = false;
layout selector for speaker view; includes four options
2016-09-21 11:54:42 +00:00
var SPEAKER_LAYOUTS = {
'default': 'Default',
'wide': 'Wide',
'tall': 'Tall',
'notes-only': 'Notes only'
};
setupLayout();
notes plugin now operates entirely through window.postMessage, adding support for file protocol
2014-04-19 08:54:14 +00:00
window.addEventListener( 'message', function( event ) {
var data = JSON.parse( event.data );
notes plugin no longer syncs overview mode #1446
2016-03-09 08:57:58 +00:00
// 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;
notes plugin now operates entirely through window.postMessage, adding support for file protocol
2014-04-19 08:54:14 +00:00
// 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 );
}
}
// 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'} ), '*' );
}
notes plugin no longer syncs overview mode #1446
2016-03-09 08:57:58 +00:00
else if( /slidechanged|fragmentshown|fragmenthidden|paused|resumed/.test( data.eventName ) && currentState !== JSON.stringify( data.state ) ) {
notes plugin now operates entirely through window.postMessage, adding support for file protocol
2014-04-19 08:54:14 +00:00
window.opener.postMessage( JSON.stringify({ method: 'setState', args: [ data.state ]} ), '*' );
notes plugin no longer syncs overview mode #1446
2016-03-09 08:57:58 +00:00
notes plugin now operates entirely through window.postMessage, adding support for file protocol
2014-04-19 08:54:14 +00:00
}
}
} );
/**
* Called when the main window is trying to establish a
* connection.
*/
function handleConnectMessage( data ) {
if( connected === false ) {
connected = true;
setupIframes( data );
enable reveal.js keyboard shortcuts anywhere in notes window
2014-04-26 09:35:55 +00:00
setupKeyboard();
update style of notes plugin to match Slides
2014-04-20 08:26:00 +00:00
setupNotes();
notes plugin now operates entirely through window.postMessage, adding support for file protocol
2014-04-19 08:54:14 +00:00
setupTimer();
}
new postMessage-based notes plugin, moved node-based notes to notes-server (#190)
2012-10-21 00:40:52 +00:00
notes plugin now operates entirely through window.postMessage, adding support for file protocol
2014-04-19 08:54:14 +00:00
}
show error when notes run on non-http, fix load order to make sure upcoming slide is correct when notes open (#278)
2013-01-23 16:04:04 +00:00
notes plugin now operates entirely through window.postMessage, adding support for file protocol
2014-04-19 08:54:14 +00:00
/**
* Called when the main window sends an updated state.
*/
function handleStateMessage( data ) {
show error when notes run on non-http, fix load order to make sure upcoming slide is correct when notes open (#278)
2013-01-23 16:04:04 +00:00
notes plugin now operates entirely through window.postMessage, adding support for file protocol
2014-04-19 08:54:14 +00:00
// Store the most recently set state to avoid circular loops
// applying the same state
currentState = JSON.stringify( data.state );
simplify client side notes plugin
2013-07-26 13:48:21 +00:00
notes plugin now operates entirely through window.postMessage, adding support for file protocol
2014-04-19 08:54:14 +00:00
// No need for updating the notes in case of fragment changes
update style of notes plugin to match Slides
2014-04-20 08:26:00 +00:00
if ( data.notes ) {
notes.classList.remove( 'hidden' );
notes defined in data-notes attributes retain preformatted whitespace
2015-09-25 07:41:05 +00:00
notesValue.style.whiteSpace = data.whitespace;
notes plugin now operates entirely through window.postMessage, adding support for file protocol
2014-04-19 08:54:14 +00:00
if( data.markdown ) {
update style of notes plugin to match Slides
2014-04-20 08:26:00 +00:00
notesValue.innerHTML = marked( data.notes );
notes plugin now operates entirely through window.postMessage, adding support for file protocol
2014-04-19 08:54:14 +00:00
}
else {
update style of notes plugin to match Slides
2014-04-20 08:26:00 +00:00
notesValue.innerHTML = data.notes;
merge in timer in notes window, timer now stays hidden until initial time is set
2013-01-26 18:32:07 +00:00
}
notes plugin now operates entirely through window.postMessage, adding support for file protocol
2014-04-19 08:54:14 +00:00
}
update style of notes plugin to match Slides
2014-04-20 08:26:00 +00:00
else {
notes.classList.add( 'hidden' );
}
notes plugin now operates entirely through window.postMessage, adding support for file protocol
2014-04-19 08:54:14 +00:00
// Update the note slides
currentSlide.contentWindow.postMessage( JSON.stringify({ method: 'setState', args: [ data.state ] }), '*' );
notes code format tweaks
2014-04-22 12:14:21 +00:00
upcomingSlide.contentWindow.postMessage( JSON.stringify({ method: 'setState', args: [ data.state ] }), '*' );
upcomingSlide.contentWindow.postMessage( JSON.stringify({ method: 'next' }), '*' );
merge in timer in notes window, timer now stays hidden until initial time is set
2013-01-26 18:32:07 +00:00
notes plugin now operates entirely through window.postMessage, adding support for file protocol
2014-04-19 08:54:14 +00:00
}
ensure notes window fragment states are mirrored in main window #538
2013-07-26 14:03:59 +00:00
limit how often the notes window updates presentation states
2014-04-22 12:50:50 +00:00
// Limit to max one state update per X ms
handleStateMessage = debounce( handleStateMessage, 200 );
enable reveal.js keyboard shortcuts anywhere in notes window
2014-04-26 09:35:55 +00:00
/**
* 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 in speaker notes window, avoid disconnects
2017-08-12 11:38:46 +00:00
*
* Block F5 default handling, it reloads and disconnects
* the speaker notes window.
enable reveal.js keyboard shortcuts anywhere in notes window
2014-04-26 09:35:55 +00:00
*/
function setupKeyboard() {
document.addEventListener( 'keydown', function( event ) {
Block F5 in speaker notes window, avoid disconnects
2017-08-12 11:38:46 +00:00
if (event.keyCode === 116) {
event.preventDefault();
}
enable reveal.js keyboard shortcuts anywhere in notes window
2014-04-26 09:35:55 +00:00
currentSlide.contentWindow.postMessage( JSON.stringify({ method: 'triggerKey', args: [ event.keyCode ] }), '*' );
} );
}
notes plugin now operates entirely through window.postMessage, adding support for file protocol
2014-04-19 08:54:14 +00:00
/**
* Creates the preview iframes.
*/
function setupIframes( data ) {
merge in timer in notes window, timer now stays hidden until initial time is set
2013-01-26 18:32:07 +00:00
skip transitions in notes window for better main window performance
2014-04-22 13:05:06 +00:00
var params = [
dont toggle paused/overview modes needlessly when setting state
2014-04-22 12:06:58 +00:00
'receiver',
'progress=false',
notes code format tweaks
2014-04-22 12:14:21 +00:00
'history=false',
'transition=none',
prevent auto-sliding in notes frames #1004
2014-09-28 15:13:49 +00:00
'autoSlide=0',
notes code format tweaks
2014-04-22 12:14:21 +00:00
'backgroundTransition=none'
].join( '&' );
dont toggle paused/overview modes needlessly when setting state
2014-04-22 12:06:58 +00:00
fix notes regex #1522 #1392
2016-03-09 08:37:10 +00:00
var urlSeparator = /\?/.test(data.url) ? '&' : '?';
notes plugin now operates entirely through window.postMessage, adding support for file protocol
2014-04-19 08:54:14 +00:00
var hash = '#/' + data.state.indexh + '/' + data.state.indexv;
Fix query parameter issue in notes plugin. Closes #1392.
2016-03-06 10:28:08 +00:00
var currentURL = data.url + urlSeparator + params + '&postMessageEvents=true' + hash;
var upcomingURL = data.url + urlSeparator + params + '&controls=false' + hash;
notes plugin now operates entirely through window.postMessage, adding support for file protocol
2014-04-19 08:54:14 +00:00
currentSlide = document.createElement( 'iframe' );
currentSlide.setAttribute( 'width', 1280 );
currentSlide.setAttribute( 'height', 1024 );
notes code format tweaks
2014-04-22 12:14:21 +00:00
currentSlide.setAttribute( 'src', currentURL );
update style of notes plugin to match Slides
2014-04-20 08:26:00 +00:00
document.querySelector( '#current-slide' ).appendChild( currentSlide );
notes plugin now operates entirely through window.postMessage, adding support for file protocol
2014-04-19 08:54:14 +00:00
notes code format tweaks
2014-04-22 12:14:21 +00:00
upcomingSlide = document.createElement( 'iframe' );
upcomingSlide.setAttribute( 'width', 640 );
upcomingSlide.setAttribute( 'height', 512 );
upcomingSlide.setAttribute( 'src', upcomingURL );
document.querySelector( '#upcoming-slide' ).appendChild( upcomingSlide );
update style of notes plugin to match Slides
2014-04-20 08:26:00 +00:00
}
/**
* Setup the notes UI.
*/
function setupNotes() {
notes = document.querySelector( '.speaker-controls-notes' );
notesValue = document.querySelector( '.speaker-controls-notes .value' );
notes plugin now operates entirely through window.postMessage, adding support for file protocol
2014-04-19 08:54:14 +00:00
}
ensure notes window fragment states are mirrored in main window #538
2013-07-26 14:03:59 +00:00
optionally display pacing advice based on slide timings Add an option to display advice on whether the current pace of the presentation is on track for the right timing (shown as green), and if not, whether the presenter should speed up (shown as red) or has the luxury of slowing down (blue). The pacing timer can be enabled by configuring by the `defaultTiming` parameter in the `Reveal` configuration block, which specifies the number of seconds per slide. 120 can be a reasonable rule of thumb. Timings can also be given per slide `<section>` by setting the `data-timing` attribute. Both values are in numbers of seconds. When the option is enabled, clicking on the timers will reset the timer to the beginning of the current slide, i.e. as if pacing was perfectly on track, not to zero as if the presentation had just begun.
2016-04-16 14:43:44 +00:00
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;
}
notes plugin now operates entirely through window.postMessage, adding support for file protocol
2014-04-19 08:54:14 +00:00
/**
* Create the timer and clock and start updating them
* at an interval.
*/
function setupTimer() {
merge in timer in notes window, timer now stays hidden until initial time is set
2013-01-26 18:32:07 +00:00
var start = new Date(),
optionally display pacing advice based on slide timings Add an option to display advice on whether the current pace of the presentation is on track for the right timing (shown as green), and if not, whether the presenter should speed up (shown as red) or has the luxury of slowing down (blue). The pacing timer can be enabled by configuring by the `defaultTiming` parameter in the `Reveal` configuration block, which specifies the number of seconds per slide. 120 can be a reasonable rule of thumb. Timings can also be given per slide `<section>` by setting the `data-timing` attribute. Both values are in numbers of seconds. When the option is enabled, clicking on the timers will reset the timer to the beginning of the current slide, i.e. as if pacing was perfectly on track, not to zero as if the presentation had just begun.
2016-04-16 14:43:44 +00:00
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');
}
merge in timer in notes window, timer now stays hidden until initial time is set
2013-01-26 18:32:07 +00:00
extract time display code into new _displayTime() function This will allow us to reuse the display code for displaying an additional pacing timer.
2016-04-16 15:52:34 +00:00
function _displayTime( hrEl, minEl, secEl, time) {
optionally display pacing advice based on slide timings Add an option to display advice on whether the current pace of the presentation is on track for the right timing (shown as green), and if not, whether the presenter should speed up (shown as red) or has the luxury of slowing down (blue). The pacing timer can be enabled by configuring by the `defaultTiming` parameter in the `Reveal` configuration block, which specifies the number of seconds per slide. 120 can be a reasonable rule of thumb. Timings can also be given per slide `<section>` by setting the `data-timing` attribute. Both values are in numbers of seconds. When the option is enabled, clicking on the timers will reset the timer to the beginning of the current slide, i.e. as if pacing was perfectly on track, not to zero as if the presentation had just begun.
2016-04-16 14:43:44 +00:00
don't show negative signs inside minutes/seconds elements
2016-04-16 17:00:27 +00:00
var sign = Math.sign(time) == -1 ? "-" : "";
time = Math.abs(Math.round(time / 1000));
round decreasing timers to mirror increasing timers
2016-04-16 17:11:48 +00:00
var seconds = time % 60;
optionally display pacing advice based on slide timings Add an option to display advice on whether the current pace of the presentation is on track for the right timing (shown as green), and if not, whether the presenter should speed up (shown as red) or has the luxury of slowing down (blue). The pacing timer can be enabled by configuring by the `defaultTiming` parameter in the `Reveal` configuration block, which specifies the number of seconds per slide. 120 can be a reasonable rule of thumb. Timings can also be given per slide `<section>` by setting the `data-timing` attribute. Both values are in numbers of seconds. When the option is enabled, clicking on the timers will reset the timer to the beginning of the current slide, i.e. as if pacing was perfectly on track, not to zero as if the presentation had just begun.
2016-04-16 14:43:44 +00:00
var minutes = Math.floor( time / 60 ) % 60 ;
var hours = Math.floor( time / ( 60 * 60 )) ;
don't show negative signs inside minutes/seconds elements
2016-04-16 17:00:27 +00:00
hrEl.innerHTML = sign + zeroPadInteger( hours );
avoid deleting existing classes when muting time elements and make muting work for negative values
2016-04-16 16:40:21 +00:00
if (hours == 0) {
hrEl.classList.add( 'mute' );
}
else {
hrEl.classList.remove( 'mute' );
}
extract time display code into new _displayTime() function This will allow us to reuse the display code for displaying an additional pacing timer.
2016-04-16 15:52:34 +00:00
minEl.innerHTML = ':' + zeroPadInteger( minutes );
avoid deleting existing classes when muting time elements and make muting work for negative values
2016-04-16 16:40:21 +00:00
if (hours == 0 && minutes == 0) {
minEl.classList.add( 'mute' );
}
else {
minEl.classList.remove( 'mute' );
}
extract time display code into new _displayTime() function This will allow us to reuse the display code for displaying an additional pacing timer.
2016-04-16 15:52:34 +00:00
secEl.innerHTML = ':' + zeroPadInteger( seconds );
}
update style of notes plugin to match Slides
2014-04-20 08:26:00 +00:00
function _updateTimer() {
merge in timer in notes window, timer now stays hidden until initial time is set
2013-01-26 18:32:07 +00:00
var diff, hours, minutes, seconds,
optionally display pacing advice based on slide timings Add an option to display advice on whether the current pace of the presentation is on track for the right timing (shown as green), and if not, whether the presenter should speed up (shown as red) or has the luxury of slowing down (blue). The pacing timer can be enabled by configuring by the `defaultTiming` parameter in the `Reveal` configuration block, which specifies the number of seconds per slide. 120 can be a reasonable rule of thumb. Timings can also be given per slide `<section>` by setting the `data-timing` attribute. Both values are in numbers of seconds. When the option is enabled, clicking on the timers will reset the timer to the beginning of the current slide, i.e. as if pacing was perfectly on track, not to zero as if the presentation had just begun.
2016-04-16 14:43:44 +00:00
now = new Date();
merge in timer in notes window, timer now stays hidden until initial time is set
2013-01-26 18:32:07 +00:00
diff = now.getTime() - start.getTime();
update style of notes plugin to match Slides
2014-04-20 08:26:00 +00:00
clockEl.innerHTML = now.toLocaleTimeString( 'en-US', { hour12: true, hour: '2-digit', minute:'2-digit' } );
extract time display code into new _displayTime() function This will allow us to reuse the display code for displaying an additional pacing timer.
2016-04-16 15:52:34 +00:00
_displayTime( hoursEl, minutesEl, secondsEl, diff );
optionally display pacing advice based on slide timings Add an option to display advice on whether the current pace of the presentation is on track for the right timing (shown as green), and if not, whether the presenter should speed up (shown as red) or has the luxury of slowing down (blue). The pacing timer can be enabled by configuring by the `defaultTiming` parameter in the `Reveal` configuration block, which specifies the number of seconds per slide. 120 can be a reasonable rule of thumb. Timings can also be given per slide `<section>` by setting the `data-timing` attribute. Both values are in numbers of seconds. When the option is enabled, clicking on the timers will reset the timer to the beginning of the current slide, i.e. as if pacing was perfectly on track, not to zero as if the presentation had just begun.
2016-04-16 14:43:44 +00:00
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 );
merge in timer in notes window, timer now stays hidden until initial time is set
2013-01-26 18:32:07 +00:00
update style of notes plugin to match Slides
2014-04-20 08:26:00 +00:00
}
// Update once directly
_updateTimer();
// Then update every second
setInterval( _updateTimer, 1000 );
show error when notes run on non-http, fix load order to make sure upcoming slide is correct when notes open (#278)
2013-01-23 16:04:04 +00:00
optionally display pacing advice based on slide timings Add an option to display advice on whether the current pace of the presentation is on track for the right timing (shown as green), and if not, whether the presenter should speed up (shown as red) or has the luxury of slowing down (blue). The pacing timer can be enabled by configuring by the `defaultTiming` parameter in the `Reveal` configuration block, which specifies the number of seconds per slide. 120 can be a reasonable rule of thumb. Timings can also be given per slide `<section>` by setting the `data-timing` attribute. Both values are in numbers of seconds. When the option is enabled, clicking on the timers will reset the timer to the beginning of the current slide, i.e. as if pacing was perfectly on track, not to zero as if the presentation had just begun.
2016-04-16 14:43:44 +00:00
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);
}
clicking on notes timer now resets it #779
2014-05-04 06:13:03 +00:00
_updateTimer();
optionally display pacing advice based on slide timings Add an option to display advice on whether the current pace of the presentation is on track for the right timing (shown as green), and if not, whether the presenter should speed up (shown as red) or has the luxury of slowing down (blue). The pacing timer can be enabled by configuring by the `defaultTiming` parameter in the `Reveal` configuration block, which specifies the number of seconds per slide. 120 can be a reasonable rule of thumb. Timings can also be given per slide `<section>` by setting the `data-timing` attribute. Both values are in numbers of seconds. When the option is enabled, clicking on the timers will reset the timer to the beginning of the current slide, i.e. as if pacing was perfectly on track, not to zero as if the presentation had just begun.
2016-04-16 14:43:44 +00:00
}
timeEl.addEventListener( 'click', function() {
_resetTimer();
clicking on notes timer now resets it #779
2014-05-04 06:13:03 +00:00
return false;
} );
show error when notes run on non-http, fix load order to make sure upcoming slide is correct when notes open (#278)
2013-01-23 16:04:04 +00:00
}
layout selector for speaker view; includes four options
2016-09-21 11:54:42 +00:00
/**
* 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
localstorage feature test in notes plugin, fixes speaker view error in safari
2017-07-13 18:19:16 +00:00
if( supportsLocalStorage() ) {
layout selector for speaker view; includes four options
2016-09-21 11:54:42 +00:00
window.localStorage.setItem( 'reveal-speaker-layout', value );
}
}
speaker layouts in server side notes plugin
2016-09-21 12:10:14 +00:00
/**
* Returns the ID of the most recently set speaker layout
* or our default layout if none has been set.
*/
layout selector for speaker view; includes four options
2016-09-21 11:54:42 +00:00
function getLayout() {
localstorage feature test in notes plugin, fixes speaker view error in safari
2017-07-13 18:19:16 +00:00
if( supportsLocalStorage() ) {
layout selector for speaker view; includes four options
2016-09-21 11:54:42 +00:00
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;
}
}
localstorage feature test in notes plugin, fixes speaker view error in safari
2017-07-13 18:19:16 +00:00
function supportsLocalStorage() {
try {
localStorage.setItem('test', 'test');
localStorage.removeItem('test');
return true;
}
catch( e ) {
return false;
}
}
notes plugin now operates entirely through window.postMessage, adding support for file protocol
2014-04-19 08:54:14 +00:00
function zeroPadInteger( num ) {
new postMessage-based notes plugin, moved node-based notes to notes-server (#190)
2012-10-21 00:40:52 +00:00
notes plugin now operates entirely through window.postMessage, adding support for file protocol
2014-04-19 08:54:14 +00:00
var str = '00' + parseInt( num );
return str.substring( str.length - 2 );
Add clock and elapsed time to notes view
2013-01-26 16:49:19 +00:00
notes plugin now operates entirely through window.postMessage, adding support for file protocol
2014-04-19 08:54:14 +00:00
}
new postMessage-based notes plugin, moved node-based notes to notes-server (#190)
2012-10-21 00:40:52 +00:00
limit how often the notes window updates presentation states
2014-04-22 12:50:50 +00:00
/**
* 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 );
}
}
}
notes plugin now operates entirely through window.postMessage, adding support for file protocol
2014-04-19 08:54:14 +00:00
})();
merge in timer in notes window, timer now stays hidden until initial time is set
2013-01-26 18:32:07 +00:00
new postMessage-based notes plugin, moved node-based notes to notes-server (#190)
2012-10-21 00:40:52 +00:00
</script>
</body>
</html>
Reference in New Issue Copy Permalink