Compare commits
9 Commits
Author | SHA1 | Date |
---|---|---|
Robert von Burg | 63f92f6bf1 | |
Robert von Burg | 9fb030ae7e | |
Robert von Burg | c6639f5d63 | |
Robert von Burg | 244d07b39c | |
Robert von Burg | 7b0cca193b | |
Robert von Burg | 0f34500fa0 | |
Robert von Burg | dfee096978 | |
Robert von Burg | 398714804c | |
Robert von Burg | 2146158545 |
14
bower.json
14
bower.json
|
@ -1,7 +1,7 @@
|
|||
{
|
||||
"name": "strolch-wc-tree",
|
||||
"description": "Strolch Tree View WebComponent",
|
||||
"version": "0.1.8",
|
||||
"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.1",
|
||||
"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",
|
||||
|
||||
|
|
|
@ -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) {
|
||||
|
|
|
@ -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>
|
||||
|
|
Loading…
Reference in New Issue