@materializecss/materialize 1.2.2 → 2.0.0-alpha

package/js/characterCounter.js

@@ -1,136 +0,0 @@
-(function($) {
-  'use strict';
-
-  let _defaults = {};
-
-  /**
-   * @class
-   *
-   */
-  class CharacterCounter extends Component {
-    /**
-     * Construct CharacterCounter instance
-     * @constructor
-     * @param {Element} el
-     * @param {Object} options
-     */
-    constructor(el, options) {
-      super(CharacterCounter, el, options);
-
-      this.el.M_CharacterCounter = this;
-
-      /**
-       * Options for the character counter
-       */
-      this.options = $.extend({}, CharacterCounter.defaults, options);
-
-      this.isInvalid = false;
-      this.isValidLength = false;
-      this._setupCounter();
-      this._setupEventHandlers();
-    }
-
-    static get defaults() {
-      return _defaults;
-    }
-
-    static init(els, options) {
-      return super.init(this, els, options);
-    }
-
-    /**
-     * Get Instance
-     */
-    static getInstance(el) {
-      let domElem = !!el.jquery ? el[0] : el;
-      return domElem.M_CharacterCounter;
-    }
-
-    /**
-     * Teardown component
-     */
-    destroy() {
-      this._removeEventHandlers();
-      this.el.CharacterCounter = undefined;
-      this._removeCounter();
-    }
-
-    /**
-     * Setup Event Handlers
-     */
-    _setupEventHandlers() {
-      this._handleUpdateCounterBound = this.updateCounter.bind(this);
-
-      this.el.addEventListener('focus', this._handleUpdateCounterBound, true);
-      this.el.addEventListener('input', this._handleUpdateCounterBound, true);
-    }
-
-    /**
-     * Remove Event Handlers
-     */
-    _removeEventHandlers() {
-      this.el.removeEventListener('focus', this._handleUpdateCounterBound, true);
-      this.el.removeEventListener('input', this._handleUpdateCounterBound, true);
-    }
-
-    /**
-     * Setup counter element
-     */
-    _setupCounter() {
-      this.counterEl = document.createElement('span');
-      $(this.counterEl)
-        .addClass('character-counter')
-        .css({
-          float: 'right',
-          'font-size': '12px',
-          height: 1
-        });
-
-      this.$el.parent().append(this.counterEl);
-    }
-
-    /**
-     * Remove counter element
-     */
-    _removeCounter() {
-      $(this.counterEl).remove();
-    }
-
-    /**
-     * Update counter
-     */
-    updateCounter() {
-      let maxLength = +this.$el.attr('data-length'),
-        actualLength = this.el.value.length;
-      this.isValidLength = actualLength <= maxLength;
-      let counterString = actualLength;
-
-      if (maxLength) {
-        counterString += '/' + maxLength;
-        this._validateInput();
-      }
-
-      $(this.counterEl).html(counterString);
-    }
-
-    /**
-     * Add validation classes
-     */
-    _validateInput() {
-      if (this.isValidLength && this.isInvalid) {
-        this.isInvalid = false;
-        this.$el.removeClass('invalid');
-      } else if (!this.isValidLength && !this.isInvalid) {
-        this.isInvalid = true;
-        this.$el.removeClass('valid');
-        this.$el.addClass('invalid');
-      }
-    }
-  }
-
-  M.CharacterCounter = CharacterCounter;
-
-  if (M.jQueryLoaded) {
-    M.initializeJqueryWrapper(CharacterCounter, 'characterCounter', 'M_CharacterCounter');
-  }
-})(cash);

package/js/chips.js

@@ -1,486 +0,0 @@
-(function($) {
-  'use strict';
-
-  let _defaults = {
-    data: [],
-    placeholder: '',
-    secondaryPlaceholder: '',
-    autocompleteOptions: {},
-    autocompleteOnly: false,
-    limit: Infinity,
-    onChipAdd: null,
-    onChipSelect: null,
-    onChipDelete: null
-  };
-
-  /**
-   * @typedef {Object} chip
-   * @property {String} tag  chip tag string
-   * @property {String} [image]  chip avatar image string
-   */
-
-  /**
-   * @class
-   *
-   */
-  class Chips extends Component {
-    /**
-     * Construct Chips instance and set up overlay
-     * @constructor
-     * @param {Element} el
-     * @param {Object} options
-     */
-    constructor(el, options) {
-      super(Chips, el, options);
-
-      this.el.M_Chips = this;
-
-      /**
-       * Options for the modal
-       * @member Chips#options
-       * @prop {Array} data
-       * @prop {String} placeholder
-       * @prop {String} secondaryPlaceholder
-       * @prop {Object} autocompleteOptions
-       */
-      this.options = $.extend({}, Chips.defaults, options);
-
-      this.$el.addClass('chips input-field');
-      this.chipsData = [];
-      this.$chips = $();
-      this._setupInput();
-      this.hasAutocomplete = Object.keys(this.options.autocompleteOptions).length > 0;
-
-      // Set input id
-      if (!this.$input.attr('id')) {
-        this.$input.attr('id', M.guid());
-      }
-
-      // Render initial chips
-      if (this.options.data.length) {
-        this.chipsData = this.options.data;
-        this._renderChips(this.chipsData);
-      }
-
-      // Setup autocomplete if needed
-      if (this.hasAutocomplete) {
-        this._setupAutocomplete();
-      }
-
-      this._setPlaceholder();
-      this._setupLabel();
-      this._setupEventHandlers();
-    }
-
-    static get defaults() {
-      return _defaults;
-    }
-
-    static init(els, options) {
-      return super.init(this, els, options);
-    }
-
-    /**
-     * Get Instance
-     */
-    static getInstance(el) {
-      let domElem = !!el.jquery ? el[0] : el;
-      return domElem.M_Chips;
-    }
-
-    /**
-     * Get Chips Data
-     */
-    getData() {
-      return this.chipsData;
-    }
-
-    /**
-     * Teardown component
-     */
-    destroy() {
-      this._removeEventHandlers();
-      this.$chips.remove();
-      this.el.M_Chips = undefined;
-    }
-
-    /**
-     * Setup Event Handlers
-     */
-    _setupEventHandlers() {
-      this._handleChipClickBound = this._handleChipClick.bind(this);
-      this._handleInputKeydownBound = this._handleInputKeydown.bind(this);
-      this._handleInputFocusBound = this._handleInputFocus.bind(this);
-      this._handleInputBlurBound = this._handleInputBlur.bind(this);
-
-      this.el.addEventListener('click', this._handleChipClickBound);
-      document.addEventListener('keydown', Chips._handleChipsKeydown);
-      document.addEventListener('keyup', Chips._handleChipsKeyup);
-      this.el.addEventListener('blur', Chips._handleChipsBlur, true);
-      this.$input[0].addEventListener('focus', this._handleInputFocusBound);
-      this.$input[0].addEventListener('blur', this._handleInputBlurBound);
-      this.$input[0].addEventListener('keydown', this._handleInputKeydownBound);
-    }
-
-    /**
-     * Remove Event Handlers
-     */
-    _removeEventHandlers() {
-      this.el.removeEventListener('click', this._handleChipClickBound);
-      document.removeEventListener('keydown', Chips._handleChipsKeydown);
-      document.removeEventListener('keyup', Chips._handleChipsKeyup);
-      this.el.removeEventListener('blur', Chips._handleChipsBlur, true);
-      this.$input[0].removeEventListener('focus', this._handleInputFocusBound);
-      this.$input[0].removeEventListener('blur', this._handleInputBlurBound);
-      this.$input[0].removeEventListener('keydown', this._handleInputKeydownBound);
-    }
-
-    /**
-     * Handle Chip Click
-     * @param {Event} e
-     */
-    _handleChipClick(e) {
-      let $chip = $(e.target).closest('.chip');
-      let clickedClose = $(e.target).is('.close');
-      if ($chip.length) {
-        let index = $chip.index();
-        if (clickedClose) {
-          // delete chip
-          this.deleteChip(index);
-          this.$input[0].focus();
-        } else {
-          // select chip
-          this.selectChip(index);
-        }
-
-        // Default handle click to focus on input
-      } else {
-        this.$input[0].focus();
-      }
-    }
-
-    /**
-     * Handle Chips Keydown
-     * @param {Event} e
-     */
-    static _handleChipsKeydown(e) {
-      Chips._keydown = true;
-
-      let $chips = $(e.target).closest('.chips');
-      let chipsKeydown = e.target && $chips.length;
-
-      // Don't handle keydown inputs on input and textarea
-      if ($(e.target).is('input, textarea') || !chipsKeydown) {
-        return;
-      }
-
-      let currChips = $chips[0].M_Chips;
-
-      // backspace and delete
-      if (e.keyCode === 8 || e.keyCode === 46) {
-        e.preventDefault();
-
-        let selectIndex = currChips.chipsData.length;
-        if (currChips._selectedChip) {
-          let index = currChips._selectedChip.index();
-          currChips.deleteChip(index);
-          currChips._selectedChip = null;
-
-          // Make sure selectIndex doesn't go negative
-          selectIndex = Math.max(index - 1, 0);
-        }
-
-        if (currChips.chipsData.length) {
-          currChips.selectChip(selectIndex);
-        } else {
-          currChips.$input[0].focus();
-        }
-
-        // left arrow key
-      } else if (e.keyCode === 37) {
-        if (currChips._selectedChip) {
-          let selectIndex = currChips._selectedChip.index() - 1;
-          if (selectIndex < 0) {
-            return;
-          }
-          currChips.selectChip(selectIndex);
-        }
-
-        // right arrow key
-      } else if (e.keyCode === 39) {
-        if (currChips._selectedChip) {
-          let selectIndex = currChips._selectedChip.index() + 1;
-
-          if (selectIndex >= currChips.chipsData.length) {
-            currChips.$input[0].focus();
-          } else {
-            currChips.selectChip(selectIndex);
-          }
-        }
-      }
-    }
-
-    /**
-     * Handle Chips Keyup
-     * @param {Event} e
-     */
-    static _handleChipsKeyup(e) {
-      Chips._keydown = false;
-    }
-
-    /**
-     * Handle Chips Blur
-     * @param {Event} e
-     */
-    static _handleChipsBlur(e) {
-      if (!Chips._keydown && document.hidden) {
-        let $chips = $(e.target).closest('.chips');
-        let currChips = $chips[0].M_Chips;
-
-        currChips._selectedChip = null;
-      }
-    }
-
-    /**
-     * Handle Input Focus
-     */
-    _handleInputFocus() {
-      this.$el.addClass('focus');
-    }
-
-    /**
-     * Handle Input Blur
-     */
-    _handleInputBlur() {
-      this.$el.removeClass('focus');
-    }
-
-    /**
-     * Handle Input Keydown
-     * @param {Event} e
-     */
-    _handleInputKeydown(e) {
-      Chips._keydown = true;
-
-      // enter
-      if (e.keyCode === 13) {
-        // Override enter if autocompleting.
-        if (this.hasAutocomplete && this.autocomplete && this.autocomplete.isOpen) {
-          return;
-        }
-
-        e.preventDefault();
-        if (!this.hasAutocomplete || (this.hasAutocomplete && !this.options.autocompleteOnly)) {
-          this.addChip({
-            tag: this.$input[0].value
-          });
-        }
-        this.$input[0].value = '';
-
-        // delete or left
-      } else if (
-        (e.keyCode === 8 || e.keyCode === 37) &&
-        this.$input[0].value === '' &&
-        this.chipsData.length
-      ) {
-        e.preventDefault();
-        this.selectChip(this.chipsData.length - 1);
-      }
-    }
-
-    /**
-     * Render Chip
-     * @param {chip} chip
-     * @return {Element}
-     */
-    _renderChip(chip) {
-      if (!chip.tag) {
-        return;
-      }
-
-      let renderedChip = document.createElement('div');
-      let closeIcon = document.createElement('i');
-      renderedChip.classList.add('chip');
-      renderedChip.textContent = chip.tag;
-      renderedChip.setAttribute('tabindex', 0);
-      $(closeIcon).addClass('material-icons close');
-      closeIcon.textContent = 'close';
-
-      // attach image if needed
-      if (chip.image) {
-        let img = document.createElement('img');
-        img.setAttribute('src', chip.image);
-        renderedChip.insertBefore(img, renderedChip.firstChild);
-      }
-
-      renderedChip.appendChild(closeIcon);
-      return renderedChip;
-    }
-
-    /**
-     * Render Chips
-     */
-    _renderChips() {
-      this.$chips.remove();
-      for (let i = 0; i < this.chipsData.length; i++) {
-        let chipEl = this._renderChip(this.chipsData[i]);
-        this.$el.append(chipEl);
-        this.$chips.add(chipEl);
-      }
-
-      // move input to end
-      this.$el.append(this.$input[0]);
-    }
-
-    /**
-     * Setup Autocomplete
-     */
-    _setupAutocomplete() {
-      this.options.autocompleteOptions.onAutocomplete = (val) => {
-        this.addChip({
-          tag: val
-        });
-        this.$input[0].value = '';
-        this.$input[0].focus();
-      };
-
-      this.autocomplete = M.Autocomplete.init(this.$input[0], this.options.autocompleteOptions);
-    }
-
-    /**
-     * Setup Input
-     */
-    _setupInput() {
-      this.$input = this.$el.find('input');
-      if (!this.$input.length) {
-        this.$input = $('<input></input>');
-        this.$el.append(this.$input);
-      }
-
-      this.$input.addClass('input');
-    }
-
-    /**
-     * Setup Label
-     */
-    _setupLabel() {
-      this.$label = this.$el.find('label');
-      if (this.$label.length) {
-        this.$label[0].setAttribute('for', this.$input.attr('id'));
-      }
-    }
-
-    /**
-     * Set placeholder
-     */
-    _setPlaceholder() {
-      if (this.chipsData !== undefined && !this.chipsData.length && this.options.placeholder) {
-        $(this.$input).prop('placeholder', this.options.placeholder);
-      } else if (
-        (this.chipsData === undefined || !!this.chipsData.length) &&
-        this.options.secondaryPlaceholder
-      ) {
-        $(this.$input).prop('placeholder', this.options.secondaryPlaceholder);
-      }
-    }
-
-    /**
-     * Check if chip is valid
-     * @param {chip} chip
-     */
-    _isValid(chip) {
-      if (chip.hasOwnProperty('tag') && chip.tag !== '') {
-        let exists = false;
-        for (let i = 0; i < this.chipsData.length; i++) {
-          if (this.chipsData[i].tag === chip.tag) {
-            exists = true;
-            break;
-          }
-        }
-        return !exists;
-      }
-
-      return false;
-    }
-
-    /**
-     * Add chip
-     * @param {chip} chip
-     */
-    addChip(chip) {
-      if (!this._isValid(chip) || this.chipsData.length >= this.options.limit) {
-        return;
-      }
-
-      let renderedChip = this._renderChip(chip);
-      this.$chips.add(renderedChip);
-      this.chipsData.push(chip);
-      $(this.$input).before(renderedChip);
-      this._setPlaceholder();
-
-      // fire chipAdd callback
-      if (typeof this.options.onChipAdd === 'function') {
-        this.options.onChipAdd.call(this, this.$el, renderedChip);
-      }
-    }
-
-    /**
-     * Delete chip
-     * @param {Number} chip
-     */
-    deleteChip(chipIndex) {
-      let $chip = this.$chips.eq(chipIndex);
-      this.$chips.eq(chipIndex).remove();
-      this.$chips = this.$chips.filter(function(el) {
-        return $(el).index() >= 0;
-      });
-      this.chipsData.splice(chipIndex, 1);
-      this._setPlaceholder();
-
-      // fire chipDelete callback
-      if (typeof this.options.onChipDelete === 'function') {
-        this.options.onChipDelete.call(this, this.$el, $chip[0]);
-      }
-    }
-
-    /**
-     * Select chip
-     * @param {Number} chip
-     */
-    selectChip(chipIndex) {
-      let $chip = this.$chips.eq(chipIndex);
-      this._selectedChip = $chip;
-      $chip[0].focus();
-
-      // fire chipSelect callback
-      if (typeof this.options.onChipSelect === 'function') {
-        this.options.onChipSelect.call(this, this.$el, $chip[0]);
-      }
-    }
-  }
-
-  /**
-   * @static
-   * @memberof Chips
-   */
-  Chips._keydown = false;
-
-  M.Chips = Chips;
-
-  if (M.jQueryLoaded) {
-    M.initializeJqueryWrapper(Chips, 'chips', 'M_Chips');
-  }
-
-  $(document).ready(function() {
-    // Handle removal of static chips.
-    $(document.body).on('click', '.chip .close', function() {
-      let $chips = $(this).closest('.chips');
-      if ($chips.length && $chips[0].M_Chips) {
-        return;
-      }
-      $(this)
-        .closest('.chip')
-        .remove();
-    });
-  });
-})(cash);