refactor(tabs): adds support for non-fixed tabs

Closes angular#825. Closes angular#460. Closes angular#921. refactor(tabs): added handling for when the tabs are initially hidden refactor(tabs): switched to 0-based page indexes refactor(tabs): wires up pagination to use $mdMedia rather than a hard-coded pixel size In order to accomplish this, I had to move $mdMedia into its own file in the 'material.core' scope. refactor(tabs): changes per Andrew's feedback Renames `stretchTabs()` to `shouldStretchTabs()` Uses `getElementsByTagName()` in place of `querySelectorAll()` Uses cached version of `angular.element(tabs)` Adds descriptive comment for `data.page` calculation refactor(tabs): moves tabs definition to top of `postLink` method
gkalpak · Dec 18, 2014 · 6397040 · 6397040
1 parent 4ae4e07
commit 6397040
Show file tree

Hide file tree

Showing 12 changed files with 310 additions and 203 deletions.
diff --git a/src/components/sidenav/sidenav.js b/src/components/sidenav/sidenav.js
@@ -15,7 +15,6 @@ angular.module('material.components.sidenav', [
   .factory('$mdSidenav', mdSidenavService )
   .directive('mdSidenav', mdSidenavDirective)
   .controller('$mdSidenavController', mdSidenavController)
-  .factory('$mdMedia', mdMediaFactory)
   .factory('$mdComponentRegistry', mdComponentRegistry);
 
 /*
@@ -230,54 +229,6 @@ function mdSidenavDirective($timeout, $animate, $parse, $mdMedia, $mdConstant, $
 
 }
 
-/**
- * Exposes a function on the '$mdMedia' service which will return true or false,
- * whether the given media query matches. Re-evaluates on resize. Allows presets
- * for 'sm', 'md', 'lg'.
- *
- * @example $mdMedia('sm') == true if device-width <= sm
- * @example $mdMedia('(min-width: 1200px)') == true if device-width >= 1200px
- * @example $mdMedia('max-width: 300px') == true if device-width <= 300px (sanitizes input, adding parens)
- */
-function mdMediaFactory($window, $mdUtil, $timeout, $mdConstant) {
-  var cache = $mdUtil.cacheFactory('$mdMedia', { capacity: 15 });
-
-  angular.element($window).on('resize', updateAll);
-
-  return $mdMedia;
-
-  function $mdMedia(query) {
-    query = validate(query);
-    var result;
-    if ( !angular.isDefined(result = cache.get(query)) ) {
-      return add(query);
-    }
-    return result;
-  }
-
-  function validate(query) {
-    return $mdConstant.MEDIA[query] || (
-      query.charAt(0) != '(' ?  ('(' + query + ')') : query
-    );
-  }
-
-  function add(query) {
-    return cache.put(query, !!$window.matchMedia(query).matches);
-  }
-
-  function updateAll() {
-    var keys = cache.keys();
-    if (keys.length) {
-      for (var i = 0, ii = keys.length; i < ii; i++) {
-        cache.put(keys[i], !!$window.matchMedia(keys[i]).matches);
-      }
-      // trigger a $digest()
-      $timeout(angular.noop);
-    }
-  }
-
-}
-
 function mdComponentRegistry($log) {
   var instances = [];
 

diff --git a/src/components/tabs/demoDynamicTabs/style.css b/src/components/tabs/demoDynamicTabs/style.css
@@ -11,17 +11,28 @@
   height: 300px;
   text-align: center;
 }
-.tab0 {
-  background-color: #E3F2FD;
+.tab0, .tab1, .tab2, .tab3 {
+  background-color: #bbdefb;
 }
-.tab1 {
-  background-color: #E1F5FE;
+
+.md-header {
+  background-color: #1976D2 !important;
+}
+md-tab {
+  color: #90caf9 !important;
+}
+md-tab.active,
+md-tab:focus {
+  color: white !important;
+}
+md-tab[disabled] {
+  opacity: 0.5;
 }
-.tab2 {
-  background-color: #E0F7FA;
+.md-header .md-ripple {
+  border-color: #FFFF8D !important;
 }
-.tab3 {
-  background-color: #E0F2F1;
+md-tabs-ink-bar {
+  background-color: #FFFF8D !important;
 }
 
 .title {

diff --git a/src/components/tabs/demoStaticTabs/style.css b/src/components/tabs/demoStaticTabs/style.css
@@ -64,3 +64,22 @@
   margin-top:26px;
   margin-left:0px;
 }
+.md-header {
+  background-color: #1976D2 !important;
+}
+md-tab {
+  color: #90caf9 !important;
+}
+md-tab.active,
+md-tab:focus {
+  color: white !important;
+}
+md-tab[disabled] {
+  opacity: 0.5;
+}
+.md-header .md-ripple {
+  border-color: #FFFF8D !important;
+}
+md-tabs-ink-bar {
+  background-color: #FFFF8D !important;
+}
diff --git a/src/components/tabs/js/inkBarDirective.js b/src/components/tabs/js/inkBarDirective.js
@@ -9,7 +9,9 @@
 angular.module('material.components.tabs')
   .directive('mdTabsInkBar', MdTabInkDirective);
 
-function MdTabInkDirective($mdConstant, $window, $$rAF, $timeout) {
+function MdTabInkDirective($$rAF) {
+
+  var lastIndex = 0;
 
   return {
     restrict: 'E',
@@ -18,40 +20,38 @@ function MdTabInkDirective($mdConstant, $window, $$rAF, $timeout) {
   };
 
   function postLink(scope, element, attr, ctrls) {
-    var nobar = ctrls[0],
-        tabsCtrl = ctrls[1],
-        timeout;
+    if (ctrls[0]) return;
 
-    if (nobar) return;
+    var tabsCtrl = ctrls[1],
+        debouncedUpdateBar = $$rAF.debounce(updateBar);
 
     tabsCtrl.inkBarElement = element;
 
-    scope.$watch(tabsCtrl.selected, updateBar);
-    scope.$on('$mdTabsChanged', updateBar);
+    scope.$on('$mdTabsPaginationChanged', debouncedUpdateBar);
 
     function updateBar() {
-      var selected = tabsCtrl.selected();
+      var selected = tabsCtrl.getSelectedItem();
+      var hideInkBar = !selected || tabsCtrl.count() < 2;
 
-      var hideInkBar = !selected || tabsCtrl.count() < 2 ||
-        (scope.pagination || {}).itemsPerPage === 1;
       element.css('display', hideInkBar ? 'none' : 'block');
 
-      if (!hideInkBar) {
-        var count = tabsCtrl.count();
-        var scale = 1 / count;
-        var left = tabsCtrl.indexOf(selected);
-        element.css($mdConstant.CSS.TRANSFORM, 'scaleX(' + scale + ') ' +
-                    'translate3d(' + left * 100 + '%,0,0)');
-        element.addClass('md-ink-bar-grow');
-        if (timeout) $timeout.cancel(timeout);
-        timeout = $timeout(function () {
-          element.removeClass('md-ink-bar-grow');
-        }, 250, false);
+      if (hideInkBar) return;
+
+      if (scope.pagination && scope.pagination.tabData) {
+        var index = tabsCtrl.getSelectedIndex();
+        var data = scope.pagination.tabData.tabs[index] || { left: 0, right: 0, width: 0 };
+        var right = element.parent().prop('offsetWidth') - data.right;
+        var classNames = ['md-transition-left', 'md-transition-right', 'md-no-transition'];
+        var classIndex = lastIndex > index ? 0 : lastIndex < index ? 1 : 2;
+
+        element
+            .removeClass(classNames.join(' '))
+            .addClass(classNames[classIndex])
+            .css({ left: (data.left + 1) + 'px', right: right + 'px' });
 
+        lastIndex = index;
       }
     }
-
   }
-
 }
 })();