reveal.rb 0.3.0 → 0.4.0

data/lib/reveal/templates/revealjs/plugin/notes/notes.js

@@ -1,78 +1,122 @@
 /**
  * Handles opening of and synchronization with the reveal.js
  * notes window.
+ *
+ * Handshake process:
+ * 1. This window posts 'connect' to notes window
+ *    - Includes URL of presentation to show
+ * 2. Notes window responds with 'connected' when it is available
+ * 3. This window proceeds to send the current presentation state
+ *    to the notes window
  */
 var RevealNotes = (function() {
 
 	function openNotes() {
 		var jsFileLocation = document.querySelector('script[src$="notes.js"]').src;  // this js file path
 		jsFileLocation = jsFileLocation.replace(/notes\.js(\?.*)?$/, '');   // the js folder path
-		var notesPopup = window.open( jsFileLocation + 'notes.html', 'reveal.js - Notes', 'width=1120,height=850' );
+		var notesPopup = window.open( jsFileLocation + 'notes.html', 'reveal.js - Notes', 'width=1100,height=700' );
 
-		// Fires when slide is changed
-		Reveal.addEventListener( 'slidechanged', post );
-
-		// Fires when a fragment is shown
-		Reveal.addEventListener( 'fragmentshown', post );
+		/**
+		 * Connect to the notes window through a postmessage handshake.
+		 * Using postmessage enables us to work in situations where the
+		 * origins differ, such as a presentation being opened from the
+		 * file system.
+		 */
+		function connect() {
+			// Keep trying to connect until we get a 'connected' message back
+			var connectInterval = setInterval( function() {
+				notesPopup.postMessage( JSON.stringify( {
+					namespace: 'reveal-notes',
+					type: 'connect',
+					url: window.location.protocol + '//' + window.location.host + window.location.pathname + window.location.search,
+					state: Reveal.getState()
+				} ), '*' );
+			}, 500 );
 
-		// Fires when a fragment is hidden
-		Reveal.addEventListener( 'fragmenthidden', post );
+			window.addEventListener( 'message', function( event ) {
+				var data = JSON.parse( event.data );
+				if( data && data.namespace === 'reveal-notes' && data.type === 'connected' ) {
+					clearInterval( connectInterval );
+					onConnected();
+				}
+			} );
+		}
 
 		/**
 		 * Posts the current slide data to the notes window
 		 */
 		function post() {
+
 			var slideElement = Reveal.getCurrentSlide(),
-				slideIndices = Reveal.getIndices(),
-				messageData;
-
-			var notes = slideElement.querySelector( 'aside.notes' ),
-				nextindexh,
-				nextindexv;
-
-			if( slideElement.nextElementSibling && slideElement.parentNode.nodeName == 'SECTION' ) {
-				nextindexh = slideIndices.h;
-				nextindexv = slideIndices.v + 1;
-			} else {
-				nextindexh = slideIndices.h + 1;
-				nextindexv = 0;
-			}
+				notesElement = slideElement.querySelector( 'aside.notes' );
 
-			messageData = {
-				notes : notes ? notes.innerHTML : '',
-				indexh : slideIndices.h,
-				indexv : slideIndices.v,
-				indexf : slideIndices.f,
-				nextindexh : nextindexh,
-				nextindexv : nextindexv,
-				markdown : notes ? typeof notes.getAttribute( 'data-markdown' ) === 'string' : false
+			var messageData = {
+				namespace: 'reveal-notes',
+				type: 'state',
+				notes: '',
+				markdown: false,
+				state: Reveal.getState()
 			};
 
+			// Look for notes defined in a slide attribute
+			if( slideElement.hasAttribute( 'data-notes' ) ) {
+				messageData.notes = slideElement.getAttribute( 'data-notes' );
+			}
+
+			// Look for notes defined in an aside element
+			if( notesElement ) {
+				messageData.notes = notesElement.innerHTML;
+				messageData.markdown = typeof notesElement.getAttribute( 'data-markdown' ) === 'string';
+			}
+
 			notesPopup.postMessage( JSON.stringify( messageData ), '*' );
+
 		}
 
-		// Navigate to the current slide when the notes are loaded
-		notesPopup.addEventListener( 'load', function( event ) {
+		/**
+		 * Called once we have established a connection to the notes
+		 * window.
+		 */
+		function onConnected() {
+
+			// Monitor events that trigger a change in state
+			Reveal.addEventListener( 'slidechanged', post );
+			Reveal.addEventListener( 'fragmentshown', post );
+			Reveal.addEventListener( 'fragmenthidden', post );
+			Reveal.addEventListener( 'overviewhidden', post );
+			Reveal.addEventListener( 'overviewshown', post );
+			Reveal.addEventListener( 'paused', post );
+			Reveal.addEventListener( 'resumed', post );
+
+			// Post the initial state
 			post();
-		}, false );
-	}
 
-	// If the there's a 'notes' query set, open directly
-	if( window.location.search.match( /(\?|\&)notes/gi ) !== null ) {
-		openNotes();
+		}
+
+		connect();
 	}
 
-	// Open the notes when the 's' key is hit
-	document.addEventListener( 'keydown', function( event ) {
-		// Disregard the event if the target is editable or a
-		// modifier is present
-		if ( document.querySelector( ':focus' ) !== null || event.shiftKey || event.altKey || event.ctrlKey || event.metaKey ) return;
+	if( !/receiver/i.test( window.location.search ) ) {
 
-		if( event.keyCode === 83 ) {
-			event.preventDefault();
+		// If the there's a 'notes' query set, open directly
+		if( window.location.search.match( /(\?|\&)notes/gi ) !== null ) {
 			openNotes();
 		}
-	}, false );
+
+		// Open the notes when the 's' key is hit
+		document.addEventListener( 'keydown', function( event ) {
+			// Disregard the event if the target is editable or a
+			// modifier is present
+			if ( document.querySelector( ':focus' ) !== null || event.shiftKey || event.altKey || event.ctrlKey || event.metaKey ) return;
+
+			if( event.keyCode === 83 ) {
+				event.preventDefault();
+				openNotes();
+			}
+		}, false );
+
+	}
 
 	return { open: openNotes };
+
 })();

data/lib/reveal/templates/revealjs/plugin/notes-server/client.js

@@ -1,57 +1,60 @@
 (function() {
+
 	// don't emit events from inside the previews themselves
-	if ( window.location.search.match( /receiver/gi ) ) { return; }
-
-	var socket = io.connect(window.location.origin);
-	var socketId = Math.random().toString().slice(2);
-	
-	console.log('View slide notes at ' + window.location.origin + '/notes/' + socketId);
-	window.open(window.location.origin + '/notes/' + socketId, 'notes-' + socketId);
-
-	// Fires when a fragment is shown
-	Reveal.addEventListener( 'fragmentshown', function( event ) {
-		var fragmentData = {
-			fragment : 'next',
-			socketId : socketId
-		};
-		socket.emit('fragmentchanged', fragmentData);
-	} );
+	if( window.location.search.match( /receiver/gi ) ) { return; }
+
+	var socket = io.connect( window.location.origin ),
+		socketId = Math.random().toString().slice( 2 );
+
+	console.log( 'View slide notes at ' + window.location.origin + '/notes/' + socketId );
+
+	window.open( window.location.origin + '/notes/' + socketId, 'notes-' + socketId );
+
+	/**
+	 * Posts the current slide data to the notes window
+	 */
+	function post() {
+
+		var slideElement = Reveal.getCurrentSlide(),
+			notesElement = slideElement.querySelector( 'aside.notes' );
 
-	// Fires when a fragment is hidden
-	Reveal.addEventListener( 'fragmenthidden', function( event ) {
-		var fragmentData = {
-			fragment : 'previous',
-			socketId : socketId
+		var messageData = {
+			notes: '',
+			markdown: false,
+			socketId: socketId,
+			state: Reveal.getState()
 		};
-		socket.emit('fragmentchanged', fragmentData);
-	} );
 
-	// Fires when slide is changed
-	Reveal.addEventListener( 'slidechanged', function( event ) {
-		var nextindexh;
-		var nextindexv;
-		var slideElement = event.currentSlide;
-
-		if (slideElement.nextElementSibling && slideElement.parentNode.nodeName == 'SECTION') {
-			nextindexh = event.indexh;
-			nextindexv = event.indexv + 1;
-		} else {
-			nextindexh = event.indexh + 1;
-			nextindexv = 0;
+		// Look for notes defined in a slide attribute
+		if( slideElement.hasAttribute( 'data-notes' ) ) {
+			messageData.notes = slideElement.getAttribute( 'data-notes' );
+		}
+
+		// Look for notes defined in an aside element
+		if( notesElement ) {
+			messageData.notes = notesElement.innerHTML;
+			messageData.markdown = typeof notesElement.getAttribute( 'data-markdown' ) === 'string';
 		}
 
-		var notes = slideElement.querySelector('aside.notes');
-		var slideData = {
-			notes : notes ? notes.innerHTML : '',
-			indexh : event.indexh,
-			indexv : event.indexv,
-			nextindexh : nextindexh,
-			nextindexv : nextindexv,
-			socketId : socketId,
-			markdown : notes ? typeof notes.getAttribute('data-markdown') === 'string' : false
+		socket.emit( 'statechanged', messageData );
 
-		};
+	}
 
-		socket.emit('slidechanged', slideData);
+	// When a new notes window connects, post our current state
+	socket.on( 'connect', function( data ) {
+		post();
 	} );
+
+	// Monitor events that trigger a change in state
+	Reveal.addEventListener( 'slidechanged', post );
+	Reveal.addEventListener( 'fragmentshown', post );
+	Reveal.addEventListener( 'fragmenthidden', post );
+	Reveal.addEventListener( 'overviewhidden', post );
+	Reveal.addEventListener( 'overviewshown', post );
+	Reveal.addEventListener( 'paused', post );
+	Reveal.addEventListener( 'resumed', post );
+
+	// Post the initial state
+	post();
+
 }());

data/lib/reveal/templates/revealjs/plugin/notes-server/index.js

@@ -14,46 +14,53 @@ var opts = {
 	baseDir :   __dirname + '/../../'
 };
 
-io.sockets.on('connection', function(socket) {
-	socket.on('slidechanged', function(slideData) {
-		socket.broadcast.emit('slidedata', slideData);
+io.sockets.on( 'connection', function( socket ) {
+
+	socket.on( 'connect', function( data ) {
+		socket.broadcast.emit( 'connect', data );
 	});
-	socket.on('fragmentchanged', function(fragmentData) {
-		socket.broadcast.emit('fragmentdata', fragmentData);
+
+	socket.on( 'statechanged', function( data ) {
+		socket.broadcast.emit( 'statechanged', data );
 	});
+
 });
 
-app.configure(function() {
-	[ 'css', 'js', 'images', 'plugin', 'lib' ].forEach(function(dir) {
-		app.use('/' + dir, staticDir(opts.baseDir + dir));
+app.configure( function() {
+
+	[ 'css', 'js', 'images', 'plugin', 'lib' ].forEach( function( dir ) {
+		app.use( '/' + dir, staticDir( opts.baseDir + dir ) );
 	});
+
 });
 
-app.get("/", function(req, res) {
-	res.writeHead(200, {'Content-Type': 'text/html'});
-	fs.createReadStream(opts.baseDir + '/index.html').pipe(res);
+app.get('/', function( req, res ) {
+
+	res.writeHead( 200, { 'Content-Type': 'text/html' } );
+	fs.createReadStream( opts.baseDir + '/index.html' ).pipe( res );
+
 });
 
-app.get("/notes/:socketId", function(req, res) {
+app.get( '/notes/:socketId', function( req, res ) {
 
-	fs.readFile(opts.baseDir + 'plugin/notes-server/notes.html', function(err, data) {
-		res.send(Mustache.to_html(data.toString(), {
+	fs.readFile( opts.baseDir + 'plugin/notes-server/notes.html', function( err, data ) {
+		res.send( Mustache.to_html( data.toString(), {
 			socketId : req.params.socketId
 		}));
 	});
-	// fs.createReadStream(opts.baseDir + 'notes-server/notes.html').pipe(res);
+
 });
 
 // Actually listen
-app.listen(opts.port || null);
+app.listen( opts.port || null );
 
 var brown = '\033[33m',
 	green = '\033[32m',
 	reset = '\033[0m';
 
-var slidesLocation = "http://localhost" + ( opts.port ? ( ':' + opts.port ) : '' );
+var slidesLocation = 'http://localhost' + ( opts.port ? ( ':' + opts.port ) : '' );
 
-console.log( brown + "reveal.js - Speaker Notes" + reset );
-console.log( "1. Open the slides at " + green + slidesLocation + reset );
-console.log( "2. Click on the link your JS console to go to the notes page" );
-console.log( "3. Advance through your slides and your notes will advance automatically" );
+console.log( brown + 'reveal.js - Speaker Notes' + reset );
+console.log( '1. Open the slides at ' + green + slidesLocation + reset );
+console.log( '2. Click on the link your JS console to go to the notes page' );
+console.log( '3. Advance through your slides and your notes will advance automatically' );