Skip to content

Commit 5a63aee

Browse files
wnvkownvko
committed
fix(overlay): change animation if flipped, #8238 
1 parent f619412 commit 5a63aee

File tree

2 files changed

+166
-5
lines changed

2 files changed

+166
-5
lines changed

‎projects/igniteui-angular/src/lib/core/utils.ts

Lines changed: 146 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,30 @@
1-
import { Injectable, PLATFORM_ID, Inject } from '@angular/core';
1+
import { AnimationReferenceMetadata } from '@angular/animations';
22
import { isPlatformBrowser } from '@angular/common';
3-
import { Observable } from 'rxjs';
3+
import { Inject, Injectable, PLATFORM_ID } from '@angular/core';
4+
import merge from 'lodash.merge';
45
import ResizeObserver from 'resize-observer-polyfill';
6+
import { Observable } from 'rxjs';
7+
import {
8+
blink, fadeIn, fadeOut, flipBottom, flipHorBck, flipHorFwd, flipLeft, flipRight, flipTop,
9+
flipVerBck, flipVerFwd, growVerIn, growVerOut, heartbeat, pulsateBck, pulsateFwd, rotateInBl,
10+
rotateInBottom, rotateInBr, rotateInCenter, rotateInDiagonal1, rotateInDiagonal2, rotateInHor,
11+
rotateInLeft, rotateInRight, rotateInTl, rotateInTop, rotateInTr, rotateInVer, rotateOutBl,
12+
rotateOutBottom, rotateOutBr, rotateOutCenter, rotateOutDiagonal1, rotateOutDiagonal2,
13+
rotateOutHor, rotateOutLeft, rotateOutRight, rotateOutTl, rotateOutTop, rotateOutTr,
14+
rotateOutVer, scaleInBl, scaleInBottom, scaleInBr, scaleInCenter, scaleInHorCenter,
15+
scaleInHorLeft, scaleInHorRight, scaleInLeft, scaleInRight, scaleInTl, scaleInTop, scaleInTr,
16+
scaleInVerBottom, scaleInVerCenter, scaleInVerTop, scaleOutBl, scaleOutBottom, scaleOutBr,
17+
scaleOutCenter, scaleOutHorCenter, scaleOutHorLeft, scaleOutHorRight, scaleOutLeft,
18+
scaleOutRight, scaleOutTl, scaleOutTop, scaleOutTr, scaleOutVerBottom, scaleOutVerCenter,
19+
scaleOutVerTop, shakeBl, shakeBottom, shakeBr, shakeCenter, shakeHor, shakeLeft, shakeRight,
20+
shakeTl, shakeTop, shakeTr, shakeVer, slideInBl, slideInBottom, slideInBr, slideInLeft,
21+
slideInRight, slideInTl, slideInTop, slideInTr, slideOutBl, slideOutBottom, slideOutBr,
22+
slideOutLeft, slideOutRight, slideOutTl, slideOutTop, slideOutTr, swingInBottomBck,
23+
swingInBottomFwd, swingInLeftBck, swingInLeftFwd, swingInRightBck, swingInRightFwd,
24+
swingInTopBck, swingInTopFwd, swingOutBottomBck, swingOutBottomFwd, swingOutLeftBck,
25+
swingOutLefttFwd, swingOutRightBck, swingOutRightFwd, swingOutTopBck, swingOutTopFwd
26+
} from '../animations/main';
527
import { setImmediate } from './setImmediate';
6-
import merge from 'lodash.merge';
728

829
/**
930
* @hidden
@@ -395,7 +416,6 @@ export function resolveNestedPath(obj: any, path: string) {
395416
return current;
396417
}
397418

398-
399419
/**
400420
*
401421
* Given a property access path in the format `x.y.z` and a value
@@ -451,3 +471,125 @@ export function yieldingLoop(count: number, chunkSize: number, callback: (index:
451471
}
452472

453473
export function mkenum<T extends { [index: string]: U }, U extends string>(x: T) { return x; }
474+
475+
export function oppositeAnimationResolver(animation: AnimationReferenceMetadata): AnimationReferenceMetadata {
476+
return oppositeAnimation.get(animation) ?? animation;
477+
}
478+
479+
const oppositeAnimation: Map<AnimationReferenceMetadata, AnimationReferenceMetadata> = new Map([
480+
[fadeIn, fadeIn],
481+
[fadeOut, fadeOut],
482+
[flipTop, flipBottom],
483+
[flipBottom, flipTop],
484+
[flipRight, flipLeft],
485+
[flipLeft, flipRight],
486+
[flipHorFwd, flipHorBck],
487+
[flipHorBck, flipHorFwd],
488+
[flipVerFwd, flipVerBck],
489+
[flipVerBck, flipVerFwd],
490+
[growVerIn, growVerIn],
491+
[growVerOut, growVerOut],
492+
[heartbeat, heartbeat],
493+
[pulsateFwd, pulsateBck],
494+
[pulsateBck, pulsateFwd],
495+
[blink, blink],
496+
[shakeHor, shakeHor],
497+
[shakeVer, shakeVer],
498+
[shakeTop, shakeTop],
499+
[shakeBottom, shakeBottom],
500+
[shakeRight, shakeRight],
501+
[shakeLeft, shakeLeft],
502+
[shakeCenter, shakeCenter],
503+
[shakeTr, shakeTr],
504+
[shakeBr, shakeBr],
505+
[shakeBl, shakeBl],
506+
[shakeTl, shakeTl],
507+
[rotateInCenter, rotateInCenter],
508+
[rotateOutCenter, rotateOutCenter],
509+
[rotateInTop, rotateInBottom],
510+
[rotateOutTop, rotateOutBottom],
511+
[rotateInRight, rotateInLeft],
512+
[rotateOutRight, rotateOutLeft],
513+
[rotateInLeft, rotateInRight],
514+
[rotateOutLeft, rotateOutRight],
515+
[rotateInBottom, rotateInTop],
516+
[rotateOutBottom, rotateOutTop],
517+
[rotateInTr, rotateInBl],
518+
[rotateOutTr, rotateOutBl],
519+
[rotateInBr, rotateInTl],
520+
[rotateOutBr, rotateOutTl],
521+
[rotateInBl, rotateInTr],
522+
[rotateOutBl, rotateOutTr],
523+
[rotateInTl, rotateInBr],
524+
[rotateOutTl, rotateOutBr],
525+
[rotateInDiagonal1, rotateInDiagonal1],
526+
[rotateOutDiagonal1, rotateOutDiagonal1],
527+
[rotateInDiagonal2, rotateInDiagonal2],
528+
[rotateOutDiagonal2, rotateOutDiagonal2],
529+
[rotateInHor, rotateInHor],
530+
[rotateOutHor, rotateOutHor],
531+
[rotateInVer, rotateInVer],
532+
[rotateOutVer, rotateOutVer],
533+
[scaleInTop, scaleInBottom],
534+
[scaleOutTop, scaleOutBottom],
535+
[scaleInRight, scaleInLeft],
536+
[scaleOutRight, scaleOutLeft],
537+
[scaleInBottom, scaleInTop],
538+
[scaleOutBottom, scaleOutTop],
539+
[scaleInLeft, scaleInRight],
540+
[scaleOutLeft, scaleOutRight],
541+
[scaleInCenter, scaleInCenter],
542+
[scaleOutCenter, scaleOutCenter],
543+
[scaleInTr, scaleInBl],
544+
[scaleOutTr, scaleOutBl],
545+
[scaleInBr, scaleInTl],
546+
[scaleOutBr, scaleOutTl],
547+
[scaleInBl, scaleInTr],
548+
[scaleOutBl, scaleOutTr],
549+
[scaleInTl, scaleInBr],
550+
[scaleOutTl, scaleOutBr],
551+
[scaleInVerTop, scaleInVerBottom],
552+
[scaleOutVerTop, scaleOutVerBottom],
553+
[scaleInVerBottom, scaleInVerTop],
554+
[scaleOutVerBottom, scaleOutVerTop],
555+
[scaleInVerCenter, scaleInVerCenter],
556+
[scaleOutVerCenter, scaleOutVerCenter],
557+
[scaleInHorCenter, scaleInHorCenter],
558+
[scaleOutHorCenter, scaleOutHorCenter],
559+
[scaleInHorLeft, scaleInHorRight],
560+
[scaleOutHorLeft, scaleOutHorRight],
561+
[scaleInHorRight, scaleInHorLeft],
562+
[scaleOutHorRight, scaleOutHorLeft],
563+
[slideInTop, slideInBottom],
564+
[slideOutTop, slideOutBottom],
565+
[slideInRight, slideInLeft],
566+
[slideOutRight, slideOutLeft],
567+
[slideInBottom, slideInTop],
568+
[slideOutBottom, slideOutTop],
569+
[slideInLeft, slideInRight],
570+
[slideOutLeft, slideOutRight],
571+
[slideInTr, slideInBl],
572+
[slideOutTr, slideOutBl],
573+
[slideInBr, slideInTl],
574+
[slideOutBr, slideOutTl],
575+
[slideInBl, slideInTr],
576+
[slideOutBl, slideOutTr],
577+
[slideInTl, slideInBr],
578+
[slideOutTl, slideOutBr],
579+
[swingInTopFwd, swingInBottomFwd],
580+
[swingOutTopFwd, swingOutBottomFwd],
581+
[swingInRightFwd, swingInLeftFwd],
582+
[swingOutRightFwd, swingOutLefttFwd],
583+
[swingInLeftFwd, swingInRightFwd],
584+
[swingOutLefttFwd, swingOutRightFwd],
585+
[swingInBottomFwd, swingInTopFwd],
586+
[swingOutBottomFwd, swingOutTopFwd],
587+
[swingInTopBck, swingInBottomBck],
588+
[swingOutTopBck, swingOutBottomBck],
589+
[swingInRightBck, swingInLeftBck],
590+
[swingOutRightBck, swingOutLeftBck],
591+
[swingInBottomBck, swingInTopBck],
592+
[swingOutBottomBck, swingOutTopBck],
593+
[swingInLeftBck, swingInRightBck],
594+
[swingOutLeftBck, swingOutRightBck],
595+
]);

‎projects/igniteui-angular/src/lib/services/overlay/position/auto-position-strategy.ts

Lines changed: 20 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
1-
import { VerticalAlignment, HorizontalAlignment, ConnectedFit } from './../utilities';
1+
import { oppositeAnimationResolver } from '../../../core/utils';
2+
import { ConnectedFit, HorizontalAlignment, VerticalAlignment } from './../utilities';
23
import { BaseFitPositionStrategy } from './base-fit-position-strategy';
34

45
/**
@@ -10,9 +11,12 @@ export class AutoPositionStrategy extends BaseFitPositionStrategy {
1011
/** @inheritdoc */
1112
protected fitInViewport(element: HTMLElement, connectedFit: ConnectedFit) {
1213
const transformString: string[] = [];
14+
let flipped = false;
1315
if (connectedFit.fitHorizontal.back < 0 || connectedFit.fitHorizontal.forward < 0) {
1416
if (this.canFlipHorizontal(connectedFit)) {
1517
this.flipHorizontal();
18+
this.flipAnimation();
19+
flipped = true;
1620
} else {
1721
const horizontalPush = this.horizontalPush(connectedFit);
1822
transformString.push(`translateX(${horizontalPush}px)`);
@@ -22,6 +26,9 @@ export class AutoPositionStrategy extends BaseFitPositionStrategy {
2226
if (connectedFit.fitVertical.back < 0 || connectedFit.fitVertical.forward < 0) {
2327
if (this.canFlipVertical(connectedFit)) {
2428
this.flipVertical();
29+
if (!flipped) {
30+
this.flipAnimation();
31+
}
2532
} else {
2633
const verticalPush = this.verticalPush(connectedFit);
2734
transformString.push(`translateY(${verticalPush}px)`);
@@ -150,4 +157,16 @@ export class AutoPositionStrategy extends BaseFitPositionStrategy {
150157
return 0;
151158
}
152159
}
160+
161+
/**
162+
* Changes open and close animation with opposite animation if one exists
163+
*/
164+
private flipAnimation() {
165+
if (this.settings.openAnimation) {
166+
this.settings.openAnimation = oppositeAnimationResolver(this.settings.openAnimation);
167+
}
168+
if (this.settings.closeAnimation) {
169+
this.settings.closeAnimation = oppositeAnimationResolver(this.settings.closeAnimation);
170+
}
171+
}
153172
}

0 commit comments

Comments
 (0)