node_modules/mdl-ext/es/selectfield/selectfield.js

'use strict';

var _stringUtils = require('../utils/string-utils');

var _constants = require('../utils/constants');

/**
 * @license
 * Copyright 2016 Leif Olsen. All Rights Reserved.
 *
 * 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.
 *
 * This code is built with Google Material Design Lite,
 * which is Licensed under the Apache License, Version 2.0
 */

/*
 * Copied/Modified from https://github.com/google/material-design-lite/tree/master/src/textfield
 */

(function () {
  'use strict';

  var LABEL = 'mdlext-selectfield__label';
  var INPUT = 'mdlext-selectfield__select';

  /**
   * Class constructor for Selectfield MDLEXT component.
   * Implements MDL component design pattern defined at:
   * https://github.com/jasonmayes/mdl-component-design-pattern
   *
   * @constructor
   * @param {HTMLElement} element The element that will be upgraded.
   */
  var MaterialExtSelectfield = function MaterialExtSelectfield(element) {
    this.element_ = element;
    this.init(); // Initialize instance.
  };

  window['MaterialExtSelectfield'] = MaterialExtSelectfield;

  /**
   * Handle focus.
   *
   * @param {Event} event The event that fired.
   * @private
   */
  /*eslint no-unused-vars: 0*/
  MaterialExtSelectfield.prototype.onFocus_ = function () /*event*/{
    this.element_.classList.add(_constants.IS_FOCUSED);
  };

  /**
   * Handle lost focus.
   *
   * @param {Event} event The event that fired.
   * @private
   */
  /*eslint no-unused-vars: 0*/
  MaterialExtSelectfield.prototype.onBlur_ = function () /*event*/{
    this.element_.classList.remove(_constants.IS_FOCUSED);
  };

  /**
   * Handle reset event from out side.
   *
   * @param {Event} event The event that fired.
   * @private
   */
  MaterialExtSelectfield.prototype.onReset_ = function () /*event*/{
    this.updateClasses_();
  };

  /**
   * Handle class updates.
   *
   * @private
   */
  MaterialExtSelectfield.prototype.updateClasses_ = function () {
    this.checkDisabled();
    this.checkValidity();
    this.checkDirty();
    this.checkFocus();
  };

  // Public methods.

  /**
   * Check the disabled state and update field accordingly.
   *
   * @public
   */
  MaterialExtSelectfield.prototype.checkDisabled = function () {
    if (this.select_.disabled) {
      this.element_.classList.add(_constants.IS_DISABLED);
    } else {
      this.element_.classList.remove(_constants.IS_DISABLED);
    }
  };
  MaterialExtSelectfield.prototype['checkDisabled'] = MaterialExtSelectfield.prototype.checkDisabled;

  /**
   * Check the focus state and update field accordingly.
   *
   * @public
   */
  MaterialExtSelectfield.prototype.checkFocus = function () {
    // Note: element.querySelector(':focus') always return null in JsDom, even if select element has focus
    /*eslint no-extra-boolean-cast: 0*/
    if (Boolean(this.element_.querySelector(':focus'))) {
      this.element_.classList.add(_constants.IS_FOCUSED);
    } else {
      this.element_.classList.remove(_constants.IS_FOCUSED);
    }
  };

  MaterialExtSelectfield.prototype['checkFocus'] = MaterialExtSelectfield.prototype.checkFocus;

  /**
   * Check the validity state and update field accordingly.
   *
   * @public
   */
  MaterialExtSelectfield.prototype.checkValidity = function () {

    /* Don't think it makes any sense to check validity.
       Tests I've done, so far, indicates that setting an illegal value via JS returns selectedIndex=0
     if (this.select_.validity) {
      if (this.select_.validity.valid) {
        this.element_.classList.remove(this.CssClasses_.IS_INVALID);
      } else {
        this.element_.classList.add(this.CssClasses_.IS_INVALID);
      }
    }
    */
  };

  MaterialExtSelectfield.prototype['checkValidity'] = MaterialExtSelectfield.prototype.checkValidity;

  /**
   * Check the dirty state and update field accordingly.
   *
   * @public
   */
  MaterialExtSelectfield.prototype.checkDirty = function () {
    if (this.select_.value && this.select_.value.length > 0) {
      this.element_.classList.add(_constants.IS_DIRTY);
    } else {
      this.element_.classList.remove(_constants.IS_DIRTY);
    }
  };

  MaterialExtSelectfield.prototype['checkDirty'] = MaterialExtSelectfield.prototype.checkDirty;

  /**
   * Disable select field.
   *
   * @public
   */
  MaterialExtSelectfield.prototype.disable = function () {
    this.select_.disabled = true;
    this.updateClasses_();
  };

  MaterialExtSelectfield.prototype['disable'] = MaterialExtSelectfield.prototype.disable;

  /**
   * Enable select field.
   *
   * @public
   */
  MaterialExtSelectfield.prototype.enable = function () {
    this.select_.disabled = false;
    this.updateClasses_();
  };

  MaterialExtSelectfield.prototype['enable'] = MaterialExtSelectfield.prototype.enable;

  /**
   * Update select field value.
   *
   * @param {string} value The value to which to set the control (optional).
   * @public
   */
  MaterialExtSelectfield.prototype.change = function (value) {
    this.select_.value = value || '';
    this.updateClasses_();
  };
  MaterialExtSelectfield.prototype['change'] = MaterialExtSelectfield.prototype.change;

  /**
   * Initialize element.
   */
  MaterialExtSelectfield.prototype.init = function () {
    if (this.element_) {
      this.label_ = this.element_.querySelector('.' + LABEL);
      this.select_ = this.element_.querySelector('.' + INPUT);

      if (this.select_) {
        // Remove listeners, just in case ...
        this.select_.removeEventListener('change', this.updateClasses_);
        this.select_.removeEventListener('focus', this.onFocus_);
        this.select_.removeEventListener('blur', this.onBlur_);
        this.select_.removeEventListener('reset', this.onReset_);

        this.select_.addEventListener('change', this.updateClasses_.bind(this));
        this.select_.addEventListener('focus', this.onFocus_.bind(this));
        this.select_.addEventListener('blur', this.onBlur_.bind(this));
        this.select_.addEventListener('reset', this.onReset_.bind(this));

        if (this.label_) {
          var id = void 0;
          if (!this.select_.hasAttribute('id')) {
            id = 'select-' + (0, _stringUtils.randomString)();
            this.select_.id = id;
          } else {
            id = this.select_.id;
          }

          if (!this.label_.hasAttribute('for')) {
            this.label_.setAttribute('for', id);
          }
        }

        var invalid = this.element_.classList.contains(_constants.IS_INVALID);
        this.updateClasses_();
        this.element_.classList.add(_constants.IS_UPGRADED);

        if (invalid) {
          this.element_.classList.add(_constants.IS_INVALID);
        }
        if (this.select_.hasAttribute('autofocus')) {
          this.element_.focus();
          this.checkFocus();
        }
      }
    }
  };

  /**
   * Downgrade component
   * E.g remove listeners and clean up resources
   *
   * Nothing to downgrade
   *
  MaterialExtSelectfield.prototype.mdlDowngrade_ = function() {
    'use strict';
    console.log('***** MaterialExtSelectfield.mdlDowngrade ');
  };
  */

  // The component registers itself. It can assume componentHandler is available
  // in the global scope.
  /*eslint no-undef: 0*/
  componentHandler.register({
    constructor: MaterialExtSelectfield,
    classAsString: 'MaterialExtSelectfield',
    cssClass: 'mdlext-js-selectfield',
    widget: true
  });
})();