presentazione-papero/plugin/notes/notes.html

<!doctype html>
<html lang="en">
	<head>
		<meta charset="utf-8">

		<title>reveal.js - Slide Notes</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;
			}

			.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="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 src="../../plugin/markdown/marked.js"></script>
		<script>

			(function() {

				var notes,
					notesValue,
					currentState,
					currentSlide,
					upcomingSlide,
					layoutLabel,
					layoutDropdown,
					connected = false;

				var SPEAKER_LAYOUTS = {
					'default': 'Default',
					'wide': 'Wide',
					'tall': 'Tall',
					'notes-only': 'Notes only'
				};

				setupLayout();

				window.addEventListener( 'message', function( event ) {

					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 );
						}
					}
					// 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 ) ) {

							window.opener.postMessage( JSON.stringify({ method: 'setState', args: [ data.state ]} ), '*' );

						}
					}

				} );

				/**
				 * Called when the main window is trying to establish a
				 * connection.
				 */
				function handleConnectMessage( data ) {

					if( connected === false ) {
						connected = true;

						setupIframes( data );
						setupKeyboard();
						setupNotes();
						setupTimer();
					}

				}

				/**
				 * 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.preventDefault();
						}
						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' );

				}

				function getTimings() {

					var slides = Reveal.getSlides();
					var defaultTiming = Reveal.getConfig().defaultTiming;
					if (defaultTiming == null) {
						return null;
					}
					var timings = [];
					for ( var i in slides ) {
						var slide = slides[i];
						var timing = defaultTiming;
						if( slide.hasAttribute( 'data-timing' )) {
							var t = slide.getAttribute( 'data-timing' );
							timing = parseInt(t);
							if( isNaN(timing) ) {
								console.warn("Could not parse timing '" + t + "' of slide " + i + "; using default of " + defaultTiming);
								timing = defaultTiming;
							}
						}
						timings.push(timing);
					}
					return timings;

				}

				/**
				 * Return the number of seconds allocated for presenting
				 * all slides up to and including this one.
				 */
				function getTimeAllocated(timings) {

					var slides = Reveal.getSlides();
					var allocated = 0;
					var currentSlide = Reveal.getSlidePastCount();
					for (var i in slides.slice(0, currentSlide + 1)) {
						allocated += timings[i];
					}
					return allocated;

				}

				/**
				 * 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 = getTimings();
					if (timings !== null) {
						pacingTitleEl.style.removeProperty('display');
						pacingEl.style.removeProperty('display');
					}

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

						var slideEndTiming = getTimeAllocated(timings) * 1000;
						var currentSlide = Reveal.getSlidePastCount();
						var currentSlideTiming = timings[currentSlide] * 1000;
						var timeLeftCurrentSlide = slideEndTiming - diff;
						if (timeLeftCurrentSlide < 0) {
							pacingEl.className = 'pacing behind';
						}
						else if (timeLeftCurrentSlide < currentSlideTiming) {
							pacingEl.className = 'pacing on-track';
						}
						else {
							pacingEl.className = 'pacing ahead';
						}
						_displayTime( pacingHoursEl, pacingMinutesEl, pacingSecondsEl, timeLeftCurrentSlide );

					}

					// Update once directly
					_updateTimer();

					// Then update every second
					setInterval( _updateTimer, 1000 );

					function _resetTimer() {

						if (timings == null) {
							start = new Date();
						}
						else {
							// Reset timer to beginning of current slide
							var slideEndTiming = getTimeAllocated(timings) * 1000;
							var currentSlide = Reveal.getSlidePastCount();
							var currentSlideTiming = timings[currentSlide] * 1000;
							var previousSlidesTiming = slideEndTiming - currentSlideTiming;
							var now = new Date();
							start = new Date(now.getTime() - previousSlidesTiming);
						}
						_updateTimer();

					}

					timeEl.addEventListener( 'click', function() {
						_resetTimer();
						return false;
					} );

				}

				/**
				 * 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>
-												new postMessage-based notes plugin, moved node-based notes to notes-server (#190)

											
										
										
											2012-10-21 02:40:52 +02:00
+								<!doctype html>
 								<html lang="en">
 									<head>
 										<meta charset="utf-8">
 										<title>reveal.js - Slide Notes</title>
 										<style>
 											body {
 												font-family: Helvetica;
-												layout selector for speaker view; includes four options

											
										
										
											2016-09-21 13:54:42 +02:00
+												font-size: 18px;
-												new postMessage-based notes plugin, moved node-based notes to notes-server (#190)

											
										
										
											2012-10-21 02:40:52 +02:00
+											}
-												update style of notes plugin to match Slides

											
										
										
											2014-04-20 10:26:00 +02:00
+											#current-slide,
-												notes code format tweaks

											
										
										
											2014-04-22 14:14:21 +02:00
+											#upcoming-slide,
-												update style of notes plugin to match Slides

											
										
										
											2014-04-20 10:26:00 +02: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 02:40:52 +02:00
+											}
-												update style of notes plugin to match Slides

											
										
										
											2014-04-20 10:26:00 +02:00
+											#current-slide iframe,
-												notes code format tweaks

											
										
										
											2014-04-22 14:14:21 +02:00
+											#upcoming-slide iframe {
-												update style of notes plugin to match Slides

											
										
										
											2014-04-20 10:26:00 +02: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 02:40:52 +02:00
+											}
-												update style of notes plugin to match Slides

											
										
										
											2014-04-20 10:26:00 +02:00
+											#current-slide .label,
-												notes code format tweaks

											
										
										
											2014-04-22 14:14:21 +02:00
+											#upcoming-slide .label {
-												update style of notes plugin to match Slides

											
										
										
											2014-04-20 10:26:00 +02:00
+												position: absolute;
 												top: 10px;
 												left: 10px;
 												z-index: 2;
-												layout selector for speaker view; includes four options

											
										
										
											2016-09-21 13:54:42 +02: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 02:40:52 +02:00
+											}
-												update style of notes plugin to match Slides

											
										
										
											2014-04-20 10:26:00 +02:00
+											#current-slide {
 												position: absolute;
-												layout selector for speaker view; includes four options

											
										
										
											2016-09-21 13:54:42 +02:00
+												width: 60%;
 												height: 100%;
-												update style of notes plugin to match Slides

											
										
										
											2014-04-20 10:26:00 +02:00
+												top: 0;
 												left: 0;
 												padding-right: 0;
-												new postMessage-based notes plugin, moved node-based notes to notes-server (#190)

											
										
										
											2012-10-21 02:40:52 +02:00
+											}
-												notes code format tweaks

											
										
										
											2014-04-22 14:14:21 +02:00
+											#upcoming-slide {
-												update style of notes plugin to match Slides

											
										
										
											2014-04-20 10:26:00 +02:00
+												position: absolute;
-												layout selector for speaker view; includes four options

											
										
										
											2016-09-21 13:54:42 +02:00
+												width: 40%;
 												height: 40%;
-												update style of notes plugin to match Slides

											
										
										
											2014-04-20 10:26:00 +02:00
+												right: 0;
 												top: 0;
-												new postMessage-based notes plugin, moved node-based notes to notes-server (#190)

											
										
										
											2012-10-21 02:40:52 +02:00
+											}
-												layout selector for speaker view; includes four options

											
										
										
											2016-09-21 13:54:42 +02:00
+											/* Speaker controls */
-												update style of notes plugin to match Slides

											
										
										
											2014-04-20 10:26:00 +02:00
+											#speaker-controls {
-												new postMessage-based notes plugin, moved node-based notes to notes-server (#190)

											
										
										
											2012-10-21 02:40:52 +02:00
+												position: absolute;
-												layout selector for speaker view; includes four options

											
										
										
											2016-09-21 13:54:42 +02:00
+												top: 40%;
 												right: 0;
 												width: 40%;
 												height: 60%;
-												better handling of overflowing speaker notes #1017

											
										
										
											2014-10-16 13:09:54 +02:00
+												overflow: auto;
-												update style of notes plugin to match Slides

											
										
										
											2014-04-20 10:26:00 +02: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 17:04:04 +01:00
+											}
-												update style of notes plugin to match Slides

											
										
										
											2014-04-20 10:26:00 +02: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 16:43:44 +02:00
+												.speaker-controls-pace .label,
-												update style of notes plugin to match Slides

											
										
										
											2014-04-20 10:26:00 +02: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 16:43:44 +02:00
+												.speaker-controls-time, .speaker-controls-pace {
-												update style of notes plugin to match Slides

											
										
										
											2014-04-20 10:26:00 +02: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 08:13:03 +02: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 10:26:00 +02: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 16:43:44 +02: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 10:26:00 +02: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 19:32:07 +01:00
-												update style of notes plugin to match Slides

											
										
										
											2014-04-20 10:26:00 +02: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 18:10:58 +02:00
+													opacity: 0.3;
-												update style of notes plugin to match Slides

											
										
										
											2014-04-20 10:26:00 +02:00
+												}
-												minor tweak for #1564

											
										
										
											2017-04-21 09:35:51 +02: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 16:43:44 +02: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 10:26:00 +02: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 13:54:42 +02: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 10:26:00 +02:00
+											.clear {
 												clear: both;
-												Add clock and elapsed time to notes view

											
										
										
											2013-01-26 17:49:19 +01:00
+											}
-												merge in timer in notes window, timer now stays hidden until initial time is set

											
										
										
											2013-01-26 19:32:07 +01:00
-												layout selector for speaker view; includes four options

											
										
										
											2016-09-21 13:54:42 +02: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 10:26:00 +02:00
+											@media screen and (max-width: 1080px) {
-												layout selector for speaker view; includes four options

											
										
										
											2016-09-21 13:54:42 +02:00
+												body[data-speaker-layout="default"] #speaker-controls {
-												update style of notes plugin to match Slides

											
										
										
											2014-04-20 10:26:00 +02:00
+													font-size: 16px;
 												}
-												Add clock and elapsed time to notes view

											
										
										
											2013-01-26 17:49:19 +01:00
+											}
-												merge in timer in notes window, timer now stays hidden until initial time is set

											
										
										
											2013-01-26 19:32:07 +01:00
-												update style of notes plugin to match Slides

											
										
										
											2014-04-20 10:26:00 +02:00
+											@media screen and (max-width: 900px) {
-												layout selector for speaker view; includes four options

											
										
										
											2016-09-21 13:54:42 +02:00
+												body[data-speaker-layout="default"] #speaker-controls {
-												update style of notes plugin to match Slides

											
										
										
											2014-04-20 10:26:00 +02:00
+													font-size: 14px;
 												}
-												Add clock and elapsed time to notes view

											
										
										
											2013-01-26 17:49:19 +01:00
+											}
-												merge in timer in notes window, timer now stays hidden until initial time is set

											
										
										
											2013-01-26 19:32:07 +01:00
-												update style of notes plugin to match Slides

											
										
										
											2014-04-20 10:26:00 +02:00
+											@media screen and (max-width: 800px) {
-												layout selector for speaker view; includes four options

											
										
										
											2016-09-21 13:54:42 +02:00
+												body[data-speaker-layout="default"] #speaker-controls {
-												update style of notes plugin to match Slides

											
										
										
											2014-04-20 10:26:00 +02:00
+													font-size: 12px;
 												}
-												Add clock and elapsed time to notes view

											
										
										
											2013-01-26 17:49:19 +01:00
+											}
-												new postMessage-based notes plugin, moved node-based notes to notes-server (#190)

											
										
										
											2012-10-21 02:40:52 +02:00
+										</style>
 									</head>
 									<body>
-												update style of notes plugin to match Slides

											
										
										
											2014-04-20 10:26:00 +02:00
+										<div id="current-slide"></div>
-												layout selector for speaker view; includes four options

											
										
										
											2016-09-21 13:54:42 +02:00
+										<div id="upcoming-slide"><span class="overlay-element label">Upcoming</span></div>
-												update style of notes plugin to match Slides

											
										
										
											2014-04-20 10:26:00 +02:00
+										<div id="speaker-controls">
 											<div class="speaker-controls-time">
-												clicking on notes timer now resets it #779

											
										
										
											2014-05-04 08:13:03 +02: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 10:26:00 +02: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 16:43:44 +02:00
-												minor tweak for #1564

											
										
										
											2017-04-21 09:35:51 +02: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 16:43:44 +02: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 17:49:19 +01:00
+											</div>
-												update style of notes plugin to match Slides

											
										
										
											2014-04-20 10:26:00 +02: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 17:49:19 +01:00
+											</div>
 										</div>
-												layout selector for speaker view; includes four options

											
										
										
											2016-09-21 13:54:42 +02: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 19:32:07 +01:00
-												Replace the ShowDown Markdown engine with marked

											
										
										
											2013-05-01 22:10:31 +02:00
+										<script src="../../plugin/markdown/marked.js"></script>
-												new postMessage-based notes plugin, moved node-based notes to notes-server (#190)

											
										
										
											2012-10-21 02:40:52 +02:00
+										<script>
-												merge in timer in notes window, timer now stays hidden until initial time is set

											
										
										
											2013-01-26 19:32:07 +01:00
-												notes plugin now operates entirely through window.postMessage, adding support for file protocol

											
										
										
											2014-04-19 10:54:14 +02:00
+											(function() {
 												var notes,
-												update style of notes plugin to match Slides

											
										
										
											2014-04-20 10:26:00 +02:00
+													notesValue,
-												notes plugin now operates entirely through window.postMessage, adding support for file protocol

											
										
										
											2014-04-19 10:54:14 +02:00
+													currentState,
 													currentSlide,
-												notes code format tweaks

											
										
										
											2014-04-22 14:14:21 +02:00
+													upcomingSlide,
-												layout selector for speaker view; includes four options

											
										
										
											2016-09-21 13:54:42 +02:00
+													layoutLabel,
 													layoutDropdown,
-												notes plugin now operates entirely through window.postMessage, adding support for file protocol

											
										
										
											2014-04-19 10:54:14 +02:00
+													connected = false;
-												layout selector for speaker view; includes four options

											
										
										
											2016-09-21 13:54:42 +02:00
+												var SPEAKER_LAYOUTS = {
 													'default': 'Default',
 													'wide': 'Wide',
 													'tall': 'Tall',
 													'notes-only': 'Notes only'
 												};
 												setupLayout();
-												notes plugin now operates entirely through window.postMessage, adding support for file protocol

											
										
										
											2014-04-19 10:54:14 +02:00
+												window.addEventListener( 'message', function( event ) {
 													var data = JSON.parse( event.data );
-												notes plugin no longer syncs overview mode #1446

											
										
										
											2016-03-09 09:57:58 +01: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 10:54:14 +02:00
+													// Messages sent by the notes plugin inside of the main window
 													if( data && data.namespace === 'reveal-notes' ) {
 														if( data.type === 'connect' ) {
 															handleConnectMessage( data );
 														}
 														else if( data.type === 'state' ) {
 															handleStateMessage( data );
 														}
 													}
 													// Messages sent by the reveal.js inside of the current slide preview
 													else if( data && data.namespace === 'reveal' ) {
 														if( /ready/.test( data.eventName ) ) {
 															// Send a message back to notify that the handshake is complete
 															window.opener.postMessage( JSON.stringify({ namespace: 'reveal-notes', type: 'connected'} ), '*' );
 														}
-												notes plugin no longer syncs overview mode #1446

											
										
										
											2016-03-09 09:57:58 +01:00
+														else if( /slidechanged|fragmentshown|fragmenthidden|paused|resumed/.test( data.eventName ) && currentState !== JSON.stringify( data.state ) ) {
-												notes plugin now operates entirely through window.postMessage, adding support for file protocol

											
										
										
											2014-04-19 10:54:14 +02:00
+															window.opener.postMessage( JSON.stringify({ method: 'setState', args: [ data.state ]} ), '*' );
-												notes plugin no longer syncs overview mode #1446

											
										
										
											2016-03-09 09:57:58 +01:00
-												notes plugin now operates entirely through window.postMessage, adding support for file protocol

											
										
										
											2014-04-19 10:54:14 +02: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 11:35:55 +02:00
+														setupKeyboard();
-												update style of notes plugin to match Slides

											
										
										
											2014-04-20 10:26:00 +02:00
+														setupNotes();
-												notes plugin now operates entirely through window.postMessage, adding support for file protocol

											
										
										
											2014-04-19 10:54:14 +02:00
+														setupTimer();
 													}
-												new postMessage-based notes plugin, moved node-based notes to notes-server (#190)

											
										
										
											2012-10-21 02:40:52 +02:00
-												notes plugin now operates entirely through window.postMessage, adding support for file protocol

											
										
										
											2014-04-19 10:54:14 +02: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 17:04:04 +01:00
-												notes plugin now operates entirely through window.postMessage, adding support for file protocol

											
										
										
											2014-04-19 10:54:14 +02: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 17:04:04 +01:00
-												notes plugin now operates entirely through window.postMessage, adding support for file protocol

											
										
										
											2014-04-19 10:54:14 +02: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 15:48:21 +02:00
-												notes plugin now operates entirely through window.postMessage, adding support for file protocol

											
										
										
											2014-04-19 10:54:14 +02:00
+													// No need for updating the notes in case of fragment changes
-												update style of notes plugin to match Slides

											
										
										
											2014-04-20 10:26:00 +02:00
+													if ( data.notes ) {
 														notes.classList.remove( 'hidden' );
-												notes defined in data-notes attributes retain preformatted whitespace

											
										
										
											2015-09-25 09:41:05 +02:00
+														notesValue.style.whiteSpace = data.whitespace;
-												notes plugin now operates entirely through window.postMessage, adding support for file protocol

											
										
										
											2014-04-19 10:54:14 +02:00
+														if( data.markdown ) {
-												update style of notes plugin to match Slides

											
										
										
											2014-04-20 10:26:00 +02:00
+															notesValue.innerHTML = marked( data.notes );
-												notes plugin now operates entirely through window.postMessage, adding support for file protocol

											
										
										
											2014-04-19 10:54:14 +02:00
+														}
 														else {
-												update style of notes plugin to match Slides

											
										
										
											2014-04-20 10:26:00 +02:00
+															notesValue.innerHTML = data.notes;
-												merge in timer in notes window, timer now stays hidden until initial time is set

											
										
										
											2013-01-26 19:32:07 +01:00
+														}
-												notes plugin now operates entirely through window.postMessage, adding support for file protocol

											
										
										
											2014-04-19 10:54:14 +02:00
+													}
-												update style of notes plugin to match Slides

											
										
										
											2014-04-20 10:26:00 +02:00
+													else {
 														notes.classList.add( 'hidden' );
 													}
-												notes plugin now operates entirely through window.postMessage, adding support for file protocol

											
										
										
											2014-04-19 10:54:14 +02:00
 													// Update the note slides
 													currentSlide.contentWindow.postMessage( JSON.stringify({ method: 'setState', args: [ data.state ] }), '*' );
-												notes code format tweaks

											
										
										
											2014-04-22 14:14:21 +02: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 19:32:07 +01:00
-												notes plugin now operates entirely through window.postMessage, adding support for file protocol

											
										
										
											2014-04-19 10:54:14 +02:00
+												}
-												ensure notes window fragment states are mirrored in main window #538

											
										
										
											2013-07-26 16:03:59 +02:00
-												limit how often the notes window updates presentation states

											
										
										
											2014-04-22 14:50:50 +02: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 11:35:55 +02: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 13:38:46 +02: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 11:35:55 +02:00
+												 */
 												function setupKeyboard() {
 													document.addEventListener( 'keydown', function( event ) {
-												Block F5 in speaker notes window, avoid disconnects

											
										
										
											2017-08-12 13:38:46 +02:00
+														if (event.keyCode === 116) {
 															event.preventDefault();
 														}
-												enable reveal.js keyboard shortcuts anywhere in notes window

											
										
										
											2014-04-26 11:35:55 +02: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 10:54:14 +02: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 19:32:07 +01:00
-												skip transitions in notes window for better main window performance

											
										
										
											2014-04-22 15:05:06 +02:00
+													var params = [
-												dont toggle paused/overview modes needlessly when setting state

											
										
										
											2014-04-22 14:06:58 +02:00
+														'receiver',
 														'progress=false',
-												notes code format tweaks

											
										
										
											2014-04-22 14:14:21 +02:00
+														'history=false',
 														'transition=none',
-												prevent auto-sliding in notes frames #1004

											
										
										
											2014-09-28 17:13:49 +02:00
+														'autoSlide=0',
-												notes code format tweaks

											
										
										
											2014-04-22 14:14:21 +02:00
+														'backgroundTransition=none'
 													].join( '&' );
-												dont toggle paused/overview modes needlessly when setting state

											
										
										
											2014-04-22 14:06:58 +02:00
-												fix notes regex #1522 #1392

											
										
										
											2016-03-09 09:37:10 +01:00
+													var urlSeparator = /\?/.test(data.url) ? '&' : '?';
-												notes plugin now operates entirely through window.postMessage, adding support for file protocol

											
										
										
											2014-04-19 10:54:14 +02:00
+													var hash = '#/' + data.state.indexh + '/' + data.state.indexv;
-												Fix query parameter issue in notes plugin.

Closes #1392.
											
										
										
											2016-03-06 11:28:08 +01: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 10:54:14 +02:00
 													currentSlide = document.createElement( 'iframe' );
 													currentSlide.setAttribute( 'width', 1280 );
 													currentSlide.setAttribute( 'height', 1024 );
-												notes code format tweaks

											
										
										
											2014-04-22 14:14:21 +02:00
+													currentSlide.setAttribute( 'src', currentURL );
-												update style of notes plugin to match Slides

											
										
										
											2014-04-20 10:26:00 +02:00
+													document.querySelector( '#current-slide' ).appendChild( currentSlide );
-												notes plugin now operates entirely through window.postMessage, adding support for file protocol

											
										
										
											2014-04-19 10:54:14 +02:00
-												notes code format tweaks

											
										
										
											2014-04-22 14:14:21 +02: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 10:26:00 +02: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 10:54:14 +02:00
 												}
-												ensure notes window fragment states are mirrored in main window #538

											
										
										
											2013-07-26 16:03:59 +02:00
-												optionally display pacing advice based on slide timings

Add an option to display advice on whether the current pace of the
presentation is on track for the right timing (shown as green), and if
not, whether the presenter should speed up (shown as red) or has the
luxury of slowing down (blue).

The pacing timer can be enabled by configuring by the `defaultTiming`
parameter in the `Reveal` configuration block, which specifies the
number of seconds per slide.  120 can be a reasonable rule of thumb.
Timings can also be given per slide `<section>` by setting the
`data-timing` attribute.  Both values are in numbers of seconds.

When the option is enabled, clicking on the timers will reset the timer
to the beginning of the current slide, i.e. as if pacing was perfectly
on track, not to zero as if the presentation had just begun.

											
										
										
											2016-04-16 16:43:44 +02:00
+												function getTimings() {
 													var slides = Reveal.getSlides();
 													var defaultTiming = Reveal.getConfig().defaultTiming;
 													if (defaultTiming == null) {
 														return null;
 													}
 													var timings = [];
 													for ( var i in slides ) {
 														var slide = slides[i];
 														var timing = defaultTiming;
 														if( slide.hasAttribute( 'data-timing' )) {
 															var t = slide.getAttribute( 'data-timing' );
 															timing = parseInt(t);
 															if( isNaN(timing) ) {
 																console.warn("Could not parse timing '" + t + "' of slide " + i + "; using default of " + defaultTiming);
 																timing = defaultTiming;
 															}
 														}
 														timings.push(timing);
 													}
 													return timings;
 												}
 												/**
 												 * Return the number of seconds allocated for presenting
 												 * all slides up to and including this one.
 												 */
 												function getTimeAllocated(timings) {
 													var slides = Reveal.getSlides();
 													var allocated = 0;
 													var currentSlide = Reveal.getSlidePastCount();
 													for (var i in slides.slice(0, currentSlide + 1)) {
 														allocated += timings[i];
 													}
 													return allocated;
 												}
-												notes plugin now operates entirely through window.postMessage, adding support for file protocol

											
										
										
											2014-04-19 10:54:14 +02: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 19:32:07 +01: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 16:43:44 +02:00
+													timeEl = document.querySelector( '.speaker-controls-time' ),
 													clockEl = timeEl.querySelector( '.clock-value' ),
 													hoursEl = timeEl.querySelector( '.hours-value' ),
 													minutesEl = timeEl.querySelector( '.minutes-value' ),
 													secondsEl = timeEl.querySelector( '.seconds-value' ),
 													pacingTitleEl = timeEl.querySelector( '.pacing-title' ),
 													pacingEl = timeEl.querySelector( '.pacing' ),
 													pacingHoursEl = pacingEl.querySelector( '.hours-value' ),
 													pacingMinutesEl = pacingEl.querySelector( '.minutes-value' ),
 													pacingSecondsEl = pacingEl.querySelector( '.seconds-value' );
 													var timings = getTimings();
 													if (timings !== null) {
 														pacingTitleEl.style.removeProperty('display');
 														pacingEl.style.removeProperty('display');
 													}
-												merge in timer in notes window, timer now stays hidden until initial time is set

											
										
										
											2013-01-26 19:32:07 +01:00
-												extract time display code into new _displayTime() function

This will allow us to reuse the display code for displaying
an additional pacing timer.

											
										
										
											2016-04-16 17:52:34 +02: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 16:43:44 +02:00
-												don't show negative signs inside minutes/seconds elements

											
										
										
											2016-04-16 19:00:27 +02:00
+														var sign = Math.sign(time) == -1 ? "-" : "";
 														time = Math.abs(Math.round(time / 1000));
-												round decreasing timers to mirror increasing timers

											
										
										
											2016-04-16 19:11:48 +02: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 16:43:44 +02: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 19:00:27 +02:00
+														hrEl.innerHTML = sign + zeroPadInteger( hours );
-												avoid deleting existing classes when muting time elements

and make muting work for negative values

											
										
										
											2016-04-16 18:40:21 +02: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 17:52:34 +02:00
+														minEl.innerHTML = ':' + zeroPadInteger( minutes );
-												avoid deleting existing classes when muting time elements

and make muting work for negative values

											
										
										
											2016-04-16 18:40:21 +02: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 17:52:34 +02:00
+														secEl.innerHTML = ':' + zeroPadInteger( seconds );
 													}
-												update style of notes plugin to match Slides

											
										
										
											2014-04-20 10:26:00 +02:00
+													function _updateTimer() {
-												merge in timer in notes window, timer now stays hidden until initial time is set

											
										
										
											2013-01-26 19:32:07 +01: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 16:43:44 +02:00
+														now = new Date();
-												merge in timer in notes window, timer now stays hidden until initial time is set

											
										
										
											2013-01-26 19:32:07 +01:00
 														diff = now.getTime() - start.getTime();
-												update style of notes plugin to match Slides

											
										
										
											2014-04-20 10:26:00 +02: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 17:52:34 +02: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 16:43:44 +02:00
+														if (timings !== null) {
 															_updatePacing(diff);
 														}
 													}
 													function _updatePacing(diff) {
 														var slideEndTiming = getTimeAllocated(timings) * 1000;
 														var currentSlide = Reveal.getSlidePastCount();
 														var currentSlideTiming = timings[currentSlide] * 1000;
 														var timeLeftCurrentSlide = slideEndTiming - diff;
 														if (timeLeftCurrentSlide < 0) {
 															pacingEl.className = 'pacing behind';
 														}
 														else if (timeLeftCurrentSlide < currentSlideTiming) {
 															pacingEl.className = 'pacing on-track';
 														}
 														else {
 															pacingEl.className = 'pacing ahead';
 														}
 														_displayTime( pacingHoursEl, pacingMinutesEl, pacingSecondsEl, timeLeftCurrentSlide );
-												merge in timer in notes window, timer now stays hidden until initial time is set

											
										
										
											2013-01-26 19:32:07 +01:00
-												update style of notes plugin to match Slides

											
										
										
											2014-04-20 10:26:00 +02:00
+													}
 													// Update once directly
 													_updateTimer();
 													// Then update every second
 													setInterval( _updateTimer, 1000 );
-												show error when notes run on non-http, fix load order to make sure upcoming slide is correct when notes open (#278)

											
										
										
											2013-01-23 17:04:04 +01:00
-												optionally display pacing advice based on slide timings

Add an option to display advice on whether the current pace of the
presentation is on track for the right timing (shown as green), and if
not, whether the presenter should speed up (shown as red) or has the
luxury of slowing down (blue).

The pacing timer can be enabled by configuring by the `defaultTiming`
parameter in the `Reveal` configuration block, which specifies the
number of seconds per slide.  120 can be a reasonable rule of thumb.
Timings can also be given per slide `<section>` by setting the
`data-timing` attribute.  Both values are in numbers of seconds.

When the option is enabled, clicking on the timers will reset the timer
to the beginning of the current slide, i.e. as if pacing was perfectly
on track, not to zero as if the presentation had just begun.

											
										
										
											2016-04-16 16:43:44 +02:00
+													function _resetTimer() {
 														if (timings == null) {
 															start = new Date();
 														}
 														else {
 															// Reset timer to beginning of current slide
 															var slideEndTiming = getTimeAllocated(timings) * 1000;
 															var currentSlide = Reveal.getSlidePastCount();
 															var currentSlideTiming = timings[currentSlide] * 1000;
 															var previousSlidesTiming = slideEndTiming - currentSlideTiming;
 															var now = new Date();
 															start = new Date(now.getTime() - previousSlidesTiming);
 														}
-												clicking on notes timer now resets it #779

											
										
										
											2014-05-04 08:13:03 +02:00
+														_updateTimer();
-												optionally display pacing advice based on slide timings

Add an option to display advice on whether the current pace of the
presentation is on track for the right timing (shown as green), and if
not, whether the presenter should speed up (shown as red) or has the
luxury of slowing down (blue).

The pacing timer can be enabled by configuring by the `defaultTiming`
parameter in the `Reveal` configuration block, which specifies the
number of seconds per slide.  120 can be a reasonable rule of thumb.
Timings can also be given per slide `<section>` by setting the
`data-timing` attribute.  Both values are in numbers of seconds.

When the option is enabled, clicking on the timers will reset the timer
to the beginning of the current slide, i.e. as if pacing was perfectly
on track, not to zero as if the presentation had just begun.

											
										
										
											2016-04-16 16:43:44 +02:00
 													}
 													timeEl.addEventListener( 'click', function() {
 														_resetTimer();
-												clicking on notes timer now resets it #779

											
										
										
											2014-05-04 08:13:03 +02:00
+														return false;
 													} );
-												show error when notes run on non-http, fix load order to make sure upcoming slide is correct when notes open (#278)

											
										
										
											2013-01-23 17:04:04 +01:00
+												}
-												layout selector for speaker view; includes four options

											
										
										
											2016-09-21 13:54:42 +02: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 20:19:16 +02:00
+													if( supportsLocalStorage() ) {
-												layout selector for speaker view; includes four options

											
										
										
											2016-09-21 13:54:42 +02:00
+														window.localStorage.setItem( 'reveal-speaker-layout', value );
 													}
 												}
-												speaker layouts in server side notes plugin

											
										
										
											2016-09-21 14:10:14 +02: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 13:54:42 +02:00
+												function getLayout() {
-												localstorage feature test in notes plugin, fixes speaker view error in safari

											
										
										
											2017-07-13 20:19:16 +02:00
+													if( supportsLocalStorage() ) {
-												layout selector for speaker view; includes four options

											
										
										
											2016-09-21 13:54:42 +02: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 20:19:16 +02: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 10:54:14 +02:00
+												function zeroPadInteger( num ) {
-												new postMessage-based notes plugin, moved node-based notes to notes-server (#190)

											
										
										
											2012-10-21 02:40:52 +02:00
-												notes plugin now operates entirely through window.postMessage, adding support for file protocol

											
										
										
											2014-04-19 10:54:14 +02:00
+													var str = '00' + parseInt( num );
 													return str.substring( str.length - 2 );
-												Add clock and elapsed time to notes view

											
										
										
											2013-01-26 17:49:19 +01:00
-												notes plugin now operates entirely through window.postMessage, adding support for file protocol

											
										
										
											2014-04-19 10:54:14 +02:00
+												}
-												new postMessage-based notes plugin, moved node-based notes to notes-server (#190)

											
										
										
											2012-10-21 02:40:52 +02:00
-												limit how often the notes window updates presentation states

											
										
										
											2014-04-22 14:50:50 +02: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 10:54:14 +02:00
+											})();
-												merge in timer in notes window, timer now stays hidden until initial time is set

											
										
										
											2013-01-26 19:32:07 +01:00
-												new postMessage-based notes plugin, moved node-based notes to notes-server (#190)

											
										
										
											2012-10-21 02:40:52 +02:00
+										</script>
 									</body>
 								</html>