materialize-sass 0.100.2.1 → 1.0.0.alpha1

data/assets/javascripts/materialize/scrollspy.js

@@ -0,0 +1,322 @@
+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 = {
+    throttle: 100,
+    scrollOffset: 200, // offset - 200 allows elements near bottom of page to scroll
+    activeClass: 'active',
+    getActiveElement: function (id) {
+      return 'a[href="#' + id + '"]';
+    }
+  };
+
+  /**
+   * @class
+   *
+   */
+
+  var ScrollSpy = function () {
+    /**
+     * Construct ScrollSpy instance
+     * @constructor
+     * @param {Element} el
+     * @param {Object} options
+     */
+    function ScrollSpy(el, options) {
+      _classCallCheck(this, ScrollSpy);
+
+      // If exists, destroy and reinitialize
+      if (!!el.M_ScrollSpy) {
+        el.M_ScrollSpy.destroy();
+      }
+
+      this.el = el;
+      this.$el = $(el);
+      this.el.M_ScrollSpy = this;
+
+      /**
+       * Options for the modal
+       * @member Modal#options
+       * @prop {Number} [throttle=100] - Throttle of scroll handler
+       * @prop {Number} [scrollOffset=200] - Offset for centering element when scrolled to
+       * @prop {String} [activeClass='active'] - Class applied to active elements
+       * @prop {Function} [getActiveElement] - Used to find active element
+       */
+      this.options = $.extend({}, ScrollSpy.defaults, options);
+
+      // setup
+      ScrollSpy._elements.push(this);
+      ScrollSpy._count++;
+      ScrollSpy._increment++;
+      this.tickId = -1;
+      this.id = ScrollSpy._increment;
+      this._setupEventHandlers();
+      this._handleWindowScroll();
+    }
+
+    _createClass(ScrollSpy, [{
+      key: 'destroy',
+
+
+      /**
+       * Teardown component
+       */
+      value: function destroy() {
+        ScrollSpy._elements.splice(ScrollSpy._elements.indexOf(this), 1);
+        ScrollSpy._elementsInView.splice(ScrollSpy._elementsInView.indexOf(this), 1);
+        ScrollSpy._visibleElements.splice(ScrollSpy._visibleElements.indexOf(this.$el), 1);
+        ScrollSpy._count--;
+        this._removeEventHandlers();
+        $(this.options.getActiveElement(this.$el.attr('id'))).removeClass(this.options.activeClass);
+        this.el.M_ScrollSpy = undefined;
+      }
+
+      /**
+       * Setup Event Handlers
+       */
+
+    }, {
+      key: '_setupEventHandlers',
+      value: function _setupEventHandlers() {
+        var throttledResize = M.throttle(this._handleWindowScroll, 200);
+        this._handleThrottledResizeBound = throttledResize.bind(this);
+        this._handleWindowScrollBound = this._handleWindowScroll.bind(this);
+        if (ScrollSpy._count === 1) {
+          window.addEventListener('scroll', this._handleWindowScrollBound);
+          window.addEventListener('resize', this._handleThrottledResizeBound);
+          document.body.addEventListener('click', this._handleTriggerClick);
+        }
+      }
+
+      /**
+       * Remove Event Handlers
+       */
+
+    }, {
+      key: '_removeEventHandlers',
+      value: function _removeEventHandlers() {
+        if (ScrollSpy._count === 0) {
+          window.removeEventListener('scroll', this._handleWindowScrollBound);
+          window.removeEventListener('resize', this._handleThrottledResizeBound);
+          document.body.removeEventListener('click', this._handleTriggerClick);
+        }
+      }
+
+      /**
+       * Handle Trigger Click
+       * @param {Event} e
+       */
+
+    }, {
+      key: '_handleTriggerClick',
+      value: function _handleTriggerClick(e) {
+        var $trigger = $(e.target);
+        for (var i = ScrollSpy._elements.length - 1; i >= 0; i--) {
+          var scrollspy = ScrollSpy._elements[i];
+          if ($trigger.is('a[href="#' + scrollspy.$el.attr('id') + '"]')) {
+            e.preventDefault();
+            var offset = scrollspy.$el.offset().top + 1;
+            Vel(document.body, 'scroll', { duration: 400, offset: offset - scrollspy.options.scrollOffset, easing: 'easeOutCubic' });
+            break;
+          }
+        }
+      }
+
+      /**
+       * Handle Window Scroll
+       */
+
+    }, {
+      key: '_handleWindowScroll',
+      value: function _handleWindowScroll() {
+        // unique tick id
+        ScrollSpy._ticks++;
+
+        // viewport rectangle
+        var top = M.getDocumentScrollTop(),
+            left = M.getDocumentScrollLeft(),
+            right = left + window.innerWidth,
+            bottom = top + window.innerHeight;
+
+        // determine which elements are in view
+        var intersections = ScrollSpy._findElements(top, right, bottom, left);
+        for (var i = 0; i < intersections.length; i++) {
+          var scrollspy = intersections[i];
+          var lastTick = scrollspy.tickId;
+          if (lastTick < 0) {
+            // entered into view
+            scrollspy._enter();
+          }
+
+          // update tick id
+          scrollspy.tickId = ScrollSpy._ticks;
+        }
+
+        for (var _i = 0; _i < ScrollSpy._elementsInView.length; _i++) {
+          var _scrollspy = ScrollSpy._elementsInView[_i];
+          var _lastTick = _scrollspy.tickId;
+          if (_lastTick >= 0 && _lastTick !== ScrollSpy._ticks) {
+            // exited from view
+            _scrollspy._exit();
+            _scrollspy.tickId = -1;
+          }
+        }
+
+        // remember elements in view for next tick
+        ScrollSpy._elementsInView = intersections;
+      }
+
+      /**
+       * Find elements that are within the boundary
+       * @param {number} top
+       * @param {number} right
+       * @param {number} bottom
+       * @param {number} left
+       * @return {Array.<ScrollSpy>}   A collection of elements
+       */
+
+    }, {
+      key: '_enter',
+      value: function _enter() {
+        ScrollSpy._visibleElements = ScrollSpy._visibleElements.filter(function (value) {
+          return value.height() != 0;
+        });
+
+        if (ScrollSpy._visibleElements[0]) {
+          $(this.options.getActiveElement(ScrollSpy._visibleElements[0].attr('id'))).removeClass(this.options.activeClass);
+          if (ScrollSpy._visibleElements[0][0].M_ScrollSpy && this.id < ScrollSpy._visibleElements[0][0].M_ScrollSpy.id) {
+            ScrollSpy._visibleElements.unshift(this.$el);
+          } else {
+            ScrollSpy._visibleElements.push(this.$el);
+          }
+        } else {
+          ScrollSpy._visibleElements.push(this.$el);
+        }
+
+        $(this.options.getActiveElement(ScrollSpy._visibleElements[0].attr('id'))).addClass(this.options.activeClass);
+      }
+    }, {
+      key: '_exit',
+      value: function _exit() {
+        var _this = this;
+
+        ScrollSpy._visibleElements = ScrollSpy._visibleElements.filter(function (value) {
+          return value.height() != 0;
+        });
+
+        if (ScrollSpy._visibleElements[0]) {
+          $(this.options.getActiveElement(ScrollSpy._visibleElements[0].attr('id'))).removeClass(this.options.activeClass);
+
+          ScrollSpy._visibleElements = ScrollSpy._visibleElements.filter(function (el) {
+            return el.attr('id') != _this.$el.attr('id');
+          });
+          if (ScrollSpy._visibleElements[0]) {
+            // Check if empty
+            $(this.options.getActiveElement(ScrollSpy._visibleElements[0].attr('id'))).addClass(this.options.activeClass);
+          }
+        }
+      }
+    }], [{
+      key: 'init',
+      value: function init($els, options) {
+        var arr = [];
+        $els.each(function () {
+          arr.push(new ScrollSpy(this, options));
+        });
+        return arr;
+      }
+
+      /**
+       * Get Instance
+       */
+
+    }, {
+      key: 'getInstance',
+      value: function getInstance(el) {
+        var domElem = !!el.jquery ? el[0] : el;
+        return domElem.M_ScrollSpy;
+      }
+    }, {
+      key: '_findElements',
+      value: function _findElements(top, right, bottom, left) {
+        var hits = [];
+        for (var i = 0; i < ScrollSpy._elements.length; i++) {
+          var scrollspy = ScrollSpy._elements[i];
+          var currTop = top + scrollspy.options.scrollOffset || 200;
+
+          if (scrollspy.$el.height() > 0) {
+            var elTop = scrollspy.$el.offset().top,
+                elLeft = scrollspy.$el.offset().left,
+                elRight = elLeft + scrollspy.$el.width(),
+                elBottom = elTop + scrollspy.$el.height();
+
+            var isIntersect = !(elLeft > right || elRight < left || elTop > bottom || elBottom < currTop);
+
+            if (isIntersect) {
+              hits.push(scrollspy);
+            }
+          }
+        }
+        return hits;
+      }
+    }, {
+      key: 'defaults',
+      get: function () {
+        return _defaults;
+      }
+    }]);
+
+    return ScrollSpy;
+  }();
+
+  /**
+   * @static
+   * @memberof ScrollSpy
+   * @type {Array.<ScrollSpy>}
+   */
+
+
+  ScrollSpy._elements = [];
+
+  /**
+   * @static
+   * @memberof ScrollSpy
+   * @type {Array.<ScrollSpy>}
+   */
+  ScrollSpy._elementsInView = [];
+
+  /**
+   * @static
+   * @memberof ScrollSpy
+   * @type {Array.<cash>}
+   */
+  ScrollSpy._visibleElements = [];
+
+  /**
+   * @static
+   * @memberof ScrollSpy
+   */
+  ScrollSpy._count = 0;
+
+  /**
+   * @static
+   * @memberof ScrollSpy
+   */
+  ScrollSpy._increment = 0;
+
+  /**
+   * @static
+   * @memberof ScrollSpy
+   */
+  ScrollSpy._ticks = 0;
+
+  M.ScrollSpy = ScrollSpy;
+
+  if (M.jQueryLoaded) {
+    M.initializeJqueryWrapper(ScrollSpy, 'scrollSpy', 'M_ScrollSpy');
+  }
+})(cash, M.Vel);

data/assets/javascripts/materialize/select.js

@@ -0,0 +1,426 @@
+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 = {
+    classes: ''
+  };
+
+  /**
+   * @class
+   *
+   */
+
+  var Select = function () {
+    /**
+     * Construct Select instance
+     * @constructor
+     * @param {Element} el
+     * @param {Object} options
+     */
+    function Select(el, options) {
+      _classCallCheck(this, Select);
+
+      // If exists, destroy and reinitialize
+      if (!!el.M_Select) {
+        el.M_Select.destroy();
+      }
+
+      this.el = el;
+      this.$el = $(el);
+      this.el.M_Select = this;
+
+      /**
+       * Options for the select
+       * @member Select#options
+       */
+      this.options = $.extend({}, Select.defaults, options);
+
+      this.isMultiple = this.$el.prop('multiple');
+
+      // Setup
+      this.valuesSelected = [];
+      this.$selectedOptions = $();
+      this._setupDropdown();
+
+      this._setupEventHandlers();
+    }
+
+    _createClass(Select, [{
+      key: 'destroy',
+
+
+      /**
+       * Teardown component
+       */
+      value: function destroy() {
+        this._removeEventHandlers();
+        this._removeDropdown();
+        this.el.M_Select = undefined;
+      }
+
+      /**
+       * Setup Event Handlers
+       */
+
+    }, {
+      key: '_setupEventHandlers',
+      value: function _setupEventHandlers() {
+        var _this = this;
+
+        this._handleSelectChangeBound = this._handleSelectChange.bind(this);
+        this._handleOptionClickBound = this._handleOptionClick.bind(this);
+        this._handleInputClickBound = this._handleInputClick.bind(this);
+
+        $(this.dropdownOptions).find('li:not(.optgroup)').each(function (el) {
+          el.addEventListener('click', _this._handleOptionClickBound);
+        });
+        this.el.addEventListener('change', this._handleSelectChangeBound);
+        this.input.addEventListener('click', this._handleInputClickBound);
+      }
+
+      /**
+       * Remove Event Handlers
+       */
+
+    }, {
+      key: '_removeEventHandlers',
+      value: function _removeEventHandlers() {
+        var _this2 = this;
+
+        $(this.dropdownOptions).find('li:not(.optgroup)').each(function (el) {
+          el.removeEventListener('click', _this2._handleOptionClickBound);
+        });
+        this.el.removeEventListener('change', this._handleSelectChangeBound);
+        this.input.removeEventListener('click', this._handleInputClickBound);
+        this.input.removeEventListener('focus', this._handleInputFocusBound);
+      }
+
+      /**
+       * Handle Select Change
+       * @param {Event} e
+       */
+
+    }, {
+      key: '_handleSelectChange',
+      value: function _handleSelectChange(e) {
+        this._setValueToInput();
+      }
+
+      /**
+       * Handle Option Click
+       * @param {Event} e
+       */
+
+    }, {
+      key: '_handleOptionClick',
+      value: function _handleOptionClick(e) {
+        e.preventDefault();
+        var option = $(e.target).closest('li')[0];
+        var optionIndex = $(this.dropdownOptions).find('li:not(.optgroup)').index(option);
+        if (!$(option).hasClass('disabled') && !$(option).hasClass('optgroup')) {
+          var selected = true;
+
+          if (this.isMultiple) {
+            var checkbox = $(option).find('input[type="checkbox"]');
+            checkbox.prop('checked', !checkbox.prop('checked'));
+            selected = this._toggleEntryFromArray(optionIndex);
+          } else {
+            $(this.dropdownOptions).find('li').removeClass('active');
+            $(option).toggleClass('active');
+            this.input.value = option.textContent;
+          }
+
+          this._activateOption($(this.dropdownOptions), option);
+          this.$el.find('option').eq(optionIndex).prop('selected', selected);
+          this.$el.trigger('change');
+        }
+
+        e.stopPropagation();
+      }
+
+      /**
+       * Handle Input Click
+       */
+
+    }, {
+      key: '_handleInputClick',
+      value: function _handleInputClick() {
+        if (this.dropdown && this.dropdown.isOpen) {
+          this._setValueToInput();
+          this._setSelectedStates();
+        }
+      }
+
+      /**
+       * Setup dropdown
+       */
+
+    }, {
+      key: '_setupDropdown',
+      value: function _setupDropdown() {
+        var _this3 = this;
+
+        this.wrapper = document.createElement('div');
+        this.wrapper.classList.add();
+        $(this.wrapper).addClass('select-wrapper' + ' ' + this.options.classes);
+        this.$el.before($(this.wrapper));
+        this.wrapper.appendChild(this.el);
+
+        if (this.el.disabled) {
+          this.wrapper.classList.add('disabled');
+        }
+
+        // Create dropdown
+        this.$selectOptions = this.$el.children('option, optgroup');
+        this.dropdownOptions = document.createElement('ul');
+        this.dropdownOptions.id = 'select-options-' + M.guid();
+        $(this.dropdownOptions).addClass('dropdown-content select-dropdown ' + (this.isMultiple ? 'multiple-select-dropdown' : ''));
+
+        // Create dropdown structure.
+        if (this.$selectOptions.length) {
+          this.$selectOptions.each(function (el) {
+            if ($(el).is('option')) {
+              // Direct descendant option.
+              var optionEl = void 0;
+              if (_this3.isMultiple) {
+                optionEl = _this3._appendOptionWithIcon(_this3.$el, el, 'multiple');
+              } else {
+                optionEl = _this3._appendOptionWithIcon(_this3.$el, el);
+              }
+
+              if ($(el).prop('selected')) {
+                _this3.$selectedOptions.add(optionEl);
+              }
+            } else if ($(el).is('optgroup')) {
+              // Optgroup.
+              var selectOptions = $(el).children('option');
+              $(_this3.dropdownOptions).append($('<li class="optgroup"><span>' + el.getAttribute('label') + '</span></li>')[0]);
+
+              selectOptions.each(function (el) {
+                var optionEl = _this3._appendOptionWithIcon(_this3.$el, el, 'optgroup-option');
+                if ($(el).prop('selected')) {
+                  _this3.$selectedOptions.add(optionEl);
+                }
+              });
+            }
+          });
+        }
+
+        this.$el.after(this.dropdownOptions);
+
+        // Add input dropdown
+        this.input = document.createElement('input');
+        $(this.input).addClass('select-dropdown dropdown-trigger');
+        this.input.setAttribute('type', 'text');
+        this.input.setAttribute('readonly', 'true');
+        this.input.setAttribute('data-target', this.dropdownOptions.id);
+        if (this.el.disabled) {
+          $(this.input).prop('disabled', 'true');
+        }
+
+        this.$el.before(this.input);
+        this._setValueToInput();
+
+        // Add caret
+        var dropdownIcon = $('<svg class="caret" fill="#000000" height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg"><path d="M7 10l5 5 5-5z"/><path d="M0 0h24v24H0z" fill="none"/></svg>');
+        this.$el.before(dropdownIcon[0]);
+
+        // Initialize dropdown
+        if (!this.el.disabled) {
+          var dropdownOptions = {};
+          if (this.isMultiple) {
+            dropdownOptions.closeOnClick = false;
+          }
+          this.dropdown = new M.Dropdown(this.input, dropdownOptions);
+        }
+
+        // Add initial selections
+        this._setSelectedStates();
+      }
+
+      /**
+       * Remove dropdown
+       */
+
+    }, {
+      key: '_removeDropdown',
+      value: function _removeDropdown() {
+        $(this.wrapper).find('.caret').remove();
+        $(this.input).remove();
+        $(this.dropdownOptions).remove();
+        $(this.wrapper).before(this.$el);
+        $(this.wrapper).remove();
+      }
+
+      /**
+       * Setup dropdown
+       * @param {Element} select  select element
+       * @param {Element} option  option element from select
+       * @param {String} type
+       * @return {Element}  option element added
+       */
+
+    }, {
+      key: '_appendOptionWithIcon',
+      value: function _appendOptionWithIcon(select, option, type) {
+        // Add disabled attr if disabled
+        var disabledClass = option.disabled ? 'disabled ' : '';
+        var optgroupClass = type === 'optgroup-option' ? 'optgroup-option ' : '';
+        var multipleCheckbox = this.isMultiple ? '<label><input type="checkbox"' + disabledClass + '"/><span>' + option.innerHTML + '</span></label>' : option.innerHTML;
+        var liEl = $('<li></li>');
+        var spanEl = $('<span></span>');
+        spanEl.html(multipleCheckbox);
+        liEl.addClass(disabledClass + ' ' + optgroupClass);
+        liEl.append(spanEl);
+
+        // add icons
+        var iconUrl = option.getAttribute('data-icon');
+        var classes = option.getAttribute('class');
+        if (!!iconUrl) {
+          var imgEl = $('<img alt="" src="' + iconUrl + '">');
+          liEl.prepend(imgEl);
+        }
+
+        // Check for multiple type.
+        $(this.dropdownOptions).append(liEl[0]);
+        return liEl[0];
+      }
+
+      /**
+       * Toggle entry from option
+       * @param {Number} entryIndex
+       * @return {Boolean}  if entry was added or removed
+       */
+
+    }, {
+      key: '_toggleEntryFromArray',
+      value: function _toggleEntryFromArray(entryIndex) {
+        var index = this.valuesSelected.indexOf(entryIndex),
+            notAdded = index === -1;
+
+        if (notAdded) {
+          this.valuesSelected.push(entryIndex);
+        } else {
+          this.valuesSelected.splice(index, 1);
+        }
+
+        $(this.dropdownOptions).find('li:not(.optgroup)').eq(entryIndex).toggleClass('active');
+
+        // use notAdded instead of true (to detect if the option is selected or not)
+        this.$el.find('option').eq(entryIndex).prop('selected', notAdded);
+
+        return notAdded;
+      }
+
+      /**
+       * Set value to input
+       */
+
+    }, {
+      key: '_setValueToInput',
+      value: function _setValueToInput() {
+        var value = '';
+        var options = this.$el.find('option');
+
+        options.each(function (el, i) {
+          if ($(el).prop('selected')) {
+            var text = $(el).text();
+            value === '' ? value += text : value += ', ' + text;
+          }
+        });
+
+        if (value === '') {
+          var firstDisabled = this.$el.find('option:disabled').eq(0);
+          if (firstDisabled.length) {
+            value = firstDisabled.text();
+          }
+        }
+
+        this.input.value = value;
+      }
+
+      /**
+       * Set selected state of dropdown too match actual select element
+       */
+
+    }, {
+      key: '_setSelectedStates',
+      value: function _setSelectedStates() {
+        var _this4 = this;
+
+        this.valuesSelected = [];
+        var $onlyOptions = $(this.dropdownOptions).find('li:not(.optgroup)');
+        this.$el.find('option').each(function (el, i) {
+          var option = $onlyOptions.eq(i);
+
+          if ($(el).prop('selected')) {
+            option.find('input[type="checkbox"]').prop("checked", true);
+            _this4._activateOption($(_this4.dropdownOptions), option);
+            _this4.valuesSelected.push(i);
+          } else {
+            option.find('input[type="checkbox"]').prop("checked", false);
+            option.removeClass('selected');
+          }
+        });
+      }
+
+      /**
+       * Make option as selected and scroll to selected position
+       * @param {jQuery} collection  Select options jQuery element
+       * @param {Element} newOption  element of the new option
+       */
+
+    }, {
+      key: '_activateOption',
+      value: function _activateOption(collection, newOption) {
+        if (newOption) {
+          if (!this.isMultiple) {
+            collection.find('li.selected').removeClass('selected');
+          }
+
+          var option = $(newOption);
+          option.addClass('selected');
+        }
+      }
+    }], [{
+      key: 'init',
+      value: function init($els, options) {
+        var arr = [];
+        $els.each(function () {
+          if (!$(this).hasClass('browser-default')) {
+            arr.push(new Select(this, options));
+          }
+        });
+        return arr;
+      }
+
+      /**
+       * Get Instance
+       */
+
+    }, {
+      key: 'getInstance',
+      value: function getInstance(el) {
+        var domElem = !!el.jquery ? el[0] : el;
+        return domElem.M_Select;
+      }
+    }, {
+      key: 'defaults',
+      get: function () {
+        return _defaults;
+      }
+    }]);
+
+    return Select;
+  }();
+
+  M.Select = Select;
+
+  if (M.jQueryLoaded) {
+    M.initializeJqueryWrapper(Select, 'select', 'M_Select');
+  }
+})(cash);