materialize-sass 1.0.0.alpha4 → 1.0.0.beta

data/assets/javascripts/materialize/dropdown.js

@@ -13,6 +13,7 @@ function _inherits(subClass, superClass) { if (typeof superClass !== "function"
 
   var _defaults = {
     alignment: 'left',
+    autoFocus: true,
     constrainWidth: true,
     container: null,
     coverTrigger: true,
@@ -49,6 +50,7 @@ function _inherits(subClass, superClass) { if (typeof superClass !== "function"
        * Options for the dropdown
        * @member Dropdown#options
        * @prop {String} [alignment='left'] - Edge which the dropdown is aligned to
+       * @prop {Boolean} [autoFocus=true] - Automatically focus dropdown el for keyboard
        * @prop {Boolean} [constrainWidth=true] - Constrain width to width of the button
        * @prop {Element} container - Container element to attach dropdown to (optional)
        * @prop {Boolean} [coverTrigger=true] - Place dropdown over trigger
@@ -69,6 +71,18 @@ function _inherits(subClass, superClass) { if (typeof superClass !== "function"
        */
       _this.isOpen = false;
 
+      /**
+       * Describes if dropdown content is scrollable
+       * @type {Boolean}
+       */
+      _this.isScrollable = false;
+
+      /**
+       * Describes if touch moving on dropdown content
+       * @type {Boolean}
+       */
+      _this.isTouchMoving = false;
+
       _this.focusedIndex = -1;
       _this.filterQuery = [];
 
@@ -82,6 +96,7 @@ function _inherits(subClass, superClass) { if (typeof superClass !== "function"
       _this._makeDropdownFocusable();
       _this._resetFilterQueryBound = _this._resetFilterQuery.bind(_this);
       _this._handleDocumentClickBound = _this._handleDocumentClick.bind(_this);
+      _this._handleDocumentTouchmoveBound = _this._handleDocumentTouchmove.bind(_this);
       _this._handleDropdownKeydownBound = _this._handleDropdownKeydown.bind(_this);
       _this._handleTriggerKeydownBound = _this._handleTriggerKeydown.bind(_this);
       _this._setupEventHandlers();
@@ -151,6 +166,7 @@ function _inherits(subClass, superClass) { if (typeof superClass !== "function"
         // Use capture phase event handler to prevent click
         document.body.addEventListener('click', this._handleDocumentClickBound, true);
         document.body.addEventListener('touchend', this._handleDocumentClickBound);
+        document.body.addEventListener('touchmove', this._handleDocumentTouchmoveBound);
         this.dropdownEl.addEventListener('keydown', this._handleDropdownKeydownBound);
       }
     }, {
@@ -159,6 +175,7 @@ function _inherits(subClass, superClass) { if (typeof superClass !== "function"
         // Use capture phase event handler to prevent click
         document.body.removeEventListener('click', this._handleDocumentClickBound, true);
         document.body.removeEventListener('touchend', this._handleDocumentClickBound);
+        document.body.removeEventListener('touchmove', this._handleDocumentTouchmoveBound);
         this.dropdownEl.removeEventListener('keydown', this._handleDropdownKeydownBound);
       }
     }, {
@@ -195,7 +212,8 @@ function _inherits(subClass, superClass) { if (typeof superClass !== "function"
         var _this2 = this;
 
         var $target = $(e.target);
-        if (this.options.closeOnClick && $target.closest('.dropdown-content').length) {
+        if (this.options.closeOnClick && $target.closest('.dropdown-content').length && !this.isTouchMoving) {
+          // isTouchMoving to check if scrolling on mobile.
           setTimeout(function () {
             _this2.close();
           }, 0);
@@ -204,6 +222,7 @@ function _inherits(subClass, superClass) { if (typeof superClass !== "function"
             _this2.close();
           }, 0);
         }
+        this.isTouchMoving = false;
       }
     }, {
       key: '_handleTriggerKeydown',
@@ -215,6 +234,20 @@ function _inherits(subClass, superClass) { if (typeof superClass !== "function"
         }
       }
 
+      /**
+       * Handle Document Touchmove
+       * @param {Event} e
+       */
+
+    }, {
+      key: '_handleDocumentTouchmove',
+      value: function _handleDocumentTouchmove(e) {
+        var $target = $(e.target);
+        if ($target.closest('.dropdown-content').length) {
+          this.isTouchMoving = true;
+        }
+      }
+
       /**
        * Handle Dropdown Keydown
        * @param {Event} e
@@ -231,8 +264,21 @@ function _inherits(subClass, superClass) { if (typeof superClass !== "function"
         } else if ((e.which === M.keys.ARROW_DOWN || e.which === M.keys.ARROW_UP) && this.isOpen) {
           e.preventDefault();
           var direction = e.which === M.keys.ARROW_DOWN ? 1 : -1;
-          this.focusedIndex = Math.max(Math.min(this.focusedIndex + direction, this.dropdownEl.children.length - 1), 0);
-          this._focusFocusedItem();
+          var newFocusedIndex = this.focusedIndex;
+          var foundNewIndex = false;
+          do {
+            newFocusedIndex = newFocusedIndex + direction;
+
+            if (!!this.dropdownEl.children[newFocusedIndex] && this.dropdownEl.children[newFocusedIndex].tabIndex !== -1) {
+              foundNewIndex = true;
+              break;
+            }
+          } while (newFocusedIndex < this.dropdownEl.children.length && newFocusedIndex >= 0);
+
+          if (foundNewIndex) {
+            this.focusedIndex = newFocusedIndex;
+            this._focusFocusedItem();
+          }
 
           // ENTER selects choice on focused item
         } else if (e.which === M.keys.ENTER && this.isOpen) {
@@ -295,16 +341,20 @@ function _inherits(subClass, superClass) { if (typeof superClass !== "function"
     }, {
       key: '_makeDropdownFocusable',
       value: function _makeDropdownFocusable() {
-        if (this.dropdownEl.tabIndex === -1) {
-          this.dropdownEl.tabIndex = 0;
-        }
+        // Needed for arrow key navigation
+        this.dropdownEl.tabIndex = 0;
 
-        $(this.dropdownEl).children().attr('tabindex', 0);
+        // Only set tabindex if it hasn't been set by user
+        $(this.dropdownEl).children().each(function (el) {
+          if (!el.getAttribute('tabindex')) {
+            el.setAttribute('tabindex', 0);
+          }
+        });
       }
     }, {
       key: '_focusFocusedItem',
       value: function _focusFocusedItem() {
-        if (this.focusedIndex >= 0 && this.focusedIndex < this.dropdownEl.children.length) {
+        if (this.focusedIndex >= 0 && this.focusedIndex < this.dropdownEl.children.length && this.options.autoFocus) {
           this.dropdownEl.children[this.focusedIndex].focus();
         }
       }
@@ -334,10 +384,16 @@ function _inherits(subClass, superClass) { if (typeof superClass !== "function"
         var verticalAlignment = 'top';
         var horizontalAlignment = this.options.alignment;
         idealYPos += this.options.coverTrigger ? 0 : triggerBRect.height;
+
+        // Reset isScrollable
+        this.isScrollable = false;
+
         if (!alignments.top) {
           if (alignments.bottom) {
             verticalAlignment = 'bottom';
           } else {
+            this.isScrollable = true;
+
             // Determine which side has most space and cutoff at correct height
             if (alignments.spaceOnTop > alignments.spaceOnBottom) {
               verticalAlignment = 'bottom';
@@ -389,16 +445,9 @@ function _inherits(subClass, superClass) { if (typeof superClass !== "function"
 
     }, {
       key: '_animateIn',
-      value: function _animateIn(positionInfo) {
+      value: function _animateIn() {
         var _this3 = this;
 
-        // Place dropdown
-        this.dropdownEl.style.left = positionInfo.x + 'px';
-        this.dropdownEl.style.top = positionInfo.y + 'px';
-        this.dropdownEl.style.height = positionInfo.height + 'px';
-        this.dropdownEl.style.width = positionInfo.width + 'px';
-        this.dropdownEl.style.transformOrigin = (positionInfo.horizontalAlignment === 'left' ? '0' : '100%') + ' ' + (positionInfo.verticalAlignment === 'top' ? '0' : '100%');
-
         anim.remove(this.dropdownEl);
         anim({
           targets: this.dropdownEl,
@@ -411,7 +460,9 @@ function _inherits(subClass, superClass) { if (typeof superClass !== "function"
           duration: this.options.inDuration,
           easing: 'easeOutQuint',
           complete: function (anim) {
-            _this3.dropdownEl.focus();
+            if (_this3.options.autoFocus) {
+              _this3.dropdownEl.focus();
+            }
 
             // onOpenEnd callback
             if (typeof _this3.options.onOpenEnd === 'function') {
@@ -454,6 +505,25 @@ function _inherits(subClass, superClass) { if (typeof superClass !== "function"
         });
       }
 
+      /**
+       * Place dropdown
+       */
+
+    }, {
+      key: '_placeDropdown',
+      value: function _placeDropdown() {
+        // Set width before calculating positionInfo
+        var idealWidth = this.options.constrainWidth ? this.el.getBoundingClientRect().width : this.dropdownEl.getBoundingClientRect().width;
+        this.dropdownEl.style.width = idealWidth + 'px';
+
+        var positionInfo = this._getDropdownPosition();
+        this.dropdownEl.style.left = positionInfo.x + 'px';
+        this.dropdownEl.style.top = positionInfo.y + 'px';
+        this.dropdownEl.style.height = positionInfo.height + 'px';
+        this.dropdownEl.style.width = positionInfo.width + 'px';
+        this.dropdownEl.style.transformOrigin = (positionInfo.horizontalAlignment === 'left' ? '0' : '100%') + ' ' + (positionInfo.verticalAlignment === 'top' ? '0' : '100%');
+      }
+
       /**
        * Open Dropdown
        */
@@ -475,12 +545,8 @@ function _inherits(subClass, superClass) { if (typeof superClass !== "function"
         this._resetDropdownStyles();
         this.dropdownEl.style.display = 'block';
 
-        // Set width before calculating positionInfo
-        var idealWidth = this.options.constrainWidth ? this.el.getBoundingClientRect().width : this.dropdownEl.getBoundingClientRect().width;
-        this.dropdownEl.style.width = idealWidth + 'px';
-
-        var positionInfo = this._getDropdownPosition();
-        this._animateIn(positionInfo);
+        this._placeDropdown();
+        this._animateIn();
         this._setupTemporaryEventHandlers();
       }
 
@@ -504,7 +570,29 @@ function _inherits(subClass, superClass) { if (typeof superClass !== "function"
 
         this._animateOut();
         this._removeTemporaryEventHandlers();
-        this.el.focus();
+
+        if (this.options.autoFocus) {
+          this.el.focus();
+        }
+      }
+
+      /**
+       * Recalculate dimensions
+       */
+
+    }, {
+      key: 'recalculateDimensions',
+      value: function recalculateDimensions() {
+        if (this.isOpen) {
+          this.$dropdownEl.css({
+            width: '',
+            height: '',
+            left: '',
+            top: '',
+            'transform-origin': ''
+          });
+          this._placeDropdown();
+        }
       }
     }], [{
       key: 'init',

data/assets/javascripts/materialize/forms.js

@@ -1,7 +1,7 @@
 (function ($) {
   // Function to update labels of text fields
   M.updateTextFields = function () {
-    var input_selector = 'input[type=text], input[type=password], input[type=email], input[type=url], input[type=tel], input[type=number], input[type=search], textarea';
+    var input_selector = 'input[type=text], input[type=password], input[type=email], input[type=url], input[type=tel], input[type=number], input[type=search], input[type=date], input[type=time], textarea';
     $(input_selector).each(function (element, index) {
       var $this = $(this);
       if (element.value.length > 0 || $(element).is(':focus') || element.autofocus || $this.attr('placeholder') !== null) {
@@ -130,7 +130,7 @@
 
   $(document).on('ready turbolinks:load', function () {
     // Text based inputs
-    var input_selector = 'input[type=text], input[type=password], input[type=email], input[type=url], input[type=tel], input[type=number], input[type=search], textarea';
+    var input_selector = 'input[type=text], input[type=password], input[type=email], input[type=url], input[type=tel], input[type=number], input[type=search], input[type=date], input[type=time], textarea';
 
     // Add active if form auto complete
     $(document).on('change', input_selector, function () {

data/assets/javascripts/materialize/global.js

@@ -84,6 +84,41 @@ M.initializeJqueryWrapper = function (plugin, pluginName, classRef) {
   };
 };
 
+/**
+ * Automatically initialize components
+ * @param {Element} context  DOM Element to search within for components
+ */
+M.AutoInit = function (context) {
+  // Use document.body if no context is given
+  var root = !!context ? context : document.body;
+
+  var registry = {
+    Autocomplete: root.querySelectorAll('.autocomplete:not(.no-autoinit)'),
+    Carousel: root.querySelectorAll('.carousel:not(.no-autoinit)'),
+    Chips: root.querySelectorAll('.chips:not(.no-autoinit)'),
+    Collapsible: root.querySelectorAll('.collapsible:not(.no-autoinit)'),
+    Datepicker: root.querySelectorAll('.datepicker:not(.no-autoinit)'),
+    Dropdown: root.querySelectorAll('.dropdown-trigger:not(.no-autoinit)'),
+    Materialbox: root.querySelectorAll('.materialboxed:not(.no-autoinit)'),
+    Modal: root.querySelectorAll('.modal:not(.no-autoinit)'),
+    Parallax: root.querySelectorAll('.parallax:not(.no-autoinit)'),
+    Pushpin: root.querySelectorAll('.pushpin:not(.no-autoinit)'),
+    ScrollSpy: root.querySelectorAll('.scrollspy:not(.no-autoinit)'),
+    FormSelect: root.querySelectorAll('select:not(.no-autoinit)'),
+    Sidenav: root.querySelectorAll('.sidenav:not(.no-autoinit)'),
+    Tabs: root.querySelectorAll('.tabs:not(.no-autoinit)'),
+    TapTarget: root.querySelectorAll('.tap-target:not(.no-autoinit)'),
+    Timepicker: root.querySelectorAll('.timepicker:not(.no-autoinit)'),
+    Tooltip: root.querySelectorAll('.tooltipped:not(.no-autoinit)'),
+    FloatingActionButton: root.querySelectorAll('.fixed-action-btn:not(.no-autoinit)')
+  };
+
+  for (var pluginName in registry) {
+    var plugin = M[pluginName];
+    plugin.init(registry[pluginName]);
+  }
+};
+
 /**
  * Generate approximated selector string for a jQuery object
  * @param {jQuery} obj  jQuery object to be parsed

data/assets/javascripts/materialize/modal.js

@@ -19,6 +19,7 @@ function _inherits(subClass, superClass) { if (typeof superClass !== "function"
     onOpenEnd: null,
     onCloseStart: null,
     onCloseEnd: null,
+    preventScrolling: true,
     dismissible: true,
     startingTop: '4%',
     endingTop: '10%'
@@ -70,6 +71,7 @@ function _inherits(subClass, superClass) { if (typeof superClass !== "function"
       _this.id = _this.$el.attr('id');
       _this._openingTrigger = undefined;
       _this.$overlay = $('<div class="modal-overlay"></div>');
+      _this.el.tabIndex = 0;
 
       Modal._count++;
       _this._setupEventHandlers();
@@ -181,6 +183,19 @@ function _inherits(subClass, superClass) { if (typeof superClass !== "function"
         }
       }
 
+      /**
+       * Handle Focus
+       * @param {Event} e
+       */
+
+    }, {
+      key: '_handleFocus',
+      value: function _handleFocus(e) {
+        if (!this.el.contains(e.target)) {
+          this.el.focus();
+        }
+      }
+
       /**
        * Animate in modal
        */
@@ -322,18 +337,27 @@ function _inherits(subClass, superClass) { if (typeof superClass !== "function"
           this.options.onOpenStart.call(this, this.el, this._openingTrigger);
         }
 
-        document.body.style.overflow = 'hidden';
+        if (this.options.preventScrolling) {
+          document.body.style.overflow = 'hidden';
+        }
+
         this.el.classList.add('open');
         this.el.insertAdjacentElement('afterend', this.$overlay[0]);
 
         if (this.options.dismissible) {
           this._handleKeydownBound = this._handleKeydown.bind(this);
+          this._handleFocusBound = this._handleFocus.bind(this);
           document.addEventListener('keydown', this._handleKeydownBound);
+          document.addEventListener('focus', this._handleFocusBound, true);
         }
 
         anim.remove(this.el);
         anim.remove(this.$overlay[0]);
         this._animateIn();
+
+        // Focus modal
+        this.el.focus();
+
         return this;
       }
 
@@ -365,6 +389,7 @@ function _inherits(subClass, superClass) { if (typeof superClass !== "function"
 
         if (this.options.dismissible) {
           document.removeEventListener('keydown', this._handleKeydownBound);
+          document.removeEventListener('focus', this._handleFocusBound);
         }
 
         anim.remove(this.el);

data/assets/javascripts/materialize/select.js

@@ -246,6 +246,16 @@ function _inherits(subClass, superClass) { if (typeof superClass !== "function"
         if (!this.el.disabled) {
           var dropdownOptions = $.extend({}, this.options.dropdownOptions);
 
+          // Add callback for centering selected option when dropdown content is scrollable
+          dropdownOptions.onOpenEnd = function (el) {
+            var selectedOption = $(_this4.dropdownOptions).find('.selected').first();
+            if (_this4.dropdown.isScrollable && selectedOption.length) {
+              var scrollOffset = selectedOption[0].getBoundingClientRect().top - _this4.dropdownOptions.getBoundingClientRect().top; // scroll to selected option
+              scrollOffset -= _this4.dropdownOptions.clientHeight / 2; // center in dropdown
+              _this4.dropdownOptions.scrollTop = scrollOffset;
+            }
+          };
+
           if (this.isMultiple) {
             dropdownOptions.closeOnClick = false;
           }

data/assets/javascripts/materialize/sidenav.js

@@ -19,7 +19,8 @@ function _inherits(subClass, superClass) { if (typeof superClass !== "function"
     onOpenStart: null,
     onOpenEnd: null,
     onCloseStart: null,
-    onCloseEnd: null
+    onCloseEnd: null,
+    preventScrolling: true
   };
 
   /**
@@ -75,6 +76,10 @@ function _inherits(subClass, superClass) { if (typeof superClass !== "function"
        */
       _this.isDragged = false;
 
+      // Window size variables for window resize checks
+      _this.lastWindowWidth = window.innerWidth;
+      _this.lastWindowHeight = window.innerHeight;
+
       _this._createOverlay();
       _this._createDragTarget();
       _this._setupEventHandlers();
@@ -199,6 +204,8 @@ function _inherits(subClass, superClass) { if (typeof superClass !== "function"
         this._time = Date.now();
         this._width = this.el.getBoundingClientRect().width;
         this._overlay.style.display = 'block';
+        this._initialScrollTop = this.isOpen ? this.el.scrollTop : M.getDocumentScrollTop();
+        this._verticallyScrolling = false;
         anim.remove(this.el);
         anim.remove(this._overlay);
       }
@@ -212,10 +219,14 @@ function _inherits(subClass, superClass) { if (typeof superClass !== "function"
       key: '_dragMoveUpdate',
       value: function _dragMoveUpdate(e) {
         var clientX = e.targetTouches[0].clientX;
+        var currentScrollTop = this.isOpen ? this.el.scrollTop : M.getDocumentScrollTop();
         this.deltaX = Math.abs(this._xPos - clientX);
         this._xPos = clientX;
         this.velocityX = this.deltaX / (Date.now() - this._time);
         this._time = Date.now();
+        if (this._initialScrollTop !== currentScrollTop) {
+          this._verticallyScrolling = true;
+        }
       }
 
       /**
@@ -227,7 +238,7 @@ function _inherits(subClass, superClass) { if (typeof superClass !== "function"
       key: '_handleDragTargetDrag',
       value: function _handleDragTargetDrag(e) {
         // Check if draggable
-        if (!this.options.draggable || this._isCurrentlyFixed()) {
+        if (!this.options.draggable || this._isCurrentlyFixed() || this._verticallyScrolling) {
           return;
         }
 
@@ -286,6 +297,7 @@ function _inherits(subClass, superClass) { if (typeof superClass !== "function"
           }
 
           this.isDragged = false;
+          this._verticallyScrolling = false;
         }
       }
 
@@ -299,7 +311,7 @@ function _inherits(subClass, superClass) { if (typeof superClass !== "function"
       value: function _handleCloseDrag(e) {
         if (this.isOpen) {
           // Check if draggable
-          if (!this.options.draggable || this._isCurrentlyFixed()) {
+          if (!this.options.draggable || this._isCurrentlyFixed() || this._verticallyScrolling) {
             return;
           }
 
@@ -352,6 +364,7 @@ function _inherits(subClass, superClass) { if (typeof superClass !== "function"
           }
 
           this.isDragged = false;
+          this._verticallyScrolling = false;
         }
       }
 
@@ -363,7 +376,7 @@ function _inherits(subClass, superClass) { if (typeof superClass !== "function"
       key: '_handleCloseTriggerClick',
       value: function _handleCloseTriggerClick(e) {
         var $closeTrigger = $(e.target).closest('.sidenav-close');
-        if ($closeTrigger.length) {
+        if ($closeTrigger.length && !this._isCurrentlyFixed()) {
           this.close();
         }
       }
@@ -375,11 +388,17 @@ function _inherits(subClass, superClass) { if (typeof superClass !== "function"
     }, {
       key: '_handleWindowResize',
       value: function _handleWindowResize() {
-        if (window.innerWidth > 992) {
-          this.open();
-        } else {
-          this.close();
+        // Only handle horizontal resizes
+        if (this.lastWindowWidth !== window.innerWidth) {
+          if (window.innerWidth > 992) {
+            this.open();
+          } else {
+            this.close();
+          }
         }
+
+        this.lastWindowWidth = window.innerWidth;
+        this.lastWindowHeight = window.innerHeight;
       }
     }, {
       key: '_setupClasses',
@@ -455,7 +474,9 @@ function _inherits(subClass, superClass) { if (typeof superClass !== "function"
 
           // Handle non-fixed Sidenav
         } else {
-          this._preventBodyScrolling();
+          if (this.options.preventScrolling) {
+            this._preventBodyScrolling();
+          }
 
           if (!this.isDragged || this.percentOpen != 1) {
             this._animateIn();