diff --git a/bower.json b/bower.json index 48dbf03..0979965 100644 --- a/bower.json +++ b/bower.json @@ -1,7 +1,7 @@ { "name": "strolch-wc-tree", "description": "Strolch Tree View WebComponent", - "version": "0.2.4", + "version": "0.2.5", "authors": ["Robert von Burg"], "keywords": [ "strolch", diff --git a/strolch-wc-tree-item.html b/strolch-wc-tree-item.html index d9d4930..b1bac30 100644 --- a/strolch-wc-tree-item.html +++ b/strolch-wc-tree-item.html @@ -16,7 +16,6 @@ } .tree-item { - padding-top: 5px; width: calc(100% - 24px); } @@ -27,6 +26,9 @@ .item { line-height: 24px; margin: 0; + padding-top: 5px; + padding-bottom: 5px; + cursor: pointer; } .expandIcon { @@ -37,6 +39,7 @@ height: 24px; line-height: 24px; margin-bottom: -4px; + margin-right: 5px; } .icon-img { @@ -45,36 +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; + } +
-

+

@@ -103,7 +118,7 @@ itemClass: { type: String, - value: 'item' + computed: "computeItemClass(item, selected)" }, titleHtml: { @@ -117,6 +132,10 @@ value: null, observer: 'itemChanged' }, + selected: { + type: Boolean, + value: false + }, expanded: { type: Boolean, value: false @@ -124,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