autosave new posts in localstorage

3 files changed, 79 insertions, 1 deletions

diff --git a/public/editor/editor.js b/public/editor/editor.js
index 2c4972f..2d99674 100644
--- a/public/editor/editor.js
+++ b/public/editor/editor.js
@@ -1,5 +1,5 @@
 var editor = new MediumEditor('.editable', {
-  buttons: ['bold', 'italic', 'header1', 'header2', 'quote', 'unorderedlist', 'pre'],
+  buttons: ['bold', 'italic', 'anchor', 'header1', 'header2', 'quote', 'unorderedlist', 'pre'],
   paste: {
     // This example includes the default options for paste, if nothing is passed this is what it used
     forcePlainText: false,
@@ -30,3 +30,47 @@ $(function () {
     $('.placeholder').removeClass('placeholder');
   });
 });
+
+/* ************************************************ */
+/* autosave loop */
+var autosaveTimeout = false;
+function contentChanged() {
+  clearTimeout(autosaveTimeout);
+  $("#draft-status").text("Draft");
+  autosaveTimeout = setTimeout(doAutoSave, 1000);
+}
+function doAutoSave() {
+  autosaveTimeout = false;
+  var savedData = {
+    title: $("#post-name").val(),
+    body: editor.serialize().content.value
+  }
+  localforage.setItem('currentdraft', savedData).then(function(){
+    $("#draft-status").text("Saved");
+  });
+}
+$(function(){
+  // Restore draft if present
+  localforage.getItem('currentdraft', function(err,val){
+    if(val && val.body) {
+      $("#post-name").val(val.title);
+      $("#content").html(val.body);
+      $("#draft-status").text("Restored");
+    }
+  });
+});
+/* ************************************************ */
+
+
+// Not sure why this isn't working
+// editor.subscribe('editableInput', function(ev, editable) {
+//   console.log("stuff changed");  
+// });  
+
+// This one works okay tho, but misses changes from the image uploader
+editor.on(document.getElementById('content'), 'input', function(){
+  contentChanged();
+});
+$(function(){
+  $('#post-name').on('keyup', contentChanged);
+});
diff --git a/public/editor/quill-logo-36.png b/public/editor/quill-logo-36.png
new file mode 100644
index 0000000..90aebc4
--- /dev/null
+++ b/public/editor/quill-logo-36.png
diff --git a/public/editor/style.css b/public/editor/style.css
index bec46db..8b91825 100644
--- a/public/editor/style.css
+++ b/public/editor/style.css
@@ -22,6 +22,38 @@ h1, h2, h3, h4, h5, h6, th, td, caption { font-weight:normal; }
 
 img { border: 0; }
 
+/* ************************************** */
+/* Toolbar */
+
+.toolbar {
+  padding: 13px;
+  border-bottom: 1px #eee solid;
+  background-color: rgba(255,255,255,0.97);
+  position: fixed;
+  top: 0;
+  width: 100%;
+  z-index: 1000;
+}
+.toolbar-left {
+  float: left;
+}
+.toolbar-right {
+  float: right;
+}
+.toolbar-left .item {
+  margin-right: 8px;
+  display: inline-block;
+}
+#draft-status {
+  font-size: 18px;
+  color: #aaa;
+}
+.toolbar .clear {
+  clear: both;
+}
+
+
+/* ************************************** */
 /* Editor CSS */
 
 body {
@@ -39,6 +71,8 @@ body, input {
 .container {
   width: 960px;
   margin: 0 auto;
+  margin-top: 63px;
+  z-index: 0;
 }
 
 #post-name {