mtl 1.1.0 → 1.1.1

data/vendor/assets/javascripts/materialize/tabs.js

@@ -3,7 +3,9 @@
   var methods = {
     init : function(options) {
       var defaults = {
-        onShow: null
+        onShow: null,
+        swipeable: false,
+        responsiveThreshold: Infinity, // breakpoint for swipeable
       };
       options = $.extend(defaults, options);
 
@@ -16,8 +18,15 @@
 
       var $active, $content, $links = $this.find('li.tab a'),
           $tabs_width = $this.width(),
+          $tabs_content = $(),
+          $tabs_wrapper,
           $tab_width = Math.max($tabs_width, $this[0].scrollWidth) / $links.length,
-          $index = 0;
+          $indicator,
+          index = prev_index = 0,
+          clicked = false,
+          clickedTimeout,
+          transition = 300;
+
 
       // Finds right attribute for indicator based on active tab.
       // el: jQuery Object
@@ -31,6 +40,27 @@
         return el.position().left + $this.scrollLeft();
       };
 
+      // Animates Indicator to active tab.
+      // prev_index: Number
+      var animateIndicator = function(prev_index) {
+        if ((index - prev_index) >= 0) {
+          $indicator.velocity({"right": calcRightPos($active) }, { duration: transition, queue: false, easing: 'easeOutQuad'});
+          $indicator.velocity({"left": calcLeftPos($active) }, {duration: transition, queue: false, easing: 'easeOutQuad', delay: 90});
+
+        } else {
+          $indicator.velocity({"left": calcLeftPos($active) }, { duration: transition, queue: false, easing: 'easeOutQuad'});
+          $indicator.velocity({"right": calcRightPos($active) }, {duration: transition, queue: false, easing: 'easeOutQuad', delay: 90});
+        }
+      };
+
+      // Change swipeable according to responsive threshold
+      if (options.swipeable) {
+        if (window_width > options.responsiveThreshold) {
+          options.swipeable = false;
+        }
+      }
+
+
       // If the location.hash matches one of the links, use that as the active tab.
       $active = $($links.filter('[href="'+location.hash+'"]'));
 
@@ -43,21 +73,28 @@
       }
 
       $active.addClass('active');
-      $index = $links.index($active);
-      if ($index < 0) {
-        $index = 0;
+      index = $links.index($active);
+      if (index < 0) {
+        index = 0;
       }
 
       if ($active[0] !== undefined) {
         $content = $($active[0].hash);
+        $content.addClass('active');
       }
 
       // append indicator then set indicator width to tab width
-      $this.append('<div class="indicator"></div>');
-      var $indicator = $this.find('.indicator');
+      if (!$this.find('.indicator').length) {
+        $this.append('<div class="indicator"></div>');
+      }
+      $indicator = $this.find('.indicator');
+
+      // we make sure that the indicator is at the end of the tabs
+      $this.append($indicator);
+
       if ($this.is(":visible")) {
-        // $indicator.css({"right": $tabs_width - (($index + 1) * $tab_width)});
-        // $indicator.css({"left": $index * $tab_width});
+        // $indicator.css({"right": $tabs_width - ((index + 1) * $tab_width)});
+        // $indicator.css({"left": index * $tab_width});
         setTimeout(function() {
           $indicator.css({"right": calcRightPos($active) });
           $indicator.css({"left": calcLeftPos($active) });
@@ -66,8 +103,8 @@
       $(window).resize(function () {
         $tabs_width = $this.width();
         $tab_width = Math.max($tabs_width, $this[0].scrollWidth) / $links.length;
-        if ($index < 0) {
-          $index = 0;
+        if (index < 0) {
+          index = 0;
         }
         if ($tab_width !== 0 && $tabs_width !== 0) {
           $indicator.css({"right": calcRightPos($active) });
@@ -75,10 +112,34 @@
         }
       });
 
-      // Hide the remaining content
-      $links.not($active).each(function () {
-        $(Materialize.escapeHash(this.hash)).hide();
-      });
+      // Initialize Tabs Content.
+      if (options.swipeable) {
+        // TODO: Duplicate calls with swipeable? handle multiple div wrapping.
+        $links.each(function () {
+          var $curr_content = $(Materialize.escapeHash(this.hash));
+          $curr_content.addClass('carousel-item');
+          $tabs_content = $tabs_content.add($curr_content);
+        });
+        $tabs_wrapper = $tabs_content.wrapAll('<div class="tabs-content carousel"></div>');
+        $tabs_content.css('display', '');
+        $('.tabs-content.carousel').carousel({
+          fullWidth: true,
+          noWrap: true,
+          onCycleTo: function(item) {
+            if (!clicked) {
+              var prev_index = index;
+              index = $tabs_wrapper.index(item);
+              $active = $links.eq(index);
+              animateIndicator(prev_index);
+            }
+          },
+        });
+      } else {
+        // Hide the remaining content
+        $links.not($active).each(function () {
+          $(Materialize.escapeHash(this.hash)).hide();
+        });
+      }
 
 
       // Bind the click event handler
@@ -93,14 +154,13 @@
           return;
         }
 
+        clicked = true;
         $tabs_width = $this.width();
         $tab_width = Math.max($tabs_width, $this[0].scrollWidth) / $links.length;
 
         // Make the old tab inactive.
         $active.removeClass('active');
-        if ($content !== undefined) {
-          $content.hide();
-        }
+        var $oldContent = $content
 
         // Update the variables with the new link and content
         $active = $(this);
@@ -110,31 +170,40 @@
 
         // Make the tab active.
         $active.addClass('active');
-        var $prev_index = $index;
-        $index = $links.index($(this));
-        if ($index < 0) {
-          $index = 0;
+        prev_index = index;
+        index = $links.index($(this));
+        if (index < 0) {
+          index = 0;
         }
         // Change url to current tab
         // window.location.hash = $active.attr('href');
 
-        if ($content !== undefined) {
-          $content.show();
-          if (typeof(options.onShow) === "function") {
-            options.onShow.call(this, $content);
+        // Swap content
+        if (options.swipeable) {
+          if ($tabs_content.length) {
+            $tabs_content.carousel('set', index);
+          }
+        } else {
+          if ($content !== undefined) {
+            $content.show();
+            $content.addClass('active');
+            if (typeof(options.onShow) === "function") {
+              options.onShow.call(this, $content);
+            }
           }
-        }
 
-        // Update indicator
+          if ($oldContent !== undefined &&
+              !$oldContent.is($content)) {
+            $oldContent.hide();
+            $oldContent.removeClass('active');
+          }
+        }
 
-        if (($index - $prev_index) >= 0) {
-          $indicator.velocity({"right": calcRightPos($active) }, { duration: 300, queue: false, easing: 'easeOutQuad'});
-          $indicator.velocity({"left": calcLeftPos($active) }, {duration: 300, queue: false, easing: 'easeOutQuad', delay: 90});
+        // Reset clicked state
+        clickedTimeout = setTimeout(function(){ clicked = false; }, transition);
 
-        } else {
-          $indicator.velocity({"left": calcLeftPos($active) }, { duration: 300, queue: false, easing: 'easeOutQuad'});
-          $indicator.velocity({"right": calcRightPos($active) }, {duration: 300, queue: false, easing: 'easeOutQuad', delay: 90});
-        }
+        // Update indicator
+        animateIndicator(prev_index);
 
         // Prevent the anchor's default click action
         e.preventDefault();

data/vendor/assets/javascripts/materialize/toasts.js

@@ -1,137 +1,136 @@
 Materialize.toast = function (message, displayLength, className, completeCallback) {
-    className = className || "";
+  className = className || "";
+
+  var container = document.getElementById('toast-container');
+
+  // Create toast container if it does not exist
+  if (container === null) {
+    // create notification container
+    container = document.createElement('div');
+    container.id = 'toast-container';
+    document.body.appendChild(container);
+  }
+
+  // Select and append toast
+  var newToast = createToast(message);
+
+  // only append toast if message is not undefined
+  if(message){
+    container.appendChild(newToast);
+  }
+
+  newToast.style.opacity = 0;
+
+  // Animate toast in
+  Vel(newToast, {translateY: '-35px',  opacity: 1 }, {duration: 300,
+    easing: 'easeOutCubic',
+    queue: false});
+
+  // Allows timer to be pause while being panned
+  var timeLeft = displayLength;
+  var counterInterval;
+  if (timeLeft != null)  {
+    counterInterval = setInterval (function(){
+      if (newToast.parentNode === null)
+        window.clearInterval(counterInterval);
+
+      // If toast is not being dragged, decrease its time remaining
+      if (!newToast.classList.contains('panning')) {
+        timeLeft -= 20;
+      }
+
+      if (timeLeft <= 0) {
+        // Animate toast out
+        Vel(newToast, {"opacity": 0, marginTop: '-40px'}, { duration: 375,
+            easing: 'easeOutExpo',
+            queue: false,
+            complete: function(){
+              // Call the optional callback
+              if(typeof(completeCallback) === "function")
+                completeCallback();
+              // Remove toast after it times out
+              this[0].parentNode.removeChild(this[0]);
+            }
+          });
+        window.clearInterval(counterInterval);
+      }
+    }, 20);
+  }
 
-    var container = document.getElementById('toast-container');
 
-    // Create toast container if it does not exist
-    if (container === null) {
-        // create notification container
-        container = document.createElement('div');
-        container.id = 'toast-container';
-        document.body.appendChild(container);
-    }
 
-    // Select and append toast
-    var newToast = createToast(message);
+  function createToast(html) {
 
-    // only append toast if message is not undefined
-    if(message){
-        container.appendChild(newToast);
-    }
+    // Create toast
+    var toast = document.createElement('div');
+    toast.classList.add('toast');
+    if (className) {
+      var classes = className.split(' ');
 
-    newToast.style.top = '35px';
-    newToast.style.opacity = 0;
-
-    // Animate toast in
-    Vel(newToast, { "top" : "0px", opacity: 1 }, {duration: 300,
-      easing: 'easeOutCubic',
-      queue: false});
-
-    // Allows timer to be pause while being panned
-    var timeLeft = displayLength;
-    var counterInterval;
-    if (timeLeft != null)  {
-      counterInterval = setInterval (function(){
-        if (newToast.parentNode === null)
-          window.clearInterval(counterInterval);
-
-        // If toast is not being dragged, decrease its time remaining
-        if (!newToast.classList.contains('panning')) {
-          timeLeft -= 20;
-        }
-
-        if (timeLeft <= 0) {
-          // Animate toast out
-          Vel(newToast, {"opacity": 0, marginTop: '-40px'}, { duration: 375,
-              easing: 'easeOutExpo',
-              queue: false,
-              complete: function(){
-                // Call the optional callback
-                if(typeof(completeCallback) === "function")
-                  completeCallback();
-                // Remove toast after it times out
-                this[0].parentNode.removeChild(this[0]);
-              }
-            });
-          window.clearInterval(counterInterval);
-        }
-      }, 20);
+      for (var i = 0, count = classes.length; i < count; i++) {
+        toast.classList.add(classes[i]);
+      }
     }
-
-
-
-    function createToast(html) {
-
-        // Create toast
-        var toast = document.createElement('div');
-        toast.classList.add('toast');
-        if (className) {
-            var classes = className.split(' ');
-
-            for (var i = 0, count = classes.length; i < count; i++) {
-                toast.classList.add(classes[i]);
-            }
-        }
-        // If type of parameter is HTML Element
-        if ( typeof HTMLElement === "object" ? html instanceof HTMLElement : html && typeof html === "object" && html !== null && html.nodeType === 1 && typeof html.nodeName==="string"
+  // If type of parameter is HTML Element
+    if ( typeof HTMLElement === "object" ? html instanceof HTMLElement : html && typeof html === "object" && html !== null && html.nodeType === 1 && typeof html.nodeName==="string"
 ) {
-          toast.appendChild(html);
-        }
-        else if (html instanceof jQuery) {
-          // Check if it is jQuery object
-          toast.appendChild(html[0]);
-        }
-        else {
-          // Insert as text;
-          toast.innerHTML = html;
-        }
-        // Bind hammer
-        var hammerHandler = new Hammer(toast, {prevent_default: false});
-        hammerHandler.on('pan', function(e) {
-          var deltaX = e.deltaX;
-          var activationDistance = 80;
-
-          // Change toast state
-          if (!toast.classList.contains('panning')){
-            toast.classList.add('panning');
+      toast.appendChild(html);
+    }
+    else if (html instanceof jQuery) {
+      // Check if it is jQuery object
+      toast.appendChild(html[0]);
+    }
+    else {
+      // Insert as text;
+      toast.innerHTML = html;
+    }
+    // Bind hammer
+    var hammerHandler = new Hammer(toast, {prevent_default: false});
+    hammerHandler.on('pan', function(e) {
+      var deltaX = e.deltaX;
+      var activationDistance = 80;
+
+      // Change toast state
+      if (!toast.classList.contains('panning')){
+        toast.classList.add('panning');
+      }
+
+      var opacityPercent = 1-Math.abs(deltaX / activationDistance);
+      if (opacityPercent < 0)
+        opacityPercent = 0;
+
+      Vel(toast, {left: deltaX, opacity: opacityPercent }, {duration: 50, queue: false, easing: 'easeOutQuad'});
+
+    });
+
+    hammerHandler.on('panend', function(e) {
+      var deltaX = e.deltaX;
+      var activationDistance = 80;
+
+      // If toast dragged past activation point
+      if (Math.abs(deltaX) > activationDistance) {
+        Vel(toast, {marginTop: '-40px'}, { duration: 375,
+          easing: 'easeOutExpo',
+          queue: false,
+          complete: function(){
+            if(typeof(completeCallback) === "function") {
+              completeCallback();
+            }
+            toast.parentNode.removeChild(toast);
           }
-
-          var opacityPercent = 1-Math.abs(deltaX / activationDistance);
-          if (opacityPercent < 0)
-            opacityPercent = 0;
-
-          Vel(toast, {left: deltaX, opacity: opacityPercent }, {duration: 50, queue: false, easing: 'easeOutQuad'});
-
         });
 
-        hammerHandler.on('panend', function(e) {
-          var deltaX = e.deltaX;
-          var activationDistance = 80;
-
-          // If toast dragged past activation point
-          if (Math.abs(deltaX) > activationDistance) {
-            Vel(toast, {marginTop: '-40px'}, { duration: 375,
-                easing: 'easeOutExpo',
-                queue: false,
-                complete: function(){
-                  if(typeof(completeCallback) === "function") {
-                    completeCallback();
-                  }
-                  toast.parentNode.removeChild(toast);
-                }
-            });
-
-          } else {
-            toast.classList.remove('panning');
-            // Put toast back into original position
-            Vel(toast, { left: 0, opacity: 1 }, { duration: 300,
-              easing: 'easeOutExpo',
-              queue: false
-            });
-
-          }
+      } else {
+        toast.classList.remove('panning');
+        // Put toast back into original position
+        Vel(toast, { left: 0, opacity: 1 }, { duration: 300,
+          easing: 'easeOutExpo',
+          queue: false
         });
 
-        return toast;
-    }
+      }
+    });
+
+    return toast;
+  }
 };

data/vendor/assets/javascripts/materialize/tooltip.js

@@ -86,18 +86,20 @@
             started = true;
             tooltipEl.velocity('stop');
             backdrop.velocity('stop');
-            tooltipEl.css({ display: 'block', left: '0px', top: '0px' });
+            tooltipEl.css({ visibility: 'visible', left: '0px', top: '0px' });
 
             // Tooltip positioning
             var originWidth = origin.outerWidth();
             var originHeight = origin.outerHeight();
-
             var tooltipHeight = tooltipEl.outerHeight();
             var tooltipWidth = tooltipEl.outerWidth();
             var tooltipVerticalMovement = '0px';
             var tooltipHorizontalMovement = '0px';
+            var backdropOffsetWidth = backdrop[0].offsetWidth;
+            var backdropOffsetHeight = backdrop[0].offsetHeight;
             var scaleXFactor = 8;
             var scaleYFactor = 8;
+            var scaleFactor = 0;
             var targetTop, targetLeft, newCoordinates;
 
             if (tooltipPosition === "top") {
@@ -105,7 +107,6 @@
               targetTop = origin.offset().top - tooltipHeight - margin;
               targetLeft = origin.offset().left + originWidth/2 - tooltipWidth/2;
               newCoordinates = repositionWithinScreen(targetLeft, targetTop, tooltipWidth, tooltipHeight);
-
               tooltipVerticalMovement = '-10px';
               backdrop.css({
                 bottom: 0,
@@ -113,7 +114,7 @@
                 borderRadius: '14px 14px 0 0',
                 transformOrigin: '50% 100%',
                 marginTop: tooltipHeight,
-                marginLeft: (tooltipWidth/2) - (backdrop.width()/2)
+                marginLeft: (tooltipWidth/2) - (backdropOffsetWidth/2)
               });
             }
             // Left Position
@@ -161,7 +162,7 @@
               backdrop.css({
                 top: 0,
                 left: 0,
-                marginLeft: (tooltipWidth/2) - (backdrop.width()/2)
+                marginLeft: (tooltipWidth/2) - (backdropOffsetWidth/2)
               });
             }
 
@@ -172,14 +173,15 @@
             });
 
             // Calculate Scale to fill
-            scaleXFactor = Math.SQRT2 * tooltipWidth / parseInt(backdrop.css('width'));
-            scaleYFactor = Math.SQRT2 * tooltipHeight / parseInt(backdrop.css('height'));
+            scaleXFactor = Math.SQRT2 * tooltipWidth / parseInt(backdropOffsetWidth);
+            scaleYFactor = Math.SQRT2 * tooltipHeight / parseInt(backdropOffsetHeight);
+            scaleFactor = Math.max(scaleXFactor, scaleYFactor);
 
-            tooltipEl.velocity({ marginTop: tooltipVerticalMovement, marginLeft: tooltipHorizontalMovement}, { duration: 350, queue: false })
+            tooltipEl.velocity({ translateY: tooltipVerticalMovement, translateX: tooltipHorizontalMovement}, { duration: 350, queue: false })
               .velocity({opacity: 1}, {duration: 300, delay: 50, queue: false});
-            backdrop.css({ display: 'block' })
+            backdrop.css({ visibility: 'visible' })
               .velocity({opacity:1},{duration: 55, delay: 0, queue: false})
-              .velocity({scaleX: scaleXFactor, scaleY: scaleYFactor}, {duration: 300, delay: 0, queue: false, easing: 'easeInOutQuad'});
+              .velocity({scaleX: scaleFactor, scaleY: scaleFactor}, {duration: 300, delay: 0, queue: false, easing: 'easeInOutQuad'});
           };
 
           timeoutRef = setTimeout(showTooltip, tooltipDelay); // End Interval
@@ -195,13 +197,13 @@
           setTimeout(function() {
             if (started !== true) {
               tooltipEl.velocity({
-                opacity: 0, marginTop: 0, marginLeft: 0}, { duration: 225, queue: false});
+                opacity: 0, translateY: 0, translateX: 0}, { duration: 225, queue: false});
               backdrop.velocity({opacity: 0, scaleX: 1, scaleY: 1}, {
                 duration:225,
                 queue: false,
                 complete: function(){
-                  backdrop.css('display', 'none');
-                  tooltipEl.css('display', 'none');
+                  backdrop.css({ visibility: 'hidden' });
+                  tooltipEl.css({ visibility: 'hidden' });
                   started = false;}
               });
             }

data/vendor/assets/javascripts/materialize/transitions.js

@@ -1,6 +1,6 @@
 (function ($) {
   // Image transition function
-  Materialize.fadeInImage =  function(selectorOrEl) {
+  Materialize.fadeInImage = function(selectorOrEl) {
     var element;
     if (typeof(selectorOrEl) === 'string') {
       element = $(selectorOrEl);
@@ -11,30 +11,30 @@
     }
     element.css({opacity: 0});
     $(element).velocity({opacity: 1}, {
-        duration: 650,
-        queue: false,
-        easing: 'easeOutSine'
-      });
+      duration: 650,
+      queue: false,
+      easing: 'easeOutSine'
+    });
     $(element).velocity({opacity: 1}, {
-          duration: 1300,
-          queue: false,
-          easing: 'swing',
-          step: function(now, fx) {
-              fx.start = 100;
-              var grayscale_setting = now/100;
-              var brightness_setting = 150 - (100 - now)/1.75;
-
-              if (brightness_setting < 100) {
-                brightness_setting = 100;
-              }
-              if (now >= 0) {
-                $(this).css({
-                    "-webkit-filter": "grayscale("+grayscale_setting+")" + "brightness("+brightness_setting+"%)",
-                    "filter": "grayscale("+grayscale_setting+")" + "brightness("+brightness_setting+"%)"
-                });
-              }
-          }
-      });
+      duration: 1300,
+      queue: false,
+      easing: 'swing',
+      step: function(now, fx) {
+        fx.start = 100;
+        var grayscale_setting = now/100;
+        var brightness_setting = 150 - (100 - now)/1.75;
+
+        if (brightness_setting < 100) {
+          brightness_setting = 100;
+        }
+        if (now >= 0) {
+          $(this).css({
+              "-webkit-filter": "grayscale("+grayscale_setting+")" + "brightness("+brightness_setting+"%)",
+              "filter": "grayscale("+grayscale_setting+")" + "brightness("+brightness_setting+"%)"
+          });
+        }
+      }
+    });
   };
 
   // Horizontal staggered list

data/vendor/assets/stylesheets/materialize/_badges.scss

@@ -0,0 +1,46 @@
+// Badges
+span.badge {
+  min-width: 3rem;
+  padding: 0 6px;
+  margin-left: 14px;
+  text-align: center;
+  font-size: 1rem;
+  line-height: $badge-height;
+  height: $badge-height;
+  color: color('grey', 'darken-1');
+  float: right;
+  box-sizing: border-box;
+
+  &.new {
+    font-weight: 300;
+    font-size: 0.8rem;
+    color: #fff;
+    background-color: $badge-bg-color;
+    border-radius: 2px;
+  }
+  &.new:after {
+    content: " new";
+  }
+
+  &[data-badge-caption]::after {
+    content: " " attr(data-badge-caption);
+  }
+}
+nav ul a span.badge {
+  display: inline-block;
+  float: none;
+  margin-left: 4px;
+  line-height: $badge-height;
+  height: $badge-height;
+}
+
+// Line height centering
+.collection-item span.badge {
+  margin-top: calc(#{$collection-line-height / 2} - #{$badge-height / 2});
+}
+.collapsible span.badge {
+  margin-top: calc(#{$collapsible-line-height / 2} - #{$badge-height / 2});
+}
+.side-nav span.badge {
+  margin-top: calc(#{$sidenav-line-height / 2} - #{$badge-height / 2});
+}