| @@ 167-211 (lines=45) @@ | ||
| 164 | }) |
|
| 165 | ||
| 166 | // The accordion-group directive indicates a block of html that will expand and collapse in an accordion |
|
| 167 | .directive('uibAccordionGroup', function() { |
|
| 168 | return { |
|
| 169 | require: '^uibAccordion', // We need this directive to be inside an accordion |
|
| 170 | transclude: true, // It transcludes the contents of the directive into the template |
|
| 171 | replace: true, // The element containing the directive will be replaced with the template |
|
| 172 | templateUrl: function(element, attrs) { |
|
| 173 | return attrs.templateUrl || 'uib/template/accordion/accordion-group.html'; |
|
| 174 | }, |
|
| 175 | scope: { |
|
| 176 | heading: '@', // Interpolate the heading attribute onto this scope |
|
| 177 | panelClass: '@?', // Ditto with panelClass |
|
| 178 | isOpen: '=?', |
|
| 179 | isDisabled: '=?' |
|
| 180 | }, |
|
| 181 | controller: function() { |
|
| 182 | this.setHeading = function(element) { |
|
| 183 | this.heading = element; |
|
| 184 | }; |
|
| 185 | }, |
|
| 186 | link: function(scope, element, attrs, accordionCtrl) { |
|
| 187 | accordionCtrl.addGroup(scope); |
|
| 188 | ||
| 189 | scope.openClass = attrs.openClass || 'panel-open'; |
|
| 190 | scope.panelClass = attrs.panelClass || 'panel-default'; |
|
| 191 | scope.$watch('isOpen', function(value) { |
|
| 192 | element.toggleClass(scope.openClass, !!value); |
|
| 193 | if (value) { |
|
| 194 | accordionCtrl.closeOthers(scope); |
|
| 195 | } |
|
| 196 | }); |
|
| 197 | ||
| 198 | scope.toggleOpen = function($event) { |
|
| 199 | if (!scope.isDisabled) { |
|
| 200 | if (!$event || $event.which === 32) { |
|
| 201 | scope.isOpen = !scope.isOpen; |
|
| 202 | } |
|
| 203 | } |
|
| 204 | }; |
|
| 205 | ||
| 206 | var id = 'accordiongroup-' + scope.$id + '-' + Math.floor(Math.random() * 10000); |
|
| 207 | scope.headingId = id + '-tab'; |
|
| 208 | scope.panelId = id + '-panel'; |
|
| 209 | } |
|
| 210 | }; |
|
| 211 | }) |
|
| 212 | ||
| 213 | // Use accordion-heading below an accordion-group to provide a heading containing HTML |
|
| 214 | .directive('uibAccordionHeading', function() { |
|
| @@ 166-210 (lines=45) @@ | ||
| 163 | }) |
|
| 164 | ||
| 165 | // The accordion-group directive indicates a block of html that will expand and collapse in an accordion |
|
| 166 | .directive('uibAccordionGroup', function() { |
|
| 167 | return { |
|
| 168 | require: '^uibAccordion', // We need this directive to be inside an accordion |
|
| 169 | transclude: true, // It transcludes the contents of the directive into the template |
|
| 170 | replace: true, // The element containing the directive will be replaced with the template |
|
| 171 | templateUrl: function(element, attrs) { |
|
| 172 | return attrs.templateUrl || 'uib/template/accordion/accordion-group.html'; |
|
| 173 | }, |
|
| 174 | scope: { |
|
| 175 | heading: '@', // Interpolate the heading attribute onto this scope |
|
| 176 | panelClass: '@?', // Ditto with panelClass |
|
| 177 | isOpen: '=?', |
|
| 178 | isDisabled: '=?' |
|
| 179 | }, |
|
| 180 | controller: function() { |
|
| 181 | this.setHeading = function(element) { |
|
| 182 | this.heading = element; |
|
| 183 | }; |
|
| 184 | }, |
|
| 185 | link: function(scope, element, attrs, accordionCtrl) { |
|
| 186 | accordionCtrl.addGroup(scope); |
|
| 187 | ||
| 188 | scope.openClass = attrs.openClass || 'panel-open'; |
|
| 189 | scope.panelClass = attrs.panelClass || 'panel-default'; |
|
| 190 | scope.$watch('isOpen', function(value) { |
|
| 191 | element.toggleClass(scope.openClass, !!value); |
|
| 192 | if (value) { |
|
| 193 | accordionCtrl.closeOthers(scope); |
|
| 194 | } |
|
| 195 | }); |
|
| 196 | ||
| 197 | scope.toggleOpen = function($event) { |
|
| 198 | if (!scope.isDisabled) { |
|
| 199 | if (!$event || $event.which === 32) { |
|
| 200 | scope.isOpen = !scope.isOpen; |
|
| 201 | } |
|
| 202 | } |
|
| 203 | }; |
|
| 204 | ||
| 205 | var id = 'accordiongroup-' + scope.$id + '-' + Math.floor(Math.random() * 10000); |
|
| 206 | scope.headingId = id + '-tab'; |
|
| 207 | scope.panelId = id + '-panel'; |
|
| 208 | } |
|
| 209 | }; |
|
| 210 | }) |
|
| 211 | ||
| 212 | // Use accordion-heading below an accordion-group to provide a heading containing HTML |
|
| 213 | .directive('uibAccordionHeading', function() { |
|