Strolch
/
strolch-wc-tree
mirror of https://github.com/strolch-li/strolch-wc-tree.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

[New] Allow to use iron-icon as tree item icon

This commit is contained in:
Robert von Burg 2021-08-19 10:47:15 +02:00
parent 398714804c
commit dfee096978
3 changed files with 29 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
bower.json
View File

@ -1,7 +1,7 @@
{ {
"name": "strolch-wc-tree", "name": "strolch-wc-tree",
"description": "Strolch Tree View WebComponent", "description": "Strolch Tree View WebComponent",
"version": "0.1.10", "version": "0.2.0",
"authors": ["Robert von Burg"], "authors": ["Robert von Burg"],
"keywords": [ "keywords": [
"strolch", "strolch",

37
strolch-wc-tree-item.html
View File

@ -16,6 +16,7 @@
} }
.tree-item { .tree-item {
padding-top: 5px;
width: calc(100% - 24px); width: calc(100% - 24px);
} }
@ -61,10 +62,14 @@
<iron-icon class="expandIcon" <iron-icon class="expandIcon"
icon="{{_getExpandedIcon(funcObj, item, expanded)}}" icon="{{_getExpandedIcon(funcObj, item, expanded)}}"
on-tap="onToggleExpand"></iron-icon> on-tap="onToggleExpand"></iron-icon>
<span class="icon" title="{{item.state}}"><img height="16" <span class="icon" title="{{item.state}}">
width="16" <template is="dom-if" if="[[_useIcon(funcObj, item)]]">
class="icon-img" <img height="16" width="16" class="icon-img" src$="[[_getIcon(funcObj, item)]]" />
src$="{{_getIcon(funcObj, item, expanded)}}" /></span> </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]]"> <template is="dom-if" if="[[!titleHtml]]">
<span class="title" on-tap="onTitleTapped">[[_getTitle(funcObj, item)]]</span> <span class="title" on-tap="onTitleTapped">[[_getTitle(funcObj, item)]]</span>
</template> </template>
@ -79,7 +84,7 @@
selected-item="{{selectedItem}}" selected-item="{{selectedItem}}"
title-html="[[titleHtml]]" title-html="[[titleHtml]]"
func-obj="{{funcObj}}" func-obj="{{funcObj}}"
item="[[element]]" /> item="[[element]]"></strolch-wc-tree-item>
</template> </template>
</template> </template>
</div> </div>
@ -125,11 +130,11 @@
'observeSelectedItem(selectedItem)' 'observeSelectedItem(selectedItem)'
], ],
itemChanged: function (newValue, oldValue) { itemChanged: function (newValue, oldValue) {
if (newValue == null || oldValue == null || newValue.locator != oldValue.locator) if (newValue == null || oldValue == null || newValue.locator !== oldValue.locator)
this.itemClass = 'item'; this.itemClass = 'item';
}, },
observeSelectedItem: function (selectedItem) { observeSelectedItem: function (selectedItem) {
if (selectedItem != this.item) { if (selectedItem !== this.item) {
this.itemClass = 'item'; this.itemClass = 'item';
} }
}, },
@ -158,12 +163,24 @@
return 'strolch-wc-inspector-svg:tree_arrow_right'; return 'strolch-wc-inspector-svg:tree_arrow_right';
} }
}, },
_getIcon: function (funcObj, item, expanded) { _useIcon: function (funcObj, item) {
if (item == null || funcObj == null || funcObj.getElements == null) return []; 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); 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) { _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); return funcObj.getTitle(item);
}, },
_getElements: function (funcObj, item) { _getElements: function (funcObj, item) {

2
strolch-wc-tree.html
View File

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