diff options
Diffstat (limited to 'plugin/notes')
| -rw-r--r-- | plugin/notes/notes.html | 504 | ||||
| -rw-r--r-- | plugin/notes/notes.js | 82 |
2 files changed, 531 insertions, 55 deletions
diff --git a/plugin/notes/notes.html b/plugin/notes/notes.html index 0cc8cf6..9e0b230 100644 --- a/plugin/notes/notes.html +++ b/plugin/notes/notes.html @@ -8,6 +8,7 @@ <style> body { font-family: Helvetica; + font-size: 18px; } #current-slide, @@ -30,15 +31,42 @@ position: absolute; top: 10px; left: 10px; - font-weight: bold; - font-size: 14px; z-index: 2; - color: rgba( 255, 255, 255, 0.9 ); + } + + #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: 65%; + width: 60%; height: 100%; top: 0; left: 0; @@ -47,20 +75,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 +98,7 @@ } .speaker-controls-time .label, + .speaker-controls-pace .label, .speaker-controls-notes .label { text-transform: uppercase; font-weight: normal; @@ -78,7 +107,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 +128,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 +148,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 +177,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; } } @@ -152,8 +304,10 @@ <body> + <div id="connection-status">Loading speaker view...</div> + <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 +318,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 +330,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 +345,37 @@ 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' ) { @@ -196,6 +384,10 @@ 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' ) { @@ -203,14 +395,33 @@ // 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 ]} ), '*' ); + } } } ); /** + * 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. */ @@ -239,6 +450,7 @@ // 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 ); } @@ -264,10 +476,17 @@ * 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 ] }), '*' ); } ); @@ -287,9 +506,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 ); @@ -315,6 +535,53 @@ } + function getTimings( callback ) { + + callRevealApi( 'getSlidesAttributes', [], function ( slideAttributes ) { + callRevealApi( 'getConfig', [], function ( config ) { + var defaultTiming = config.defaultTiming; + if (defaultTiming == null) { + callback(null); + return; + } + + 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); + } + + 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. @@ -322,42 +589,203 @@ 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 = 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(); + 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); + } } - // Update once directly - _updateTimer(); + 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 ); + } ); + } ); + } - // Then update every second - setInterval( _updateTimer, 1000 ); + } - timeEl.addEventListener( 'click', function() { - start = new Date(); - _updateTimer(); + /** + * 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; - } ); + } } diff --git a/plugin/notes/notes.js b/plugin/notes/notes.js index 27199af..8d58ad0 100644 --- a/plugin/notes/notes.js +++ b/plugin/notes/notes.js @@ -11,10 +11,27 @@ */ 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' ); + var notesPopup = null; + + function openNotes( notesFilePath ) { + + if (notesPopup && !notesPopup.closed) { + notesPopup.focus(); + return; + } + + 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'; + } + + notesPopup = window.open( notesFilePath, 'reveal.js - Notes', 'width=1100,height=700' ); + + if( !notesPopup ) { + alert( 'Speaker view popup failed to open. Please make sure popups are allowed and reopen the speaker view.' ); + return; + } /** * Connect to the notes window through a postmessage handshake. @@ -28,7 +45,7 @@ var RevealNotes = (function() { notesPopup.postMessage( JSON.stringify( { namespace: 'reveal-notes', type: 'connect', - url: window.location.protocol + '//' + window.location.host + window.location.pathname, + url: window.location.protocol + '//' + window.location.host + window.location.pathname + window.location.search, state: Reveal.getState() } ), '*' ); }, 500 ); @@ -39,28 +56,65 @@ var RevealNotes = (function() { clearInterval( connectInterval ); onConnected(); } + if( data && data.namespace === 'reveal-notes' && data.type === 'call' ) { + callRevealApi( data.methodName, data.arguments, data.callId ); + } } ); } /** + * Calls the specified Reveal.js method with the provided argument + * and then pushes the result to the notes frame. + */ + function callRevealApi( methodName, methodArguments, callId ) { + + var result = Reveal[methodName].call( Reveal, methodArguments ); + notesPopup.postMessage( JSON.stringify( { + namespace: 'reveal-notes', + type: 'return', + result: result, + callId: callId + } ), '*' ); + + } + + /** * 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', type: 'state', notes: '', markdown: false, + whitespace: 'normal', state: Reveal.getState() }; // Look for notes defined in a slide attribute if( slideElement.hasAttribute( 'data-notes' ) ) { messageData.notes = slideElement.getAttribute( 'data-notes' ); + 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 @@ -94,6 +148,7 @@ var RevealNotes = (function() { } connect(); + } if( !/receiver/i.test( window.location.search ) ) { @@ -104,16 +159,9 @@ var RevealNotes = (function() { } // Open the notes when the 's' key is hit - document.addEventListener( 'keydown', function( event ) { - // Disregard the event if the target is editable or a - // modifier is present - if ( document.querySelector( ':focus' ) !== null || event.shiftKey || event.altKey || event.ctrlKey || event.metaKey ) return; - - if( event.keyCode === 83 ) { - event.preventDefault(); - openNotes(); - } - }, false ); + Reveal.addKeyBinding({keyCode: 83, key: 'S', description: 'Speaker notes view'}, function() { + openNotes(); + } ); } |