diff --git a/src/index.html b/src/index.html index e7e2770e..19deabcc 100644 --- a/src/index.html +++ b/src/index.html @@ -24,6 +24,25 @@ + +
diff --git a/src/js/app.js b/src/js/app.js index 3150ec53..8d9f4a60 100644 --- a/src/js/app.js +++ b/src/js/app.js @@ -139,6 +139,9 @@ this.beforeUnloadService = new pskl.service.BeforeUnloadService(this.piskelController); this.beforeUnloadService.init(); + this.headerController = new pskl.controller.HeaderController(this.piskelController, this.savedStatusService); + this.headerController.init(); + this.fileDropperService = new pskl.service.FileDropperService( this.piskelController, document.querySelector('#drawing-canvas-container')); diff --git a/src/js/controller/HeaderController.js b/src/js/controller/HeaderController.js new file mode 100644 index 00000000..d397f347 --- /dev/null +++ b/src/js/controller/HeaderController.js @@ -0,0 +1,56 @@ +(function () { + var ns = $.namespace('pskl.controller'); + + /** + * When embedded in piskelapp.com, the page adds a header containing the name of the currently edited sprite + * This controller will keep the displayed name in sync with the actual piskel name + */ + ns.HeaderController = function (piskelController, savedStatusService, interval) { + this.piskelController = piskelController; + this.savedStatusService = savedStatusService; + this.interval = interval || 500; + + this.updateHeader_ = this.updateHeader_.bind(this); + }; + + ns.HeaderController.prototype.init = function () { + this.piskelName_ = document.querySelector('.piskel-name'); + + $.subscribe(Events.BEFORE_SAVING_PISKEL, this.onBeforeSavingPiskelEvent_.bind(this)); + $.subscribe(Events.AFTER_SAVING_PISKEL, this.onAfterSavingPiskelEvent_.bind(this)); + + this.updateHeader_(); + }; + + ns.HeaderController.prototype.updateHeader_ = function () { + try { + var name = this.piskelController.getPiskel().getDescriptor().name; + if (this.savedStatusService.isDirty()) { + name = name + ' *'; + } + + if (this.piskelName_) { + this.piskelName_.innerHTML = name; + } + } catch (e) { + console.warn('Could not update header : ' + e.message); + } + + window.setTimeout(this.updateHeader_, this.interval); + }; + + ns.HeaderController.prototype.onBeforeSavingPiskelEvent_ = function () { + if (!this.piskelName_) { + return; + } + this.piskelName_.classList.add('piskel-name-saving'); + }; + + ns.HeaderController.prototype.onAfterSavingPiskelEvent_ = function () { + if (!this.piskelName_) { + return; + } + this.piskelName_.classList.remove('piskel-name-saving'); + }; + +})(); diff --git a/src/js/controller/piskel/PublicPiskelController.js b/src/js/controller/piskel/PublicPiskelController.js index cdbd7cdc..1c602e58 100644 --- a/src/js/controller/piskel/PublicPiskelController.js +++ b/src/js/controller/piskel/PublicPiskelController.js @@ -86,14 +86,6 @@ }); }; - ns.PublicPiskelController.prototype.setSavePath = function (savePath) { - this.piskelController.piskel.savePath = savePath; - }; - - ns.PublicPiskelController.prototype.getSavePath = function () { - return this.piskelController.piskel.savePath; - }; - ns.PublicPiskelController.prototype.replay = function (frame, replayData) { replayData.fn.apply(this.piskelController, replayData.args); }; diff --git a/src/js/controller/settings/resize/ResizeController.js b/src/js/controller/settings/resize/ResizeController.js index 173d33ca..0ea02cca 100644 --- a/src/js/controller/settings/resize/ResizeController.js +++ b/src/js/controller/settings/resize/ResizeController.js @@ -44,10 +44,11 @@ var resizedLayers = this.piskelController.getLayers().map(this.resizeLayer_.bind(this)); - var piskel = pskl.model.Piskel.fromLayers(resizedLayers, this.piskelController.getPiskel().getDescriptor()); - + var currentPiskel = this.piskelController.getPiskel(); + var piskel = pskl.model.Piskel.fromLayers(resizedLayers, currentPiskel.getDescriptor()); // propagate savepath to new Piskel - piskel.savePath = pskl.app.piskelController.getSavePath(); + piskel.savePath = currentPiskel.savePath; + pskl.app.piskelController.setPiskel(piskel, true); $.publish(Events.CLOSE_SETTINGS_DRAWER); diff --git a/src/js/model/Piskel.js b/src/js/model/Piskel.js index cabd69c8..32d00eb0 100644 --- a/src/js/model/Piskel.js +++ b/src/js/model/Piskel.js @@ -114,7 +114,10 @@ ns.Piskel.prototype.setDescriptor = function (descriptor) { this.descriptor = descriptor; - var appEngineEditorHeader = $('.piskel-name').html(this.descriptor.name); + }; + + ns.Piskel.prototype.setName = function (name) { + this.descriptor.name = name; }; ns.Piskel.prototype.getHash = function () { diff --git a/src/js/service/SavedStatusService.js b/src/js/service/SavedStatusService.js index 9d7dce7c..dadbad54 100644 --- a/src/js/service/SavedStatusService.js +++ b/src/js/service/SavedStatusService.js @@ -8,7 +8,6 @@ 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)); }; @@ -33,21 +32,7 @@ ns.SavedStatusService.prototype.updateDirtyStatus = function (status) { var piskel = this.piskelController.getPiskel(); - if (piskel.isDirty_ !== status) { - // Redraw piskel name only if dirty status actually changed - piskel.isDirty_ = status; - this.updatePiskelName(); - } - }; - - ns.SavedStatusService.prototype.updatePiskelName = function () { - var piskel = this.piskelController.getPiskel(); - var name = piskel.getDescriptor().name; - if (piskel.isDirty_) { - $('.piskel-name').html(name + ' *'); - } else { - $('.piskel-name').html(name); - } + piskel.isDirty_ = status; }; ns.SavedStatusService.prototype.isDirty = function (evt) { diff --git a/src/piskel-script-list.js b/src/piskel-script-list.js index 085e0548..fe342e61 100644 --- a/src/piskel-script-list.js +++ b/src/piskel-script-list.js @@ -94,6 +94,7 @@ "js/controller/DrawingController.js", "js/controller/drawing/DragHandler.js", "js/controller/FramesListController.js", + "js/controller/HeaderController.js", "js/controller/LayersListController.js", "js/controller/preview/PopupPreviewController.js", "js/controller/preview/PreviewController.js",