Browse Source

double tap directive

robert2206 8 năm trước cách đây
mục cha
commit
b8b9cd3c30

+ 13 - 2
src/app/app.module.ts

@@ -5,6 +5,8 @@ import { MyApp } from "./app.component";
 
 // Components
 import { OMasterHeader } from "../components/omaster-header/omaster-header";
+import { OMasterFooter } from "../components/omaster-footer/omaster-footer";
+import { ODetailHeader } from "../components/odetail-header/odetail-header";
 
 // Pages
 import { LoginPage } from "../pages/login/login";
@@ -24,6 +26,9 @@ import { SyncService } from "../services/sync-service";
 // Pipes
 import { MenuPipe } from "../pipes/menu";
 
+// Directives
+import { DoubleTap } from "../directives/double-tap";
+
 @NgModule({
     declarations: [
         MyApp,
@@ -34,8 +39,14 @@ import { MenuPipe } from "../pipes/menu";
         OrdersPage,
         ToolsPage,
         AboutPage,
-        // Pipes
-        MenuPipe
+        // Components
+        OMasterHeader,
+        OMasterHeader,
+        ODetailHeader,
+         // Pipes
+        MenuPipe,
+        // Directives
+        DoubleTap
     ],
     imports: [
         IonicModule.forRoot(MyApp),

+ 3 - 4
src/components/odetail-header/odetail-header.ts

@@ -1,11 +1,10 @@
 import { Component, Input, Output, EventEmitter } from "@angular/core";
 
 @Component({
-    selector: "odetails-header",
-    templateUrl: "odetails-header.html",
+    selector: "odetail-header",
+    templateUrl: "odetail-header.html",
 })
-export class ODetailsHeader {
-
+export class ODetailHeader {
 
     @Input()
     title: string;

+ 3 - 3
src/components/omaster-footer/omaster-footer.ts

@@ -2,11 +2,11 @@ import { Component, Input, Output, EventEmitter, ContentChild } from "@angular/c
 import { Content } from "ionic-angular";
 
 @Component({
-    selector: "olist-footer",
-    templateUrl: "olist-footer.html"
+    selector: "omaster-footer",
+    templateUrl: "omaster-footer.html"
     // viewProviders: [ Content ]
 })
-export class OListFooter {
+export class OMasterFooter {
 
     @Input()
     hasElements: boolean;

+ 48 - 0
src/directives/double-tap.ts

@@ -0,0 +1,48 @@
+import { Directive, ElementRef, OnInit, OnDestroy, Output, EventEmitter } from "@angular/core";
+import { Gesture } from "ionic-angular/gestures/gesture";
+
+@Directive({
+    selector: "[doubleTap]"
+})
+export class DoubleTap 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;
+            this.lastTimeStamp = 0;
+
+            if (delay <= 500) {
+                this.doubleTap.emit(e);
+            }
+        });
+    }   
+    
+
+    /**
+     *
+     */
+    ngOnDestroy() {
+        this.tapGesture.destroy();
+    }
+}