Issue #277 : Move all name update logic to a dedicated controller polling the model

src/index.html

@@ -24,6 +24,25 @@
   </div>
   <script type="text/javascript" src="js/lib/iframeLoader-0.1.0.js"></script>
 
+  <style type="text/css">
+    #main-wrapper {
+      margin-top: 40px;
+    }
+
+    .fake-piskelapp-header {
+      text-align: center;
+      height: 40px;
+      line-height: 40px;
+      font-size: 24px;
+      background: black;
+      color: gold;
+    }
+
+    .piskel-name.piskel-name-saving {
+      color: red;
+    }
+  </style>
+  <div class="fake-piskelapp-header"><span class="piskel-name"></span></div>
   <!-- the comment below indicates the beginning of markup reused by the editor integrated in piskelapp.com -->
   <!-- do not delete, do not move :) -->
   <!--body-main-start-->

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'));

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

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

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);

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 () {

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);
-    }
   };
 
   ns.SavedStatusService.prototype.isDirty = function (evt) {

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