From: Aleksander Łukasz <aleksander.lukasz@nowoczesnapolska.org.pl>
Date: Fri, 28 Feb 2014 13:45:50 +0000 (+0100)
Subject: Saving and restoring local draft of a document
X-Git-Url: https://git.mdrn.pl/fnpeditor.git/commitdiff_plain/49752f4017dbd3a15b36634541010a029a73a744?hp=432da106a4167b35113341fcb7d275ed53671480

Saving and restoring local draft of a document
---

diff --git a/src/editor/modules/data/data.js b/src/editor/modules/data/data.js
index db17955..84f0af8 100644
--- a/src/editor/modules/data/data.js
+++ b/src/editor/modules/data/data.js
@@ -7,7 +7,7 @@ define([
 ], function($, Dialog, wlxml, listExtension, logging) {
 
 'use strict';
-/* global gettext, alert */
+/* global gettext, alert, window */
 
 var logger = logging.getLogger('editor.modules.data'),
     stubDocument = '<section><div>' + gettext('This is an empty document.') + '</div></section>';
@@ -18,23 +18,51 @@ return function(sandbox) {
     var document_id = sandbox.getBootstrappedData().document_id;
     var document_version = sandbox.getBootstrappedData().version;
     var history = sandbox.getBootstrappedData().history;
+    var documentDirty = false;
+    var draftDirty = false;
 
-    var wlxmlDocument;
-    try {
-        wlxmlDocument = wlxml.WLXMLDocumentFromXML(sandbox.getBootstrappedData().document);
-    } catch(e) {
-        logger.exception(e);
-        alert(gettext('This document contains errors and can\'t be loaded. :(')); // TODO
-        wlxmlDocument = wlxml.WLXMLDocumentFromXML(stubDocument);
-    }
+    var wlxmlDocument, text;
 
-    wlxmlDocument.registerExtension(listExtension);
-    sandbox.getPlugins().forEach(function(plugin) {
-        if(plugin.documentExtension) {
-            wlxmlDocument.registerExtension(plugin.documentExtension);
+    var loadDocument = function(text) {
+        logger.debug('loading document');
+        try {
+            wlxmlDocument = wlxml.WLXMLDocumentFromXML(text);
+        } catch(e) {
+            logger.exception(e);
+            alert(gettext('This document contains errors and can\'t be loaded. :(')); // TODO
+            wlxmlDocument = wlxml.WLXMLDocumentFromXML(stubDocument);
         }
-    });
-     
+
+        wlxmlDocument.registerExtension(listExtension);
+        sandbox.getPlugins().forEach(function(plugin) {
+            if(plugin.documentExtension) {
+                wlxmlDocument.registerExtension(plugin.documentExtension);
+            }
+        });
+        
+        var modificationFlag = true;
+        wlxmlDocument.on('change', function() {
+            documentDirty = true;
+            draftDirty = true;
+            modificationFlag = true;
+        });
+        if(window.localStorage) {
+            window.setInterval(function() {
+                if(modificationFlag) {
+                    modificationFlag = false;
+                    return;
+                }
+                if(wlxmlDocument && documentDirty && draftDirty) {
+                    logger.debug('Saving draft to local storage.');
+                    sandbox.publish('savingStarted', 'local');
+                    window.localStorage.setItem(getLocalStorageKey(), wlxmlDocument.toXML());
+                    sandbox.publish('savingEnded', 'success', 'local');
+                    draftDirty = false;
+                }
+            }, sandbox.getConfig().autoSaveInterval || 2500);
+        }
+        sandbox.publish('ready');
+    };
     
     function readCookie(name) {
         /* global escape, unescape, document */
@@ -71,10 +99,44 @@ return function(sandbox) {
             },
         });
     };
-    
+
+    var getLocalStorageKey = function() {
+        return 'draft-id:' + document_id + '-ver:' + document_version;
+    };
+
+   
     return {
         start: function() {
-            sandbox.publish('ready');
+
+            if(window.localStorage) {
+                text = window.localStorage.getItem(getLocalStorageKey());
+                if(text) {
+                    logger.debug('Local draft exists');
+                    var dialog = Dialog.create({
+                        title: gettext('Local draft of a document exists'),
+                        text: gettext('Unsaved local draft of this version of the document exists in your browser. Do you want to load it instead?'),
+                        executeButtonText: gettext('Yes, restore local draft'),
+                        cancelButtonText: gettext('No, use version loaded from the server')
+                    });
+                    dialog.on('cancel', function() {
+                        logger.debug('Bootstrapped version chosen');
+                        text = sandbox.getBootstrappedData().document;
+                        
+                    });
+                    dialog.on('execute', function(event) {
+                        logger.debug('Local draft chosen');
+                        event.success();
+                    });
+                    dialog.show();
+                    dialog.on('close', function() {
+                        loadDocument(text);
+                    });
+                } else {
+                    loadDocument(sandbox.getBootstrappedData().document);
+                }
+            } else {
+                loadDocument(sandbox.getBootstrappedData().document);
+            }
         },
         getDocument: function() {
             return wlxmlDocument;
@@ -90,11 +152,11 @@ return function(sandbox) {
                 dialog = Dialog.create({
                     fields: documentSaveForm.fields,
                     title: gettext('Save Document'),
-                    submitButtonText: gettext('Save')
+                    executeButtonText: gettext('Save')
                 });
             
-            dialog.on('save', function(event) {
-                sandbox.publish('savingStarted');
+            dialog.on('execute', function(event) {
+                sandbox.publish('savingStarted', 'remote');
 
                 var formData = event.formData;
                 formData[documentSaveForm.content_field_name] = wlxmlDocument.toXML();
@@ -110,11 +172,11 @@ return function(sandbox) {
                     data: formData,
                     success: function(data) {
                         event.success();
-                        sandbox.publish('savingEnded', 'success', data.version);
+                        sandbox.publish('savingEnded', 'success', 'remote', data.version);
                         document_version = data.version;
                         reloadHistory();
                     },
-                    error: function() {event.error(); sandbox.publish('savingEnded', 'error');}
+                    error: function() {event.error(); sandbox.publish('savingEnded', 'error', 'remote');}
                 });
             });
             dialog.on('cancel', function() {
@@ -146,10 +208,10 @@ return function(sandbox) {
                 dialog = Dialog.create({
                     fields: documentRestoreForm.fields,
                     title: gettext('Restore Version'),
-                    submitButtonText: gettext('Restore')
+                    executeButtonText: gettext('Restore')
                 });
 
-            dialog.on('save', function(event) {
+            dialog.on('execute', function(event) {
                 var formData = event.formData;
                 formData[documentRestoreForm.version_field_name] = version;
                 sandbox.publish('restoringStarted', {version: version});
@@ -165,6 +227,7 @@ return function(sandbox) {
                         document_version = data.version;
                         reloadHistory();
                         wlxmlDocument.loadXML(data.document);
+                        documentDirty = false;
                         sandbox.publish('documentReverted', data.version);
                         event.success();
                     },
diff --git a/src/editor/modules/data/dialog.html b/src/editor/modules/data/dialog.html
index 9ac7888..80c9fb2 100644
--- a/src/editor/modules/data/dialog.html
+++ b/src/editor/modules/data/dialog.html
@@ -6,7 +6,7 @@
     <div class="modal-body">
     </div>
     <div class="modal-footer">
-        <a href="#" class="btn btn-info btn-mini save-btn"><%= submitButtonText %></a>
-        <a href="#" class="btn btn-danger btn-mini cancel-btn"><%= gettext('Cancel') %></a>
+        <a href="#" class="btn btn-info btn-mini execute-btn"><%= executeButtonText %></a>
+        <a href="#" class="btn btn-danger btn-mini cancel-btn"><%= cancelButtonText %></a>
     </div>
 </div>
\ No newline at end of file
diff --git a/src/editor/modules/data/dialog.js b/src/editor/modules/data/dialog.js
index a2c56e2..0d4bbd4 100644
--- a/src/editor/modules/data/dialog.js
+++ b/src/editor/modules/data/dialog.js
@@ -1,5 +1,6 @@
 define(function(require) {
 
+    /* globals gettext */
     'use strict';
 
     var _ = require('libs/underscore'),
@@ -16,8 +17,8 @@ define(function(require) {
     var DialogView = Backbone.View.extend({
         template: _.template(dialogTemplate),
         events: {
-            'click .save-btn': 'onSave',
-            'click .cancel-btn': 'close',
+            'click .execute-btn': 'onExecute',
+            'click .cancel-btn': 'onCancel',
             'click .close': 'close'
         },
         initialize: function() {
@@ -25,10 +26,13 @@ define(function(require) {
             this.actionsDisabled = false;
         },
         show: function() {
-            this.setElement(this.template(this.options));
+            this.setElement(this.template(_.extend({
+                executeButtonText: gettext('Submit'),
+                cancelButtonText: gettext('Cancel')
+            }, this.options)));
 
             var body = this.$('.modal-body');
-            this.options.fields.forEach(function(field) {
+            (this.options.fields || []).forEach(function(field) {
                 var template = fieldTemplates[field.type];
                 if(!template) {
                     throw new Error('Field type {type} not recognized.'.replace('{type}', field.type));
@@ -38,26 +42,34 @@ define(function(require) {
                 );
             });
 
+            if(this.options.text) {
+                body.append('<p>' + this.options.text + '</p>');
+            }
+
             this.$el.modal({backdrop: 'static'});
             this.$el.modal('show');
             this.$('textarea').focus();
         },
-        onSave: function(e) {
+        onExecute: function(e) {
             e.preventDefault();
             var view = this,
                 formData = {};
 
-            this.options.fields.forEach(function(field) {
+            (this.options.fields || []).forEach(function(field) {
                 var widget = view.$('[name=' + field.name +']');
                 formData[field.name] = widget.val();
             });
 
-            this.trigger('save', {
+            this.trigger('execute', {
                 formData: formData,
                 success: function() { view.actionsDisabled = false; view.close(); },
                 error: function() { view.actionsDisabled = false; view.close(); },
             });
         },
+        onCancel: function() {
+            this.trigger('cancel');
+            this.close();
+        },
         close: function(e) {
             if(e) {
                 e.preventDefault();
@@ -66,6 +78,7 @@ define(function(require) {
                 this.$el.modal('hide');
                 this.$el.remove();
             }
+            this.trigger('close');
         },
         toggleButtons: function(toggle) {
             this.$('.btn, button').toggleClass('disabled', !toggle);
diff --git a/src/editor/modules/rng/rng.js b/src/editor/modules/rng/rng.js
index 665d3a9..801473b 100644
--- a/src/editor/modules/rng/rng.js
+++ b/src/editor/modules/rng/rng.js
@@ -99,15 +99,23 @@ return function(sandbox) {
                 documentIsDirty = true;
             });
         },
-        savingStarted: function() {
+        savingStarted: function(what) {
+            var msg = {
+                remote: gettext('Saving document'),
+                local: gettext('Saving local copy')
+            };
             sandbox.getModule('mainBar').setCommandEnabled('save', false);
-            sandbox.getModule('indicator').showMessage(gettext('Saving...'));
+            sandbox.getModule('indicator').showMessage(msg[what] + '...');
         },
-        savingEnded: function(status, current_version) {
+        savingEnded: function(status, what, current_version) {
             void(status);
+            var msg = {
+                remote: gettext('Document saved'),
+                local: gettext('Local copy saved')
+            };
             documentIsDirty = false;
             sandbox.getModule('mainBar').setCommandEnabled('save', true);
-            sandbox.getModule('indicator').clearMessage({message:'Dokument zapisany'});
+            sandbox.getModule('indicator').clearMessage({message: msg[what]});
             sandbox.getModule('mainBar').setVersion(current_version);
         },
         restoringStarted: function(event) {