feat(accordion): support is-disabled state

Closes #1126

src/accordion/accordion.js

@@ -35,7 +35,7 @@ angular.module('ui.bootstrap.accordion', ['ui.bootstrap.collapse'])
   this.removeGroup = function(group) {
     var index = this.groups.indexOf(group);
     if ( index !== -1 ) {
-      this.groups.splice(this.groups.indexOf(group), 1);
+      this.groups.splice(index, 1);
     }
   };
 
@@ -63,7 +63,8 @@ angular.module('ui.bootstrap.accordion', ['ui.bootstrap.collapse'])
     templateUrl:'template/accordion/accordion-group.html',
     scope: { 
       heading: '@',               // Interpolate the heading attribute onto this scope
-      isOpen: '=?'
+      isOpen: '=?',
+      isDisabled: '=?'
     },
     controller: function() {
       this.setHeading = function(element) {
@@ -78,6 +79,12 @@ angular.module('ui.bootstrap.accordion', ['ui.bootstrap.collapse'])
           accordionCtrl.closeOthers(scope);
         }
       });
+
+      scope.toggleOpen = function() {
+        if ( !scope.isDisabled ) {
+          scope.isOpen = !scope.isOpen;
+        }
+      };
     }
   };
 })

src/accordion/docs/demo.html

@@ -1,11 +1,15 @@
 <div ng-controller="AccordionDemoCtrl">
+  <p>
+    <button class="btn btn-default btn-sm" ng-click="status.open = !status.open">Toggle last panel</button>
+    <button class="btn btn-default btn-sm" ng-click="status.isFirstDisabled = ! status.isFirstDisabled">Enable / Disable first panel</button>
+  </p>
+
   <label class="checkbox">
     <input type="checkbox" ng-model="oneAtATime">
     Open only one at a time
   </label>
-
-  <accordion close-others="oneAtATime" ng-init="isFirstOpen = true">
-    <accordion-group heading="Static Header, initially expanded" is-open="isFirstOpen">
+  <accordion close-others="oneAtATime">
+    <accordion-group heading="Static Header, initially expanded" is-open="status.isFirstOpen" is-disabled="status.isFirstDisabled">
       This content is straight in the template.
     </accordion-group>
     <accordion-group heading="{{group.title}}" ng-repeat="group in groups">
@@ -16,9 +20,9 @@
         <button class="btn btn-default btn-sm" ng-click="addItem()">Add Item</button>
         <div ng-repeat="item in items">{{item}}</div>
     </accordion-group>
-    <accordion-group is-open="isopen">
+    <accordion-group is-open="status.open">
         <accordion-heading>
-            I can have markup, too! <i class="pull-right glyphicon" ng-class="{'glyphicon-chevron-down': isopen, 'glyphicon-chevron-right': !isopen}"></i>
+            I can have markup, too! <i class="pull-right glyphicon" ng-class="{'glyphicon-chevron-down': status.open, 'glyphicon-chevron-right': !status.open}"></i>
         </accordion-heading>
         This is just some content to illustrate fancy headings.
     </accordion-group>

src/accordion/docs/demo.js

@@ -18,4 +18,9 @@ function AccordionDemoCtrl($scope) {
     var newItemNo = $scope.items.length + 1;
     $scope.items.push('Item ' + newItemNo);
   };
+
+  $scope.status = {
+    isFirstOpen: true,
+    isFirstDisabled: false
+  };
 }

src/accordion/test/accordion.spec.js

@@ -305,6 +305,42 @@ describe('accordion', function () {
         expect(scope.groups[0].open).toBe(false);
       });
     });
+
+    describe('`is-disabled` attribute', function() {
+      var groupBody;
+      beforeEach(function () {
+        var tpl =
+          '<accordion>' +
+            '<accordion-group heading="title 1" is-disabled="disabled">Content 1</accordion-group>' +
+            '</accordion>';
+        element = angular.element(tpl);
+        scope.disabled = true;
+        $compile(element)(scope);
+        scope.$digest();
+        groups = element.find('.panel');
+        groupBody = findGroupBody(0);
+      });
+
+      it('should open the panel with isOpen set to true', function () {
+        expect(groupBody.scope().isOpen).toBeFalsy();
+      });
+
+      it('should not toggle if disabled', function() {
+        findGroupLink(0).click();
+        scope.$digest();
+        expect(groupBody.scope().isOpen).toBeFalsy();
+      });
+
+      it('should toggle after enabling', function() {
+        scope.disabled = false;
+        scope.$digest();
+        expect(groupBody.scope().isOpen).toBeFalsy();
+
+        findGroupLink(0).click();
+        scope.$digest();
+        expect(groupBody.scope().isOpen).toBeTruthy();
+      });
+    });
 
     describe('accordion-heading element', function() {
       beforeEach(function() {

template/accordion/accordion-group.html

@@ -1,7 +1,7 @@
 <div class="panel panel-default">
   <div class="panel-heading">
     <h4 class="panel-title">
-      <a class="accordion-toggle" ng-click="isOpen = !isOpen" accordion-transclude="heading">{{heading}}</a>
+      <a class="accordion-toggle" ng-click="toggleOpen()" accordion-transclude="heading"><span ng-class="{'text-muted': isDisabled}">{{heading}}</span></a>
     </h4>
   </div>
   <div class="panel-collapse" collapse="!isOpen">