aboutsummaryrefslogtreecommitdiffstats
path: root/src/angular/animations
diff options
context:
space:
mode:
Diffstat (limited to 'src/angular/animations')
-rw-r--r--src/angular/animations/animation-directives.module.ts19
-rw-r--r--src/angular/animations/ripple-click.animation.directive.ts47
2 files changed, 66 insertions, 0 deletions
diff --git a/src/angular/animations/animation-directives.module.ts b/src/angular/animations/animation-directives.module.ts
new file mode 100644
index 0000000..c6a8203
--- /dev/null
+++ b/src/angular/animations/animation-directives.module.ts
@@ -0,0 +1,19 @@
+import { NgModule } from "@angular/core";
+import { RippleClickAnimationDirective } from "./ripple-click.animation.directive";
+import { CommonModule } from "@angular/common";
+
+@NgModule({
+ declarations: [
+ RippleClickAnimationDirective
+ ],
+ imports: [
+ CommonModule
+ ],
+ exports: [
+ RippleClickAnimationDirective
+
+ ],
+})
+export class AnimationDirectivesModule {
+
+}
diff --git a/src/angular/animations/ripple-click.animation.directive.ts b/src/angular/animations/ripple-click.animation.directive.ts
new file mode 100644
index 0000000..7b9ed55
--- /dev/null
+++ b/src/angular/animations/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: `[SdcRippleClickAnimation]`
+})
+export class RippleClickAnimationDirective {
+ 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;
+ }
+}