TapClick for a,button

Author: adamdbradley

ionic/components.ts

@@ -2,12 +2,13 @@
 export * from 'ionic/components/app/app'
 export * from 'ionic/components/action-menu/action-menu'
 export * from 'ionic/components/aside/aside'
+export * from 'ionic/components/button/button'
 export * from 'ionic/components/checkbox/checkbox'
 export * from 'ionic/components/content/content'
 export * from 'ionic/components/icon/icon'
 export * from 'ionic/components/item/item'
 export * from 'ionic/components/item/item-group'
-export * from 'ionic/components/form/form'
+export * from 'ionic/components/form/input'
 export * from 'ionic/components/form/text-input'
 export * from 'ionic/components/form/tap-input'
 export * from 'ionic/components/form/label'

ionic/components/action-menu/action-menu.ts

@@ -8,14 +8,15 @@
 
 import {View, Injectable, NgFor, NgIf} from 'angular2/angular2';
 
+import {TapClick} from '../button/button';
 import {Overlay} from '../overlay/overlay';
 import {Animation} from '../../animations/animation';
 import * as util from 'ionic/util';
 
 
 @View({
   template: `
-    <div class="action-menu-backdrop" (click)="_cancel()"></div>
+    <div class="action-menu-backdrop" (click)="_cancel()" tappable></div>
     <div class="action-menu-wrapper">
       <div class="action-menu-container">
         <div class="action-menu-group action-menu-options">
@@ -28,7 +29,7 @@ import * as util from 'ionic/util';
         </div>
       </div>
     </div>`,
-  directives: [NgFor, NgIf]
+  directives: [NgFor, NgIf, TapClick]
 })
 class ActionMenuDirective {
 

ionic/components/button/button.ts

@@ -0,0 +1,54 @@
+import {Directive, ElementRef, Optional, Ancestor} from 'angular2/angular2';
+
+import {IonicConfig} from '../../config/config';
+import {Gesture} from '../../gestures/gesture';
+import * as dom  from '../../util/dom';
+
+
+@Directive({
+  selector: '[tap-disabled]'
+})
+export class TapDisabled {}
+
+
+@Directive({
+  selector: 'a,button,[tappable]'
+})
+export class TapClick {
+
+  constructor(
+    elementRef: ElementRef,
+    config: IonicConfig,
+    @Optional() @Ancestor() tapDisabled: TapDisabled
+  ) {
+
+    if (config.setting('tapPolyfill') && !this.tapGesture && !tapDisabled) {
+      this.tapGesture = new Gesture(elementRef.nativeElement);
+      this.tapGesture.listen();
+
+      this.tapGesture.on('tap', (gestureEv) => {
+        this.onTap(gestureEv.gesture.srcEvent);
+      });
+    }
+
+  }
+
+  onTap(ev) {
+    if (ev && this.tapGesture) {
+      ev.preventDefault();
+      ev.stopPropagation();
+
+      let c = dom.pointerCoord(ev);
+
+      let clickEvent = document.createEvent("MouseEvents");
+      clickEvent.initMouseEvent('click', true, true, window, 1, 0, 0, c.x, c.y, false, false, false, false, 0, null);
+      clickEvent.isIonicTap = true;
+      this.tapGesture.element.dispatchEvent(clickEvent);
+    }
+  }
+
+  onDestroy() {
+    this.tapGesture && this.tapGesture.destroy();
+  }
+
+}

ionic/components/checkbox/checkbox.ts

@@ -8,7 +8,7 @@ import {
 } from 'angular2/angular2';
 
 import {Ion} from '../ion';
-import {IonInputItem} from '../form/form';
+import {IonInputItem} from '../form/input';
 import {IonicConfig} from '../../config/config';
 import {IonicComponent, IonicView} from '../../config/annotations';
 import {Icon} from '../icon/icon';

ionic/components/form/focus-holder.ts

@@ -3,7 +3,7 @@ import {Component, Directive, View, Parent, ElementRef, forwardRef} from 'angula
 import {IonicConfig} from '../../config/config';
 import * as dom  from '../../util/dom';
 import {Platform} from '../../platform/platform';
-import {IonInput} from './form';
+import {IonInput} from './input';
 
 
 @Component({

ionic/components/form/tap-input.ts

@@ -1,6 +1,6 @@
 import {Parent, Ancestor, Optional, ElementRef, Attribute, Directive} from 'angular2/angular2';
 
-import {IonInput} from './form';
+import {IonInput} from './input';
 import {IonicApp} from '../app/app';
 import {IonicConfig} from '../../config/config';
 import {Content} from '../content/content';

ionic/components/form/text-input.ts

@@ -2,7 +2,7 @@ import {Directive, View, Parent, Ancestor, Optional, ElementRef, Attribute, forw
 
 import {IonicDirective} from '../../config/annotations';
 import {IonicConfig} from '../../config/config';
-import {IonInput, IonInputItem} from './form';
+import {IonInput, IonInputItem} from './input';
 import {IonicApp} from '../app/app';
 import {Content} from '../content/content';
 import {ClickBlock} from '../../util/click-block';

ionic/components/nav/swipe-handle.ts

@@ -93,4 +93,8 @@ export class SwipeHandle {
     return (this.viewCtrl ? this.viewCtrl.swipeBackEnabled() : false);
   }
 
+  onDestroy() {
+    this.gesture && self.gesture.destroy();
+  }
+
 }

ionic/config/annotations.ts

@@ -16,6 +16,7 @@ import {
   Segment, SegmentButton, SegmentControlValueAccessor,
   RadioGroup, RadioButton, SearchBar,
   Nav, NavbarTemplate, Navbar, NavPush, NavPop,
+  TapClick, TapDisabled,
   Register
 } from '../ionic';
 
@@ -71,7 +72,11 @@ export const IonicDirectives = [
   forwardRef(() => Navbar),
   forwardRef(() => NavPush),
   forwardRef(() => NavPop),
-  forwardRef(() => Register)
+  forwardRef(() => Register),
+
+  // Gestures
+  forwardRef(() => TapClick),
+  forwardRef(() => TapDisabled),
 ];
 
 class IonicViewImpl extends View {

ionic/gestures/gesture.ts

@@ -1,6 +1,7 @@
 import * as util from 'ionic/util';
 import {Hammer} from 'ionic/gestures/hammer';
 
+
 export class Gesture {
   constructor(element, opts = {}) {
     util.defaults(opts, {
@@ -18,6 +19,7 @@ export class Gesture {
     this._callbacks = {};
 
   }
+
   options(opts = {}) {
     util.extend(this._options, opts);
   }
@@ -31,6 +33,7 @@ export class Gesture {
   listen() {
     this.hammertime = Hammer(this.element, this._options);
   }
+
   unlisten() {
     this.hammertime.destroy();
     this.hammertime = null;
@@ -41,6 +44,7 @@ export class Gesture {
     }
     this._callbacks = {}
   }
+
   destroy() {
     this.unlisten()
   }

ionic/ionic.ts

@@ -16,7 +16,6 @@ export * from 'ionic/routing/url-state'
 
 export * from 'ionic/util/click-block'
 export * from 'ionic/util/focus'
-export * from 'ionic/util/tap'
 
 export * from 'ionic/animations/animation'
 export * from 'ionic/animations/builtins'