From 7917ba96ef49ceaaaa4aa421bbf966b42db2c7dd Mon Sep 17 00:00:00 2001 From: "Manu Mtz.-Almeida" Date: Sun, 26 Aug 2018 01:26:36 +0200 Subject: [PATCH] refactor(all): consistent gesture events --- .../components/item-sliding/item-sliding.tsx | 12 +++++----- core/src/components/menu/menu.tsx | 12 +++++----- core/src/components/nav/nav.tsx | 24 ++++++++++--------- .../picker-column/picker-column.tsx | 12 +++++----- core/src/components/range/range.tsx | 12 +++++----- .../reorder-group/reorder-group.tsx | 14 +++++------ core/src/components/toggle/toggle.tsx | 12 +++++----- 7 files changed, 50 insertions(+), 48 deletions(-) diff --git a/core/src/components/item-sliding/item-sliding.tsx b/core/src/components/item-sliding/item-sliding.tsx index 4b71f3dd46..0d8f5b7a08 100644 --- a/core/src/components/item-sliding/item-sliding.tsx +++ b/core/src/components/item-sliding/item-sliding.tsx @@ -76,9 +76,9 @@ export class ItemSliding { gesturePriority: 20, threshold: 5, canStart: this.canStart.bind(this), - onStart: this.onDragStart.bind(this), - onMove: this.onDragMove.bind(this), - onEnd: this.onDragEnd.bind(this), + onStart: this.onStart.bind(this), + onMove: this.onMove.bind(this), + onEnd: this.onEnd.bind(this), }); this.disabledChanged(); } @@ -166,7 +166,7 @@ export class ItemSliding { return !!(this.rightOptions || this.leftOptions); } - private onDragStart() { + private onStart() { if (this.list) { this.list.setOpenItem(this.el); } @@ -185,7 +185,7 @@ export class ItemSliding { } } - private onDragMove(gesture: GestureDetail) { + private onMove(gesture: GestureDetail) { if (this.optsDirty) { this.calculateOptsWidth(); } @@ -212,7 +212,7 @@ export class ItemSliding { this.setOpenAmount(openAmount, false); } - private onDragEnd(gesture: GestureDetail) { + private onEnd(gesture: GestureDetail) { const velocity = gesture.velocityX; let restingPoint = (this.openAmount > 0) diff --git a/core/src/components/menu/menu.tsx b/core/src/components/menu/menu.tsx index 3b1a4aa5d5..fba529b791 100644 --- a/core/src/components/menu/menu.tsx +++ b/core/src/components/menu/menu.tsx @@ -183,9 +183,9 @@ export class Menu implements MenuI { threshold: 10, canStart: this.canStart.bind(this), onWillStart: this.onWillStart.bind(this), - onStart: this.onDragStart.bind(this), - onMove: this.onDragMove.bind(this), - onEnd: this.onDragEnd.bind(this), + onStart: this.onStart.bind(this), + onMove: this.onMove.bind(this), + onEnd: this.onEnd.bind(this), }); // mask it as enabled / disabled @@ -329,7 +329,7 @@ export class Menu implements MenuI { return this.loadAnimation(); } - private onDragStart() { + private onStart() { if (!this.isAnimating || !this.animation) { assert(false, 'isAnimating has to be true'); return; @@ -339,7 +339,7 @@ export class Menu implements MenuI { this.animation.reverse(this._isOpen).progressStart(); } - private onDragMove(detail: GestureDetail) { + private onMove(detail: GestureDetail) { if (!this.isAnimating || !this.animation) { assert(false, 'isAnimating has to be true'); return; @@ -350,7 +350,7 @@ export class Menu implements MenuI { this.animation.progressStep(stepValue); } - private onDragEnd(detail: GestureDetail) { + private onEnd(detail: GestureDetail) { if (!this.isAnimating || !this.animation) { assert(false, 'isAnimating has to be true'); return; diff --git a/core/src/components/nav/nav.tsx b/core/src/components/nav/nav.tsx index deae4691cc..b30a4fc407 100644 --- a/core/src/components/nav/nav.tsx +++ b/core/src/components/nav/nav.tsx @@ -116,10 +116,10 @@ export class Nav implements NavOutlet { gestureName: 'goback-swipe', gesturePriority: 30, threshold: 10, - canStart: this.canSwipeBack.bind(this), - onStart: this.swipeBackStart.bind(this), - onMove: this.swipeBackProgress.bind(this), - onEnd: this.swipeBackEnd.bind(this), + canStart: this.canStart.bind(this), + onStart: this.onStart.bind(this), + onMove: this.onMove.bind(this), + onEnd: this.onEnd.bind(this), }); this.swipeGestureChanged(); } @@ -888,7 +888,13 @@ export class Nav implements NavOutlet { } } - private swipeBackStart() { + private canStart(): boolean { + return !!this.swipeGesture && + !this.isTransitioning && + this.canGoBack(); + } + + private onStart() { if (this.isTransitioning || this.transInstr.length > 0) { return; } @@ -909,7 +915,7 @@ export class Nav implements NavOutlet { ); } - private swipeBackProgress(detail: GestureDetail) { + private onMove(detail: GestureDetail) { if (this.sbTrns) { // continue to disable the app while actively dragging this.isTransitioning = true; @@ -922,7 +928,7 @@ export class Nav implements NavOutlet { } } - private swipeBackEnd(detail: GestureDetail) { + private onEnd(detail: GestureDetail) { if (this.sbTrns) { // the swipe back gesture has ended const delta = detail.deltaX; @@ -945,10 +951,6 @@ export class Nav implements NavOutlet { } } - private canSwipeBack(): boolean { - return !!this.swipeGesture && !this.isTransitioning && this.canGoBack(); - } - render() { return [ this.mode === 'ios' &&
, diff --git a/core/src/components/picker-column/picker-column.tsx b/core/src/components/picker-column/picker-column.tsx index bfc45592df..05a6f22a46 100644 --- a/core/src/components/picker-column/picker-column.tsx +++ b/core/src/components/picker-column/picker-column.tsx @@ -58,9 +58,9 @@ export class PickerColumnCmp { gestureName: 'picker-swipe', gesturePriority: 100, threshold: 0, - onStart: this.onDragStart.bind(this), - onMove: this.onDragMove.bind(this), - onEnd: this.onDragEnd.bind(this), + onStart: this.onStart.bind(this), + onMove: this.onMove.bind(this), + onEnd: this.onEnd.bind(this), }); this.gesture.setDisabled(false); } @@ -200,7 +200,7 @@ export class PickerColumnCmp { // TODO should this check disabled? - private onDragStart(detail: GestureDetail) { + private onStart(detail: GestureDetail) { // We have to prevent default in order to block scrolling under the picker // but we DO NOT have to stop propagation, since we still want // some "click" events to capture @@ -225,7 +225,7 @@ export class PickerColumnCmp { this.maxY = -(maxY * this.optHeight); } - private onDragMove(detail: GestureDetail) { + private onMove(detail: GestureDetail) { if (detail.event) { detail.event.preventDefault(); detail.event.stopPropagation(); @@ -251,7 +251,7 @@ export class PickerColumnCmp { this.update(y, 0, false); } - private onDragEnd(detail: GestureDetail) { + private onEnd(detail: GestureDetail) { if (this.bounceFrom > 0) { // bounce back up this.update(this.minY, 100, true); diff --git a/core/src/components/range/range.tsx b/core/src/components/range/range.tsx index f47ecd4f82..9d84c5c9ee 100644 --- a/core/src/components/range/range.tsx +++ b/core/src/components/range/range.tsx @@ -150,9 +150,9 @@ export class Range { gestureName: 'range', gesturePriority: 100, threshold: 0, - onStart: this.onDragStart.bind(this), - onMove: this.onDragMove.bind(this), - onEnd: this.onDragEnd.bind(this), + onStart: this.onStart.bind(this), + onMove: this.onMove.bind(this), + onEnd: this.onEnd.bind(this), }); this.gesture.setDisabled(this.disabled); } @@ -229,7 +229,7 @@ export class Range { } } - private onDragStart(detail: GestureDetail) { + private onStart(detail: GestureDetail) { this.fireFocus(); const rect = this.rect = this.rangeSlider!.getBoundingClientRect() as any; @@ -247,11 +247,11 @@ export class Range { this.update(currentX); } - private onDragMove(detail: GestureDetail) { + private onMove(detail: GestureDetail) { this.update(detail.currentX); } - private onDragEnd(detail: GestureDetail) { + private onEnd(detail: GestureDetail) { this.update(detail.currentX); this.pressedKnob = undefined; this.fireBlur(); diff --git a/core/src/components/reorder-group/reorder-group.tsx b/core/src/components/reorder-group/reorder-group.tsx index 9d71349109..3400309c27 100644 --- a/core/src/components/reorder-group/reorder-group.tsx +++ b/core/src/components/reorder-group/reorder-group.tsx @@ -58,15 +58,15 @@ export class ReorderGroup { direction: 'y', passive: false, canStart: this.canStart.bind(this), - onStart: this.onDragStart.bind(this), - onMove: this.onDragMove.bind(this), - onEnd: this.onDragEnd.bind(this), + onStart: this.onStart.bind(this), + onMove: this.onMove.bind(this), + onEnd: this.onEnd.bind(this), }); this.disabledChanged(); } componentDidUnload() { - this.onDragEnd(); + this.onEnd(); } private canStart(ev: GestureDetail): boolean { @@ -87,7 +87,7 @@ export class ReorderGroup { return true; } - private onDragStart(ev: GestureDetail) { + private onStart(ev: GestureDetail) { ev.event.preventDefault(); const item = this.selectedItemEl = ev.data; @@ -131,7 +131,7 @@ export class ReorderGroup { hapticSelectionStart(); } - private onDragMove(ev: GestureDetail) { + private onMove(ev: GestureDetail) { const selectedItem = this.selectedItemEl; if (!selectedItem) { return; @@ -158,7 +158,7 @@ export class ReorderGroup { selectedItem.style.transform = `translateY(${deltaY}px)`; } - private onDragEnd() { + private onEnd() { this.activated = false; const selectedItem = this.selectedItemEl; if (!selectedItem) { diff --git a/core/src/components/toggle/toggle.tsx b/core/src/components/toggle/toggle.tsx index 4e19f8acaa..c4bb37d86a 100644 --- a/core/src/components/toggle/toggle.tsx +++ b/core/src/components/toggle/toggle.tsx @@ -118,14 +118,14 @@ export class Toggle { gestureName: 'toggle', gesturePriority: 100, threshold: 0, - onStart: this.onDragStart.bind(this), - onMove: this.onDragMove.bind(this), - onEnd: this.onDragEnd.bind(this), + onStart: this.onStart.bind(this), + onMove: this.onMove.bind(this), + onEnd: this.onEnd.bind(this), }); this.disabledChanged(); } - private onDragStart(detail: GestureDetail) { + private onStart(detail: GestureDetail) { this.pivotX = detail.currentX; this.activated = true; @@ -134,7 +134,7 @@ export class Toggle { return true; } - private onDragMove(detail: GestureDetail) { + private onMove(detail: GestureDetail) { const currentX = detail.currentX; if (shouldToggle(this.checked, currentX - this.pivotX, -15)) { this.checked = !this.checked; @@ -143,7 +143,7 @@ export class Toggle { } } - private onDragEnd(detail: GestureDetail) { + private onEnd(detail: GestureDetail) { const delta = detail.currentX - this.pivotX; if (shouldToggle(this.checked, delta, 4)) { this.checked = !this.checked;