javascript/ionic-framework
1
0
Fork 0
mirror of https://github.com/ionic-team/ionic-framework.git synced 2025-08-23 05:58:26 +08:00
Code Issues Packages Projects Releases Wiki Activity

refactor(gestures): no longer use hammer for drag gestures

Browse Source
This commit is contained in:
Manu Mtz.-Almeida
2016-07-15 18:23:36 +02:00
committed by Adam Bradley
parent 11a24b98aa
commit 5909fa4ba5
12 changed files with 299 additions and 316 deletions
Download Patch File Download Diff File Expand all files Collapse all files

95
src/components/menu/menu-gestures.ts
View File

@ -2,69 +2,35 @@ import { Menu } from './menu';
import { SlideEdgeGesture } from '../../gestures/slide-edge-gesture';
import { SlideData } from '../../gestures/slide-gesture';
import { assign } from '../../util/util';
import { GestureDelegate, GesturePriority } from '../../gestures/gesture-controller';
const DEGREES_TO_RADIANS = Math.PI / 180;
const MIN_COSINE = Math.cos(40 * DEGREES_TO_RADIANS);
import { GesturePriority } from '../../gestures/gesture-controller';
/**
* Gesture attached to the content which the menu is assigned to
*/
export class MenuContentGesture extends SlideEdgeGesture {
gesture: GestureDelegate;
constructor(public menu: Menu, contentEle: HTMLElement, options: any = {}) {
super(contentEle, assign({
direction: 'x',
edge: menu.side,
threshold: 0,
maxEdgeStart: menu.maxEdgeStart || 75
maxEdgeStart: menu.maxEdgeStart || 50,
maxAngle: 40,
gesture: menu.gestureCtrl.create('menu-swipe', {
priority: GesturePriority.MenuSwipe,
})
}, options));
this.gesture = menu.gestureCtrl.create('menu-swipe', {
priority: GesturePriority.NavigationOptional,
});
}
canStart(ev: any): boolean {
if (this.shouldStart(ev)) {
return this.gesture.capture();
}
this.gesture.release();
return false;
}
shouldStart(ev: any): boolean {
let menu = this.menu;
if (!menu.enabled || !menu.swipeEnabled) {
console.debug('menu can not start, isEnabled:', menu.enabled, 'isSwipeEnabled:', menu.swipeEnabled, 'side:', menu.side);
return false;
}
if (ev.distance > 50) {
// the distance is longer than you'd expect a side menu swipe to be
console.debug('menu can not start, distance too far:', ev.distance, 'side:', menu.side);
return false;
}
console.debug('menu shouldCapture,', menu.side, 'isOpen', menu.isOpen, 'angle', ev.angle, 'distance', ev.distance);
if (menu.isOpen) {
return true;
}
let cosine = Math.cos(ev.angle * DEGREES_TO_RADIANS);
if (menu.side === 'right') {
if (cosine < -MIN_COSINE) {
return super.canStart(ev);
}
} else {
if (cosine > MIN_COSINE) {
return super.canStart(ev);
}
}
return false;
return (
menu.enabled &&
menu.swipeEnabled &&
(menu.isOpen || super.canStart(ev))
);
}
// Set CSS, then wait one frame for it to apply before sliding starts
onSlideBeforeStart(slide: SlideData, ev: any) {
console.debug('menu gesture, onSlideBeforeStart', this.menu.side);
@ -75,29 +41,26 @@ export class MenuContentGesture extends SlideEdgeGesture {
let z = (this.menu.side === 'right' ? slide.min : slide.max);
let stepValue = (slide.distance / z);
console.debug('menu gesture, onSlide', this.menu.side, 'distance', slide.distance, 'min', slide.min, 'max', slide.max, 'z', z, 'stepValue', stepValue);
ev.srcEvent.preventDefault();
ev.preventDefault();
this.menu.swipeProgress(stepValue);
}
onSlideEnd(slide: SlideData, ev: any) {
this.gesture.release();
let z = (this.menu.side === 'right' ? slide.min : slide.max);
let currentStepValue = (slide.distance / z);
let velocity = slide.velocity;
z = Math.abs(z * 0.5);
let shouldCompleteRight = (ev.velocityX >= 0)
&& (ev.velocityX > 0.2 || slide.delta > z);
let shouldCompleteRight = (velocity >= 0)
&& (velocity > 0.2 || slide.delta > z);
let shouldCompleteLeft = (ev.velocityX <= 0)
&& (ev.velocityX < -0.2 || slide.delta < -z);
let shouldCompleteLeft = (velocity <= 0)
&& (velocity < -0.2 || slide.delta < -z);
console.debug(
'menu gesture, onSlide', this.menu.side,
'distance', slide.distance,
'delta', slide.delta,
'velocityX', ev.velocityX,
'velocity', velocity,
'min', slide.min,
'max', slide.max,
'shouldCompleteLeft', shouldCompleteLeft,
@ -131,27 +94,5 @@ export class MenuContentGesture extends SlideEdgeGesture {
max: this.menu.width()
};
}
unlisten() {
this.gesture.release();
super.unlisten();
}
destroy() {
this.gesture.destroy();
super.destroy();
}
}
/**
* Gesture attached to the actual menu itself
*/
export class MenuTargetGesture extends MenuContentGesture {
constructor(menu: Menu, menuEle: HTMLElement) {
super(menu, menuEle, {
maxEdgeStart: 0
});
this.gesture.priority++;
}
}