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

perf(activator): cancelled touch does not cause layout thrashing

Browse Source
This commit is contained in:
Manu Mtz.-Almeida
2016-12-07 23:53:54 +01:00
parent 04d9f5abc3
commit 22d6bc520b
4 changed files with 18 additions and 11 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
src/components/tap-click/activator-base.ts
View File

@ -8,7 +8,7 @@ export abstract class ActivatorBase {
abstract upAction(ev: UIEvent, activatableEle: HTMLElement, startCoord: PointerCoordinates); abstract upAction(ev: UIEvent, activatableEle: HTMLElement, startCoord: PointerCoordinates);
abstract clearState(); abstract clearState(animated: boolean);
} }
export function isActivatedDisabled(ev: any, activatableEle: any): boolean { export function isActivatedDisabled(ev: any, activatableEle: any): boolean {

21
src/components/tap-click/activator.ts
View File

@ -42,7 +42,7 @@ export class Activator implements ActivatorBase {
} }
this.unscheduleClear(); this.unscheduleClear();
this.deactivate(); this.deactivate(true);
// queue to have this element activated // queue to have this element activated
this._queue.push(activatableEle); this._queue.push(activatableEle);
@ -69,7 +69,7 @@ export class Activator implements ActivatorBase {
return; return;
} }
this._clearRafDefer = rafFrames(this.clearDelay, () => { this._clearRafDefer = rafFrames(this.clearDelay, () => {
this.clearState(); this.clearState(true);
this._clearRafDefer = null; this._clearRafDefer = null;
}); });
} }
@ -82,29 +82,36 @@ export class Activator implements ActivatorBase {
} }
// all states should return to normal // all states should return to normal
clearState() { clearState(animated: boolean) {
if (!this.app.isEnabled()) { if (!this.app.isEnabled()) {
// the app is actively disabled, so don't bother deactivating anything. // the app is actively disabled, so don't bother deactivating anything.
// this makes it easier on the GPU so it doesn't have to redraw any // this makes it easier on the GPU so it doesn't have to redraw any
// buttons during a transition. This will retry in XX milliseconds. // buttons during a transition. This will retry in XX milliseconds.
nativeTimeout(() => { nativeTimeout(() => {
this.clearState(); this.clearState(animated);
}, 600); }, 600);
} else { } else {
// not actively transitioning, good to deactivate any elements // not actively transitioning, good to deactivate any elements
this.deactivate(); this.deactivate(animated);
} }
} }
// remove the active class from all active elements // remove the active class from all active elements
deactivate() { deactivate(animated: boolean) {
this._clearDeferred(); this._clearDeferred();
this._queue.length = 0; this._queue.length = 0;
let ele;
for (var i = 0; i < this._active.length; i++) { for (var i = 0; i < this._active.length; i++) {
this._active[i].classList.remove(this._css); ele = this._active[i];
if (!animated) {
ele.style.transition = 'none';
} else {
ele.style.transition = '';
}
ele.classList.remove(this._css);
} }
this._active.length = 0; this._active.length = 0;
} }

4
src/components/tap-click/ripple.ts
View File

@ -41,9 +41,9 @@ export class RippleActivator implements ActivatorBase {
this._upAction(ev, activatableEle, startCoord); this._upAction(ev, activatableEle, startCoord);
} }
clearState() { clearState(animated: boolean) {
// Highlight // Highlight
this.highlight && this.highlight.clearState(); this.highlight && this.highlight.clearState(animated);
} }
_downAction(ev: UIEvent, activatableEle: HTMLElement, startCoord: PointerCoordinates) { _downAction(ev: UIEvent, activatableEle: HTMLElement, startCoord: PointerCoordinates) {

2
src/components/tap-click/tap-click.ts
View File

@ -109,7 +109,7 @@ export class TapClick {
this.startCoord = null; this.startCoord = null;
this.dispatchClick = false; this.dispatchClick = false;
this.activator && this.activator.clearState(); this.activator && this.activator.clearState(false);
this.pointerEvents.stop(); this.pointerEvents.stop();
} }