Fixed : spectrum pickers where no destroyed properly

src/css/dialogs.css

@@ -8,19 +8,34 @@
   left: 0;
 
   padding: 50px 150px;
+  overflow: hidden;
 
   box-sizing: border-box;
   -moz-box-sizing : border-box;
 
+  background-color: rgba(0,0,0,0.8);
+  opacity: 0;
+  pointer-events: none;
+
+  transition: opacity 0.5s;
+
+
   color: white;
-  background: rgba(0,0,0,0.5);
-  display : none;
+}
+
+#dialog-container-wrapper.show {
+  opacity: 1;
+  pointer-events: auto;
+  transition: opacity 0.5s;
 }
 
 #dialog-container {
   width: 100%;
   height:  100%;
 
+  margin-top: -1500px;
+  transition:margin-top 0.5s;
+
   box-sizing: border-box;
   -moz-box-sizing : border-box;
 
@@ -28,3 +43,8 @@
   background: rgba(0,0,0,0.9);
   overflow: auto;
 }
+
+.show #dialog-container {
+  margin-top: 0;
+}
+

src/js/controller/dialogs/DialogsController.js

@@ -27,9 +27,14 @@
       var config = dialogs[dialogId];
       if (config) {
         this.dialogContainer_.innerHTML = pskl.utils.Template.get(config.template);
-        (new config.controller(this.piskelController)).init();
+        var controller = new config.controller(this.piskelController);
+        controller.init();
+
         this.showDialogWrapper_();
-        this.currentDialog_ = dialogId;
+        this.currentDialog_ = {
+          id : dialogId,
+          controller : controller
+        };
       } else {
         console.error('Could not find dialog configuration for dialogId : ' + dialogId);
       }
@@ -42,17 +47,22 @@
 
   ns.DialogsController.prototype.showDialogWrapper_ = function () {
     pskl.app.shortcutService.addShortcut('ESC', this.hideDialog.bind(this));
-    this.dialogWrapper_.style.display = 'block';
+    this.dialogWrapper_.classList.add('show');
   };
 
   ns.DialogsController.prototype.hideDialog = function () {
+    var currentDialog = this.currentDialog_;
+    if (currentDialog) {
+      currentDialog.controller.destroy();
+    }
+
     this.hideDialogWrapper_();
     this.currentDialog_ = null;
   };
 
   ns.DialogsController.prototype.hideDialogWrapper_ = function () {
     pskl.app.shortcutService.removeShortcut('ESC');
-    this.dialogWrapper_.style.display = 'none';
+    this.dialogWrapper_.classList.remove('show');
   };
 
   ns.DialogsController.prototype.isDisplayed = function () {

src/js/controller/dialogs/PaletteManagerController.js

@@ -45,6 +45,10 @@
     }
   };
 
+  ns.PaletteManagerController.prototype.destroy = function () {
+    this.destroySpectrumPickers();
+  };
+
   ns.PaletteManagerController.prototype.closeDialog = function () {
     $.publish(Events.DIALOG_HIDE);
   };
@@ -78,6 +82,9 @@
   };
 
   ns.PaletteManagerController.prototype.refreshPaletteDetails = function () {
+    // Destroy and disconnect events
+    this.destroySpectrumPickers();
+
     this.createPaletteHeadMarkup();
     this.createPaletteBodyMarkup();
     this.initPaletteDetailsEvents();
@@ -182,9 +189,13 @@
     }
   };
 
+  ns.PaletteManagerController.prototype.getSpectrumSelector_ = function () {
+    return ':not(.' + NEW_COLOR_CLASS + ')>.palette-manager-color-square';
+  };
+
   ns.PaletteManagerController.prototype.initPaletteCardsSpectrum = function () {
     var oSelf = this;
-    var colorSquares = $(':not(.' + NEW_COLOR_CLASS + ')>.palette-manager-color-square');
+    var colorSquares = $(this.getSpectrumSelector_());
     colorSquares.spectrum({
       clickoutFiresChange : true,
       showInput: true,
@@ -204,6 +215,13 @@
     });
   };
 
+  ns.PaletteManagerController.prototype.destroySpectrumPickers = function () {
+    var sp = $(this.getSpectrumSelector_());
+    if (sp) {
+      sp.spectrum("destroy");
+    }
+  };
+
   ns.PaletteManagerController.prototype.updateColorInSelectedPalette = function (colorId, color) {
     var palette = this.getSelectedPalette();
     palette.colors.splice(colorId, 1, '#' + (color.toHex().toUpperCase()));