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",