Enabled inline editing of layer names

src/css/toolbox-layers-list.css

@@ -66,12 +66,17 @@
   cursor: pointer;
 }
 
-.layer-item .layer-name {
+.layer-item .layer-name,
+.layer-item .layer-name-input {
   padding: 0 0 0 10px;
   flex: 1 auto;
   white-space: nowrap;
 }
 
+.layer-item .layer-name-input {
+  width: 80%;
+}
+
 .layer-item .layer-name.overflowing-name {
   overflow: hidden;
   text-overflow: ellipsis;
@@ -82,7 +87,8 @@
 }
 
 .layer-item-opacity {
-  padding-right: 8px;
+  padding: 0 8px 0 8px;
+  flex: 0 auto;
 }
 
 .current-layer-item,

src/js/controller/LayersListController.js

@@ -4,10 +4,15 @@
   ns.LayersListController = function (piskelController) {
     this.piskelController = piskelController;
     this.layerPreviewShortcut = pskl.service.keyboard.Shortcuts.MISC.LAYER_PREVIEW;
+    this.startRenamingCurrentLayer_ = this.startRenamingCurrentLayer_.bind(this);
+    this.onRenameInput_ = this.onRenameInput_.bind(this);
   };
 
   ns.LayersListController.prototype.init = function () {
+    this.isRenaming = false;
+
     this.layerItemTemplate_ = pskl.utils.Template.get('layer-item-template');
+    this.layerNameInputTemplate_ = pskl.utils.Template.get('layer-name-input-template');
     this.rootEl = document.querySelector('.layers-list-container');
     this.layersListEl = document.querySelector('.layers-list');
     this.toggleLayerPreviewEl = document.querySelector('.layers-toggle-preview');
@@ -75,7 +80,6 @@
 
   ns.LayersListController.prototype.updateButtonStatus_ = function () {
     var layers = this.piskelController.getLayers();
-    var currentLayer = this.piskelController.getCurrentLayer();
     var index = this.piskelController.getCurrentLayerIndex();
 
     var isLast = index === 0;
@@ -116,6 +120,7 @@
 
   ns.LayersListController.prototype.addLayerItem = function (layer, index) {
     var isSelected = this.piskelController.getCurrentLayer() === layer;
+    var isRenaming = isSelected && this.isRenaming;
     var layerItemHtml = pskl.utils.Template.replace(this.layerItemTemplate_, {
       'layername' : layer.getName(),
       'layerindex' : index,
@@ -130,6 +135,24 @@
       layerNameEl.setAttribute('title', layer.getName());
       layerNameEl.setAttribute('rel', 'tooltip');
     }
+    if (isSelected) {
+      layerItem.removeEventListener('dblclick', this.startRenamingCurrentLayer_);
+      layerItem.addEventListener('dblclick', this.startRenamingCurrentLayer_);
+    }
+    if (isRenaming) {
+      var layerNameInputHtml = pskl.utils.Template.replace(this.layerNameInputTemplate_, {
+        'layername' : layer.getName()
+      });
+      var layerNameInput = pskl.utils.Template.createFromHTML(layerNameInputHtml);
+      var layerNameEl = layerItem.querySelector('.layer-name');
+      layerItem.replaceChild(layerNameInput, layerNameEl);
+      layerNameInput.removeEventListener('blur', this.onRenameInput_);
+      layerNameInput.removeEventListener('keydown', this.onRenameInput_);
+      layerNameInput.addEventListener('blur', this.onRenameInput_);
+      layerNameInput.addEventListener('keydown', this.onRenameInput_);
+      layerNameInput.focus();
+      layerNameInput.select();
+    }
     var opacity = layer.getOpacity();
     if (opacity == 1) {
       layerItem.querySelector('.layer-item-opacity').style.color = '#ffd700';
@@ -146,8 +169,13 @@
     if (el.classList.contains('button')) {
       this.onButtonClick_(el, evt);
     } else if (el.classList.contains('layer-name')) {
+      var currentIndex = this.piskelController.getCurrentLayerIndex();
       index = pskl.utils.Dom.getData(el, 'layerIndex');
+      if (index != currentIndex) {
+        var currentItem = el.parentElement.parentElement.querySelector('.current-layer-item');
+        currentItem.removeEventListener('dblclick', this.startRenamingCurrentLayer_);
         this.piskelController.setCurrentLayerIndex(parseInt(index, 10));
+      }
     } else if (el.classList.contains('layer-item-opacity')) {
       index = pskl.utils.Dom.getData(el, 'layerIndex');
       var layer = this.piskelController.getLayerAt(parseInt(index, 10));
@@ -156,16 +184,31 @@
     }
   };
 
-  ns.LayersListController.prototype.renameCurrentLayer_ = function () {
+  ns.LayersListController.prototype.startRenamingCurrentLayer_ = function () {
-    var layer = this.piskelController.getCurrentLayer();
+    this.isRenaming = true;
-    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.onRenameInput_ = function (evt) {
+    var el = evt.target || evt.srcElement;
+    if (evt.key === 'Enter') {
+      this.finishRenamingCurrentLayer_(el, el.value);
+    } else if (!evt.key || evt.key === 'Escape') {
+      this.finishRenamingCurrentLayer_(el);
     }
   };
 
+  ns.LayersListController.prototype.finishRenamingCurrentLayer_ = function (input, newName) {
+    if (newName) {
+      var index = this.piskelController.getCurrentLayerIndex();
+      this.piskelController.renameLayerAt(index, newName);
+    }
+    input.removeEventListener('blur', this.onRenameInput_);
+    input.removeEventListener('keydown', this.onRenameInput_);
+    this.isRenaming = false;
+    this.renderLayerList_();
+  };
+
   ns.LayersListController.prototype.mergeDownCurrentLayer_ = function () {
     var index = this.piskelController.getCurrentLayerIndex();
     this.piskelController.mergeDownLayerAt(index);
@@ -189,7 +232,7 @@
     } else if (action == 'merge') {
       this.mergeDownCurrentLayer_();
     } else if (action == 'edit') {
-      this.renameCurrentLayer_();
+      this.startRenamingCurrentLayer_();
     }
   };
 

src/templates/layers-list.html

@@ -43,4 +43,8 @@
         </span>
     </li>
   </script>
+    
+  <script type="text/template" id="layer-name-input-template">
+    <input class="textfield layer-name-input" type="text" autocomplete="off" value="{{layername}}" />
+  </script>
 </div>