Merge pull request #1576 from mivok/feature/auto_save

Add auto save functionality

lib/gollum/public/gollum/javascript/editor/gollum.editor.js

@@ -17,6 +17,8 @@
     NoDefinitionsFor: []
   };
   var ActiveOptions = {};
+  var autoSaveTimer = null;
+  var storageKey = 'gollum_autorecover_' + window.location;
 
   function isRTL(s){           
     var ltrChars    = 'A-Za-z\u00C0-\u00D6\u00D8-\u00F6\u00F8-\u02B8\u0300-\u0590\u0800-\u1FFF'+'\u2C00-\uFB1C\uFDFE-\uFE6F\uFEFD-\uFFFF',
@@ -32,6 +34,27 @@
     window.ace_editor.renderer.updateFull();
   }
 
+  function autoSaveHandler() {
+    // Autosave
+    if (autoSaveTimer) {
+      // Reset the timer because we just changed the text
+      clearTimeout(autoSaveTimer);
+    }
+
+    $('#gollum-saved-msg').text('Saving...');
+
+    // Wait 2 seconds, then actualy save the text to local storage
+    autoSaveTimer = setTimeout(function() {
+      localStorage.setItem(storageKey, window.ace_editor.getSession().getValue());
+      // Save any subpage editor text that might exist
+      $('#gollum-editor-header, #gollum-editor-footer, #gollum-editor-sidebar').each(function(_, el) {
+        var spStorageKey = storageKey + el.id.replace('gollum-editor-', '_');
+        localStorage.setItem(spStorageKey, el.value);
+      });
+      $('#gollum-saved-msg').text('Saved recovery text');
+    }, 2000);
+  }
+
   /**
    *  $.GollumEditor
    *
@@ -55,6 +78,26 @@
       var editor = ace.edit(editDiv[0], {rtlText: true});
       window.ace_editor = editor;
 
+      // Check to see if we have any autosaved text and show a message to
+      // restore it if present.
+      var savedText = localStorage.getItem(storageKey);
+
+      if (savedText) {
+        $('#gollum-autorecover-button').click(function(e) {
+            editor.getSession().setValue(savedText);
+            // Restore subpage editor values too, if they exist
+            ['header', 'footer', 'sidebar'].forEach(function(i) {
+              var sbSavedText = localStorage.getItem(storageKey + '_' + i);
+              if (sbSavedText) {
+                $('#gollum-editor-' + i).val(sbSavedText);
+              }
+            });
+            $('#gollum-autorecover-msg')[0].hidden = true;
+            e.preventDefault();
+        });
+        $('#gollum-autorecover-msg')[0].hidden = false;
+      }
+
       editor.setTheme("ace/theme/tomorrow");
       editor.setKeyboardHandler();
       editor.renderer.setShowGutter(false);
@@ -64,8 +107,13 @@
 
       editor.getSession().on('change', function(){
         textarea.val(editor.getSession().getValue());
+        autoSaveHandler();
       });
 
+      // Autosave for the header, footer and sidebar
+      $('#gollum-editor-header, #gollum-editor-footer, #gollum-editor-sidebar')
+        .on('change keyup paste', autoSaveHandler);
+
       if (isRTL(editor.getSession().getLine(0))) {
         switchRtl(true);
       }
@@ -114,6 +162,16 @@
       editor.focus();
     });
 
+    // Remove any autosaved text when we hit save or cancel
+    $("#gollum-editor-submit, #gollum-editor-cancel").click(function() {
+      var storageKey = 'gollum_autorecover_' + window.location;
+      localStorage.removeItem(storageKey);
+      // Clear subpage editor values too, if they exist
+      ['header', 'footer', 'sidebar'].forEach(function(i) {
+        localStorage.removeItem(storageKey + '_' + i);
+      });
+    });
+
     debug('GollumEditor loading');
 
     if ( EditorHas.baseEditorMarkup() ) {

lib/gollum/templates/editor.mustache

@@ -96,6 +96,10 @@
       </p>
       </div>
     </div>
+  </div>
+  <div id="gollum-autorecover-msg" class="flash" hidden>
+      Autosaved text is available. Click the button to restore it.
+      <button id="gollum-autorecover-button" class="btn btn-sm primary flash-action">Restore Text</button>
   </div>
     <textarea id="gollum-editor-body" class="form-control"
      data-markup-lang="{{format}}" name="content" class="mousetrap">{{content}}</textarea>
@@ -147,3 +151,4 @@
   </fieldset>
 </form>
 </div>
+<div id="gollum-saved-msg" class="position-fixed bottom-0 left-0"></div>