materialize-sass 1.0.0.alpha1 → 1.0.0.alpha2

data/assets/javascripts/materialize/cards.js

@@ -1,4 +1,4 @@
-(function ($, Vel) {
+(function ($, anim) {
   $(document).on('click', '.card', function (e) {
     if ($(this).children('.card-reveal').length) {
       var $card = $(e.target).closest('.card');
@@ -8,21 +8,27 @@
       var $cardReveal = $(this).find('.card-reveal');
       if ($(e.target).is($('.card-reveal .card-title')) || $(e.target).is($('.card-reveal .card-title i'))) {
         // Make Reveal animate down and display none
-        Vel($cardReveal, { translateY: 0 }, {
+        anim({
+          targets: $cardReveal[0],
+          translateY: 0,
           duration: 225,
-          queue: false,
           easing: 'easeInOutQuad',
-          complete: function () {
-            $(this).css({ display: 'none' });
+          complete: function (anim) {
+            var el = anim.animatables[0].target;
+            $(el).css({ display: 'none' });
             $card.css('overflow', $card.data('initialOverflow'));
           }
         });
       } else if ($(e.target).is($('.card .activator')) || $(e.target).is($('.card .activator i'))) {
         $card.css('overflow', 'hidden');
         $cardReveal.css({ display: 'block' });
-        Vel($cardReveal, 'stop');
-        Vel($cardReveal, { translateY: '-100%' }, { duration: 300, queue: false, easing: 'easeInOutQuad' });
+        anim({
+          targets: $cardReveal[0],
+          translateY: '-100%',
+          duration: 300,
+          easing: 'easeInOutQuad'
+        });
       }
     }
   });
-})(cash, M.Vel);
+})(cash, M.anime);

data/assets/javascripts/materialize/cash.js

@@ -32,7 +32,7 @@
   var frag;
   function parseHTML(str) {
     if (!frag) {
-      frag = doc.implementation.createHTMLDocument();
+      frag = doc.implementation.createHTMLDocument(null);
       var base = frag.createElement("base");
       base.href = doc.location.href;
       frag.head.appendChild(base);
@@ -558,9 +558,7 @@
 
     on: function (eventName, delegate, callback, runOnce) {
       // jshint ignore:line
-
       var originalCallback;
-
       if (!isString(eventName)) {
         for (var key in eventName) {
           this.on(key, delegate, eventName[key]);
@@ -582,11 +580,11 @@
         originalCallback = callback;
         callback = function (e) {
           var t = e.target;
-
           while (!matches(t, delegate)) {
-            if (t === this) {
+            if (t === this || t === null) {
               return t = false;
             }
+
             t = t.parentNode;
           }
 

data/assets/javascripts/materialize/chips.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 ($) {
   'use strict';
 
   var _defaults = {
@@ -59,8 +59,7 @@ function _classCallCheck(instance, Constructor) { if (!(instance instanceof Cons
       this.$el.addClass('chips input-field');
       this.chipsData = [];
       this.$chips = $();
-      this.$input = this.$el.find('input');
-      this.$input.addClass('input');
+      this._setupInput();
       this.hasAutocomplete = Object.keys(this.options.autocompleteOptions).length > 0;
 
       // Set input id
@@ -272,7 +271,7 @@ function _classCallCheck(instance, Constructor) { if (!(instance instanceof Cons
         }
 
         // move input to end
-        this.$el.append(this.$input);
+        this.$el.append(this.$input[0]);
       }
 
       /**
@@ -293,6 +292,22 @@ function _classCallCheck(instance, Constructor) { if (!(instance instanceof Cons
         this.autocomplete = M.Autocomplete.init(this.$input, this.options.autocompleteOptions)[0];
       }
 
+      /**
+       * Setup Input
+       */
+
+    }, {
+      key: '_setupInput',
+      value: function _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
        */
@@ -374,7 +389,7 @@ function _classCallCheck(instance, Constructor) { if (!(instance instanceof Cons
     }, {
       key: 'deleteChip',
       value: function deleteChip(chipIndex) {
-        // let chip = this.chips[chipIndex];
+        var $chip = this.$chips.eq(chipIndex);
         this.$chips.eq(chipIndex).remove();
         this.$chips = this.$chips.filter(function (el) {
           return $(el).index() >= 0;
@@ -384,7 +399,7 @@ function _classCallCheck(instance, Constructor) { if (!(instance instanceof Cons
 
         // fire chipDelete callback
         if (typeof this.options.onChipDelete === 'function') {
-          this.options.onChipDelete.call(this, this.$el, this.$chip);
+          this.options.onChipDelete.call(this, this.$el, $chip[0]);
         }
       }
 
@@ -402,21 +417,9 @@ function _classCallCheck(instance, Constructor) { if (!(instance instanceof Cons
 
         // fire chipSelect callback
         if (typeof this.options.onChipSelect === 'function') {
-          this.options.onChipSelect.call(this, this.$el, this.$chip);
+          this.options.onChipSelect.call(this, this.$el, $chip[0]);
         }
       }
-
-      /**
-       * 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) {

data/assets/javascripts/materialize/collapsible.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 = {
@@ -137,19 +137,45 @@ function _classCallCheck(instance, Constructor) { if (!(instance instanceof Cons
         var $collapsibleLi = this.$el.children('li').eq(index);
         if ($collapsibleLi.length) {
           var $body = $collapsibleLi.children('.collapsible-body');
-          Vel($body[0], 'stop');
-          Vel($body[0], 'slideDown', { duration: this.options.inDuration, easing: 'easeInOutCubic', queue: false,
-            complete: function () {
-              $body[0].style.height = '';
-              $body[0].style.overflow = '';
-              $body[0].style.padding = '';
-              $body[0].style.margin = '';
+
+          anim.remove($body[0]);
+          $body.css({
+            display: 'block',
+            overflow: 'hidden',
+            height: 0,
+            paddingTop: '',
+            paddingBottom: ''
+          });
+
+          var pTop = $body.css('padding-top');
+          var pBottom = $body.css('padding-bottom');
+          var finalHeight = $body[0].scrollHeight;
+          $body.css({
+            paddingTop: 0,
+            paddingBottom: 0
+          });
+
+          anim({
+            targets: $body[0],
+            height: finalHeight,
+            paddingTop: pTop,
+            paddingBottom: pBottom,
+            duration: this.options.inDuration,
+            easing: 'easeInOutCubic',
+            complete: function (anim) {
+              $body.css({
+                overflow: '',
+                paddingTop: '',
+                paddingBottom: '',
+                height: ''
+              });
 
               // onOpenEnd callback
               if (typeof _this.options.onOpenEnd === 'function') {
                 _this.options.onOpenEnd.call(_this, $collapsibleLi[0]);
               }
-            } });
+            }
+          });
         }
       }
 
@@ -166,19 +192,29 @@ function _classCallCheck(instance, Constructor) { if (!(instance instanceof Cons
         var $collapsibleLi = this.$el.children('li').eq(index);
         if ($collapsibleLi.length) {
           var $body = $collapsibleLi.children('.collapsible-body');
-          Vel($body[0], 'stop');
-          Vel($body[0], 'slideUp', { duration: this.options.outDuration, easing: 'easeInOutCubic', queue: false,
+          anim.remove($body[0]);
+          $body.css('overflow', 'hidden');
+          anim({
+            targets: $body[0],
+            height: 0,
+            paddingTop: 0,
+            paddingBottom: 0,
+            duration: this.options.outDuration,
+            easing: 'easeInOutCubic',
             complete: function () {
-              $body[0].style.height = '';
-              $body[0].style.overflow = '';
-              $body[0].style.padding = '';
-              $body[0].style.margin = '';
+              $body.css({
+                height: '',
+                overflow: '',
+                padding: '',
+                display: ''
+              });
 
               // onCloseEnd callback
               if (typeof _this2.options.onCloseEnd === 'function') {
                 _this2.options.onCloseEnd.call(_this2, $collapsibleLi[0]);
               }
-            } });
+            }
+          });
         }
       }
 
@@ -272,4 +308,4 @@ function _classCallCheck(instance, Constructor) { if (!(instance instanceof Cons
   if (M.jQueryLoaded) {
     M.initializeJqueryWrapper(Collapsible, 'collapsible', 'M_Collapsible');
   }
-})(cash, M.Vel);
+})(cash, M.anime);

data/assets/javascripts/materialize/datepicker.js

@@ -2,17 +2,13 @@ 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 ($) {
   'use strict';
 
   var _defaults = {
 
     // the default output format for the input field value
-    format: 'YYYY-MM-DD',
-
-    // the toString function which gets passed a current date object and format
-    // and returns a string
-    toString: null,
+    format: 'mmm dd, yyyy',
 
     // Used to create date object from current input string
     parse: null,
@@ -108,6 +104,10 @@ function _classCallCheck(instance, Constructor) { if (!(instance instanceof Cons
 
       this.options = $.extend({}, Datepicker.defaults, options);
 
+      // Remove time component from minDate and maxDate options
+      if (this.options.minDate) this.options.minDate.setHours(0, 0, 0, 0);
+      if (this.options.maxDate) this.options.maxDate.setHours(0, 0, 0, 0);
+
       this.id = M.guid();
 
       this._setupVariables();
@@ -177,14 +177,22 @@ function _classCallCheck(instance, Constructor) { if (!(instance instanceof Cons
     }, {
       key: 'toString',
       value: function toString(format) {
+        var _this2 = this;
+
         format = format || this.options.format;
         if (!Datepicker._isDate(this.date)) {
           return '';
         }
-        if (this.options.toString) {
-          return this.options.toString(this.date, format);
-        }
-        return this.date.toDateString();
+
+        var formatArray = format.split(/(d{1,4}|m{1,4}|y{4}|yy|!.)/g);
+        var formattedDate = formatArray.map(function (label) {
+          if (_this2.formats[label]) {
+            return _this2.formats[label]();
+          } else {
+            return label;
+          }
+        }).join('');
+        return formattedDate;
       }
     }, {
       key: 'setDate',
@@ -218,7 +226,7 @@ function _classCallCheck(instance, Constructor) { if (!(instance instanceof Cons
         this.gotoDate(this.date);
 
         if (!preventOnSelect && typeof this.options.onSelect === 'function') {
-          this.options.onSelect.call(this, this.getDate());
+          this.options.onSelect.call(this, this.date);
         }
       }
     }, {
@@ -473,7 +481,6 @@ function _classCallCheck(instance, Constructor) { if (!(instance instanceof Cons
           arr.push('<option value="' + (year === refYear ? i - c : 12 + i - c) + '"' + (i === month ? ' selected="selected"' : '') + (isMinYear && i < opts.minMonth || isMaxYear && i > opts.maxMonth ? 'disabled="disabled"' : '') + '>' + opts.i18n.months[i] + '</option>');
         }
 
-        // monthHtml = '<div class="pika-label">' + opts.i18n.months[month] + '<select class="pika-select pika-select-month" tabindex="-1">' + arr.join('') + '</select></div>';
         monthHtml = '<select class="pika-select pika-select-month" tabindex="-1">' + arr.join('') + '</select>';
 
         if ($.isArray(opts.yearRange)) {
@@ -489,7 +496,7 @@ function _classCallCheck(instance, Constructor) { if (!(instance instanceof Cons
             arr.push('<option value="' + i + '"' + (i === year ? ' selected="selected"' : '') + '>' + i + '</option>');
           }
         }
-        // yearHtml = '<div class="pika-label">' + year + opts.yearSuffix + '<select class="pika-select pika-select-year" tabindex="-1">' + arr.join('') + '</select></div>';
+
         yearHtml = '<select class="pika-select pika-select-year" tabindex="-1">' + arr.join('') + '</select>';
 
         var leftArrow = '<svg fill="#000000" height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg"><path d="M15.41 16.09l-4.58-4.59 4.58-4.59L14 5.5l-6 6 6 6z"/><path d="M0-.5h24v24H0z" fill="none"/></svg>';
@@ -560,8 +567,14 @@ function _classCallCheck(instance, Constructor) { if (!(instance instanceof Cons
         this.calendarEl.innerHTML = html;
 
         // Init Materialize Select
-        new M.Select(this.calendarEl.querySelector('.pika-select-year'), { classes: 'select-year' });
-        new M.Select(this.calendarEl.querySelector('.pika-select-month'), { classes: 'select-month' });
+        var yearSelect = this.calendarEl.querySelector('.pika-select-year');
+        var monthSelect = this.calendarEl.querySelector('.pika-select-month');
+        new M.Select(yearSelect, { classes: 'select-year' });
+        new M.Select(monthSelect, { classes: 'select-month' });
+
+        // Add change handlers for select
+        yearSelect.addEventListener('change', this._handleYearChange.bind(this));
+        monthSelect.addEventListener('change', this._handleMonthChange.bind(this));
 
         if (typeof this.options.onDraw === 'function') {
           this.options.onDraw(this);
@@ -582,6 +595,7 @@ function _classCallCheck(instance, Constructor) { if (!(instance instanceof Cons
         this._finishSelectionBound = this._finishSelection.bind(this);
         this._handleTodayClickBound = this._handleTodayClick.bind(this);
         this._handleClearClickBound = this._handleClearClick.bind(this);
+        this._handleMonthChange = this._handleMonthChange.bind(this);
 
         this.el.addEventListener('click', this._handleInputClickBound);
         this.el.addEventListener('keydown', this._handleInputKeydownBound);
@@ -594,6 +608,8 @@ function _classCallCheck(instance, Constructor) { if (!(instance instanceof Cons
     }, {
       key: '_setupVariables',
       value: function _setupVariables() {
+        var _this3 = this;
+
         this.$modalEl = $(Datepicker._template);
         this.modalEl = this.$modalEl[0];
 
@@ -604,6 +620,34 @@ function _classCallCheck(instance, Constructor) { if (!(instance instanceof Cons
         this.clearBtn = this.modalEl.querySelector('.datepicker-clear');
         this.todayBtn = this.modalEl.querySelector('.datepicker-today');
         this.doneBtn = this.modalEl.querySelector('.datepicker-done');
+
+        this.formats = {
+
+          dd: function () {
+            return _this3.date.getDate();
+          },
+          ddd: function () {
+            return _this3.options.i18n.weekdaysShort[_this3.date.getDay()];
+          },
+          dddd: function () {
+            return _this3.options.i18n.weekdays[_this3.date.getDay()];
+          },
+          mm: function () {
+            return _this3.date.getMonth() + 1;
+          },
+          mmm: function () {
+            return _this3.options.i18n.monthsShort[_this3.date.getMonth()];
+          },
+          mmmm: function () {
+            return _this3.options.i18n.monthsShort[_this3.date.getMonth()];
+          },
+          yy: function () {
+            return _this3.date.getFullYear().slice(2);
+          },
+          yyyy: function () {
+            return _this3.date.getFullYear();
+          }
+        };
       }
 
       /**
@@ -674,50 +718,42 @@ function _classCallCheck(instance, Constructor) { if (!(instance instanceof Cons
         this.setInputValue();
         this.close();
       }
+    }, {
+      key: '_handleMonthChange',
+      value: function _handleMonthChange(e) {
+        this.gotoMonth(e.target.value);
+      }
+    }, {
+      key: '_handleYearChange',
+      value: function _handleYearChange(e) {
+        this.gotoYear(e.target.value);
+      }
 
-      // _onChange(e) {
-      //   e = e || window.event;
-      //   let target = e.target || e.srcElement;
-      //   if (!target) {
-      //     return;
-      //   }
-      //   if (hasClass(target, 'pika-select-month')) {
-      //     self.gotoMonth(target.value);
-      //   }
-      //   else if (hasClass(target, 'pika-select-year')) {
-      //     self.gotoYear(target.value);
-      //   }
-      // }
-
-      // _onKeyChange(e) {
-      //   e = e || window.event;
-
-      //   if (self.isVisible()) {
-
-      //     switch(e.keyCode){
-      //     case 13:
-      //     case 27:
-      //       if (opts.field) {
-      //         opts.field.blur();
-      //       }
-      //       break;
-      //     case 37:
-      //       e.preventDefault();
-      //       self.adjustDate('subtract', 1);
-      //       break;
-      //     case 38:
-      //       self.adjustDate('subtract', 7);
-      //       break;
-      //     case 39:
-      //       self.adjustDate('add', 1);
-      //       break;
-      //     case 40:
-      //       self.adjustDate('add', 7);
-      //       break;
-      //     }
-      //   }
-      // }
+      /**
+       * change view to a specific month (zero-index, e.g. 0: January)
+       */
+
+    }, {
+      key: 'gotoMonth',
+      value: function gotoMonth(month) {
+        if (!isNaN(month)) {
+          this.calendars[0].month = parseInt(month, 10);
+          this.adjustCalendars();
+        }
+      }
+
+      /**
+       * change view to a specific full year (e.g. "2012")
+       */
 
+    }, {
+      key: 'gotoYear',
+      value: function gotoYear(year) {
+        if (!isNaN(year)) {
+          this.calendars[0].year = parseInt(year, 10);
+          this.adjustCalendars();
+        }
+      }
     }, {
       key: '_handleInputChange',
       value: function _handleInputChange(e) {
@@ -740,26 +776,6 @@ function _classCallCheck(instance, Constructor) { if (!(instance instanceof Cons
         //   self.show();
         // }
       }
-
-      // _onInputBlur() {
-      //   // IE allows pika div to gain focus; catch blur the input field
-      //   let pEl = document.activeElement;
-      //   do {
-      //     if (hasClass(pEl, 'pika-single')) {
-      //       return;
-      //     }
-      //   }
-      //   while ((pEl = pEl.parentNode));
-
-      //   if (!self._c) {
-      //     self._b = sto(function() {
-      //       self.hide();
-      //     }, 50);
-      //   }
-      //   self._c = false;
-      // }
-
-
     }, {
       key: 'renderDayName',
       value: function renderDayName(opts, day, abbr) {
@@ -895,4 +911,4 @@ function _classCallCheck(instance, Constructor) { if (!(instance instanceof Cons
   if (M.jQueryLoaded) {
     M.initializeJqueryWrapper(Datepicker, 'datepicker', 'M_Datepicker');
   }
-})(cash, M.Vel);
+})(cash);