Feature : Saved status and warning msg

Added saved status (*) next to title when a Piskel is updated.
Upon saving, the * disappears.

If the workspace contains an unsaved piskel when leaving the application a
message will be displayed to the user, using onbeforeunload.

This logic should also be used everywhere we display a confirm message
before a navigation.

js/Events.js

@@ -29,6 +29,8 @@ var Events = {
    */
   PISKEL_RESET: "PISKEL_RESET",
 
+  PISKEL_SAVED: "PISKEL_SAVED",
+
   FRAME_SIZE_CHANGED : "FRAME_SIZE_CHANGED",
 
   SELECTION_CREATED: "SELECTION_CREATED",

js/app.js

@@ -75,6 +75,9 @@
       this.cheatsheetService = new pskl.service.keyboard.CheatsheetService();
       this.cheatsheetService.init();
 
+      this.savedStatusService = new pskl.service.SavedStatusService(this.piskelController);
+      this.savedStatusService.init();
+
       if (this.isAppEngineVersion) {
         this.storageService = new pskl.service.AppEngineStorageService(this.piskelController);
       } else {

js/controller/settings/SaveController.js

@@ -95,6 +95,7 @@
   ns.SaveController.prototype.onSaveSuccess_ = function () {
     $.publish(Events.CLOSE_SETTINGS_DRAWER);
     $.publish(Events.SHOW_NOTIFICATION, [{"content": "Successfully saved !"}]);
+    $.publish(Events.PISKEL_SAVED);
   };
 
   ns.SaveController.prototype.onSaveError_ = function (status) {

js/service/SavedStatusService.js

@@ -0,0 +1,63 @@
+(function () {
+  var ns = $.namespace('pskl.service');
+
+  ns.SavedStatusService = function (piskelController) {
+    this.piskelController_ = piskelController;
+  };
+
+  ns.SavedStatusService.prototype.init = function () {
+    $.subscribe(Events.TOOL_RELEASED, this.onToolReleased.bind(this));
+    $.subscribe(Events.PISKEL_RESET, this.onPiskelReset.bind(this));
+
+    $.subscribe(Events.PISKEL_SAVED, this.onPiskelSaved.bind(this));
+
+    window.addEventListener("beforeunload", this.onBeforeUnload.bind(this));
+  };
+
+  ns.SavedStatusService.prototype.onPiskelReset = function () {
+    var piskel = this.piskelController_.piskel;
+    // A first PISKEL_RESET is triggered during the load of a new Piskel, it should be ignored
+    // putting a firstResetDone flag as a nasty workaround for this
+    if (piskel.firstResetDone_) {
+      this.updateDirtyStatus(true);
+    } else {
+      piskel.firstResetDone_ = true;
+    }
+  };
+
+  ns.SavedStatusService.prototype.onToolReleased = function () {
+    this.updateDirtyStatus(true);
+  };
+
+  ns.SavedStatusService.prototype.onPiskelSaved = function () {
+    this.updateDirtyStatus(false);
+  };
+
+  ns.SavedStatusService.prototype.updateDirtyStatus = function (status) {
+    var piskel = this.piskelController_.piskel;
+    if (piskel.isDirty_ !== status) {
+      piskel.isDirty_ = status;
+      this.updatePiskelName();
+    }
+  };
+
+  ns.SavedStatusService.prototype.updatePiskelName = function () {
+    var piskel = this.piskelController_.piskel;
+    var name = piskel.getDescriptor().name;
+    if (piskel.isDirty_) {
+      $('.piskel-name').html(name + ' *');
+    } else {
+      $('.piskel-name').html(name);
+    }
+  };
+
+  ns.SavedStatusService.prototype.onBeforeUnload = function (evt) {
+    var piskel = this.piskelController_.piskel;
+    if (piskel.isDirty_) {
+      var confirmationMessage = "Your Piskel seem to have unsaved changes";
+
+      (evt || window.event).returnValue = confirmationMessage;
+      return confirmationMessage;
+    }
+  };
+})();

piskel-script-list.js

@@ -83,6 +83,7 @@ exports.scripts = [
   "js/service/GithubStorageService.js",
   "js/service/AppEngineStorageService.js",
   "js/service/HistoryService.js",
+  "js/service/SavedStatusService.js",
   "js/service/keyboard/ShortcutService.js",
   "js/service/keyboard/KeycodeTranslator.js",
   "js/service/keyboard/CheatsheetService.js",