strolch-wc-tree/strolch-wc-tree-item.html

235 lines
7.6 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 {
width: calc(100% - 24px);
}
.child-item {
margin-left: 24px;
}
.item {
line-height: 24px;
margin: 0;
padding-top: 5px;
padding-bottom: 5px;
cursor: pointer;
}
.expandIcon {
cursor: pointer;
}
.icon {
height: 24px;
line-height: 24px;
margin-bottom: -4px;
margin-right: 5px;
}
.icon-img {
margin-bottom: -4px;
}
.title {
line-height: 24px;
}
.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]]" on-tap="onTitleTapped">
<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">[[_getTitle(funcObj, item)]]</span>
</template>
<template is="dom-if" if="[[titleHtml]]">
<span class="title" 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,
computed: "computeItemClass(item, selected)"
},
titleHtml: {
type: Boolean,
reflectToAttribute: true,
value: false
},
item: {
type: Object,
value: null,
observer: 'itemChanged'
},
selected: {
type: Boolean,
value: false
},
expanded: {
type: Boolean,
value: false
}
},
/* 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) {
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.selected = false;
},
onToggleExpand: function (e) {
this.expanded = !this.expanded;
},
onTitleTapped: function (e) {
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
});
},
/* 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>