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

perf(menu): flickering

Browse Source
This commit is contained in:
Manu Mtz.-Almeida
2018-08-03 00:29:38 +02:00
parent 69f5cc863f
commit 8253b04604
5 changed files with 247 additions and 259 deletions
Download Patch File Download Diff File Expand all files Collapse all files

187
core/src/utils/gesture/pointer-events.ts
View File

@ -2,141 +2,134 @@ import { addEventListener } from './listener';
const MOUSE_WAIT = 2000;
export class PointerEvents {
export function createPointerEvents(
el: Node,
pointerDown: any,
pointerMove: any,
pointerUp: any,
options: EventListenerOptions
) {
private rmTouchStart?: () => void;
private rmTouchMove?: () => void;
private rmTouchEnd?: () => void;
private rmTouchCancel?: () => void;
let rmTouchStart: (() => void) | undefined;
let rmTouchMove: (() => void) | undefined;
let rmTouchEnd: (() => void) | undefined;
let rmTouchCancel: (() => void) | undefined;
let rmMouseStart: (() => void) | undefined;
let rmMouseMove: (() => void) | undefined;
let rmMouseUp: (() => void) | undefined;
let lastTouchEvent = 0;
private rmMouseStart?: () => void;
private rmMouseMove?: () => void;
private rmMouseUp?: () => void;
private bindTouchEnd: any;
private bindMouseUp: any;
private lastTouchEvent = 0;
constructor(
private el: Node,
private pointerDown: any,
private pointerMove: any,
private pointerUp: any,
private options: EventListenerOptions
) {
this.bindTouchEnd = this.handleTouchEnd.bind(this);
this.bindMouseUp = this.handleMouseUp.bind(this);
}
set disabled(disabled: boolean) {
if (disabled) {
if (this.rmTouchStart) {
this.rmTouchStart();
}
if (this.rmMouseStart) {
this.rmMouseStart();
}
this.rmTouchStart = this.rmMouseStart = undefined;
this.stop();
} else {
if (!this.rmTouchStart) {
this.rmTouchStart = addEventListener(this.el, 'touchstart', this.handleTouchStart.bind(this), this.options);
}
if (!this.rmMouseStart) {
this.rmMouseStart = addEventListener(this.el, 'mousedown', this.handleMouseDown.bind(this), this.options);
}
}
}
stop() {
this.stopTouch();
this.stopMouse();
}
destroy() {
this.disabled = true;
this.pointerUp = this.pointerMove = this.pointerDown = undefined;
}
private handleTouchStart(ev: any) {
this.lastTouchEvent = Date.now() + MOUSE_WAIT;
if (!this.pointerDown(ev, POINTER_EVENT_TYPE_TOUCH)) {
function handleTouchStart(ev: any) {
lastTouchEvent = Date.now() + MOUSE_WAIT;
if (!pointerDown(ev)) {
return;
}
if (!this.rmTouchMove && this.pointerMove) {
this.rmTouchMove = addEventListener(this.el, 'touchmove', this.pointerMove, this.options);
if (!rmTouchMove && pointerMove) {
rmTouchMove = addEventListener(el, 'touchmove', pointerMove, options);
}
if (!this.rmTouchEnd) {
this.rmTouchEnd = addEventListener(this.el, 'touchend', this.bindTouchEnd, this.options);
if (!rmTouchEnd) {
rmTouchEnd = addEventListener(el, 'touchend', handleTouchEnd, options);
}
if (!this.rmTouchCancel) {
this.rmTouchCancel = addEventListener(this.el, 'touchcancel', this.bindTouchEnd, this.options);
if (!rmTouchCancel) {
rmTouchCancel = addEventListener(el, 'touchcancel', handleTouchEnd, options);
}
}
private handleMouseDown(ev: any) {
if (this.lastTouchEvent > Date.now()) {
function handleMouseDown(ev: any) {
if (lastTouchEvent > Date.now()) {
console.debug('mousedown event dropped because of previous touch');
return;
}
if (!this.pointerDown(ev, POINTER_EVENT_TYPE_MOUSE)) {
if (!pointerDown(ev)) {
return;
}
if (!this.rmMouseMove && this.pointerMove) {
this.rmMouseMove = addEventListener(getDocument(this.el), 'mousemove', this.pointerMove, this.options);
if (!rmMouseMove && pointerMove) {
rmMouseMove = addEventListener(getDocument(el), 'mousemove', pointerMove, options);
}
if (!this.rmMouseUp) {
this.rmMouseUp = addEventListener(getDocument(this.el), 'mouseup', this.bindMouseUp, this.options);
if (!rmMouseUp) {
rmMouseUp = addEventListener(getDocument(el), 'mouseup', handleMouseUp, options);
}
}
private handleTouchEnd(ev: any) {
this.stopTouch();
if (this.pointerUp) {
this.pointerUp(ev, POINTER_EVENT_TYPE_TOUCH);
function handleTouchEnd(ev: any) {
stopTouch();
if (pointerUp) {
pointerUp(ev);
}
}
private handleMouseUp(ev: any) {
this.stopMouse();
if (this.pointerUp) {
this.pointerUp(ev, POINTER_EVENT_TYPE_MOUSE);
function handleMouseUp(ev: any) {
stopMouse();
if (pointerUp) {
pointerUp(ev);
}
}
private stopTouch() {
if (this.rmTouchMove) {
this.rmTouchMove();
function stopTouch() {
if (rmTouchMove) {
rmTouchMove();
}
if (this.rmTouchEnd) {
this.rmTouchEnd();
if (rmTouchEnd) {
rmTouchEnd();
}
if (this.rmTouchCancel) {
this.rmTouchCancel();
if (rmTouchCancel) {
rmTouchCancel();
}
this.rmTouchMove = this.rmTouchEnd = this.rmTouchCancel = undefined;
rmTouchMove = rmTouchEnd = rmTouchCancel = undefined;
}
private stopMouse() {
if (this.rmMouseMove) {
this.rmMouseMove();
function stopMouse() {
if (rmMouseMove) {
rmMouseMove();
}
if (this.rmMouseUp) {
this.rmMouseUp();
if (rmMouseUp) {
rmMouseUp();
}
this.rmMouseMove = this.rmMouseUp = undefined;
rmMouseMove = rmMouseUp = undefined;
}
function stop() {
stopTouch();
stopMouse();
}
function setDisabled(disabled: boolean) {
if (disabled) {
if (rmTouchStart) {
rmTouchStart();
}
if (rmMouseStart) {
rmMouseStart();
}
rmTouchStart = rmMouseStart = undefined;
stop();
} else {
if (!rmTouchStart) {
rmTouchStart = addEventListener(el, 'touchstart', handleTouchStart, options);
}
if (!rmMouseStart) {
rmMouseStart = addEventListener(el, 'mousedown', handleMouseDown, options);
}
}
}
function destroy() {
setDisabled(true);
pointerUp = pointerMove = pointerDown = undefined;
}
return {
setDisabled,
stop,
destroy
};
}
function getDocument(node: Node) {
return node instanceof Document ? node : node.ownerDocument;
}
export const POINTER_EVENT_TYPE_MOUSE = 1;
export const POINTER_EVENT_TYPE_TOUCH = 2;
export interface PointerEventsConfig {
element?: HTMLElement;
pointerDown: (ev: any) => boolean;