autosave new posts in localstorage

10 years ago · 3dc97d7478
5 changed files with 92 additions and 2 deletions
--- 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);
+});
--- a/public/editor/quill-logo-36.png
+++ b/public/editor/quill-logo-36.png
--- 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 {
--- a/views/editor.php
+++ b/views/editor.php
@ -41,9 +41,20 @@
  </head>
 <body>

+<div class="toolbar">
+  <div class="toolbar-left">
+    <span class="item"><a href="/"><img src="/editor/quill-logo-36.png" width="36" height="31"></a></span>
+    <span class="item text"><span id="draft-status">Draft</span></span>
+  </div>
+  <div class="toolbar-right">
+
+  </div>
+  <div class="clear"></div>
+</div>
+
 <div class="container">
  <input id="post-name" type="text" value="" placeholder="Title">
-  <div id="content" class="editable"><p class="placeholder">Tell your story...</p></div>
+  <div id="content" class="editable"><p class="placeholder">Write something nice...</p></div>
 </div>

 <script src="/editor/editor.js"></script>
--- a/views/partials/appcache.php
+++ b/views/partials/appcache.php
@ -17,6 +17,7 @@ CACHE MANIFEST
 /editor/medium-editor/js/medium-editor.min.js
 /editor/medium-editor/js/medium-editor-insert-plugin.min.js
 /editor/localforage/localforage.js
+/editor/quill-logo-36.png

 NETWORK:
 *