materialize-sass 1.0.0.alpha1 → 1.0.0.alpha2

data/assets/javascripts/materialize/range.js

@@ -2,7 +2,7 @@ var _createClass = function () { function defineProperties(target, props) { for
 
 function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
 
-(function ($, Vel) {
+(function ($, anim) {
   'use strict';
 
   var _defaults = {};
@@ -66,12 +66,14 @@ function _classCallCheck(instance, Constructor) { if (!(instance instanceof Cons
       key: '_setupEventHandlers',
       value: function _setupEventHandlers() {
         this._handleRangeChangeBound = this._handleRangeChange.bind(this);
+        this._handleRangeFocusBound = this._handleRangeFocus.bind(this);
         this._handleRangeMousedownTouchstartBound = this._handleRangeMousedownTouchstart.bind(this);
         this._handleRangeInputMousemoveTouchmoveBound = this._handleRangeInputMousemoveTouchmove.bind(this);
         this._handleRangeMouseupTouchendBound = this._handleRangeMouseupTouchend.bind(this);
         this._handleRangeBlurMouseoutTouchleaveBound = this._handleRangeBlurMouseoutTouchleave.bind(this);
 
         this.el.addEventListener('change', this._handleRangeChangeBound);
+        this.el.addEventListener('focus', this._handleRangeFocusBound);
 
         this.el.addEventListener('mousedown', this._handleRangeMousedownTouchstartBound);
         this.el.addEventListener('touchstart', this._handleRangeMousedownTouchstartBound);
@@ -96,6 +98,7 @@ function _classCallCheck(instance, Constructor) { if (!(instance instanceof Cons
       key: '_removeEventHandlers',
       value: function _removeEventHandlers() {
         this.el.removeEventListener('change', this._handleRangeChangeBound);
+        this.el.removeEventListener('focus', this._handleRangeFocusBound);
 
         this.el.removeEventListener('mousedown', this._handleRangeMousedownTouchstartBound);
         this.el.removeEventListener('touchstart', this._handleRangeMousedownTouchstartBound);
@@ -130,6 +133,19 @@ function _classCallCheck(instance, Constructor) { if (!(instance instanceof Cons
         $(this.thumb).addClass('active').css('left', offsetLeft + 'px');
       }
 
+      /**
+       * Handle Range Focus
+       * @param {Event} e
+       */
+
+    }, {
+      key: '_handleRangeFocus',
+      value: function _handleRangeFocus() {
+        if (M.tabPressed) {
+          this.$el.addClass('focused');
+        }
+      }
+
       /**
        * Handle Range Mousedown and Touchstart
        * @param {Event} e
@@ -191,17 +207,21 @@ function _classCallCheck(instance, Constructor) { if (!(instance instanceof Cons
       key: '_handleRangeBlurMouseoutTouchleave',
       value: function _handleRangeBlurMouseoutTouchleave() {
         if (!this._mousedown) {
+          this.$el.removeClass('focused');
           var paddingLeft = parseInt(this.$el.css('padding-left'));
           var marginLeft = 7 + paddingLeft + 'px';
 
           if ($(this.thumb).hasClass('active')) {
-            Vel(this.thumb, 'stop');
-            Vel(this.thumb, {
-              height: '0px',
-              width: '0px',
-              top: '10px',
-              marginLeft: marginLeft
-            }, { duration: 100 });
+            anim.remove(this.thumb);
+            anim({
+              targets: this.thumb,
+              height: 0,
+              width: 0,
+              top: 10,
+              easing: 'easeOutQuad',
+              marginLeft: marginLeft,
+              duration: 100
+            });
           }
           $(this.thumb).removeClass('active');
         }
@@ -241,12 +261,16 @@ function _classCallCheck(instance, Constructor) { if (!(instance instanceof Cons
       value: function _showRangeBubble() {
         var paddingLeft = parseInt($(this.thumb).parent().css('padding-left'));
         var marginLeft = -7 + paddingLeft + 'px'; // TODO: fix magic number?
-        Vel(this.thumb, {
-          height: "30px",
-          width: "30px",
-          top: "-30px",
-          marginLeft: marginLeft
-        }, { duration: 300, easing: 'easeOutExpo' });
+        anim.remove(this.thumb);
+        anim({
+          targets: this.thumb,
+          height: 30,
+          width: 30,
+          top: -30,
+          marginLeft: marginLeft,
+          duration: 300,
+          easing: 'easeOutQuint'
+        });
       }
 
       /**
@@ -301,5 +325,5 @@ function _classCallCheck(instance, Constructor) { if (!(instance instanceof Cons
     M.initializeJqueryWrapper(Range, 'range', 'M_Range');
   }
 
-  Range.init($('input[type=range'));
-})(cash, M.Vel);
+  Range.init($('input[type=range]'));
+})(cash, M.anime);

data/assets/javascripts/materialize/scrollspy.js

@@ -2,7 +2,7 @@ var _createClass = function () { function defineProperties(target, props) { for
 
 function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
 
-(function ($, Vel) {
+(function ($, anim) {
   'use strict';
 
   var _defaults = {
@@ -120,7 +120,13 @@ function _classCallCheck(instance, Constructor) { if (!(instance instanceof Cons
           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' });
+
+            anim({
+              targets: [document.documentElement, document.body],
+              scrollTop: offset - scrollspy.options.scrollOffset,
+              duration: 400,
+              easing: 'easeOutCubic'
+            });
             break;
           }
         }
@@ -319,4 +325,4 @@ function _classCallCheck(instance, Constructor) { if (!(instance instanceof Cons
   if (M.jQueryLoaded) {
     M.initializeJqueryWrapper(ScrollSpy, 'scrollSpy', 'M_ScrollSpy');
   }
-})(cash, M.Vel);
+})(cash, M.anime);

data/assets/javascripts/materialize/select.js

@@ -42,8 +42,8 @@ function _classCallCheck(instance, Constructor) { if (!(instance instanceof Cons
       this.isMultiple = this.$el.prop('multiple');
 
       // Setup
-      this.valuesSelected = [];
-      this.$selectedOptions = $();
+      this._keysSelected = {};
+      this._valueDict = {}; // Maps key to original and generated option element.
       this._setupDropdown();
 
       this._setupEventHandlers();
@@ -120,14 +120,14 @@ function _classCallCheck(instance, Constructor) { if (!(instance instanceof Cons
       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 key = option.id;
+        if (!$(option).hasClass('disabled') && !$(option).hasClass('optgroup') && key.length) {
           var selected = true;
 
           if (this.isMultiple) {
             var checkbox = $(option).find('input[type="checkbox"]');
             checkbox.prop('checked', !checkbox.prop('checked'));
-            selected = this._toggleEntryFromArray(optionIndex);
+            selected = this._toggleEntryFromArray(key);
           } else {
             $(this.dropdownOptions).find('li').removeClass('active');
             $(option).toggleClass('active');
@@ -135,7 +135,7 @@ function _classCallCheck(instance, Constructor) { if (!(instance instanceof Cons
           }
 
           this._activateOption($(this.dropdownOptions), option);
-          this.$el.find('option').eq(optionIndex).prop('selected', selected);
+          $(this._valueDict[key].el).prop('selected', selected);
           this.$el.trigger('change');
         }
 
@@ -165,7 +165,6 @@ function _classCallCheck(instance, Constructor) { if (!(instance instanceof Cons
         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);
@@ -192,9 +191,7 @@ function _classCallCheck(instance, Constructor) { if (!(instance instanceof Cons
                 optionEl = _this3._appendOptionWithIcon(_this3.$el, el);
               }
 
-              if ($(el).prop('selected')) {
-                _this3.$selectedOptions.add(optionEl);
-              }
+              _this3._addOptionToValueDict(el, optionEl);
             } else if ($(el).is('optgroup')) {
               // Optgroup.
               var selectOptions = $(el).children('option');
@@ -202,9 +199,7 @@ function _classCallCheck(instance, Constructor) { if (!(instance instanceof Cons
 
               selectOptions.each(function (el) {
                 var optionEl = _this3._appendOptionWithIcon(_this3.$el, el, 'optgroup-option');
-                if ($(el).prop('selected')) {
-                  _this3.$selectedOptions.add(optionEl);
-                }
+                _this3._addOptionToValueDict(el, optionEl);
               });
             }
           });
@@ -226,7 +221,7 @@ function _classCallCheck(instance, Constructor) { if (!(instance instanceof Cons
         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>');
+        var dropdownIcon = $('<svg class="caret" 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
@@ -242,6 +237,25 @@ function _classCallCheck(instance, Constructor) { if (!(instance instanceof Cons
         this._setSelectedStates();
       }
 
+      /**
+       * Add option to value dict
+       * @param {Element} el  original option element
+       * @param {Element} optionEl  generated option element
+       */
+
+    }, {
+      key: '_addOptionToValueDict',
+      value: function _addOptionToValueDict(el, optionEl) {
+        var index = Object.keys(this._valueDict).length;
+        var key = this.dropdownOptions.id + index;
+        var obj = {};
+        optionEl.id = key;
+
+        obj.el = el;
+        obj.optionEl = optionEl;
+        this._valueDict[key] = obj;
+      }
+
       /**
        * Remove dropdown
        */
@@ -292,26 +306,24 @@ function _classCallCheck(instance, Constructor) { if (!(instance instanceof Cons
 
       /**
        * Toggle entry from option
-       * @param {Number} entryIndex
+       * @param {String} key  Option key
        * @return {Boolean}  if entry was added or removed
        */
 
     }, {
       key: '_toggleEntryFromArray',
-      value: function _toggleEntryFromArray(entryIndex) {
-        var index = this.valuesSelected.indexOf(entryIndex),
-            notAdded = index === -1;
-
+      value: function _toggleEntryFromArray(key) {
+        var notAdded = !this._keysSelected.hasOwnProperty(key);
         if (notAdded) {
-          this.valuesSelected.push(entryIndex);
+          this._keysSelected[key] = true;
         } else {
-          this.valuesSelected.splice(index, 1);
+          delete this._keysSelected[key];
         }
 
-        $(this.dropdownOptions).find('li:not(.optgroup)').eq(entryIndex).toggleClass('active');
+        $(this._valueDict[key].optionEl).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);
+        $(this._valueDict[key].el).prop('selected', notAdded);
 
         return notAdded;
       }
@@ -326,7 +338,7 @@ function _classCallCheck(instance, Constructor) { if (!(instance instanceof Cons
         var value = '';
         var options = this.$el.find('option');
 
-        options.each(function (el, i) {
+        options.each(function (el) {
           if ($(el).prop('selected')) {
             var text = $(el).text();
             value === '' ? value += text : value += ', ' + text;
@@ -350,22 +362,19 @@ function _classCallCheck(instance, Constructor) { if (!(instance instanceof Cons
     }, {
       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);
+        this._keysSelected = {};
+
+        for (var key in this._valueDict) {
+          var option = this._valueDict[key];
+          if ($(option.el).prop('selected')) {
+            $(option.optionEl).find('input[type="checkbox"]').prop("checked", true);
+            this._activateOption($(this.dropdownOptions), $(option.optionEl));
+            this._keysSelected[key] = true;
           } else {
-            option.find('input[type="checkbox"]').prop("checked", false);
-            option.removeClass('selected');
+            $(option.optionEl).find('input[type="checkbox"]').prop("checked", false);
+            $(option.optionEl).removeClass('selected');
           }
-        });
+        }
       }
 
       /**
@@ -386,6 +395,21 @@ function _classCallCheck(instance, Constructor) { if (!(instance instanceof Cons
           option.addClass('selected');
         }
       }
+
+      /**
+       * Get Selected Values
+       * @return {Array}  Array of selected values
+       */
+
+    }, {
+      key: 'getSelectedValues',
+      value: function getSelectedValues() {
+        var selectedValues = [];
+        for (var key in this._keysSelected) {
+          selectedValues.push(this._valueDict[key].el.value);
+        }
+        return selectedValues;
+      }
     }], [{
       key: 'init',
       value: function init($els, options) {

data/assets/javascripts/materialize/sidenav.js

@@ -2,7 +2,7 @@ var _createClass = function () { function defineProperties(target, props) { for
 
 function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
 
-(function ($, Vel) {
+(function ($, anim) {
   'use strict';
 
   var _defaults = {
@@ -181,7 +181,7 @@ function _classCallCheck(instance, Constructor) { if (!(instance instanceof Cons
 
       /**
        * Set variables needed at the beggining of drag
-       * and stop any current Velocity transition.
+       * and stop any current transition.
        * @param {Event} e
        */
 
@@ -195,8 +195,8 @@ function _classCallCheck(instance, Constructor) { if (!(instance instanceof Cons
         this._time = Date.now();
         this._width = this.el.getBoundingClientRect().width;
         this._overlay.style.display = 'block';
-        Vel(this.el, 'stop');
-        Vel(this._overlay, 'stop');
+        anim.remove(this.el);
+        anim.remove(this._overlay);
       }
 
       /**
@@ -425,8 +425,13 @@ function _classCallCheck(instance, Constructor) { if (!(instance instanceof Cons
 
         // Handle fixed Sidenav
         if (this.isFixed && window.innerWidth > 992) {
-          Vel(this.el, 'stop');
-          Vel(this.el, { translateX: 0 }, { duration: 0, queue: false });
+          anim.remove(this.el);
+          anim({
+            targets: this.el,
+            translateX: 0,
+            duration: 0,
+            easing: 'easeOutQuad'
+          });
           this._enableBodyScrolling();
           this._overlay.style.display = 'none';
 
@@ -485,13 +490,19 @@ function _classCallCheck(instance, Constructor) { if (!(instance instanceof Cons
           slideOutPercent = this.options.edge === 'left' ? slideOutPercent + this.percentOpen : slideOutPercent - this.percentOpen;
         }
 
-        Vel(this.el, 'stop');
-        Vel(this.el, { 'translateX': [0, slideOutPercent * 100 + '%'] }, { duration: this.options.inDuration, queue: false, easing: 'easeOutQuad', complete: function () {
+        anim.remove(this.el);
+        anim({
+          targets: this.el,
+          translateX: [slideOutPercent * 100 + '%', 0],
+          duration: this.options.inDuration,
+          easing: 'easeOutQuad',
+          complete: function () {
             // Run onOpenEnd callback
             if (typeof _this.options.onOpenEnd === 'function') {
               _this.options.onOpenEnd.call(_this, _this.el);
             }
-          } });
+          }
+        });
       }
     }, {
       key: '_animateOverlayIn',
@@ -500,11 +511,18 @@ function _classCallCheck(instance, Constructor) { if (!(instance instanceof Cons
         if (this.isDragged) {
           start = this.percentOpen;
         } else {
-          Vel.hook(this._overlay, 'display', 'block');
+          $(this._overlay).css({
+            display: 'block'
+          });
         }
 
-        Vel(this._overlay, 'stop');
-        Vel(this._overlay, { opacity: [1, start] }, { duration: this.options.inDuration, queue: false, easing: 'easeOutQuad' });
+        anim.remove(this._overlay);
+        anim({
+          targets: this._overlay,
+          opacity: [start, 1],
+          duration: this.options.inDuration,
+          easing: 'easeOutQuad'
+        });
       }
     }, {
       key: '_animateOut',
@@ -523,19 +541,35 @@ function _classCallCheck(instance, Constructor) { if (!(instance instanceof Cons
           slideOutPercent = this.options.edge === 'left' ? endPercent + this.percentOpen : endPercent - this.percentOpen;
         }
 
-        Vel(this.el, 'stop');
-        Vel(this.el, { 'translateX': [endPercent * 105 + '%', slideOutPercent * 100 + '%'] }, { duration: this.options.outDuration, queue: false, easing: 'easeOutQuad', complete: function () {
+        anim.remove(this.el);
+        anim({
+          targets: this.el,
+          translateX: [slideOutPercent * 100 + '%', endPercent * 105 + '%'],
+          duration: this.options.outDuration,
+          easing: 'easeOutQuad',
+          complete: function () {
             // Run onOpenEnd callback
             if (typeof _this2.options.onCloseEnd === 'function') {
               _this2.options.onCloseEnd.call(_this2, _this2.el);
             }
-          } });
+          }
+        });
       }
     }, {
       key: '_animateOverlayOut',
       value: function _animateOverlayOut() {
-        Vel(this._overlay, 'stop');
-        Vel(this._overlay, 'fadeOut', { duration: this.options.outDuration, queue: false, easing: 'easeOutQuad' });
+        var _this3 = this;
+
+        anim.remove(this._overlay);
+        anim({
+          targets: this._overlay,
+          opacity: 0,
+          duration: this.options.outDuration,
+          easing: 'easeOutQuad',
+          complete: function () {
+            $(_this3._overlay).css('display', 'none');
+          }
+        });
       }
     }], [{
       key: 'init',
@@ -581,4 +615,4 @@ function _classCallCheck(instance, Constructor) { if (!(instance instanceof Cons
   if (M.jQueryLoaded) {
     M.initializeJqueryWrapper(Sidenav, 'sidenav', 'M_Sidenav');
   }
-})(cash, M.Vel);
+})(cash, M.anime);