diff --git a/ionic/components/content/content.ts b/ionic/components/content/content.ts index 0043c99310..8e875c55cd 100644 --- a/ionic/components/content/content.ts +++ b/ionic/components/content/content.ts @@ -73,15 +73,16 @@ export class Content extends Ion { } onScrollEnd(callback) { - let timerId; + let timerId, deregister; function debounce() { timerId = setTimeout(() => { - + deregister(); + callback(); }, 250); } - this.addScrollEventListener(debounce); + deregister = this.addScrollEventListener(debounce); } /** diff --git a/ionic/components/item/item-sliding-gesture.ts b/ionic/components/item/item-sliding-gesture.ts index 1f3687824a..83b16407c8 100644 --- a/ionic/components/item/item-sliding-gesture.ts +++ b/ionic/components/item/item-sliding-gesture.ts @@ -9,7 +9,7 @@ export class ItemSlidingGesture extends DragGesture { constructor(list: List, listEle) { super(listEle, { direction: 'x', - threshold: 40 + threshold: DRAG_THRESHOLD }); this.data = {}; @@ -24,7 +24,7 @@ export class ItemSlidingGesture extends DragGesture { if (!isFromOptionButtons(ev.target)) { let didClose = this.closeOpened(); if (didClose) { - ev.preventDefault(); + preventDefault(ev); } } }); @@ -46,7 +46,7 @@ export class ItemSlidingGesture extends DragGesture { if (this.preventDrag) { this.closeOpened(ev); - return ev.preventDefault(); + return preventDefault(ev); } itemContainerEle.classList.add('active-slide'); @@ -60,6 +60,11 @@ export class ItemSlidingGesture extends DragGesture { } onDrag(ev) { + if (Math.abs(ev.deltaY) > 30) { + this.preventDrag = true; + return this.closeOpened(ev); + } + let itemContainerEle = getItemConatiner(ev.target); if (!itemContainerEle || !isActive(itemContainerEle) || this.preventDrag) return; @@ -142,7 +147,7 @@ export class ItemSlidingGesture extends DragGesture { clearTimeout(this.get(itemContainerEle).timerId); - if (openAmount > 0) { + if (openAmount) { this.openItems++; } else { @@ -157,7 +162,11 @@ export class ItemSlidingGesture extends DragGesture { } slidingEle.style[CSS.transition] = (isFinal ? '' : 'none'); - slidingEle.style[CSS.transform] = (openAmount === 0 ? '' : 'translate3d(' + -openAmount + 'px,0,0)'); + slidingEle.style[CSS.transform] = (openAmount ? 'translate3d(' + -openAmount + 'px,0,0)' : ''); + + if (isFinal) { + this.enableScroll(!openAmount); + } } getOpenAmount(itemContainerEle) { @@ -175,12 +184,23 @@ 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; } } +function preventDefault(ev) { + ev.preventDefault(); +} + function getItemConatiner(ele) { return closest(ele, 'ion-item-sliding', true); } @@ -199,3 +219,6 @@ function getOptionsWidth(itemContainerEle) { function isActive(itemContainerEle) { return itemContainerEle.classList.contains('active-slide'); } + + +const DRAG_THRESHOLD = 20; diff --git a/ionic/components/item/test/sliding/index.ts b/ionic/components/item/test/sliding/index.ts index 96d33e8aca..04bc50df9a 100644 --- a/ionic/components/item/test/sliding/index.ts +++ b/ionic/components/item/test/sliding/index.ts @@ -16,7 +16,11 @@ class E2EApp { } getItems() { - return [0,1]; + let items = []; + for (let x = 0; x < 20; x++) { + items.push(x); + } + return items; } didClick(ev, item) { @@ -32,4 +36,8 @@ class E2EApp { console.log('Delete', ev, item); item.close(); } + + reload() { + window.location.reload(); + } } diff --git a/ionic/components/item/test/sliding/main.html b/ionic/components/item/test/sliding/main.html index 7a7d3d21eb..0b2884cbbe 100644 --- a/ionic/components/item/test/sliding/main.html +++ b/ionic/components/item/test/sliding/main.html @@ -1,4 +1,9 @@ -Sliding Items + + Sliding Items + + + + diff --git a/ionic/gestures/drag-gesture.ts b/ionic/gestures/drag-gesture.ts index 170265d64f..e62502fe03 100644 --- a/ionic/gestures/drag-gesture.ts +++ b/ionic/gestures/drag-gesture.ts @@ -29,6 +29,8 @@ export class DragGesture extends Gesture { this.onDragEnd(ev); this.dragging = false; }); + + this.hammertime.get('pan').set(this._options); } onDrag() {}