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.
This commit is contained in:
jdescottes 2014-02-11 23:42:38 +01:00
parent bd0adda73f
commit aae994b3d5
5 changed files with 70 additions and 0 deletions

View File

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

View File

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

View File

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

View File

@ -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;
}
};
})();

View File

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