Skip to content

Commit 191e5b4

Browse files
DomainvDomainv
authored
feat(common): add animation for collapse and accordion components (#5146)
* feat(common): add animation to collapse and accordion
1 parent f5be2db commit 191e5b4

25 files changed

+295
-72
lines changed

‎demo/src/app/app.module.ts

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,7 @@ import { BrowserModule } from '@angular/platform-browser';
55
import { RouterModule } from '@angular/router';
66
import { NgxPageScrollModule } from 'ngx-page-scroll';
77
import { BsDropdownModule } from 'ngx-bootstrap/dropdown';
8+
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
89

910
import { environment } from '../environments/environment';
1011
import { ngdoc } from '../ng-api-doc';
@@ -21,6 +22,7 @@ import { ThemeStorage } from './theme/theme-storage';
2122
@NgModule({
2223
declarations: [AppComponent, DocumentationComponent, TopMenuComponent, LandingComponent],
2324
imports: [
25+
BrowserAnimationsModule,
2426
DocsModule,
2527
FormsModule,
2628
HttpClientModule,

‎demo/src/app/components/+accordion/accordion-section.list.ts

Lines changed: 13 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,13 @@
1+
import { DemoAccordionAnimatedComponent } from './demos/animated/animated';
12
import { DemoAccordionBasicComponent } from './demos/basic/basic';
3+
import { DemoAccordionConfigComponent } from './demos/config/config';
4+
import { DemoAccordionCustomHTMLComponent } from './demos/custom-html/custom-html';
25
import { DemoAccordionDisabledComponent } from './demos/disabled/disabled';
36
import { DemoAccordionDynamicComponent } from './demos/dymanic/dynamic';
7+
import { DemoAccordionManualToggleComponent } from './demos/manual-toggle/manual-toggle';
48
import { DemoAccordionOneAtATimeComponent } from './demos/one-at-a-time/one-at-a-time';
5-
import { DemoAccordionStylingComponent } from './demos/styling/styling';
6-
import { DemoAccordionConfigComponent } from './demos/config/config';
79
import { DemoAccordionOpenEventComponent } from './demos/open-event/open-event';
8-
import { DemoAccordionCustomHTMLComponent } from './demos/custom-html/custom-html';
9-
import { DemoAccordionManualToggleComponent } from './demos/manual-toggle/manual-toggle';
10+
import { DemoAccordionStylingComponent } from './demos/styling/styling';
1011

1112
import { ContentSection } from '../../docs/models/content-section.model';
1213
import { DemoTopSectionComponent } from '../../docs/demo-section-components/demo-top-section/index';
@@ -43,6 +44,14 @@ export const demoComponentContent: ContentSection[] = [
4344
html: require('!!raw-loader?lang=markup!./demos/basic/basic.html'),
4445
outlet: DemoAccordionBasicComponent
4546
},
47+
{
48+
title: 'With animation',
49+
anchor: 'animated-accordion',
50+
description: `<p>Use input property or config property <code>isAnimated</code> to enable/disable animation</p>`,
51+
component: require('!!raw-loader?lang=typescript!./demos/animated/animated'),
52+
html: require('!!raw-loader?lang=markup!./demos/animated/animated.html'),
53+
outlet: DemoAccordionAnimatedComponent
54+
},
4655
{
4756
title: 'Group opening event',
4857
anchor: 'open-event',

‎demo/src/app/components/+accordion/demos/animated/animated.html

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
<accordion [isAnimated]="true">
2+
<accordion-group heading="Static Header">
3+
This content is straight in the template.
4+
</accordion-group>
5+
<accordion-group heading="Another group">
6+
<p>Some content</p>
7+
</accordion-group>
8+
<accordion-group heading="Another group">
9+
<p>Some content</p>
10+
</accordion-group>
11+
<accordion-group heading="Another group">
12+
<p>Some content</p>
13+
</accordion-group>
14+
</accordion>

‎demo/src/app/components/+accordion/demos/animated/animated.ts

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
import { Component } from '@angular/core';
2+
3+
@Component({
4+
selector: 'demo-accordion-animation',
5+
templateUrl: './animated.html'
6+
})
7+
export class DemoAccordionAnimatedComponent {}

‎demo/src/app/components/+accordion/demos/config/config.html

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
<accordion>
1+
<accordion [isAnimated]="true">
22
<accordion-group heading="Header">
33
This content is straight in the template.
44
</accordion-group>

‎demo/src/app/components/+accordion/demos/index.ts

Lines changed: 16 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -1,25 +1,27 @@
1+
import { DemoAccordionAnimatedComponent } from './animated/animated';
12
import { DemoAccordionBasicComponent } from './basic/basic';
2-
import { DemoAccordionDisabledComponent } from './disabled/disabled';
3-
import { DemoAccordionStylingComponent } from './styling/styling';
4-
import { DemoAccordionOneAtATimeComponent } from './one-at-a-time/one-at-a-time';
5-
import { DemoAccordionDynamicComponent } from './dymanic/dynamic';
63
import { DemoAccordionConfigComponent } from './config/config';
7-
import { DemoAccordionOpenEventComponent } from './open-event/open-event';
84
import { DemoAccordionCustomHTMLComponent } from './custom-html/custom-html';
9-
import { DemoAccordionOpenedComponent } from './opened/opened';
10-
import { DemoAccordionManualToggleComponent } from './manual-toggle/manual-toggle';
5+
import { DemoAccordionDisabledComponent } from './disabled/disabled';
116
import { DemoAccordionDynamicBodyComponent } from './dynamic-body/dynamic-body';
7+
import { DemoAccordionDynamicComponent } from './dymanic/dynamic';
8+
import { DemoAccordionManualToggleComponent } from './manual-toggle/manual-toggle';
9+
import { DemoAccordionOneAtATimeComponent } from './one-at-a-time/one-at-a-time';
10+
import { DemoAccordionOpenedComponent } from './opened/opened';
11+
import { DemoAccordionOpenEventComponent } from './open-event/open-event';
12+
import { DemoAccordionStylingComponent } from './styling/styling';
1213

1314
export const DEMO_COMPONENTS = [
15+
DemoAccordionAnimatedComponent,
1416
DemoAccordionBasicComponent,
15-
DemoAccordionDisabledComponent,
16-
DemoAccordionStylingComponent,
17-
DemoAccordionOneAtATimeComponent,
18-
DemoAccordionDynamicComponent,
1917
DemoAccordionConfigComponent,
20-
DemoAccordionOpenEventComponent,
2118
DemoAccordionCustomHTMLComponent,
22-
DemoAccordionOpenedComponent,
19+
DemoAccordionDisabledComponent,
20+
DemoAccordionDynamicBodyComponent,
21+
DemoAccordionDynamicComponent,
2322
DemoAccordionManualToggleComponent,
24-
DemoAccordionDynamicBodyComponent
23+
DemoAccordionOneAtATimeComponent,
24+
DemoAccordionOpenedComponent,
25+
DemoAccordionOpenEventComponent,
26+
DemoAccordionStylingComponent
2527
];

‎demo/src/app/components/+collapse/collapse-section.list.ts

Lines changed: 16 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,13 @@
1+
import { ApiSectionsComponent } from '../../docs/demo-section-components/demo-api-section/index';
2+
import { CollapseDemoAnimatedComponent } from './demos/animated/animated';
13
import { CollapseDemoComponent } from './demos/basic/basic';
2-
import { ToggleManualDemoComponent } from './demos/toggle-manual/toggle-manual';
34
import { CollapseDemoEventsComponent } from './demos/events/events';
4-
55
import { ContentSection } from '../../docs/models/content-section.model';
6+
import { DemoAccessibilityComponent } from './demos/accessibility/accessibility';
67
import { DemoTopSectionComponent } from '../../docs/demo-section-components/demo-top-section/index';
78
import { ExamplesComponent } from '../../docs/demo-section-components/demo-examples-section/index';
8-
import { ApiSectionsComponent } from '../../docs/demo-section-components/demo-api-section/index';
9-
import { DemoAccessibilityComponent } from './demos/accessibility/accessibility';
109
import { InlineDisplayDemoComponent } from './demos/inline-display/inline-display';
10+
import { ToggleManualDemoComponent } from './demos/toggle-manual/toggle-manual';
1111

1212
import { NgApiDocComponent } from '../../docs/api-docs';
1313

@@ -32,13 +32,23 @@ export const demoComponentContent: ContentSection[] = [
3232
html: require('!!raw-loader?lang=markup!./demos/basic/basic.html'),
3333
outlet: CollapseDemoComponent
3434
},
35+
{
36+
title: 'With animation',
37+
anchor: 'animated',
38+
component: require('!!raw-loader?lang=typescript!./demos/animated/animated'),
39+
html: require('!!raw-loader?lang=markup!./demos/animated/animated.html'),
40+
description: `You can enable animation via <code>isAnimated</code> input option`,
41+
outlet: CollapseDemoAnimatedComponent
42+
},
3543
{
3644
title: 'Events',
3745
anchor: 'events',
3846
component: require('!!raw-loader?lang=typescript!./demos/events/events'),
3947
html: require('!!raw-loader?lang=markup!./demos/events/events.html'),
40-
description: `Collapse directive exposes 2 events: <code>collapsed</code>, that fires when a content was hidden,
41-
and <code>expanded</code>, that fires when a content was shown`,
48+
description: `Collapse directive exposes 4 events: <code>collapses</code>, that fires when a collapse was triggered (aniamtion start),
49+
<code>collapsed</code>, that fires when a content was hidden (aniamtion finished),
50+
<code>expands</code>, that fires when a expansion was triggered (animation start)
51+
and <code>expanded</code>, that fires when a content was shown\`, and <code>expanded</code>, that fires when a content was shown`,
4252
outlet: CollapseDemoEventsComponent
4353
},
4454
{

‎demo/src/app/components/+collapse/demos/animated/animated.html

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
<button type="button" class="btn btn-primary" (click)="isCollapsed = !isCollapsed"
2+
[attr.aria-expanded]="!isCollapsed" aria-controls="collapseBasic">Toggle collapse
3+
</button>
4+
<hr>
5+
<div id="collapseBasic" [collapse]="isCollapsed" [isAnimated]="true">
6+
<div class="well well-lg card card-block card-header">Some content</div>
7+
</div>

‎demo/src/app/components/+collapse/demos/animated/animated.ts

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
import { Component } from '@angular/core';
2+
3+
@Component({
4+
selector: 'collapse-demo-animation',
5+
templateUrl: './animated.html'
6+
})
7+
export class CollapseDemoAnimatedComponent {
8+
isCollapsed = false;
9+
}

‎demo/src/app/components/+collapse/demos/basic/basic.html

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,6 @@
22
[attr.aria-expanded]="!isCollapsed" aria-controls="collapseBasic">Toggle collapse
33
</button>
44
<hr>
5-
<div id="collapseBasic" [collapse]="isCollapsed" class="card card-block card-header">
6-
<div class="well well-lg">Some content</div>
5+
<div id="collapseBasic" [collapse]="isCollapsed">
6+
<div class="well well-lg card card-block card-header">Some content</div>
77
</div>

‎demo/src/app/components/+collapse/demos/events/events.html

Lines changed: 9 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,13 @@
99
</div>
1010
</div>
1111
<hr>
12-
<div id="collapseEvent" class="card card-block card-header"
13-
(collapsed)="collapsed()" (expanded)="expanded()" [collapse]="isCollapsed">
14-
<div class="well well-lg">Some content</div>
12+
<div id="collapseEvent"
13+
[isAnimated]="true"
14+
[collapse]="isCollapsed"
15+
(collapses)="collapses()"
16+
(expands)="expands()"
17+
(collapsed)="collapsed()"
18+
(expanded)="expanded()">
19+
20+
<div class="well well-lg card card-block card-header">Some content</div>
1521
</div>

‎demo/src/app/components/+collapse/demos/events/events.ts

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,15 @@ export class CollapseDemoEventsComponent {
1212
this.message = 'collapsed';
1313
}
1414

15+
collapses(): void {
16+
this.message = 'collapses';
17+
}
18+
1519
expanded(): void {
1620
this.message = 'expanded';
1721
}
22+
23+
expands(): void {
24+
this.message = 'expands';
25+
}
1826
}

‎demo/src/app/components/+collapse/demos/index.ts

Lines changed: 5 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,15 @@
1+
import { CollapseDemoAnimatedComponent } from './animated/animated';
12
import { CollapseDemoComponent } from './basic/basic';
2-
import { ToggleManualDemoComponent } from './toggle-manual/toggle-manual';
33
import { CollapseDemoEventsComponent } from './events/events';
44
import { DemoAccessibilityComponent } from './accessibility/accessibility';
55
import { InlineDisplayDemoComponent } from './inline-display/inline-display';
6+
import { ToggleManualDemoComponent } from './toggle-manual/toggle-manual';
67

78
export const DEMO_COMPONENTS = [
9+
CollapseDemoAnimatedComponent,
810
CollapseDemoComponent,
911
CollapseDemoEventsComponent,
10-
ToggleManualDemoComponent,
1112
DemoAccessibilityComponent,
12-
InlineDisplayDemoComponent
13+
InlineDisplayDemoComponent,
14+
ToggleManualDemoComponent
1315
];

‎demo/src/app/components/+collapse/demos/inline-display/inline-display.html

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,6 @@
55
aria-controls="collapseBasic">None
66
</button>
77
<hr>
8-
<div id="collapseBasic" [collapse]="!isCollapsed" #collapse="bs-collapse" class="card card-block card-header">
9-
<div class="well well-lg">Some content</div>
8+
<div id="collapseBasic" [collapse]="!isCollapsed" #collapse="bs-collapse">
9+
<div class="well well-lg card card-block card-header">Some content</div>
1010
</div>

‎demo/src/app/components/+collapse/demos/toggle-manual/toggle-manual.html

Lines changed: 2 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,6 @@
55
aria-controls="collapseManual">Hide content
66
</button>
77
<hr>
8-
<div id="collapseManual" #collapse="bs-collapse" [collapse]="isOpen"
9-
class="card card-block card-header">
10-
<div class="well well-lg">Some content</div>
8+
<div id="collapseManual" #collapse="bs-collapse" [collapse]="isOpen">
9+
<div class="well well-lg card card-block card-header">Some content</div>
1110
</div>

‎demo/src/ng-api-doc.ts

Lines changed: 39 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -33,7 +33,14 @@ export const ngdoc: any = {
3333
"description": "<p>Emits when the opened state changes</p>\n"
3434
}
3535
],
36-
"properties": [],
36+
"properties": [
37+
{
38+
"name": "isAnimated",
39+
"defaultValue": "false",
40+
"type": "boolean",
41+
"description": "<p>turn on/off animation</p>\n"
42+
}
43+
],
3744
"methods": []
3845
},
3946
"AccordionComponent": {
@@ -46,6 +53,12 @@ export const ngdoc: any = {
4653
"name": "closeOthers",
4754
"type": "boolean",
4855
"description": "<p>if <code>true</code> expanding one item will close all others</p>\n"
56+
},
57+
{
58+
"name": "isAnimated",
59+
"defaultValue": "false",
60+
"type": "boolean",
61+
"description": "<p>turn on/off animation</p>\n"
4962
}
5063
],
5164
"outputs": [],
@@ -63,6 +76,12 @@ export const ngdoc: any = {
6376
"defaultValue": "false",
6477
"type": "Boolean",
6578
"description": "<p>Whether the other panels should be closed when a panel is opened</p>\n"
79+
},
80+
{
81+
"name": "isAnimated",
82+
"defaultValue": "false",
83+
"type": "Boolean",
84+
"description": "<p>turn on/off animation</p>\n"
6685
}
6786
]
6887
},
@@ -605,16 +624,35 @@ export const ngdoc: any = {
605624
"name": "collapse",
606625
"type": "boolean",
607626
"description": "<p>A flag indicating visibility of content (shown or hidden)</p>\n"
627+
},
628+
{
629+
"name": "display",
630+
"type": "string",
631+
"description": ""
632+
},
633+
{
634+
"name": "isAnimated",
635+
"defaultValue": "false",
636+
"type": "boolean",
637+
"description": "<p>turn on/off animation</p>\n"
608638
}
609639
],
610640
"outputs": [
611641
{
612642
"name": "collapsed",
613643
"description": "<p>This event fires as soon as content collapses</p>\n"
614644
},
645+
{
646+
"name": "collapses",
647+
"description": "<p>This event fires when collapsing is started</p>\n"
648+
},
615649
{
616650
"name": "expanded",
617651
"description": "<p>This event fires as soon as content becomes visible</p>\n"
652+
},
653+
{
654+
"name": "expands",
655+
"description": "<p>This event fires when expansion is started</p>\n"
618656
}
619657
],
620658
"properties": [

‎src/accordion/accordion-group.component.html

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,7 @@
1111
</div>
1212
</div>
1313
</div>
14-
<div class="panel-collapse collapse" role="tabpanel" [collapse]="!isOpen">
14+
<div class="panel-collapse collapse" role="tabpanel" [collapse]="!isOpen" [isAnimated]="isAnimated">
1515
<div class="panel-body card-block card-body">
1616
<ng-content></ng-content>
1717
</div>

‎src/accordion/accordion-group.component.ts

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -19,6 +19,8 @@ import { AccordionComponent } from './accordion.component';
1919
}
2020
})
2121
export class AccordionPanelComponent implements OnInit, OnDestroy {
22+
/** turn on/off animation */
23+
isAnimated = false;
2224
/** Clickable text in accordion's group header, check `accordion heading` below for using html in header */
2325
@Input() heading: string;
2426
/** Provides an ability to use Bootstrap's contextual panel classes

‎src/accordion/accordion.component.ts

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -14,6 +14,8 @@ import { AccordionConfig } from './accordion.config';
1414
}
1515
})
1616
export class AccordionComponent {
17+
/** turn on/off animation */
18+
@Input() isAnimated = false;
1719
/** if `true` expanding one item will close all others */
1820
@Input() closeOthers: boolean;
1921

@@ -36,6 +38,7 @@ export class AccordionComponent {
3638
}
3739

3840
addGroup(group: AccordionPanelComponent): void {
41+
group.isAnimated = this.isAnimated;
3942
this.groups.push(group);
4043
}
4144

‎src/accordion/accordion.config.ts

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -7,4 +7,6 @@ import { Injectable } from '@angular/core';
77
export class AccordionConfig {
88
/** Whether the other panels should be closed when a panel is opened */
99
closeOthers: Boolean = false;
10+
/** turn on/off animation */
11+
isAnimated: Boolean = false;
1012
}

0 commit comments

Comments
 (0)