diff --git a/projects/igniteui-angular/src/lib/core/utils.ts b/projects/igniteui-angular/src/lib/core/utils.ts index 9587d574353..6c2a4800d16 100644 --- a/projects/igniteui-angular/src/lib/core/utils.ts +++ b/projects/igniteui-angular/src/lib/core/utils.ts @@ -1,9 +1,30 @@ -import { Injectable, PLATFORM_ID, Inject } from '@angular/core'; +import { AnimationReferenceMetadata } from '@angular/animations'; import { isPlatformBrowser } from '@angular/common'; -import { Observable } from 'rxjs'; +import { Inject, Injectable, PLATFORM_ID } from '@angular/core'; +import merge from 'lodash.merge'; import ResizeObserver from 'resize-observer-polyfill'; +import { Observable } from 'rxjs'; +import { + blink, fadeIn, fadeOut, flipBottom, flipHorBck, flipHorFwd, flipLeft, flipRight, flipTop, + flipVerBck, flipVerFwd, growVerIn, growVerOut, heartbeat, pulsateBck, pulsateFwd, rotateInBl, + rotateInBottom, rotateInBr, rotateInCenter, rotateInDiagonal1, rotateInDiagonal2, rotateInHor, + rotateInLeft, rotateInRight, rotateInTl, rotateInTop, rotateInTr, rotateInVer, rotateOutBl, + rotateOutBottom, rotateOutBr, rotateOutCenter, rotateOutDiagonal1, rotateOutDiagonal2, + rotateOutHor, rotateOutLeft, rotateOutRight, rotateOutTl, rotateOutTop, rotateOutTr, + rotateOutVer, scaleInBl, scaleInBottom, scaleInBr, scaleInCenter, scaleInHorCenter, + scaleInHorLeft, scaleInHorRight, scaleInLeft, scaleInRight, scaleInTl, scaleInTop, scaleInTr, + scaleInVerBottom, scaleInVerCenter, scaleInVerTop, scaleOutBl, scaleOutBottom, scaleOutBr, + scaleOutCenter, scaleOutHorCenter, scaleOutHorLeft, scaleOutHorRight, scaleOutLeft, + scaleOutRight, scaleOutTl, scaleOutTop, scaleOutTr, scaleOutVerBottom, scaleOutVerCenter, + scaleOutVerTop, shakeBl, shakeBottom, shakeBr, shakeCenter, shakeHor, shakeLeft, shakeRight, + shakeTl, shakeTop, shakeTr, shakeVer, slideInBl, slideInBottom, slideInBr, slideInLeft, + slideInRight, slideInTl, slideInTop, slideInTr, slideOutBl, slideOutBottom, slideOutBr, + slideOutLeft, slideOutRight, slideOutTl, slideOutTop, slideOutTr, swingInBottomBck, + swingInBottomFwd, swingInLeftBck, swingInLeftFwd, swingInRightBck, swingInRightFwd, + swingInTopBck, swingInTopFwd, swingOutBottomBck, swingOutBottomFwd, swingOutLeftBck, + swingOutLefttFwd, swingOutRightBck, swingOutRightFwd, swingOutTopBck, swingOutTopFwd +} from '../animations/main'; import { setImmediate } from './setImmediate'; -import merge from 'lodash.merge'; /** * @hidden @@ -395,7 +416,6 @@ export function resolveNestedPath(obj: any, path: string) { return current; } - /** * * Given a property access path in the format `x.y.z` and a value @@ -451,3 +471,244 @@ export function yieldingLoop(count: number, chunkSize: number, callback: (index: } export function mkenum(x: T) { return x; } + +export function reverseAnimationResolver(animation: AnimationReferenceMetadata): AnimationReferenceMetadata { + return oppositeAnimation.get(animation) ?? animation; +} + +export function isHorizontalAnimation(animation: AnimationReferenceMetadata): boolean { + return horizontalAnimations.includes(animation); +} + +export function isVerticalAnimation(animation: AnimationReferenceMetadata): boolean { + return verticalAnimations.includes(animation); +} + +const oppositeAnimation: Map = new Map([ + [fadeIn, fadeIn], + [fadeOut, fadeOut], + [flipTop, flipBottom], + [flipBottom, flipTop], + [flipRight, flipLeft], + [flipLeft, flipRight], + [flipHorFwd, flipHorBck], + [flipHorBck, flipHorFwd], + [flipVerFwd, flipVerBck], + [flipVerBck, flipVerFwd], + [growVerIn, growVerIn], + [growVerOut, growVerOut], + [heartbeat, heartbeat], + [pulsateFwd, pulsateBck], + [pulsateBck, pulsateFwd], + [blink, blink], + [shakeHor, shakeHor], + [shakeVer, shakeVer], + [shakeTop, shakeTop], + [shakeBottom, shakeBottom], + [shakeRight, shakeRight], + [shakeLeft, shakeLeft], + [shakeCenter, shakeCenter], + [shakeTr, shakeTr], + [shakeBr, shakeBr], + [shakeBl, shakeBl], + [shakeTl, shakeTl], + [rotateInCenter, rotateInCenter], + [rotateOutCenter, rotateOutCenter], + [rotateInTop, rotateInBottom], + [rotateOutTop, rotateOutBottom], + [rotateInRight, rotateInLeft], + [rotateOutRight, rotateOutLeft], + [rotateInLeft, rotateInRight], + [rotateOutLeft, rotateOutRight], + [rotateInBottom, rotateInTop], + [rotateOutBottom, rotateOutTop], + [rotateInTr, rotateInBl], + [rotateOutTr, rotateOutBl], + [rotateInBr, rotateInTl], + [rotateOutBr, rotateOutTl], + [rotateInBl, rotateInTr], + [rotateOutBl, rotateOutTr], + [rotateInTl, rotateInBr], + [rotateOutTl, rotateOutBr], + [rotateInDiagonal1, rotateInDiagonal1], + [rotateOutDiagonal1, rotateOutDiagonal1], + [rotateInDiagonal2, rotateInDiagonal2], + [rotateOutDiagonal2, rotateOutDiagonal2], + [rotateInHor, rotateInHor], + [rotateOutHor, rotateOutHor], + [rotateInVer, rotateInVer], + [rotateOutVer, rotateOutVer], + [scaleInTop, scaleInBottom], + [scaleOutTop, scaleOutBottom], + [scaleInRight, scaleInLeft], + [scaleOutRight, scaleOutLeft], + [scaleInBottom, scaleInTop], + [scaleOutBottom, scaleOutTop], + [scaleInLeft, scaleInRight], + [scaleOutLeft, scaleOutRight], + [scaleInCenter, scaleInCenter], + [scaleOutCenter, scaleOutCenter], + [scaleInTr, scaleInBl], + [scaleOutTr, scaleOutBl], + [scaleInBr, scaleInTl], + [scaleOutBr, scaleOutTl], + [scaleInBl, scaleInTr], + [scaleOutBl, scaleOutTr], + [scaleInTl, scaleInBr], + [scaleOutTl, scaleOutBr], + [scaleInVerTop, scaleInVerBottom], + [scaleOutVerTop, scaleOutVerBottom], + [scaleInVerBottom, scaleInVerTop], + [scaleOutVerBottom, scaleOutVerTop], + [scaleInVerCenter, scaleInVerCenter], + [scaleOutVerCenter, scaleOutVerCenter], + [scaleInHorCenter, scaleInHorCenter], + [scaleOutHorCenter, scaleOutHorCenter], + [scaleInHorLeft, scaleInHorRight], + [scaleOutHorLeft, scaleOutHorRight], + [scaleInHorRight, scaleInHorLeft], + [scaleOutHorRight, scaleOutHorLeft], + [slideInTop, slideInBottom], + [slideOutTop, slideOutBottom], + [slideInRight, slideInLeft], + [slideOutRight, slideOutLeft], + [slideInBottom, slideInTop], + [slideOutBottom, slideOutTop], + [slideInLeft, slideInRight], + [slideOutLeft, slideOutRight], + [slideInTr, slideInBl], + [slideOutTr, slideOutBl], + [slideInBr, slideInTl], + [slideOutBr, slideOutTl], + [slideInBl, slideInTr], + [slideOutBl, slideOutTr], + [slideInTl, slideInBr], + [slideOutTl, slideOutBr], + [swingInTopFwd, swingInBottomFwd], + [swingOutTopFwd, swingOutBottomFwd], + [swingInRightFwd, swingInLeftFwd], + [swingOutRightFwd, swingOutLefttFwd], + [swingInLeftFwd, swingInRightFwd], + [swingOutLefttFwd, swingOutRightFwd], + [swingInBottomFwd, swingInTopFwd], + [swingOutBottomFwd, swingOutTopFwd], + [swingInTopBck, swingInBottomBck], + [swingOutTopBck, swingOutBottomBck], + [swingInRightBck, swingInLeftBck], + [swingOutRightBck, swingOutLeftBck], + [swingInBottomBck, swingInTopBck], + [swingOutBottomBck, swingOutTopBck], + [swingInLeftBck, swingInRightBck], + [swingOutLeftBck, swingOutRightBck], +]); + +const horizontalAnimations: AnimationReferenceMetadata[] = [ + flipRight, + flipLeft, + flipVerFwd, + flipVerBck, + rotateInRight, + rotateOutRight, + rotateInLeft, + rotateOutLeft, + rotateInTr, + rotateOutTr, + rotateInBr, + rotateOutBr, + rotateInBl, + rotateOutBl, + rotateInTl, + rotateOutTl, + scaleInRight, + scaleOutRight, + scaleInLeft, + scaleOutLeft, + scaleInTr, + scaleOutTr, + scaleInBr, + scaleOutBr, + scaleInBl, + scaleOutBl, + scaleInTl, + scaleOutTl, + scaleInHorLeft, + scaleOutHorLeft, + scaleInHorRight, + scaleOutHorRight, + slideInRight, + slideOutRight, + slideInLeft, + slideOutLeft, + slideInTr, + slideOutTr, + slideInBr, + slideOutBr, + slideInBl, + slideOutBl, + slideInTl, + slideOutTl, + swingInRightFwd, + swingOutRightFwd, + swingInLeftFwd, + swingOutLefttFwd, + swingInRightBck, + swingOutRightBck, + swingInLeftBck, + swingOutLeftBck, +]; +const verticalAnimations: AnimationReferenceMetadata[] = [ + flipTop, + flipBottom, + flipHorFwd, + flipHorBck, + growVerIn, + growVerOut, + rotateInTop, + rotateOutTop, + rotateInBottom, + rotateOutBottom, + rotateInTr, + rotateOutTr, + rotateInBr, + rotateOutBr, + rotateInBl, + rotateOutBl, + rotateInTl, + rotateOutTl, + scaleInTop, + scaleOutTop, + scaleInBottom, + scaleOutBottom, + scaleInTr, + scaleOutTr, + scaleInBr, + scaleOutBr, + scaleInBl, + scaleOutBl, + scaleInTl, + scaleOutTl, + scaleInVerTop, + scaleOutVerTop, + scaleInVerBottom, + scaleOutVerBottom, + slideInTop, + slideOutTop, + slideInBottom, + slideOutBottom, + slideInTr, + slideOutTr, + slideInBr, + slideOutBr, + slideInBl, + slideOutBl, + slideInTl, + slideOutTl, + swingInTopFwd, + swingOutTopFwd, + swingInBottomFwd, + swingOutBottomFwd, + swingInTopBck, + swingOutTopBck, + swingInBottomBck, + swingOutBottomBck, +]; diff --git a/projects/igniteui-angular/src/lib/services/overlay/position/auto-position-strategy.ts b/projects/igniteui-angular/src/lib/services/overlay/position/auto-position-strategy.ts index 5c334e22fa9..b307d33babd 100644 --- a/projects/igniteui-angular/src/lib/services/overlay/position/auto-position-strategy.ts +++ b/projects/igniteui-angular/src/lib/services/overlay/position/auto-position-strategy.ts @@ -1,4 +1,6 @@ -import { VerticalAlignment, HorizontalAlignment, ConnectedFit } from './../utilities'; +import { AnimationReferenceMetadata } from '@angular/animations'; +import { isHorizontalAnimation, isVerticalAnimation, reverseAnimationResolver } from '../../../core/utils'; +import { ConnectedFit, HorizontalAlignment, VerticalAlignment } from './../utilities'; import { BaseFitPositionStrategy } from './base-fit-position-strategy'; /** @@ -13,6 +15,7 @@ export class AutoPositionStrategy extends BaseFitPositionStrategy { if (connectedFit.fitHorizontal.back < 0 || connectedFit.fitHorizontal.forward < 0) { if (this.canFlipHorizontal(connectedFit)) { this.flipHorizontal(); + this.flipAnimation(FlipDirection.horizontal); } else { const horizontalPush = this.horizontalPush(connectedFit); transformString.push(`translateX(${horizontalPush}px)`); @@ -22,6 +25,7 @@ export class AutoPositionStrategy extends BaseFitPositionStrategy { if (connectedFit.fitVertical.back < 0 || connectedFit.fitVertical.forward < 0) { if (this.canFlipVertical(connectedFit)) { this.flipVertical(); + this.flipAnimation(FlipDirection.vertical); } else { const verticalPush = this.verticalPush(connectedFit); transformString.push(`translateY(${verticalPush}px)`); @@ -150,4 +154,45 @@ export class AutoPositionStrategy extends BaseFitPositionStrategy { return 0; } } + + /** + * Changes open and close animation with reverse animation if one exists + * @param flipDirection direction for which to change the animations + */ + private flipAnimation(flipDirection: FlipDirection): void { + if (this.settings.openAnimation) { + this.settings.openAnimation = this.updateAnimation(this.settings.openAnimation, flipDirection); + } + if (this.settings.closeAnimation) { + this.settings.closeAnimation = this.updateAnimation(this.settings.closeAnimation, flipDirection); + } + } + + /** + * Tries to find the reverse animation according to provided direction + * @param animation animation to update + * @param direction required animation direction + * @returns reverse animation in given direction if one exists + */ + private updateAnimation(animation: AnimationReferenceMetadata, direction: FlipDirection): AnimationReferenceMetadata { + switch (direction) { + case FlipDirection.horizontal: + if (isHorizontalAnimation(animation)) { + return reverseAnimationResolver(animation); + } + break; + case FlipDirection.vertical: + if (isVerticalAnimation(animation)) { + return reverseAnimationResolver(animation); + } + break; + } + + return animation; + } +} + +enum FlipDirection { + horizontal, + vertical } diff --git a/src/app/app.component.ts b/src/app/app.component.ts index 03343384bcf..fd52d989d25 100644 --- a/src/app/app.component.ts +++ b/src/app/app.component.ts @@ -494,6 +494,11 @@ export class AppComponent implements OnInit { ].sort((componentLink1, componentLink2) => componentLink1.name > componentLink2.name ? 1 : -1); styleLinks = [ + { + link: '/animations', + icon: 'color_lens', + name: 'Animations' + }, { link: '/colors', icon: 'color_lens', diff --git a/src/app/app.module.ts b/src/app/app.module.ts index c53b9be6168..d59ebb68603 100644 --- a/src/app/app.module.ts +++ b/src/app/app.module.ts @@ -5,7 +5,7 @@ import { FormsModule, ReactiveFormsModule } from '@angular/forms'; import { NgModule } from '@angular/core'; import { IgxIconModule, IgxGridModule, IgxExcelExporterService, IgxCsvExporterService, IgxOverlayService, - IgxDragDropModule, IgxDividerModule, IgxTreeGridModule, IgxHierarchicalGridModule, IgxInputGroupModule, + IgxDragDropModule, IgxDividerModule, IgxTreeGridModule, IgxHierarchicalGridModule, IgxInputGroupModule, IgxIconService, DisplayDensityToken, DisplayDensity, IgxDateTimeEditorModule, IgxDateRangePickerModule, IgxButtonModule, IgxActionStripModule, GridBaseAPIService } from 'igniteui-angular'; @@ -132,6 +132,7 @@ import { GridVirtualizationScrollSampleComponent } from './grid-remote-virtualiz import { GridNestedPropsSampleComponent } from './grid-nested-props/grid-nested-props.sample'; import { GridColumnActionsSampleComponent } from './grid-column-actions/grid-column-actions.sample'; import { IgxColumnGroupingDirective } from './grid-column-actions/custom-action-directive'; +import { AnimationsSampleComponent } from './styleguide/animations/animations.sample'; const components = [ ActionStripSampleComponent, @@ -220,6 +221,7 @@ const components = [ TreeGridLoadOnDemandSampleComponent, CustomContentComponent, ColorsSampleComponent, + AnimationsSampleComponent, ShadowsSampleComponent, TypographySampleComponent, RadioSampleComponent, diff --git a/src/app/app.routing.ts b/src/app/app.routing.ts index 5278dd753bf..c04f02444a1 100644 --- a/src/app/app.routing.ts +++ b/src/app/app.routing.ts @@ -29,13 +29,15 @@ import { BottomNavRoutingSampleComponent } from './bottomnav-routing/bottomnav-r import { BottomNavRoutingView1Component, BottomNavRoutingView2Component, - BottomNavRoutingView3Component } from './bottomnav-routing/bottomnav-routing-views.sample'; + BottomNavRoutingView3Component +} from './bottomnav-routing/bottomnav-routing-views.sample'; import { TabsSampleComponent } from './tabs/tabs.sample'; import { TabsRoutingSampleComponent } from './tabs-routing/tabs-routing.sample'; import { TabsRoutingView1Component, TabsRoutingView2Component, - TabsRoutingView3Component } from './tabs-routing/tabs-routing-views.sample'; + TabsRoutingView3Component +} from './tabs-routing/tabs-routing-views.sample'; import { TimePickerSampleComponent } from './time-picker/time-picker.sample'; import { ToastSampleComponent } from './toast/toast.sample'; import { VirtualForSampleComponent } from './virtual-for-directive/virtual-for.sample'; @@ -76,6 +78,7 @@ import { HierarchicalGridRemoteVirtualizationComponent } from './hierarchical-gr import { GridVirtualizationScrollSampleComponent } from './grid-remote-virtualization-with-scroll/grid-remote-virtualization-scroll.sample'; import { GridNestedPropsSampleComponent } from './grid-nested-props/grid-nested-props.sample'; import { GridColumnActionsSampleComponent } from './grid-column-actions/grid-column-actions.sample'; +import { AnimationsSampleComponent } from './styleguide/animations/animations.sample'; const appRoutes = [ { @@ -199,11 +202,14 @@ const appRoutes = [ path: 'snackbar', component: SnackbarSampleComponent }, - { path: 'colors', component: ColorsSampleComponent }, + { + path: 'animations', + component: AnimationsSampleComponent + }, { path: 'shadows', component: ShadowsSampleComponent diff --git a/src/app/routing.ts b/src/app/routing.ts index 70ff92e6163..5ec22873171 100644 --- a/src/app/routing.ts +++ b/src/app/routing.ts @@ -108,6 +108,7 @@ import { import { GridVirtualizationScrollSampleComponent } from './grid-remote-virtualization-with-scroll/grid-remote-virtualization-scroll.sample'; import { GridNestedPropsSampleComponent } from './grid-nested-props/grid-nested-props.sample'; import { GridColumnActionsSampleComponent } from './grid-column-actions/grid-column-actions.sample'; +import { AnimationsSampleComponent } from './styleguide/animations/animations.sample'; const appRoutes = [ { @@ -283,6 +284,10 @@ const appRoutes = [ path: 'colors', component: ColorsSampleComponent }, + { + path: 'animations', + component: AnimationsSampleComponent + }, { path: 'shadows', component: ShadowsSampleComponent diff --git a/src/app/styleguide/animations/animations.sample.html b/src/app/styleguide/animations/animations.sample.html new file mode 100644 index 00000000000..409cdb2031b --- /dev/null +++ b/src/app/styleguide/animations/animations.sample.html @@ -0,0 +1,35 @@ +
+
+

Animations categories

+
+ + +

{{ category }}

+ + +
+
+
+

Animations

+
+ + +

{{ animation.name }}

+ + +
+
+ + +
+ diff --git a/src/app/styleguide/animations/animations.sample.scss b/src/app/styleguide/animations/animations.sample.scss new file mode 100644 index 00000000000..5f33e3929b4 --- /dev/null +++ b/src/app/styleguide/animations/animations.sample.scss @@ -0,0 +1,8 @@ +.sample-wrapper { + display: flex; +} + +.sample-title { + margin-left: 8px; +} + diff --git a/src/app/styleguide/animations/animations.sample.ts b/src/app/styleguide/animations/animations.sample.ts new file mode 100644 index 00000000000..7472080d945 --- /dev/null +++ b/src/app/styleguide/animations/animations.sample.ts @@ -0,0 +1,241 @@ +import { AnimationReferenceMetadata } from '@angular/animations'; +import { Component, ViewChild } from '@angular/core'; +import { + blink, fadeIn, fadeOut, flipBottom, flipHorBck, flipHorFwd, flipLeft, flipRight, flipTop, + flipVerBck, flipVerFwd, growVerIn, growVerOut, heartbeat, + IgxDialogComponent, IgxOverlayService, IListItemClickEventArgs, + pulsateBck, pulsateFwd, rotateInBl, + rotateInBottom, rotateInBr, rotateInCenter, rotateInDiagonal1, rotateInDiagonal2, rotateInHor, + rotateInLeft, rotateInRight, rotateInTl, rotateInTop, rotateInTr, rotateInVer, rotateOutBl, + rotateOutBottom, rotateOutBr, rotateOutCenter, rotateOutDiagonal1, rotateOutDiagonal2, + rotateOutHor, rotateOutLeft, rotateOutRight, rotateOutTl, rotateOutTop, rotateOutTr, + rotateOutVer, scaleInBl, scaleInBottom, scaleInBr, scaleInCenter, scaleInHorCenter, + scaleInHorLeft, scaleInHorRight, scaleInLeft, scaleInRight, scaleInTl, scaleInTop, scaleInTr, + scaleInVerBottom, scaleInVerCenter, scaleInVerTop, scaleOutBl, scaleOutBottom, scaleOutBr, + scaleOutCenter, scaleOutHorCenter, scaleOutHorLeft, scaleOutHorRight, scaleOutLeft, + scaleOutRight, scaleOutTl, scaleOutTop, scaleOutTr, scaleOutVerBottom, scaleOutVerCenter, + scaleOutVerTop, shakeBl, shakeBottom, shakeBr, shakeCenter, shakeHor, shakeLeft, shakeRight, + shakeTl, shakeTop, shakeTr, shakeVer, slideInBl, slideInBottom, slideInBr, slideInLeft, + slideInRight, slideInTl, slideInTop, slideInTr, slideOutBl, slideOutBottom, slideOutBr, + slideOutLeft, slideOutRight, slideOutTl, slideOutTop, slideOutTr, swingInBottomBck, + swingInBottomFwd, swingInLeftBck, swingInLeftFwd, swingInRightBck, swingInRightFwd, + swingInTopBck, swingInTopFwd, swingOutBottomBck, swingOutBottomFwd, swingOutLeftBck, + swingOutLefttFwd, swingOutRightBck, swingOutRightFwd, swingOutTopBck, swingOutTopFwd +} from 'igniteui-angular'; +import { AbsolutePosition } from 'projects/igniteui-angular/src/lib/services/overlay/utilities'; + +@Component({ + selector: 'app-animations-sample', + styleUrls: ['animations.sample.scss'], + templateUrl: 'animations.sample.html' +}) +export class AnimationsSampleComponent { + @ViewChild('dialog', { static: true, read: IgxDialogComponent }) + private dialog: IgxDialogComponent; + + public animationsCategories: string[] = [ + 'fade', + 'flip', + 'grow', + 'rotate', + 'scale', + 'slide', + 'swing', + 'shake', + 'pulsate' + ]; + + public animations: { name: string, animation: AnimationReferenceMetadata }[]; + + private fadeAnimations: { name: string, animation: AnimationReferenceMetadata }[] = [ + { name: 'fadeIn', animation: fadeIn }, + { name: 'fadeOut', animation: fadeOut }, + ]; + + private flipAnimations: { name: string, animation: AnimationReferenceMetadata }[] = [ + { name: 'flipTop', animation: flipTop }, + { name: 'flipRight', animation: flipRight }, + { name: 'flipBottom', animation: flipBottom }, + { name: 'flipLeft', animation: flipLeft }, + { name: 'flipHorFwd', animation: flipHorFwd }, + { name: 'flipHorBck', animation: flipHorBck }, + { name: 'flipVerFwd', animation: flipVerFwd }, + { name: 'flipVerBck', animation: flipVerBck } + ]; + + private growAnimations: { name: string, animation: AnimationReferenceMetadata }[] = [ + { name: 'growVerIn', animation: growVerIn }, + { name: 'growVerOut', animation: growVerOut }, + ]; + + private rotateAnimations: { name: string, animation: AnimationReferenceMetadata }[] = [ + { name: 'rotateInCenter', animation: rotateInCenter }, + { name: 'rotateInTop', animation: rotateInTop }, + { name: 'rotateInRight', animation: rotateInRight }, + { name: 'rotateInLeft', animation: rotateInLeft }, + { name: 'rotateInBottom', animation: rotateInBottom }, + { name: 'rotateInTr', animation: rotateInTr }, + { name: 'rotateInBr', animation: rotateInBr }, + { name: 'rotateInBl', animation: rotateInBl }, + { name: 'rotateInTl', animation: rotateInTl }, + { name: 'rotateInDiagonal1', animation: rotateInDiagonal1 }, + { name: 'rotateInDiagonal2', animation: rotateInDiagonal2 }, + { name: 'rotateInHor', animation: rotateInHor }, + { name: 'rotateInVer', animation: rotateInVer }, + { name: 'rotateOutCenter', animation: rotateOutCenter }, + { name: 'rotateOutTop', animation: rotateOutTop }, + { name: 'rotateOutRight', animation: rotateOutRight }, + { name: 'rotateOutLeft', animation: rotateOutLeft }, + { name: 'rotateOutBottom', animation: rotateOutBottom }, + { name: 'rotateOutTr', animation: rotateOutTr }, + { name: 'rotateOutBr', animation: rotateOutBr }, + { name: 'rotateOutBl', animation: rotateOutBl }, + { name: 'rotateOutTl', animation: rotateOutTl }, + { name: 'rotateOutDiagonal1', animation: rotateOutDiagonal1 }, + { name: 'rotateOutDiagonal2', animation: rotateOutDiagonal2 }, + { name: 'rotateOutHor', animation: rotateOutHor }, + { name: 'rotateOutVer', animation: rotateOutVer } + ]; + + private scaleAnimations: { name: string, animation: AnimationReferenceMetadata }[] = [ + { name: 'scaleInTop', animation: scaleInTop }, + { name: 'scaleInRight', animation: scaleInRight }, + { name: 'scaleInBottom', animation: scaleInBottom }, + { name: 'scaleInLeft', animation: scaleInLeft }, + { name: 'scaleInCenter', animation: scaleInCenter }, + { name: 'scaleInTr', animation: scaleInTr }, + { name: 'scaleInBr', animation: scaleInBr }, + { name: 'scaleInBl', animation: scaleInBl }, + { name: 'scaleInTl', animation: scaleInTl }, + { name: 'scaleInVerTop', animation: scaleInVerTop }, + { name: 'scaleInVerBottom', animation: scaleInVerBottom }, + { name: 'scaleInVerCenter', animation: scaleInVerCenter }, + { name: 'scaleInHorCenter', animation: scaleInHorCenter }, + { name: 'scaleInHorLeft', animation: scaleInHorLeft }, + { name: 'scaleInHorRight', animation: scaleInHorRight }, + { name: 'scaleOutTop', animation: scaleOutTop }, + { name: 'scaleOutRight', animation: scaleOutRight }, + { name: 'scaleOutBottom', animation: scaleOutBottom }, + { name: 'scaleOutLeft', animation: scaleOutLeft }, + { name: 'scaleOutCenter', animation: scaleOutCenter }, + { name: 'scaleOutTr', animation: scaleOutTr }, + { name: 'scaleOutBr', animation: scaleOutBr }, + { name: 'scaleOutBl', animation: scaleOutBl }, + { name: 'scaleOutTl', animation: scaleOutTl }, + { name: 'scaleOutVerTop', animation: scaleOutVerTop }, + { name: 'scaleOutVerBottom', animation: scaleOutVerBottom }, + { name: 'scaleOutVerCenter', animation: scaleOutVerCenter }, + { name: 'scaleOutHorCenter', animation: scaleOutHorCenter }, + { name: 'scaleOutHorLeft', animation: scaleOutHorLeft }, + { name: 'scaleOutHorRight', animation: scaleOutHorRight } + ]; + + private slideAnimations: { name: string, animation: AnimationReferenceMetadata }[] = [ + { name: 'slideInTop', animation: slideInTop }, + { name: 'slideInRight', animation: slideInRight }, + { name: 'slideInBottom', animation: slideInBottom }, + { name: 'slideInLeft', animation: slideInLeft }, + { name: 'slideInTr', animation: slideInTr }, + { name: 'slideInBr', animation: slideInBr }, + { name: 'slideInBl', animation: slideInBl }, + { name: 'slideInTl', animation: slideInTl }, + { name: 'slideOutTop', animation: slideOutTop }, + { name: 'slideOutBottom', animation: slideOutBottom }, + { name: 'slideOutRight', animation: slideOutRight }, + { name: 'slideOutLeft', animation: slideOutLeft }, + { name: 'slideOutTr', animation: slideOutTr }, + { name: 'slideOutBr', animation: slideOutBr }, + { name: 'slideOutBl', animation: slideOutBl }, + { name: 'slideOutTl', animation: slideOutTl } + ]; + + private swingAnimations: { name: string, animation: AnimationReferenceMetadata }[] = [ + { name: 'swingInTopFwd', animation: swingInTopFwd }, + { name: 'swingInRightFwd', animation: swingInRightFwd }, + { name: 'swingInLeftFwd', animation: swingInLeftFwd }, + { name: 'swingInBottomFwd', animation: swingInBottomFwd }, + { name: 'swingInTopBck', animation: swingInTopBck }, + { name: 'swingInRightBck', animation: swingInRightBck }, + { name: 'swingInBottomBck', animation: swingInBottomBck }, + { name: 'swingInLeftBck', animation: swingInLeftBck }, + { name: 'swingOutTopFwd', animation: swingOutTopFwd }, + { name: 'swingOutRightFwd', animation: swingOutRightFwd }, + { name: 'swingOutBottomFwd', animation: swingOutBottomFwd }, + { name: 'swingOutLefttFwd', animation: swingOutLefttFwd }, + { name: 'swingOutTopBck', animation: swingOutTopBck }, + { name: 'swingOutRightBck', animation: swingOutRightBck }, + { name: 'swingOutBottomBck', animation: swingOutBottomBck }, + { name: 'swingOutLeftBck', animation: swingOutLeftBck } + ]; + + private shakeAnimations: { name: string, animation: AnimationReferenceMetadata }[] = [ + { name: 'shakeHor', animation: shakeHor }, + { name: 'shakeVer', animation: shakeVer }, + { name: 'shakeTop', animation: shakeTop }, + { name: 'shakeBottom', animation: shakeBottom }, + { name: 'shakeRight', animation: shakeRight }, + { name: 'shakeLeft', animation: shakeLeft }, + { name: 'shakeCenter', animation: shakeCenter }, + { name: 'shakeTr', animation: shakeTr }, + { name: 'shakeBr', animation: shakeBr }, + { name: 'shakeBl', animation: shakeBl }, + { name: 'shakeTl', animation: shakeTl } + ]; + + private pulsateAnimations: { name: string, animation: AnimationReferenceMetadata }[] = [ + { name: 'heartbeat', animation: heartbeat }, + { name: 'pulsateFwd', animation: pulsateFwd }, + { name: 'pulsateBck', animation: pulsateBck }, + { name: 'blink', animation: blink } + ]; + + constructor() { + this.animations = this.fadeAnimations; + } + + public categoryItemClicked(e: IListItemClickEventArgs): void { + const category = this.animationsCategories[e.item.index]; + switch (category) { + case 'fade': + this.animations = this.fadeAnimations; + break; + case 'flip': + this.animations = this.flipAnimations; + break; + case 'grow': + this.animations = this.growAnimations; + break; + case 'rotate': + this.animations = this.rotateAnimations; + break; + case 'scale': + this.animations = this.scaleAnimations; + break; + case 'slide': + this.animations = this.slideAnimations; + break; + case 'swing': + this.animations = this.swingAnimations; + break; + case 'shake': + this.animations = this.shakeAnimations; + break; + case 'pulsate': + this.animations = this.pulsateAnimations; + break; + } + } + + public playAnimation(e: IListItemClickEventArgs): void { + const animation = this.animations[e.item.index].animation; + if (animation.options?.params?.duration && animation.options?.params?.duration !== '1000ms') { + animation.options.params.duration = '1000ms'; + } + const overlaySettings = IgxOverlayService.createAbsoluteOverlaySettings(AbsolutePosition.Center); + overlaySettings.closeOnOutsideClick = true; + overlaySettings.modal = true; + overlaySettings.positionStrategy.settings.openAnimation = animation; + overlaySettings.positionStrategy.settings.closeAnimation = null; + this.dialog.open(overlaySettings); + } +}