From f3e2f427bf071b8f38f463325f868389e04dfc88 Mon Sep 17 00:00:00 2001 From: Adam Bradley Date: Mon, 21 Dec 2015 09:03:30 -0600 Subject: [PATCH] fix(slidingItem): remove scroll disabling Closes #778 --- ionic/components/item/item-sliding-gesture.ts | 38 ++++++++++------ ionic/components/item/test/sliding/index.ts | 45 +++++++++++-------- ionic/components/item/test/sliding/main.html | 4 +- .../components/overlay/overlay-controller.ts | 2 +- 4 files changed, 56 insertions(+), 33 deletions(-) diff --git a/ionic/components/item/item-sliding-gesture.ts b/ionic/components/item/item-sliding-gesture.ts index 502038fe0c..1af7b63dbb 100644 --- a/ionic/components/item/item-sliding-gesture.ts +++ b/ionic/components/item/item-sliding-gesture.ts @@ -24,6 +24,7 @@ export class ItemSlidingGesture extends DragGesture { if (!isFromOptionButtons(ev.target)) { let didClose = this.closeOpened(); if (didClose) { + console.debug('tap close sliding item'); preventDefault(ev); } } @@ -31,6 +32,7 @@ export class ItemSlidingGesture extends DragGesture { this.mouseOut = (ev) => { if (ev.target.tagName === 'ION-ITEM-SLIDING') { + console.debug('tap close sliding item'); this.onDragEnd(ev); } }; @@ -38,7 +40,10 @@ export class ItemSlidingGesture extends DragGesture { onDragStart(ev) { let itemContainerEle = getItemConatiner(ev.target); - if (!itemContainerEle) return; + if (!itemContainerEle) { + console.debug('onDragStart, no itemContainerEle'); + return; + } this.closeOpened(itemContainerEle); @@ -48,6 +53,7 @@ export class ItemSlidingGesture extends DragGesture { if (this.preventDrag) { this.closeOpened(); + console.debug('onDragStart, preventDefault'); return preventDefault(ev); } @@ -61,18 +67,25 @@ export class ItemSlidingGesture extends DragGesture { onDrag(ev) { if (this.dragEnded || this.preventDrag || Math.abs(ev.deltaY) > 30) { + console.debug('onDrag preventDrag, dragEnded:', this.dragEnded, 'preventDrag:', this.preventDrag, 'ev.deltaY:', Math.abs(ev.deltaY)); this.preventDrag = true; return; } let itemContainerEle = getItemConatiner(ev.target); - if (!itemContainerEle || !isActive(itemContainerEle)) return; + if (!itemContainerEle || !isActive(itemContainerEle)) { + console.debug('onDrag, no itemContainerEle'); + return; + } let itemData = this.get(itemContainerEle); if (!itemData.optsWidth) { itemData.optsWidth = getOptionsWidth(itemContainerEle); - if (!itemData.optsWidth) return; + if (!itemData.optsWidth) { + console.debug('onDrag, no optsWidth'); + return; + } } let x = ev.center[this.direction]; @@ -103,7 +116,10 @@ export class ItemSlidingGesture extends DragGesture { this.dragEnded = true; let itemContainerEle = getItemConatiner(ev.target); - if (!itemContainerEle || !isActive(itemContainerEle)) return; + if (!itemContainerEle || !isActive(itemContainerEle)) { + console.debug('onDragEnd, no itemContainerEle'); + return; + } // If we are currently dragging, we want to snap back into place // The final resting point X will be the width of the exposed buttons @@ -146,7 +162,10 @@ export class ItemSlidingGesture extends DragGesture { open(itemContainerEle, openAmount, isFinal) { let slidingEle = itemContainerEle.querySelector('ion-item,[ion-item]'); - if (!slidingEle) return; + if (!slidingEle) { + console.debug('open, no slidingEle, openAmount:', openAmount); + return; + } this.set(itemContainerEle, 'openAmount', openAmount); @@ -175,7 +194,6 @@ export class ItemSlidingGesture extends DragGesture { } else { this.off('tap', this.tap); } - this.enableScroll(!openAmount); } } @@ -194,13 +212,6 @@ export class ItemSlidingGesture extends DragGesture { this.data[itemContainerEle.$ionSlide][key] = value; } - enableScroll(shouldEnable) { - let scrollContentEle = closest(this.listEle, 'scroll-content'); - if (scrollContentEle) { - scrollContentEle[shouldEnable ? 'removeEventListener' : 'addEventListener']('touchstart', preventDefault); - } - } - unlisten() { super.unlisten(); this.listEle = null; @@ -213,6 +224,7 @@ function isItemActive(ele, isActive) { } function preventDefault(ev) { + console.debug('sliding item preventDefault', ev.type); ev.preventDefault(); } diff --git a/ionic/components/item/test/sliding/index.ts b/ionic/components/item/test/sliding/index.ts index ce7d1bae00..cd1f45a908 100644 --- a/ionic/components/item/test/sliding/index.ts +++ b/ionic/components/item/test/sliding/index.ts @@ -1,40 +1,49 @@ -import {App, IonicApp} from 'ionic/ionic'; +import {App, IonicApp, Popup} from 'ionic/ionic'; @App({ templateUrl: 'main.html' }) class E2EApp { - constructor(private app: IonicApp) { - setTimeout(() => { - this.shouldShow = true; - }, 10); + constructor(private app: IonicApp, private popup: Popup) { + this.items = []; + for (let x = 0; x < 20; x++) { + this.items.push(x); + } + + this.shouldShow = true; } closeOpened() { this.app.getComponent('myList').closeSlidingItems(); } - getItems() { - let items = []; - for (let x = 0; x < 20; x++) { - items.push(x); - } - return items; - } - didClick(item) { - console.log('CLICK') + console.log('Clicked, ion-item'); + + this.popup.alert({ + title: 'Clicked ion-item!' + }); } archive(item) { - console.log('Archive', item); - item.close(); + console.log('Archive, ion-item-options button', item); + + this.popup.alert({ + title: 'Archived!' + }).then(() => { + item.close(); + }); } del(item) { - console.log('Delete', item); - item.close(); + console.log('Delete ion-item-options button', item); + + this.popup.alert({ + title: 'Deleted!' + }).then(() => { + item.close(); + }); } reload() { diff --git a/ionic/components/item/test/sliding/main.html b/ionic/components/item/test/sliding/main.html index af2b74a863..43dbff1a36 100644 --- a/ionic/components/item/test/sliding/main.html +++ b/ionic/components/item/test/sliding/main.html @@ -83,7 +83,7 @@ - +

ng-for {{data}}

 @@ -105,3 +105,5 @@ height: 100px; } + + diff --git a/ionic/components/overlay/overlay-controller.ts b/ionic/components/overlay/overlay-controller.ts index 4435381af8..084e9a78d6 100644 --- a/ionic/components/overlay/overlay-controller.ts +++ b/ionic/components/overlay/overlay-controller.ts @@ -9,7 +9,7 @@ export class OverlayController { open(componentType, params = {}, opts = {}) { if (!this.nav) { - console.error(' required in root template (app.html) to use: ' + overlayType); + console.error(' required in root template (app.html) to use: ' + opts.pageType); return Promise.reject(); }