materialize-sass 1.0.0.beta → 1.0.0.1

data/assets/javascripts/materialize/materialbox.js

@@ -59,7 +59,7 @@ function _inherits(subClass, superClass) { if (typeof superClass !== "function"
       _this.originalWidth = 0;
       _this.originalHeight = 0;
       _this.originInlineStyles = _this.$el.attr('style');
-      _this.caption = _this.el.getAttribute('data-caption') || "";
+      _this.caption = _this.el.getAttribute('data-caption') || '';
 
       // Wrap
       _this.$el.before(_this.placeholder);
@@ -79,6 +79,11 @@ function _inherits(subClass, superClass) { if (typeof superClass !== "function"
       value: function destroy() {
         this._removeEventHandlers();
         this.el.M_Materialbox = undefined;
+
+        // Unwrap image
+        $(this.placeholder).after(this.el).remove();
+
+        this.$el.removeAttr('style');
       }
 
       /**
@@ -254,7 +259,7 @@ function _inherits(subClass, superClass) { if (typeof superClass !== "function"
             }
 
             _this3.$el.removeAttr('style');
-            _this3.$el.attr('style', _this3.originInlineStyles);
+            _this3.originInlineStyles && _this3.$el.attr('style', _this3.originInlineStyles);
 
             // Remove class
             _this3.$el.removeClass('active');
@@ -284,7 +289,7 @@ function _inherits(subClass, superClass) { if (typeof superClass !== "function"
       value: function _updateVars() {
         this.windowWidth = window.innerWidth;
         this.windowHeight = window.innerHeight;
-        this.caption = this.el.getAttribute('data-caption') || "";
+        this.caption = this.el.getAttribute('data-caption') || '';
       }
 
       /**
@@ -373,14 +378,14 @@ function _inherits(subClass, superClass) { if (typeof superClass !== "function"
         });
 
         // Add and animate caption if it exists
-        if (this.caption !== "") {
+        if (this.caption !== '') {
           if (this.$photocaption) {
             anim.remove(this.$photoCaption[0]);
           }
           this.$photoCaption = $('<div class="materialbox-caption"></div>');
           this.$photoCaption.text(this.caption);
           $('body').append(this.$photoCaption);
-          this.$photoCaption.css({ "display": "inline" });
+          this.$photoCaption.css({ display: 'inline' });
 
           anim({
             targets: this.$photoCaption[0],
@@ -439,7 +444,7 @@ function _inherits(subClass, superClass) { if (typeof superClass !== "function"
         anim.remove(this.el);
         anim.remove(this.$overlay[0]);
 
-        if (this.caption !== "") {
+        if (this.caption !== '') {
           anim.remove(this.$photoCaption[0]);
         }
 
@@ -462,7 +467,7 @@ function _inherits(subClass, superClass) { if (typeof superClass !== "function"
         this._animateImageOut();
 
         // Remove Caption + reset css settings on image
-        if (this.caption !== "") {
+        if (this.caption !== '') {
           anim({
             targets: this.$photoCaption[0],
             opacity: 0,

data/assets/javascripts/materialize/modal.js

@@ -72,6 +72,7 @@ function _inherits(subClass, superClass) { if (typeof superClass !== "function"
       _this._openingTrigger = undefined;
       _this.$overlay = $('<div class="modal-overlay"></div>');
       _this.el.tabIndex = 0;
+      _this._nthModalOpened = 0;
 
       Modal._count++;
       _this._setupEventHandlers();
@@ -191,7 +192,8 @@ function _inherits(subClass, superClass) { if (typeof superClass !== "function"
     }, {
       key: '_handleFocus',
       value: function _handleFocus(e) {
-        if (!this.el.contains(e.target)) {
+        // Only trap focus if this modal is the last model opened (prevents loops in nested modals).
+        if (!this.el.contains(e.target) && this._nthModalOpened === Modal._modalsOpen) {
           this.el.focus();
         }
       }
@@ -249,8 +251,8 @@ function _inherits(subClass, superClass) { if (typeof superClass !== "function"
           $.extend(enterAnimOptions, {
             top: [this.options.startingTop, this.options.endingTop],
             opacity: 1,
-            scaleX: [.8, 1],
-            scaleY: [.8, 1]
+            scaleX: [0.8, 1],
+            scaleY: [0.8, 1]
           });
           anim(enterAnimOptions);
         }
@@ -324,6 +326,7 @@ function _inherits(subClass, superClass) { if (typeof superClass !== "function"
 
         this.isOpen = true;
         Modal._modalsOpen++;
+        this._nthModalOpened = Modal._modalsOpen;
 
         // Set Z-Index based on number of currently open modals
         this.$overlay[0].style.zIndex = 1000 + Modal._modalsOpen * 2;
@@ -374,6 +377,7 @@ function _inherits(subClass, superClass) { if (typeof superClass !== "function"
 
         this.isOpen = false;
         Modal._modalsOpen--;
+        this._nthModalOpened = 0;
 
         // Call onCloseStart callback
         if (typeof this.options.onCloseStart === 'function') {
@@ -389,7 +393,7 @@ function _inherits(subClass, superClass) { if (typeof superClass !== "function"
 
         if (this.options.dismissible) {
           document.removeEventListener('keydown', this._handleKeydownBound);
-          document.removeEventListener('focus', this._handleFocusBound);
+          document.removeEventListener('focus', this._handleFocusBound, true);
         }
 
         anim.remove(this.el);

data/assets/javascripts/materialize/parallax.js

@@ -36,7 +36,7 @@ function _inherits(subClass, superClass) { if (typeof superClass !== "function"
       _this.$img = _this.$el.find('img').first();
       _this.$img.each(function () {
         var el = this;
-        if (el.complete) $(el).trigger("load");
+        if (el.complete) $(el).trigger('load');
       });
 
       _this._updateParallax();

data/assets/javascripts/materialize/pushpin.js

@@ -62,11 +62,14 @@ function _inherits(subClass, superClass) { if (typeof superClass !== "function"
       value: function destroy() {
         this.el.style.top = null;
         this._removePinClasses();
-        this._removeEventHandlers();
 
         // Remove pushpin Inst
         var index = Pushpin._pushpins.indexOf(this);
         Pushpin._pushpins.splice(index, 1);
+        if (Pushpin._pushpins.length === 0) {
+          this._removeEventHandlers();
+        }
+        this.el.M_Pushpin = undefined;
       }
     }, {
       key: '_setupEventHandlers',
@@ -85,7 +88,6 @@ function _inherits(subClass, superClass) { if (typeof superClass !== "function"
 
         if (this.options.top <= scrolled && this.options.bottom >= scrolled && !this.el.classList.contains('pinned')) {
           this._removePinClasses();
-
           this.el.style.top = this.options.offset + 'px';
           this.el.classList.add('pinned');
 
@@ -122,7 +124,10 @@ function _inherits(subClass, superClass) { if (typeof superClass !== "function"
     }, {
       key: '_removePinClasses',
       value: function _removePinClasses() {
-        this.el.classList.remove('pin-top', 'pinned', 'pin-bottom');
+        // IE 11 bug (can't remove multiple classes in one line)
+        this.el.classList.remove('pin-top');
+        this.el.classList.remove('pinned');
+        this.el.classList.remove('pin-bottom');
       }
     }], [{
       key: 'init',

data/assets/javascripts/materialize/range.js

@@ -70,14 +70,12 @@ function _inherits(subClass, superClass) { if (typeof superClass !== "function"
       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);
@@ -102,7 +100,6 @@ function _inherits(subClass, superClass) { if (typeof superClass !== "function"
       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);
@@ -137,19 +134,6 @@ function _inherits(subClass, superClass) { if (typeof superClass !== "function"
         $(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
@@ -211,7 +195,6 @@ function _inherits(subClass, superClass) { if (typeof superClass !== "function"
       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';
 
@@ -286,8 +269,8 @@ function _inherits(subClass, superClass) { if (typeof superClass !== "function"
       key: '_calcRangeOffset',
       value: function _calcRangeOffset() {
         var width = this.$el.width() - 15;
-        var max = parseFloat(this.$el.attr('max'));
-        var min = parseFloat(this.$el.attr('min'));
+        var max = parseFloat(this.$el.attr('max')) || 100; // Range default max
+        var min = parseFloat(this.$el.attr('min')) || 0; // Range default min
         var percent = (parseFloat(this.$el.val()) - min) / (max - min);
         return percent * width;
       }

data/assets/javascripts/materialize/select.js

@@ -142,19 +142,21 @@ function _inherits(subClass, superClass) { if (typeof superClass !== "function"
               placeholderOption.find('input[type="checkbox"]').prop('checked', false);
               this._toggleEntryFromArray(placeholderOption[0].id);
             }
-
-            var checkbox = $(option).find('input[type="checkbox"]');
-            checkbox.prop('checked', !checkbox.prop('checked'));
             selected = this._toggleEntryFromArray(key);
           } else {
-            $(this.dropdownOptions).find('li').removeClass('active');
-            $(option).toggleClass('active');
-            this.input.value = option.textContent;
+            $(this.dropdownOptions).find('li').removeClass('selected');
+            $(option).toggleClass('selected', selected);
+            this._keysSelected = {};
+            this._keysSelected[option.id] = true;
           }
 
-          this._activateOption($(this.dropdownOptions), option);
-          $(this._valueDict[key].el).prop('selected', selected);
-          this.$el.trigger('change');
+          // Set selected on original select option
+          // Only trigger if selected state changed
+          var prevSelected = $(this._valueDict[key].el).prop('selected');
+          if (prevSelected !== selected) {
+            $(this._valueDict[key].el).prop('selected', selected);
+            this.$el.trigger('change');
+          }
         }
 
         e.stopPropagation();
@@ -183,9 +185,12 @@ function _inherits(subClass, superClass) { if (typeof superClass !== "function"
         var _this4 = this;
 
         this.wrapper = document.createElement('div');
-        $(this.wrapper).addClass('select-wrapper' + ' ' + this.options.classes);
+        $(this.wrapper).addClass('select-wrapper ' + this.options.classes);
         this.$el.before($(this.wrapper));
-        this.wrapper.appendChild(this.el);
+        // Move actual select element into overflow hidden wrapper
+        var $hideSelect = $('<div class="hide-select"></div>');
+        $(this.wrapper).append($hideSelect);
+        $hideSelect[0].appendChild(this.el);
 
         if (this.el.disabled) {
           this.wrapper.classList.add('disabled');
@@ -223,7 +228,7 @@ function _inherits(subClass, superClass) { if (typeof superClass !== "function"
           });
         }
 
-        this.$el.after(this.dropdownOptions);
+        $(this.wrapper).append(this.dropdownOptions);
 
         // Add input dropdown
         this.input = document.createElement('input');
@@ -235,24 +240,40 @@ function _inherits(subClass, superClass) { if (typeof superClass !== "function"
           $(this.input).prop('disabled', 'true');
         }
 
-        this.$el.before(this.input);
+        $(this.wrapper).prepend(this.input);
         this._setValueToInput();
 
         // Add caret
         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]);
+        $(this.wrapper).prepend(dropdownIcon[0]);
 
         // Initialize dropdown
         if (!this.el.disabled) {
           var dropdownOptions = $.extend({}, this.options.dropdownOptions);
+          var userOnOpenEnd = dropdownOptions.onOpenEnd;
 
           // 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 (selectedOption.length) {
+              // Focus selected option in dropdown
+              M.keyDown = true;
+              _this4.dropdown.focusedIndex = selectedOption.index();
+              _this4.dropdown._focusFocusedItem();
+              M.keyDown = false;
+
+              // Handle scrolling to selected option
+              if (_this4.dropdown.isScrollable) {
+                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;
+              }
+            }
+
+            // Handle user declared onOpenEnd if needed
+            if (userOnOpenEnd && typeof userOnOpenEnd === 'function') {
+              userOnOpenEnd.call(_this4.dropdown, _this4.el);
             }
           };
 
@@ -322,7 +343,6 @@ function _inherits(subClass, superClass) { if (typeof superClass !== "function"
 
         // add icons
         var iconUrl = option.getAttribute('data-icon');
-        var classes = option.getAttribute('class');
         if (!!iconUrl) {
           var imgEl = $('<img alt="" src="' + iconUrl + '">');
           liEl.prepend(imgEl);
@@ -343,49 +363,54 @@ function _inherits(subClass, superClass) { if (typeof superClass !== "function"
       key: '_toggleEntryFromArray',
       value: function _toggleEntryFromArray(key) {
         var notAdded = !this._keysSelected.hasOwnProperty(key);
+        var $optionLi = $(this._valueDict[key].optionEl);
+
         if (notAdded) {
           this._keysSelected[key] = true;
         } else {
           delete this._keysSelected[key];
         }
 
-        $(this._valueDict[key].optionEl).toggleClass('active');
+        $optionLi.toggleClass('selected', notAdded);
+
+        // Set checkbox checked value
+        $optionLi.find('input[type="checkbox"]').prop('checked', notAdded);
 
         // use notAdded instead of true (to detect if the option is selected or not)
-        $(this._valueDict[key].el).prop('selected', notAdded);
+        $optionLi.prop('selected', notAdded);
 
         return notAdded;
       }
 
       /**
-       * Set value to input
+       * Set text value to input
        */
 
     }, {
       key: '_setValueToInput',
       value: function _setValueToInput() {
-        var value = '';
+        var values = [];
         var options = this.$el.find('option');
 
         options.each(function (el) {
           if ($(el).prop('selected')) {
             var text = $(el).text();
-            value === '' ? value += text : value += ', ' + text;
+            values.push(text);
           }
         });
 
-        if (value === '') {
+        if (!values.length) {
           var firstDisabled = this.$el.find('option:disabled').eq(0);
-          if (firstDisabled.length) {
-            value = firstDisabled.text();
+          if (firstDisabled.length && firstDisabled[0].value === '') {
+            values.push(firstDisabled.text());
           }
         }
 
-        this.input.value = value;
+        this.input.value = values.join(', ');
       }
 
       /**
-       * Set selected state of dropdown too match actual select element
+       * Set selected state of dropdown to match actual select element
        */
 
     }, {
@@ -395,12 +420,12 @@ function _inherits(subClass, superClass) { if (typeof superClass !== "function"
 
         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);
+          var optionIsSelected = $(option.el).prop('selected');
+          $(option.optionEl).find('input[type="checkbox"]').prop('checked', optionIsSelected);
+          if (optionIsSelected) {
             this._activateOption($(this.dropdownOptions), $(option.optionEl));
             this._keysSelected[key] = true;
           } else {
-            $(option.optionEl).find('input[type="checkbox"]').prop("checked", false);
             $(option.optionEl).removeClass('selected');
           }
         }
@@ -419,7 +444,6 @@ function _inherits(subClass, superClass) { if (typeof superClass !== "function"
           if (!this.isMultiple) {
             collection.find('li.selected').removeClass('selected');
           }
-
           var option = $(newOption);
           option.addClass('selected');
         }

data/assets/javascripts/materialize/sidenav.js

@@ -99,9 +99,11 @@ function _inherits(subClass, superClass) { if (typeof superClass !== "function"
        */
       value: function destroy() {
         this._removeEventHandlers();
+        this._enableBodyScrolling();
         this._overlay.parentNode.removeChild(this._overlay);
         this.dragTarget.parentNode.removeChild(this.dragTarget);
         this.el.M_Sidenav = undefined;
+        this.el.style.transform = '';
 
         var index = Sidenav._sidenavs.indexOf(this);
         if (index >= 0) {
@@ -290,7 +292,7 @@ function _inherits(subClass, superClass) { if (typeof superClass !== "function"
       key: '_handleDragTargetRelease',
       value: function _handleDragTargetRelease() {
         if (this.isDragged) {
-          if (this.percentOpen > .5) {
+          if (this.percentOpen > 0.2) {
             this.open();
           } else {
             this._animateOut();
@@ -357,7 +359,7 @@ function _inherits(subClass, superClass) { if (typeof superClass !== "function"
       key: '_handleCloseRelease',
       value: function _handleCloseRelease() {
         if (this.isOpen && this.isDragged) {
-          if (this.percentOpen > .5) {
+          if (this.percentOpen > 0.8) {
             this._animateIn();
           } else {
             this.close();
@@ -645,7 +647,7 @@ function _inherits(subClass, superClass) { if (typeof superClass !== "function"
 
   Sidenav._sidenavs = [];
 
-  window.M.Sidenav = Sidenav;
+  M.Sidenav = Sidenav;
 
   if (M.jQueryLoaded) {
     M.initializeJqueryWrapper(Sidenav, 'sidenav', 'M_Sidenav');