ability to share presentation with speaker notes #304

README.md

@@ -141,6 +141,9 @@ Reveal.initialize({
 	// key is pressed
 	help: true,
 
+	// Flags if speaker notes should be visible to all viewers
+	showNotes: false,
+
 	// Number of milliseconds between automatically proceeding to the
 	// next slide, disabled when set to 0, this value can be overwritten
 	// by using a data-autoslide attribute on your slides

css/reveal.css

@@ -1162,6 +1162,34 @@ body {
 .reveal aside.notes {
   display: none; }
 
+.reveal .speaker-notes {
+  display: none;
+  position: absolute;
+  width: 70%;
+  max-height: 15%;
+  left: 15%;
+  bottom: 5%;
+  padding: 10px;
+  z-index: 1;
+  font-size: 18px;
+  line-height: 1.4;
+  border: 2px solid #fff;
+  color: #fff;
+  background-color: rgba(0, 0, 0, 0.5);
+  overflow: auto;
+  -moz-box-sizing: border-box;
+       box-sizing: border-box; }
+
+.reveal .speaker-notes.visible:not(:empty) {
+  display: block; }
+
+@media screen and (max-width: 800px) {
+  .reveal .speaker-notes {
+    width: 90%;
+    left: 5%;
+    bottom: 5%;
+    font-size: 14px; } }
+
 /*********************************************
  * ZOOM PLUGIN
  *********************************************/

css/reveal.scss

@@ -1291,10 +1291,44 @@ body {
  * SPEAKER NOTES
  *********************************************/
 
+// Hide on-page notes
 .reveal aside.notes {
 	display: none;
 }
 
+// An interface element that can optionally be used to show the
+// speaker notes to all viewers, on top of the presentation
+.reveal .speaker-notes {
+	display: none;
+	position: absolute;
+	width: 70%;
+	max-height: 15%;
+	left: 15%;
+	bottom: 5%;
+	padding: 10px;
+	z-index: 1;
+	font-size: 18px;
+	line-height: 1.4;
+	border: 2px solid #fff;
+	color: #fff;
+	background-color: rgba(0,0,0,0.5);
+	overflow: auto;
+	box-sizing: border-box;
+}
+
+.reveal .speaker-notes.visible:not(:empty) {
+	display: block;
+}
+
+@media screen and (max-width: 800px) {
+	.reveal .speaker-notes {
+		width: 90%;
+		left: 5%;
+		bottom: 5%;
+		font-size: 14px;
+	}
+}
+
 
 /*********************************************
  * ZOOM PLUGIN

js/reveal.js

@@ -92,6 +92,9 @@
 			// Flags if it should be possible to pause the presentation (blackout)
 			pause: true,
 
+			// Flags if speaker notes should be visible to all viewers
+			showNotes: false,
+
 			// Number of milliseconds between automatically proceeding to the
 			// next slide, disabled when set to 0, this value can be overwritten
 			// by using a data-autoslide attribute on your slides
@@ -465,6 +468,9 @@
 		// Slide number
 		dom.slideNumber = createSingletonNode( dom.wrapper, 'div', 'slide-number', '' );
 
+		// Element containing notes that are visible to the audience
+		dom.speakerNotes = createSingletonNode( dom.wrapper, 'div', 'speaker-notes', null );
+
 		// Overlay graphic which is displayed during the paused mode
 		createSingletonNode( dom.wrapper, 'div', 'pause-overlay', null );
 
@@ -856,6 +862,13 @@
 			resume();
 		}
 
+		if( config.showNotes ) {
+			dom.speakerNotes.classList.add( 'visible' );
+		}
+		else {
+			dom.speakerNotes.classList.remove( 'visible' );
+		}
+
 		if( config.mouseWheel ) {
 			document.addEventListener( 'DOMMouseScroll', onDocumentMouseScroll, false ); // FF
 			document.addEventListener( 'mousewheel', onDocumentMouseScroll, false );
@@ -2161,6 +2174,7 @@
 		updateBackground();
 		updateParallax();
 		updateSlideNumber();
+		updateNotes();
 
 		// Update the URL hash
 		writeURL();
@@ -2202,6 +2216,7 @@
 		updateBackground( true );
 		updateSlideNumber();
 		updateSlidesVisibility();
+		updateNotes();
 
 		formatEmbeddedContent();
 		startEmbeddedContent( currentSlide );
@@ -2451,6 +2466,37 @@
 	}
 
 	/**
+	 * Pick up notes from the current slide and display tham
+	 * to the viewer.
+	 *
+	 * @see `showNotes` config value
+	 */
+	function updateNotes() {
+
+		if( config.showNotes && dom.speakerNotes && currentSlide ) {
+
+			var notes = '';
+
+			// Notes can be specified via the data-notes attribute...
+			if( currentSlide.hasAttribute( 'data-notes' ) ) {
+				notes = currentSlide.getAttribute( 'data-notes' );
+			}
+
+			// ... or using an <aside class="notes"> element
+			if( !notes ) {
+				var notesElement = currentSlide.querySelector( 'aside.notes' );
+				if( notesElement ) {
+					notes = notesElement.innerHTML;
+				}
+			}
+
+			dom.speakerNotes.innerHTML = notes;
+
+		}
+
+	}
+
+	/**
 	 * Updates the progress bar to reflect the current slide.
 	 */
 	function updateProgress() {