Support speaker notes. Write slides as Jade.

app.js

@@ -7,30 +7,33 @@ var io = require('socket.io').listen(app);
 app.use(express.static(__dirname + '/public'));
 
 app.get('/', function(req, res){
-  res.render('slides.ejs');
+  res.render('slides.jade');
 });
 
 app.get('/manage', function(req, res){
-  res.render('manage.ejs');
+  res.render('manage.jade');
 });
 
 
 
 var lastSlideId = 1;
 
-var slides = io.of("/slides");
+var slidesSockets = io.of("/slides");
+var manageSockets = io.of("/manage");
 
-io.of("/manage").on("connection", function(manageSocket) {
-  manageSocket.on("changeto", function(slideId) {
+manageSockets.on("connection", function(socket) {
+
+  socket.on("changeto", function(slideId) {
     lastSlideId = slideId;
-    slides.emit("changeto", slideId);
+    slidesSockets.emit("changeto", slideId);
   });
+
 });
 
 
 
-slides.on("connection", function() {
-  slides.emit("startfrom", lastSlideId);
+slidesSockets.on("connection", function(socket) {
+  socket.emit("startfrom", lastSlideId);
 });
 
 

package.json

@@ -9,9 +9,8 @@
         }
     , "bin": { "geekslides": "./bin/geekslides" }
     , "dependencies": {
-        "coffee-script": ""
+        "jade": ""
         , "express": ""
-        , "ejs": ""
         , "socket.io": ""
     }
 }

public/css/master.css

@@ -10,6 +10,9 @@
 }
 
 
+.slide .speaker {
+    display: none;
+}
 
 #manage {
     text-align: center;

public/js/client.js

@@ -1,6 +1,16 @@
 
 var App = Spine.Controller.create({
 
+  keys: {
+    // Back arrow
+    "37": function() {
+      this.navigateToSlide(this.slideId - 1);
+    },
+    // Forward arrow
+    "39": function() {
+      this.navigateToSlide(this.slideId + 1);
+    }
+  },
 
   init: function(){
     this.routes({
@@ -9,28 +19,40 @@ var App = Spine.Controller.create({
       }
     });
 
-
-    this.keys = {
-      // Back arrow
-      "37": function() {
-        this.navigateToSlide(this.slideId - 1);
-      },
-      // Forward arrow
-      "39": function() {
-        this.navigateToSlide(this.slideId + 1);
-      }
-    };
-
     $(window).keydown(this.proxy(function(e) {
       var action = this.keys[e.which];
       if (action) {
         action.call(this);
       }
     }));
 
+    this._bindSocket();
 
   },
 
+  _bindSocket: function() {
+    this.socket.on('changeto', this.proxy(function(slideId) {
+      this.navigateToSlide(slideId);
+    }));
+
+    // Handle initial slide separately. Jump to current slide only if 
+    // user did not request slide by url.
+    this.socket.on('startfrom', this.proxy(function(slideId) {
+      if (!window.location.hash) {
+        this.navigateToSlide(slideId);
+      }
+    }));
+
+    this.socket.on("disconnect", function() {
+       $("body").text("Disconnected!");
+       $("body").css("color", "red").css("font-size", "4em");
+       setTimeout(function() {
+        window.location.reload();
+       }, 2000);
+
+     });
+
+  },
 
 
   _activateSlide: function(id) {
@@ -59,31 +81,15 @@ var App = Spine.Controller.create({
 
 $(document).ready(function(){
 
+  var connection = io.connect();
 
   window.app = App.init({
-    el: $(".slide")
+    el: $(".slide"),
+    socket: connection.socket.of("/slides")
   });
 
   Spine.Route.setup();
 
-  var connection = io.connect();
-  var slides = connection.socket.of("/slides");
-
-  slides.on('changeto', function (slideId) {
-    console.log("socket asks to change to", slideId);
-    app.navigateToSlide(slideId);
-  });
-
-
-  // Handle initial slide separately. Jump to current slide only if 
-  // user did not request slide by url.
-  slides.on('startfrom', function (slideId) {
-    if (!window.location.hash) {
-      app.navigateToSlide(slideId);
-    }
-  });
-
-
 
 });
 

public/js/manage.js

@@ -1,33 +1,74 @@
 
+var NAV_EVENT;
 
-$(document).ready(function(){
+if ('ontouchstart' in document.documentElement) {
+  NAV_EVENT = 'touchstart';
+}
+else {
+  NAV_EVENT = 'click';
+}
 
-  var current = 1;
-  var event;
-  var title = $("#current");
+var ManageApp = Spine.Controller.create({
+
+  elements: {
+    "#current": "title",
+    "#slide-title": "slideTitle",
+    "#max": "max",
+    "#speaker-note": "speakerNote"
+  },
+
+  init: function() {
+    this.current = 1;
+    this.max.text(this.slides.size());
+    this.$("#next").bind(NAV_EVENT, this.proxy(this.next));
+    this.$("#previous").bind(NAV_EVENT, this.proxy(this.previous));
+    this.update();
+  },
+
+  next: function() {
+      if (this.current < this.slides.size()){
+        this.current++;
+        this.update();
+      }
+      return false;
+  },
+
+  previous: function() {
+      if (this.current > 1) {
+        this.current--;
+        this.update();
+      }
+      return false;
+  },
+
+  update: function() {
+      this.title.text(this.current);
+
+      var current = $(this.slides.get(this.current-1));
+      this.slideTitle.text(current.find("h1").text());
+      this.speakerNote.html(current.find(".speaker").html());
+
+      this.socket.emit("changeto", this.current);
 
-  if ('ontouchstart' in document.documentElement) {
-    event = 'touchstart';
-  }
-  else {
-    event = 'click';
   }
 
-  var socket = io.connect();
-  var manage = socket.socket.of("/manage");
 
-  $("#next").bind(event, function () {
-    current++;
-    title.text(current);
-    manage.emit("changeto", current);
-    return false;
-  });
+});
+
+
+
+
+$(document).ready(function(){
+
+  var connection = io.connect();
 
-  $("#previous").bind(event, function () {
-    current--;
-    title.text(current);
-    manage.emit("changeto", current);
-    return false;
+  $.get("/", function(data) {
+    var slides = $(".slide", data);
+    window.manageapp = ManageApp.init({
+      el: $("#manage"),
+      socket: connection.socket.of("/manage"),
+      slides: slides
+    });
   });
 
 

views/layout.jade

@@ -0,0 +1,18 @@
+html
+  head
+    title Node.js talk - Geekslides
+    meta(http-equiv="content-type", content="text/html; charset=utf-8")
+    meta(content='True', name='HandheldFriendly')
+    meta(content='width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;', name='viewport')
+    meta(name="viewport", content="width=device-width")
+
+    link(rel="stylesheet", href="/css/master.css", type="text/css", media="screen", charset="utf-8")
+    script(src="/js/jquery.js", type="text/javascript", charset="utf-8")
+    script(src="/socket.io/socket.io.js", type="text/javascript", charset="utf-8")
+    script(src="/js/spine.js", type="text/javascript", charset="utf-8")
+    script(src="/js/spine.route.js", type="text/javascript", charset="utf-8")
+
+  body
+    div#main!= body
+
+

views/manage.jade

@@ -0,0 +1,18 @@
+script(src="/js/manage.js", type="text/javascript", charset="utf-8")
+
+
+
+#manage
+  h1
+    span#current 0
+    /
+    span#max 0
+
+  button#previous <-
+  button#next ->
+
+  h2#slide-title
+  div#speaker-note
+
+
+

views/slides.ejs

@@ -2,12 +2,13 @@
 
 <div class="slide" >
 
-  <h1 >Node.js - Geek Collision v0.4.1</h1>
+  <h1 >Node.js talk @ Geek Collision v0.4.1</h1>
 
   <ul>
-    <li>Foo bar</li>
-    <li>Foo bar 2</li>
-
+    <li><a href="http://esa-matti.suuronen.org">Esa-Matti Suuronen</a></li>
+    <li>Email: esa-matti ät suuronen dot org</li>
+    <li>Twitter: <a href="http://twitter.com/EsaMatti">EsaMatti</a></li>
+    <li>IRC: Epeli @ IRCnet/Freenode</li>
   </ul>
 
 </div>

views/slides.jade

@@ -0,0 +1,32 @@
+script(src="/js/client.js", type="text/javascript", charset="utf-8")
+
+
+.slide
+  h1 Node.js talk @ Geek Collision v0.4.1
+  ul
+    li
+      b Who:
+      a(href="http://esa-matti.suuronen.org") Esa-Matti Suuronen
+    li 
+      b Email: 
+      span esa-matti ät suuronen.org
+    li
+      b Twitter: 
+      a(href="http://twitter.com/EsaMatti") EsaMatti
+    li
+      b IRC: 
+      span Epeli @ IRCnet/Freenode
+
+  .speaker Speaker notes
+
+.slide
+  h1 hello 2
+
+  .speaker Speaker nnotes e2
+
+.slide 
+  h1 hello 3
+
+.slide
+  h1 hello 4
+