Basic presenter mode working

8 files changed, 408 insertions, 224 deletions

diff --git a/js/slide-controller.js b/js/slide-controller.js
new file mode 100644
index 0000000..e2f8bf2
--- /dev/null
+++ b/js/slide-controller.js
@@ -0,0 +1,54 @@
+function SlideController(slideDeck) {
+  this.deck_ = slideDeck;
+  this.win_ = null;
+
+  window.addEventListener('message', this.onMessage_.bind(this), false);
+
+  // Close popups if we reload the main window.
+  window.addEventListener('beforeunload', function(e) {
+    this.win_.close()
+  }.bind(this), false);
+
+  // Only open one new popup. The recursion popup opening!
+  if (!window.opener) {
+    this.win_ = window.open(location.href, 'mywindow');
+  }
+}
+
+SlideController.MOVE_LEFT = -1;
+SlideController.MOVE_RIGHT = 1;
+
+SlideController.prototype.onMessage_ = function(e) {
+  var data = e.data;
+
+  // It would be dope if FF implemented location.origin.
+  if (e.origin != location.protocol + '//' + location.host) {
+    alert('Someone tried to postMessage from an unknown origin');
+    return;
+  }
+
+  if (e.source.location.hostname != 'localhost') {
+    alert('Someone tried to postMessage from an unknown origin');
+    return;
+  }
+
+  if ('slideDirection' in data) {
+    if (data.slideDirection == SlideController.MOVE_LEFT) {
+      this.deck_.prevSlide();
+    } else {
+      this.deck_.nextSlide();
+    }
+  }
+};
+
+SlideController.prototype.sendMsg = function(msg) {
+  // // Send message to popup window.
+  // if (this.win_) {
+  //   this.win_.postMessage(msg, location.protocol + '//' + location.host);
+  // }
+  // Send message to main window.
+  if (window.opener) {
+    // It would be dope if FF implemented location.origin.
+    window.opener.postMessage(msg, location.protocol + '//' + location.host);
+  }
+};
diff --git a/js/slides.js b/js/slides.js
index 20bb1bd..0faf06b 100644
--- a/js/slides.js
+++ b/js/slides.js
@@ -13,6 +13,7 @@ function SlideDeck() {
   this.prevSlide_ = 0;
   this.slides = [];
   this.config_ = null;
+  this.controller_ = null;
 
   this.getCurrentSlideFromHash_();
 
@@ -52,6 +53,9 @@ SlideDeck.prototype.getCurrentSlideFromHash_ = function() {
  * @private
  */
 SlideDeck.prototype.onDomLoaded_ = function(e) {
+  // Fade in deck.
+  document.body.classList.add('loaded');
+
   this.slides_ = document.querySelectorAll('slide:not([hidden]):not(.backdrop)');
 
   // If we're on a smartphone device, load phone.css.
@@ -148,11 +152,11 @@ SlideDeck.prototype.onBodyKeyDown_ = function(e) {
       document.body.classList.toggle('highlight-code');
       break;
 
-    case 78: // N
+    case 80: // P
       // If this slide contains notes, toggle them.
-      if (this.slides_[this.curSlide_].querySelector('.note')) {
+      //if (this.slides_[this.curSlide_].querySelector('.note')) {
         document.body.classList.toggle('with-notes');
-      }
+      //}
       break;
 
     case 27: // ESC
@@ -283,6 +287,10 @@ SlideDeck.prototype.loadConfig_ = function(config) {
       }
     };
   }
+
+  if (!!('enableSpeakerNotes' in settings) && settings.enableSpeakerNotes) {
+    this.controller_ = new SlideController(this);
+  }
 };
 
 /**
@@ -335,10 +343,17 @@ SlideDeck.prototype.buildNextItem_ = function() {
  */
 SlideDeck.prototype.prevSlide = function(opt_dontPush) {
   if (this.curSlide_ > 0) {
-    // Toggle off speaker notes and/or highlighted code if they're showing.
-    var bodyClassList = document.body.classList;
-    bodyClassList.remove('with-notes');
-    bodyClassList.remove('highlight-code');
+    // Toggle off speaker notes and/or highlighted code if they're showing
+    // when we advanced. If we're the speaker notes popup, leave this put.
+    if (this.controller_ && !window.opener) {
+      var bodyClassList = document.body.classList;
+      bodyClassList.remove('with-notes');
+      bodyClassList.remove('highlight-code');
+    }
+
+    if (this.controller_) {
+      this.controller_.sendMsg({slideDirection: SlideController.MOVE_LEFT});
+    }
 
     this.prevSlide_ = this.curSlide_;
     this.curSlide_--;
@@ -352,15 +367,22 @@ SlideDeck.prototype.prevSlide = function(opt_dontPush) {
  */
 SlideDeck.prototype.nextSlide = function(opt_dontPush) {
 
+  if (this.controller_) {
+    this.controller_.sendMsg({slideDirection: SlideController.MOVE_RIGHT});
+  }
+
   if (this.buildNextItem_()) {
     return;
   }
 
   if (this.curSlide_ < this.slides_.length - 1) {
-    // Toggle off speaker notes and/or highlighted code if they're showing.
-    var bodyClassList = document.body.classList;
-    bodyClassList.remove('with-notes');
-    bodyClassList.remove('highlight-code');
+    // Toggle off speaker notes and/or highlighted code if they're showing
+    // when we advanced. If we're the speaker notes popup, leave this put.
+    if (this.controller_ && !window.opener) {
+      var bodyClassList = document.body.classList;
+      bodyClassList.remove('with-notes');
+      bodyClassList.remove('highlight-code');
+    }
 
     this.prevSlide_ = this.curSlide_;
     this.curSlide_++;
diff --git a/slide_config.js b/slide_config.js
index e8ff552..eab9ff8 100644
--- a/slide_config.js
+++ b/slide_config.js
@@ -4,11 +4,12 @@ var SLIDE_CONFIG = {
     title: 'Title Goes Here<br>Up To Two Lines',
     subtitle: 'Subtitle Goes Here',
     //theme: ['mytheme'],
-    hashtag: '#html5', //TODO
-    useBuilds: true,
-    usePrettify: true,
-    enableSideAreas: true,
-    enableTouch: true, // TODO: base this on media query instead.
+    //hashtag: '#html5', //TODO
+    useBuilds: true, // Default: true
+    usePrettify: true, // Default: true
+    enableSideAreas: true, // Default: true
+    enableTouch: true, // Default: true if device supports touch.
+    //enableSpeakerNotes: true, // Default: false
     analytics: 'UA-XXXXXXXX-1',
     favIcon: 'http://bleedinghtml5.appspot.com/images/chrome-logo-tiny2.png',
     onLoad: null, // TODO. function to call onload
diff --git a/template.html b/template.html
index 6bfb029..24dd7b8 100644
--- a/template.html
+++ b/template.html
@@ -13,11 +13,13 @@ URL: https://code.google.com/p/io-2012-slides
   <meta charset="utf-8">
   <meta http-equiv="X-UA-Compatible" content="chrome=1">
   <!--<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0">-->
+  <!--<meta name="viewport" content="width=device-width, initial-scale=1.0">-->
+  <!--This one seems to work all the time, but really small on ipad-->
   <!--<meta name="viewport" content="initial-scale=0.4">-->
   <link rel="stylesheet" media="all" href="theme/css/default.css">
   <link rel="stylesheet" media="only screen and (max-device-width: 480px)" href="theme/css/phone.css">
 </head>
-<body style="opacity: 0;">
+<body>
 
 <slides class="layout-widescreen">
 
@@ -64,7 +66,7 @@ URL: https://code.google.com/p/io-2012-slides
       <p>A list where items build:</p>
       <ul class="build">
         <li>Pressing 'h' will highlight code snippets</li>
-        <li>Pressing 'n' will toggle extra notes</li>
+        <li>Pressing 'p' will toggle presenter mode</li>
         <li>Pressing 'f' will toggle fullscreen viewing</li>
       </ul>
       <p>Another list, but items fade as they build:</p>
@@ -155,13 +157,23 @@ function helloWorld(world) {
 
   <slide>
     <aside class="note">
-      <section>Speaker notes go here!</section>
+      <section>
+        <ul>
+          <li>Point I wanted to make #1</li>
+          <li>Point I wanted to make #2</li>
+          <li>Point I wanted to make #3</li>
+          <li>Point I wanted to make #3</li>
+          <li>Point I wanted to make #3</li>
+          <