javascript/ionic-framework
1
0
Fork 0
mirror of https://github.com/ionic-team/ionic-framework.git synced 2025-11-10 00:27:41 +08:00
Code Issues Packages Projects Releases Wiki Activity

fix(nav): swipe to go back gesture

Browse Source 
- smoother by debouncing touch events (reduces bank)
- dynamic animation duration
- intelligent behavior based in the position, speed and direccion of the swipe (sharing logic with sliding item)

fixes #8919
fixes #8958
fixes #7934
This commit is contained in:
Manu Mtz.-Almeida
2016-11-01 19:38:27 +01:00
committed by Adam Bradley
parent 033e1eae17
commit 04d61ee47a
20 changed files with 273 additions and 148 deletions
Download Patch File Download Diff File Expand all files Collapse all files

32
src/navigation/swipe-back.ts
View File

@ -1,23 +1,27 @@
import { assign } from '../util/util';
import { GestureController, GesturePriority } from '../gestures/gesture-controller';
import { assign, swipeShouldReset } from '../util/util';
import { GestureController, GesturePriority, DisableScroll } from '../gestures/gesture-controller';
import { NavControllerBase } from './nav-controller-base';
import { SlideData } from '../gestures/slide-gesture';
import { SlideEdgeGesture } from '../gestures/slide-edge-gesture';
import { NativeRafDebouncer } from '../util/debouncer';
export class SwipeBackGesture extends SlideEdgeGesture {
constructor(
private _nav: NavControllerBase,
element: HTMLElement,
gestureCtlr: GestureController,
options: any,
private _nav: NavControllerBase,
gestureCtlr: GestureController
) {
super(element, assign({
direction: 'x',
maxEdgeStart: 75,
zone: false,
threshold: 0,
maxAngle: 40,
debouncer: new NativeRafDebouncer(),
gesture: gestureCtlr.create('goback-swipe', {
priority: GesturePriority.GoBackSwipe,
disableScroll: DisableScroll.DuringCapture
})
}, options));
}
@ -32,23 +36,25 @@ export class SwipeBackGesture extends SlideEdgeGesture {
);
}
onSlideBeforeStart(ev: any) {
console.debug('swipeBack, onSlideBeforeStart', ev.type);
this._nav.swipeBackStart();
}
onSlide(slide: SlideData) {
onSlide(slide: SlideData, ev: any) {
ev.preventDefault();
ev.stopPropagation();
let stepValue = (slide.distance / slide.max);
console.debug('swipeBack, onSlide, distance', slide.distance, 'max', slide.max, 'stepValue', stepValue);
this._nav.swipeBackProgress(stepValue);
}
onSlideEnd(slide: SlideData, ev: any) {
let shouldComplete = (Math.abs(slide.velocity) > 0.2 || Math.abs(slide.delta) > Math.abs(slide.max) * 0.5);
let currentStepValue = (slide.distance / slide.max);
const currentStepValue = (slide.distance / slide.max);
const isResetDirecction = slide.velocity < 0;
const isMovingFast = Math.abs(slide.velocity) > 0.4;
const isInResetZone = Math.abs(slide.delta) < Math.abs(slide.max) * 0.5;
const shouldComplete = !swipeShouldReset(isResetDirecction, isMovingFast, isInResetZone);
console.debug('swipeBack, onSlideEnd, shouldComplete', shouldComplete, 'currentStepValue', currentStepValue);
this._nav.swipeBackEnd(shouldComplete, currentStepValue);
}
}