summaryrefslogtreecommitdiffstats
path: root/vid-webpack-master/src/app/shared/components/customModal/directives/ripple-click.animation.directive.ts
diff options
context:
space:
mode:
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;
+ }
+}