Enhancement : Rename layers

- added rename icon in layers list
- mutualized CSS for edit icon between palette manager and layers list
- new CSS file icons.css for actions/links/buttons using icons
- layers are no longer retrieved by name, but by index

src/js/controller/LayersListController.js

@@ -23,24 +23,37 @@
     layers.forEach(this.addLayerItem.bind(this));
   };
 
-  ns.LayersListController.prototype.addLayerItem = function (layer) {
+  ns.LayersListController.prototype.addLayerItem = function (layer, index) {
+    var isSelected = this.piskelController.getCurrentLayer() === layer;
     var layerItemHtml = pskl.utils.Template.replace(this.layerItemTemplate_, {
-      layername : layer.getName()
+      'layername' : layer.getName(),
+      'layerindex' : index,
+      'isselected:current-layer-item' : isSelected
     });
     var layerItem = pskl.utils.Template.createFromHTML(layerItemHtml);
-    if (this.piskelController.getCurrentLayer() === layer) {
-      layerItem.classList.add('current-layer-item');
-    }
     this.layersListEl.insertBefore(layerItem, this.layersListEl.firstChild);
   };
 
   ns.LayersListController.prototype.onClick_ = function (evt) {
     var el = evt.target || evt.srcElement;
+    var index;
     if (el.nodeName == 'BUTTON') {
       this.onButtonClick_(el);
-    } else if (el.nodeName == 'LI') {
-      var layerName = el.getAttribute('data-layer-name');
-      this.piskelController.selectLayerByName(layerName);
+    } else if (el.classList.contains('layer-item')) {
+      index = el.dataset.layerIndex;
+      this.piskelController.setCurrentLayerIndex(index);
+    } else if (el.classList.contains('edit-icon')) {
+      index = el.parentNode.dataset.layerIndex;
+      var layer = this.piskelController.getLayerByIndex(index);
+      this.renameLayer_(layer);
+    }
+  };
+
+  ns.LayersListController.prototype.renameLayer_ = function (layer) {
+    var newName = window.prompt("Please enter the layer name", layer.getName());
+    if (newName) {
+      layer.setName(newName);
+      this.renderLayerList_();
     }
   };
 

src/js/controller/PiskelController.js

@@ -161,10 +161,12 @@
     }
   };
 
-  ns.PiskelController.prototype.selectLayerByName = function (name) {
-    if (this.hasLayerForName_(name)) {
-      var layer = this.piskel.getLayersByName(name)[0];
-      this.selectLayer(layer);
+  ns.PiskelController.prototype.getLayerByIndex = function (index) {
+    var layers = this.getLayers();
+    if (layers[index]) {
+      return layers[index];
+    } else {
+      return null;
     }
   };
 

src/js/controller/dialogs/PaletteManagerController.js

@@ -6,7 +6,7 @@
   var SELECTED_CLASSNAME = 'selected';
   var NEW_COLOR_CLASS = 'palette-manager-new-color';
   var CLOSE_ICON_CLASS = 'palette-manager-delete-card';
-  var EDIT_NAME_CLASS = 'palette-manager-details-head-edit-icon';
+  var EDIT_NAME_CLASS = 'edit-icon';
 
   ns.PaletteManagerController = function (piskelController) {
     this.piskelController = piskelController;

src/js/model/Layer.js

@@ -27,6 +27,10 @@
     return this.name;
   };
 
+  ns.Layer.prototype.setName = function (name) {
+    this.name = name;
+  };
+
   ns.Layer.prototype.getFrames = function () {
     return this.frames;
   };