fix(aside): tap on content. Fixes #78

ionic/components/aside/aside-toggle.ts

@@ -33,5 +33,6 @@ export class AsideToggle {
   */
   toggle(event) {
     this.aside && this.aside.toggle();
+    console.log('Aside toggle');
   }
 }

ionic/components/aside/aside.scss

@@ -121,10 +121,12 @@ $aside-shadow: -1px 0px 8px rgba(0, 0, 0, 0.2) !default;
   box-shadow: $aside-shadow;
   &.aside-open-left {
     transform: translate3d($aside-width,0,0);
+    pointer-events: none;
   }
 
   &.aside-open-right {
     transform: translate3d(-$aside-width,0,0);
+    pointer-events: none;
   }
 }
 

ionic/components/aside/aside.ts

@@ -55,16 +55,24 @@ export class Aside extends Ion {
     this.opening = new EventEmitter('opening');
 
     //this.animation = new Animation(element.querySelector('backdrop'));
+    this.contentClickFn = (e) => {
+      console.log('Click', this.isOpen, this.isChanging);
+      if(!this.isOpen || this.isChanging) { return; }
+      this.close();
+    };
 
-    let finishChanging = util.debounce(() => {
+
+    this.finishChanging = util.debounce(() => {
+      console.log('Done changing');
       this.setChanging(false);
     });
 
     // TODO: Use Animation Class
     this.getNativeElement().addEventListener('transitionend', ev => {
+      console.log("Transition end");
       //this.setChanging(false)
       clearTimeout(this.setChangeTimeout);
-      this.setChangeTimeout = setInterval(finishChanging, 500);
+      this.setChangeTimeout = setInterval(this.finishChanging, 400);
     })
   }
 
@@ -82,10 +90,27 @@ export class Aside extends Ion {
     super.onInit();
     this.contentElement = (this.content instanceof Node) ? this.content : this.content.getNativeElement();
 
+    if(this.contentElement) {
+      this.contentElement.addEventListener('transitionend', ev => {
+        console.log("Transition end");
+        //this.setChanging(false)
+        clearTimeout(this.setChangeTimeout);
+        this.setChangeTimeout = setInterval(this.finishChanging, 400);
+      })
+      this.contentElement.addEventListener('click', this.contentClickFn);
+    } else {
+      console.error('Aside: must have a [content] element to listen for drag events on. Supply one like this:\n\n<ion-aside [content]="content"></ion-aside>\n\n<ion-content #content>');
+    }
+
+
     this.gestureDelegate = this.getDelegate('gesture');
     this.typeDelegate = this.getDelegate('type');
   }
 
+  onDestroy() {
+    this.contentElement.removeEventListener('click', this.contentClickFn);
+  }
+
   /**
    * TODO
    * @return {Element} The Aside's content element.

ionic/components/aside/test/basic/main.html

@@ -1,4 +1,4 @@
-<ion-aside #aside [content]="content" id="menu" type="overlay">
+<ion-aside #aside [content]="content" id="menu" type="reveal">
 
   <ion-toolbar secondary>
     <ion-title>Left Menu</ion-title>
@@ -17,7 +17,6 @@
       </button>
 
     </ion-list>
-
   </ion-content>
 
 </ion-aside>

ionic/components/aside/test/basic/page1.html

@@ -21,4 +21,6 @@
     <button id="e2eContentToggleAside" aside-toggle>Toggle Aside</button>
   </p>
 
+    <f></f><f></f><f></f><f></f><f></f><f></f><f></f><f></f>
+
 </ion-content>