aboutsummaryrefslogtreecommitdiffstats
path: root/vid-webpack-master/src/app/shared/components/customModal/directives/ripple-click.animation.directive.ts
diff options
context:
space:
mode:
authorYoav Schneiderman <yoav.schneiderman@intl.att.com>2020-01-08 14:46:14 +0200
committerIttay Stern <ittay.stern@att.com>2020-01-09 13:29:49 +0000
commit4ef3ee778fc944cdfe28146d4eed360ce096e5ee (patch)
treec641429928518b64f7a39acd1d241043a28978cd /vid-webpack-master/src/app/shared/components/customModal/directives/ripple-click.animation.directive.ts
parente8414b1fe839291418ead3a7e5a64bf382dc1121 (diff)
Upgrade to Angular 8
Issue-ID: VID-742 Change-Id: Ic4b3aae71d4c946e23d854847a49aa7e020c465d Signed-off-by: Yoav Schneiderman <yoav.schneiderman@intl.att.com>
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.ts47
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;
+ }
+}