diff --git a/ionic/components/aside/aside-toggle.ts b/ionic/components/aside/aside-toggle.ts index 3b0d84fc30..80fc43d2a3 100644 --- a/ionic/components/aside/aside-toggle.ts +++ b/ionic/components/aside/aside-toggle.ts @@ -33,5 +33,6 @@ export class AsideToggle { */ toggle(event) { this.aside && this.aside.toggle(); + console.log('Aside toggle'); } } diff --git a/ionic/components/aside/aside.scss b/ionic/components/aside/aside.scss index 070602ffc3..9c2a436444 100644 --- a/ionic/components/aside/aside.scss +++ b/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; } } diff --git a/ionic/components/aside/aside.ts b/ionic/components/aside/aside.ts index 3c741e6e03..fc0a2cf636 100644 --- a/ionic/components/aside/aside.ts +++ b/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\n\n'); + } + + 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. diff --git a/ionic/components/aside/test/basic/main.html b/ionic/components/aside/test/basic/main.html index 97bb88ee22..5c5b70d069 100644 --- a/ionic/components/aside/test/basic/main.html +++ b/ionic/components/aside/test/basic/main.html @@ -1,4 +1,4 @@ - + Left Menu @@ -17,7 +17,6 @@ - diff --git a/ionic/components/aside/test/basic/page1.html b/ionic/components/aside/test/basic/page1.html index 07ef9721cc..ca39e5b495 100644 --- a/ionic/components/aside/test/basic/page1.html +++ b/ionic/components/aside/test/basic/page1.html @@ -21,4 +21,6 @@

+ +