materialize-sass 0.100.2.1 → 1.0.0.alpha1

data/assets/javascripts/materialize/autocomplete.js

@@ -0,0 +1,420 @@
+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 = {
+    data: {}, // Autocomplete data set
+    limit: Infinity, // Limit of results the autocomplete shows
+    onAutocomplete: null, // Callback for when autocompleted
+    minLength: 1, // Min characters before autocomplete starts
+    sortFunction: function (a, b, inputString) {
+      // Sort function for sorting autocomplete results
+      return a.indexOf(inputString) - b.indexOf(inputString);
+    }
+  };
+
+  /**
+   * @class
+   *
+   */
+
+  var Autocomplete = function () {
+    /**
+     * Construct Autocomplete instance
+     * @constructor
+     * @param {Element} el
+     * @param {Object} options
+     */
+    function Autocomplete(el, options) {
+      _classCallCheck(this, Autocomplete);
+
+      // If exists, destroy and reinitialize
+      if (!!el.M_Autocomplete) {
+        el.M_Autocomplete.destroy();
+      }
+
+      this.el = el;
+      this.$el = $(el);
+      this.el.M_Autocomplete = this;
+
+      /**
+       * Options for the autocomplete
+       * @member Autocomplete#options
+       * @prop {Number} duration
+       * @prop {Number} dist
+       * @prop {number} shift
+       * @prop {number} padding
+       * @prop {Boolean} fullWidth
+       * @prop {Boolean} indicators
+       * @prop {Boolean} noWrap
+       * @prop {Function} onCycleTo
+       */
+      this.options = $.extend({}, Autocomplete.defaults, options);
+
+      // Setup
+      this.isOpen = false;
+      this.count = 0;
+      this.activeIndex = -1;
+      this.oldVal;
+      this.$inputField = this.$el.closest('.input-field');
+      this.$active = $();
+      this._setupDropdown();
+
+      this._setupEventHandlers();
+    }
+
+    _createClass(Autocomplete, [{
+      key: 'destroy',
+
+
+      /**
+       * Teardown component
+       */
+      value: function destroy() {
+        this._removeEventHandlers();
+        this._removeDropdown();
+        this.el.M_Autocomplete = undefined;
+      }
+
+      /**
+       * Setup Event Handlers
+       */
+
+    }, {
+      key: '_setupEventHandlers',
+      value: function _setupEventHandlers() {
+        this._handleInputBlurBound = this._handleInputBlur.bind(this);
+        this._handleInputKeyupAndFocusBound = this._handleInputKeyupAndFocus.bind(this);
+        this._handleInputKeydownBound = this._handleInputKeydown.bind(this);
+        this._handleContainerMousedownAndTouchstartBound = this._handleContainerMousedownAndTouchstart.bind(this);
+
+        this.el.addEventListener('blur', this._handleInputBlurBound);
+        this.el.addEventListener('keyup', this._handleInputKeyupAndFocusBound);
+        this.el.addEventListener('focus', this._handleInputKeyupAndFocusBound);
+        this.el.addEventListener('keydown', this._handleInputKeydownBound);
+        this.container.addEventListener('mousedown', this._handleContainerMousedownAndTouchstartBound);
+
+        if (typeof window.ontouchstart !== 'undefined') {
+          this.container.addEventListener('touchstart', this._handleContainerMousedownAndTouchstartBound);
+        }
+      }
+
+      /**
+       * Remove Event Handlers
+       */
+
+    }, {
+      key: '_removeEventHandlers',
+      value: function _removeEventHandlers() {
+        this.el.removeEventListener('blur', this._handleInputBlurBound);
+        this.el.removeEventListener('keyup', this._handleInputKeyupAndFocusBound);
+        this.el.removeEventListener('focus', this._handleInputKeyupAndFocusBound);
+        this.el.removeEventListener('keydown', this._handleInputKeydownBound);
+        this.container.removeEventListener('mousedown', this._handleContainerMousedownAndTouchstartBound);
+
+        if (typeof window.ontouchstart !== 'undefined') {
+          this.container.removeEventListener('touchstart', this._handleContainerMousedownAndTouchstartBound);
+        }
+      }
+
+      /**
+       * Setup dropdown
+       */
+
+    }, {
+      key: '_setupDropdown',
+      value: function _setupDropdown() {
+        this.container = document.createElement('ul');
+        $(this.container).addClass('autocomplete-content dropdown-content');
+        this.$inputField.append(this.container);
+      }
+
+      /**
+       * Remove dropdown
+       */
+
+    }, {
+      key: '_removeDropdown',
+      value: function _removeDropdown() {
+        this.container.parentNode.removeChild(this.container);
+      }
+
+      /**
+       * Handle Input Blur
+       */
+
+    }, {
+      key: '_handleInputBlur',
+      value: function _handleInputBlur() {
+        this._removeAutocomplete();
+      }
+
+      /**
+       * Handle Input Keyup and Focus
+       * @param {Event} e
+       */
+
+    }, {
+      key: '_handleInputKeyupAndFocus',
+      value: function _handleInputKeyupAndFocus(e) {
+        if (e.type === 'keyup') {
+          Autocomplete._keydown = false;
+        }
+
+        this.count = 0;
+        var val = this.el.value.toLowerCase();
+
+        // Don't capture enter or arrow key usage.
+        if (e.keyCode === 13 || e.keyCode === 38 || e.keyCode === 40) {
+          return;
+        }
+
+        // Check if the input isn't empty
+        if (this.oldVal !== val) {
+          this._removeAutocomplete();
+
+          if (val.length >= this.options.minLength) {
+            this.isOpen = true;
+            this._renderDropdown(this.options.data, val);
+          }
+        }
+
+        // Update oldVal
+        this.oldVal = val;
+      }
+
+      /**
+       * Handle Input Keydown
+       * @param {Event} e
+       */
+
+    }, {
+      key: '_handleInputKeydown',
+      value: function _handleInputKeydown(e) {
+        Autocomplete._keydown = true;
+
+        // Arrow keys and enter key usage
+        var keyCode = e.keyCode,
+            liElement = void 0,
+            numItems = $(this.container).children('li').length;
+
+        // select element on Enter
+        if (keyCode === 13 && this.activeIndex >= 0) {
+          liElement = $(this.container).children('li').eq(this.activeIndex);
+          if (liElement.length) {
+            this.selectOption(liElement);
+            e.preventDefault();
+          }
+          return;
+        }
+
+        // Capture up and down key
+        if (keyCode === 38 || keyCode === 40) {
+          e.preventDefault();
+
+          if (keyCode === 38 && this.activeIndex > 0) {
+            this.activeIndex--;
+          }
+
+          if (keyCode === 40 && this.activeIndex < numItems - 1) {
+            this.activeIndex++;
+          }
+
+          this.$active.removeClass('active');
+          if (this.activeIndex >= 0) {
+            this.$active = $(this.container).children('li').eq(this.activeIndex);
+            this.$active.addClass('active');
+          }
+        }
+      }
+
+      /**
+       * Handle Container Mousedown and Touchstart
+       * @param {Event} e
+       */
+
+    }, {
+      key: '_handleContainerMousedownAndTouchstart',
+      value: function _handleContainerMousedownAndTouchstart(e) {
+        var $autocompleteOption = $(e.target).closest('li');
+        this.selectOption($autocompleteOption);
+      }
+
+      /**
+       * Highlight partial match
+       */
+
+    }, {
+      key: '_highlight',
+      value: function _highlight(string, $el) {
+        var img = $el.find('img');
+        var matchStart = $el.text().toLowerCase().indexOf("" + string.toLowerCase() + ""),
+            matchEnd = matchStart + string.length - 1,
+            beforeMatch = $el.text().slice(0, matchStart),
+            matchText = $el.text().slice(matchStart, matchEnd + 1),
+            afterMatch = $el.text().slice(matchEnd + 1);
+        $el.html("<span>" + beforeMatch + "<span class='highlight'>" + matchText + "</span>" + afterMatch + "</span>");
+        if (img.length) {
+          $el.prepend(img);
+        }
+      }
+
+      /**
+       * Reset current element position
+       */
+
+    }, {
+      key: '_resetCurrentElement',
+      value: function _resetCurrentElement() {
+        this.activeIndex = -1;
+        this.$active.removeClass('active');
+      }
+
+      /**
+       * Remove autocomplete elements
+       */
+
+    }, {
+      key: '_removeAutocomplete',
+      value: function _removeAutocomplete() {
+        $(this.container).empty();
+        this._resetCurrentElement();
+        this.oldVal = null;
+        this.isOpen = false;
+      }
+
+      /**
+       * Select autocomplete option
+       * @param {Element} el  Autocomplete option list item element
+       */
+
+    }, {
+      key: 'selectOption',
+      value: function selectOption(el) {
+        var text = el.text().trim();
+        this.el.value = text;
+        this.$el.trigger('change');
+        this._removeAutocomplete();
+
+        // Handle onAutocomplete callback.
+        if (typeof this.options.onAutocomplete === 'function') {
+          this.options.onAutocomplete.call(this, text);
+        }
+      }
+
+      /**
+       * Render dropdown content
+       * @param {Object} data  data set
+       * @param {String} val  current input value
+       */
+
+    }, {
+      key: '_renderDropdown',
+      value: function _renderDropdown(data, val) {
+        var _this = this;
+
+        this._removeAutocomplete();
+
+        var matchingData = [];
+
+        // Gather all matching data
+        for (var key in data) {
+          if (data.hasOwnProperty(key) && key.toLowerCase().indexOf(val) !== -1) {
+            // Break if past limit
+            if (this.count >= this.options.limit) {
+              break;
+            }
+
+            var entry = {
+              data: data[key],
+              key: key
+            };
+            matchingData.push(entry);
+
+            this.count++;
+          }
+        }
+
+        // Sort
+        var sortFunctionBound = function (a, b) {
+          return _this.options.sortFunction(a.key.toLowerCase(), b.key.toLowerCase(), val.toLowerCase());
+        };
+        matchingData.sort(sortFunctionBound);
+
+        // Render
+        for (var i = 0; i < matchingData.length; i++) {
+          var _entry = matchingData[i];
+          var $autocompleteOption = $('<li></li>');
+          if (!!_entry.data) {
+            $autocompleteOption.append('<img src="' + _entry.data + '" class="right circle"><span>' + _entry.key + '</span>');
+          } else {
+            $autocompleteOption.append('<span>' + _entry.key + '</span>');
+          }
+
+          $(this.container).append($autocompleteOption);
+          this._highlight(val, $autocompleteOption);
+        }
+      }
+
+      /**
+       * Update Data
+       * @param {Object} data
+       */
+
+    }, {
+      key: 'updateData',
+      value: function updateData(data) {
+        var val = this.el.value.toLowerCase();
+        this.options.data = data;
+
+        if (this.isOpen) {
+          this._renderDropdown(data, val);
+        }
+      }
+    }], [{
+      key: 'init',
+      value: function init($els, options) {
+        var arr = [];
+        $els.each(function () {
+          arr.push(new Autocomplete(this, options));
+        });
+        return arr;
+      }
+
+      /**
+       * Get Instance
+       */
+
+    }, {
+      key: 'getInstance',
+      value: function getInstance(el) {
+        var domElem = !!el.jquery ? el[0] : el;
+        return domElem.M_Autocomplete;
+      }
+    }, {
+      key: 'defaults',
+      get: function () {
+        return _defaults;
+      }
+    }]);
+
+    return Autocomplete;
+  }();
+
+  /**
+   * @static
+   * @memberof Autocomplete
+   */
+
+
+  Autocomplete._keydown = false;
+
+  M.Autocomplete = Autocomplete;
+
+  if (M.jQueryLoaded) {
+    M.initializeJqueryWrapper(Autocomplete, 'autocomplete', 'M_Autocomplete');
+  }
+})(cash);

data/assets/javascripts/materialize/buttons.js

@@ -0,0 +1,388 @@
+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 = {
+    direction: 'top',
+    hoverEnabled: true,
+    toolbarEnabled: false
+  };
+
+  $.fn.reverse = [].reverse;
+
+  /**
+   * @class
+   *
+   */
+
+  var FloatingActionButton = function () {
+    /**
+     * Construct FloatingActionButton instance
+     * @constructor
+     * @param {Element} el
+     * @param {Object} options
+     */
+    function FloatingActionButton(el, options) {
+      _classCallCheck(this, FloatingActionButton);
+
+      // If exists, destroy and reinitialize
+      if (!!el.M_FloatingActionButton) {
+        el.M_FloatingActionButton.destroy();
+      }
+
+      this.el = el;
+      this.$el = $(el);
+      this.el.M_FloatingActionButton = this;
+
+      /**
+       * Options for the fab
+       * @member FloatingActionButton#options
+       * @prop {Boolean} [direction] - Direction fab menu opens
+       * @prop {Boolean} [hoverEnabled=true] - Enable hover vs click
+       * @prop {Boolean} [toolbarEnabled=false] - Enable toolbar transition
+       */
+      this.options = $.extend({}, FloatingActionButton.defaults, options);
+
+      this.isOpen = false;
+      this.$anchor = this.$el.children('a').first();
+      this.$menu = this.$el.children('ul').first();
+      this.$floatingBtns = this.$el.find('ul .btn-floating');
+      this.$floatingBtnsReverse = this.$el.find('ul .btn-floating').reverse();
+      if (this.options.direction === 'top') {
+        this.$el.addClass('direction-top');
+        this.offsetY = 40;
+      } else if (this.options.direction === 'right') {
+        this.$el.addClass('direction-right');
+        this.offsetX = -40;
+      } else if (this.options.direction === 'bottom') {
+        this.$el.addClass('direction-bottom');
+        this.offsetY = -40;
+      } else {
+        this.$el.addClass('direction-left');
+        this.offsetX = 40;
+      }
+      this._setupEventHandlers();
+    }
+
+    _createClass(FloatingActionButton, [{
+      key: 'destroy',
+
+
+      /**
+       * Teardown component
+       */
+      value: function destroy() {
+        this._removeEventHandlers();
+        this.el.M_FloatingActionButton = undefined;
+      }
+
+      /**
+       * Setup Event Handlers
+       */
+
+    }, {
+      key: '_setupEventHandlers',
+      value: function _setupEventHandlers() {
+        this._handleFABClickBound = this._handleFABClick.bind(this);
+        this._handleOpenBound = this.open.bind(this);
+        this._handleCloseBound = this.close.bind(this);
+
+        if (this.options.hoverEnabled && !this.options.toolbarEnabled) {
+          this.el.addEventListener('mouseenter', this._handleOpenBound);
+          this.el.addEventListener('mouseleave', this._handleCloseBound);
+        } else {
+          this.el.addEventListener('click', this._handleFABClickBound);
+        }
+      }
+
+      /**
+       * Remove Event Handlers
+       */
+
+    }, {
+      key: '_removeEventHandlers',
+      value: function _removeEventHandlers() {
+        if (this.options.hoverEnabled && !this.options.toolbarEnabled) {
+          this.el.removeEventListener('mouseenter', this._handleOpenBound);
+          this.el.removeEventListener('mouseleave', this._handleCloseBound);
+        } else {
+          this.el.removeEventListener('click', this._handleFABClickBound);
+        }
+      }
+
+      /**
+       * Handle FAB Click
+       */
+
+    }, {
+      key: '_handleFABClick',
+      value: function _handleFABClick() {
+        if (this.isOpen) {
+          this.close();
+        } else {
+          this.open();
+        }
+      }
+
+      /**
+       * Handle Document Click
+       * @param {Event} e
+       */
+
+    }, {
+      key: '_handleDocumentClick',
+      value: function _handleDocumentClick(e) {
+        if (!$(e.target).closest(this.$menu).length) {
+          this.close();
+        }
+      }
+
+      /**
+       * Open FAB
+       */
+
+    }, {
+      key: 'open',
+      value: function open() {
+        if (this.isOpen) {
+          return;
+        }
+
+        if (this.options.toolbarEnabled) {
+          this._animateInToolbar();
+        } else {
+          this._animateInFAB();
+        }
+        this.isOpen = true;
+      }
+
+      /**
+       * Close FAB
+       */
+
+    }, {
+      key: 'close',
+      value: function close() {
+        if (!this.isOpen) {
+          return;
+        }
+
+        if (this.options.toolbarEnabled) {
+          window.removeEventListener('scroll', this._handleCloseBound, true);
+          document.body.removeEventListener('click', this._handleDocumentClickBound, true);
+          this._animateOutToolbar();
+        } else {
+          this._animateOutFAB();
+        }
+        this.isOpen = false;
+      }
+
+      /**
+       * Classic FAB Menu open
+       */
+
+    }, {
+      key: '_animateInFAB',
+      value: function _animateInFAB() {
+        this.$el.addClass('active');
+        Vel.hook(this.$floatingBtns, 'scaleX', 0.4);
+        Vel.hook(this.$floatingBtns, 'scaleY', 0.4);
+        Vel.hook(this.$floatingBtns, 'translateY', this.offsetY + 'px');
+        Vel.hook(this.$floatingBtns, 'translateX', this.offsetX + 'px');
+
+        var time = 0;
+        this.$floatingBtnsReverse.each(function () {
+          Vel(this, { opacity: "1", scaleX: 1, scaleY: 1, translateY: 0, translateX: 0 }, { duration: 80, delay: time });
+          time += 40;
+        });
+      }
+
+      /**
+       * Classic FAB Menu close
+       */
+
+    }, {
+      key: '_animateOutFAB',
+      value: function _animateOutFAB() {
+        this.$el.removeClass('active');
+        Vel(this.$floatingBtns, 'stop');
+        Vel(this.$floatingBtns, { opacity: "0", scaleX: .4, scaleY: .4, translateY: this.offsetY, translateX: this.offsetX }, { duration: 80 });
+      }
+
+      /**
+       * Toolbar transition Menu open
+       */
+
+    }, {
+      key: '_animateInToolbar',
+      value: function _animateInToolbar() {
+        var _this = this;
+
+        var scaleFactor = void 0;
+        var windowWidth = window.innerWidth;
+        var windowHeight = window.innerHeight;
+        var btnRect = this.el.getBoundingClientRect();
+        var backdrop = $('<div class="fab-backdrop"></div>');
+        var fabColor = this.$anchor.css('background-color');
+        this.$anchor.append(backdrop);
+
+        this.offsetX = btnRect.left - windowWidth / 2 + btnRect.width / 2;
+        this.offsetY = windowHeight - btnRect.bottom;
+        scaleFactor = windowWidth / backdrop[0].clientWidth;
+        this.btnBottom = btnRect.bottom;
+        this.btnLeft = btnRect.left;
+        this.btnWidth = btnRect.width;
+
+        // Set initial state
+        this.$el.addClass('active');
+        this.$el.css({
+          'text-align': 'center',
+          width: '100%',
+          bottom: 0,
+          left: 0,
+          transform: 'translateX(' + this.offsetX + 'px)',
+          transition: 'none'
+        });
+        this.$anchor.css({
+          transform: 'translateY(' + -this.offsetY + 'px)',
+          transition: 'none'
+        });
+        backdrop.css({
+          'background-color': fabColor
+        });
+
+        setTimeout(function () {
+          _this.$el.css({
+            transform: '',
+            transition: 'transform .2s cubic-bezier(0.550, 0.085, 0.680, 0.530), background-color 0s linear .2s'
+          });
+          _this.$anchor.css({
+            overflow: 'visible',
+            transform: '',
+            transition: 'transform .2s'
+          });
+
+          setTimeout(function () {
+            _this.$el.css({
+              overflow: 'hidden',
+              'background-color': fabColor
+            });
+            backdrop.css({
+              transform: 'scale(' + scaleFactor + ')',
+              transition: 'transform .2s cubic-bezier(0.550, 0.055, 0.675, 0.190)'
+            });
+            _this.$menu.children('li').children('a').css({
+              opacity: 1
+            });
+
+            // Scroll to close.
+            _this._handleDocumentClickBound = _this._handleDocumentClick.bind(_this);
+            window.addEventListener('scroll', _this._handleCloseBound, true);
+            document.body.addEventListener('click', _this._handleDocumentClickBound, true);
+          }, 100);
+        }, 0);
+      }
+
+      /**
+       * Toolbar transition Menu close
+       */
+
+    }, {
+      key: '_animateOutToolbar',
+      value: function _animateOutToolbar() {
+        var _this2 = this;
+
+        var windowWidth = window.innerWidth;
+        var windowHeight = window.innerHeight;
+        var backdrop = this.$el.find('.fab-backdrop');
+        var fabColor = anchor.css('background-color');
+
+        this.offsetX = this.btnLeft - windowWidth / 2 + this.btnWidth / 2;
+        this.offsetY = windowHeight - this.btnBottom;
+
+        // Hide backdrop
+        this.$el.removeClass('active');
+        this.$el.css({
+          'background-color': 'transparent',
+          transition: 'none'
+        });
+        this.$anchor.css({
+          transition: 'none'
+        });
+        backdrop.css({
+          transform: 'scale(0)',
+          'background-color': fabColor
+        });
+        this.$menu.children('li').children('a').css({
+          opacity: ''
+        });
+
+        setTimeout(function () {
+          backdrop.remove();
+
+          // Set initial state.
+          _this2.$el.css({
+            'text-align': '',
+            width: '',
+            bottom: '',
+            left: '',
+            overflow: '',
+            'background-color': '',
+            transform: 'translate3d(' + -_this2.offsetX + 'px,0,0)'
+          });
+          _this2.$anchor.css({
+            overflow: '',
+            transform: 'translate3d(0,' + _this2.offsetY + 'px,0)'
+          });
+
+          setTimeout(function () {
+            _this2.$el.css({
+              transform: 'translate3d(0,0,0)',
+              transition: 'transform .2s'
+            });
+            _this2.$anchor.css({
+              transform: 'translate3d(0,0,0)',
+              transition: 'transform .2s cubic-bezier(0.550, 0.055, 0.675, 0.190)'
+            });
+          }, 20);
+        }, 200);
+      }
+    }], [{
+      key: 'init',
+      value: function init($els, options) {
+        var arr = [];
+        $els.each(function () {
+          arr.push(new FloatingActionButton(this, options));
+        });
+        return arr;
+      }
+
+      /**
+       * Get Instance
+       */
+
+    }, {
+      key: 'getInstance',
+      value: function getInstance(el) {
+        var domElem = !!el.jquery ? el[0] : el;
+        return domElem.M_FloatingActionButton;
+      }
+    }, {
+      key: 'defaults',
+      get: function () {
+        return _defaults;
+      }
+    }]);
+
+    return FloatingActionButton;
+  }();
+
+  M.FloatingActionButton = FloatingActionButton;
+
+  if (M.jQueryLoaded) {
+    M.initializeJqueryWrapper(FloatingActionButton, 'floatingActionButton', 'M_FloatingActionButton');
+  }
+})(cash, M.Vel);