Show notes in the embedder shell. (In a new file.)

As discussed in paulrouget#101

shells/embedder+notes.html

@@ -6,6 +6,9 @@
 <div id="slides">
   <iframe allowfullscreen mozallowfullscreen webkitallowfullscreen></iframe>
 </div>
+<div id="notes">
+  <p id="content"></p>
+</div>
 <div id="controls">
   <button title="prev" id="back" onclick="Dz.back()">&#9664;</button>
   <button title="next" id="forward" onclick="Dz.forward()">&#9654;</button>
@@ -23,7 +26,7 @@
     height: 100%;
     width: 100%;
   }
-  #slides, #controls {
+  #slides, #controls, #notes {
     left: 0;
     position: absolute;
     right: 0;
@@ -36,9 +39,21 @@
     padding: 5px;
   }
   #slides {
-    bottom: 40px;
+    bottom: 206px;
     top: 0;
   }
+  #notes {
+    bottom: 40px;
+    height: 150px;
+
+    background: #EEE;
+    color: #444;
+    padding: 0 20px;
+    overflow: auto;
+    font: 25px sans-serif;
+    border: 8px solid #555;
+    border-style: solid none;
+  }
   iframe {
     border: none;
     background-color: white;
@@ -149,6 +164,7 @@
       argv.forEach(function(e, i, a) { a[i] = decodeURIComponent(e) });
       if (argv[0] === "CURSOR" && argc === 2) {
         var cursor = argv[1].split(".");
+        this.postMsg(this.view, "GET_NOTES");
         this.idx = ~~cursor[0];
         this.step = ~~cursor[1];
         $("#slideidx").value = this.idx;
@@ -159,6 +175,9 @@
         $("#slidecount").innerHTML = this.count = argv[2];
         document.title = argv[1];
       }
+      if (argv[0] === "NOTES" && argc === 2) {
+        $("#notes > #content").innerHTML = this.notes = argv[1];
+      }
     }
   }
 

template.html

@@ -24,7 +24,7 @@ <h3>An incremental list</h3>
       <li>Item 2
       <li>Item 3
     </ul>
-    <details>Some notes. They are only visible using onstage shell.</details>
+    <details>Some notes. They are only visible using onstage or embedder+notes shell.</details>
 </section>
 
 <section>