broadcasting fragments state in multiplex plugin (#394)

js/reveal.js

@@ -645,6 +645,13 @@ var Reveal = (function(){
 
 	}
 
+	/**
+	 * Returns last element of an array
+	 */
+	function lastElem(array) {
+		return array.slice(-1)[0];
+	}
+
 	/**
 	 * Applies JavaScript-controlled layout rules to the
 	 * presentation.
@@ -2045,6 +2052,26 @@ var Reveal = (function(){
 			return config;
 		},
 
+		// Returns an index (1-based) of the current fragment
+		getCurrentFragmentIndex : function() {
+			var visibleFragments;
+			
+			// vertical slides:
+			if( document.querySelector( VERTICAL_SLIDES_SELECTOR + '.present' ) ) {
+				visibleFragments = document.querySelectorAll( VERTICAL_SLIDES_SELECTOR + '.present .fragment.visible' );
+			}
+			// Horizontal slides:
+			else {
+				visibleFragments = document.querySelectorAll( HORIZONTAL_SLIDES_SELECTOR + '.present .fragment.visible' );
+			}
+			
+			if( visibleFragments.length) {
+				return visibleFragments.length;
+			} else {
+				return undefined;
+			}
+		},
+
 		// Helper method, retrieves query string as a key/value hash
 		getQueryHash: function() {
 			var query = {};

plugin/multiplex/client.js

@@ -8,6 +8,6 @@
 		if (data.socketId !== socketId) { return; }
 		if( window.location.host === 'localhost:1947' ) return;
 
-		Reveal.slide(data.indexh, data.indexv, null, 'remote');
+		Reveal.slide(data.indexh, data.indexv, data.indexf, 'remote');
 	});
 }());

plugin/multiplex/master.js

@@ -5,28 +5,46 @@
 
 	var socket = io.connect(multiplex.url);
 
-	Reveal.addEventListener( 'slidechanged', function( event ) {
+	var notify = function( slideElement, indexh, indexv, origin ) {
-		var nextindexh;
+		if( typeof origin === 'undefined' && origin !== 'remote' ) {
-		var nextindexv;
+			var nextindexh;
-		var slideElement = event.currentSlide;
+			var nextindexv;
 
-		if (slideElement.nextElementSibling && slideElement.parentNode.nodeName == 'SECTION') {
+			var fragmentindex = Reveal.getCurrentFragmentIndex();
-			nextindexh = event.indexh;
+			if (typeof fragmentindex == 'undefined') {
-			nextindexv = event.indexv + 1;
+				fragmentindex = 0;
-		} else {
+			}
-			nextindexh = event.indexh + 1;
+
-			nextindexv = 0;
+			if (slideElement.nextElementSibling && slideElement.parentNode.nodeName == 'SECTION') {
+				nextindexh = indexh;
+				nextindexv = indexv + 1;
+			} else {
+				nextindexh = indexh + 1;
+				nextindexv = 0;
+			}	
+
+			var slideData = {
+				indexh : indexh,
+				indexv : indexv,
+				indexf : fragmentindex,
+				nextindexh : nextindexh,
+				nextindexv : nextindexv,
+				secret: multiplex.secret,
+				socketId : multiplex.id
+			};
+
+			socket.emit('slidechanged', slideData);
 		}
+	}
 
-		var slideData = {
+	Reveal.addEventListener( 'slidechanged', function( event ) {
-			indexh : event.indexh,
+		notify( event.currentSlide, event.indexh, event.indexv, event.origin );
-			indexv : event.indexv,
-			nextindexh : nextindexh,
-			nextindexv : nextindexv,
-			secret: multiplex.secret,
-			socketId : multiplex.id
-		};
-
-		if( typeof event.origin === 'undefined' && event.origin !== 'remote' ) socket.emit('slidechanged', slideData);
 	} );
+
+	var fragmentNotify = function( event ) {
+		notify( Reveal.getCurrentSlide(), Reveal.getIndices().h, Reveal.getIndices().v, event.origin );
+	};
+
+	Reveal.addEventListener( 'fragmentshown', fragmentNotify );
+	Reveal.addEventListener( 'fragmenthidden', fragmentNotify );
 }());