fa23-si/plugin/notes/speaker-view.html

<!--
	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 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 ) {

					// Ignore post messages from other origins to prevent XSS
					if( window.location.origin !== event.origin ){
						return;
					}

					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>
-												note about changes to speaker view requiring plugin rebuild

											
										
										
											2022-02-02 08:06:47 +00:00
+								<!--
 									NOTE: You need to build the notes plugin after making changes to this file.
 								-->
-												new postMessage-based notes plugin, moved node-based notes to notes-server (#190)

											
										
										
											2012-10-21 00:40:52 +00:00
+								<html lang="en">
 									<head>
 										<meta charset="utf-8">
-												bundle html inside of notes.js, no more need for relatively locating external html

											
										
										
											2020-05-18 13:59:18 +00:00
+										<title>reveal.js - Speaker View</title>
-												new postMessage-based notes plugin, moved node-based notes to notes-server (#190)

											
										
										
											2012-10-21 00:40:52 +00:00
 										<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
+											}
-												speaker view has visible connection status, times out with error after 5s

											
										
										
											2018-04-24 12:23:28 +00:00
+											#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;
 											}
-												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>
-												speaker view has visible connection status, times out with error after 5s

											
										
										
											2018-04-24 12:23:28 +00:00
+										<div id="connection-status">Loading speaker view...</div>
-												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
-												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,
-												fixed showing speaker's view with timings/pacing while serving the presentation from the file system

											
										
										
											2018-02-18 20:30:17 +00:00
+													pendingCalls = {},
 													lastRevealApiCallId = 0,
-												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();
-												speaker view has visible connection status, times out with error after 5s

											
										
										
											2018-04-24 12:23:28 +00:00
+												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 );
-												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 ) {
-												rebuild notes plugin when html changes

											
										
										
											2022-02-28 08:19:58 +00:00
+													// Ignore post messages from other origins to prevent XSS
 													if( window.location.origin !== event.origin ){
-												Fix DOM XSS

											
										
										
											2022-02-26 11:46:18 +00:00
+														return;
 													}
-												speaker view has visible connection status, times out with error after 5s

											
										
										
											2018-04-24 12:23:28 +00:00
+													clearTimeout( connectionTimeout );
 													connectionStatus.style.display = 'none';
-												notes plugin now operates entirely through window.postMessage, adding support for file protocol

											
										
										
											2014-04-19 08:54:14 +00:00
+													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 );
 														}
-												fixed showing speaker's view with timings/pacing while serving the presentation from the file system

											
										
										
											2018-02-18 20:30:17 +00:00
+														else if( data.type === 'return' ) {
 															pendingCalls[data.callId](data.result);
 															delete pendingCalls[data.callId];
 														}
-												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 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 ) ) {
-												debounce messages from notes -> main window, fixes #3147

											
										
										
											2022-03-09 09:25:30 +00:00
+															dispatchStateToMainWindow( 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
+														}
 													}
 												} );
-												debounce messages from notes -> main window, fixes #3147

											
										
										
											2022-03-09 09:25:30 +00:00
+												/**
 												 * 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);
-												documentation

											
										
										
											2018-02-20 09:30:56 +00:00
+												/**
 												 * Asynchronously calls the Reveal.js API of the main frame.
 												 */
-												fixed showing speaker's view with timings/pacing while serving the presentation from the file system

											
										
										
											2018-02-18 20:30:17 +00:00
+												function callRevealApi( methodName, methodArguments, callback ) {
-												formatting and tweaks for #2104

											
										
										
											2018-10-04 11:26:16 +00:00
-												fixed showing speaker's view with timings/pacing while serving the presentation from the file system

											
										
										
											2018-02-18 20:30:17 +00:00
+													var callId = ++lastRevealApiCallId;
 													pendingCalls[callId] = callback;
 													window.opener.postMessage( JSON.stringify( {
 														namespace: 'reveal-notes',
 														type: 'call',
 														callId: callId,
 														methodName: methodName,
 														arguments: methodArguments
 													} ), '*' );
-												formatting and tweaks for #2104

											
										
										
											2018-10-04 11:26:16 +00:00
-												fixed showing speaker's view with timings/pacing while serving the presentation from the file system

											
										
										
											2018-02-18 20:30:17 +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();
-												fiv out of sync speaker view after presentation reloads #2822 #3032

											
										
										
											2022-02-10 12:28:37 +00:00
+														setupHeartbeat();
-												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
-												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 ) {
-												prevent cmd+r in notes window since reloading breaks the view #1958

											
										
										
											2017-12-04 12:57:19 +00:00
+														if( event.keyCode === 116 || ( event.metaKey && event.keyCode === 82 ) ) {
-												Block F5 in speaker notes window, avoid disconnects

											
										
										
											2017-08-12 11:38:46 +00:00
+															event.preventDefault();
-												prevent cmd+r in notes window since reloading breaks the view #1958

											
										
										
											2017-12-04 12:57:19 +00:00
+															return false;
-												Block F5 in speaker notes window, avoid disconnects

											
										
										
											2017-08-12 11:38:46 +00:00
+														}
-												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
-												fiv out of sync speaker view after presentation reloads #2822 #3032

											
										
										
											2022-02-10 12:28:37 +00:00
+												/**
 												 * 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 );
 												}
-												fixed showing speaker's view with timings/pacing while serving the presentation from the file system

											
										
										
											2018-02-18 20:30:17 +00:00
+												function getTimings( callback ) {
-												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
-												formatting and tweaks for #2104

											
										
										
											2018-10-04 11:26:16 +00:00
+													callRevealApi( 'getSlidesAttributes', [], function ( slideAttributes ) {
-												fixed showing speaker's view with timings/pacing while serving the presentation from the file system

											
										
										
											2018-02-18 20:30:17 +00:00
+														callRevealApi( 'getConfig', [], function ( config ) {
-												Notes: Introduce alternate pacing timer, based on total presentation time

The current pacing timer operates on the assumption that there is
a default amount of time to be allocated to each slide, and that
individual slides can deviate from that default by specifying their
own data-timing attribute.

This patch introduces an alternate pacing method: by specifying
the totalTime configuration option, the presenter can set the total
time available to present. The pacing timer will then continue to
allocate the exact pacing time for slides that do have data-timing
set, as before. However, rather than applying the defaultTiming
constant to all others, it will

- Add up the time already allocated to slides via data-timing;
- subtract that from totalTime;
- divide the difference by the number of slides without data-timing set;
- apply the thus-calculated average to those slides.

totalTime has no default, and if both defaultTiming and totalTime are
set, totalTime wins. This preserves backward compatibility: if a
presenter has set defaultTiming and updates reveal.js, totalTime will
be null and defaultTiming is still applied to all slides without a
data-timing attribute. The presenter can then switch to the automatic
calculation, if desired, by setting a value for totalTime.

											
										
										
											2019-05-09 22:03:30 +00:00
+															var totalTime = config.totalTime;
-												Notes: Weakly enforce a minimum allocated pacing time per slide

When using the totalTime-based pacing calculation, a presenter may
inadvertently set totalTime and per-slide data-timing attributes in
such a way that the pacing time for some slides is impossibly low or
even negative.

Add a check to ensure that the pacing on a slide never falls below a
configurable minimum, defaulting to 0. Display an alert if the
pacing for any slide(s) falls below the threshold.

											
										
										
											2019-05-11 20:23:28 +00:00
+															var minTimePerSlide = config.minimumTimePerSlide || 0;
-												fixed showing speaker's view with timings/pacing while serving the presentation from the file system

											
										
										
											2018-02-18 20:30:17 +00:00
+															var defaultTiming = config.defaultTiming;
-												Notes: Introduce alternate pacing timer, based on total presentation time

The current pacing timer operates on the assumption that there is
a default amount of time to be allocated to each slide, and that
individual slides can deviate from that default by specifying their
own data-timing attribute.

This patch introduces an alternate pacing method: by specifying
the totalTime configuration option, the presenter can set the total
time available to present. The pacing timer will then continue to
allocate the exact pacing time for slides that do have data-timing
set, as before. However, rather than applying the defaultTiming
constant to all others, it will

- Add up the time already allocated to slides via data-timing;
- subtract that from totalTime;
- divide the difference by the number of slides without data-timing set;
- apply the thus-calculated average to those slides.

totalTime has no default, and if both defaultTiming and totalTime are
set, totalTime wins. This preserves backward compatibility: if a
presenter has set defaultTiming and updates reveal.js, totalTime will
be null and defaultTiming is still applied to all slides without a
data-timing attribute. The presenter can then switch to the automatic
calculation, if desired, by setting a value for totalTime.

											
										
										
											2019-05-09 22:03:30 +00:00
+															if ((defaultTiming == null) && (totalTime == null)) {
-												fixed showing speaker's view with timings/pacing while serving the presentation from the file system

											
										
										
											2018-02-18 20:30:17 +00:00
+																callback(null);
 																return;
-												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
+															}
-												Notes: Introduce alternate pacing timer, based on total presentation time

The current pacing timer operates on the assumption that there is
a default amount of time to be allocated to each slide, and that
individual slides can deviate from that default by specifying their
own data-timing attribute.

This patch introduces an alternate pacing method: by specifying
the totalTime configuration option, the presenter can set the total
time available to present. The pacing timer will then continue to
allocate the exact pacing time for slides that do have data-timing
set, as before. However, rather than applying the defaultTiming
constant to all others, it will

- Add up the time already allocated to slides via data-timing;
- subtract that from totalTime;
- divide the difference by the number of slides without data-timing set;
- apply the thus-calculated average to those slides.

totalTime has no default, and if both defaultTiming and totalTime are
set, totalTime wins. This preserves backward compatibility: if a
presenter has set defaultTiming and updates reveal.js, totalTime will
be null and defaultTiming is still applied to all slides without a
data-timing attribute. The presenter can then switch to the automatic
calculation, if desired, by setting a value for totalTime.

											
										
										
											2019-05-09 22:03:30 +00:00
+															// Setting totalTime overrides defaultTiming
 															if (totalTime) {
 																defaultTiming = 0;
 															}
-												fixed showing speaker's view with timings/pacing while serving the presentation from the file system

											
										
										
											2018-02-18 20:30:17 +00:00
+															var timings = [];
-												formatting and tweaks for #2104

											
										
										
											2018-10-04 11:26:16 +00:00
+															for ( var i in slideAttributes ) {
 																var slide = slideAttributes[ i ];
-												fixed showing speaker's view with timings/pacing while serving the presentation from the file system

											
										
										
											2018-02-18 20:30:17 +00:00
+																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);
-												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
+															}
-												Notes: Introduce alternate pacing timer, based on total presentation time

The current pacing timer operates on the assumption that there is
a default amount of time to be allocated to each slide, and that
individual slides can deviate from that default by specifying their
own data-timing attribute.

This patch introduces an alternate pacing method: by specifying
the totalTime configuration option, the presenter can set the total
time available to present. The pacing timer will then continue to
allocate the exact pacing time for slides that do have data-timing
set, as before. However, rather than applying the defaultTiming
constant to all others, it will

- Add up the time already allocated to slides via data-timing;
- subtract that from totalTime;
- divide the difference by the number of slides without data-timing set;
- apply the thus-calculated average to those slides.

totalTime has no default, and if both defaultTiming and totalTime are
set, totalTime wins. This preserves backward compatibility: if a
presenter has set defaultTiming and updates reveal.js, totalTime will
be null and defaultTiming is still applied to all slides without a
data-timing attribute. The presenter can then switch to the automatic
calculation, if desired, by setting a value for totalTime.

											
										
										
											2019-05-09 22:03:30 +00:00
+															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) } );
 															}
-												Notes: Weakly enforce a minimum allocated pacing time per slide

When using the totalTime-based pacing calculation, a presenter may
inadvertently set totalTime and per-slide data-timing attributes in
such a way that the pacing time for some slides is impossibly low or
even negative.

Add a check to ensure that the pacing on a slide never falls below a
configurable minimum, defaulting to 0. Display an alert if the
pacing for any slide(s) falls below the threshold.

											
										
										
											2019-05-11 20:23:28 +00:00
+															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);
 															}
-												fixed showing speaker's view with timings/pacing while serving the presentation from the file system

											
										
										
											2018-02-18 20:30:17 +00:00
+															callback( timings );
 														} );
 													} );
-												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
 												}
 												/**
 												 * Return the number of seconds allocated for presenting
 												 * all slides up to and including this one.
 												 */
-												fixed showing speaker's view with timings/pacing while serving the presentation from the file system

											
										
										
											2018-02-18 20:30:17 +00:00
+												function getTimeAllocated( timings, callback ) {
-												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
-												fixed showing speaker's view with timings/pacing while serving the presentation from the file system

											
										
										
											2018-02-18 20:30:17 +00:00
+													callRevealApi( 'getSlidePastCount', [], function ( currentSlide ) {
 														var allocated = 0;
 														for (var i in timings.slice(0, currentSlide + 1)) {
 															allocated += timings[i];
 														}
 														callback( allocated );
 													} );
-												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
 												}
-												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' );
-												fixed showing speaker's view with timings/pacing while serving the presentation from the file system

											
										
										
											2018-02-18 20:30:17 +00:00
+													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();
 																} );
 															} );
 														}
-												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
+													}
-												merge in timer in notes window, timer now stays hidden until initial time is set

											
										
										
											2013-01-26 18:32:07 +00:00
-												fixed showing speaker's view with timings/pacing while serving the presentation from the file system

											
										
										
											2018-02-18 20:30:17 +00:00
+													timeEl.addEventListener( 'click', function() {
 														_resetTimer();
 														return false;
 													} );
-												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) {
-												fixed showing speaker's view with timings/pacing while serving the presentation from the file system

											
										
										
											2018-02-18 20:30:17 +00:00
+														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 );
 															} );
 														} );
-												update style of notes plugin to match Slides

											
										
										
											2014-04-20 08:26:00 +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
+												}
-												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>
-												bundle html inside of notes.js, no more need for relatively locating external html

											
										
										
											2020-05-18 13:59:18 +00:00
+								</html>