javascript/ionic-framework
1
0
Fork 0
mirror of https://github.com/ionic-team/ionic-framework.git synced 2025-08-18 19:21:34 +08:00
Code Issues Packages Projects Releases Wiki Activity

refactor(all): consistent gesture events

Browse Source
This commit is contained in:
Manu Mtz.-Almeida
2018-08-26 01:26:36 +02:00
parent c1c51025f3
commit 7917ba96ef
7 changed files with 50 additions and 48 deletions
Download Patch File Download Diff File Expand all files Collapse all files

12
core/src/components/item-sliding/item-sliding.tsx
View File

@ -76,9 +76,9 @@ export class ItemSliding {
gesturePriority: 20, gesturePriority: 20,
threshold: 5, threshold: 5,
canStart: this.canStart.bind(this), canStart: this.canStart.bind(this),
onStart: this.onDragStart.bind(this), onStart: this.onStart.bind(this),
onMove: this.onDragMove.bind(this), onMove: this.onMove.bind(this),
onEnd: this.onDragEnd.bind(this), onEnd: this.onEnd.bind(this),
}); });
this.disabledChanged(); this.disabledChanged();
} }
@ -166,7 +166,7 @@ export class ItemSliding {
return !!(this.rightOptions || this.leftOptions); return !!(this.rightOptions || this.leftOptions);
} }
private onDragStart() { private onStart() {
if (this.list) { if (this.list) {
this.list.setOpenItem(this.el); this.list.setOpenItem(this.el);
} }
@ -185,7 +185,7 @@ export class ItemSliding {
} }
} }
private onDragMove(gesture: GestureDetail) { private onMove(gesture: GestureDetail) {
if (this.optsDirty) { if (this.optsDirty) {
this.calculateOptsWidth(); this.calculateOptsWidth();
} }
@ -212,7 +212,7 @@ export class ItemSliding {
this.setOpenAmount(openAmount, false); this.setOpenAmount(openAmount, false);
} }
private onDragEnd(gesture: GestureDetail) { private onEnd(gesture: GestureDetail) {
const velocity = gesture.velocityX; const velocity = gesture.velocityX;
let restingPoint = (this.openAmount > 0) let restingPoint = (this.openAmount > 0)

12
core/src/components/menu/menu.tsx
View File

@ -183,9 +183,9 @@ export class Menu implements MenuI {
threshold: 10, threshold: 10,
canStart: this.canStart.bind(this), canStart: this.canStart.bind(this),
onWillStart: this.onWillStart.bind(this), onWillStart: this.onWillStart.bind(this),
onStart: this.onDragStart.bind(this), onStart: this.onStart.bind(this),
onMove: this.onDragMove.bind(this), onMove: this.onMove.bind(this),
onEnd: this.onDragEnd.bind(this), onEnd: this.onEnd.bind(this),
}); });
// mask it as enabled / disabled // mask it as enabled / disabled
@ -329,7 +329,7 @@ export class Menu implements MenuI {
return this.loadAnimation(); return this.loadAnimation();
} }
private onDragStart() { private onStart() {
if (!this.isAnimating || !this.animation) { if (!this.isAnimating || !this.animation) {
assert(false, 'isAnimating has to be true'); assert(false, 'isAnimating has to be true');
return; return;
@ -339,7 +339,7 @@ export class Menu implements MenuI {
this.animation.reverse(this._isOpen).progressStart(); this.animation.reverse(this._isOpen).progressStart();
} }
private onDragMove(detail: GestureDetail) { private onMove(detail: GestureDetail) {
if (!this.isAnimating || !this.animation) { if (!this.isAnimating || !this.animation) {
assert(false, 'isAnimating has to be true'); assert(false, 'isAnimating has to be true');
return; return;
@ -350,7 +350,7 @@ export class Menu implements MenuI {
this.animation.progressStep(stepValue); this.animation.progressStep(stepValue);
} }
private onDragEnd(detail: GestureDetail) { private onEnd(detail: GestureDetail) {
if (!this.isAnimating || !this.animation) { if (!this.isAnimating || !this.animation) {
assert(false, 'isAnimating has to be true'); assert(false, 'isAnimating has to be true');
return; return;

24
core/src/components/nav/nav.tsx
View File

@ -116,10 +116,10 @@ export class Nav implements NavOutlet {
gestureName: 'goback-swipe', gestureName: 'goback-swipe',
gesturePriority: 30, gesturePriority: 30,
threshold: 10, threshold: 10,
canStart: this.canSwipeBack.bind(this), canStart: this.canStart.bind(this),
onStart: this.swipeBackStart.bind(this), onStart: this.onStart.bind(this),
onMove: this.swipeBackProgress.bind(this), onMove: this.onMove.bind(this),
onEnd: this.swipeBackEnd.bind(this), onEnd: this.onEnd.bind(this),
}); });
this.swipeGestureChanged(); 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) { if (this.isTransitioning || this.transInstr.length > 0) {
return; return;
} }
@ -909,7 +915,7 @@ export class Nav implements NavOutlet {
); );
} }
private swipeBackProgress(detail: GestureDetail) { private onMove(detail: GestureDetail) {
if (this.sbTrns) { if (this.sbTrns) {
// continue to disable the app while actively dragging // continue to disable the app while actively dragging
this.isTransitioning = true; this.isTransitioning = true;
@ -922,7 +928,7 @@ export class Nav implements NavOutlet {
} }
} }
private swipeBackEnd(detail: GestureDetail) { private onEnd(detail: GestureDetail) {
if (this.sbTrns) { if (this.sbTrns) {
// the swipe back gesture has ended // the swipe back gesture has ended
const delta = detail.deltaX; const delta = detail.deltaX;
@ -945,10 +951,6 @@ export class Nav implements NavOutlet {
} }
} }
private canSwipeBack(): boolean {
return !!this.swipeGesture && !this.isTransitioning && this.canGoBack();
}
render() { render() {
return [ return [
this.mode === 'ios' && <div class="nav-decor" />, this.mode === 'ios' && <div class="nav-decor" />,

12
core/src/components/picker-column/picker-column.tsx
View File

@ -58,9 +58,9 @@ export class PickerColumnCmp {
gestureName: 'picker-swipe', gestureName: 'picker-swipe',
gesturePriority: 100, gesturePriority: 100,
threshold: 0, threshold: 0,
onStart: this.onDragStart.bind(this), onStart: this.onStart.bind(this),
onMove: this.onDragMove.bind(this), onMove: this.onMove.bind(this),
onEnd: this.onDragEnd.bind(this), onEnd: this.onEnd.bind(this),
}); });
this.gesture.setDisabled(false); this.gesture.setDisabled(false);
} }
@ -200,7 +200,7 @@ export class PickerColumnCmp {
// TODO should this check disabled? // 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 // 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 // but we DO NOT have to stop propagation, since we still want
// some "click" events to capture // some "click" events to capture
@ -225,7 +225,7 @@ export class PickerColumnCmp {
this.maxY = -(maxY * this.optHeight); this.maxY = -(maxY * this.optHeight);
} }
private onDragMove(detail: GestureDetail) { private onMove(detail: GestureDetail) {
if (detail.event) { if (detail.event) {
detail.event.preventDefault(); detail.event.preventDefault();
detail.event.stopPropagation(); detail.event.stopPropagation();
@ -251,7 +251,7 @@ export class PickerColumnCmp {
this.update(y, 0, false); this.update(y, 0, false);
} }
private onDragEnd(detail: GestureDetail) { private onEnd(detail: GestureDetail) {
if (this.bounceFrom > 0) { if (this.bounceFrom > 0) {
// bounce back up // bounce back up
this.update(this.minY, 100, true); this.update(this.minY, 100, true);

12
core/src/components/range/range.tsx
View File

@ -150,9 +150,9 @@ export class Range {
gestureName: 'range', gestureName: 'range',
gesturePriority: 100, gesturePriority: 100,
threshold: 0, threshold: 0,
onStart: this.onDragStart.bind(this), onStart: this.onStart.bind(this),
onMove: this.onDragMove.bind(this), onMove: this.onMove.bind(this),
onEnd: this.onDragEnd.bind(this), onEnd: this.onEnd.bind(this),
}); });
this.gesture.setDisabled(this.disabled); this.gesture.setDisabled(this.disabled);
} }
@ -229,7 +229,7 @@ export class Range {
} }
} }
private onDragStart(detail: GestureDetail) { private onStart(detail: GestureDetail) {
this.fireFocus(); this.fireFocus();
const rect = this.rect = this.rangeSlider!.getBoundingClientRect() as any; const rect = this.rect = this.rangeSlider!.getBoundingClientRect() as any;
@ -247,11 +247,11 @@ export class Range {
this.update(currentX); this.update(currentX);
} }
private onDragMove(detail: GestureDetail) { private onMove(detail: GestureDetail) {
this.update(detail.currentX); this.update(detail.currentX);
} }
private onDragEnd(detail: GestureDetail) { private onEnd(detail: GestureDetail) {
this.update(detail.currentX); this.update(detail.currentX);
this.pressedKnob = undefined; this.pressedKnob = undefined;
this.fireBlur(); this.fireBlur();

14
core/src/components/reorder-group/reorder-group.tsx
View File

@ -58,15 +58,15 @@ export class ReorderGroup {
direction: 'y', direction: 'y',
passive: false, passive: false,
canStart: this.canStart.bind(this), canStart: this.canStart.bind(this),
onStart: this.onDragStart.bind(this), onStart: this.onStart.bind(this),
onMove: this.onDragMove.bind(this), onMove: this.onMove.bind(this),
onEnd: this.onDragEnd.bind(this), onEnd: this.onEnd.bind(this),
}); });
this.disabledChanged(); this.disabledChanged();
} }
componentDidUnload() { componentDidUnload() {
this.onDragEnd(); this.onEnd();
} }
private canStart(ev: GestureDetail): boolean { private canStart(ev: GestureDetail): boolean {
@ -87,7 +87,7 @@ export class ReorderGroup {
return true; return true;
} }
private onDragStart(ev: GestureDetail) { private onStart(ev: GestureDetail) {
ev.event.preventDefault(); ev.event.preventDefault();
const item = this.selectedItemEl = ev.data; const item = this.selectedItemEl = ev.data;
@ -131,7 +131,7 @@ export class ReorderGroup {
hapticSelectionStart(); hapticSelectionStart();
} }
private onDragMove(ev: GestureDetail) { private onMove(ev: GestureDetail) {
const selectedItem = this.selectedItemEl; const selectedItem = this.selectedItemEl;
if (!selectedItem) { if (!selectedItem) {
return; return;
@ -158,7 +158,7 @@ export class ReorderGroup {
selectedItem.style.transform = `translateY(${deltaY}px)`; selectedItem.style.transform = `translateY(${deltaY}px)`;
} }
private onDragEnd() { private onEnd() {
this.activated = false; this.activated = false;
const selectedItem = this.selectedItemEl; const selectedItem = this.selectedItemEl;
if (!selectedItem) { if (!selectedItem) {

12
core/src/components/toggle/toggle.tsx
View File

@ -118,14 +118,14 @@ export class Toggle {
gestureName: 'toggle', gestureName: 'toggle',
gesturePriority: 100, gesturePriority: 100,
threshold: 0, threshold: 0,
onStart: this.onDragStart.bind(this), onStart: this.onStart.bind(this),
onMove: this.onDragMove.bind(this), onMove: this.onMove.bind(this),
onEnd: this.onDragEnd.bind(this), onEnd: this.onEnd.bind(this),
}); });
this.disabledChanged(); this.disabledChanged();
} }
private onDragStart(detail: GestureDetail) { private onStart(detail: GestureDetail) {
this.pivotX = detail.currentX; this.pivotX = detail.currentX;
this.activated = true; this.activated = true;
@ -134,7 +134,7 @@ export class Toggle {
return true; return true;
} }
private onDragMove(detail: GestureDetail) { private onMove(detail: GestureDetail) {
const currentX = detail.currentX; const currentX = detail.currentX;
if (shouldToggle(this.checked, currentX - this.pivotX, -15)) { if (shouldToggle(this.checked, currentX - this.pivotX, -15)) {
this.checked = !this.checked; 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; const delta = detail.currentX - this.pivotX;
if (shouldToggle(this.checked, delta, 4)) { if (shouldToggle(this.checked, delta, 4)) {
this.checked = !this.checked; this.checked = !this.checked;