notes.html in reveal-ck-3.9.0

- old
+ new

@@ -32,10 +32,26 @@
 				top: 10px;
 				left: 10px;
 				z-index: 2;
 			}
 
+			#connection-status {
+				position: absolute;
+				top: 0;
+				left: 0;
+				width: 100%;
+				height: 100%;
+				z-index: 20;
+				padding: 30% 20% 20% 20%;
+				font-size: 18px;
+				color: #222;
+				background: #fff;
+				text-align: center;
+				box-sizing: border-box;
+				line-height: 1.4;
+			}
+
 			.overlay-element {
 				height: 34px;
 				line-height: 34px;
 				padding: 0 10px;
 				text-shadow: none;
@@ -286,10 +302,12 @@
 		</style>
 	</head>
 
 	<body>
 
+		<div id="connection-status">Loading speaker view...</div>
+
 		<div id="current-slide"></div>
 		<div id="upcoming-slide"><span class="overlay-element label">Upcoming</span></div>
 		<div id="speaker-controls">
 			<div class="speaker-controls-time">
 				<h4 class="label">Time <span class="reset-button">Click to Reset</span></h4>
@@ -338,12 +356,20 @@
 					'notes-only': 'Notes only'
 				};
 
 				setupLayout();
 
+				var connectionStatus = document.querySelector( '#connection-status' );
+				var connectionTimeout = setTimeout( function() {
+					connectionStatus.innerHTML = 'Error connecting to main window.<br>Please try closing and reopening the speaker view.';
+				}, 5000 );
+
 				window.addEventListener( 'message', function( event ) {
 
+					clearTimeout( connectionTimeout );
+					connectionStatus.style.display = 'none';
+
 					var data = JSON.parse( event.data );
 
 					// The overview mode is only useful to the reveal.js instance
 					// where navigation occurs so we don't sync it
 					if( data.state ) delete data.state.overview;
@@ -425,14 +451,21 @@
 
 				/**
 				 * Forward keyboard events to the current slide window.
 				 * This enables keyboard events to work even if focus
 				 * isn't set on the current slide iframe.
+				 *
+				 * Block F5 default handling, it reloads and disconnects
+				 * the speaker notes window.
 				 */
 				function setupKeyboard() {
 
 					document.addEventListener( 'keydown', function( event ) {
+						if( event.keyCode === 116 || ( event.metaKey && event.keyCode === 82 ) ) {
+							event.preventDefault();
+							return false;
+						}
 						currentSlide.contentWindow.postMessage( JSON.stringify({ method: 'triggerKey', args: [ event.keyCode ] }), '*' );
 					} );
 
 				}
 
@@ -673,11 +706,11 @@
 					layoutDropdown.value = value;
 
 					document.body.setAttribute( 'data-speaker-layout', value );
 
 					// Persist locally
-					if( window.localStorage ) {
+					if( supportsLocalStorage() ) {
 						window.localStorage.setItem( 'reveal-speaker-layout', value );
 					}
 
 				}
 
@@ -685,19 +718,32 @@
 				 * Returns the ID of the most recently set speaker layout
 				 * or our default layout if none has been set.
 				 */
 				function getLayout() {
 
-					if( window.localStorage ) {
+					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 ) {