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:
 *