198 lines
6.5 KiB
HTML
198 lines
6.5 KiB
HTML
<!-- Imports -->
|
|
<link rel="import" href="../polymer/polymer.html">
|
|
<link rel="import" href="../paper-card/paper-card.html">
|
|
<link rel="import" href="../paper-ripple/paper-ripple.html">
|
|
|
|
<link rel="import" href="strolch-wc-tree-svg.html">
|
|
|
|
<dom-module id="strolch-wc-tree-item">
|
|
<template>
|
|
|
|
<!-- Style -->
|
|
<style is="custom-style">
|
|
:host {
|
|
@apply(--layout-horizontal);
|
|
width: 100%;
|
|
}
|
|
|
|
.tree-item {
|
|
padding-top: 5px;
|
|
width: calc(100% - 24px);
|
|
}
|
|
|
|
.child-item {
|
|
margin-left: 24px;
|
|
}
|
|
|
|
.item {
|
|
line-height: 24px;
|
|
margin: 0;
|
|
}
|
|
|
|
.expandIcon {
|
|
cursor: pointer;
|
|
}
|
|
|
|
.icon {
|
|
height: 24px;
|
|
line-height: 24px;
|
|
margin-bottom: -4px;
|
|
}
|
|
|
|
.icon-img {
|
|
margin-bottom: -4px;
|
|
}
|
|
|
|
.title {
|
|
line-height: 24px;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.selected {
|
|
background-color: #c8c8c8;
|
|
}
|
|
|
|
</style>
|
|
|
|
<!-- Requests -->
|
|
|
|
<!-- Content -->
|
|
<div class="tree-item">
|
|
<p class$="[[itemClass]]">
|
|
<iron-icon class="expandIcon"
|
|
icon="{{_getExpandedIcon(funcObj, item, expanded)}}"
|
|
on-tap="onToggleExpand"></iron-icon>
|
|
<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>
|
|
</template>
|
|
<template is="dom-if" if="[[titleHtml]]">
|
|
<span class="title" on-tap="onTitleTapped" inner-h-t-m-l="[[_getTitle(funcObj, item)]]"></span>
|
|
</template>
|
|
</p>
|
|
|
|
<template is="dom-if" if="{{expanded}}">
|
|
<template is="dom-repeat" items="[[_getElements(funcObj, item)]]" as="element">
|
|
<strolch-wc-tree-item class="child-item"
|
|
selected-item="{{selectedItem}}"
|
|
title-html="[[titleHtml]]"
|
|
func-obj="{{funcObj}}"
|
|
item="[[element]]"></strolch-wc-tree-item>
|
|
</template>
|
|
</template>
|
|
</div>
|
|
|
|
</template>
|
|
|
|
<script>
|
|
Polymer({
|
|
|
|
/* Component */
|
|
is: "strolch-wc-tree-item",
|
|
behaviors: [],
|
|
|
|
/* Properties */
|
|
properties: {
|
|
|
|
itemClass: {
|
|
type: String,
|
|
value: 'item'
|
|
},
|
|
|
|
titleHtml: {
|
|
type: Boolean,
|
|
reflectToAttribute: true,
|
|
value: false
|
|
},
|
|
|
|
item: {
|
|
type: Object,
|
|
value: null,
|
|
observer: 'itemChanged'
|
|
},
|
|
expanded: {
|
|
type: Boolean,
|
|
value: false
|
|
}
|
|
},
|
|
|
|
/* Computations */
|
|
|
|
/* Observers */
|
|
observers: [
|
|
'observeSelectedItem(selectedItem)'
|
|
],
|
|
itemChanged: function (newValue, oldValue) {
|
|
if (newValue == null || oldValue == null || newValue.locator !== oldValue.locator)
|
|
this.itemClass = 'item';
|
|
},
|
|
observeSelectedItem: function (selectedItem) {
|
|
if (selectedItem !== this.item) {
|
|
this.itemClass = 'item';
|
|
}
|
|
},
|
|
onToggleExpand: function (e) {
|
|
this.expanded = !this.expanded;
|
|
},
|
|
onTitleTapped: function (e) {
|
|
this.itemClass = 'item selected';
|
|
this.fire('strolch-wc-tree-item-selected', {
|
|
rootItem: this.rootItem,
|
|
item: this.item
|
|
});
|
|
},
|
|
|
|
/* Listeners */
|
|
listeners: {},
|
|
|
|
/* Private */
|
|
_getExpandedIcon: function (funcObj, item, expanded) {
|
|
if (item == null || funcObj == null || funcObj.getElements == null) return [];
|
|
if (!funcObj.hasElements(item)) {
|
|
return '';
|
|
} else if (expanded) {
|
|
return 'strolch-wc-inspector-svg:tree_arrow_down';
|
|
} else {
|
|
return 'strolch-wc-inspector-svg:tree_arrow_right';
|
|
}
|
|
},
|
|
_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 "";
|
|
return funcObj.getTitle(item);
|
|
},
|
|
_getElements: function (funcObj, item) {
|
|
if (item == null || funcObj == null || funcObj.getElements == null) return [];
|
|
return funcObj.getElements(item);
|
|
},
|
|
|
|
/* Public */
|
|
|
|
/* Lifecycle */
|
|
|
|
});
|
|
</script>
|
|
</dom-module>
|