diff options
Diffstat (limited to 'geschichte/plugin/notes/speaker-view.html')
| -rw-r--r-- | geschichte/plugin/notes/speaker-view.html | 891 |
1 files changed, 0 insertions, 891 deletions
diff --git a/geschichte/plugin/notes/speaker-view.html b/geschichte/plugin/notes/speaker-view.html deleted file mode 100644 index 8381453..0000000 --- a/geschichte/plugin/notes/speaker-view.html +++ /dev/null @@ -1,891 +0,0 @@ -<!-- - NOTE: You need to build the notes plugin after making changes to this file. ---> -<html lang="en"> - <head> - <meta charset="utf-8"> - - <title>reveal.js - Speaker View</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> - - (function() { - - var notes, - notesValue, - currentState, - currentSlide, - upcomingSlide, - layoutLabel, - layoutDropdown, - pendingCalls = {}, - lastRevealApiCallId = 0, - connected = false - - var connectionStatus = document.querySelector( '#connection-status' ); - - var SPEAKER_LAYOUTS = { - 'default': 'Default', - 'wide': 'Wide', - 'tall': 'Tall', - 'notes-only': 'Notes only' - }; - - setupLayout(); - - let openerOrigin; - - try { - openerOrigin = window.opener.location.origin; - } - catch ( error ) { console.warn( error ) } - - // In order to prevent XSS, the speaker view will only run if its - // opener has the same origin as itself - if( window.location.origin !== openerOrigin ) { - connectionStatus.innerHTML = 'Cross origin error.<br>The speaker window can only be opened from the same origin.'; - return; - } - - 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 ) ) { - - dispatchStateToMainWindow( data.state ); - - } - } - - } ); - - /** - * Updates the presentation in the main window to match the state - * of the presentation in the notes window. - */ - const dispatchStateToMainWindow = debounce(( state ) => { - window.opener.postMessage( JSON.stringify({ method: 'setState', args: [ state ]} ), '*' ); - }, 500); - - /** - * 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(); - setupHeartbeat(); - } - - } - - /** - * 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' ); - - } - - /** - * We send out a heartbeat at all times to ensure we can - * reconnect with the main presentation window after reloads. - */ - function setupHeartbeat() { - - setInterval( () => { - window.opener.postMessage( JSON.stringify({ namespace: 'reveal-notes', type: 'heartbeat'} ), '*' ); - }, 1000 ); - - } - - function getTimings( callback ) { - - callRevealApi( 'getSlidesAttributes', [], function ( slideAttributes ) { - callRevealApi( 'getConfig', [], function ( config ) { - var totalTime = config.totalTime; - var minTimePerSlide = config.minimumTimePerSlide || 0; - 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) } ); - } - var slidesUnderMinimum = timings.filter( function(x) { return (x < minTimePerSlide) } ).length - if ( slidesUnderMinimum ) { - message = "The pacing time for " + slidesUnderMinimum + " slide(s) is under the configured minimum of " + minTimePerSlide + " seconds. Check the data-timing attribute on individual slides, or consider increasing the totalTime or minimumTimePerSlide configuration options (or removing some slides)."; - alert(message); - } - 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> \ No newline at end of file |