diff options
author | 2020-01-09 13:53:34 +0000 | |
---|---|---|
committer | 2020-01-09 13:53:34 +0000 | |
commit | 2d701e93373c70e33c2f797d7b2c177cfe96bc2e (patch) | |
tree | 6e8d92931eb5edab44f28ba5daa305b8886b9a62 /vid-webpack-master/src/app/shared/components/customModal/directives/ripple-click.animation.directive.ts | |
parent | 2e0d6b1a8fe5fdeef16c90e438c9df425f40b855 (diff) | |
parent | 4ef3ee778fc944cdfe28146d4eed360ce096e5ee (diff) |
Merge "Upgrade to Angular 8"
Diffstat (limited to 'vid-webpack-master/src/app/shared/components/customModal/directives/ripple-click.animation.directive.ts')
-rw-r--r-- | vid-webpack-master/src/app/shared/components/customModal/directives/ripple-click.animation.directive.ts | 47 |
1 files changed, 47 insertions, 0 deletions
diff --git a/vid-webpack-master/src/app/shared/components/customModal/directives/ripple-click.animation.directive.ts b/vid-webpack-master/src/app/shared/components/customModal/directives/ripple-click.animation.directive.ts new file mode 100644 index 000000000..d343d5dc2 --- /dev/null +++ b/vid-webpack-master/src/app/shared/components/customModal/directives/ripple-click.animation.directive.ts @@ -0,0 +1,47 @@ +import { Directive, Input, HostBinding, HostListener } from "@angular/core"; + +export enum RippleAnimationAction { + CLICK = 0, + MOUSE_ENTER = 1 +} + +@Directive({ + selector: `[customRippleClickAnimation]` +}) +export class CustomRippleClickAnimationDirective { + private animated: boolean; + + @Input() rippleClickDisabled: boolean; + @Input() rippleOnAction:RippleAnimationAction = RippleAnimationAction.CLICK; + + @HostBinding('class.sdc-ripple-click__animated') animationClass: string; + + @HostListener('click') onClick() { + if(this.rippleOnAction === RippleAnimationAction.CLICK){ + this.animateStart(); + } + } + + @HostListener('mouseenter') onMouseEnter() { + //console.log("Mouseenter!", this.rippleOnAction); + if(this.rippleOnAction === RippleAnimationAction.MOUSE_ENTER){ + this.animateStart(); + } + } + + private animateStart():void{ + if (!this.rippleClickDisabled) { + this.animated = true; + this.animationClass = 'sdc-ripple-click__animated'; + } + } + @HostListener('animationend') onAnimationComplete() { + this.animated = false; + this.animationClass = ''; + } + + constructor() { + this.rippleClickDisabled = false; + this.animated = false; + } +} |