Fauxton: Before unload event

Build custom beforeunload event for backbone route,
also add in check on editor to warn the user if they
have unsaved changes in their editor.

6 files changed, 71 insertions, 7 deletions

diff --git a/src/fauxton/app/api.js b/src/fauxton/app/api.js
index a71c5f88c..751cdd2b3 100644
--- a/src/fauxton/app/api.js
+++ b/src/fauxton/app/api.js
@@ -61,6 +61,14 @@ function(app, Fauxton) {
     app.router.navigate(url,options);
   };
 
+  FauxtonAPI.beforeUnload = function () {
+    app.router.beforeUnload.apply(app.router, arguments);
+  };
+
+  FauxtonAPI.removeBeforeUnload = function () {
+    app.router.removeBeforeUnload.apply(app.router, arguments);
+  };
+
   FauxtonAPI.addHeaderLink = function(link) {
     app.masterLayout.navBar.addLink(link);
   };
diff --git a/src/fauxton/app/main.js b/src/fauxton/app/main.js
index 2182f2c5a..6fe999102 100644
--- a/src/fauxton/app/main.js
+++ b/src/fauxton/app/main.js
@@ -40,10 +40,8 @@ function(app, Router) {
       // refresh.
       evt.preventDefault();
 
-      // `Backbone.history.navigate` is sufficient for all Routers and will
-      // trigger the correct events. The Router's internal `navigate` method
-      // calls this anyways.  The fragment is sliced from the root.
-      Backbone.history.navigate(href.attr, true);
+      //User app navigate so that navigate goes through a central place
+      app.router.navigate(href.attr, true);
     }
 
   });
diff --git a/src/fauxton/app/modules/documents/views.js b/src/fauxton/app/modules/documents/views.js
index af3c4c3f0..64e304cdf 100644
--- a/src/fauxton/app/modules/documents/views.js
+++ b/src/fauxton/app/modules/documents/views.js
@@ -715,7 +715,7 @@ function(app, FauxtonAPI, Components, Documents, Databases, pouchdb, resizeColum
       _.bindAll(this);
     },
     goback: function(){
-      window.history.back();
+      FauxtonAPI.navigate(this.database.url("index") + "?limit=100");
     },
     destroy: function(event) {
       if (this.model.isNewDoc()) {
@@ -814,6 +814,7 @@ function(app, FauxtonAPI, Components, Documents, Databases, pouchdb, resizeColum
     saveDoc: function(event) {
       var json, notification, 
       that = this,
+      editor = this.editor,
       validDoc = this.getDocFromEditor();
 
       if (validDoc) {
@@ -822,6 +823,7 @@ function(app, FauxtonAPI, Components, Documents, Databases, pouchdb, resizeColum
         notification = FauxtonAPI.addNotification({msg: "Saving document."});
 
         this.model.save().then(function () {
+          editor.editSaved();
           FauxtonAPI.navigate('/database/' + that.database.id + '/' + that.model.id);
         }).fail(function(xhr) {
           var responseText = JSON.parse(xhr.responseText).reason;
@@ -906,6 +908,10 @@ function(app, FauxtonAPI, Components, Documents, Databases, pouchdb, resizeColum
       });
       this.editor.render();
       this.model.on("sync", this.updateValues, this);
+    },
+
+    cleanup: function () {
+      this.editor.remove();
     }
   });
 
@@ -1560,6 +1566,11 @@ function(app, FauxtonAPI, Components, Documents, Databases, pouchdb, resizeColum
         //this.reduceEditor.setValue(this.langTemplates[this.defaultLang].reduce);
       } 
 
+    },
+
+    cleanup: function () {
+      this.mapEditor && this.mapEditor.remove();
+      this.reduceEditor && this.reduceEditor.remove();
     }
   });
 
diff --git a/src/fauxton/app/modules/fauxton/components.js b/src/fauxton/app/modules/fauxton/components.js
index bcc9226e8..5255626ba 100644
--- a/src/fauxton/app/modules/fauxton/components.js
+++ b/src/fauxton/app/modules/fauxton/components.js
@@ -207,6 +207,7 @@ function(app, FauxtonAPI, ace) {
       this.commands = options.commands;
       this.theme = options.theme || 'crimson_editor';
       this.couchJSHINT = options.couchJSHINT;
+      this.edited = false;
     },
 
     afterRender: function () {
@@ -224,10 +225,27 @@ function(app, FauxtonAPI, ace) {
       }
 
       var that = this;
-
       this.editor.getSession().on('change', function () {
         that.setHeightToLineCount();
+        that.edited = true;
+      });
+
+      $(window).on('beforeunload.editor', function() {
+        if (that.edited) {
+          return 'Your changes have not been saved. Click cancel to return to the document.';
+        }
       });
+
+      FauxtonAPI.beforeUnload("editor", function (deferred) {
+        if (that.edited) {
+          return 'Your changes have not been saved. Click cancel to return to the document.';
+        }
+      });
+    },
+
+    cleanup: function () {
+      $(window).off('beforeunload.editor');
+      FauxtonAPI.removeBeforeUnload("editor");
     },
 
     setHeightToLineCount: function () {
@@ -264,6 +282,10 @@ function(app, FauxtonAPI, ace) {
       });
     },
 
+    editSaved: function () {
+      this.edited = false;
+    },
+
     setValue: function (data, lineNumber) {
       lineNumber = lineNumber ? lineNumber : -1;
       this.editor.setValue(data, lineNumber);
diff --git a/src/fauxton/app/router.js b/src/fauxton/app/router.js
index 9dac80c93..e3a1636aa 100644
--- a/src/fauxton/app/router.js
+++ b/src/fauxton/app/router.js
@@ -47,9 +47,34 @@ function(req, app, Initialize, FauxtonAPI, Fauxton, Layout, Databases, Documents
   // TODO: auto generate this list if possible
   var modules = [Databases, Documents];
 
+  var beforeUnloads = {};
+
   var Router = app.router = Backbone.Router.extend({
     routes: {},
 
+    beforeUnload: function (name, fn) {
+      beforeUnloads[name] = fn;
+    },
+
+    removeBeforeUnload: function (name) {
+      delete beforeUnloads[name];
+    },
+
+    navigate: function (fragment, trigger) {
+      var continueNav  = true,
+          msg = _.find(_.map(beforeUnloads, function (fn) { return fn(); }), function (beforeReturn) {
+            if (beforeReturn) { return true; }
+          });
+
+      if (msg) {
+        continueNav = window.confirm(msg);
+      }
+
+      if (continueNav) {
+        Backbone.Router.prototype.navigate(fragment, trigger);
+      }
+    },
+
     addModuleRouteObject: function(RouteObject) {
       var that = this;
       var masterLayout = this.masterLayout,
diff --git a/src/fauxton/tasks/fauxton.js b/src/fauxton/tasks/fauxton.js
index bb68ddb9a..e54bab8b6 100644
--- a/src/fauxton/tasks/fauxton.js
+++ b/src/fauxton/tasks/fauxton.js
@@ -102,7 +102,7 @@ module.exports = function(grunt) {
 
     _.defaults(app, settings.app, {
       root: '/',
-      host: '../../',
+      host: '../..',
       version: "0.0"
     });