materialize-sass 0.97.8 → 0.98.0

data/app/assets/javascripts/materialize/slider.js

@@ -180,10 +180,13 @@
             var direction = e.gesture.direction;
             var x = e.gesture.deltaX;
             var velocityX = e.gesture.velocityX;
+            var velocityY = e.gesture.velocityY;
 
             $curr_slide = $slider.find('.active');
-            $curr_slide.velocity({ translateX: x
-                }, {duration: 50, queue: false, easing: 'easeOutQuad'});
+            if (Math.abs(velocityX) > Math.abs(velocityY)) {
+              $curr_slide.velocity({ translateX: x
+                  }, {duration: 50, queue: false, easing: 'easeOutQuad'});
+            }
 
             // Swipe Left
             if (direction === 4 && (x > ($this.innerWidth() / 2) || velocityX < -0.65)) {
@@ -308,14 +311,14 @@
   };
 
 
-    $.fn.slider = function(methodOrOptions) {
-      if ( methods[methodOrOptions] ) {
-        return methods[ methodOrOptions ].apply( this, Array.prototype.slice.call( arguments, 1 ));
-      } else if ( typeof methodOrOptions === 'object' || ! methodOrOptions ) {
-        // Default to "init"
-        return methods.init.apply( this, arguments );
-      } else {
-        $.error( 'Method ' +  methodOrOptions + ' does not exist on jQuery.tooltip' );
-      }
-    }; // Plugin end
+  $.fn.slider = function(methodOrOptions) {
+    if ( methods[methodOrOptions] ) {
+      return methods[ methodOrOptions ].apply( this, Array.prototype.slice.call( arguments, 1 ));
+    } else if ( typeof methodOrOptions === 'object' || ! methodOrOptions ) {
+      // Default to "init"
+      return methods.init.apply( this, arguments );
+    } else {
+      $.error( 'Method ' +  methodOrOptions + ' does not exist on jQuery.tooltip' );
+    }
+  }; // Plugin end
 }( jQuery ));

data/app/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/app/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;
+  }
 };