Feature : Color palette : fix spectrum issue

The palette manager UI is redrawn almost everytime the model changes.
This way, UI is always in sync with the model.

However, spectrum instances are spawning everytime a redraw is performed.
They cannot be cleaned before the redraw is performed, because if a
spectrum picker is opened, it should remain like this. This allows the
cuser to keep modifying a color without having to reopen the picker each
time he/she stops on a color.

As a workaround, I keep a reference on all the spectrum containers and
destroy them all when the manager is disposed.

Ideally I'd prefer to have a single spectrum instance that I could move
around depending on which color the user wants to edit. I.e. I want to
mutualize all the picker instances ...  But this will require a bit more
work.

Also added a notification when the user saves a palette.
Updated z-index of user-message container so that it is always above the
rest of the application.

src/css/style.css

@@ -206,7 +206,7 @@ body {
   border-bottom: 0;
   font-weight: bold;
   font-size: 13px;
-  z-index: 10000;
+  z-index: 30000;
   max-width: 300px;
 }
 

src/js/controller/dialogs/PaletteManagerController.js

@@ -13,6 +13,9 @@
     this.palettes = this.retrieveUserPalettes();
     this.originalPalettes = this.retrieveUserPalettes();
     this.selectedPaletteId = null;
+
+    // Keep track of all spectrum instances created, to dispose them when closing the popup
+    this.spectrumContainers = [];
   };
 
   ns.PaletteManagerController.prototype.init = function () {
@@ -73,6 +76,11 @@
     };
   };
 
+  ns.PaletteManagerController.prototype.redraw = function () {
+    this.createPaletteListMarkup();
+    this.selectPalette(this.selectedPaletteId);
+  };
+
   ns.PaletteManagerController.prototype.selectPalette = function (paletteId) {
     this.deselectCurrentPalette();
     var paletteListItem = this.palettesList.querySelector('[data-palette-id='+paletteId+']');
@@ -84,9 +92,6 @@
   };
 
   ns.PaletteManagerController.prototype.refreshPaletteDetails = function () {
-    // Destroy and disconnect events
-    this.destroySpectrumPickers();
-
     this.createPaletteHeadMarkup();
     this.createPaletteBodyMarkup();
     this.initPaletteDetailsEvents();
@@ -182,7 +187,8 @@
     } else if (target.classList.contains('palette-manager-palette-button')) {
       var action = target.dataset.action;
       if (action === 'save') {
-        this.savePaletteAndRedraw(this.getSelectedPalette().id);
+        this.savePalette(this.getSelectedPalette().id);
+        this.redraw();
       } else if (action === 'revert') {
         this.revertChanges();
       } else if (action === 'delete') {
@@ -197,8 +203,8 @@
 
   ns.PaletteManagerController.prototype.initPaletteCardsSpectrum = function () {
     var oSelf = this;
-    var colorSquares = $(this.getSpectrumSelector_());
-    colorSquares.spectrum({
+    var container = $(this.getSpectrumSelector_());
+    container.spectrum({
       clickoutFiresChange : true,
       showInput: true,
       showButtons: false,
@@ -212,40 +218,43 @@
         var colorId = parseInt(target.parentNode.dataset.colorId, 10);
         var palette = oSelf.getSelectedPalette();
         var color = palette.colors[colorId];
-        colorSquares.spectrum("set", color);
+        container.spectrum("set", color);
       }
     });
+
+    this.spectrumContainers.push(container);
   };
 
+  /**
+   * Destroy all spectrum instances generated by the palette manager
+   */
   ns.PaletteManagerController.prototype.destroySpectrumPickers = function () {
-    var sp = $(this.getSpectrumSelector_());
-    if (sp) {
-      sp.spectrum("destroy");
-    }
+    this.spectrumContainers.forEach(function (container) {
+      container.spectrum("destroy");
+    });
+    this.spectrumContainers = [];
   };
 
   ns.PaletteManagerController.prototype.updateColorInSelectedPalette = function (colorId, color) {
     var palette = this.getSelectedPalette();
-    palette.colors.splice(colorId, 1, '#' + (color.toHex().toUpperCase()));
+    var hexColor = '#' + (color.toHex().toUpperCase());
+    palette.colors.splice(colorId, 1, hexColor);
 
-    this.createPaletteListMarkup();
-    this.selectPalette(this.selectedPaletteId);
+    this.redraw();
   };
 
   ns.PaletteManagerController.prototype.addColorInSelectedPalette = function (color) {
     var selectedPalette = this.getSelectedPalette();
     selectedPalette.colors.push(color);
 
-    this.createPaletteListMarkup();
-    this.selectPalette(this.selectedPaletteId);
+    this.redraw();
   };
 
   ns.PaletteManagerController.prototype.removeColorInSelectedPalette = function (colorId) {
     var palette = this.getSelectedPalette();
     palette.colors.splice(colorId, 1);
 
-    this.createPaletteListMarkup();
-    this.selectPalette(this.selectedPaletteId);
+    this.redraw();
   };
 
   ns.PaletteManagerController.prototype.renameSelectedPalette = function () {
@@ -253,8 +262,7 @@
     var name = window.prompt('Please enter a new name for palette "' + palette.name + '"', palette.name);
     if (name) {
       palette.name = name;
-      this.createPaletteListMarkup();
-      this.selectPalette(palette.id);
+      this.redraw();
     }
   };
 
@@ -309,8 +317,7 @@
     palette.name = originalPalette.name;
     palette.colors = originalPalette.colors.slice(0);
 
-    this.createPaletteListMarkup();
-    this.selectPalette(palette.id);
+    this.redraw();
   };
 
   ns.PaletteManagerController.prototype.deleteSelectedPalette = function () {
@@ -340,8 +347,7 @@
       this.savePalette(palette.id);
     }.bind(this));
 
-    this.createPaletteListMarkup();
-    this.selectPalette(this.getSelectedPalette().id);
+    this.redraw();
   };
 
   ns.PaletteManagerController.prototype.savePalette = function (paletteId) {
@@ -355,16 +361,11 @@
     }
 
     this.persistToLocalStorage();
+
+    $.publish(Events.SHOW_NOTIFICATION, [{"content": "Palette " + palette.name + " successfully saved !"}]);
+    window.setTimeout($.publish.bind($, Events.HIDE_NOTIFICATION), 2000);
   };
 
-  ns.PaletteManagerController.prototype.savePaletteAndRedraw = function (paletteId) {
-    this.savePalette(paletteId);
-
-    this.createPaletteListMarkup();
-    this.selectPalette(this.getSelectedPalette().id);
-  };
-
-
   ns.PaletteManagerController.prototype.persistToLocalStorage = function () {
     window.localStorage.setItem('piskel.palettes', JSON.stringify(this.originalPalettes));
     this.originalPalettes = this.retrieveUserPalettes();

src/templates/dialogs/manage-palettes.html

@@ -21,7 +21,7 @@
 
 <script type="text/template" id="palette-details-head-template">
   <span class="palette-manager-details-head-name">{{name}}</span>
-  <span class="palette-manager-details-head-edit-icon">&nbsp;</span>
+  <span class="palette-manager-details-head-edit-icon" title="edit name">&nbsp;</span>
   <div class="palette-manager-details-head-actions">
     <button class="palette-manager-palette-button button button-primary" {{save:disabled}} data-action="save" type="button">Save</button>
     <button class="palette-manager-palette-button button " {{revert:disabled}} data-action="revert" type="button">Revert</button>