feat(common): add animation for collapse and accordion components (#5146

) * feat(common): add animation to collapse and accordion
valor-software · Apr 19, 2019 · 191e5b4 · 191e5b4
1 parent f5be2db
commit 191e5b4
Show file tree

Hide file tree

Showing 25 changed files with 295 additions and 72 deletions.
diff --git a/demo/src/app/app.module.ts b/demo/src/app/app.module.ts
@@ -5,6 +5,7 @@ import { BrowserModule } from '@angular/platform-browser';
 import { RouterModule } from '@angular/router';
 import { NgxPageScrollModule } from 'ngx-page-scroll';
 import { BsDropdownModule } from 'ngx-bootstrap/dropdown';
+import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
 
 import { environment } from '../environments/environment';
 import { ngdoc } from '../ng-api-doc';
@@ -21,6 +22,7 @@ import { ThemeStorage } from './theme/theme-storage';
 @NgModule({
   declarations: [AppComponent, DocumentationComponent, TopMenuComponent, LandingComponent],
   imports: [
+    BrowserAnimationsModule,
     DocsModule,
     FormsModule,
     HttpClientModule,

diff --git a/demo/src/app/components/+accordion/accordion-section.list.ts b/demo/src/app/components/+accordion/accordion-section.list.ts
@@ -1,12 +1,13 @@
+import { DemoAccordionAnimatedComponent } from './demos/animated/animated';
 import { DemoAccordionBasicComponent } from './demos/basic/basic';
+import { DemoAccordionConfigComponent } from './demos/config/config';
+import { DemoAccordionCustomHTMLComponent } from './demos/custom-html/custom-html';
 import { DemoAccordionDisabledComponent } from './demos/disabled/disabled';
 import { DemoAccordionDynamicComponent } from './demos/dymanic/dynamic';
+import { DemoAccordionManualToggleComponent } from './demos/manual-toggle/manual-toggle';
 import { DemoAccordionOneAtATimeComponent } from './demos/one-at-a-time/one-at-a-time';
-import { DemoAccordionStylingComponent } from './demos/styling/styling';
-import { DemoAccordionConfigComponent } from './demos/config/config';
 import { DemoAccordionOpenEventComponent } from './demos/open-event/open-event';
-import { DemoAccordionCustomHTMLComponent } from './demos/custom-html/custom-html';
-import { DemoAccordionManualToggleComponent } from './demos/manual-toggle/manual-toggle';
+import { DemoAccordionStylingComponent } from './demos/styling/styling';
 
 import { ContentSection } from '../../docs/models/content-section.model';
 import { DemoTopSectionComponent } from '../../docs/demo-section-components/demo-top-section/index';
@@ -43,6 +44,14 @@ export const demoComponentContent: ContentSection[] = [
         html: require('!!raw-loader?lang=markup!./demos/basic/basic.html'),
         outlet: DemoAccordionBasicComponent
       },
+      {
+        title: 'With animation',
+        anchor: 'animated-accordion',
+        description: `<p>Use input property or config property <code>isAnimated</code> to enable/disable animation</p>`,
+        component: require('!!raw-loader?lang=typescript!./demos/animated/animated'),
+        html: require('!!raw-loader?lang=markup!./demos/animated/animated.html'),
+        outlet: DemoAccordionAnimatedComponent
+      },
       {
         title: 'Group opening event',
         anchor: 'open-event',

diff --git a/demo/src/app/components/+accordion/demos/animated/animated.html b/demo/src/app/components/+accordion/demos/animated/animated.html
@@ -0,0 +1,14 @@
+<accordion [isAnimated]="true">
+  <accordion-group heading="Static Header">
+    This content is straight in the template.
+  </accordion-group>
+  <accordion-group heading="Another group">
+    <p>Some content</p>
+  </accordion-group>
+  <accordion-group heading="Another group">
+    <p>Some content</p>
+  </accordion-group>
+  <accordion-group heading="Another group">
+    <p>Some content</p>
+  </accordion-group>
+</accordion>
diff --git a/demo/src/app/components/+accordion/demos/animated/animated.ts b/demo/src/app/components/+accordion/demos/animated/animated.ts
@@ -0,0 +1,7 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'demo-accordion-animation',
+  templateUrl: './animated.html'
+})
+export class DemoAccordionAnimatedComponent {}
diff --git a/demo/src/app/components/+accordion/demos/config/config.html b/demo/src/app/components/+accordion/demos/config/config.html
@@ -1,4 +1,4 @@
-<accordion>
+<accordion [isAnimated]="true">
   <accordion-group heading="Header">
     This content is straight in the template.
   </accordion-group>

diff --git a/demo/src/app/components/+accordion/demos/index.ts b/demo/src/app/components/+accordion/demos/index.ts
@@ -1,25 +1,27 @@
+import { DemoAccordionAnimatedComponent } from './animated/animated';
 import { DemoAccordionBasicComponent } from './basic/basic';
-import { DemoAccordionDisabledComponent } from './disabled/disabled';
-import { DemoAccordionStylingComponent } from './styling/styling';
-import { DemoAccordionOneAtATimeComponent } from './one-at-a-time/one-at-a-time';
-import { DemoAccordionDynamicComponent } from './dymanic/dynamic';
 import { DemoAccordionConfigComponent } from './config/config';
-import { DemoAccordionOpenEventComponent } from './open-event/open-event';
 import { DemoAccordionCustomHTMLComponent } from './custom-html/custom-html';
-import { DemoAccordionOpenedComponent } from './opened/opened';
-import { DemoAccordionManualToggleComponent } from './manual-toggle/manual-toggle';
+import { DemoAccordionDisabledComponent } from './disabled/disabled';
 import { DemoAccordionDynamicBodyComponent } from './dynamic-body/dynamic-body';
+import { DemoAccordionDynamicComponent } from './dymanic/dynamic';
+import { DemoAccordionManualToggleComponent } from './manual-toggle/manual-toggle';
+import { DemoAccordionOneAtATimeComponent } from './one-at-a-time/one-at-a-time';
+import { DemoAccordionOpenedComponent } from './opened/opened';
+import { DemoAccordionOpenEventComponent } from './open-event/open-event';
+import { DemoAccordionStylingComponent } from './styling/styling';
 
 export const DEMO_COMPONENTS = [
+  DemoAccordionAnimatedComponent,
   DemoAccordionBasicComponent,
-  DemoAccordionDisabledComponent,
-  DemoAccordionStylingComponent,
-  DemoAccordionOneAtATimeComponent,
-  DemoAccordionDynamicComponent,
   DemoAccordionConfigComponent,
-  DemoAccordionOpenEventComponent,
   DemoAccordionCustomHTMLComponent,
-  DemoAccordionOpenedComponent,
+  DemoAccordionDisabledComponent,
+  DemoAccordionDynamicBodyComponent,
+  DemoAccordionDynamicComponent,
   DemoAccordionManualToggleComponent,
-  DemoAccordionDynamicBodyComponent
+  DemoAccordionOneAtATimeComponent,
+  DemoAccordionOpenedComponent,
+  DemoAccordionOpenEventComponent,
+  DemoAccordionStylingComponent
 ];
diff --git a/demo/src/app/components/+collapse/collapse-section.list.ts b/demo/src/app/components/+collapse/collapse-section.list.ts
@@ -1,13 +1,13 @@
+import { ApiSectionsComponent } from '../../docs/demo-section-components/demo-api-section/index';
+import { CollapseDemoAnimatedComponent } from './demos/animated/animated';
 import { CollapseDemoComponent } from './demos/basic/basic';
-import { ToggleManualDemoComponent } from './demos/toggle-manual/toggle-manual';
 import { CollapseDemoEventsComponent } from './demos/events/events';
-
 import { ContentSection } from '../../docs/models/content-section.model';
+import { DemoAccessibilityComponent } from './demos/accessibility/accessibility';
 import { DemoTopSectionComponent } from '../../docs/demo-section-components/demo-top-section/index';
 import { ExamplesComponent } from '../../docs/demo-section-components/demo-examples-section/index';
-import { ApiSectionsComponent } from '../../docs/demo-section-components/demo-api-section/index';
-import { DemoAccessibilityComponent } from './demos/accessibility/accessibility';
 import { InlineDisplayDemoComponent } from './demos/inline-display/inline-display';
+import { ToggleManualDemoComponent } from './demos/toggle-manual/toggle-manual';
 
 import { NgApiDocComponent } from '../../docs/api-docs';
 
@@ -32,13 +32,23 @@ export const demoComponentContent: ContentSection[] = [
         html: require('!!raw-loader?lang=markup!./demos/basic/basic.html'),
         outlet: CollapseDemoComponent
       },
+      {
+        title: 'With animation',
+        anchor: 'animated',
+        component: require('!!raw-loader?lang=typescript!./demos/animated/animated'),
+        html: require('!!raw-loader?lang=markup!./demos/animated/animated.html'),
+        description: `You can enable animation via <code>isAnimated</code> input option`,
+        outlet: CollapseDemoAnimatedComponent
+      },
       {
         title: 'Events',
         anchor: 'events',
         component: require('!!raw-loader?lang=typescript!./demos/events/events'),
         html: require('!!raw-loader?lang=markup!./demos/events/events.html'),
-        description: `Collapse directive exposes 2 events: <code>collapsed</code>, that fires when a content was hidden, 
-                      and <code>expanded</code>, that fires when a content was shown`,
+        description: `Collapse directive exposes 4 events: <code>collapses</code>, that fires when a collapse was triggered (aniamtion start),
+                        <code>collapsed</code>, that fires when a content was hidden (aniamtion finished), 
+                        <code>expands</code>, that fires when a expansion was triggered (animation start)
+                      and <code>expanded</code>, that fires when a content was shown\`, and <code>expanded</code>, that fires when a content was shown`,
         outlet: CollapseDemoEventsComponent
       },
       {

diff --git a/demo/src/app/components/+collapse/demos/animated/animated.html b/demo/src/app/components/+collapse/demos/animated/animated.html
@@ -0,0 +1,7 @@
+<button type="button" class="btn btn-primary" (click)="isCollapsed = !isCollapsed"
+        [attr.aria-expanded]="!isCollapsed" aria-controls="collapseBasic">Toggle collapse
+</button>
+<hr>
+<div id="collapseBasic" [collapse]="isCollapsed" [isAnimated]="true">
+  <div class="well well-lg card card-block card-header">Some content</div>
+</div>
diff --git a/demo/src/app/components/+collapse/demos/animated/animated.ts b/demo/src/app/components/+collapse/demos/animated/animated.ts
@@ -0,0 +1,9 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'collapse-demo-animation',
+  templateUrl: './animated.html'
+})
+export class CollapseDemoAnimatedComponent {
+  isCollapsed = false;
+}
diff --git a/demo/src/app/components/+collapse/demos/basic/basic.html b/demo/src/app/components/+collapse/demos/basic/basic.html
@@ -2,6 +2,6 @@
         [attr.aria-expanded]="!isCollapsed" aria-controls="collapseBasic">Toggle collapse
 </button>
 <hr>
-<div id="collapseBasic" [collapse]="isCollapsed" class="card card-block card-header">
-  <div class="well well-lg">Some content</div>
+<div id="collapseBasic" [collapse]="isCollapsed">
+  <div class="well well-lg card card-block card-header">Some content</div>
 </div>
diff --git a/demo/src/app/components/+collapse/demos/events/events.html b/demo/src/app/components/+collapse/demos/events/events.html
@@ -9,7 +9,13 @@
   </div>
 </div>
 <hr>
-<div id="collapseEvent" class="card card-block card-header"
-     (collapsed)="collapsed()" (expanded)="expanded()" [collapse]="isCollapsed">
-  <div class="well well-lg">Some content</div>
+<div id="collapseEvent"
+     [isAnimated]="true"
+     [collapse]="isCollapsed"
+     (collapses)="collapses()"
+     (expands)="expands()"
+     (collapsed)="collapsed()"
+     (expanded)="expanded()">
+
+  <div class="well well-lg card card-block card-header">Some content</div>
 </div>
diff --git a/demo/src/app/components/+collapse/demos/events/events.ts b/demo/src/app/components/+collapse/demos/events/events.ts
@@ -12,7 +12,15 @@ export class CollapseDemoEventsComponent {
     this.message = 'collapsed';
   }
 
+  collapses(): void {
+    this.message = 'collapses';
+  }
+
   expanded(): void {
     this.message = 'expanded';
   }
+
+  expands(): void {
+    this.message = 'expands';
+  }
 }
diff --git a/demo/src/app/components/+collapse/demos/index.ts b/demo/src/app/components/+collapse/demos/index.ts
@@ -1,13 +1,15 @@
+import { CollapseDemoAnimatedComponent } from './animated/animated';
 import { CollapseDemoComponent } from './basic/basic';
-import { ToggleManualDemoComponent } from './toggle-manual/toggle-manual';
 import { CollapseDemoEventsComponent } from './events/events';
 import { DemoAccessibilityComponent } from './accessibility/accessibility';
 import { InlineDisplayDemoComponent } from './inline-display/inline-display';
+import { ToggleManualDemoComponent } from './toggle-manual/toggle-manual';
 
 export const DEMO_COMPONENTS = [
+  CollapseDemoAnimatedComponent,
   CollapseDemoComponent,
   CollapseDemoEventsComponent,
-  ToggleManualDemoComponent,
   DemoAccessibilityComponent,
-  InlineDisplayDemoComponent
+  InlineDisplayDemoComponent,
+  ToggleManualDemoComponent
 ];
diff --git a/demo/src/app/components/+collapse/demos/inline-display/inline-display.html b/demo/src/app/components/+collapse/demos/inline-display/inline-display.html
@@ -5,6 +5,6 @@
         aria-controls="collapseBasic">None
 </button>
 <hr>
-<div id="collapseBasic" [collapse]="!isCollapsed" #collapse="bs-collapse" class="card card-block card-header">
-  <div class="well well-lg">Some content</div>
+<div id="collapseBasic" [collapse]="!isCollapsed" #collapse="bs-collapse">
+  <div class="well well-lg card card-block card-header">Some content</div>
 </div>
diff --git a/demo/src/app/components/+collapse/demos/toggle-manual/toggle-manual.html b/demo/src/app/components/+collapse/demos/toggle-manual/toggle-manual.html
@@ -5,7 +5,6 @@
         aria-controls="collapseManual">Hide content
 </button>
 <hr>
-<div id="collapseManual" #collapse="bs-collapse" [collapse]="isOpen"
-     class="card card-block card-header">
-  <div class="well well-lg">Some content</div>
+<div id="collapseManual" #collapse="bs-collapse" [collapse]="isOpen">
+  <div class="well well-lg card card-block card-header">Some content</div>
 </div>
diff --git a/demo/src/ng-api-doc.ts b/demo/src/ng-api-doc.ts
@@ -33,7 +33,14 @@ export const ngdoc: any = {
         "description": "<p>Emits when the opened state changes</p>\n"
       }
     ],
-    "properties": [],
+    "properties": [
+      {
+        "name": "isAnimated",
+        "defaultValue": "false",
+        "type": "boolean",
+        "description": "<p>turn on/off animation</p>\n"
+      }
+    ],
     "methods": []
   },
   "AccordionComponent": {
@@ -46,6 +53,12 @@ export const ngdoc: any = {
         "name": "closeOthers",
         "type": "boolean",
         "description": "<p>if <code>true</code> expanding one item will close all others</p>\n"
+      },
+      {
+        "name": "isAnimated",
+        "defaultValue": "false",
+        "type": "boolean",
+        "description": "<p>turn on/off animation</p>\n"
       }
     ],
     "outputs": [],
@@ -63,6 +76,12 @@ export const ngdoc: any = {
         "defaultValue": "false",
         "type": "Boolean",
         "description": "<p>Whether the other panels should be closed when a panel is opened</p>\n"
+      },
+      {
+        "name": "isAnimated",
+        "defaultValue": "false",
+        "type": "Boolean",
+        "description": "<p>turn on/off animation</p>\n"
       }
     ]
   },
@@ -605,16 +624,35 @@ export const ngdoc: any = {
         "name": "collapse",
         "type": "boolean",
         "description": "<p>A flag indicating visibility of content (shown or hidden)</p>\n"
+      },
+      {
+        "name": "display",
+        "type": "string",
+        "description": ""
+      },
+      {
+        "name": "isAnimated",
+        "defaultValue": "false",
+        "type": "boolean",
+        "description": "<p>turn on/off animation</p>\n"
       }
     ],
     "outputs": [
       {
         "name": "collapsed",
         "description": "<p>This event fires as soon as content collapses</p>\n"
       },
+      {
+        "name": "collapses",
+        "description": "<p>This event fires when collapsing is started</p>\n"
+      },
       {
         "name": "expanded",
         "description": "<p>This event fires as soon as content becomes visible</p>\n"
+      },
+      {
+        "name": "expands",
+        "description": "<p>This event fires when expansion is started</p>\n"
       }
     ],
     "properties": [

diff --git a/src/accordion/accordion-group.component.html b/src/accordion/accordion-group.component.html
@@ -11,7 +11,7 @@
       </div>
     </div>
   </div>
-  <div class="panel-collapse collapse" role="tabpanel" [collapse]="!isOpen">
+  <div class="panel-collapse collapse" role="tabpanel" [collapse]="!isOpen" [isAnimated]="isAnimated">
     <div class="panel-body card-block card-body">
       <ng-content></ng-content>
     </div>

diff --git a/src/accordion/accordion-group.component.ts b/src/accordion/accordion-group.component.ts
@@ -19,6 +19,8 @@ import { AccordionComponent } from './accordion.component';
   }
 })
 export class AccordionPanelComponent implements OnInit, OnDestroy {
+  /** turn on/off animation */
+  isAnimated = false;
   /** Clickable text in accordion's group header, check `accordion heading` below for using html in header */
   @Input() heading: string;
   /** Provides an ability to use Bootstrap's contextual panel classes

diff --git a/src/accordion/accordion.component.ts b/src/accordion/accordion.component.ts
@@ -14,6 +14,8 @@ import { AccordionConfig } from './accordion.config';
   }
 })
 export class AccordionComponent {
+  /** turn on/off animation */
+  @Input() isAnimated = false;
   /** if `true` expanding one item will close all others */
   @Input() closeOthers: boolean;
 
@@ -36,6 +38,7 @@ export class AccordionComponent {
   }
 
   addGroup(group: AccordionPanelComponent): void {
+    group.isAnimated = this.isAnimated;
     this.groups.push(group);
   }
 

diff --git a/src/accordion/accordion.config.ts b/src/accordion/accordion.config.ts
@@ -7,4 +7,6 @@ import { Injectable } from '@angular/core';
 export class AccordionConfig {
   /** Whether the other panels should be closed when a panel is opened */
   closeOthers: Boolean = false;
+  /** turn on/off animation */
+  isAnimated: Boolean = false;
 }