Selaa lähdekoodia

new directive for double tap

robert2206 8 vuotta sitten
vanhempi
commit
a40060f7f8
3 muutettua tiedostoa jossa 57 lisäystä ja 1 poistoa
  1. 3 1
      src/app/app.module.ts
  2. 49 0
      src/directives/double-tap-directive.ts
  3. 5 0
      src/pages/home/home.ts

+ 3 - 1
src/app/app.module.ts

@@ -41,6 +41,7 @@ import { ProductAttributeLinePipe } from '../pipes/product-attribute-line-pipe';
 import { ProductAttributeValuePipe } from '../pipes/product-attribute-value-pipe';
 
 import { ChartModule } from 'ng2-chartjs2';
+import { DoubleTapDirective } from "../directives/double-tap-directive";
 
 @NgModule({
     declarations: [
@@ -66,7 +67,8 @@ import { ChartModule } from 'ng2-chartjs2';
         ViewMenuPipe,
         ImageSanitizerPipe,
         ProductAttributeLinePipe,
-        ProductAttributeValuePipe
+        ProductAttributeValuePipe,
+        DoubleTapDirective
     ],
     imports: [
         IonicModule.forRoot(OdooMobileApp),

+ 49 - 0
src/directives/double-tap-directive.ts

@@ -0,0 +1,49 @@
+import { Directive, ElementRef, OnInit, OnDestroy, Output, EventEmitter } from "@angular/core";
+import { Gesture } from "ionic-angular/gestures/gesture";
+
+@Directive({
+    selector: "[doubleTap]"
+})
+export class DoubleTapDirective implements OnInit, OnDestroy {
+
+    el: HTMLElement;
+    tapGesture: Gesture;
+    lastTimeStamp: number = 0;
+
+    @Output()    
+    doubleTap: EventEmitter<any> = new EventEmitter();
+
+    constructor(el: ElementRef) {
+        this.el = el.nativeElement;
+     }    
+
+    /**
+     *
+     */
+    ngOnInit() {
+        this.tapGesture = new Gesture(this.el);
+        this.tapGesture.listen();
+        this.tapGesture.on("tap", e => {
+            if (this.lastTimeStamp == 0) {
+                this.lastTimeStamp = e.timeStamp;
+                return;
+            }
+
+            let delay = e.timeStamp - this.lastTimeStamp;
+            
+            if (delay <= 500) {
+                this.doubleTap.emit(e);
+            } else {
+                this.lastTimeStamp = 0;
+            }
+        });
+    }   
+    
+
+    /**
+     *
+     */
+    ngOnDestroy() {
+        this.tapGesture.destroy();
+    }
+}

+ 5 - 0
src/pages/home/home.ts

@@ -50,4 +50,9 @@ export class HomePage {
             console.log(e);
         });
     }
+
+    tap(e) {
+        console.log(e);
+        
+    }
 }