radium-combo.html

<link rel="import" href="../polymer/polymer.html">
<link rel="import" href="../iron-dropdown/iron-dropdown.html">
<link rel="import" href="../iron-icon/iron-icon.html">
<link rel="import" href="../iron-icons/iron-icons.html">
<link rel="import" href="../iron-selector/iron-selector.html">
<link rel="import" href="../paper-input/paper-input-container.html">
<link rel="import" href="../paper-item/paper-item.html">
<!--
Material Design Dropdown/Typeahead/Combobox control

@demo demo/index.html
-->
<dom-module id="radium-combo">
  <style is="custom-style">
    #input {
      cursor: pointer;
      height: 24px;
    }
    :host([type='typeahead']) #input {
      cursor: text;
    }
    :host([type='combobox']) #input {
      cursor: text;
    }
    label, #input {
      padding-right: 24px;
      box-sizing: border-box;
    }
    #input {
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
    #input.clear-shown {
      padding-right: 48px;
    }
    #input[disabled] {
      opacity: 1.0;
      -webkit-text-fill-color: #212121;
      -webkit-user-select: none;
      user-select: none;
    }
    #dropdown {
      background-color: #FFFFFF;
      box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 1px 5px 0 rgba(0, 0, 0, 0.12), 0 3px 1px -2px rgba(0, 0, 0, 0.2);
    }
    #clear-icon {
      position: absolute;
      right: 24px;
      cursor: pointer;
      width: 20px;
      height: 20px;
      padding: 2px;
    }
    #dropdown-icon {
      position: absolute;
      right: 0;
      cursor: pointer;
    }
    iron-selector {
      cursor: pointer;
    }
    .iron-selected {
      font-weight: bold;
      background-color: #F5F5F5;
    }
    paper-item:hover {
     background-color: #EEEEEE;
    }
    paper-input-container:focus {
     outline: 0;
    }
    paper-item span {
      text-overflow: ellipsis;
      white-space: nowrap;
      overflow-x: hidden;
    }
  </style>
  <template>
    <paper-input-container id="input-container" disabled$="[[disabled]]" tabindex="0"
      always-float-label="[[alwaysFloatLabel]]"  no-label-float="[[noLabelFloat]]"
      on-keydown="_containerKeyHandler" on-down="_dropdownAction" title$="[[_inputValue]]">
      <label>[[label]]</label>
      <input id="input" is="iron-input" type="text" autocomplete="off" on-input="_inputValueChanged"
        on-focus="_onInputFocus" on-blur="_onInputBlur"
        on-keydown="_keyHandler" disabled class="paper-input-input"></input>
      <iron-icon id="clear-icon" icon="clear" hidden$="[[!_showClearIcon(showClearButton, _inputValue)]]" on-tap="_clearTapped"></iron-icon>
      <iron-icon id="dropdown-icon" icon="[[_dropdownIcon(_open)]]"></iron-icon>
    </paper-input-container>
    <iron-dropdown id="dropdown" vertical-align="auto" no-overlap no-cancel-on-outside-click on-iron-overlay-opened="_dropdownOpened" on-iron-overlay-closed="_dropdownClosed">
      <div class="dropdown-content">
        <template is="dom-if" if="[[_checkShowNoMatches(noMatchesLabel, type, _filteredOptions)]]">
          <paper-item value="">
            <span>[[noMatchesLabel]]</span>
          </paper-item>
        </template>
        <iron-selector id="selector" attrForSelected="value">
          <template is="dom-if" if="[[_checkShowEmpty(_showEmpty, type)]]">
            <paper-item on-down="_onItemDown" on-touchend="_onItemTouchEnd" on-tap="_selectItem" value="">
              <span>[[emptyOptionLabel]]</span>
            </paper-item>
          </template>
          <template is="dom-repeat" items="[[_filteredOptions]]">
            <paper-item on-down="_onItemDown" on-touchend="_onItemTouchEnd" on-tap="_selectItem" value="[[item.__value]]">
              <span title$="[[item.__label]]">[[item.__label]]</span>
            </paper-item>
          </template>
        </iron-selector>
      </div>
    </iron-dropdown>
  </template>
</dom-module>
<script>
  (function() {
    Polymer({
      is: 'radium-combo',

      /**
       * Fired when the selected option has changed
       *
       * @event option-change
       */

      behaviors: [
        Polymer.IronSelectableBehavior
      ],
      properties: {
        /**
         * Always float the floating label.
         */
        alwaysFloatLabel: {
          type: Boolean,
          value: false
        },
        /**
         * Optional floating label for the input control
         */
        label: {
          type: String,
          value: ""
        },
        /**
         * Hide the floating label
         */
        noLabelFloat:Boolean,
        /**
         * Whether or not the control should be disabled
         */
        disabled: {
          type: Boolean,
          default: false,
          reflectToAttribute: true,
          observer: '_disabledChanged'
        },
        /**
         * Currently selected value
         */
        value: {
          type: Object,
          value: function() { return {}; },
          notify: true,
          observer: '_valueChanged'
        },
        /**
         * Property on the option objects to use as the display label
         */
        labelProperty: {
          type: String,
          value: 'label'
        },
        /**
         * Property on the option objects to use as the value
         */
        valueProperty: {
          type: String,
          value: 'value'
        },
        /**
         * List of options to select from
         * Can be simple strings, or objects with label/value properties
         */
        options: {
          type: Array,
          value: function() {return [];},
          observer: '_optionsChanged'
        },
        /**
         * Optional placeholder text if nothing is selected
         */
        emptyOptionLabel: {
          type: String
        },
        /**
         * Placeholder text if no matches (for typeahead).
         */
        noMatchesLabel: {
          type: String,
          value: 'No matches'
        },
        /**
         * The type of selection control
         * Choices are:
         *    dropdown
         *    typeahead
         *    combobox
         */
        type: {
          type: String,
          value: '',
          observer: '_typeChanged'
        },
        /**
         * Whether or not to include an "empty" option in the list, allowing the
         * user to unselect
         */
        includeEmpty: {
          type: String,
          value: 'true',
          observer: '_emptyChanged'
        },
        /**
         * Whether or not to include a clear button in the input, allowing the
         * user to unselect
         */
        showClearButton: {
          type: Boolean,
          value: false
        },
        _showEmpty: {
          type: Boolean,
          value: true
        },
        _inputValue: {
          type: String,
          value: ''
        },
        _optionsInternal: {
          type: Array,
          value: function() {return [];}
        },
        _filteredOptions: {
          type: Array,
          value: function() {return [];}
        },
        _open: {
          type: Boolean,
          value: false
        },
        _ignoreBlur: {
          type: Boolean,
          value: false
        }
      },
      observers: [
        '_optionsSplicesChanged(options.splices)'
      ],
      _boundCaptureTap: null,
      _boundResizeHandler: null,
      _valueChanged: function(v) {
        if (!this._isObject(v)) {
          var vm = this._findValueMatch(v);
          if (vm !== null) {
            this.value = vm.match;
          }
        }
        if (this.value) {
          this._setInputValue(this.value.__label || '');
        }
        else {
          this._setInputValue('');
        }
      },
      _typeChanged: function(v) {
        if (v) {
          switch (v.toLowerCase()) {
            case 'combobox':
              this._showEmpty = false;
              this.$['input-container'].setAttribute('tabindex', '-1');
              this.$.input.removeAttribute('disabled');
              break;
            case 'typeahead':
              this._showEmpty = false;
              this.$['input-container'].setAttribute('tabindex', '-1');
              this.$.input.removeAttribute('disabled');
              break;
            default:
              this.$.input.setAttribute('disabled', '');
              this.$['input-container'].setAttribute('tabindex', '0');
              break;
          }
        }
        if (this.disabled === true) {
          this.$['input-container'].setAttribute('tabindex', '-1');
        }
      },
      _disabledChanged: function() {
        this._typeChanged(this.type);
      },
      _emptyChanged: function(v) {
        if (v === 'false') {
          this._showEmpty = false;
          if (this._filteredOptions && this._filteredOptions.length > 0 && this._isDropdown()) {
            this.value = this._filteredOptions[0];
          }
        }
      },
      _optionsChanged: function(v) {
        var newArr = [];
        if (v.length > 0) {
          for (var i = 0; i < v.length; i++) {
            var val = v[i];
            if (this._isObject(val)) {
              val.__label = val[this.labelProperty];
              val.__value = val[this.valueProperty];
              newArr.push(val);
            } else {
              newArr.push({__label:val,__value:val});
            }
          }
        }
        this._filteredOptions = this._optionsInternal = newArr;
        if (this._filteredOptions.length > 0 && this._showEmpty === false && this._isDropdown()) {
          this.value = this._filteredOptions[0];
        }
      },
      _optionsSplicesChanged: function(v) {
        if (v !== undefined && v.indexSplices.length > 0) {
          this._optionsChanged(v.indexSplices[v.indexSplices.length - 1].object);
        }
      },
      _isDropdown: function() {
        return (this.type.toLowerCase() !== 'combobox' && this.type.toLowerCase() !== 'typeahead');
      },
      _showClearIcon: function(showClearButton, inputValue) {
        var iconShown = showClearButton && inputValue && inputValue.length > 0;
        this.toggleClass('clear-shown', iconShown, this.querySelector('#input'));
        return iconShown;
      },
      _checkShowEmpty: function(e, t) {
        return (e === true && this._isDropdown);
      },
      _checkShowNoMatches: function(noMatchesLabel, type, options) {
        return (noMatchesLabel && noMatchesLabel.length > 0 && type.toLowerCase() === 'typeahead' && options.length === 0);
      },
      _dropdownIcon: function(open) {
        if (open) {
          return 'arrow-drop-up';
        } else {
          return 'arrow-drop-down';
        }
      },
      _dropdownAction: function(e) {
        if (this._open) {
          this._hideDropdown();
        } else {
          this._openDropdown();
        }
      },
      _onCaptureTap: function(e) {
        if (!this.contains(e.target)) {
          this.$.input.blur();
          this._hideDropdown();
        }
      },
      _openDropdown: function() {
        if (this._open === false) {
          this.$.dropdown.style.width = this.$['input-container'].offsetWidth + 'px';
          this.$.dropdown.positionTarget = this;
          this.$.dropdown.open();
          var isListItemSelected = this.value.__label !== undefined && this.value.__value !== undefined;
          if (this.$.input.value === this.value.__label && isListItemSelected) {
            this._filterOptions('');
          }
          // Select the dropdown item based on the current value.
          this._setSelectorSelected(this._findFilteredOptionValueIndex(this.value.__value));
        }
      },
      _hideDropdown: function() {
        if (this._open === true) {
          this.$.dropdown.close();
        }
      },
      _dropdownOpened: function() {
        this._open = true;
      },
      _dropdownClosed: function() {
        this._open = false;
      },
      _clearTapped: function (e) {
        e.stopPropagation();

        this.clearSelection(true);
      },
      _handleFloatingLabel: function(value) {
        this.$['input-container']._inputHasContent = !(!value || value === null || value === '');
      },
      _inputValueChanged: function(e) {
        var input = e.target.value;
        this._inputValue = input;
        this._handleFloatingLabel(input);
        this._filterOptions(input);
        // Select the dropdown item based on the current input.
        this._setSelectorSelected(this._findFilteredOptionLabelIndex(input));
        this._openDropdown();
      },
      _applyValueFromInput: function() {
        this.setValueFromLabel(this.$.input.value, true);
      },
      _filterOptions: function(input) {
        if (!input || input === null || input === '') {
          this._filteredOptions = this._optionsInternal;
        }
        else {
          this._filteredOptions = this._optionsInternal.filter(function(option) {
            return option.__label.toLowerCase().indexOf(input.toLowerCase()) === 0;
          });
        }
      },
      _selectItem: function(e) {
        e.stopPropagation();
        
        var item = e.currentTarget;
        this.setValue(item.value, true);
        this._hideDropdown();
      },
      _updateAndDispatch: function(value, dispatch) {
        if (!(this.value.__label === value.__label && this.value.__value === value.__value)) {
          this.value = value;
          if (dispatch === true) {
            this.fire('option-change', {label:value.__label, value:value.__value});
          }
        }
      },
      _onItemDown: function(e) {
        // NOTE: Input blur event fires after "down" but before "tap" - don't perform blur logic when an item is tapped.
        this._ignoreBlur = true;
      },
      _onItemTouchEnd: function(e) {
        // NOTE: This prevents synthesized "click" events that will bleed through and click items under the dropdown.
        e.preventDefault();
      },
      _onInputFocus: function() {
        this._ignoreBlur = false;
        this._openDropdown();
      },
      _onInputBlur: function() {
        if (!this._ignoreBlur) {
          this._applyValueFromInput();
          this._hideDropdown();
        }
        this._ignoreBlur = false;
      },
      _containerKeyHandler: function(e) {
        if (document.activeElement === this.$['input-container']) {
          if (this._open === false && (e.key === 'Enter' || e.key === ' ')) {
            this._openDropdown();
          } else {
            this._keyHandler(e);
          }
        }
      },
      _keyHandler: function(e) {
        if (e.key === 'Enter') {
          this._applyValueFromInput();
          return;
        }
        if (this._open === true && e.key === 'Control') {
          e.preventDefault();
          return;
        }
        this._handleKeyboardArrows(e);
      },
      _handleKeyboardArrows: function(e) {
        if (e.key !== 'ArrowUp' && e.key !== 'ArrowDown') {
          return;
        }
        var isUp = (e.key === 'ArrowUp');
        this._openDropdown();
        var idx = (typeof this.$.selector.selected === 'undefined') ? -1 : this.$.selector.selected;
        if (isUp === true) {
          idx -= 1;
          if (idx < 0) {
            idx = 0;
          }
        } else {
          idx += 1;
          if (this._showEmpty === true) {
            if (idx >= this._filteredOptions.length + 1) {
              idx = this._filteredOptions.length;
            }
          } else {
            if (idx >= this._filteredOptions.length) {
              idx = this._filteredOptions.length - 1;
            }
          }
        }

        this.$.selector.selected = idx;

        var option = this._filteredOptions[(this._showEmpty === true) ? idx - 1 : idx];
        this.$.input.value = (option) ? option.__label : '';

        var dropdown = this.$.selector.parentNode;

        var itemHeight = 49;
        var numVisible = Math.floor(dropdown.offsetHeight / itemHeight);
        var startVisibleIdx = Math.floor(dropdown.scrollTop / itemHeight);
        if (isUp) {
          if (idx < startVisibleIdx) {
            dropdown.scrollTop = idx * itemHeight;
          }
        }
        else {
          if (idx >= startVisibleIdx + numVisible) {
            dropdown.scrollTop = (idx - (numVisible - 1)) * itemHeight;
          }
        }
      },
      _findLabelMatch: function(lbl) {
        if ((lbl === null) || (lbl === undefined)) {
          return null;
        }
        if (this._optionsInternal) {
          for (var idx = 0; idx < this._optionsInternal.length; idx++ ) {
            var opt = this._optionsInternal[idx];
            if ( opt && opt.__label.toLowerCase() === lbl.toLowerCase() ) {
              return {match:opt, index:idx};
            }
          }
        }
        return null;
      },
      _findValueMatch: function(v) {
        if ((v === null) || (v === undefined)) {
          return null;
        }
        if (this._optionsInternal) {
          for (var idx = 0; idx < this._optionsInternal.length; idx++) {
            var opt = this._optionsInternal[idx];
            if (opt && opt.__value.toString() === v.toString()) {
              return {match:opt, index:idx};
            }
          }
        }
        return null;
      },
      _findFilteredOptionLabelIndex: function(lbl) {
        if ((lbl === null) || (lbl === undefined)) {
          return -1;
        }
        if (this._filteredOptions) {
          for (var idx = 0; idx < this._filteredOptions.length; idx++) {
            var opt = this._filteredOptions[idx];
            if (opt && opt.__label.toString() === lbl.toString()) {
              return idx;
            }
          }
        }
        return -1;
      },
      _findFilteredOptionValueIndex: function(v) {
        if ((v === null) || (v === undefined)) {
          return -1;
        }
        if (this._filteredOptions) {
          for (var idx = 0; idx < this._filteredOptions.length; idx++) {
            var opt = this._filteredOptions[idx];
            if (opt && opt.__value.toString() === v.toString()) {
              return idx;
            }
          }
        }
        return -1;
      },
      _isObject: function(val) {
        if (val === null) { return false;}
        return ( (typeof val === 'function') || (typeof val === 'object') );
      },
      _setInputValue: function(v) {
        this._handleFloatingLabel(v);
        this._inputValue = v;
        this.$.input.value = v;
      },
      _setSelectorSelected: function(idx) {
        if (this._showEmpty === true && idx >= 0) {
          this.$.selector.selected = idx + 1;
        }
        else {
          this.$.selector.selected = idx;
        }
      },
      _setValue: function(lbl, match, dispatch) {
        if (match !== null) {
          this._setInputValue(match.match.__label || '');
          this._updateAndDispatch(match.match, dispatch);
        }
        else {
          if (this.type.toLowerCase() === 'combobox' && lbl) {
            this._setInputValue(lbl);
            this._updateAndDispatch({__label: lbl, __value: undefined}, dispatch);
          }
          else {
            this._setInputValue('');
            this._filterOptions('');
            this._updateAndDispatch({}, dispatch);
          }
        }
        this._hideDropdown();
      },
      /**
       * Use the provided label to select an item
       *
       * @param {String} lbl The value to make selected
       * @param {Boolean} dispatch Whether or not to send a change event when selecting
       */
      setValueFromLabel: function(lbl, dispatch) {
        var match = this._findLabelMatch(lbl);
        this._setValue(lbl, match, dispatch);
      },
      /**
       * Use the provided value to select an item
       *
       * @param {*} v The value to make selected
       * @param {Boolean} dispatch Whether or not to send a change event when selecting
       */
      setValue: function(v, dispatch) {
        var match = this._findValueMatch(v);
        this._setValue(v, match, dispatch);
      },
      /**
       * Clear the current selection
       *
       * @param {Boolean} dispatch Whether or not to send a change event when deselecting
       */
      clearSelection: function(dispatch) {
        this._setValue(null, null, dispatch);
      },
      attached: function() {
        this.$.dropdown.positionTarget = null;
        this._boundOnCaptureTap = this._onCaptureTap.bind(this);
        this._boundResizeHandler = this._hideDropdown.bind(this);
        document.addEventListener('tap', this._boundOnCaptureTap, true);
        window.addEventListener('resize:end', this._boundResizeHandler, false);
      },
      detached: function() {
        window.removeEventListener('resize:end', this._boundResizeHandler, false);
        document.removeEventListener('tap', this._boundOnCaptureTap, true);
      }
    });
  })();
</script>