From 60f2eb9fb3c4443fbc43d387e866f383f0f70d67 Mon Sep 17 00:00:00 2001
From: Rebecca Murphey <rmurphey@gmail.com>
Date: Thu, 7 Jun 2012 23:21:14 -0400
Subject: taking a stab at a presenter notes server

---
 .gitignore            |  1 +
 README.md             | 21 +++++++++++++
 css/main.css          |  8 +++--
 index.html            |  8 +++++
 js/slidenotes.js      | 32 +++++++++++++++++++
 package.json          | 18 +++++++++++
 slidenotes/index.js   | 41 ++++++++++++++++++++++++
 slidenotes/notes.html | 87 +++++++++++++++++++++++++++++++++++++++++++++++++++
 8 files changed, 214 insertions(+), 2 deletions(-)
 create mode 100644 js/slidenotes.js
 create mode 100644 package.json
 create mode 100644 slidenotes/index.js
 create mode 100644 slidenotes/notes.html

diff --git a/.gitignore b/.gitignore
index dec0ea4..34058c4 100644
--- a/.gitignore
+++ b/.gitignore
@@ -2,3 +2,4 @@
 .svn
 log/*.log
 tmp/**
+node_modules/
diff --git a/README.md b/README.md
index 466dbb0..f84ee66 100644
--- a/README.md
+++ b/README.md
@@ -102,6 +102,27 @@ Reveal.addEventListener( 'fragmenthidden', function( event ) {
 } );
 ```
 
+## Speaker Notes
+
+If you're interested in using speaker notes, reveal.js comes with a Node server that allows you to deliver your presentation in one browser while viewing speaker notes in another. 
+
+To include speaker notes in your presentation, simply add an `<aside class="notes">` element to any slide. These notes will be hidden in the main presentation view.
+
+To use the speaker notes server, your `index.html` will need to include script tags for `socket.io/socket.io.js` and `js/slidenotes.js`. If you don't want to use the speaker notes server, you can safely remove these script tags, but they are included by default. 
+
+You'll also need to [install Node.js](http://nodejs.org/); then, install the server dependencies by running `npm install`.
+
+Once Node.js and the dependencies are installed, run the following command from the root directory:
+
+		node slidenotes
+
+By default, the slides will be served at [localhost:1947](http://localhost:1947).
+
+You can change the appearance of the speaker notes by editing the file at `slidenotes/notes.html`.
+
+### Known Issues
+
+- The notes page is supposed to show the current slide and the next slide, but when it first starts, it always shows the first slide in both positions. 
 
 ## Examples
 
diff --git a/css/main.css b/css/main.css
index 41c06cf..00f06ff 100644
--- a/css/main.css
+++ b/css/main.css
@@ -942,6 +942,10 @@ body {
 	background: rgba( 0, 0, 0, 0.6 );
 }
 
+/*********************************************
+ * SPEAKER NOTES
+ *********************************************/
 
-
-
+.reveal aside.notes {
+	display: none;
+}
diff --git a/index.html b/index.html
index a68dd6a..d4420ac 100644
--- a/index.html
+++ b/index.html
@@ -48,6 +48,10 @@
 					<p>
 						<i><small>- <a href="http://hakim.se">Hakim El Hattab</a> / <a href="http://twitter.com/hakimel">@hakimel</a></small></i>
 					</p>
+
+					<aside class="notes">
+						Oh hey, these are some notes. They'll be hidden in your presentation, but you can see them if you run the speaker notes server.
+					</aside>
 				</section>
 				
 				<!-- Example of nested vertical slides -->
@@ -268,6 +272,7 @@ linkify( 'a' );
 		<script>
 			// Parse the query string into a key/value object
 			var query = {};
+
 			location.search.replace( /[A-Z0-9]+?=(\w*)/gi, function(a) {
 				query[ a.split( '=' ).shift() ] = a.split( '=' ).pop();
 			} );
@@ -311,5 +316,8 @@ linkify( 'a' );
 			hljs.initHighlightingOnLoad();
 		</script>
 
+		<!-- the next two lines enable the speaker notes server -->
+		<script src="socket.io/socket.io.js"></script>
+		<script src="js/slidenotes.js"></script>
 	</body>
 </html>
\ No newline at end of file
diff --git a/js/slidenotes.js b/js/slidenotes.js
new file mode 100644
index 0000000..9a4f152
--- /dev/null
+++ b/js/slidenotes.js
@@ -0,0 +1,32 @@
+(function() {
+  // don't emit events from inside the previews themselves
+  var qs = window.location.href.split('?');
+  if (qs.length > 1 && qs[1].match('receiver')) { return; }
+
+  var socket = io.connect('http://localhost:1947');
+  
+  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;
+    }
+
+    var notes = slideElement.querySelector('aside.notes');
+    var slideData = {
+      notes : notes ? notes.innerHTML : '',
+      indexh : event.indexh,
+      indexv : event.indexv,
+      nextindexh : nextindexh,
+      nextindexv : nextindexv
+    };
+
+    socket.emit('slidechanged', slideData);
+  } );
+}());
\ No newline at end of file
diff --git a/package.json b/package.json
new file mode 100644
index 0000000..68514f4
--- /dev/null
+++ b/package.json
@@ -0,0 +1,18 @@
+{
+  "author": "Hakim El Hattab",
+  "name": "Reveal.js",
+  "description": "HTML5 Slideware with Presenter Notes",
+  "version": "1.5.0",
+  "repository": {
+    "type": "git",
+    "url": "git://github.com/hakimel/reveal.js.git"
+  },
+  "engines": {
+    "node": "~0.6.8"
+  },
+  "dependencies": {
+    "express" : "2.5.9",
+    "socket.io" : "0.9.6"
+  },
+  "devDependencies": {}
+}
diff --git a/slidenotes/index.js b/slidenotes/index.js
new file mode 100644
index 0000000..fb6baf8
--- /dev/null
+++ b/slidenotes/index.js
@@ -0,0 +1,41 @@
+var express   = require('express');
+var fs        = require('fs');
+var io        = require('socket.io');
+var _         = require('underscore');
+
+var app       = express.createServer();
+var staticDir = express.static;
+
+io            = io.listen(app);
+
+var opts = {
+  port :      1947,
+  baseDir :   __dirname + '/../'
+};
+
+io.sockets.on('connection', function(socket) {
+  socket.on('slidechanged', function(slideData) {
+    socket.broadcast.emit('slidedata', slideData);
+  });
+});
+
+app.configure(function() {
+  [ 'css', 'assets', 'js', 'lib' ].forEach(function(dir) {
+    app.use('/' + dir, staticDir(opts.baseDir + dir));
+  });
+});
+
+app.get("/", function(req, res) {
+  fs.createReadStream(opts.baseDir + '/index.html').pipe(res);
+});
+
+app.get("/_notes", function(req, res) {
+  fs.createReadStream(opts.baseDir + 'slidenotes/notes.html').pipe(res);
+});
+
+// Actually listen
+app.listen(opts.port || null);
+
+console.log("Your slides are at http://localhost" + (opts.port ? (':' + opts.port) : ''));
+console.log("Your notes are at http://localhost" + (opts.port ? (':' + opts.port) : '') + '/_notes');
+console.log("Advance through your slides and your speaker notes will advance automatically");
\ No newline at end of file
diff --git a/slidenotes/notes.html b/slidenotes/notes.html
new file mode 100644
index 0000000..955dce1
--- /dev/null
+++ b/slidenotes/notes.html
@@ -0,0 +1,87 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8">
+
+    <title>Slide Notes</title>
+
+    <meta name="description" content="">
+    <meta name="author" content="Rebecca Murphey">
+
+    <meta name="apple-mobile-web-app-capable" content="yes" />
+    <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />
+
+    <style>
+      #notes {
+        font-family: Helvetica;
+        font-size: 24px;
+        width: 640px;
+      }
+
+      #wrap-slides {
+        width: 640px;
+        height: 512px;
+        float: left;
+      }
+
+      #slides { 
+        width: 1280px; 
+        height: 1024px; 
+        border: 1px solid black; 
+        -moz-transform: scale(0.5);
+        -moz-transform-origin: 0 0;
+        -o-transform: scale(0.5);
+        -o-transform-origin: 0 0;
+        -webkit-transform: scale(0.5);
+        -webkit-transform-origin: 0 0;      
+      }
+
+      #wrap-next-slide {
+        width: 320px;
+        height: 256px;
+        float: left;
+        margin: 0 0 0 50px;
+      }
+
+      #next-slide { 
+        width: 1280px; 
+        height: 1024px; 
+        border: 1px solid black; 
+        -moz-transform: scale(0.25);
+        -moz-transform-origin: 0 0;
+        -o-transform: scale(0.25);
+        -o-transform-origin: 0 0;
+        -webkit-transform: scale(0.25);
+        -webkit-transform-origin: 0 0;      
+      }
+    </style>
+  </head>
+
+  <body>
+
+    <div id="wrap-slides">
+      <iframe src="/?receiver" width="1280" height="1024" id="slides"></iframe>
+    </div>
+
+    <div id="wrap-next-slide">
+      <iframe src="/?receiver" width="640" height="512" id="next-slide"></iframe>
+    </div>
+    <div id="notes"></div>
+
+    <script src="socket.io/socket.io.js"></script>
+
+    <script>
+    var socket = io.connect('http://localhost:1947');
+    var notes = document.getElementById('notes');
+    var slides = document.getElementById('slides');
+    var nextSlide = document.getElementById('next-slide');
+
+    socket.on('slidedata', function(data) {
+      notes.innerHTML = data.notes;
+      slides.contentWindow.Reveal.navigateTo(data.indexh, data.indexv);
+      nextSlide.contentWindow.Reveal.navigateTo(data.nextindexh, data.nextindexv);
+    });
+    </script>
+
+  </body>
+</html>
-- 
cgit v1.2.3


From f6b4561c0e34a9b68a57cf883f7161833962cb59 Mon Sep 17 00:00:00 2001
From: Rebecca Murphey <rmurphey@gmail.com>
Date: Thu, 7 Jun 2012 23:38:05 -0400
Subject: removing errant author info

---
 README.md             | 2 +-
 slidenotes/notes.html | 6 ------
 2 files changed, 1 insertion(+), 7 deletions(-)

diff --git a/README.md b/README.md
index f84ee66..4e88ccc 100644
--- a/README.md
+++ b/README.md
@@ -118,7 +118,7 @@ Once Node.js and the dependencies are installed, run the following command from
 
 By default, the slides will be served at [localhost:1947](http://localhost:1947).
 
-You can change the appearance of the speaker notes by editing the file at `slidenotes/notes.html`.
+You can change the appearance of the speaker notes by editing the file at `slidenotes/notes.html`.	
 
 ### Known Issues
 
diff --git a/slidenotes/notes.html b/slidenotes/notes.html
index 955dce1..ffcfdcb 100644
--- a/slidenotes/notes.html
+++ b/slidenotes/notes.html
@@ -5,12 +5,6 @@
 
     <title>Slide Notes</title>
 
-    <meta name="description" content="">
-    <meta name="author" content="Rebecca Murphey">
-
-    <meta name="apple-mobile-web-app-capable" content="yes" />
-    <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />
-
     <style>
       #notes {
         font-family: Helvetica;
-- 
cgit v1.2.3


From 0163ffcb435a8d5584a934afcf3eda0156c14fdd Mon Sep 17 00:00:00 2001
From: Rebecca Murphey <rmurphey@gmail.com>
Date: Sun, 17 Jun 2012 18:43:29 -0400
Subject: use current host/port

---
 js/slidenotes.js | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/js/slidenotes.js b/js/slidenotes.js
index 9a4f152..ef05062 100644
--- a/js/slidenotes.js
+++ b/js/slidenotes.js
@@ -3,8 +3,8 @@
   var qs = window.location.href.split('?');
   if (qs.length > 1 && qs[1].match('receiver')) { return; }
 
-  var socket = io.connect('http://localhost:1947');
-  
+  var socket = io.connect(window.location.origin);
+
   Reveal.addEventListener( 'slidechanged', function( event ) {
     var nextindexh;
     var nextindexv;
-- 
cgit v1.2.3


From 677ef9919be61249c2527086e093333b9f2ec03d Mon Sep 17 00:00:00 2001
From: Rebecca Murphey <rmurphey@gmail.com>
Date: Sun, 17 Jun 2012 18:43:54 -0400
Subject: broadcast socket id as part of slidedata

---
 js/slidenotes.js | 7 +++++--
 1 file changed, 5 insertions(+), 2 deletions(-)

diff --git a/js/slidenotes.js b/js/slidenotes.js
index ef05062..8a0865a 100644
--- a/js/slidenotes.js
+++ b/js/slidenotes.js
@@ -4,6 +4,8 @@
   if (qs.length > 1 && qs[1].match('receiver')) { return; }
 
   var socket = io.connect(window.location.origin);
+  var socketId = socket.socket.sessionid;
+  console.log('View slide notes at ' + window.location.origin + '/_notes/' + socketId);
 
   Reveal.addEventListener( 'slidechanged', function( event ) {
     var nextindexh;
@@ -24,9 +26,10 @@
       indexh : event.indexh,
       indexv : event.indexv,
       nextindexh : nextindexh,
-      nextindexv : nextindexv
+      nextindexv : nextindexv,
+      socketId : socketId
     };
 
     socket.emit('slidechanged', slideData);
   } );
-}());
\ No newline at end of file
+}());
-- 
cgit v1.2.3


From 6d1a78091a1fcc811f9b9990b4e4a0b4110dbc05 Mon Sep 17 00:00:00 2001
From: Rebecca Murphey <rmurphey@gmail.com>
Date: Sun, 17 Jun 2012 18:44:27 -0400
Subject: add mustache dependency

---
 package.json | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/package.json b/package.json
index 68514f4..b00aaa4 100644
--- a/package.json
+++ b/package.json
@@ -12,7 +12,8 @@
   },
   "dependencies": {
     "express" : "2.5.9",
-    "socket.io" : "0.9.6"
+    "socket.io" : "0.9.6",
+    "mustache" : "0.4.0"
   },
   "devDependencies": {}
 }
-- 
cgit v1.2.3


From 939da8834e5c3cc53ff80ebe894502f4e2d6a193 Mon Sep 17 00:00:00 2001
From: Rebecca Murphey <rmurphey@gmail.com>
Date: Sun, 17 Jun 2012 18:45:00 -0400
Subject: have notes page only listen to one socket

---
 slidenotes/index.js   | 13 ++++++++++---
 slidenotes/notes.html | 24 ++++++++++++++----------
 2 files changed, 24 insertions(+), 13 deletions(-)

diff --git a/slidenotes/index.js b/slidenotes/index.js
index fb6baf8..d27847e 100644
--- a/slidenotes/index.js
+++ b/slidenotes/index.js
@@ -2,6 +2,7 @@ var express   = require('express');
 var fs        = require('fs');
 var io        = require('socket.io');
 var _         = require('underscore');
+var Mustache  = require('mustache');
 
 var app       = express.createServer();
 var staticDir = express.static;
@@ -29,8 +30,14 @@ app.get("/", function(req, res) {
   fs.createReadStream(opts.baseDir + '/index.html').pipe(res);
 });
 
-app.get("/_notes", function(req, res) {
-  fs.createReadStream(opts.baseDir + 'slidenotes/notes.html').pipe(res);
+app.get("/_notes/:socketId", function(req, res) {
+
+  fs.readFile(opts.baseDir + 'slidenotes/notes.html', function(err, data) {
+    res.send(Mustache.to_html(data.toString(), {
+      socketId : req.params.socketId
+    }));
+  });
+  // fs.createReadStream(opts.baseDir + 'slidenotes/notes.html').pipe(res);
 });
 
 // Actually listen
@@ -38,4 +45,4 @@ app.listen(opts.port || null);
 
 console.log("Your slides are at http://localhost" + (opts.port ? (':' + opts.port) : ''));
 console.log("Your notes are at http://localhost" + (opts.port ? (':' + opts.port) : '') + '/_notes');
-console.log("Advance through your slides and your speaker notes will advance automatically");
\ No newline at end of file
+console.log("Advance through your slides and your speaker notes will advance automatically");
diff --git a/slidenotes/notes.html b/slidenotes/notes.html
index ffcfdcb..4b95210 100644
--- a/slidenotes/notes.html
+++ b/slidenotes/notes.html
@@ -18,16 +18,16 @@
         float: left;
       }
 
-      #slides { 
-        width: 1280px; 
-        height: 1024px; 
-        border: 1px solid black; 
+      #slides {
+        width: 1280px;
+        height: 1024px;
+        border: 1px solid black;
         -moz-transform: scale(0.5);
         -moz-transform-origin: 0 0;
         -o-transform: scale(0.5);
         -o-transform-origin: 0 0;
         -webkit-transform: scale(0.5);
-        -webkit-transform-origin: 0 0;      
+        -webkit-transform-origin: 0 0;
       }
 
       #wrap-next-slide {
@@ -37,16 +37,16 @@
         margin: 0 0 0 50px;
       }
 
-      #next-slide { 
-        width: 1280px; 
-        height: 1024px; 
-        border: 1px solid black; 
+      #next-slide {
+        width: 1280px;
+        height: 1024px;
+        border: 1px solid black;
         -moz-transform: scale(0.25);
         -moz-transform-origin: 0 0;
         -o-transform: scale(0.25);
         -o-transform-origin: 0 0;
         -webkit-transform: scale(0.25);
-        -webkit-transform-origin: 0 0;      
+        -webkit-transform-origin: 0 0;
       }
     </style>
   </head>
@@ -65,12 +65,16 @@
     <script src="socket.io/socket.io.js"></script>
 
     <script>
+    var socketId = '{{socketId}}';
     var socket = io.connect('http://localhost:1947');
     var notes = document.getElementById('notes');
     var slides = document.getElementById('slides');
     var nextSlide = document.getElementById('next-slide');
 
     socket.on('slidedata', function(data) {
+      // ignore data from sockets that aren't ours
+      if (data.socketId !== socketId) { return; }
+
       notes.innerHTML = data.notes;
       slides.contentWindow.Reveal.navigateTo(data.indexh, data.indexv);
       nextSlide.contentWindow.Reveal.navigateTo(data.nextindexh, data.nextindexv);
-- 
cgit v1.2.3


From 5fc7fc89f7bac7336fe44a711c706ca80d24e2c8 Mon Sep 17 00:00:00 2001
From: Rebecca Murphey <rmurphey@gmail.com>
Date: Sun, 17 Jun 2012 18:59:33 -0400
Subject: fix path to socket.io

---
 slidenotes/notes.html | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/slidenotes/notes.html b/slidenotes/notes.html
index 4b95210..5fc81ec 100644
--- a/slidenotes/notes.html
+++ b/slidenotes/notes.html
@@ -62,7 +62,7 @@
     </div>
     <div id="notes"></div>
 
-    <script src="socket.io/socket.io.js"></script>
+    <script src="/socket.io/socket.io.js"></script>
 
     <script>
     var socketId = '{{socketId}}';
-- 
cgit v1.2.3


From 8980f8accb5cd24e79d44caa3466011c31c44a38 Mon Sep 17 00:00:00 2001
From: Rebecca Murphey <rmurphey@gmail.com>
Date: Sun, 17 Jun 2012 18:59:43 -0400
Subject: fix socket id

---
 js/slidenotes.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/js/slidenotes.js b/js/slidenotes.js
index 8a0865a..4e0ebab 100644
--- a/js/slidenotes.js
+++ b/js/slidenotes.js
@@ -4,7 +4,7 @@
   if (qs.length > 1 && qs[1].match('receiver')) { return; }
 
   var socket = io.connect(window.location.origin);
-  var socketId = socket.socket.sessionid;
+  var socketId = Math.random().toString().slice(2);
   console.log('View slide notes at ' + window.location.origin + '/_notes/' + socketId);
 
   Reveal.addEventListener( 'slidechanged', function( event ) {
-- 
cgit v1.2.3


From 4ca99d426446508b63ad995ea029f4fc95c82952 Mon Sep 17 00:00:00 2001
From: Rebecca Murphey <rmurphey@gmail.com>
Date: Sun, 17 Jun 2012 20:57:29 -0400
Subject: connect to whatever server we're on

---
 slidenotes/notes.html | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/slidenotes/notes.html b/slidenotes/notes.html
index 5fc81ec..58c2516 100644
--- a/slidenotes/notes.html
+++ b/slidenotes/notes.html
@@ -66,7 +66,7 @@
 
     <script>
     var socketId = '{{socketId}}';
-    var socket = io.connect('http://localhost:1947');
+    var socket = io.connect(window.location.origin);
     var notes = document.getElementById('notes');
     var slides = document.getElementById('slides');
     var nextSlide = document.getElementById('next-slide');
-- 
cgit v1.2.3