ability to share presentation with speaker notes #304

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 );
@@ -2450,6 +2465,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.
 	 */