Skip to content

Commit

Permalink
refactor(carousel): add migration for CarouselAnimationType
Browse files Browse the repository at this point in the history
- add leaveAnimationDone and enterAnimationDone events
- rename animationDuration

Co-authored-by: MonikaKirkova <[email protected]>
  • Loading branch information
mmart1n and MonikaKirkova committed Oct 28, 2021
1 parent 139d306 commit 555088c
Show file tree
Hide file tree
Showing 8 changed files with 123 additions and 19 deletions.
Original file line number Diff line number Diff line change
Expand Up @@ -105,6 +105,11 @@
"version": "12.1.0",
"description": "Updates Ignite UI for Angular from v11.1.x to v12.1.0",
"factory": "./update-12_1_0"
},
"migration-22": {
"version": "13.0.0",
"description": "Updates Ignite UI for Angular from v12.2.x to v13.0.0",
"factory": "./update-13_0_0"
}
}
}
Original file line number Diff line number Diff line change
@@ -0,0 +1,8 @@
{
"$schema": "../../common/schema/class.schema.json",
"changes": [{
"name": "CarouselAnimationType",
"replaceWith": "HorizontalAnimationType"
}
]
}
70 changes: 70 additions & 0 deletions projects/igniteui-angular/migrations/update-13_0_0/index.spec.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,70 @@
import * as path from 'path';

import { EmptyTree } from '@angular-devkit/schematics';
import { SchematicTestRunner, UnitTestTree } from '@angular-devkit/schematics/testing';

const version = '13.0.0';

describe(`Update to ${version}`, () => {
let appTree: UnitTestTree;
const schematicRunner = new SchematicTestRunner('ig-migrate', path.join(__dirname, '../migration-collection.json'));
const configJson = {
defaultProject: 'testProj',
projects: {
testProj: {
sourceRoot: '/testSrc'
}
},
schematics: {
'@schematics/angular:component': {
prefix: 'appPrefix'
}
}
};

const migrationName = 'migration-22';

beforeEach(() => {
appTree = new UnitTestTree(new EmptyTree());
appTree.create('/angular.json', JSON.stringify(configJson));
});

it('should rename CarouselAnimationType to HorizontalAnimationType', async () => {
appTree.create(
'/testSrc/appPrefix/component/test.component.ts',
`import { Component, ViewChild } from '@angular/core';
import { CarouselAnimationType } from 'igniteui-angular';
@Component({
selector: 'animationType',
templateUrl: './test.component.html',
styleUrls: ['./test.component.scss']
})
export class AnimationType {
public animationType: CarouselAnimationType = CarouselAnimationType.slide;
}
`);
const tree = await schematicRunner
.runSchematicAsync(migrationName, {}, appTree)
.toPromise();

const expectedContent = `import { Component, ViewChild } from '@angular/core';
import { HorizontalAnimationType } from 'igniteui-angular';
@Component({
selector: 'animationType',
templateUrl: './test.component.html',
styleUrls: ['./test.component.scss']
})
export class AnimationType {
public animationType: HorizontalAnimationType = HorizontalAnimationType.slide;
}
`;

expect(
tree.readContent(
'/testSrc/appPrefix/component/test.component.ts'
)
).toEqual(expectedContent);
});
});
11 changes: 11 additions & 0 deletions projects/igniteui-angular/migrations/update-13_0_0/index.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,11 @@
import { Rule, SchematicContext, Tree } from '@angular-devkit/schematics';
import { UpdateChanges } from '../common/UpdateChanges';

const version = '13.0.0';

export default (): Rule => (host: Tree, context: SchematicContext) => {
context.logger.info(`Applying migration for Ignite UI for Angular to version ${version}`);

const update = new UpdateChanges(__dirname, host, context);
update.applyChanges();
};
2 changes: 1 addition & 1 deletion projects/igniteui-angular/src/lib/carousel/README.md
Original file line number Diff line number Diff line change
Expand Up @@ -17,7 +17,7 @@ A walkthrough of how to get started can be found [here](https://www.infragistics
| `gesturesSupport` | boolean | Controls should the gestures should be supported. Defaults to `true`. |
| `maximumIndicatorsCount` | number | The number of visible indicators. Defaults to `5`. |
| `indicatorsOrientation` | CarouselIndicatorsOrientation | Controls whether the indicators should be previewed on top or on bottom of carousel. Defaults to `bottom`. |
| `animationType` | CarouselAnimationType | Controls what animation should be played when slides are changing. Defaults to `slide`. |
| `animationType` | HorizontalAnimationType | Controls what animation should be played when slides are changing. Defaults to `slide`. |
| `total` | number | The number of slides the carousel currently has. |
| `current` | number | The index of the slide currently showing. |
| `isPlaying` | boolean | Returns whether the carousel is paused/playing. |
Expand Down
26 changes: 18 additions & 8 deletions projects/igniteui-angular/src/lib/carousel/carousel-base.ts
Original file line number Diff line number Diff line change
@@ -1,16 +1,17 @@
import { AnimationBuilder, AnimationPlayer, AnimationReferenceMetadata, useAnimation } from '@angular/animations';
import { EventEmitter } from '@angular/core';
import { fadeIn } from '../animations/fade';
import { slideInLeft } from '../animations/slide';
import { mkenum } from '../core/utils';

export enum Direction { NONE, NEXT, PREV }

export const CarouselAnimationType = mkenum({
export const HorizontalAnimationType = mkenum({
none: 'none',
slide: 'slide',
fade: 'fade'
});
export type CarouselAnimationType = (typeof CarouselAnimationType)[keyof typeof CarouselAnimationType];
export type HorizontalAnimationType = (typeof HorizontalAnimationType)[keyof typeof HorizontalAnimationType];

export interface CarouselAnimationSettings {
enterAnimation: AnimationReferenceMetadata;
Expand All @@ -26,7 +27,12 @@ export interface IgxSlideComponentBase {
/** @hidden */
export abstract class IgxCarouselComponentBase {
/** @hidden */
public animationType = CarouselAnimationType.slide;
public animationType: HorizontalAnimationType = HorizontalAnimationType.slide;

/** @hidden @internal */
public enterAnimationDone = new EventEmitter();
/** @hidden @internal */
public leaveAnimationDone = new EventEmitter();

/** @hidden */
protected currentItem: IgxSlideComponentBase;
Expand All @@ -37,7 +43,7 @@ export abstract class IgxCarouselComponentBase {
/** @hidden */
protected leaveAnimationPlayer?: AnimationPlayer;
/** @hidden */
protected animationDuration = 320;
protected defaultAnimationDuration = 320;
/** @hidden */
protected animationPosition = 0;
/** @hidden */
Expand All @@ -48,7 +54,7 @@ export abstract class IgxCarouselComponentBase {

/** @hidden */
protected triggerAnimations() {
if (this.animationType !== CarouselAnimationType.none) {
if (this.animationType !== HorizontalAnimationType.none) {
if (this.animationStarted(this.leaveAnimationPlayer) || this.animationStarted(this.enterAnimationPlayer)) {
requestAnimationFrame(() => {
this.resetAnimations();
Expand All @@ -74,10 +80,12 @@ export abstract class IgxCarouselComponentBase {
private resetAnimations() {
if (this.animationStarted(this.leaveAnimationPlayer)) {
this.leaveAnimationPlayer.reset();
this.leaveAnimationDone.emit();
}

if (this.animationStarted(this.enterAnimationPlayer)) {
this.enterAnimationPlayer.reset();
this.enterAnimationDone.emit();
}
}

Expand All @@ -86,11 +94,11 @@ export abstract class IgxCarouselComponentBase {
if (this.newDuration) {
duration = this.animationPosition ? this.animationPosition * this.newDuration : this.newDuration;
} else {
duration = this.animationPosition ? this.animationPosition * this.animationDuration : this.animationDuration;
duration = this.animationPosition ? this.animationPosition * this.defaultAnimationDuration : this.defaultAnimationDuration;
}

switch (this.animationType) {
case CarouselAnimationType.slide:
case HorizontalAnimationType.slide:
const trans = this.animationPosition ? this.animationPosition * 100 : 100;
return {
enterAnimation: useAnimation(slideInLeft,
Expand All @@ -116,7 +124,7 @@ export abstract class IgxCarouselComponentBase {
}
})
};
case CarouselAnimationType.fade:
case HorizontalAnimationType.fade:
return {
enterAnimation: useAnimation(fadeIn,
{ params: { duration: `${duration}ms`, startOpacity: `${this.animationPosition}` } }),
Expand Down Expand Up @@ -146,6 +154,7 @@ export abstract class IgxCarouselComponentBase {
this.animationPosition = 0;
this.newDuration = 0;
this.previousItem.previous = false;
this.enterAnimationDone.emit();
});
this.previousItem.previous = true;
this.enterAnimationPlayer.play();
Expand All @@ -167,6 +176,7 @@ export abstract class IgxCarouselComponentBase {
}
this.animationPosition = 0;
this.newDuration = 0;
this.leaveAnimationDone.emit();
});
this.leaveAnimationPlayer.play();
}
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,7 @@ import { UIInteractions, wait } from '../test-utils/ui-interactions.spec';
import { configureTestSuite } from '../test-utils/configure-suite';
import { NoopAnimationsModule } from '@angular/platform-browser/animations';
import { IgxSlideComponent } from './slide.component';
import { CarouselAnimationType } from './carousel-base';
import { HorizontalAnimationType } from './carousel-base';

describe('Carousel', () => {
configureTestSuite();
Expand Down Expand Up @@ -589,7 +589,7 @@ describe('Carousel', () => {
await wait();
expect(carousel.get(0).active).toBeTruthy();
expect(carousel.get(0).nativeElement.classList.contains(HelperTestFunctions.ACTIVE_SLIDE_CLASS)).toBeTruthy();
expect(carousel.animationType).toBe(CarouselAnimationType.slide);
expect(carousel.animationType).toBe(HorizontalAnimationType.slide);
carousel.next();
fixture.detectChanges();
await wait(200);
Expand All @@ -616,12 +616,12 @@ describe('Carousel', () => {

it('Test fade animation', async () => {
await wait();
carousel.animationType = CarouselAnimationType.fade;
carousel.animationType = HorizontalAnimationType.fade;
fixture.detectChanges();

expect(carousel.get(0).active).toBeTruthy();
expect(carousel.get(0).nativeElement.classList.contains(HelperTestFunctions.ACTIVE_SLIDE_CLASS)).toBeTruthy();
expect(carousel.animationType).toBe(CarouselAnimationType.fade);
expect(carousel.animationType).toBe(HorizontalAnimationType.fade);
carousel.next();
fixture.detectChanges();
await wait(200);
Expand Down
12 changes: 6 additions & 6 deletions projects/igniteui-angular/src/lib/carousel/carousel.component.ts
Original file line number Diff line number Diff line change
Expand Up @@ -30,7 +30,7 @@ import { IgxSlideComponent } from './slide.component';
import { ICarouselResourceStrings } from '../core/i18n/carousel-resources';
import { CurrentResourceStrings } from '../core/i18n/resources';
import { HammerGestureConfig, HAMMER_GESTURE_CONFIG } from '@angular/platform-browser';
import { CarouselAnimationType, Direction, IgxCarouselComponentBase } from './carousel-base';
import { HorizontalAnimationType, Direction, IgxCarouselComponentBase } from './carousel-base';

let NEXT_ID = 0;

Expand Down Expand Up @@ -227,7 +227,7 @@ export class IgxCarouselComponent extends IgxCarouselComponentBase implements On
*
* @memberOf IgxSlideComponent
*/
@Input() public animationType = CarouselAnimationType.slide;
@Input() public animationType: HorizontalAnimationType = HorizontalAnimationType.slide;

/**
* The custom template, if any, that should be used when rendering carousel indicators
Expand Down Expand Up @@ -647,18 +647,18 @@ export class IgxCarouselComponent extends IgxCarouselComponentBase implements On
this.incomingSlide.direction = event.deltaX < 0 ? Direction.NEXT : Direction.PREV;
this.incomingSlide.previous = false;

this.animationPosition = this.animationType === CarouselAnimationType.fade ?
this.animationPosition = this.animationType === HorizontalAnimationType.fade ?
deltaX / slideWidth : (slideWidth - deltaX) / slideWidth;

if (velocity > 1) {
this.newDuration = this.animationDuration / velocity;
this.newDuration = this.defaultAnimationDuration / velocity;
}
this.incomingSlide.active = true;
} else {
this.currentItem.direction = event.deltaX > 0 ? Direction.NEXT : Direction.PREV;
this.previousItem = this.incomingSlide;
this.previousItem.previous = true;
this.animationPosition = this.animationType === CarouselAnimationType.fade ?
this.animationPosition = this.animationType === HorizontalAnimationType.fade ?
Math.abs((slideWidth - deltaX) / slideWidth) : deltaX / slideWidth;
this.playAnimations();
}
Expand Down Expand Up @@ -912,7 +912,7 @@ export class IgxCarouselComponent extends IgxCarouselComponentBase implements On
}
this.incomingSlide.previous = true;

if (this.animationType === CarouselAnimationType.fade) {
if (this.animationType === HorizontalAnimationType.fade) {
this.currentItem.nativeElement.style.opacity = `${Math.abs(offset) / slideWidth}`;
} else {
this.currentItem.nativeElement.style.transform = `translateX(${deltaX}px)`;
Expand Down

0 comments on commit 555088c

Please sign in to comment.