From 1e81c428180e9525edb2b1ccd0f6b129e27d0ce7 Mon Sep 17 00:00:00 2001 From: Mark Harrison Date: Thu, 4 Jun 2020 21:37:55 -0400 Subject: [PATCH 1/4] Add auto save functionality Fixes #527 This adds auto saving to gollum using local storage. --- .../gollum/javascript/editor/gollum.editor.js | 47 +++++++++++++++++++ 1 file changed, 47 insertions(+) diff --git a/lib/gollum/public/gollum/javascript/editor/gollum.editor.js b/lib/gollum/public/gollum/javascript/editor/gollum.editor.js index 41ce7dec..d96d4ce4 100755 --- a/lib/gollum/public/gollum/javascript/editor/gollum.editor.js +++ b/lib/gollum/public/gollum/javascript/editor/gollum.editor.js @@ -51,10 +51,37 @@ }).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'. 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 storageKey = 'gollum_autorecover_' + window.location; + 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() { + 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); + } + editor.setTheme("ace/theme/tomorrow"); editor.setKeyboardHandler(); editor.renderer.setShowGutter(false); @@ -64,6 +91,20 @@ editor.getSession().on('change', function(){ textarea.val(editor.getSession().getValue()); + + // Autosave + if (autoSaveTimer) { + // Reset the timer because we just changed the text + clearTimeout(autoSaveTimer); + } + + $(autoSaveMessage).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'); + }, 2000); }); if (isRTL(editor.getSession().getLine(0))) { @@ -114,6 +155,12 @@ 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); + }); + debug('GollumEditor loading'); if ( EditorHas.baseEditorMarkup() ) { From 18de3272e3d1b72645c4cb479ad4e55ff9629dd5 Mon Sep 17 00:00:00 2001 From: Mark Harrison Date: Fri, 5 Jun 2020 21:34:07 -0400 Subject: [PATCH 2/4] Move autosave message elements into the template --- .../gollum/javascript/editor/gollum.editor.js | 25 ++++++------------- lib/gollum/templates/editor.mustache | 5 ++++ 2 files changed, 12 insertions(+), 18 deletions(-) diff --git a/lib/gollum/public/gollum/javascript/editor/gollum.editor.js b/lib/gollum/public/gollum/javascript/editor/gollum.editor.js index d96d4ce4..c68fc41b 100755 --- a/lib/gollum/public/gollum/javascript/editor/gollum.editor.js +++ b/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); }); diff --git a/lib/gollum/templates/editor.mustache b/lib/gollum/templates/editor.mustache index 68453906..398f393c 100644 --- a/lib/gollum/templates/editor.mustache +++ b/lib/gollum/templates/editor.mustache @@ -96,6 +96,10 @@

+ + @@ -147,3 +151,4 @@ +
From 23110d5f052e3832bfbfe5619448e46a98b8875f Mon Sep 17 00:00:00 2001 From: Mark Harrison Date: Fri, 5 Jun 2020 22:51:14 -0400 Subject: [PATCH 3/4] Add autosave/restore for subpages too --- .../gollum/javascript/editor/gollum.editor.js | 56 +++++++++++++------ 1 file changed, 39 insertions(+), 17 deletions(-) diff --git a/lib/gollum/public/gollum/javascript/editor/gollum.editor.js b/lib/gollum/public/gollum/javascript/editor/gollum.editor.js index c68fc41b..3ec550a5 100755 --- a/lib/gollum/public/gollum/javascript/editor/gollum.editor.js +++ b/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 * @@ -51,20 +74,24 @@ }).insertAfter(textarea); textarea.css('display', 'none'); - var autoSaveTimer = null; - // NOTE: This requires the page to have only one 'gollum-editor-body'. 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 storageKey = 'gollum_autorecover_' + window.location; 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(); }); @@ -80,22 +107,13 @@ editor.getSession().on('change', function(){ textarea.val(editor.getSession().getValue()); - - // 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, editor.getSession().getValue()); - $('#gollum-saved-msg').text('Saved recovery text'); - }, 2000); + 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); } @@ -148,6 +166,10 @@ $("#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'); From 2eb5a7e4b8432fa9afe5a2c174cc142ae8879fd7 Mon Sep 17 00:00:00 2001 From: Mark Harrison Date: Fri, 5 Jun 2020 22:59:20 -0400 Subject: [PATCH 4/4] Remove flash-full from the notification class list It doesn't look right with the banner in the new position. --- lib/gollum/templates/editor.mustache | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/lib/gollum/templates/editor.mustache b/lib/gollum/templates/editor.mustache index 398f393c..79f71dbc 100644 --- a/lib/gollum/templates/editor.mustache +++ b/lib/gollum/templates/editor.mustache @@ -97,7 +97,7 @@ -