Rewrote the tabs JS, transposed the CSS to LESS and added the ability to scroll through overflowing tabs

index.html

@@ -154,7 +154,7 @@
             <li class="withripple" data-target="#navbar">Navbar</li>
             <li class="withripple" data-target="#progress-bar">Progress Bar</li>
             <li class="withripple" data-target="#slider">Slider</li>
-            <li class="withripple">Tabs (To do)</li>
+            <li class="withripple" data-target="#tabs">Tabs (To do)</li>
             <li class="withripple" data-target="#button">Button</li>
             <li class="withripple">Icon button (To do)</li>
             <li class="withripple" data-target="#floating-action-button">Floating Action Button</li>
@@ -864,6 +864,48 @@
               </style>
 
             </div>
+            <div class="well page" id="tabs">
+                <h1 class="header">Tabs</h1>
+                <div class="tab-page-group">
+                    <div class="toolbar">
+                        <ul class="tabs">
+                            <li><a href="javascript:void(0)">Tab 1</a></li>
+                            <li><a href="javascript:void(0)">Tab 2</a></li>
+                            <li><a href="javascript:void(0)">Tab 3</a></li>
+                            <li><a href="javascript:void(0)">Tab 3</a></li>
+                            <li><a href="javascript:void(0)">Tab 3</a></li>
+                            <li><a href="javascript:void(0)">Tab 3</a></li>
+                            <li><a href="javascript:void(0)">Tab 3</a></li>
+                            <li><a href="javascript:void(0)">Tab 3</a></li>
+                            <li><a href="javascript:void(0)">Tab 1</a></li>
+                            <li><a href="javascript:void(0)">Tab 2</a></li>
+                            <li><a href="javascript:void(0)">Tab 3</a></li>
+                            <li><a href="javascript:void(0)">Tab 3</a></li>
+                            <li><a href="javascript:void(0)">Tab 3</a></li>
+                            <li><a href="javascript:void(0)">Tab 3</a></li>
+                            <li><a href="javascript:void(0)">Tab 3</a></li>
+                            <li><a href="javascript:void(0)">Tab 3</a></li>
+                            <li><a href="javascript:void(0)">Tab 1</a></li>
+                            <li><a href="javascript:void(0)">Tab 2</a></li>
+                            <li><a href="javascript:void(0)">Tab 3</a></li>
+                            <li><a href="javascript:void(0)">Tab 3</a></li>
+                            <li><a href="javascript:void(0)">Tab 3</a></li>
+                            <li><a href="javascript:void(0)">Tab 3</a></li>
+                            <li><a href="javascript:void(0)">Tab 3</a></li>
+                            <li><a href="javascript:void(0)">Tab last</a></li>
+                        </ul>
+                    </div>
+                    <div class="tab-page active-page">
+                        I am the first tab
+                    </div>
+                    <div class="tab-page">
+                        I am the second tab
+                    </div>
+                    <div class="tab-page">
+                        I am the third tab
+                    </div>
+                </div>
+            </div>
             <div class="well page" id="material-colors">
               <h1 class="header">Material Color Samples</h1>
               <p>This is the list of all the supported color variations. Each color can be applied to every element that supports variations.</p>
@@ -1534,7 +1576,7 @@
     <script src="dist/js/material.min.js"></script>
     <script src="dist/js/ripples.min.js"></script>
     <script>
-      $.material.init();
+      //$.material.init();
     </script>
 
 

less/_tabs.less

@@ -22,3 +22,64 @@
     }
 
 }
+
+.tab-page-group {
+  overflow: hidden;
+  .toolbar {
+    background: #03A9F4;
+    height: 50px;
+    overflow: hidden;
+    .tabs {
+      list-style: none;
+      overflow: hidden;
+      padding: 0;
+      margin: 0 16px;
+      li {
+        float: left;
+        display: inline;
+        position: relative;
+        a {
+          position: relative;
+          color: white;
+          text-decoration: none;
+          text-transform: uppercase;
+          display: block;
+          padding: 0 16px;
+          height: 50px;
+          text-align: center;
+          line-height: 52px;
+          font-weight: 700;
+          font-size: 14px;
+          color: rgba(255, 255, 255, 0.6);
+          overflow: hidden;
+          &:after {
+            height: 0;
+            width: 100%;
+            display: block;
+            content: " ";
+            bottom: 0;
+            left: 0;
+            position: absolute;
+            background: #FFFF8D;
+            transition: all 0.1s cubic-bezier(0.4, 0.0, 1, 1);
+          }
+        }
+        &.active a {
+          color: white;
+          &:after {
+            height: 2px;
+          }
+        }
+      }
+    }
+  }
+  .tab-page {
+    display: none;
+    box-shadow: inset 0 5px 6px -3px rgba(0, 0, 0, 0.4);
+    padding: 50px;
+    overflow: hidden;
+  }
+  .active-page {
+    display: block;
+  }
+}

scripts/material.js

@@ -29,6 +29,7 @@
       "radio": true,
       "arrive": true,
       "autofill": false,
+      "tabs": true,
 
       "withRipples": [
         ".btn:not(.btn-link)",
@@ -36,6 +37,7 @@
         ".navbar a:not(.withoutripple)",
         ".dropdown-menu a",
         ".nav-tabs a:not(.withoutripple)",
+        ".tab-page-group .toolbar .tabs > li:not(.withoutripple)",
         ".withripple"
       ].join(","),
       "inputElements": "input.form-control, textarea.form-control, select.form-control",
@@ -172,6 +174,60 @@
         clearInterval(focused);
       });
     },
+    "tabs": function() {
+      var dragging = null,
+        current = null,
+        startPos = 0;
+      $(".tab-page-group").each(function() {
+        var group = $(this),
+          pages = group.find(".tab-page"),
+          activePage = pages.eq(0),
+          tabs = group.find(".toolbar > .tabs > li"),
+          width = 0;
+
+        tabs.click(function() {
+          var targetPage = pages.eq($(this).index());
+          if (targetPage.length > 0 && targetPage.index() !== activePage.index()) {
+            targetPage.css("display", "block");
+            activePage.css("display", "none");
+            activePage = targetPage;
+            tabs.removeClass("active");
+            $(this).addClass("active");
+          }
+        }).each(function() {
+          width += $(this).width();
+        }).eq(0).addClass("active");
+        group.find(".toolbar").width(width).on("mousedown touchstart", function(e) {
+          startPos = e.pageX;
+          dragging = $(this);
+          e.preventDefault();
+          return false;
+        });
+      });
+      $("body").on("mousemove", function(e) {
+        var offset = e.pageX - startPos;
+        if (dragging !== null) {
+          if (current === null) {
+            current = parseFloat(dragging.css("margin-left"));
+          }
+          if (current + offset > 0) {
+            startPos = e.pageX;
+            dragging.css("margin-left", 0);
+            current = null;
+          } else if (Math.abs(current + offset) + dragging.parent().width() > dragging.width()) {
+            offset = (dragging.parent().width() - dragging.width());
+            startPos = e.pageX;
+            dragging.css("margin-left", offset);
+            current = null;
+          } else {
+            dragging.css("margin-left", current + offset);
+          }
+        }
+      }).on("mouseup touchend", function() {
+        dragging = null;
+        current = null;
+      });
+    },
     "init": function() {
       if ($.fn.ripples && this.options.ripples) {
         this.ripples();
@@ -191,6 +247,9 @@
       if (this.options.autofill) {
         this.autofill();
       }
+      if (this.options.tabs) {
+        this.tabs();
+      }
 
       if (document.arrive && this.options.arrive) {
         if ($.fn.ripples && this.options.ripples) {

tabs/tabs.css

@@ -1,72 +0,0 @@
-.tab-page {
-  display: none;
-}
-
-.active-page {
-  display: block;
-}
-
-body {
-  margin: 0;
-  background: #E5E5E5;
-  color: #404040;
-}
-
-.toolbar {
-  background: #03A9F4
-}
-
-.tabs {
-  list-style: none;
-  margin: 0;
-  overflow: hidden;
-  padding: 0;
-  margin-left: 16px;
-}
-
-.tabs li {
-  float: left;
-  display: inline;
-}
-
-.tabs a {
-  position: relative;
-  color: white;
-  text-decoration: none;
-  text-transform: uppercase;
-  display: block;
-  width: 100px;
-  height: 50px;
-  text-align: center;
-  line-height: 52px;
-  font-weight: 700;
-  font-size: 14px;
-  color: rgba(255, 255, 255, 0.6);
-  overflow: hidden;
-}
-
-.tabs .active a {
-  color: white;
-}
-
-.tabs .active a:after {
-  height: 2px;
-  width: 100%;
-  display: block;
-  content: " ";
-  bottom: 0px;
-  left: 0px;
-  position: absolute;
-  background: #FFFF8D;
-  -webkit-animation: border-expand 0.2s cubic-bezier(0.4, 0.0, 0.4, 1) 0s alternate forwards;
-  -moz-animation: border-expand 0.2s cubic-bezier(0.4, 0.0, 0.4, 1) 0s alternate forwards;
-  transition: all 1s cubic-bezier(0.4, 0.0, 1, 1);
-}
-
-
-.tab-page {
-  box-shadow: inset 0px 5px 6px -3px rgba(0, 0, 0, 0.4);
-  padding-top: 50px;
-  padding-left: 50px;
-  overflow: hidden;
-}

tabs/tabs.html

@@ -1,43 +0,0 @@
-<!DOCTYPE html>
-
-<html>
-  <head>
-
-    <link rel="stylesheet" type="text/css" href="tabs.css">
-    <script src="tabs.js"></script>
-
-  </head>
-
-  <body>
-    <div class="toolbar">
-      <ul class="tabs" id="example-tabs">
-        <li class="tab-one withripple active"><a href="#">Tab 1</a></li>
-        <li class="tab-two withripple"><a href="#">Tab 2</a></li>
-        <li class="tab-three withripple"><a href="#">Tab 3</a></li>
-      </ul>
-    </div>
-
-    <div id="tab-one" class="tab-page active-page">
-      I am the first tab
-    </div>
-
-    <div id="tab-two" class="tab-page">
-      I am the second tab
-    </div>
-
-    <div id="tab-three" class="tab-page">
-      I am the third tab
-    </div>
-
-    <script>
-      /*
-         Initialize the tabs
-      */
-      window.onload = function () {
-        var div = document.getElementById('example-tabs');
-        var exampleTabs = new MaterialTabs(div);
-      };
-
-    </script>
-  </body>
-</html>

tabs/tabs.js

@@ -1,40 +0,0 @@
-var MaterialTabs = function (elem) {
-    //get tab objects and store as pane + tab
-    var activeTabObject;
-
-    var TabObject = function () {
-        var self = this;
-        this.tab; //element
-        this.pane; //element
-        this.setClick = function () {
-            self.tab.addEventListener('click', self.showThisTab)
-        };
-
-        this.showThisTab = function () {
-            if (self !== activeTabObject) {
-                //change the tab page and update the active tab
-                activeTabObject.pane.className = activeTabObject.pane.className.replace('active-page', '');
-                activeTabObject.tab.className = activeTabObject.tab.className.replace('active', '');
-                self.pane.className = self.pane.className + ' active-page';
-                self.tab.className = self.tab.className + ' active';
-                activeTabObject = self;
-            }
-        };
-    };
-
-    var ul = elem;
-    var i;
-    var items = ul.getElementsByTagName("li");
-    for (i = 0; i < items.length; ++i) {
-        var tab = new TabObject();
-        tab.tab = items[i];
-        var classString = items[i].className;
-        var className = classString.split(' ')[0];
-        tab.pane = document.getElementById(className);
-        tab.setClick();
-        if (classString.indexOf('active') > -1) {
-            activeTabObject = tab;
-        }
-    }
-
-};