h2-select.js

/*
`h2-select`

Example:
```html
<h2-select label="球员" placeholder="选择球员" items="[[items]]"></h2-select>
<h2-select label="球员" placeholder="选择球员" multi items="[[items]]" value="1,2"></h2-select>

<script>
  items = [
    {"label": "梅西", "value": 1},
    {"label": "C罗", "value": 2},
    {"label": "苏亚雷斯", "value": 3},
    {"label": "库蒂尼奥", "value": 4},
    {"label": "特尔斯特根", "value": 5},
    {"label": "保利尼奥", "value": 6},
    {"label": "内马尔", "value": 13}
  ];
```
## Styling

The following custom properties and mixins are available for styling:

|Custom property | Description | Default|
|----------------|-------------|----------|
|`--h2-select-label` | Mixin applied to the select label | {}
|`--h2-select-tag` | Mixin applied to the selected tag | {}
|`--h2-select-tag-deleter` | Mixin applied to the deleter of each tag| {}
|`--h2-select-tag-cursor` | Mixin applied to the cursor of the select | {}
|`--h2-select-dropdown` | Mixin applied to the dropdown snippet of the select | {}

*/
/*
  FIXME(polymer-modulizer): the above comments were extracted
  from HTML and may be out of place here. Review them and
  then delete this comment!
*/
import './behaviors/base-behavior.js';

import './behaviors/h2-elements-shared-styles.js';
import './h2-label.js';
/**
 *
 * @customElement
 * @polymer
 * @demo demo/h2-select/index.html
 */
class H2Select extends Polymer.mixinBehaviors([BaseBehavior], Polymer.Element) {
  static get template() {
    return Polymer.html`
    <style include="h2-elements-shared-styles">
      :host {
        display: flex;
        width: 300px;
        height: 34px;
        line-height: 34px;
        font-size: 14px;
        position: relative;
        background: white;
      }

      h2-label {
        @apply --h2-select-label;
      }

      #select__container {
        flex: 1;
        display: flex;
        /*height: inherit;*/
        border: 1px solid #CCC;
        border-radius: 4px;
        position: relative;
      }

      .tags__container {
        flex: 1;
        position: relative;
        display: flex;
        text-align: left;
      }

      .select__container__viewer {
        flex: 1;
        display: flex;
        flex-wrap: nowrap;
      }

      #caret {
        height: inherit;
      }

      #tag-content {
        flex: 1;

        display: flex;
        flex-wrap: wrap;
        align-content: flex-start;
        overflow-y: auto;
        padding: 4px;
      }

      .tag {
        color: #666;
        background-color: #f0f0f0;
        border: 1px solid #ccc;
        border-radius: 4px;

        margin: 2px 2px 3px 2px;
        padding: 0 4px;
        height: 22px;
        line-height: 22px;
        max-width: 200px;

        display: flex;
        font-size: 14px;
        white-space: nowrap;
        cursor: default;
        @apply --h2-select-tag;
      }

      .tag-name {
        flex: 1;
        overflow: hidden;
        text-overflow: ellipsis;
      }

      .tag-deleter {
        margin-left: 6px;
        font-weight: bold;
        text-decoration: none;
        color: #0099FF;
        @apply --h2-select-tag-deleter;
      }

      .tag-deleter:hover {
        color: #f60;
      }

      .tag-cursor {
        font-size: 16px;
        line-height: 30px;
        height: 30px;

        @apply --h2-select-tag-cursor;

        border: none;
        outline: none;
        padding: 0;
        margin: 0;
        width: 1px;
      }

      #select-collapse {
        -webkit-transition: max-height 200ms ease-in;
        -moz-transition: max-height 200ms ease-in;
        -ms-transition: max-height 200ms ease-in;
        -o-transition: max-height 200ms ease-in;
        transition: max-height 200ms ease-in;

        max-height: 0;
        position: absolute;
        top: 100%;
        width: 100%;
        overflow-y: auto;
        z-index: 99;
        margin-top: 1px;

        font-size: 14px;
        text-align: left;
        background-color: #fff;
        -moz-border-radius: 4px;
        -webkit-border-radius: 4px;
        border-radius: 4px;
        -moz-box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175);
        -webkit-box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175);
        box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175);
        background-clip: padding-box;
        @apply --h2-select-dropdown;
      }

      #select-collapse[data-collapse-open] {
        max-height: 300px;
      }

      .selector-panel {
        display: block;
        padding: 5px;
      }

      .candidate-item {
        text-align: left;
        padding: 0 8px;
        margin-bottom: 1px;
        font-size: 12px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        height: 22px;
        line-height: 22px;
        cursor: pointer;
      }

      .candidate-item:not([class*='iron-selected']):hover {
        color: #0099FF;
      }

      .iron-selected {
        background-color: #0099FF;
        color: #fff;
      }

      .iron-selected:hover {
        opacity: 0.8;
      }

      #placeholder[hidden] {
        display: none;
      }

      #placeholder {
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;

        opacity: 0.5;
        padding: 0 6px;
        overflow: hidden;
        white-space: nowrap;
      }

      :host([required])::after {
        content: "*";
        color: red;
        position: absolute;
        right: -15px;
        line-height: inherit;
      }
    </style>
    <h2-label value="[[label]]"></h2-label>
    <div id="select__container">
      <div class="select__container__viewer" on-click="_onInputClick">
        <div class="tags__container">
          <div id="placeholder">[[placeholder]]</div>
          <div id="tag-content">
            <input class="tag-cursor" id="tag-cursor__-1" data-cursor-index="-1" on-keydown="_updatePressed" autocomplete="off">
            <template is="dom-repeat" items="[[ selectedValues ]]">
              <div class="tag">
                <div class="tag-name" title="[[getValueByKey(item, attrForLabel)]]">
                  [[getValueByKey(item, attrForLabel)]]
                </div>
                <a class="tag-deleter" data-args="[[getValueByKey(item, attrForValue)]]" href="javascript:void(0);" title="删除该选项" on-click="_deleteTag">x</a>
              </div>
              <input class="tag-cursor" id="tag-cursor__[[index]]" data-cursor-index\$="[[index]]" on-keydown="_updatePressed" autocomplete="off">
            </template>
          </div>
        </div>
        <iron-icon id="caret" icon="icons:arrow-drop-down"></iron-icon>
      </div>

      <div id="select-collapse" on-click="__focusOnLast">
        <iron-selector class="selector-panel" multi="[[ multi ]]" selected="{{ __selected }}" selected-values="{{ selectedValues }}" attr-for-selected="candidate-item">
          <template is="dom-repeat" items="[[items]]">
            <div class="candidate-item" candidate-item="[[item]]" title="[[getValueByKey(item, attrForLabel)]]">
              [[getValueByKey(item, attrForLabel)]]
            </div>
          </template>
        </iron-selector>
      </div>

      <div class="mask"></div>
    </div>
`;
  }

  static get properties() {
    return {
      /**
       * The selected value of this select,  if `multi` is true,
       * the value will join with comma ( `selectedValues.map(selected => selected[this.attrForValue]).join(',')` ).
       * @type {String}
       */
      value: {
        type: String,
        notify: true
      },

      /**
       * The selected value objects of this select.
       * @type {array}
       */
      selectedValues: {
        type: Array,
        notify: true
      },

      /**
       *
       * The candidate selection of this select.
       *
       * @attribute items
       * @type {array}
       */
      items: {
        type: Array
      },

      __selected: {
        type: Object
      },

      /**
       *
       * @attribute label
       * @type {String}
       */
      label: {
        type: String
      },
      /**
       * The placeholder of the select.
       * @type {String}
       */
      placeholder: {
        type: String
      },
      /**
       * If true, multiple selections are allowed.
       * @type {boolean}
       * @default false
       */
      multi: {
        type: Boolean,
        value: false
      },

      /**
       * Set to true, if the selection is required.
       * @type {boolean}
       * @default false
       */
      required: {
        type: Boolean,
        value: false
      },
      /**
       * Set to true, if the select is readonly.
       * @type {boolean}
       * @default false
       */
      readonly: {
        type: Boolean,
        value: false
      },
      /**
       * Attribute name for value.
       * @type {string}
       * @default 'value'
       */
      attrForValue: {
        type: String,
        value: "value"
      },
      /**
       *
       * Attribute name for label.
       *
       * @type {string}
       * @default 'label'
       */
      attrForLabel: {
        type: String,
        value: "label"
      }
    };
  }

  static get is() {
    return "h2-select";
  }

  static get observers() {
    return [
      '_valueChanged(value, items)',
      '_selectedValuesChanged(selectedValues.splices)',
      '__selectedChanged(__selected)'
    ];
  }

  connectedCallback() {
    super.connectedCallback();
    this.addEventListener('blur', e => {
      this.closeCollapse();
    });
  }

  /**
   * 点击事件
   */
  _onInputClick({target: {classList}}) {
    if (classList.contains('tag-deleter') || classList.contains('tag-cursor')) {
      return;
    }

    this.toggleCollapse();
  }

  _valueChanged(value, items = []) {
    const values = String(value).split(",").map(str => str.trim());
    const flatValues = [...(new Set(values))];

    const dirty = (this.selectedValues || []).map(selected => selected[this.attrForValue]).join(',');
    if (dirty !== value) {
      this.selectedValues =
        flatValues.map(val => items.find(item => item[this.attrForValue] == val))
          .filter(selected => typeof selected !== 'undefined');

      if (!this.multi) {
        this.__selected = items.find(item => item[this.attrForValue] == flatValues[0]);
      }
    }

    this._displayPlaceholder(this.selectedValues.length === 0)
  }

  _selectedValuesChanged() {
    if(this.selectedValues.length > 0) {
      this.value = this.selectedValues.map(selected => selected[this.attrForValue]).join(',');
    } else {
      this.value = undefined;
    }
    this.closeCollapse();
  }

  __selectedChanged() {
    this.selectedValues = this.__selected ? [this.__selected] : [];
  }

  /**
   * 删除Tag项，事件处理函数
   */
  _deleteTag(e) {
    let value = e.target.dataArgs;
    const ind = this.selectedValues.findIndex(selected => selected[this.attrForValue] == value);
    this.splice("selectedValues", ind, 1);
  }

  /**
   * @param event
   * @private
   */
  _updatePressed(event) {
    let cursorIndex = event.target.dataset.cursorIndex;
    switch (event.key) {
      case "ArrowLeft":
        cursorIndex = cursorIndex > 0 ? --cursorIndex : -1;
        break;
      case "ArrowRight":
        const max = this.selectedValues.length - 1;
        cursorIndex = cursorIndex < max ? ++cursorIndex : max;
        break;
      case "Backspace":
        if (cursorIndex >= 0) {
          this.splice('selectedValues', cursorIndex, 1);
        }
        cursorIndex = cursorIndex > 0 ? --cursorIndex : -1;
        break;
    }

    const currCursor = this.shadowRoot.querySelector(`#tag-cursor__${cursorIndex}`);
    currCursor && currCursor.focus();
  }

  __focusOnLast() {
    const lastCursor = this.shadowRoot.querySelector(`#tag-cursor__${this.selectedValues.length - 1}`);
    lastCursor && lastCursor.focus();
  }

  _displayPlaceholder(display) {
    this.$.placeholder.hidden = !display;
  }

  /**
   * Open collapse.
   */
  openCollapse() {
    this.$["select-collapse"].setAttribute('data-collapse-open', '');
    this.$['caret'].icon = 'icons:arrow-drop-up';
  }

  /**
   * Close collapse.
   */
  closeCollapse() {
    this.$["select-collapse"].removeAttribute('data-collapse-open');
    this.$['caret'].icon = 'icons:arrow-drop-down';
  }

  /**
   * Toggle collapse.
   */
  toggleCollapse() {
    if (this.$["select-collapse"].hasAttribute('data-collapse-open')) {
      this.$["select-collapse"].removeAttribute('data-collapse-open');
    } else {
      this.$["select-collapse"].setAttribute('data-collapse-open', '');
    }
    this.__focusOnLast();
  }

  /**
   * Set focus to select.
   */
  doFocus() {
    this.__focusOnLast();
  }

  /**
   * Validate, true if the select is set to be required and this.selectedValues.length > 0, or else false.
   * @returns {boolean}
   */
  validate() {
    return this.required ? (this.selectedValues && this.selectedValues.length > 0) : true;
  }
}

window.customElements.define(H2Select.is, H2Select);