inst/reveal.js-3.3.0/plugin/notes-server/notes.html - IDS-Mannheim/revealjs - Gitiles

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

 		<title>reveal.js - Slide Notes</title>

 		<style>
 			body {
 				font-family: Helvetica;
 			}

 			#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;
 				font-weight: bold;
 				font-size: 14px;
 				z-index: 2;
 				color: rgba( 255, 255, 255, 0.9 );
 			}

 			#current-slide {
 				position: absolute;
 				width: 65%;
 				height: 100%;
 				top: 0;
 				left: 0;
 				padding-right: 0;
 			}

 			#upcoming-slide {
 				position: absolute;
 				width: 35%;
 				height: 40%;
 				right: 0;
 				top: 0;
 			}

 			#speaker-controls {
 				position: absolute;
 				top: 40%;
 				right: 0;
 				width: 35%;
 				height: 60%;

 				font-size: 18px;
 			}

 				.speaker-controls-time.hidden,
 				.speaker-controls-notes.hidden {
 					display: none;
 				}

 				.speaker-controls-time .label,
 				.speaker-controls-notes .label {
 					text-transform: uppercase;
 					font-weight: normal;
 					font-size: 0.66em;
 					color: #666;
 					margin: 0;
 				}

 				.speaker-controls-time {
 					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%;
 					font-size: 1.9em;
 				}

 				.speaker-controls-time .timer {
 					float: left;
 				}

 				.speaker-controls-time .clock {
 					float: right;
 					text-align: right;
 				}

 				.speaker-controls-time span.mute {
 					color: #bbb;
 				}

 				.speaker-controls-notes {
 					padding: 10px 16px;
 				}

 				.speaker-controls-notes .value {
 					margin-top: 5px;
 					line-height: 1.4;
 					font-size: 1.2em;
 				}

 			.clear {
 				clear: both;
 			}

 			@media screen and (max-width: 1080px) {
 				#speaker-controls {
 					font-size: 16px;
 				}
 			}

 			@media screen and (max-width: 900px) {
 				#speaker-controls {
 					font-size: 14px;
 				}
 			}

 			@media screen and (max-width: 800px) {
 				#speaker-controls {
 					font-size: 12px;
 				}
 			}

 		</style>
 	</head>

 	<body>

 		<div id="current-slide"></div>
 		<div id="upcoming-slide"><span class="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>
 			</div>

 			<div class="speaker-controls-notes hidden">
 				<h4 class="label">Notes</h4>
 				<div class="value"></div>
 			</div>
 		</div>

 		<script src="/socket.io/socket.io.js"></script>
 		<script src="/plugin/markdown/marked.js"></script>

 		<script>
 		(function() {

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

 			var socket = io.connect( window.location.origin ),
 				socketId = '{{socketId}}';

 			socket.on( 'statechanged', function( data ) {

 				// ignore data from sockets that aren't ours
 				if( data.socketId !== socketId ) { return; }

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

 					setupKeyboard();
 					setupNotes();
 					setupTimer();

 				}

 				handleStateMessage( data );

 			} );

 			// Load our presentation iframes
 			setupIframes();

 			// Once the iframes have loaded, emit a signal saying there's
 			// a new subscriber which will trigger a 'statechanged'
 			// message to be sent back
 			window.addEventListener( 'message', function( event ) {

 				var data = JSON.parse( event.data );

 				if( data && data.namespace === 'reveal' ) {
 					if( /ready/.test( data.eventName ) ) {
 						socket.emit( 'new-subscriber', { socketId: socketId } );
 					}
 				}

 				// Messages sent by reveal.js inside of the current slide preview
 				if( data && data.namespace === 'reveal' ) {
 					if( /slidechanged|fragmentshown|fragmenthidden|overviewshown|overviewhidden|paused|resumed/.test( data.eventName ) && currentState !== JSON.stringify( data.state ) ) {
 						socket.emit( 'statechanged-speaker', { state: data.state } );
 					}
 				}

 			} );

 			/**
 			 * 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' );
 					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.
 			 */
 			function setupKeyboard() {

 				document.addEventListener( 'keydown', function( event ) {
 					currentSlide.contentWindow.postMessage( JSON.stringify({ method: 'triggerKey', args: [ event.keyCode ] }), '*' );
 				} );

 			}

 			/**
 			 * Creates the preview iframes.
 			 */
 			function setupIframes() {

 				var params = [
 					'receiver',
 					'progress=false',
 					'history=false',
 					'transition=none',
 					'backgroundTransition=none'
 				].join( '&' );

 				var currentURL = '/?' + params + '&postMessageEvents=true';
 				var upcomingURL = '/?' + params + '&controls=false';

 				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' );

 			}

 			/**
 			 * 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' );

 				function _updateTimer() {

 					var diff, hours, minutes, seconds,
 						now = new Date();

 					diff = now.getTime() - start.getTime();
 					hours = Math.floor( diff / ( 1000 * 60 * 60 ) );
 					minutes = Math.floor( ( diff / ( 1000 * 60 ) ) % 60 );
 					seconds = Math.floor( ( diff / 1000 ) % 60 );

 					clockEl.innerHTML = now.toLocaleTimeString( 'en-US', { hour12: true, hour: '2-digit', minute:'2-digit' } );
 					hoursEl.innerHTML = zeroPadInteger( hours );
 					hoursEl.className = hours > 0 ? '' : 'mute';
 					minutesEl.innerHTML = ':' + zeroPadInteger( minutes );
 					minutesEl.className = minutes > 0 ? '' : 'mute';
 					secondsEl.innerHTML = ':' + zeroPadInteger( seconds );

 				}

 				// Update once directly
 				_updateTimer();

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

 				timeEl.addEventListener( 'click', function() {
 					start = new Date();
 					_updateTimer();
 					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>
	<!doctype html>
	<html lang="en">
	<head>
	<meta charset="utf-8">

	<title>reveal.js - Slide Notes</title>

	<style>
	body {
	font-family: Helvetica;
	}

	#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;
	font-weight: bold;
	font-size: 14px;
	z-index: 2;
	color: rgba( 255, 255, 255, 0.9 );
	}

	#current-slide {
	position: absolute;
	width: 65%;
	height: 100%;
	top: 0;
	left: 0;
	padding-right: 0;
	}

	#upcoming-slide {
	position: absolute;
	width: 35%;
	height: 40%;
	right: 0;
	top: 0;
	}

	#speaker-controls {
	position: absolute;
	top: 40%;
	right: 0;
	width: 35%;
	height: 60%;

	font-size: 18px;
	}

	.speaker-controls-time.hidden,
	.speaker-controls-notes.hidden {
	display: none;
	}

	.speaker-controls-time .label,
	.speaker-controls-notes .label {
	text-transform: uppercase;
	font-weight: normal;
	font-size: 0.66em;
	color: #666;
	margin: 0;
	}

	.speaker-controls-time {
	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%;
	font-size: 1.9em;
	}

	.speaker-controls-time .timer {
	float: left;
	}

	.speaker-controls-time .clock {
	float: right;
	text-align: right;
	}

	.speaker-controls-time span.mute {
	color: #bbb;
	}

	.speaker-controls-notes {
	padding: 10px 16px;
	}

	.speaker-controls-notes .value {
	margin-top: 5px;
	line-height: 1.4;
	font-size: 1.2em;
	}

	.clear {
	clear: both;
	}

	@media screen and (max-width: 1080px) {
	#speaker-controls {
	font-size: 16px;
	}
	}

	@media screen and (max-width: 900px) {
	#speaker-controls {
	font-size: 14px;
	}
	}

	@media screen and (max-width: 800px) {
	#speaker-controls {
	font-size: 12px;
	}
	}

	</style>
	</head>

	<body>

	<div id="current-slide"></div>
	<div id="upcoming-slide"><span class="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>
	</div>

	<div class="speaker-controls-notes hidden">
	<h4 class="label">Notes</h4>
	<div class="value"></div>
	</div>
	</div>

	<script src="/socket.io/socket.io.js"></script>
	<script src="/plugin/markdown/marked.js"></script>

	<script>
	(function() {

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

	var socket = io.connect( window.location.origin ),
	socketId = '{{socketId}}';

	socket.on( 'statechanged', function( data ) {

	// ignore data from sockets that aren't ours
	if( data.socketId !== socketId ) { return; }

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

	setupKeyboard();
	setupNotes();
	setupTimer();

	}

	handleStateMessage( data );

	} );

	// Load our presentation iframes
	setupIframes();

	// Once the iframes have loaded, emit a signal saying there's
	// a new subscriber which will trigger a 'statechanged'
	// message to be sent back
	window.addEventListener( 'message', function( event ) {

	var data = JSON.parse( event.data );

	if( data && data.namespace === 'reveal' ) {
	if( /ready/.test( data.eventName ) ) {
	socket.emit( 'new-subscriber', { socketId: socketId } );
	}
	}

	// Messages sent by reveal.js inside of the current slide preview
	if( data && data.namespace === 'reveal' ) {
	if( /slidechanged\|fragmentshown\|fragmenthidden\|overviewshown\|overviewhidden\|paused\|resumed/.test( data.eventName ) && currentState !== JSON.stringify( data.state ) ) {
	socket.emit( 'statechanged-speaker', { state: data.state } );
	}
	}

	} );

	/**
	* 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' );
	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.
	*/
	function setupKeyboard() {

	document.addEventListener( 'keydown', function( event ) {
	currentSlide.contentWindow.postMessage( JSON.stringify({ method: 'triggerKey', args: [ event.keyCode ] }), '*' );
	} );

	}

	/**
	* Creates the preview iframes.
	*/
	function setupIframes() {

	var params = [
	'receiver',
	'progress=false',
	'history=false',
	'transition=none',
	'backgroundTransition=none'
	].join( '&' );

	var currentURL = '/?' + params + '&postMessageEvents=true';
	var upcomingURL = '/?' + params + '&controls=false';

	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' );

	}

	/**
	* 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' );

	function _updateTimer() {

	var diff, hours, minutes, seconds,
	now = new Date();

	diff = now.getTime() - start.getTime();
	hours = Math.floor( diff / ( 1000 * 60 * 60 ) );
	minutes = Math.floor( ( diff / ( 1000 * 60 ) ) % 60 );
	seconds = Math.floor( ( diff / 1000 ) % 60 );

	clockEl.innerHTML = now.toLocaleTimeString( 'en-US', { hour12: true, hour: '2-digit', minute:'2-digit' } );
	hoursEl.innerHTML = zeroPadInteger( hours );
	hoursEl.className = hours > 0 ? '' : 'mute';
	minutesEl.innerHTML = ':' + zeroPadInteger( minutes );
	minutesEl.className = minutes > 0 ? '' : 'mute';
	secondsEl.innerHTML = ':' + zeroPadInteger( seconds );

	}

	// Update once directly
	_updateTimer();

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

	timeEl.addEventListener( 'click', function() {
	start = new Date();
	_updateTimer();
	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>