Make the fragments visible in speaker notes

plugin/notes/notes.html

@@ -109,13 +109,16 @@
 
 					window.addEventListener( 'message', function( event ) {
 						var data = JSON.parse( event.data );
-
+						console.log(data);
+						// No need for updating the notes in case of fragement changes
+						if ( data.notes !== undefined) {
 							if( data.markdown ) {
 								notes.innerHTML = (new Showdown.converter()).makeHtml( data.notes );
 							}
 							else {
 								notes.innerHTML = data.notes;
 							}
+						}
 
 						// Kill the slide listeners while responding to the event
 						removeSlideListeners();
@@ -124,6 +127,14 @@
 						currentSlide.contentWindow.Reveal.slide( data.indexh, data.indexv );
 						nextSlide.contentWindow.Reveal.slide( data.nextindexh, data.nextindexv );
 
+						// Showing and hiding fragments
+						if (data.fragment === 'next') {
+							currentSlide.contentWindow.Reveal.nextFragment();
+						}
+						else if (data.fragment === 'prev') {
+							currentSlide.contentWindow.Reveal.prevFragment();
+						}
+
 						// Resume listening on the next cycle
 						setTimeout( addSlideListeners, 1 );
 

plugin/notes/notes.js

@@ -7,15 +7,36 @@ var RevealNotes = (function() {
 	function openNotes() {
 		var notesPopup = window.open( 'plugin/notes/notes.html', 'reveal.js - Notes', 'width=1120,height=850' );
 
-		Reveal.addEventListener( 'slidechanged', post );
+		// Fires when slide is changed
+		Reveal.addEventListener( 'slidechanged', function( event ) {
+			post('slidechanged');
+		} );
 
-		// Posts the current slide data to the notes window
+		// Fires when a fragment is shown
-		function post() {
+		Reveal.addEventListener( 'fragmentshown', function( event ) {
+			post('fragmentshown');
+		} );
+
+		// Fires when a fragment is hidden
+		Reveal.addEventListener( 'fragmenthidden', function( event ) {
+			post('fragmenthidden');
+		} );
+
+		/**
+		 * @description	Posts the current slide data to the notes window
+		 *
+		 * @param       {string} eventType Expecting 'slidechanged', 'fragmentshown' or 'fragmenthidden'
+		 *                                 set in the events above to define the needed slideDate.
+		 */
+		function post(eventType) {
+			console.log(eventType);
 			var slideElement = Reveal.getCurrentSlide(),
 				indexh = Reveal.getIndices().h,
 				indexv = Reveal.getIndices().v,
+				notes = slideElement.querySelector( 'aside.notes' ),
 				nextindexh,
-				nextindexv;
+				nextindexv,
+				slideData;
 
 			if( slideElement.nextElementSibling && slideElement.parentNode.nodeName == 'SECTION' ) {
 				nextindexh = indexh;
@@ -25,9 +46,8 @@ var RevealNotes = (function() {
 				nextindexv = 0;
 			}
 
-			var notes = slideElement.querySelector( 'aside.notes' );
+			if (eventType === 'slidechanged') {
-
+				slideData = {
-			var slideData = {
 					notes : notes ? notes.innerHTML : '',
 					indexh : indexh,
 					indexv : indexv,
@@ -35,6 +55,17 @@ var RevealNotes = (function() {
 					nextindexv : nextindexv,
 					markdown : notes ? typeof notes.getAttribute( 'data-markdown' ) === 'string' : false
 				};
+			}
+			else if (eventType === 'fragmentshown') {
+				slideData = {
+					fragment : 'next'
+				};
+			}
+			else if (eventType === 'fragmenthidden') {
+				slideData = {
+					fragment : 'prev'
+				};
+			}
 
 			notesPopup.postMessage( JSON.stringify( slideData ), '*' );
 		}
@@ -50,7 +81,9 @@ var RevealNotes = (function() {
 		} );
 
 		// Navigate to the current slide when the notes are loaded
-		notesPopup.addEventListener( 'load', post, false );
+		notesPopup.addEventListener( 'load', function( event ) {
+			post('slidechanged');
+		}, false );
 	}
 
 	// If the there's a 'notes' query set, open directly
@@ -70,5 +103,5 @@ var RevealNotes = (function() {
 		}
 	}, false );
 
-	return { open: openNotes }
+	return { open: openNotes };
 })();