strolch-wc-tree-item.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>