From 186b5a305a1a690d5b644bc9a48e6896faa67adf Mon Sep 17 00:00:00 2001
From: Julian Descottes <julian.descottes@gmail.com>
Date: Sun, 6 Mar 2016 00:26:03 +0100
Subject: [PATCH] Issue #414: part4: UI to view/update layer opacity

---
 src/css/toolbox-layers-list.css           | 5 +++++
 src/js/controller/LayersListController.js | 8 +++++++-
 src/templates/layers-list.html            | 9 ++++++++-
 3 files changed, 20 insertions(+), 2 deletions(-)

diff --git a/src/css/toolbox-layers-list.css b/src/css/toolbox-layers-list.css
index 07f9f968..4de131fa 100644
--- a/src/css/toolbox-layers-list.css
+++ b/src/css/toolbox-layers-list.css
@@ -46,6 +46,11 @@
   background : #222;
 }
 
+.layer-item-opacity {
+  position: absolute;
+  right: 8px;
+}
+
 .current-layer-item,
 .current-layer-item:hover {
   background : #333;
diff --git a/src/js/controller/LayersListController.js b/src/js/controller/LayersListController.js
index 590e911a..5d62d1a7 100644
--- a/src/js/controller/LayersListController.js
+++ b/src/js/controller/LayersListController.js
@@ -88,7 +88,8 @@
     var layerItemHtml = pskl.utils.Template.replace(this.layerItemTemplate_, {
       'layername' : layer.getName(),
       'layerindex' : index,
-      'isselected:current-layer-item' : isSelected
+      'isselected:current-layer-item' : isSelected,
+      'opacity': layer.getOpacity()
     });
     var layerItem = pskl.utils.Template.createFromHTML(layerItemHtml);
     this.layersListEl.insertBefore(layerItem, this.layersListEl.firstChild);
@@ -102,6 +103,11 @@
     } else if (el.classList.contains('layer-item')) {
       index = el.dataset.layerIndex;
       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));
+      var opacity = window.prompt('Set layer opacity (value between 0 and 1)', layer.getOpacity());
+      this.piskelController.setLayerOpacityAt(index, opacity);
     }
   };
 
diff --git a/src/templates/layers-list.html b/src/templates/layers-list.html
index 36b83856..1f43eaff 100644
--- a/src/templates/layers-list.html
+++ b/src/templates/layers-list.html
@@ -34,6 +34,13 @@
   <ul class="layers-list"></ul>
 
   <script type="text/template" id="layer-item-template">
-    <li class="layer-item {{isselected:current-layer-item}}" data-layer-index="{{layerindex}}">{{layername}}</li>
+    <li class="layer-item {{isselected:current-layer-item}}"
+        data-layer-index="{{layerindex}}">
+        {{layername}}
+        <span class="layer-item-opacity"
+              title="Layer opacity" rel="tooltip" data-placement="top">
+          {{opacity}}&#945;
+        </span>
+    </li>
   </script>
 </div>