hc-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-tristate-checkbox/paper-tristate-checkbox.html">
<link rel="import" href="hc-nested-list-item.html">

<!--
`hc-tree-node` a node for the tree view, handles the basic node template with proper tristate selection handling.

### Styling
Custom property | Description | Default
----------------|-------------|----------
`--hc-tree-node` | A mixin to style the host | {}
`--hc-tree-node-checkbox` | A mixin to style the checkbox | {}
`--hc-tree-node-depth` | The depth value for displaying this item as nested | item.depth
`--hc-tree-node-icon` | A mixin to style the icon | {}
`--hc-tree-node-icon-open` | A mixin to style the icon when open | {}
`--hc-tree-node-icon-closed` | A mixin to style the icon when closed | {}
`--hc-tree-node-icon-hidden` | A mixin for styling the icon when it is invisible | {}
`--hc-tree-node-label` | A mixin to style the label | {}
`--hc-tree-node-padding` | The amount of padding to use for each layer of depth added | 25px

@demo demo/index.html
-->
<dom-module id="hc-tree-node">
  <template>
    <style>
      :host {
        display: inline-block;
        padding-left: calc(var(--hc-tree-node-depth, 0) * var(--hc-tree-node-padding, 25px)) !important;
        --paper-tristate-checkbox-label-spacing: 0;

        @apply --hc-tree-node;
      }
      #checkbox {
        @apply --hc-tree-node-checkbox;
      }
      #icon {
        @apply --hc-tree-node-icon;
      }
      #icon[open] {
        @apply --hc-tree-node-icon-open;
      }
      #icon:not([open]) {
        @apply --hc-tree-node-icon-closed;
      }
      #icon:not([visible]) {
        visibility: hidden;

        @apply --hc-tree-node-icon-hidden;
      }
      #label {
        @apply --hc-tree-node-label;
      }
    </style>

    <hc-nested-list-item item="{{item}}">
      <slot name="icon">
        <iron-icon
          id="icon"
          icon="[[_getIcon(item.open)]]"
          open$="[[item.open]]"
          visible$="[[item.hasChildren]]"
        ></iron-icon>
      </slot>
      <slot name="checkbox">
        <paper-tristate-checkbox
          id="checkbox"
          state="{{item.state}}"
          value="{{value}}"
          checked="[[checked]]"
          unchecked="[[unchecked]]"
          indeterminate="[[indeterminate]]"
          on-state-changed="_stateChanged"
        ></paper-tristate-checkbox>
      </slot>
      <slot name="label">
        <span id="label">[[item.label]]</span>
      </slot>
    </hc-nested-list-item>
  </template>

  <script>
    Polymer({
      is: 'hc-tree-node',
      properties: {
        /* The value to use when state="on" */
        checked: {
          type: Boolean,
          value: true
        },
        /* The icon to use when the item is closed */
        closedIcon: {
          type: String,
          value: 'icons:chevron-right'
        },
        /* The value to use when state=null */
        indeterminate: {
          type: Boolean,
          value: false
        },
        /* This node's data */
        item: Object,
        /* The icon to use when the item is open */
        openIcon: {
          type: String,
          value: 'icons:expand-more'
        },
        /* The value to use when state="off" */
        unchecked: {
          type: Boolean,
          value: false
        },
        /* Holds the value that determines selected status for the item */
        value: {
          type: Boolean,
          observer: '_valueChanged'
        },
        /**
         * Used to determine when this element is in initialization state to prevent extra events
         *
         * @private
         */
        __init: {
          type: Boolean,
          value: true
        }
      },
      observers: ['_updateDepth(item.depth)'],
      ready() {
        /**
         * Overload the default tap functionality to prevent user clicks from setting indeterminate state,
         *  and to prevent event bubbling.  This is using an annonymous function to keep the correct scope
         *  that is provided by the checkbox element instead of an arrow function which will use the local
         *  scope.
         *
         * @protected
         * @param {Event} event
         */
        this.$.checkbox._regularTap = function (event) {
          event.stopPropagation();
          this.state = this.state === 'on' ? 'off' : 'on';
        };
      },
      /**
       * Returns the openIcon when open is true, otherwise it returns the closedIcon.
       *
       * @private
       * @param {Boolean} open
       * @returns {String}
       */
      _getIcon(open) {
        return open ? this.openIcon : this.closedIcon;
      },
      /**
       * Watches for changes to the value for the checkbox then notifies the parent of selection changes.
       *
       * @private
       * @fires hc-tree-view-behavior#item-state-changed
       * @param {CustomEvent} event
       * @param {Object} detail
       */
      _stateChanged(event, detail) {
        // Prevent firing events if we don't have the necessary data
        if (!this.item) return;

        // When a change event happens, inform the list
        this.fire('item-state-changed', {
          item: this.item,
          state: detail.value
        });
      },
      _updateDepth(depth) {
        this.updateStyles({
          '--hc-tree-node-depth': String(depth)
        });
      },
      /**
       * Watches for changes to the value for the checkbox then notifies the parent of selection changes.
       *
       * @private
       * @fires hc-tree-view-behavior#item-selected-changed
       * @param {Boolean} value
       */
      _valueChanged(value) {
        // Prevent firing events if we don't have the necessary data
        if (!this.item) return;
        // Prevent the initial event that happens upon loading
        else if (this.__init) {
          this.__init = false;
          return;
        }

        // When a change event happens, inform the list
        this.fire('item-selected-changed', {
          item: this.item,
          selected: value
        });
      }
    });
  </script>
</dom-module>