From 6d0b52026a773559407a452b94f8ab60d80aac1e Mon Sep 17 00:00:00 2001 From: Benjamin Tan Date: Sun, 6 Mar 2016 18:28:08 +0800 Subject: Fix query parameter issue in notes plugin. Closes #1392.--- plugin/notes/notes.html | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) (limited to 'plugin/notes/notes.html') diff --git a/plugin/notes/notes.html b/plugin/notes/notes.html index 75f1b9b..d0d88dc 100644 --- a/plugin/notes/notes.html +++ b/plugin/notes/notes.html @@ -288,9 +288,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 ); -- cgit v1.2.3 From 922677ac66d6a40eba23e5f9ac3fc10d9145b203 Mon Sep 17 00:00:00 2001 From: Hakim El Hattab Date: Wed, 9 Mar 2016 09:37:10 +0100 Subject: fix notes regex #1522 #1392 --- plugin/notes/notes.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'plugin/notes/notes.html') diff --git a/plugin/notes/notes.html b/plugin/notes/notes.html index d0d88dc..8523e98 100644 --- a/plugin/notes/notes.html +++ b/plugin/notes/notes.html @@ -288,7 +288,7 @@ 'backgroundTransition=none' ].join( '&' ); - var urlSeparator = /?/.test(data.url) ? '&' : '?'; + 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; -- cgit v1.2.3 From 8e3a7f03d189391f88f56b8ac7c96db709d7cba7 Mon Sep 17 00:00:00 2001 From: Hakim El Hattab Date: Wed, 9 Mar 2016 09:57:58 +0100 Subject: notes plugin no longer syncs overview mode #1446 --- plugin/notes/notes.html | 8 +++++++- 1 file changed, 7 insertions(+), 1 deletion(-) (limited to 'plugin/notes/notes.html') diff --git a/plugin/notes/notes.html b/plugin/notes/notes.html index 8523e98..c80e77f 100644 --- a/plugin/notes/notes.html +++ b/plugin/notes/notes.html @@ -188,6 +188,10 @@ 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 +207,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 ]} ), '*' ); + } } -- cgit v1.2.3 From ad86772f206d7abd119a8ca7b89a31e237e93584 Mon Sep 17 00:00:00 2001 From: Timothep Date: Wed, 9 Mar 2016 11:47:23 +0100 Subject: Horizontal 2-1 View for the speaker notes instead of a vertical 1-2 --- plugin/notes/notes.html | 17 ++++++++--------- 1 file changed, 8 insertions(+), 9 deletions(-) (limited to 'plugin/notes/notes.html') diff --git a/plugin/notes/notes.html b/plugin/notes/notes.html index c80e77f..53d50c3 100644 --- a/plugin/notes/notes.html +++ b/plugin/notes/notes.html @@ -38,8 +38,8 @@ #current-slide { position: absolute; - width: 65%; - height: 100%; + width: 50%; + height: 50%; top: 0; left: 0; padding-right: 0; @@ -47,20 +47,19 @@ #upcoming-slide { position: absolute; - width: 35%; - height: 40%; + width: 50%; + height: 50%; right: 0; top: 0; } #speaker-controls { position: absolute; - top: 40%; - right: 0; - width: 35%; - height: 60%; + top: 50%; + left: 0; + width: 100%; + height: 50%; overflow: auto; - font-size: 18px; } -- cgit v1.2.3 From da5709919b78d1d75a712c6ba6f4520bee3a0be6 Mon Sep 17 00:00:00 2001 From: Hakim El Hattab Date: Wed, 21 Sep 2016 13:54:42 +0200 Subject: layout selector for speaker view; includes four options --- plugin/notes/notes.html | 222 ++++++++++++++++++++++++++++++++++++++++++++---- 1 file changed, 207 insertions(+), 15 deletions(-) (limited to 'plugin/notes/notes.html') diff --git a/plugin/notes/notes.html b/plugin/notes/notes.html index 53d50c3..145490a 100644 --- a/plugin/notes/notes.html +++ b/plugin/notes/notes.html @@ -8,6 +8,7 @@ @@ -152,7 +247,7 @@
-
UPCOMING:
+
Upcoming

Time Click to Reset

@@ -170,6 +265,10 @@
+
+ + +
@@ -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 ); diff --git a/plugin/notes/notes.html b/plugin/notes/notes.html index 145490a..4fda869 100644 --- a/plugin/notes/notes.html +++ b/plugin/notes/notes.html @@ -544,6 +544,10 @@ } + /** + * Returns the ID of the most recently set speaker layout + * or our default layout if none has been set. + */ function getLayout() { if( window.localStorage ) { -- cgit v1.2.3 From a161acaba93378573237e8764e3ffa1ed62ecee1 Mon Sep 17 00:00:00 2001 From: Adam Spiers Date: Sat, 16 Apr 2016 16:52:34 +0100 Subject: extract time display code into new _displayTime() function This will allow us to reuse the display code for displaying an additional pacing timer. --- plugin/notes/notes.html | 20 ++++++++++++-------- 1 file changed, 12 insertions(+), 8 deletions(-) (limited to 'plugin/notes/notes.html') diff --git a/plugin/notes/notes.html b/plugin/notes/notes.html index 4fda869..2704130 100644 --- a/plugin/notes/notes.html +++ b/plugin/notes/notes.html @@ -463,22 +463,26 @@ minutesEl = timeEl.querySelector( '.minutes-value' ), secondsEl = timeEl.querySelector( '.seconds-value' ); + function _displayTime( hrEl, minEl, secEl, time) { + var hours = Math.floor( time / ( 1000 * 60 * 60 ) ); + var minutes = Math.floor( ( time / ( 1000 * 60 ) ) % 60 ); + var seconds = Math.floor( ( time / 1000 ) % 60 ); + hrEl.innerHTML = zeroPadInteger( hours ); + hrEl.className = hours > 0 ? '' : 'mute'; + minEl.innerHTML = ':' + zeroPadInteger( minutes ); + minEl.className = minutes > 0 ? '' : 'mute'; + secEl.innerHTML = ':' + zeroPadInteger( seconds ); + } + function _updateTimer() { var diff, hours, minutes, seconds, now = new Date(); diff = now.getTime() - start.getTime(); - hours = Math.floor( diff / ( 1000 * 60 * 60 ) ); - minutes = Math.floor( ( diff / ( 1000 * 60 ) ) % 60 ); - seconds = Math.floor( ( diff / 1000 ) % 60 ); clockEl.innerHTML = now.toLocaleTimeString( 'en-US', { hour12: true, hour: '2-digit', minute:'2-digit' } ); - hoursEl.innerHTML = zeroPadInteger( hours ); - hoursEl.className = hours > 0 ? '' : 'mute'; - minutesEl.innerHTML = ':' + zeroPadInteger( minutes ); - minutesEl.className = minutes > 0 ? '' : 'mute'; - secondsEl.innerHTML = ':' + zeroPadInteger( seconds ); + _displayTime( hoursEl, minutesEl, secondsEl, diff ); } -- cgit v1.2.3 From 89b0c5a8d04e347492ce7dd28fdb1305c6b5724a Mon Sep 17 00:00:00 2001 From: Adam Spiers Date: Sat, 16 Apr 2016 17:10:58 +0100 Subject: 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. --- plugin/notes/notes.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'plugin/notes/notes.html') diff --git a/plugin/notes/notes.html b/plugin/notes/notes.html index 2704130..5334d81 100644 --- a/plugin/notes/notes.html +++ b/plugin/notes/notes.html @@ -124,7 +124,7 @@ } .speaker-controls-time span.mute { - color: #bbb; + opacity: 0.3; } .speaker-controls-notes { -- cgit v1.2.3 From b1b4ee270b189c4c9ed699df70ea10badc43edc9 Mon Sep 17 00:00:00 2001 From: Adam Spiers Date: Sat, 16 Apr 2016 17:39:04 +0100 Subject: don't mute minutes when hours is unmuted --- plugin/notes/notes.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'plugin/notes/notes.html') diff --git a/plugin/notes/notes.html b/plugin/notes/notes.html index 5334d81..2012361 100644 --- a/plugin/notes/notes.html +++ b/plugin/notes/notes.html @@ -470,7 +470,7 @@ hrEl.innerHTML = zeroPadInteger( hours ); hrEl.className = hours > 0 ? '' : 'mute'; minEl.innerHTML = ':' + zeroPadInteger( minutes ); - minEl.className = minutes > 0 ? '' : 'mute'; + minEl.className = (hours > 0 || minutes > 0) ? '' : 'mute'; secEl.innerHTML = ':' + zeroPadInteger( seconds ); } -- cgit v1.2.3 From 1eada3b3600f6ae3ecda4edec877571b409c61c8 Mon Sep 17 00:00:00 2001 From: Adam Spiers Date: Sat, 16 Apr 2016 17:40:21 +0100 Subject: avoid deleting existing classes when muting time elements and make muting work for negative values --- plugin/notes/notes.html | 14 ++++++++++++-- 1 file changed, 12 insertions(+), 2 deletions(-) (limited to 'plugin/notes/notes.html') diff --git a/plugin/notes/notes.html b/plugin/notes/notes.html index 2012361..15bca19 100644 --- a/plugin/notes/notes.html +++ b/plugin/notes/notes.html @@ -468,9 +468,19 @@ var minutes = Math.floor( ( time / ( 1000 * 60 ) ) % 60 ); var seconds = Math.floor( ( time / 1000 ) % 60 ); hrEl.innerHTML = zeroPadInteger( hours ); - hrEl.className = hours > 0 ? '' : 'mute'; + if (hours == 0) { + hrEl.classList.add( 'mute' ); + } + else { + hrEl.classList.remove( 'mute' ); + } minEl.innerHTML = ':' + zeroPadInteger( minutes ); - minEl.className = (hours > 0 || minutes > 0) ? '' : 'mute'; + if (hours == 0 && minutes == 0) { + minEl.classList.add( 'mute' ); + } + else { + minEl.classList.remove( 'mute' ); + } secEl.innerHTML = ':' + zeroPadInteger( seconds ); } -- cgit v1.2.3 From 933eba8789f9702ff6db76c4310f7b21db14a7b9 Mon Sep 17 00:00:00 2001 From: Adam Spiers Date: Sat, 16 Apr 2016 18:11:48 +0100 Subject: round decreasing timers to mirror increasing timers --- plugin/notes/notes.html | 7 ++++--- 1 file changed, 4 insertions(+), 3 deletions(-) (limited to 'plugin/notes/notes.html') diff --git a/plugin/notes/notes.html b/plugin/notes/notes.html index 15bca19..34f6073 100644 --- a/plugin/notes/notes.html +++ b/plugin/notes/notes.html @@ -464,9 +464,10 @@ secondsEl = timeEl.querySelector( '.seconds-value' ); function _displayTime( hrEl, minEl, secEl, time) { - var hours = Math.floor( time / ( 1000 * 60 * 60 ) ); - var minutes = Math.floor( ( time / ( 1000 * 60 ) ) % 60 ); - var seconds = Math.floor( ( time / 1000 ) % 60 ); + time = Math.round(time / 1000); + var seconds = time % 60; + var minutes = ( time / 60 ) % 60 ; + var hours = time / ( 60 * 60 ) ; hrEl.innerHTML = zeroPadInteger( hours ); if (hours == 0) { hrEl.classList.add( 'mute' ); -- cgit v1.2.3 From 9c7fda43e9e09c720d545d8b7e8d914f00802cb5 Mon Sep 17 00:00:00 2001 From: Adam Spiers Date: Sat, 16 Apr 2016 18:00:27 +0100 Subject: don't show negative signs inside minutes/seconds elements --- plugin/notes/notes.html | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) (limited to 'plugin/notes/notes.html') diff --git a/plugin/notes/notes.html b/plugin/notes/notes.html index 34f6073..df55e79 100644 --- a/plugin/notes/notes.html +++ b/plugin/notes/notes.html @@ -464,11 +464,12 @@ secondsEl = timeEl.querySelector( '.seconds-value' ); function _displayTime( hrEl, minEl, secEl, time) { - time = Math.round(time / 1000); + var sign = Math.sign(time) == -1 ? "-" : ""; + time = Math.abs(Math.round(time / 1000)); var seconds = time % 60; var minutes = ( time / 60 ) % 60 ; var hours = time / ( 60 * 60 ) ; - hrEl.innerHTML = zeroPadInteger( hours ); + hrEl.innerHTML = sign + zeroPadInteger( hours ); if (hours == 0) { hrEl.classList.add( 'mute' ); } -- cgit v1.2.3 From 715cf0ba11db0f913cfd2edb56a2c66aed57b505 Mon Sep 17 00:00:00 2001 From: Adam Spiers Date: Sat, 16 Apr 2016 15:43:44 +0100 Subject: 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 `
` 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. --- README.md | 8 ++- plugin/notes/notes.html | 140 ++++++++++++++++++++++++++++++++++++++++++++---- 2 files changed, 136 insertions(+), 12 deletions(-) (limited to 'plugin/notes/notes.html') diff --git a/README.md b/README.md index 6073b77..f03ae0f 100644 --- a/README.md +++ b/README.md @@ -187,6 +187,9 @@ Reveal.initialize({ // Display a presentation progress bar progress: true, + // Set default timing of 2 minutes per slide + defaultTiming: 120, + // Display the page number of the current slide slideNumber: false, @@ -967,12 +970,15 @@ Notes are only visible to the speaker inside of the speaker view. If you wish to When `showNotes` is enabled notes are also included when you [export to PDF](https://github.com/hakimel/reveal.js#pdf-export). By default, notes are printed in a semi-transparent box on top of the slide. If you'd rather print them on a separate page after the slide, set `showNotes: "separate-page"`. -#### Speaker notes clock and timer +#### Speaker notes clock and timers The speaker notes window will also show: - Time elapsed since the beginning of the presentation. If you hover the mouse above this section, a timer reset button will appear. - Current wall-clock time +- (Optionally) a pacing timer which indicates whether the current pace of the presentation is on track for the right timing (shown in green), and if not, whether the presenter should speed up (shown in 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 `
` by setting the `data-timing` attribute. Both values are in numbers of seconds. ## Server Side Speaker Notes diff --git a/plugin/notes/notes.html b/plugin/notes/notes.html index df55e79..c339d58 100644 --- a/plugin/notes/notes.html +++ b/plugin/notes/notes.html @@ -82,6 +82,7 @@ } .speaker-controls-time .label, + .speaker-controls-pace .label, .speaker-controls-notes .label { text-transform: uppercase; font-weight: normal; @@ -90,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; @@ -111,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; } @@ -127,6 +135,18 @@ opacity: 0.3; } + .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; } @@ -276,6 +296,12 @@ 00:00:00
+ + +
- + -- cgit v1.2.3