From a22d00ab25b13b82d19890428f124b4ed3759f92 Mon Sep 17 00:00:00 2001 From: Hakim El Hattab Date: Mon, 17 Feb 2014 20:07:41 +0100 Subject: server side notes plugin now supports input via data-notes attribute --- plugin/notes-server/client.js | 45 +++++++++++++++++++++++++++---------------- 1 file changed, 28 insertions(+), 17 deletions(-) (limited to 'plugin/notes-server') diff --git a/plugin/notes-server/client.js b/plugin/notes-server/client.js index 156cb9a..ee60ff7 100644 --- a/plugin/notes-server/client.js +++ b/plugin/notes-server/client.js @@ -1,12 +1,13 @@ (function() { // don't emit events from inside the previews themselves - if ( window.location.search.match( /receiver/gi ) ) { return; } + 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); + 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 ) { @@ -23,16 +24,17 @@ fragment : 'previous', socketId : socketId }; - socket.emit('fragmentchanged', fragmentData); + socket.emit( 'fragmentchanged', fragmentData ); } ); // Fires when slide is changed Reveal.addEventListener( 'slidechanged', function( event ) { - var nextindexh; - var nextindexv; - var slideElement = event.currentSlide; + var nextindexh, + nextindexv, + slideElement = event.currentSlide, + notesElement = slideElement.querySelector( 'aside.notes' ); - if (slideElement.nextElementSibling && slideElement.parentNode.nodeName == 'SECTION') { + if( slideElement.nextElementSibling && slideElement.parentNode.nodeName == 'SECTION' ) { nextindexh = event.indexh; nextindexv = event.indexv + 1; } else { @@ -40,18 +42,27 @@ nextindexv = 0; } - var notes = slideElement.querySelector('aside.notes'); - var slideData = { - notes : notes ? notes.innerHTML : '', + var messageData = { + notes : '', indexh : event.indexh, indexv : event.indexv, nextindexh : nextindexh, nextindexv : nextindexv, socketId : socketId, - markdown : notes ? typeof notes.getAttribute('data-markdown') === 'string' : false - + markdown : false }; - socket.emit('slidechanged', slideData); + // 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'; + } + + socket.emit( 'slidechanged', messageData ); } ); }()); -- cgit v1.2.3 From 4c5b15d0b92cae5828df5d39c5e5a51e68242752 Mon Sep 17 00:00:00 2001 From: Hakim El Hattab Date: Sun, 4 May 2014 09:32:00 +0200 Subject: update server side notes to match client side plugin --- plugin/notes-server/client.js | 69 +++---- plugin/notes-server/index.js | 47 ++--- plugin/notes-server/notes.html | 436 ++++++++++++++++++++++++++++++++--------- 3 files changed, 392 insertions(+), 160 deletions(-) (limited to 'plugin/notes-server') diff --git a/plugin/notes-server/client.js b/plugin/notes-server/client.js index ee60ff7..f7ecfa2 100644 --- a/plugin/notes-server/client.js +++ b/plugin/notes-server/client.js @@ -1,55 +1,28 @@ (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 ); + 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 ); - // Fires when a fragment is shown - Reveal.addEventListener( 'fragmentshown', function( event ) { - var fragmentData = { - fragment : 'next', - socketId : socketId - }; - socket.emit('fragmentchanged', fragmentData); - } ); + /** + * Posts the current slide data to the notes window + */ + function post() { - // Fires when a fragment is hidden - Reveal.addEventListener( 'fragmenthidden', function( event ) { - var fragmentData = { - fragment : 'previous', - socketId : socketId - }; - socket.emit( 'fragmentchanged', fragmentData ); - } ); - - // Fires when slide is changed - Reveal.addEventListener( 'slidechanged', function( event ) { - var nextindexh, - nextindexv, - slideElement = event.currentSlide, + var slideElement = Reveal.getCurrentSlide(), notesElement = slideElement.querySelector( 'aside.notes' ); - if( slideElement.nextElementSibling && slideElement.parentNode.nodeName == 'SECTION' ) { - nextindexh = event.indexh; - nextindexv = event.indexv + 1; - } else { - nextindexh = event.indexh + 1; - nextindexv = 0; - } - var messageData = { - notes : '', - indexh : event.indexh, - indexv : event.indexv, - nextindexh : nextindexh, - nextindexv : nextindexv, - socketId : socketId, - markdown : false + notes: '', + markdown: false, + socketId: socketId, + state: Reveal.getState() }; // Look for notes defined in a slide attribute @@ -63,6 +36,20 @@ messageData.markdown = typeof notesElement.getAttribute( 'data-markdown' ) === 'string'; } - socket.emit( 'slidechanged', messageData ); - } ); + socket.emit( 'state', messageData ); + + } + + // 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(); + }()); diff --git a/plugin/notes-server/index.js b/plugin/notes-server/index.js index 5535c90..b6779d3 100644 --- a/plugin/notes-server/index.js +++ b/plugin/notes-server/index.js @@ -14,46 +14,49 @@ var opts = { baseDir : __dirname + '/../../' }; -io.sockets.on('connection', function(socket) { - socket.on('slidechanged', function(slideData) { - socket.broadcast.emit('slidedata', slideData); - }); - socket.on('fragmentchanged', function(fragmentData) { - socket.broadcast.emit('fragmentdata', fragmentData); +io.sockets.on( 'connection', function( socket ) { + + socket.on( 'state', function( state ) { + socket.broadcast.emit( 'state', state ); }); + }); -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' ); diff --git a/plugin/notes-server/notes.html b/plugin/notes-server/notes.html index 25d1a62..4ff48f1 100644 --- a/plugin/notes-server/notes.html +++ b/plugin/notes-server/notes.html @@ -3,8 +3,6 @@ - - reveal.js - Slide Notes -
- -
+
+
UPCOMING:
+
+
+

Time Click to Reset

+
+ 0:00 AM +
+
+ 00:00:00 +
+
+
-
- - UPCOMING: +
-
-- cgit v1.2.3 From 3eb7038a153b12245cffbc840a727a764d82b333 Mon Sep 17 00:00:00 2001 From: Hakim El Hattab Date: Sun, 4 May 2014 10:10:21 +0200 Subject: sync server-side speaker notes after notes window opens --- plugin/notes-server/client.js | 7 ++++++- plugin/notes-server/index.js | 8 ++++++-- plugin/notes-server/notes.html | 16 ++++++++++++++-- 3 files changed, 26 insertions(+), 5 deletions(-) (limited to 'plugin/notes-server') diff --git a/plugin/notes-server/client.js b/plugin/notes-server/client.js index f7ecfa2..628586f 100644 --- a/plugin/notes-server/client.js +++ b/plugin/notes-server/client.js @@ -36,10 +36,15 @@ messageData.markdown = typeof notesElement.getAttribute( 'data-markdown' ) === 'string'; } - socket.emit( 'state', messageData ); + socket.emit( 'statechanged', messageData ); } + // 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 ); diff --git a/plugin/notes-server/index.js b/plugin/notes-server/index.js index b6779d3..df917f1 100644 --- a/plugin/notes-server/index.js +++ b/plugin/notes-server/index.js @@ -16,8 +16,12 @@ var opts = { io.sockets.on( 'connection', function( socket ) { - socket.on( 'state', function( state ) { - socket.broadcast.emit( 'state', state ); + socket.on( 'connect', function( data ) { + socket.broadcast.emit( 'connect', data ); + }); + + socket.on( 'statechanged', function( data ) { + socket.broadcast.emit( 'statechanged', data ); }); }); diff --git a/plugin/notes-server/notes.html b/plugin/notes-server/notes.html index 4ff48f1..72d0317 100644 --- a/plugin/notes-server/notes.html +++ b/plugin/notes-server/notes.html @@ -187,7 +187,7 @@ var socket = io.connect( window.location.origin ), socketId = '{{socketId}}'; - socket.on( 'state', function( data ) { + socket.on( 'statechanged', function( data ) { // ignore data from sockets that aren't ours if( data.socketId !== socketId ) { return; } @@ -206,6 +206,18 @@ } ); + window.addEventListener( 'message', function( event ) { + + var data = JSON.parse( event.data ); + + if( data && data.namespace === 'reveal' ) { + if( /ready/.test( data.eventName ) ) { + socket.emit( 'connect', { socketId: socketId } ); + } + } + + } ); + /** * Called when the main window sends an updated state. */ @@ -266,7 +278,7 @@ ].join( '&' ); var hash = '#/' + data.state.indexh + '/' + data.state.indexv; - var currentURL = '/?' + params + hash; + var currentURL = '/?' + params + '&postMessageEvents=true' + hash; var upcomingURL = '/?' + params + '&controls=false' + hash; currentSlide = document.createElement( 'iframe' ); -- cgit v1.2.3