Skip to content
This repository has been archived by the owner on May 29, 2019. It is now read-only.

Commit

Permalink
fix(accordion): apply disabled style to accordion-header
Browse files Browse the repository at this point in the history 
- Disable the header if `is-disabled` is true

Closes #3599
Fixes #3233
  • Loading branch information
@wesleycho
rvanbaalen authored and wesleycho committed Jul 31, 2015
1 parent 577b2a2 commit 0643fd3
Show file tree
Hide file tree
Showing 2 changed files with 61 additions and 33 deletions.
4 changes: 2 additions & 2 deletions src/accordion/accordion.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -121,8 +121,8 @@ angular.module('ui.bootstrap.accordion', ['ui.bootstrap.collapse'])
link: function(scope, element, attr, controller) {
scope.$watch(function() { return controller[attr.accordionTransclude]; }, function(heading) {
if ( heading ) {
element.html('');
element.append(heading);
element.find('span').html('');
element.find('span').append(heading);
}
});
}
Expand Down
90 changes: 59 additions & 31 deletions src/accordion/test/accordion.spec.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -126,10 +126,10 @@ describe('accordion', function () {
describe('with static panels', function () {
beforeEach(function () {
var tpl =
'<accordion>' +
'<accordion-group heading="title 1">Content 1</accordion-group>' +
'<accordion-group heading="title 2">Content 2</accordion-group>' +
'</accordion>';
'<accordion>' +
'<accordion-group heading="title 1">Content 1</accordion-group>' +
'<accordion-group heading="title 2">Content 2</accordion-group>' +
'</accordion>';
element = angular.element(tpl);
$compile(element)(scope);
scope.$digest();
Expand Down Expand Up @@ -172,9 +172,9 @@ describe('accordion', function () {
var model;
beforeEach(function () {
var tpl =
'<accordion>' +
'<accordion-group ng-repeat="group in groups" heading="{{group.name}}">{{group.content}}</accordion-group>' +
'</accordion>';
'<accordion>' +
'<accordion-group ng-repeat="group in groups" heading="{{group.name}}">{{group.content}}</accordion-group>' +
'</accordion>';
element = angular.element(tpl);
model = [
{name: 'title 1', content: 'Content 1'},
Expand Down Expand Up @@ -217,10 +217,10 @@ describe('accordion', function () {
describe('is-open attribute', function() {
beforeEach(function () {
var tpl =
'<accordion>' +
'<accordion-group heading="title 1" is-open="open.first">Content 1</accordion-group>' +
'<accordion-group heading="title 2" is-open="open.second">Content 2</accordion-group>' +
'</accordion>';
'<accordion>' +
'<accordion-group heading="title 1" is-open="open.first">Content 1</accordion-group>' +
'<accordion-group heading="title 2" is-open="open.second">Content 2</accordion-group>' +
'</accordion>';
element = angular.element(tpl);
scope.open = { first: false, second: true };
$compile(element)(scope);
Expand All @@ -247,10 +247,10 @@ describe('accordion', function () {
describe('is-open attribute with dynamic content', function() {
beforeEach(function () {
var tpl =
'<accordion>' +
'<accordion-group heading="title 1" is-open="open1"><div ng-repeat="item in items">{{item}}</div></accordion-group>' +
'<accordion-group heading="title 2" is-open="open2">Static content</accordion-group>' +
'</accordion>';
'<accordion>' +
'<accordion-group heading="title 1" is-open="open1"><div ng-repeat="item in items">{{item}}</div></accordion-group>' +
'<accordion-group heading="title 2" is-open="open2">Static content</accordion-group>' +
'</accordion>';
element = angular.element(tpl);
scope.items = ['Item 1', 'Item 2', 'Item 3'];
scope.open1 = true;
Expand All @@ -274,9 +274,9 @@ describe('accordion', function () {
describe('is-open attribute with dynamic groups', function () {
beforeEach(function () {
var tpl =
'<accordion>' +
'<accordion-group ng-repeat="group in groups" heading="{{group.name}}" is-open="group.open">{{group.content}}</accordion-group>' +
'</accordion>';
'<accordion>' +
'<accordion-group ng-repeat="group in groups" heading="{{group.name}}" is-open="group.open">{{group.content}}</accordion-group>' +
'</accordion>';
element = angular.element(tpl);
scope.groups = [
{name: 'title 1', content: 'Content 1', open: false},
Expand Down Expand Up @@ -310,9 +310,9 @@ describe('accordion', function () {
var groupBody;
beforeEach(function () {
var tpl =
'<accordion>' +
'<accordion-group heading="title 1" is-disabled="disabled">Content 1</accordion-group>' +
'</accordion>';
'<accordion>' +
'<accordion-group heading="title 1" is-disabled="disabled">Content 1</accordion-group>' +
'</accordion>';
element = angular.element(tpl);
scope.disabled = true;
$compile(element)(scope);
Expand Down Expand Up @@ -340,17 +340,38 @@ describe('accordion', function () {
scope.$digest();
expect(groupBody.scope().isOpen).toBeTruthy();
});

it('should have text-muted styling', function () {
expect(findGroupLink(0).find('span:first')).toHaveClass('text-muted');
});
});

// This is re-used in both the accordion-heading element and the accordion-heading attribute tests
function isDisabledStyleCheck() {
var tpl =
'<accordion ng-init="a = [1,2,3]">' +
'<accordion-group heading="I get overridden" is-disabled="true">' +
'<accordion-heading>Heading Element <span ng-repeat="x in a">{{x}}</span> </accordion-heading>' +
'Body' +
'</accordion-group>' +
'</accordion>';
scope.disabled = true;
element = $compile(tpl)(scope);
scope.$digest();
groups = element.find('.panel');

expect(findGroupLink(0).find('span').hasClass('text-muted')).toBe(true);
}

describe('accordion-heading element', function() {
beforeEach(function() {
var tpl =
'<accordion ng-init="a = [1,2,3]">' +
'<accordion-group heading="I get overridden">' +
'<accordion ng-init="a = [1,2,3]">' +
'<accordion-group heading="I get overridden">' +
'<accordion-heading>Heading Element <span ng-repeat="x in a">{{x}}</span> </accordion-heading>' +
'Body' +
'</accordion-group>' +
'</accordion>';
'</accordion-group>' +
'</accordion>';
element = $compile(tpl)(scope);
scope.$digest();
groups = element.find('.panel');
Expand All @@ -359,20 +380,25 @@ describe('accordion', function () {
expect(findGroupLink(0).text()).toBe('Heading Element 123 ');
});
it('attaches the same scope to the transcluded heading and body', function() {
expect(findGroupLink(0).find('span').scope().$id).toBe(findGroupBody(0).find('span').scope().$id);
expect(findGroupLink(0).find('span.ng-scope').scope().$id).toBe(findGroupBody(0).find('span').scope().$id);
});
it('should wrap the transcluded content in a span', function () {
expect(findGroupLink(0).find('span:first').length).toEqual(1);
});

it('should have disabled styling when is-disabled is true', isDisabledStyleCheck);

});

describe('accordion-heading attribute', function() {
beforeEach(function() {
var tpl =
'<accordion ng-init="a = [1,2,3]">' +
'<accordion-group heading="I get overridden">' +
'<accordion ng-init="a = [1,2,3]">' +
'<accordion-group heading="I get overridden">' +
'<div accordion-heading>Heading Element <span ng-repeat="x in a">{{x}}</span> </div>' +
'Body' +
'</accordion-group>' +
'</accordion>';
'</accordion-group>' +
'</accordion>';
element = $compile(tpl)(scope);
scope.$digest();
groups = element.find('.panel');
Expand All @@ -381,9 +407,11 @@ describe('accordion', function () {
expect(findGroupLink(0).text()).toBe('Heading Element 123 ');
});
it('attaches the same scope to the transcluded heading and body', function() {
expect(findGroupLink(0).find('span').scope().$id).toBe(findGroupBody(0).find('span').scope().$id);
expect(findGroupLink(0).find('span.ng-scope').scope().$id).toBe(findGroupBody(0).find('span').scope().$id);
});

it('should have disabled styling when is-disabled is true', isDisabledStyleCheck);

});

describe('accordion-heading, with repeating accordion-groups', function() {
Expand Down

0 comments on commit 0643fd3

Please sign in to comment.