feat(igxExpansionPanel): bind animations to params, events, #307

IgniteUI · Sep 7, 2018 · 03fbee6 · 03fbee6
1 parent 2939ddb
commit 03fbee6
Show file tree

Hide file tree

Showing 3 changed files with 101 additions and 57 deletions.
diff --git a/projects/igniteui-angular/src/lib/expansion-panel/expansion-panel-body.component.ts b/projects/igniteui-angular/src/lib/expansion-panel/expansion-panel-body.component.ts
@@ -1,45 +1,66 @@
 import { Component, HostBinding, Inject, forwardRef } from '@angular/core';
-import { trigger, transition, animate, style } from '@angular/animations';
+import { trigger, transition, animate, style, AnimationEvent } from '@angular/animations';
 import { IgxExpansionPanelComponent } from './expansion-panel.component';
 import { EaseIn } from '../animations/easings';
 
-const defaultDurationParams = {
-    duration: '300ms',
-    delay: '0s',
-    easing: EaseIn.quad
+const enter_entryParams = {
+    height: '{{ enter_startHeight }}',
+    opacity: `{{ enter_startOpacity }}`
+};
+
+const enter_endParams = {
+    height: `{{ enter_endHeight }}`,
+    opacity: `{{ enter_endOpacity }}`
+};
+const leave_entryParams = {
+    height: '{{ leave_startHeight }}',
+    opacity: `{{ leave_startOpacity }}`
+};
+
+const leave_endParams = {
+    height: `{{ leave_endHeight }}`,
+    opacity: `{{ leave_endOpacity }}`
 };
 
 const defaultEntryParams = {
-    ...defaultDurationParams,
-    enterStartHeight: '0px',
-    enterStartOpacity: 0.5,
-    enterEndHeight: '*',
-    enterEndOpacity: 1
+    enter_duration: '300ms',
+    enter_delay: '0s',
+    enter_easing: EaseIn.quad,
+    enter_startHeight: '0px',
+    enter_startOpacity: 0.5,
+    enter_endHeight: '*',
+    enter_endOpacity: 1
 };
 
 const defaultExitParams = {
-    ...defaultDurationParams,
-    leaveStartHeight: '*',
-    leaveStartOpacity: 1,
-    leaveEndHeight: '0px',
-    leaveEndOpacity: 0.5
+    leave_duration: '300ms',
+    leave_delay: '0s',
+    leave_easing: EaseIn.quad,
+    leave_startHeight: '*',
+    leave_startOpacity: 1,
+    leave_endHeight: '0px',
+    leave_endOpacity: 0.5
 };
 
 @Component({
     // tslint:disable-next-line:directive-selector
     selector: 'igx-expansion-panel-body',
-    template: '<div *ngIf="!panel.collapsed" [@enterAnimation]><ng-content></ng-content></div>',
+    template: `<div *ngIf="!panel.collapsed"
+        [@enterAnimation]="{ value: '', params: animationParams }"
+        (@enterAnimation.done)="emitEvents($event)">
+            <ng-content></ng-content>
+        </div>`,
     animations: [
         trigger('enterAnimation', [
             transition(':enter', [
-                style({ height: '{{ enterStartHeight }}', opacity: `{{ enterStartOpacity }}` }),
-                animate('{{ duration }} {{ delay }} {{ easing }}',
-                style({ height: `{{ enterEndHeight }}`, opacity: `{{ enterEndOpacity }}` }))
+                style(enter_entryParams),
+                animate('{{ enter_duration }} {{ enter_delay }} {{ enter_easing }}',
+                style(enter_endParams))
             ], { params: defaultEntryParams }),
             transition(':leave', [
-                style({ height: `{{leaveStartHeight }}`, opacity: `{{ leaveStartOpacity }}` }),
-                animate('{{ duration }} {{ delay }} {{ easing }}',
-                style({ height: '{{ leaveEndHeight }}', opacity: `{{ leaveEndOpacity }}` }))
+                style(leave_entryParams),
+                animate('{{ leave_duration }} {{ leave_delay }} {{ leave_easing }}',
+                style(leave_endParams))
             ], { params: defaultExitParams })
         ])
     ]
@@ -49,4 +70,26 @@ export class IgxExpansionPanelBodyComponent {
     }
     @HostBinding('class.igx-expansion-panel__header-body')
     public cssClass = `igx-expansion-panel__header-body`;
+
+    public emitEvents(event: AnimationEvent) {
+        if (event.phaseName === 'done') {
+            if (event.fromState === 'void') {
+                this.panel.onExpanded.emit({event });
+            } else if (event.toState === 'void') {
+                this.panel.onCollapsed.emit({ event });
+            }
+        }
+    }
+    public get animationParams() {
+        const concatParams = {};
+        const openAnimation = this.panel.animationSettings.openAnimation.options.params;
+        Object.keys(openAnimation).map( key => {
+            concatParams[`enter_${key}`] = openAnimation[key];
+        });
+        const closeAnimation = this.panel.animationSettings.closeAnimation.options.params;
+        Object.keys(closeAnimation).map( key => {
+            concatParams[`leave_${key}`] = closeAnimation[key];
+        });
+        return concatParams;
+    }
 }
diff --git a/projects/igniteui-angular/src/lib/expansion-panel/expansion-panel.component.ts b/projects/igniteui-angular/src/lib/expansion-panel/expansion-panel.component.ts
@@ -67,19 +67,18 @@ export class IgxExpansionPanelComponent {
     public collapsed = true;
 
     @Output()
-    public onCollapsed = new EventEmitter<IExpansionPanelEventArgs>();
+    public onCollapsed = new EventEmitter<any>();
 
     @Output()
-    public onExpanded = new EventEmitter<IExpansionPanelEventArgs>();
+    public onExpanded = new EventEmitter<any>();
 
     constructor(
         public cdr: ChangeDetectorRef,
         public elementRef: ElementRef,
-        private renderer: Renderer2,
         private builder: AnimationBuilder) { }
 
-    @ViewChildren('collapseBody', { read : ElementRef})
-    private body: QueryList<ElementRef>;
+    // @ViewChildren('collapseBody', { read : ElementRef})
+    // private body: QueryList<ElementRef>;
 
     @ContentChild(IgxExpansionPanelTitleDirective, {read: IgxExpansionPanelTitleDirective })
     public title: IgxExpansionPanelTitleDirective;
@@ -96,46 +95,46 @@ export class IgxExpansionPanelComponent {
         return this.title ? this.title.id : this._title;
     }
 
-    private playOpenAnimation(cb: () => void) {
-        this.animationSettings.openAnimation.options.params.fromPosition = 'translateY(0px)';
-        const animationBuilder = this.builder.build(this.animationSettings.openAnimation);
-        const openAnimationPlayer = animationBuilder.create(this.body.first.nativeElement);
+    // private playOpenAnimation(cb: () => void) {
+    //     this.animationSettings.openAnimation.options.params.fromPosition = 'translateY(0px)';
+    //     const animationBuilder = this.builder.build(this.animationSettings.openAnimation);
+    //     const openAnimationPlayer = animationBuilder.create(this.body.first.nativeElement);
 
-        openAnimationPlayer.onDone(() => {
-            cb();
-            openAnimationPlayer.reset();
-        });
+    //     openAnimationPlayer.onDone(() => {
+    //         cb();
+    //         openAnimationPlayer.reset();
+    //     });
 
-        openAnimationPlayer.play();
-    }
+    //     openAnimationPlayer.play();
+    // }
 
-    private playCloseAnimation(cb: () => void) {
-        this.animationSettings.closeAnimation.options.params.toPosition = 'translateY(0px)';
-        const animationBuilder = this.builder.build(this.animationSettings.closeAnimation);
-        const closeAnimationPlayer = animationBuilder.create(this.body.first.nativeElement);
+    // private playCloseAnimation(cb: () => void) {
+    //     this.animationSettings.closeAnimation.options.params.toPosition = 'translateY(0px)';
+    //     const animationBuilder = this.builder.build(this.animationSettings.closeAnimation);
+    //     const closeAnimationPlayer = animationBuilder.create(this.body.first.nativeElement);
 
-        closeAnimationPlayer.onDone(() => {
-            cb();
-            closeAnimationPlayer.reset();
-        });
+    //     closeAnimationPlayer.onDone(() => {
+    //         cb();
+    //         closeAnimationPlayer.reset();
+    //     });
 
-        closeAnimationPlayer.play();
-    }
+    //     closeAnimationPlayer.play();
+    // }
 
     collapse (evt?: Event) {
         this.collapsed = true;
-        this.playCloseAnimation(
-            () => {
-                this.onCollapsed.emit({event: evt});
-                }
-            );
+        // this.playCloseAnimation(
+        //     () => {
+        //         this.onCollapsed.emit({event: evt});
+        //         }
+        //     );
     }
 
     expand (evt?: Event) {
         this.collapsed = false;
-        this.playOpenAnimation(
-            () => { this.onExpanded.emit({event: evt}); }
-        );
+        // this.playOpenAnimation(
+        //     () => { this.onExpanded.emit({event: evt}); }
+        // );
     }
 
     toggle (evt?: Event) {

diff --git a/src/app/expansion-panel/expansion-panel-sample.ts b/src/app/expansion-panel/expansion-panel-sample.ts
@@ -19,7 +19,9 @@ export class ExpansionPanelSampleComponent implements OnInit {
                 params: Object.assign(scaleInVerTop.options.params, {
                     startOpacity: 0.5,
                     fromScale: 0,
-                    duration: '300ms'
+                    toScale: 1,
+                    startHeight: '200px',
+                    duration: '2000ms'
                 })
             }
         }),
@@ -30,7 +32,7 @@ export class ExpansionPanelSampleComponent implements OnInit {
                     endOpacity: 0.5,
                     fromScale: 1,
                     toScale: 0,
-                    duration: '300ms'
+                    duration: '200ms'
                 })
             }
         })