Move autosave message elements into the template

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

@@ -51,11 +51,6 @@
       }).insertAfter(textarea);
       textarea.css('display', 'none');
 
-      // Create a div for the autosave status message
-      var autoSaveMessage = document.createElement('div');
-      $(autoSaveMessage).addClass('div position-fixed bottom-0 left-0');
-      $('body').append(autoSaveMessage);
-
       var autoSaveTimer = null;
 
       // NOTE: This requires the page to have only one 'gollum-editor-body'.
@@ -68,18 +63,12 @@
       var savedText = localStorage.getItem(storageKey);
 
       if (savedText) {
-        var savedMsg = document.createElement('div');
-        var restoreButton = document.createElement('button');
-        $(restoreButton).addClass('btn btn-sm primary flash-action')
-          .text('Restore Text')
-          .click(function() {
+        $('#gollum-autorecover-button').click(function(e) {
             editor.getSession().setValue(savedText);
-            $(savedMsg).remove()
-          });
-        $(savedMsg).addClass('flash flash-full')
-          .text('Autosaved text is available. Click the button to restore it.')
-          .append(restoreButton);
-        $('body').prepend(savedMsg);
+            $('#gollum-autorecover-msg')[0].hidden = true;
+            e.preventDefault();
+        });
+        $('#gollum-autorecover-msg')[0].hidden = false;
       }
 
       editor.setTheme("ace/theme/tomorrow");
@@ -98,12 +87,12 @@
           clearTimeout(autoSaveTimer);
         }
 
-        $(autoSaveMessage).text('Saving...');
+        $('#gollum-saved-msg').text('Saving...');
 
         // Wait 2 seconds, then actualy save the text to local storage
         autoSaveTimer = setTimeout(function() {
           localStorage.setItem(storageKey, editor.getSession().getValue());
-          $(autoSaveMessage).text('Saved recovery text');
+          $('#gollum-saved-msg').text('Saved recovery text');
         }, 2000);
       });
 

lib/gollum/templates/editor.mustache

@@ -96,6 +96,10 @@
       </p>
       </div>
     </div>
+  </div>
+  <div id="gollum-autorecover-msg" class="flash flash-full" 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>