[Project] Updated web dependencies

bower.json

@@ -1,7 +1,7 @@
 {
   "name": "strolch-wc-tree",
   "description": "Strolch Tree View WebComponent",
-  "version": "0.1.9",
+  "version": "0.2.6",
   "authors": ["Robert von Burg"],
   "keywords": [
     "strolch",
@@ -11,16 +11,16 @@
   "private": true,
   "repository": {
     "type": "git",
-    "url": "git@github.com:4treesCH/strolch-wc-tree.git"
+    "url": "git@github.com:strolch-li/strolch-wc-tree.git"
   },
-  "license": "https://github.com/4treesCH/strolch-wc-tree/blob/master/LICENSE",
-  "homepage": "https://github.com/4treesCH/strolch-wc-tree",
+  "license": "https://github.com/strolch-li/strolch-wc-tree/blob/master/LICENSE",
+  "homepage": "https://github.com/strolch-li/strolch-wc-tree",
   "ignore": [],
   "dependencies": {
-    "strolchjs": "4treesCH/strolchjs#^0.4.2",
-    "strolch-wc-styles": "4treesCH/strolch-wc-styles#^0.3.0",
+    "strolchjs": "strolch-li/strolchjs#^0.5.3",
+    "strolch-wc-styles": "strolch-li/strolch-wc-styles#^0.4.7",
 
-    "polymer": "Polymer/polymer#^1.11.3",
+    "polymer": "Polymer/polymer#^1.12.0",
 
     "iron-icons": "PolymerElements/iron-icons#^1.2.1",
 

strolch-wc-tree-item.html

@@ -26,6 +26,9 @@
             .item {
                 line-height: 24px;
                 margin: 0;
+                padding-top: 5px;
+                padding-bottom: 5px;
+                cursor: pointer;
             }
 
             .expandIcon {
@@ -36,6 +39,7 @@
                 height: 24px;
                 line-height: 24px;
                 margin-bottom: -4px;
+                margin-right: 5px;
             }
 
             .icon-img {
@@ -44,32 +48,48 @@
 
             .title {
                 line-height: 24px;
-                cursor: pointer;
             }
 
             .selected {
                 background-color: #c8c8c8;
             }
 
+            .item:hover {
+                background-color: #c8c8c8;
+            }
+
+            .disabled {
+                color: darkgrey;
+                font-style: italic;
+            }
+
+            .disabled:hover {
+                background-color: inherit;
+            }
+
         </style>
 
         <!-- Requests -->
 
         <!-- Content -->
         <div class="tree-item">
-            <p class$="[[itemClass]]">
+            <p class$="[[itemClass]]" on-tap="onTitleTapped">
                 <iron-icon class="expandIcon"
                            icon="{{_getExpandedIcon(funcObj, item, expanded)}}"
                            on-tap="onToggleExpand"></iron-icon>
-                <span class="icon" title="{{item.state}}"><img height="16"
-                                                               width="16"
-                                                               class="icon-img"
-                                                               src$="{{_getIcon(funcObj, item, expanded)}}" /></span>
+                <span class="icon" title="{{item.state}}">
+                    <template is="dom-if" if="[[_useIcon(funcObj, item)]]">
+                        <img height="16" width="16" class="icon-img" src$="[[_getIcon(funcObj, item)]]"/>
+                    </template>
+                    <template is="dom-if" if="[[_useIronIcon(funcObj, item)]]">
+                        <iron-icon size="16" icon="{{_getIronIcon(funcObj, item)}}"></iron-icon>
+                    </template>
+                </span>
                 <template is="dom-if" if="[[!titleHtml]]">
-                    <span class="title" on-tap="onTitleTapped">[[_getTitle(funcObj, item)]]</span>
+                    <span class="title">[[_getTitle(funcObj, item)]]</span>
                 </template>
                 <template is="dom-if" if="[[titleHtml]]">
-                    <span class="title" on-tap="onTitleTapped" inner-h-t-m-l="[[_getTitle(funcObj, item)]]"></span>
+                    <span class="title" inner-h-t-m-l="[[_getTitle(funcObj, item)]]"></span>
                 </template>
             </p>
 
@@ -79,7 +99,7 @@
                                           selected-item="{{selectedItem}}"
                                           title-html="[[titleHtml]]"
                                           func-obj="{{funcObj}}"
-                                          item="[[element]]" />
+                                          item="[[element]]"></strolch-wc-tree-item>
                 </template>
             </template>
         </div>
@@ -98,7 +118,7 @@
 
                 itemClass: {
                     type: String,
-                    value: 'item'
+                    computed: "computeItemClass(item, selected)"
                 },
 
                 titleHtml: {
@@ -112,6 +132,10 @@
                     value: null,
                     observer: 'itemChanged'
                 },
+                selected: {
+                    type: Boolean,
+                    value: false
+                },
                 expanded: {
                     type: Boolean,
                     value: false
@@ -119,25 +143,43 @@
             },
 
             /* Computations */
+            computeItemClass: function (item, selected) {
+                var itemClass = selected ? "item selected" : "item";
+                if (item.selectable != null && item.selectable === false)
+                    itemClass = itemClass + " disabled";
+                return itemClass;
+            },
 
             /* Observers */
             observers: [
                 'observeSelectedItem(selectedItem)'
             ],
             itemChanged: function (newValue, oldValue) {
-                if (newValue == null || oldValue == null || newValue.locator != oldValue.locator)
-                    this.itemClass = 'item';
+                if (newValue == null) {
+                    this.selected = false;
+                    return;
+                }
+
+                var isDifferentItem = oldValue == null || newValue.locator !== oldValue.locator;
+                if (isDifferentItem)
+                    this.selected = false;
+
+                if (newValue.expand)
+                    this.expanded = true;
             },
             observeSelectedItem: function (selectedItem) {
-                if (selectedItem != this.item) {
-                    this.itemClass = 'item';
-                }
+                if (selectedItem !== this.item)
+                    this.selected = false;
             },
             onToggleExpand: function (e) {
                 this.expanded = !this.expanded;
             },
             onTitleTapped: function (e) {
-                this.itemClass = 'item selected';
+                if (this.item.selectable != null && this.item.selectable === false)
+                    return;
+
+                this.selected = true;
+                this.itemClass = "item selected";
                 this.fire('strolch-wc-tree-item-selected', {
                     rootItem: this.rootItem,
                     item: this.item
@@ -158,12 +200,24 @@
                     return 'strolch-wc-inspector-svg:tree_arrow_right';
                 }
             },
-            _getIcon: function (funcObj, item, expanded) {
-                if (item == null || funcObj == null || funcObj.getElements == null) return [];
+            _useIcon: function (funcObj, item) {
+                if (item == null || funcObj == null || funcObj.useIcon == null) return false;
+                return funcObj.useIcon(item);
+            },
+            _useIronIcon: function (funcObj, item) {
+                if (item == null || funcObj == null || funcObj.useIronIcon == null) return false;
+                return funcObj.useIronIcon(item);
+            },
+            _getIcon: function (funcObj, item) {
+                if (item == null || funcObj == null || funcObj.getIcon == null) return "?";
                 return funcObj.getIcon(item);
             },
+            _getIronIcon: function (funcObj, item) {
+                if (item == null || funcObj == null || funcObj.getIronIcon == null) return "";
+                return funcObj.getIronIcon(item);
+            },
             _getTitle: function (funcObj, item) {
-                if (item == null || funcObj == null || funcObj.getTitle == null) return '';
+                if (item == null || funcObj == null || funcObj.getTitle == null) return "";
                 return funcObj.getTitle(item);
             },
             _getElements: function (funcObj, item) {

strolch-wc-tree.html

@@ -23,7 +23,7 @@
             <strolch-wc-tree-item selected-item="{{selectedItem}}"
                                   title-html="[[titleHtml]]"
                                   func-obj="{{funcObj}}"
-                                  item="[[element]]" />
+                                  item="[[element]]"></strolch-wc-tree-item>
         </template>
 
     </template>