materialize-sass 1.0.0.alpha4 → 1.0.0.beta

data/assets/javascripts/materialize/autocomplete.js

@@ -132,8 +132,19 @@ function _inherits(subClass, superClass) { if (typeof superClass !== "function"
       key: '_setupDropdown',
       value: function _setupDropdown() {
         this.container = document.createElement('ul');
+        this.container.id = 'autocomplete-options-' + M.guid();
         $(this.container).addClass('autocomplete-content dropdown-content');
         this.$inputField.append(this.container);
+        this.el.setAttribute('data-target', this.container.id);
+
+        this.dropdown = M.Dropdown.init(this.el, {
+          autoFocus: false,
+          closeOnClick: false,
+          coverTrigger: false
+        });
+
+        // Sketchy removal of dropdown click handler
+        this.el.removeEventListener('click', this.dropdown._handleClickBound);
       }
 
       /**
@@ -153,7 +164,8 @@ function _inherits(subClass, superClass) { if (typeof superClass !== "function"
     }, {
       key: '_handleInputBlur',
       value: function _handleInputBlur() {
-        this._removeAutocomplete();
+        this.dropdown.close();
+        this._resetAutocomplete();
       }
 
       /**
@@ -164,6 +176,8 @@ function _inherits(subClass, superClass) { if (typeof superClass !== "function"
     }, {
       key: '_handleInputKeyupAndFocus',
       value: function _handleInputKeyupAndFocus(e) {
+        var _this2 = this;
+
         if (e.type === 'keyup') {
           Autocomplete._keydown = false;
         }
@@ -178,12 +192,24 @@ function _inherits(subClass, superClass) { if (typeof superClass !== "function"
 
         // Check if the input isn't empty
         if (this.oldVal !== val) {
-          this._removeAutocomplete();
+          this._resetAutocomplete();
 
           if (val.length >= this.options.minLength) {
             this.isOpen = true;
             this._renderDropdown(this.options.data, val);
           }
+
+          // Open dropdown
+          if (!this.dropdown.isOpen) {
+            // Timeout to prevent dropdown temp doc click handler from firing
+            setTimeout(function () {
+              _this2.dropdown.open();
+            }, 100);
+
+            // Recalculate dropdown when its already open
+          } else {
+            this.dropdown.recalculateDimensions();
+          }
         }
 
         // Update oldVal
@@ -278,18 +304,15 @@ function _inherits(subClass, superClass) { if (typeof superClass !== "function"
       }
 
       /**
-       * Remove autocomplete elements
+       * Reset autocomplete elements
        */
 
     }, {
-      key: '_removeAutocomplete',
-      value: function _removeAutocomplete() {
+      key: '_resetAutocomplete',
+      value: function _resetAutocomplete() {
         $(this.container).empty();
         this._resetCurrentElement();
         this.oldVal = null;
-        $(this.container).css({
-          display: ''
-        });
         this.isOpen = false;
       }
 
@@ -304,7 +327,8 @@ function _inherits(subClass, superClass) { if (typeof superClass !== "function"
         var text = el.text().trim();
         this.el.value = text;
         this.$el.trigger('change');
-        this._removeAutocomplete();
+        this._resetAutocomplete();
+        this.dropdown.close();
 
         // Handle onAutocomplete callback.
         if (typeof this.options.onAutocomplete === 'function') {
@@ -321,9 +345,9 @@ function _inherits(subClass, superClass) { if (typeof superClass !== "function"
     }, {
       key: '_renderDropdown',
       value: function _renderDropdown(data, val) {
-        var _this2 = this;
+        var _this3 = this;
 
-        this._removeAutocomplete();
+        this._resetAutocomplete();
 
         var matchingData = [];
 
@@ -347,14 +371,10 @@ function _inherits(subClass, superClass) { if (typeof superClass !== "function"
 
         // Sort
         var sortFunctionBound = function (a, b) {
-          return _this2.options.sortFunction(a.key.toLowerCase(), b.key.toLowerCase(), val.toLowerCase());
+          return _this3.options.sortFunction(a.key.toLowerCase(), b.key.toLowerCase(), val.toLowerCase());
         };
         matchingData.sort(sortFunctionBound);
 
-        $(this.container).css({
-          display: 'block'
-        });
-
         // Render
         for (var i = 0; i < matchingData.length; i++) {
           var _entry = matchingData[i];

data/assets/javascripts/materialize/carousel.js

@@ -16,6 +16,7 @@ function _inherits(subClass, superClass) { if (typeof superClass !== "function"
     dist: -100, // zoom scale TODO: make this more intuitive as an option
     shift: 0, // spacing for center image
     padding: 0, // Padding between non center items
+    numVisible: 5, // Number of visible items in carousel
     fullWidth: false, // Change to full width styles
     indicators: false, // Toggle indicators
     noWrap: false, // Don't wrap around and cycle through items.
@@ -48,8 +49,9 @@ function _inherits(subClass, superClass) { if (typeof superClass !== "function"
        * @member Carousel#options
        * @prop {Number} duration
        * @prop {Number} dist
-       * @prop {number} shift
-       * @prop {number} padding
+       * @prop {Number} shift
+       * @prop {Number} padding
+       * @prop {Number} numVisible
        * @prop {Boolean} fullWidth
        * @prop {Boolean} indicators
        * @prop {Boolean} noWrap
@@ -102,6 +104,9 @@ function _inherits(subClass, superClass) { if (typeof superClass !== "function"
       }
       _this.count = _this.images.length;
 
+      // Cap numVisible at count
+      _this.options.numVisible = Math.min(_this.count, _this.options.numVisible);
+
       // Setup cross browser string
       _this.xform = 'transform';
       ['webkit', 'Moz', 'O', 'ms'].every(function (prefix) {
@@ -526,8 +531,10 @@ function _inherits(subClass, superClass) { if (typeof superClass !== "function"
             el = void 0,
             alignment = void 0,
             zTranslation = void 0,
-            tweenedOpacity = void 0;
+            tweenedOpacity = void 0,
+            centerTweenedOpacity = void 0;
         var lastCenter = this.center;
+        var numVisibleOffset = 1 / this.options.numVisible;
 
         this.offset = typeof x === 'number' ? x : this.offset;
         this.center = Math.floor((this.offset + this.dim / 2) / this.dim);
@@ -536,11 +543,13 @@ function _inherits(subClass, superClass) { if (typeof superClass !== "function"
         tween = -dir * delta * 2 / this.dim;
         half = this.count >> 1;
 
-        if (!this.options.fullWidth) {
+        if (this.options.fullWidth) {
+          alignment = 'translateX(0)';
+          centerTweenedOpacity = 1;
+        } else {
           alignment = 'translateX(' + (this.el.clientWidth - this.itemWidth) / 2 + 'px) ';
           alignment += 'translateY(' + (this.el.clientHeight - this.itemHeight) / 2 + 'px)';
-        } else {
-          alignment = 'translateX(0)';
+          centerTweenedOpacity = 1 - numVisibleOffset * tween;
         }
 
         // Set indicator active
@@ -563,15 +572,8 @@ function _inherits(subClass, superClass) { if (typeof superClass !== "function"
             this.$el.find('.carousel-item').removeClass('active');
             el.classList.add('active');
           }
-          el.style[this.xform] = alignment + ' translateX(' + -delta / 2 + 'px)' + ' translateX(' + dir * this.options.shift * tween * i + 'px)' + ' translateZ(' + this.options.dist * tween + 'px)';
-          el.style.zIndex = 0;
-          if (this.options.fullWidth) {
-            tweenedOpacity = 1;
-          } else {
-            tweenedOpacity = 1 - 0.2 * tween;
-          }
-          el.style.opacity = tweenedOpacity;
-          el.style.visibility = 'visible';
+          var transformString = alignment + ' translateX(' + -delta / 2 + 'px)' + ' translateX(' + dir * this.options.shift * tween * i + 'px)' + ' translateZ(' + this.options.dist * tween + 'px)';
+          this._updateItemStyle(el, centerTweenedOpacity, 0, transformString);
         }
 
         for (i = 1; i <= half; ++i) {
@@ -581,15 +583,13 @@ function _inherits(subClass, superClass) { if (typeof superClass !== "function"
             tweenedOpacity = i === half && delta < 0 ? 1 - tween : 1;
           } else {
             zTranslation = this.options.dist * (i * 2 + tween * dir);
-            tweenedOpacity = 1 - 0.2 * (i * 2 + tween * dir);
+            tweenedOpacity = 1 - numVisibleOffset * (i * 2 + tween * dir);
           }
           // Don't show wrapped items.
           if (!this.noWrap || this.center + i < this.count) {
             el = this.images[this._wrap(this.center + i)];
-            el.style[this.xform] = alignment + ' translateX(' + (this.options.shift + (this.dim * i - delta) / 2) + 'px)' + ' translateZ(' + zTranslation + 'px)';
-            el.style.zIndex = -i;
-            el.style.opacity = tweenedOpacity;
-            el.style.visibility = 'visible';
+            var _transformString = alignment + ' translateX(' + (this.options.shift + (this.dim * i - delta) / 2) + 'px)' + ' translateZ(' + zTranslation + 'px)';
+            this._updateItemStyle(el, tweenedOpacity, -i, _transformString);
           }
 
           // left side
@@ -598,15 +598,13 @@ function _inherits(subClass, superClass) { if (typeof superClass !== "function"
             tweenedOpacity = i === half && delta > 0 ? 1 - tween : 1;
           } else {
             zTranslation = this.options.dist * (i * 2 - tween * dir);
-            tweenedOpacity = 1 - 0.2 * (i * 2 - tween * dir);
+            tweenedOpacity = 1 - numVisibleOffset * (i * 2 - tween * dir);
           }
           // Don't show wrapped items.
           if (!this.noWrap || this.center - i >= 0) {
             el = this.images[this._wrap(this.center - i)];
-            el.style[this.xform] = alignment + ' translateX(' + (-this.options.shift + (-this.dim * i - delta) / 2) + 'px)' + ' translateZ(' + zTranslation + 'px)';
-            el.style.zIndex = -i;
-            el.style.opacity = tweenedOpacity;
-            el.style.visibility = 'visible';
+            var _transformString2 = alignment + ' translateX(' + (-this.options.shift + (-this.dim * i - delta) / 2) + 'px)' + ' translateZ(' + zTranslation + 'px)';
+            this._updateItemStyle(el, tweenedOpacity, -i, _transformString2);
           }
         }
 
@@ -614,15 +612,8 @@ function _inherits(subClass, superClass) { if (typeof superClass !== "function"
         // Don't show wrapped items.
         if (!this.noWrap || this.center >= 0 && this.center < this.count) {
           el = this.images[this._wrap(this.center)];
-          el.style[this.xform] = alignment + ' translateX(' + -delta / 2 + 'px)' + ' translateX(' + dir * this.options.shift * tween + 'px)' + ' translateZ(' + this.options.dist * tween + 'px)';
-          el.style.zIndex = 0;
-          if (this.options.fullWidth) {
-            tweenedOpacity = 1;
-          } else {
-            tweenedOpacity = 1 - 0.2 * tween;
-          }
-          el.style.opacity = tweenedOpacity;
-          el.style.visibility = 'visible';
+          var _transformString3 = alignment + ' translateX(' + -delta / 2 + 'px)' + ' translateX(' + dir * this.options.shift * tween + 'px)' + ' translateZ(' + this.options.dist * tween + 'px)';
+          this._updateItemStyle(el, centerTweenedOpacity, 0, _transformString3);
         }
 
         // onCycleTo callback
@@ -638,6 +629,23 @@ function _inherits(subClass, superClass) { if (typeof superClass !== "function"
         }
       }
 
+      /**
+       * Cycle to target
+       * @param {Element} el
+       * @param {Number} opacity
+       * @param {Number} zIndex
+       * @param {String} transform
+       */
+
+    }, {
+      key: '_updateItemStyle',
+      value: function _updateItemStyle(el, opacity, zIndex, transform) {
+        el.style[this.xform] = transform;
+        el.style.zIndex = zIndex;
+        el.style.opacity = opacity;
+        el.style.visibility = 'visible';
+      }
+
       /**
        * Cycle to target
        * @param {Number} n

data/assets/javascripts/materialize/chips.js

@@ -468,7 +468,9 @@ function _inherits(subClass, superClass) { if (typeof superClass !== "function"
             var index = currChips._selectedChip.index();
             currChips.deleteChip(index);
             currChips._selectedChip = null;
-            selectIndex = index - 1;
+
+            // Make sure selectIndex doesn't go negative
+            selectIndex = Math.max(index - 1, 0);
           }
 
           if (currChips.chipsData.length) {

data/assets/javascripts/materialize/collapsible.js

@@ -55,6 +55,10 @@ function _inherits(subClass, superClass) { if (typeof superClass !== "function"
        */
       _this.options = $.extend({}, Collapsible.defaults, options);
 
+      // Setup tab indices
+      _this.$headers = _this.$el.children('li').children('.collapsible-header');
+      _this.$headers.attr('tabindex', 0);
+
       _this._setupEventHandlers();
 
       // Open first active
@@ -88,8 +92,14 @@ function _inherits(subClass, superClass) { if (typeof superClass !== "function"
     }, {
       key: '_setupEventHandlers',
       value: function _setupEventHandlers() {
+        var _this2 = this;
+
         this._handleCollapsibleClickBound = this._handleCollapsibleClick.bind(this);
+        this._handleCollapsibleKeydownBound = this._handleCollapsibleKeydown.bind(this);
         this.el.addEventListener('click', this._handleCollapsibleClickBound);
+        this.$headers.each(function (header) {
+          header.addEventListener('keydown', _this2._handleCollapsibleKeydownBound);
+        });
       }
 
       /**
@@ -128,6 +138,19 @@ function _inherits(subClass, superClass) { if (typeof superClass !== "function"
         }
       }
 
+      /**
+       * Handle Collapsible Keydown
+       * @param {Event} e
+       */
+
+    }, {
+      key: '_handleCollapsibleKeydown',
+      value: function _handleCollapsibleKeydown(e) {
+        if (e.keyCode === 13) {
+          this._handleCollapsibleClickBound(e);
+        }
+      }
+
       /**
        * Animate in collapsible slide
        * @param {Number} index - 0th index of slide
@@ -136,7 +159,7 @@ function _inherits(subClass, superClass) { if (typeof superClass !== "function"
     }, {
       key: '_animateIn',
       value: function _animateIn(index) {
-        var _this2 = this;
+        var _this3 = this;
 
         var $collapsibleLi = this.$el.children('li').eq(index);
         if ($collapsibleLi.length) {
@@ -175,8 +198,8 @@ function _inherits(subClass, superClass) { if (typeof superClass !== "function"
               });
 
               // onOpenEnd callback
-              if (typeof _this2.options.onOpenEnd === 'function') {
-                _this2.options.onOpenEnd.call(_this2, $collapsibleLi[0]);
+              if (typeof _this3.options.onOpenEnd === 'function') {
+                _this3.options.onOpenEnd.call(_this3, $collapsibleLi[0]);
               }
             }
           });
@@ -191,7 +214,7 @@ function _inherits(subClass, superClass) { if (typeof superClass !== "function"
     }, {
       key: '_animateOut',
       value: function _animateOut(index) {
-        var _this3 = this;
+        var _this4 = this;
 
         var $collapsibleLi = this.$el.children('li').eq(index);
         if ($collapsibleLi.length) {
@@ -214,8 +237,8 @@ function _inherits(subClass, superClass) { if (typeof superClass !== "function"
               });
 
               // onCloseEnd callback
-              if (typeof _this3.options.onCloseEnd === 'function') {
-                _this3.options.onCloseEnd.call(_this3, $collapsibleLi[0]);
+              if (typeof _this4.options.onCloseEnd === 'function') {
+                _this4.options.onCloseEnd.call(_this4, $collapsibleLi[0]);
               }
             }
           });
@@ -230,7 +253,7 @@ function _inherits(subClass, superClass) { if (typeof superClass !== "function"
     }, {
       key: 'open',
       value: function open(index) {
-        var _this4 = this;
+        var _this5 = this;
 
         var $collapsibleLi = this.$el.children('li').eq(index);
         if ($collapsibleLi.length && !$collapsibleLi[0].classList.contains('active')) {
@@ -246,7 +269,7 @@ function _inherits(subClass, superClass) { if (typeof superClass !== "function"
             var $activeLis = this.$el.children('li.active');
             $activeLis.each(function (el) {
               var index = $collapsibleLis.index($(el));
-              _this4.close(index);
+              _this5.close(index);
             });
           }
 

data/assets/javascripts/materialize/datepicker.js

@@ -60,10 +60,13 @@ function _inherits(subClass, superClass) { if (typeof superClass !== "function"
     // Specify a DOM element to render the calendar in
     container: null,
 
+    // Show clear button
+    showClearBtn: false,
+
     // internationalization
     i18n: {
+      cancel: 'Cancel',
       clear: 'Clear',
-      today: 'Today',
       done: 'Ok',
       previousMonth: '‹',
       nextMonth: '›',
@@ -161,18 +164,34 @@ function _inherits(subClass, superClass) { if (typeof superClass !== "function"
         this._removeEventHandlers();
         this.modal.destroy();
         $(this.modalEl).remove();
+        this.destroySelects();
         this.el.M_Datepicker = undefined;
       }
+    }, {
+      key: 'destroySelects',
+      value: function destroySelects() {
+        var oldYearSelect = this.calendarEl.querySelector('.pika-select-year');
+        if (oldYearSelect) {
+          M.FormSelect.getInstance(oldYearSelect).destroy();
+        }
+        var oldMonthSelect = this.calendarEl.querySelector('.pika-select-month');
+        if (oldMonthSelect) {
+          M.FormSelect.getInstance(oldMonthSelect).destroy();
+        }
+      }
     }, {
       key: '_insertHTMLIntoDOM',
       value: function _insertHTMLIntoDOM() {
-        this.clearBtn.innerHTML = this.options.i18n.clear;
-        this.todayBtn.innerHTML = this.options.i18n.today;
+        if (this.options.showClearBtn) {
+          $(this.clearBtn).css({ visibility: '' });
+          this.clearBtn.innerHTML = this.options.i18n.clear;
+        }
+
         this.doneBtn.innerHTML = this.options.i18n.done;
+        this.cancelBtn.innerHTML = this.options.i18n.cancel;
 
-        var containerEl = document.querySelector(this.options.container);
-        if (this.options.container && !!containerEl) {
-          this.$modalEl.appendTo(containerEl);
+        if (this.options.container) {
+          this.$modalEl.appendTo(this.options.container);
         } else {
           this.$modalEl.insertBefore(this.el);
         }
@@ -579,15 +598,7 @@ function _inherits(subClass, superClass) { if (typeof superClass !== "function"
           html += this.renderTitle(this, c, this.calendars[c].year, this.calendars[c].month, this.calendars[0].year, randId) + this.render(this.calendars[c].year, this.calendars[c].month, randId);
         }
 
-        // Destroy Materialize Select
-        var oldYearSelect = this.calendarEl.querySelector('.pika-select-year');
-        if (oldYearSelect) {
-          M.FormSelect.getInstance(oldYearSelect).destroy();
-        }
-        var oldMonthSelect = this.calendarEl.querySelector('.pika-select-month');
-        if (oldMonthSelect) {
-          M.FormSelect.getInstance(oldMonthSelect).destroy();
-        }
+        this.destroySelects();
 
         this.calendarEl.innerHTML = html;
 
@@ -618,17 +629,20 @@ function _inherits(subClass, superClass) { if (typeof superClass !== "function"
         this._handleInputChangeBound = this._handleInputChange.bind(this);
         this._handleCalendarClickBound = this._handleCalendarClick.bind(this);
         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._closeBound = this.close.bind(this);
 
         this.el.addEventListener('click', this._handleInputClickBound);
         this.el.addEventListener('keydown', this._handleInputKeydownBound);
         this.el.addEventListener('change', this._handleInputChangeBound);
         this.calendarEl.addEventListener('click', this._handleCalendarClickBound);
         this.doneBtn.addEventListener('click', this._finishSelectionBound);
-        this.todayBtn.addEventListener('click', this._handleTodayClickBound);
-        this.clearBtn.addEventListener('click', this._handleClearClickBound);
+        this.cancelBtn.addEventListener('click', this._closeBound);
+
+        if (this.options.showClearBtn) {
+          this._handleClearClickBound = this._handleClearClick.bind(this);
+          this.clearBtn.addEventListener('click', this._handleClearClickBound);
+        }
       }
     }, {
       key: '_setupVariables',
@@ -642,9 +656,11 @@ function _inherits(subClass, superClass) { if (typeof superClass !== "function"
 
         this.yearTextEl = this.modalEl.querySelector('.year-text');
         this.dateTextEl = this.modalEl.querySelector('.date-text');
-        this.clearBtn = this.modalEl.querySelector('.datepicker-clear');
-        this.todayBtn = this.modalEl.querySelector('.datepicker-today');
+        if (this.options.showClearBtn) {
+          this.clearBtn = this.modalEl.querySelector('.datepicker-clear');
+        }
         this.doneBtn = this.modalEl.querySelector('.datepicker-done');
+        this.cancelBtn = this.modalEl.querySelector('.datepicker-cancel');
 
         this.formats = {
 
@@ -737,13 +753,6 @@ function _inherits(subClass, superClass) { if (typeof superClass !== "function"
         //   this._c = true;
         // }
       }
-    }, {
-      key: '_handleTodayClick',
-      value: function _handleTodayClick() {
-        this.date = new Date();
-        this.setInputValue();
-        this.close();
-      }
     }, {
       key: '_handleClearClick',
       value: function _handleClearClick() {
@@ -933,7 +942,7 @@ function _inherits(subClass, superClass) { if (typeof superClass !== "function"
     return Datepicker;
   }(Component);
 
-  Datepicker._template = ['<div class= "modal datepicker-modal">', '<div class="modal-content datepicker-container">', '<div class="datepicker-date-display">', '<span class="year-text"></span>', '<span class="date-text"></span>', '</div>', '<div class="datepicker-calendar-container">', '<div class="pika-single"></div>', '<div class="datepicker-footer">', '<button class="btn-flat datepicker-clear waves-effect" type="button"></button>', '<div class="confirmation-btns">', '<button class="btn-flat datepicker-today waves-effect" type="button"></button>', '<button class="btn-flat datepicker-done waves-effect" type="button"></button>', '</div>', '</div>', '</div>', '</div>', '</div>'].join('');
+  Datepicker._template = ['<div class= "modal datepicker-modal">', '<div class="modal-content datepicker-container">', '<div class="datepicker-date-display">', '<span class="year-text"></span>', '<span class="date-text"></span>', '</div>', '<div class="datepicker-calendar-container">', '<div class="pika-single"></div>', '<div class="datepicker-footer">', '<button class="btn-flat datepicker-clear waves-effect" style="visibility: hidden;" type="button"></button>', '<div class="confirmation-btns">', '<button class="btn-flat datepicker-cancel waves-effect" type="button"></button>', '<button class="btn-flat datepicker-done waves-effect" type="button"></button>', '</div>', '</div>', '</div>', '</div>', '</div>'].join('');
 
   M.Datepicker = Datepicker;