tableau feature added to editing page; styling improved

resources/public/js/publishing.js

@@ -4,7 +4,8 @@ var $ = function(id) {
 var iosDetected = navigator.userAgent.match("(iPad|iPod|iPhone)");
 var timer = null;
 var timerDelay = iosDetected ? 800 : 400;
-var $note, $action, $preview, $plain_password, updatePreview;
+var $note, $action, $preview, $plain_password, 
+  updatePreview, $tableau;
 var backendTimer;
 
 function md2html(input) {
@@ -14,13 +15,15 @@ function md2html(input) {
 function saveDraft() {
   if ($action == "UPDATE") return;
   console.log("draft autosave...");
+  $tableau.innerHTML = "Draft autosaved."
   localStorage.setItem("draft", $note.value);
 }
 
 function onLoad() {
   $note = $("note");
   $action = $("action").value;
-  $preview = $("previewPane");
+  $preview = $("draft");
+  $tableau = $("tableau");
   $plain_password = $("plain-password");
   updatePreview = function() {
     clearTimeout(timer);
@@ -28,6 +31,7 @@ function onLoad() {
     var delay = Math.min(timerDelay, timerDelay * (content.length / 400));
     timer = setTimeout(function() {
       $preview.innerHTML = md2html(content);
+      $tableau.innerHTML = content.split(/\s+/).length + " words";
     }, delay);
   };
   if ($action == "UPDATE") updatePreview();