feat(navBar): add disabled attribute (#10992)

* Originally developed by: @maxjoehnk . I'm just resubmitting
* Add disabled attribute to navitem
* Update demo to showcase ng-disabled and disabled usage
* Add tests
* Ignore navbar specific button styling when disabled

fixes #9667

Author: currensy

src/components/navBar/demoBasicUsage/index.html

@@ -7,12 +7,15 @@
       <md-nav-item md-nav-click="goto('page1')" name="page1">
         Page One
       </md-nav-item>
-      <md-nav-item md-nav-click="goto('page2')" name="page2">
+      <md-nav-item md-nav-click="goto('page2')" name="page2" ng-disabled="secondTabDisabled">
         Page Two
       </md-nav-item>
       <md-nav-item md-nav-click="goto('page3')" name="page3">
         Page Three
       </md-nav-item>
+      <md-nav-item md-nav-click="goto('page4')" name="page4" disabled>
+        Page Four
+      </md-nav-item>
       <!-- these require actual routing with ui-router or ng-route, so they
       won't work in the demo
       <md-nav-item md-nav-href="#page4" name="page5">Page Four</md-nav-item>
@@ -30,5 +33,9 @@
 
     <md-checkbox ng-model="disableInkBar">Disable Ink Bar</md-checkbox>
 
+    <md-checkbox ng-model="secondTabDisabled" aria-label="Disable Second Tab" style="margin: 5px;">
+      Disable Second Tab
+    </md-checkbox>
+
   </md-content>
 </div>

src/components/navBar/navBar.js

@@ -388,7 +388,7 @@ MdNavBarController.prototype.onKeydown = function(e) {
 /**
  * @ngInject
  */
-function MdNavItem($mdAria, $$rAF) {
+function MdNavItem($mdAria, $$rAF, $mdUtil, $window) {
   return {
     restrict: 'E',
     require: ['mdNavItem', '^mdNavBar'],
@@ -429,6 +429,7 @@ function MdNavItem($mdAria, $$rAF) {
           '<md-button class="_md-nav-button md-accent" ' +
             'ng-class="ctrl.getNgClassMap()" ' +
             'ng-blur="ctrl.setFocused(false)" ' +
+            'ng-disabled="ctrl.disabled"' +
             'tabindex="-1" ' +
             navigationOptions +
             navigationAttribute + '>' +
@@ -454,11 +455,11 @@ function MdNavItem($mdAria, $$rAF) {
       // When accessing the element's contents synchronously, they
       // may not be defined yet because of transclusion. There is a higher
       // chance that it will be accessible if we wait one frame.
+      var disconnect;
       $$rAF(function() {
         var mdNavItem = controllers[0];
         var mdNavBar = controllers[1];
         var navButton = angular.element(element[0].querySelector('._md-nav-button'));
-
         if (!mdNavItem.name) {
           mdNavItem.name = angular.element(element[0]
               .querySelector('._md-nav-button-text')).text().trim();
@@ -469,8 +470,30 @@ function MdNavItem($mdAria, $$rAF) {
           scope.$apply();
         });
 
+        if('MutationObserver' in $window) {
+          var config = {attributes: true, attributeFilter: ['disabled']};
+          var targetNode = element[0];
+          var mutationCallback = function(mutationList) {
+            $mdUtil.nextTick(function() {
+              mdNavItem.disabled = $mdUtil.parseAttributeBoolean(attrs[mutationList[0].attributeName], false);
+            });
+          };
+          var observer = new MutationObserver(mutationCallback);
+          observer.observe(targetNode, config);
+          disconnect = observer.disconnect.bind(observer);
+        } else {
+          attrs.$observe('disabled', function (value) {
+            mdNavItem.disabled = $mdUtil.parseAttributeBoolean(value, false);
+          });
+        }
+
+
         $mdAria.expectWithText(element, 'aria-label');
       });
+
+      scope.$on('destroy', function() {
+        disconnect();
+      })
     }
   };
 }

src/components/navBar/navBar.scss

@@ -38,6 +38,7 @@ $md-nav-bar-height: 48px;
   &:hover {
     background-color: inherit;
   }
+
 }
 
 md-nav-ink-bar {

src/components/navBar/navBar.spec.js

@@ -176,6 +176,40 @@ describe('mdNavBar', function() {
               .toBe('{"reload":true,"notify":true}');
         });
 
+      it('should set the disabled attribute', function () {
+          create('<md-nav-bar>' +
+              '  <md-nav-item md-nav-href="#1" name="tab1">' +
+              '    tab1' +
+              '  </md-nav-item>' +
+              '  <md-nav-item md-nav-href="#2" name="tab2" disabled>' +
+              '    tab2' +
+              '  </md-nav-item>' +
+              '</md-nav-bar>');
+          $timeout(function(){
+            var tabCtrl = getTabCtrl('tab2');
+            expect(tabCtrl.disabled).toBe(true);
+          });
+      });
+
+      it('should observe the disabled attribute', function () {
+          $scope.tabDisabled = false;
+          create('<md-nav-bar>' +
+              '  <md-nav-item md-nav-href="#1" name="tab1">' +
+              '    tab1' +
+              '  </md-nav-item>' +
+              '  <md-nav-item md-nav-href="#2" name="tab2" ng-disabled="tabDisabled">' +
+              '    tab2' +
+              '  </md-nav-item>' +
+              '</md-nav-bar>');
+          $timeout(function(){
+            var tabCtrl = getTabCtrl('tab2');
+            expect(tabCtrl.disabled).toBe(false);
+            $scope.tabDisabled = true;
+            $scope.$apply();
+            expect(tabCtrl.disabled).toBe(true);
+          });
+      });
+
     it('does not update tabs if tab controller is undefined', function() {
       $scope.selectedTabRoute = 'tab1';