actindo-tree-node.html

<link rel="import" href="../polymer/polymer.html">
<link rel="import" href="../iron-icon/iron-icon.html">
<link rel="import" href="../iron-icons/iron-icons.html">

<link rel="import" href="../paper-menu-button/paper-menu-button.html">
<link rel="import" href="../paper-icon-button/paper-icon-button.html">
<link rel="import" href="../paper-listbox/paper-listbox.html">
<link rel="import" href="../paper-item/paper-item.html">

<!--
`<paper-tree-node>` display a tree node with expandable/collapsible capabilities and actions menu.
A node is defined by a name, an icon and a list of actions.
Example:
    <paper-tree-node></paper-tree-node>
### Styling
The following custom properties and mixins are available for styling:
Custom property | Description | Default
----------------|-------------|----------
`--paper-tree-selected-background-color`      | Highlight color for selected node           | `rgba(200, 200, 200, 0.5)`
`--paper-tree-selected-color`                 | Text and icon color for selected node       | `inherit`
`--paper-tree-toggle-theme`                   | Change theme for node +/- toggle            |
`--paper-tree-icon-theme`                     | Change theme for node icon                  |
@demo
-->
<dom-module id="actindo-tree-node">
    <template>
        <style>
            :host(.selected) > .node-container > .node-row {
                color: var(--actindo-primary);
                @apply(--tree-node-styles);
            }
		    .node-container.level-1 {
                @apply(--actindo-tree-node-container);
            }
            .node-row {
                padding: 4px 20px;
                display: flex;
                align-items: center;
                cursor: pointer;
            }
            .node-preicon.collapsed,
            .node-preicon.expanded {
                padding-left: 0px;
            }
            .node-preicon.expanded
            {
                color: var(--actindo-secondary);
            }
            .node-preicon.collapsed
            {
                color: var(--actindo-secondary);
                opacity: 0.72;
            }

            .node-preicon, .node-name {
                display: flex;
                height: 24px;
                align-items: center;
            }
            .node-name
            {
                width: 100%;
            }
            .node-icon {
                width: 24px;
                height: 24px;
                margin-right: 5px;

            }
            ul {
                margin: 0;
                padding: 0;
            }
            li {
                list-style-type: none;
            }
            [hidden] {
                display: none;
            }
            .level-1 .no-children-true
            {
                padding-left: 4px;
            }
            paper-checkbox
            {
                margin-left: 5px;
                pointer-events: none;
                --paper-checkbox-unchecked-color: rgba(85, 95, 97, 0.7);
            }
            paper-checkbox[partial]:after {
                opacity: 1;
            }
           .no-expanded
            {
                visibility: hidden;
            }
            iron-icon
            {
                opacity: 0.7;
            }
            .selector {
                position: relative;
            }
            .selector:after {
                background: #000;
                content: "";
                display: block;
                font-weight: bold;
                height: 2px;
                left: 6px;
                opacity: 0;
                position: absolute;
                top: 8px;
                transition: opacity 200ms;
                width: 6px;
            }
            .selector[partial]:after {
                opacity: 1;
            }
        </style>
        <div class$="node-container level-[[level]] [[class]]">
            <div class="node-row"  style$="[[_computeStyle(level)]]" on-click="_onNodeClick">
                <iron-icon id="toggle" class$="{{_computeClass(item.*, opened)}}" icon$="{{_computeNodeIcon(item.*, opened)}}"></iron-icon>
                <template is="dom-if" if="[[_isMultiple()]]">
                    <paper-checkbox class="selector" partial$="[[partiallySelected]]" checked="{{selected}}" disabled="[[disabled]]"></paper-checkbox>
                </template>
                <iron-icon hidden$="{{!_computeIcon(item.*)}}" class="node-icon" icon$="{{_computeIcon(item.*)}}"></iron-icon>
                <span class$="no-children-{{!_computeNodeIcon(item.*)}} node-name">[[_getNodeLabel(item)]]</span>
            </div>
            <template is="dom-if" if="[[shouldRenderChildren]]">
                <ul id="children" hidden="[[!opened]]">
                    <template is="dom-if" if="[[_isMultipleDependentSelection()]]">
                        <template is="dom-repeat" items="{{item.children}}" as="child">
                            <li>
                                <actindo-tree-node
                                    type="[[type]]"
                                    on-select="_onChildSelect"
                                    level="[[_getChildLevel()]]"
                                    class="child-node"
                                    item="{{child}}"
                                    multiple
                                    parent-selected="{{selected}}"
                                    selection-mode="[[selectionMode]]"
                                    selected-nodes="{{selectedNodes}}"
                                    display-field="[[displayField]]"
                                    show-default-icon="[[showDefaultIcon]]"
                                    selected-items="[[selectedItems]]"
                                    trigger-node-level="{{triggerNodeLevel}}"
                                    flatten-items="[[flattenItems]]"
                                    leaves-selectable-only="[[leavesSelectableOnly]]"
                                    disabled="[[disabled]]"
                                    on-rendered-changed="_onChildRendered"
                                ></actindo-tree-node>
                            </li>
                        </template>
                    </template>
                    <template is="dom-if" if="[[_isMultipleInDependentSelection()]]">
                        <template is="dom-repeat" items="{{item.children}}" as="child">
                            <li>
                                <actindo-tree-node
                                    type="[[type]]"
                                    on-select="_onChildSelect"
                                    level="[[_getChildLevel()]]"
                                    class="child-node"
                                    item="{{child}}"
                                    multiple
                                    display-field="[[displayField]]"
                                    selection-mode="[[selectionMode]]"
                                    selected-nodes="{{selectedNodes}}"
                                    show-default-icon="[[showDefaultIcon]]"
                                    selected-items="[[selectedItems]]"
                                    leaves-selectable-only="[[leavesSelectableOnly]]"
                                    flatten-items="[[flattenItems]]"
                                    disabled="[[disabled]]"
                                    on-rendered-changed="_onChildRendered"
                                ></actindo-tree-node>
                            </li>
                        </template>
                    </template>
                    <template is="dom-if" if="[[!_isMultiple()]]">
                        <template is="dom-repeat" items="{{item.children}}" as="child">
                            <li>
                                <actindo-tree-node
                                    type="[[type]]"
                                    on-select="_onChildSelect"
                                    level="[[_getChildLevel()]]"
                                    class="child-node"
                                    item="{{child}}"
                                    multiple="[[multiple]]"
                                    display-field="[[displayField]]"
                                    allow-deselect="[[allowDeselect]]"
                                    selected-nodes="{{selectedNodes}}"
                                    show-default-icon="[[showDefaultIcon]]"
                                    selected-items="[[selectedItems]]"
                                    leaves-selectable-only="[[leavesSelectableOnly]]"
                                    flatten-items="[[flattenItems]]"
                                    disabled="[[disabled]]"
                                    on-rendered-changed="_onChildRendered"
                                ></actindo-tree-node>
                            </li>
                        </template>
                    </template>
                </ul>
            </template>
        </div>
    </template>
    <script>
        class ActindoTreeNode extends Polymer.Element {
            static get is() { return 'actindo-tree-node'; }
            static get properties() {
                return {
                    /**
                     * Data hold by the root node (contains the children).
                     *
                     * Specific item:
                     *
                     * - `item.name`: string representing the node name.
                     * - `item.icon`: string telling which icon to use (default to 'folder' icon).
                     * - `item.children` array containing the children of the node.
                     */
                    item: {
                        type: Array,
                        value: function() {return [];},
                        notify: true
                    },
                    /**
                     * current node level
                     */
                    level: {
                        type: Number,
                        value: 1
                    },
                    selectionMode: {
                        type: String,
                        value: 'dependent'
                    },
                    showDefaultIcon: {
                        type: Boolean
                    },
                    class: {
                        type: String
                    },
                    /**
                     * Selection Mode of tree
                     */
                    type: {
                        type: String,
                        value: 'single'
                    },
                    selected: {
                        type: Boolean,
                        value: false,
                        observer: '_onSelectedChanged'
                    },
                    parentSelected: {
                        type: Boolean,
                        value: false,
                        observer: '_onParentSelectedChanged'
                    },
                    /**
                     * property that indicates if a partial selection is active (at least one item, but not all)
                     */
                    partiallySelected: {
                        type: Boolean,
                        value: false
                    },
                    multiple: {
                        type: Boolean,
                        value: false
                    },
                    selectedItems: {
                        type: Array,
                        observer: "_onSelectedItemsChanged"
                    },
                    selectedNodes: {
                        type: Array,
                        notify: true,
                        value: function() { return [] }
                    },
                    triggerNodeLevel: {
                        type: Number,
                        notify: true
                    },
                    shouldRenderChildren: {
                        type: Boolean,
                        value: false
                    },
                    opened: {
                        type: Boolean,
                        value: false,
                    },
                    displayField: {
                        type: String,
                        value: 'name'
                    },
                    flattenItems: {
                        type: Array,
                    },
                    parentIcon: {
                        type: String,
                        value: 'tree:multi-folders'
                    },
                    leafIcon: {
                        type: String,
                        value: 'tree:folder'
                    },
                    noIcon: {
                        type: Boolean,
                        value: false
                    },
                    /**
                     * Allow only leaf nodes are selectable
                     */
                    leavesSelectableOnly: {
                        type: Boolean,
                        value: false
                    },
                    allowDeselect: {
                        type: Boolean,
                        value: false
                    },
                    /**
                     * if this is true, this node and its children are not selectable
                     * @type Boolean
                     */
                    disabled: {
                        type: Boolean,
                        value: false
                    },
                    childrenRenderedCount: {
                        type: Number,
                        value: 0
                    },
                    childrenFinishedRendering: {
                        type: Boolean,
                        value: false
                    },
                    lastChildSelectEvent: {
                        type: Object,
                        value: null
                    },
                    rendered: {
                        type: Boolean,
                        notify: true
                    }
                }
            }

            connectedCallback() {
                super.connectedCallback();
                if(!this.item.children.length || !this.opened)
                {
                    setTimeout(() => {
                        this.rendered = true;
                    }, 0);
                }
            }

            _onChildRendered(event) {
                event.stopPropagation();
                if(++this.childrenRenderedCount === this.item.children.length)
                {
                    this.childrenFinishedRendering = true;
                    if(this.lastChildSelectEvent)
                    {
                        this._onChildSelect(this.lastChildSelectEvent);
                    }
                    setTimeout(() =>{
                        this.rendered = true;
                    }, 0);
                }
            }

            /**
             * The `select` event is fired whenever `_select()` is called on the node.
             *
             * @event select
             */
            /**
             * Returns the necessary classes.
             *
             * @param {object} change An object containing the property that changed and its value.
             * @return {string} The class name indicating whether the node is open or closed
             */
            _computeClass(change, open) {
                var children = change && change.base && change.base.children;
                return 'node-preicon ' + ((open && children && children.length) ? 'expanded' : children && children.length ? 'collapsed' : 'no-expanded');
            };

            _isMultiple()
            {
                return this.multiple;
            }

            _isMultipleDependentSelection()
            {
                return this.multiple && this.selectionMode === 'dependent';
            }

            _isMultipleInDependentSelection()
            {
                return this.multiple && this.selectionMode === 'independent';
            }

            _computeStyle(level)
            {
                return `padding-left: ${(level-1) * 20}px`;
            }

            _getChildLevel()
            {
                return this.level + 1;
            }

            _onParentSelectedChanged(selected)
            {
                if (this.triggerNodeLevel && this.triggerNodeLevel >= this.level)
                {
                    return;
                }
                this.selected = selected;
                if (!selected)
                {
                    this.classList.remove("selected");
                }
                else
                {
                    this.classList.add("selected");
                }
            }

            _onSelectedChanged(selected, previousValue)
            {
                if(!previousValue && !selected)
                {
                    return;
                }
                const index = this.selectedNodes.indexOf(this);

                if (!selected && index >= 0)
                {
                    this.classList.remove("selected");
                    this.splice('selectedNodes', index, 1);
                }
                if (selected && index < 0)
                {
                    this.partiallySelected = false;
                    this.classList.add("selected");
                    this.push('selectedNodes', this);
                }
            }

            _onSelectedItemsChanged(selectedItemsNew, selectedItemsOld)
            {
                let selectedNodes = [...this.selectedNodes];
                if (this._isMultipleDependentSelection())
                {
                    selectedNodes = selectedNodes.filter(node => !node.parentSelected || !node.item.parent);
                }
                // selectedNodes = selectedNodes.filter(node => selectedItemsNew.includes(node.item));
                if (selectedNodes.length === selectedItemsNew.length)
                {
                    return;
                }

                if (selectedItemsNew.filter(i => i.id === this.item.id).length)
                {
                    this.setNodeStatus(true);
                }
                else
                {
                    if (this.opened)
                    {
                        return;
                    }
                    selectedItemsNew.find(selectedItem => {
                        const path = this.flattenItems[selectedItem.id].path;
                        const nodeIds = path.toString().split('__');
                        if (nodeIds.includes(this.item.id.toString()))
                        {
                            this.set('shouldRenderChildren', true);
                            this.set('opened', true);
                            return true;
                        }

                    });
                }
            }
            /**
             * Returns the necessary icon name.
             *
             * @param {object} change An object containing the property that changed and its value.
             * @return {string} The icon name indicating whether the node is open or closed
             */
            _computeNodeIcon(change, open) {
                var children = change && change.base && change.base.children;
                return ((open && children && children.length) ? 'tree:expand-more' : children && children.length ? 'tree:expand-less' : '');
            };

            /**
             * Compute the necessary node icon.
             *
             * @param {string=folder} an icon name.
             * @return {string} the computed icon name.
             */
            _computeIcon(change) {
                if (this.noIcon)
                {
                    return '';
                }
                var children = change && change.base && change.base.children;
                if (children && children.length > 0)
                {
                    return this.parentIcon;
                }
                return this.leafIcon;
            };

            _onChildSelect(event)
            {
                this.lastChildSelectEvent = event;

                if(!this.childrenFinishedRendering)
                {
                    return;
                }

                if (!this._isMultipleDependentSelection())
                {
                    this.set('opened', true);
                    this.dispatchEvent(new CustomEvent('select', { detail: event.detail, item: event.item }));
                    return;
                }

                const selectedItems = this.selectedNodes.map(node => node.item);
                const selectedChildren = this.item.children.filter(child => selectedItems.includes(child) );
                const partiallySelectedChildren = this.item.children.filter( child => child.partiallySelected );
                if (selectedChildren.length + partiallySelectedChildren.length  === 0)
                {
                    this.partiallySelected = false;
                    this.item.partiallySelected = false;
                    this.selected = false;
                }
                else if (selectedChildren.length === this.item.children.length)
                {
                    this.partiallySelected = false;
                    this.item.partiallySelected = false;
                    this.selected = true;
                }
                else
                {
                    this.partiallySelected = true;
                    this.item.partiallySelected = true;
                    this.selected = false;
                }
                this.dispatchEvent(new CustomEvent('select', { detail: event.detail, item: event.item }));
            }

            _onNodeClick(e)
            {
                // In Multi selection mode, do not change the status of node when clicking on toggle button
                // In Single selection mode, if non-leafs are selectable, only expand when clicking on the arrow otherwise just select
                if (e.target && e.target.id === 'toggle' && (this._isMultiple() || !this.leavesSelectableOnly))
                {
                    this.set("shouldRenderChildren", true);
                    this.set("opened", !this.opened && this.item.children && this.item.children.length);
                    return;
                }

                if(this.disabled)
                {
                    return;
                }

                if (e.target && e.target.id !== 'toggle')
                {
                    this.triggerNodeLevel = this.level;
                }
                this.setNodeStatus(!this.selected);
            }

            setNodeStatus(selected)
            {
                // Show/Hide the children nodes when click node row
                if (!this._isMultiple())
                {
                    if (this.leavesSelectableOnly && this.item.children && this.item.children.length)
                    {
                        this.set("opened", !this.opened );
                        this.set("shouldRenderChildren", true);
                        return;
                    }
                    if (this.selectedNodes.length && selected)
                    {
                        if( this.selectedNodes[0] !== this || !this.allowDeselect  )
                        {
                            this.selectedNodes[0].selected = !this.selectedNodes[0].selected; //if this line is not execute in the following statement the current node gets deselected
                        }
                    }

                    this.selected = !this.selected; //select new node or when clicking on same potentially deselect the current selected node
                    this.dispatchEvent(new CustomEvent('select', { detail: this, item: this.item}));
                    return;
                }
                this.partiallySelected = false;
                this.selected = selected;

                this.dispatchEvent(new CustomEvent('select', { detail: this, item: this.item}));
            }

            _getNodeLabel(item)
            {
                return Polymer.Path.get(item, this.displayField);
            }

            /**
             * Returns the parent tree node. Returns `null` if root.
             */
            getParent() {
                if( this.getRootNode().host === undefined )
                {
                    return null;
                }
                return this.getRootNode().host.tagName === 'ACTINDO-TREE-NODE' ? this.getRootNode().host : null;
            };

            /**
             * Returns the children tree nodes.
             */
            getChildren() {
                return this.root.querySelectorAll('actindo-tree-node');
            };
        };
        window.customElements.define(ActindoTreeNode.is, ActindoTreeNode);
    </script>

</dom-module>