polygerrit-ui/app/elements/shared/gr-autocomplete-dropdown/gr-autocomplete-dropdown.js

/**
 * @license
 * Copyright (C) 2017 The Android Open Source Project
 *
 * Licensed under the Apache License, Version 2.0 (the "License");
 * you may not use this file except in compliance with the License.
 * You may obtain a copy of the License at
 *
 * http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS,
 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 * See the License for the specific language governing permissions and
 * limitations under the License.
 */
import '@polymer/iron-dropdown/iron-dropdown.js';
import {IronFitBehavior} from '@polymer/iron-fit-behavior/iron-fit-behavior.js';
import '../gr-cursor-manager/gr-cursor-manager.js';
import '../../../styles/shared-styles.js';
import {flush} from '@polymer/polymer/lib/legacy/polymer.dom.js';
import {mixinBehaviors} from '@polymer/polymer/lib/legacy/class.js';
import {GestureEventListeners} from '@polymer/polymer/lib/mixins/gesture-event-listeners.js';
import {LegacyElementMixin} from '@polymer/polymer/lib/legacy/legacy-element-mixin.js';
import {PolymerElement} from '@polymer/polymer/polymer-element.js';
import {htmlTemplate} from './gr-autocomplete-dropdown_html.js';
import {KeyboardShortcutBehavior} from '../../../behaviors/keyboard-shortcut-behavior/keyboard-shortcut-behavior.js';

/**
 * @extends PolymerElement
 */
class GrAutocompleteDropdown extends mixinBehaviors( [
  KeyboardShortcutBehavior,
  IronFitBehavior,
], GestureEventListeners(
    LegacyElementMixin(
        PolymerElement))) {
  static get template() { return htmlTemplate; }

  static get is() { return 'gr-autocomplete-dropdown'; }
  /**
   * Fired when the dropdown is closed.
   *
   * @event dropdown-closed
   */

  /**
   * Fired when item is selected.
   *
   * @event item-selected
   */

  static get properties() {
    return {
      index: Number,
      isHidden: {
        type: Boolean,
        value: true,
        reflectToAttribute: true,
      },
      verticalOffset: {
        type: Number,
        value: null,
      },
      horizontalOffset: {
        type: Number,
        value: null,
      },
      suggestions: {
        type: Array,
        value: () => [],
        observer: '_resetCursorStops',
      },
      _suggestionEls: Array,
    };
  }

  get keyBindings() {
    return {
      up: '_handleUp',
      down: '_handleDown',
      enter: '_handleEnter',
      esc: '_handleEscape',
      tab: '_handleTab',
    };
  }

  close() {
    this.isHidden = true;
  }

  open() {
    this.isHidden = false;
    this._resetCursorStops();
    // Refit should run after we call Polymer.flush inside _resetCursorStops
    this.refit();
  }

  getCurrentText() {
    return this.getCursorTarget().dataset.value;
  }

  _handleUp(e) {
    if (!this.isHidden) {
      e.preventDefault();
      e.stopPropagation();
      this.cursorUp();
    }
  }

  _handleDown(e) {
    if (!this.isHidden) {
      e.preventDefault();
      e.stopPropagation();
      this.cursorDown();
    }
  }

  cursorDown() {
    if (!this.isHidden) {
      this.$.cursor.next();
    }
  }

  cursorUp() {
    if (!this.isHidden) {
      this.$.cursor.previous();
    }
  }

  _handleTab(e) {
    e.preventDefault();
    e.stopPropagation();
    this.dispatchEvent(new CustomEvent('item-selected', {
      detail: {
        trigger: 'tab',
        selected: this.$.cursor.target,
      },
      composed: true, bubbles: true,
    }));
  }

  _handleEnter(e) {
    e.preventDefault();
    e.stopPropagation();
    this.dispatchEvent(new CustomEvent('item-selected', {
      detail: {
        trigger: 'enter',
        selected: this.$.cursor.target,
      },
      composed: true, bubbles: true,
    }));
  }

  _handleEscape() {
    this._fireClose();
    this.close();
  }

  _handleClickItem(e) {
    e.preventDefault();
    e.stopPropagation();
    let selected = e.target;
    while (!selected.classList.contains('autocompleteOption')) {
      if (!selected || selected === this) { return; }
      selected = selected.parentElement;
    }
    this.dispatchEvent(new CustomEvent('item-selected', {
      detail: {
        trigger: 'click',
        selected,
      },
      composed: true, bubbles: true,
    }));
  }

  _fireClose() {
    this.dispatchEvent(new CustomEvent('dropdown-closed', {
      composed: true, bubbles: true,
    }));
  }

  getCursorTarget() {
    return this.$.cursor.target;
  }

  _resetCursorStops() {
    if (this.suggestions.length > 0) {
      if (!this.isHidden) {
        flush();
        this._suggestionEls = Array.from(
            this.$.suggestions.querySelectorAll('li'));
        this._resetCursorIndex();
      }
    } else {
      this._suggestionEls = [];
    }
  }

  _resetCursorIndex() {
    this.$.cursor.setCursorAtIndex(0);
  }

  _computeLabelClass(item) {
    return item.label ? '' : 'hide';
  }
}

customElements.define(GrAutocompleteDropdown.is, GrAutocompleteDropdown);