Moved image import to worker

src/js/controller/LayersListController.js

@@ -28,6 +28,31 @@
     this.layersListEl.innerHTML = '';
     var layers = this.piskelController.getLayers();
     layers.forEach(this.addLayerItem.bind(this));
+    this.updateButtonStatus_();
+  };
+
+  ns.LayersListController.prototype.updateButtonStatus_ = function () {
+    var layers = this.piskelController.getLayers();
+    var currentLayer = this.piskelController.getCurrentLayer();
+    var index = this.piskelController.getCurrentLayerIndex();
+
+    var isLast = index === 0;
+    var isOnly = layers.length === 1;
+    var isFirst = index === layers.length - 1;
+
+    this.toggleButtonDisabledState_('up', isFirst);
+    this.toggleButtonDisabledState_('down', isLast);
+    this.toggleButtonDisabledState_('merge', isLast);
+    this.toggleButtonDisabledState_('delete', isOnly);
+  };
+
+  ns.LayersListController.prototype.toggleButtonDisabledState_ = function (buttonAction, isDisabled) {
+    var button = document.querySelector('.layers-button[data-action="'+buttonAction+'"]');
+    if (isDisabled) {
+      button.setAttribute('disabled', 'disabled');
+    } else {
+      button.removeAttribute('disabled');
+    }
   };
 
   ns.LayersListController.prototype.updateToggleLayerPreview_ = function () {
@@ -64,25 +89,21 @@
     } else if (el.classList.contains('layer-item')) {
       index = el.dataset.layerIndex;
       this.piskelController.setCurrentLayerIndex(parseInt(index, 10));
-    } else if (el.classList.contains('edit-icon')) {
-      index = el.parentNode.dataset.layerIndex;
-      this.renameLayerAt_(index);
-    } else if (el.classList.contains('merge-icon')) {
-      index = el.parentNode.dataset.layerIndex;
-      this.mergeDownLayerAt_(index);
     }
   };
 
-  ns.LayersListController.prototype.renameLayerAt_ = function (index) {
-    var layer = this.piskelController.getLayerAt(index);
+  ns.LayersListController.prototype.renameCurrentLayer_ = function () {
+    var layer = this.piskelController.getCurrentLayer();
     var name = window.prompt("Please enter the layer name", layer.getName());
     if (name) {
+      var index = this.piskelController.getCurrentLayerIndex();
       this.piskelController.renameLayerAt(index, name);
       this.renderLayerList_();
     }
   };
 
-  ns.LayersListController.prototype.mergeDownLayerAt_ = function (index) {
+  ns.LayersListController.prototype.mergeDownCurrentLayer_ = function () {
+    var index = this.piskelController.getCurrentLayerIndex();
     this.piskelController.mergeDownLayerAt(index);
     this.renderLayerList_();
   };
@@ -97,6 +118,10 @@
       this.piskelController.createLayer();
     } else if (action == 'delete') {
       this.piskelController.removeCurrentLayer();
+    } else if (action == 'merge') {
+      this.mergeDownCurrentLayer_();
+    } else if (action == 'edit') {
+      this.renameCurrentLayer_();
     }
   };
 

src/js/controller/PalettesListController.js

@@ -54,20 +54,25 @@
   };
 
   ns.PalettesListController.prototype.fillColorListContainer = function () {
+
     var colors = this.getSelectedPaletteColors_();
 
-    var html = colors.map(function (color) {
-      return pskl.utils.Template.replace(this.paletteColorTemplate_, {color : color});
-    }.bind(this)).join('');
-    this.colorListContainer_.innerHTML = html;
+    if (colors.length > 0) {
+      var html = colors.map(function (color) {
+        return pskl.utils.Template.replace(this.paletteColorTemplate_, {color : color});
+      }.bind(this)).join('');
+      this.colorListContainer_.innerHTML = html;
 
-    this.highlightSelectedColors();
+      this.highlightSelectedColors();
 
-    var hasScrollbar = colors.length > NO_SCROLL_MAX_COLORS;
-    if (hasScrollbar && !pskl.utils.UserAgent.isChrome) {
-      this.colorListContainer_.classList.add(HAS_SCROLL_CLASSNAME);
+      var hasScrollbar = colors.length > NO_SCROLL_MAX_COLORS;
+      if (hasScrollbar && !pskl.utils.UserAgent.isChrome) {
+        this.colorListContainer_.classList.add(HAS_SCROLL_CLASSNAME);
+      } else {
+        this.colorListContainer_.classList.remove(HAS_SCROLL_CLASSNAME);
+      }
     } else {
-      this.colorListContainer_.classList.remove(HAS_SCROLL_CLASSNAME);
+      this.colorListContainer_.innerHTML = pskl.utils.Template.get('palettes-list-no-colors-partial');
     }
   };
 
@@ -105,6 +110,7 @@
   ns.PalettesListController.prototype.onPaletteSelected_ = function (evt) {
     var paletteId = this.colorPaletteSelect_.value;
     this.selectPalette(paletteId);
+    this.colorPaletteSelect_.blur();
   };
 
   ns.PalettesListController.prototype.onCreatePaletteClick_ = function (evt) {

src/js/controller/dialogs/AbstractDialogController.js

@@ -17,9 +17,9 @@
   };
 
   ns.AbstractDialogController.prototype.setTitle = function (title) {
-    var dialogHead = document.querySelector('.dialog-head');
-    if (dialogHead) {
-      dialogHead.innerText = title;
+    var dialogTitle = document.querySelector('.dialog-title');
+    if (dialogTitle) {
+      dialogTitle.innerText = title;
     }
   };
 

src/js/controller/dialogs/CreatePaletteController.js

@@ -111,10 +111,16 @@
   ns.CreatePaletteController.prototype.onFileInputChange_ = function (evt) {
     var files = this.hiddenFileInput.files;
     if (files.length == 1) {
-      this.paletteImportService.read(files[0], this.setPalette_.bind(this));
+      this.paletteImportService.read(files[0], this.setPalette_.bind(this), this.displayErrorMessage_.bind(this));
     }
   };
 
+  ns.CreatePaletteController.prototype.displayErrorMessage_ = function (message) {
+    message = "Could not import palette : " + message;
+    $.publish(Events.SHOW_NOTIFICATION, [{"content": message}]);
+    window.setTimeout($.publish.bind($, Events.HIDE_NOTIFICATION), 2000);
+  };
+
   ns.CreatePaletteController.prototype.onNameInputChange_ = function (evt) {
     this.palette.name = pskl.utils.escapeHtml(this.nameInput.value);
   };