materialize-sass 0.100.2.1 → 1.0.0.alpha1

data/assets/javascripts/materialize/characterCounter.js

@@ -0,0 +1,180 @@
+var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
+
+function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
+
+(function ($) {
+  'use strict';
+
+  var _defaults = {};
+
+  /**
+   * @class
+   *
+   */
+
+  var CharacterCounter = function () {
+    /**
+     * Construct CharacterCounter instance
+     * @constructor
+     * @param {Element} el
+     * @param {Object} options
+     */
+    function CharacterCounter(el, options) {
+      _classCallCheck(this, CharacterCounter);
+
+      // If exists, destroy and reinitialize
+      if (!!el.M_CharacterCounter) {
+        el.M_CharacterCounter.destroy();
+      }
+
+      this.el = el;
+      this.$el = $(el);
+      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();
+    }
+
+    _createClass(CharacterCounter, [{
+      key: 'destroy',
+
+
+      /**
+       * Teardown component
+       */
+      value: function destroy() {
+        this._removeEventHandlers();
+        this.el.CharacterCounter = undefined;
+        this._removeCounter();
+      }
+
+      /**
+       * Setup Event Handlers
+       */
+
+    }, {
+      key: '_setupEventHandlers',
+      value: function _setupEventHandlers() {
+        this._handleUpdateCounterBound = this.updateCounter.bind(this);
+
+        this.el.addEventListener('focus', this._handleUpdateCounterBound, true);
+        this.el.addEventListener('input', this._handleUpdateCounterBound, true);
+      }
+
+      /**
+       * Remove Event Handlers
+       */
+
+    }, {
+      key: '_removeEventHandlers',
+      value: function _removeEventHandlers() {
+        this.el.removeEventListener('focus', this._handleUpdateCounterBound, true);
+        this.el.removeEventListener('input', this._handleUpdateCounterBound, true);
+      }
+
+      /**
+       * Setup counter element
+       */
+
+    }, {
+      key: '_setupCounter',
+      value: function _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
+       */
+
+    }, {
+      key: '_removeCounter',
+      value: function _removeCounter() {
+        $(this.counterEl).remove();
+      }
+
+      /**
+       * Update counter
+       */
+
+    }, {
+      key: 'updateCounter',
+      value: function updateCounter() {
+        var maxLength = +this.$el.attr('data-length'),
+            actualLength = this.el.value.length;
+        this.isValidLength = actualLength <= maxLength;
+        var counterString = actualLength;
+
+        if (maxLength) {
+          counterString += '/' + maxLength;
+          this._validateInput();
+        }
+
+        $(this.counterEl).html(counterString);
+      }
+
+      /**
+       * Add validation classes
+       */
+
+    }, {
+      key: '_validateInput',
+      value: function _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');
+        }
+      }
+    }], [{
+      key: 'init',
+      value: function init($els, options) {
+        var arr = [];
+        $els.each(function () {
+          arr.push(new CharacterCounter(this, options));
+        });
+        return arr;
+      }
+
+      /**
+       * Get Instance
+       */
+
+    }, {
+      key: 'getInstance',
+      value: function getInstance(el) {
+        var domElem = !!el.jquery ? el[0] : el;
+        return domElem.M_CharacterCounter;
+      }
+    }, {
+      key: 'defaults',
+      get: function () {
+        return _defaults;
+      }
+    }]);
+
+    return CharacterCounter;
+  }();
+
+  M.CharacterCounter = CharacterCounter;
+
+  if (M.jQueryLoaded) {
+    M.initializeJqueryWrapper(CharacterCounter, 'characterCounter', 'M_CharacterCounter');
+  }
+})(cash);

data/assets/javascripts/materialize/chips.js

@@ -0,0 +1,555 @@
+var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
+
+function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
+
+(function ($, Vel) {
+  'use strict';
+
+  var _defaults = {
+    data: [],
+    placeholder: '',
+    secondaryPlaceholder: '',
+    autocompleteOptions: {},
+    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
+   *
+   */
+
+  var Chips = function () {
+    /**
+     * Construct Chips instance and set up overlay
+     * @constructor
+     * @param {Element} el
+     * @param {Object} options
+     */
+    function Chips(el, options) {
+      _classCallCheck(this, Chips);
+
+      // If exists, destroy and reinitialize
+      if (!!el.M_Chips) {
+        el.M_Chips.destroy();
+      }
+
+      this.el = el;
+      this.$el = $(el);
+      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.$input = this.$el.find('input');
+      this.$input.addClass('input');
+      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();
+    }
+
+    _createClass(Chips, [{
+      key: 'getData',
+
+
+      /**
+       * Get Chips Data
+       */
+      value: function getData() {
+        return this.chipsData;
+      }
+
+      /**
+       * Teardown component
+       */
+
+    }, {
+      key: 'destroy',
+      value: function destroy() {
+        this._removeEventHandlers();
+        this.$chips.remove();
+        this.el.M_Chips = undefined;
+      }
+
+      /**
+       * Setup Event Handlers
+       */
+
+    }, {
+      key: '_setupEventHandlers',
+      value: function _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
+       */
+
+    }, {
+      key: '_removeEventHandlers',
+      value: function _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
+       */
+
+    }, {
+      key: '_handleChipClick',
+      value: function _handleChipClick(e) {
+        var $chip = $(e.target).closest('.chip');
+        var clickedClose = $(e.target).is('.close');
+        if ($chip.length) {
+          var 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
+       */
+
+    }, {
+      key: '_handleInputFocus',
+
+
+      /**
+       * Handle Input Focus
+       */
+      value: function _handleInputFocus() {
+        this.$el.addClass('focus');
+      }
+
+      /**
+       * Handle Input Blur
+       */
+
+    }, {
+      key: '_handleInputBlur',
+      value: function _handleInputBlur() {
+        this.$el.removeClass('focus');
+      }
+
+      /**
+       * Handle Input Keydown
+       * @param {Event} e
+       */
+
+    }, {
+      key: '_handleInputKeydown',
+      value: function _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();
+          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}
+       */
+
+    }, {
+      key: '_renderChip',
+      value: function _renderChip(chip) {
+        if (!chip.tag) {
+          return;
+        }
+
+        var renderedChip = document.createElement('div');
+        var 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) {
+          var img = document.createElement('img');
+          img.setAttribute('src', chip.image);
+          renderedChip.insertBefore(img, renderedChip.firstChild);
+        }
+
+        renderedChip.appendChild(closeIcon);
+        return renderedChip;
+      }
+
+      /**
+       * Render Chips
+       */
+
+    }, {
+      key: '_renderChips',
+      value: function _renderChips() {
+        this.$chips.remove();
+        for (var i = 0; i < this.chipsData.length; i++) {
+          var chipEl = this._renderChip(this.chipsData[i]);
+          this.$el.append(chipEl);
+          this.$chips.add(chipEl);
+        }
+
+        // move input to end
+        this.$el.append(this.$input);
+      }
+
+      /**
+       * Setup Autocomplete
+       */
+
+    }, {
+      key: '_setupAutocomplete',
+      value: function _setupAutocomplete() {
+        var _this = this;
+
+        this.options.autocompleteOptions.onAutocomplete = function (val) {
+          _this.addChip({ tag: val });
+          _this.$input[0].value = '';
+          _this.$input[0].focus();
+        };
+
+        this.autocomplete = M.Autocomplete.init(this.$input, this.options.autocompleteOptions)[0];
+      }
+
+      /**
+       * Setup Label
+       */
+
+    }, {
+      key: '_setupLabel',
+      value: function _setupLabel() {
+        this.$label = this.$el.find('label');
+        if (this.$label.length) {
+          this.$label.setAttribute('for', this.$input.attr('id'));
+        }
+      }
+
+      /**
+       * Set placeholder
+       */
+
+    }, {
+      key: '_setPlaceholder',
+      value: function _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
+       */
+
+    }, {
+      key: '_isValid',
+      value: function _isValid(chip) {
+        if (chip.hasOwnProperty('tag') && chip.tag !== '') {
+          var exists = false;
+          for (var i = 0; i < this.chipsData.length; i++) {
+            if (this.chipsData[i].tag === chip.tag) {
+              exists = true;
+              break;
+            }
+          }
+          return !exists;
+        } else {
+          return false;
+        }
+      }
+
+      /**
+       * Add chip
+       * @param {chip} chip
+       */
+
+    }, {
+      key: 'addChip',
+      value: function addChip(chip) {
+        if (!this._isValid(chip) || this.chipsData.length >= this.options.limit) {
+          return;
+        }
+
+        var 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
+       */
+
+    }, {
+      key: 'deleteChip',
+      value: function deleteChip(chipIndex) {
+        // let chip = this.chips[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, this.$chip);
+        }
+      }
+
+      /**
+       * Select chip
+       * @param {Number} chip
+       */
+
+    }, {
+      key: 'selectChip',
+      value: function selectChip(chipIndex) {
+        var $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, this.$chip);
+        }
+      }
+
+      /**
+       * Deselect chip
+       * @param {Number} chip
+       */
+
+    }, {
+      key: 'deselectChip',
+      value: function deselectChip(chipIndex) {
+        var $chip = this.$chips.eq(chipIndex);
+        this._selectedChip = null;
+      }
+    }], [{
+      key: 'init',
+      value: function init($els, options) {
+        var arr = [];
+        $els.each(function () {
+          arr.push(new Chips(this, options));
+        });
+        return arr;
+      }
+
+      /**
+       * Get Instance
+       */
+
+    }, {
+      key: 'getInstance',
+      value: function getInstance(el) {
+        var domElem = !!el.jquery ? el[0] : el;
+        return domElem.M_Chips;
+      }
+    }, {
+      key: '_handleChipsKeydown',
+      value: function _handleChipsKeydown(e) {
+        Chips._keydown = true;
+
+        var $chips = $(e.target).closest('.chips');
+        var chipsKeydown = e.target && $chips.length;
+
+        // Don't handle keydown inputs on input and textarea
+        if ($(e.target).is('input, textarea') || !chipsKeydown) {
+          return;
+        }
+
+        var currChips = $chips[0].M_Chips;
+
+        // backspace and delete
+        if (e.keyCode === 8 || e.keyCode === 46) {
+          e.preventDefault();
+
+          var selectIndex = currChips.chipsData.length;
+          if (currChips._selectedChip) {
+            var index = currChips._selectedChip.index();
+            currChips.deleteChip(index);
+            currChips._selectedChip = null;
+            selectIndex = index - 1;
+          }
+
+          if (currChips.chipsData.length) {
+            currChips.selectChip(selectIndex);
+          }
+
+          // left arrow key
+        } else if (e.keyCode === 37) {
+          if (currChips._selectedChip) {
+            var _selectIndex = currChips._selectedChip.index() - 1;
+            if (_selectIndex < 0) {
+              return;
+            }
+            currChips.selectChip(_selectIndex);
+          }
+
+          // right arrow key
+        } else if (e.keyCode === 39) {
+          if (currChips._selectedChip) {
+            var _selectIndex2 = currChips._selectedChip.index() + 1;
+
+            if (_selectIndex2 >= currChips.chipsData.length) {
+              currChips.$input[0].focus();
+            } else {
+              currChips.selectChip(_selectIndex2);
+            }
+          }
+        }
+      }
+
+      /**
+       * Handle Chips Keyup
+       * @param {Event} e
+       */
+
+    }, {
+      key: '_handleChipsKeyup',
+      value: function _handleChipsKeyup(e) {
+        Chips._keydown = false;
+      }
+
+      /**
+       * Handle Chips Blur
+       * @param {Event} e
+       */
+
+    }, {
+      key: '_handleChipsBlur',
+      value: function _handleChipsBlur(e) {
+        if (!Chips._keydown) {
+          var $chips = $(e.target).closest('.chips');
+          var currChips = $chips[0].M_Chips;
+
+          currChips._selectedChip = null;
+        }
+      }
+    }, {
+      key: 'defaults',
+      get: function () {
+        return _defaults;
+      }
+    }]);
+
+    return Chips;
+  }();
+
+  /**
+   * @static
+   * @memberof Chips
+   */
+
+
+  Chips._keydown = false;
+
+  M.Chips = Chips;
+
+  if (M.jQueryLoaded) {
+    M.initializeJqueryWrapper(Chips, 'chips', 'M_Chips');
+  }
+
+  $(document).on('ready turbolinks:load', function () {
+    // Handle removal of static chips.
+    $(document.body).on('click', '.chip .close', function () {
+      var $chips = $(this).closest('.chips');
+      if ($chips.length && $chips[0].M_Chips) {
+        return;
+      }
+      $(this).closest('.chip').remove();
+    });
+  });
+})(cash);