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

Commit

Permalink
feat(accordion): use uib- prefix
Browse files Browse the repository at this point in the history 
Closes #4389
  • Loading branch information
@Foxandxss @wesleycho
Foxandxss authored and wesleycho committed Sep 10, 2015
1 parent eb2366f commit 0328a76
Show file tree
Hide file tree
Showing 5 changed files with 262 additions and 106 deletions.
133 changes: 120 additions & 13 deletions src/accordion/accordion.js
View file
Original file line number Diff line number Diff line change
@@ -1,10 +1,10 @@
angular.module('ui.bootstrap.accordion', ['ui.bootstrap.collapse'])

.constant('accordionConfig', {
.constant('uibAccordionConfig', {
closeOthers: true
})

.controller('AccordionController', ['$scope', '$attrs', 'accordionConfig', function($scope, $attrs, accordionConfig) {
.controller('UibAccordionController', ['$scope', '$attrs', 'uibAccordionConfig', function($scope, $attrs, accordionConfig) {
// This array keeps track of the accordion groups
this.groups = [];

Expand Down Expand Up @@ -43,10 +43,10 @@ angular.module('ui.bootstrap.accordion', ['ui.bootstrap.collapse'])

// The accordion directive simply sets up the directive controller
// and adds an accordion CSS class to itself element.
.directive('accordion', function() {
.directive('uibAccordion', function() {
return {
restrict: 'EA',
controller: 'AccordionController',
controller: 'UibAccordionController',
controllerAs: 'accordion',
transclude: true,
replace: false,
Expand All @@ -57,9 +57,9 @@ angular.module('ui.bootstrap.accordion', ['ui.bootstrap.collapse'])
})

// The accordion-group directive indicates a block of html that will expand and collapse in an accordion
.directive('accordionGroup', function() {
.directive('uibAccordionGroup', function() {
return {
require: '^accordion', // We need this directive to be inside an accordion
require: '^uibAccordion', // We need this directive to be inside an accordion
restrict: 'EA',
transclude: true, // It transcludes the contents of the directive into the template
replace: true, // The element containing the directive will be replaced with the template
Expand Down Expand Up @@ -103,13 +103,13 @@ angular.module('ui.bootstrap.accordion', ['ui.bootstrap.collapse'])
// <accordion-group>
// <accordion-heading>Heading containing HTML - <img src="..."></accordion-heading>
// </accordion-group>
.directive('accordionHeading', function() {
.directive('uibAccordionHeading', function() {
return {
restrict: 'EA',
transclude: true, // Grab the contents to be used as the heading
template: '', // In effect remove this element!
replace: true,
require: '^accordionGroup',
require: '^uibAccordionGroup',
link: function(scope, element, attr, accordionGroupCtrl, transclude) {
// Pass the heading to the accordion-group controller
// so that it can be transcluded into the right place in the template
Expand All @@ -125,18 +125,125 @@ angular.module('ui.bootstrap.accordion', ['ui.bootstrap.collapse'])
// <div class="accordion-heading" ><a ... accordion-transclude="heading">...</a></div>
// ...
// </div>
.directive('accordionTransclude', function() {
.directive('uibAccordionTransclude', function() {
return {
require: '^accordionGroup',
require: ['?^uibAccordionGroup', '?^accordionGroup'],
link: function(scope, element, attr, controller) {
scope.$watch(function() { return controller[attr.accordionTransclude]; }, function(heading) {
controller = controller[0] ? controller[0] : controller[1]; // Delete after we remove deprecation
scope.$watch(function() { return controller[attr.uibAccordionTransclude]; }, function(heading) {
if (heading) {
element.find('span').html('');
element.find('span').append(heading);
}
});
}
};
})
});

/* Deprecated accordion below */

angular.module('ui.bootstrap.accordion')

.value('$accordionSuppressWarning', false)

.directive('accordion', ['$log', '$accordionSuppressWarning', function($log, $accordionSuppressWarning) {
return {
restrict: 'EA',
controller: 'UibAccordionController',
controllerAs: 'accordion',
transclude: true,
replace: false,
templateUrl: function(element, attrs) {
return attrs.templateUrl || 'template/accordion/accordion.html';
},
link: function() {
if (!$accordionSuppressWarning) {
$log.warn('accordion is now deprecated. Use uib-accordion instead.');
}
}
};
}])

.directive('accordionGroup', ['$log', '$accordionSuppressWarning', function($log, $accordionSuppressWarning) {
return {
require: '^accordion', // We need this directive to be inside an accordion
restrict: 'EA',
transclude: true, // It transcludes the contents of the directive into the template
replace: true, // The element containing the directive will be replaced with the template
templateUrl: function(element, attrs) {
return attrs.templateUrl || 'template/accordion/accordion-group.html';
},
scope: {
heading: '@', // Interpolate the heading attribute onto this scope
isOpen: '=?',
isDisabled: '=?'
},
controller: function() {
this.setHeading = function(element) {
this.heading = element;
};
},
link: function(scope, element, attrs, accordionCtrl) {
if (!$accordionSuppressWarning) {
$log.warn('accordion-group is now deprecated. Use uib-accordion-group instead.');
}

accordionCtrl.addGroup(scope);

scope.openClass = attrs.openClass || 'panel-open';
scope.panelClass = attrs.panelClass;
scope.$watch('isOpen', function(value) {
element.toggleClass(scope.openClass, !!value);
if (value) {
accordionCtrl.closeOthers(scope);
}
});

scope.toggleOpen = function($event) {
if (!scope.isDisabled) {
if (!$event || $event.which === 32) {
scope.isOpen = !scope.isOpen;
}
}
};
}
};
}])

.directive('accordionHeading', ['$log', '$accordionSuppressWarning', function($log, $accordionSuppressWarning) {
return {
restrict: 'EA',
transclude: true, // Grab the contents to be used as the heading
template: '', // In effect remove this element!
replace: true,
require: '^accordionGroup',
link: function(scope, element, attr, accordionGroupCtrl, transclude) {
if (!$accordionSuppressWarning) {
$log.warn('accordion-heading is now deprecated. Use uib-accordion-heading instead.');
}
// Pass the heading to the accordion-group controller
// so that it can be transcluded into the right place in the template
// [The second parameter to transclude causes the elements to be cloned so that they work in ng-repeat]
accordionGroupCtrl.setHeading(transclude(scope, angular.noop));
}
};
}])

.directive('accordionTransclude', ['$log', '$accordionSuppressWarning', function($log, $accordionSuppressWarning) {
return {
require: '^accordionGroup',
link: function(scope, element, attr, controller) {
if (!$accordionSuppressWarning) {
$log.warn('accordion-transclude is now deprecated. Use uib-accordion-transclude instead.');
}

scope.$watch(function() { return controller[attr.accordionTransclude]; }, function(heading) {
if (heading) {
element.find('span').html('');
element.find('span').append(heading);
}
});
}
};
}]);

;
38 changes: 19 additions & 19 deletions src/accordion/docs/demo.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,11 +3,11 @@
<div class="panel {{panelClass || 'panel-default'}}">
<div class="panel-heading">
<h4 class="panel-title" style="color:#fa39c3">
<a href tabindex="0" class="accordion-toggle" ng-click="toggleOpen()" accordion-transclude="heading"><span
<a href tabindex="0" class="accordion-toggle" ng-click="toggleOpen()" uib-accordion-transclude="heading"><span
ng-class="{'text-muted': isDisabled}">{{heading}}</span></a>
</h4>
</div>
<div class="panel-collapse collapse" collapse="!isOpen">
<div class="panel-collapse collapse" uib-collapse="!isOpen">
<div class="panel-body" style="text-align: right" ng-transclude></div>
</div>
</div>
Expand All @@ -24,30 +24,30 @@ <h4 class="panel-title" style="color:#fa39c3">
Open only one at a time
</label>
</div>
<accordion close-others="oneAtATime">
<accordion-group heading="Static Header, initially expanded" is-open="status.isFirstOpen" is-disabled="status.isFirstDisabled">
<uib-accordion close-others="oneAtATime">
<uib-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">
</uib-accordion-group>
<uib-accordion-group heading="{{group.title}}" ng-repeat="group in groups">
{{group.content}}
</accordion-group>
<accordion-group heading="Dynamic Body Content">
<p>The body of the accordion group grows to fit the contents</p>
</uib-accordion-group>
<uib-accordion-group heading="Dynamic Body Content">
<p>The body of the uib-accordion group grows to fit the contents</p>
<button type="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 heading="Custom template" template-url="group-template.html">
</uib-accordion-group>
<uib-accordion-group heading="Custom template" template-url="group-template.html">
Hello
</accordion-group>
<accordion-group heading="Delete account" panel-class="panel-danger">
</uib-accordion-group>
<uib-accordion-group heading="Delete account" panel-class="panel-danger">
<p>Please, to delete your account, click the button below</p>
<button class="btn btn-danger">Delete</button>
</accordion-group>
<accordion-group is-open="status.open">
<accordion-heading>
</uib-accordion-group>
<uib-accordion-group is-open="status.open">
<uib-accordion-heading>
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>
</uib-accordion-heading>
This is just some content to illustrate fancy headings.
</accordion-group>
</accordion>
</uib-accordion-group>
</uib-accordion>
</div>
6 changes: 3 additions & 3 deletions src/accordion/docs/readme.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,14 +2,14 @@ The **accordion directive** builds on top of the collapse directive to provide a

The body of each accordion group is transcluded into the body of the collapsible element.

### Accordion Settings
### uib-accordion Settings

* `close-others` (Defaults: false) :
Control whether expanding an item will cause the other items to close
* `template-url` (Defaults: `template/accordion/accordion.html`) :
Add the ability to override the template used on the component.

### Accordion Group Settings
### uib-accordion Group Settings

* `is-disabled` <i class="glyphicon glyphicon-eye-open"></i> (Defaults: false) :
Whether the accordion group is disabled or not.
Expand All @@ -24,4 +24,4 @@ The body of each accordion group is transcluded into the body of the collapsible

### Accordion heading

Instead of the `heading` attribute on the `accordion-group`, you can use an `accordion-heading` element inside a group that will be used as the group's header.
Instead of the `heading` attribute on the `uib-accordion-group`, you can use an `uib-accordion-heading` element inside a group that will be used as the group's header.
Loading

0 comments on commit 0328a76

Please sign in to comment.