feat(tappable): auto add tappable attribute for ion-item clicks

ionic-team · Nov 16, 2016 · 5c4838b · 5c4838b · jourdan-jobox · Nov 18, 2016
1 parent 12b8157
commit 5c4838b
Show file tree

Hide file tree

Showing 3 changed files with 15 additions and 5 deletions.
diff --git a/src/components/item/item.ts b/src/components/item/item.ts
@@ -339,6 +339,17 @@ export class Item extends Ion {
     this._setName(elementRef);
     this._shouldHaveReorder = !!reorder;
     this.id = form.nextId().toString();
+
+    // auto add "tappable" attribute to ion-item components that have a click listener
+    if (!(<any>renderer).orgListen) {
+      (<any>renderer).orgListen = renderer.listen;
+      renderer.listen = function(renderElement: HTMLElement, name: string, callback: Function): Function {
+        if (name === 'click' && renderElement.setAttribute) {
+          renderElement.setAttribute('tappable', '');
+        }
+        return (<any>renderer).orgListen(renderElement, name, callback);
+      };
+    }
   }
 
   /**

diff --git a/src/components/nav/test/basic/app-module.ts b/src/components/nav/test/basic/app-module.ts
@@ -53,7 +53,7 @@ export class MyCmpTest {
         <ion-list-header>
           {{title}}
         </ion-list-header>
-        <button ion-item class="e2eFrom1To2" (click)="pushFullPage()">Push to FullPage</button>
+        <ion-item class="e2eFrom1To2" (click)="pushFullPage()">Push to FullPage</ion-item>
         <button ion-item (click)="pushPrimaryHeaderPage()">Push to PrimaryHeaderPage</button>
         <button ion-item (click)="pushRedirect()">Push to Redirect</button>
         <button ion-item (click)="pushTabsPage()">Push to Tabs Page</button>

diff --git a/src/components/tap-click/tap-click.ts b/src/components/tap-click/tap-click.ts
@@ -160,17 +160,16 @@ export const isActivatable = function (ele: HTMLElement) {
     return true;
   }
 
-  let attributes = ele.attributes;
-  for (let i = 0, l = attributes.length; i < l; i++) {
-    if (ACTIVATABLE_ATTRIBUTES.indexOf(attributes[i].name) > -1) {
+  for (let i = 0, l = ACTIVATABLE_ATTRIBUTES.length; i < l; i++) {
+    if (ele.hasAttribute(ACTIVATABLE_ATTRIBUTES[i])) {
       return true;
     }
   }
   return false;
 };
 
 const ACTIVATABLE_ELEMENTS = ['A', 'BUTTON'];
-const ACTIVATABLE_ATTRIBUTES = ['tappable', 'button'];
+const ACTIVATABLE_ATTRIBUTES = ['tappable', 'ion-button'];
 const POINTER_TOLERANCE = 60;
 const DISABLE_NATIVE_CLICK_AMOUNT = 2500;