mirror of
https://github.com/ionic-team/ionic-framework.git
synced 2025-08-20 20:33:32 +08:00
chore(nativeRaf): use native raf over zone wrapped
This commit is contained in:
@ -4,7 +4,7 @@ import {Ion} from '../ion';
|
|||||||
import {IonicApp} from '../app/app';
|
import {IonicApp} from '../app/app';
|
||||||
import {Config} from '../../config/config';
|
import {Config} from '../../config/config';
|
||||||
import {Keyboard} from '../../util/keyboard';
|
import {Keyboard} from '../../util/keyboard';
|
||||||
import {raf, nativeTimeout, transitionEnd} from '../../util/dom';
|
import {nativeRaf, nativeTimeout, transitionEnd} from '../../util/dom';
|
||||||
import {ViewController} from '../nav/view-controller';
|
import {ViewController} from '../nav/view-controller';
|
||||||
import {ScrollView} from '../../util/scroll-view';
|
import {ScrollView} from '../../util/scroll-view';
|
||||||
|
|
||||||
@ -198,8 +198,8 @@ export class Content extends Ion {
|
|||||||
|
|
||||||
lastScrollTop = currentScrollTop;
|
lastScrollTop = currentScrollTop;
|
||||||
|
|
||||||
raf(() => {
|
nativeRaf(() => {
|
||||||
raf(next);
|
nativeRaf(next);
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -1,6 +1,6 @@
|
|||||||
import {Component, Input, ElementRef, ChangeDetectionStrategy, ViewEncapsulation, NgZone} from 'angular2/core';
|
import {Component, Input, ElementRef, ChangeDetectionStrategy, ViewEncapsulation, NgZone} from 'angular2/core';
|
||||||
|
|
||||||
import {raf} from '../../util/dom';
|
import {nativeRaf} from '../../util/dom';
|
||||||
import {isPresent} from '../../util/util';
|
import {isPresent} from '../../util/util';
|
||||||
import {Platform} from '../../platform/platform';
|
import {Platform} from '../../platform/platform';
|
||||||
|
|
||||||
@ -62,7 +62,7 @@ export class Img {
|
|||||||
img.addEventListener('load', () => {
|
img.addEventListener('load', () => {
|
||||||
if (img.src === this._normalizeSrc) {
|
if (img.src === this._normalizeSrc) {
|
||||||
this._elementRef.nativeElement.appendChild(img);
|
this._elementRef.nativeElement.appendChild(img);
|
||||||
raf(() => {
|
nativeRaf(() => {
|
||||||
this._update();
|
this._update();
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
@ -2,7 +2,7 @@ import {Directive, Attribute, ElementRef, Renderer, Input, Output, EventEmitter,
|
|||||||
import {NgControl} from 'angular2/common';
|
import {NgControl} from 'angular2/common';
|
||||||
|
|
||||||
import {Config} from '../../config/config';
|
import {Config} from '../../config/config';
|
||||||
import {CSS, hasFocus, raf} from '../../util/dom';
|
import {CSS, hasFocus} from '../../util/dom';
|
||||||
|
|
||||||
|
|
||||||
/**
|
/**
|
||||||
|
@ -2,7 +2,7 @@ import {DIRECTION_RIGHT} from '../../gestures/hammer';
|
|||||||
import {DragGesture} from '../../gestures/drag-gesture';
|
import {DragGesture} from '../../gestures/drag-gesture';
|
||||||
import {List} from '../list/list';
|
import {List} from '../list/list';
|
||||||
|
|
||||||
import {CSS, raf, closest} from '../../util/dom';
|
import {CSS, nativeRaf, closest} from '../../util/dom';
|
||||||
|
|
||||||
|
|
||||||
export class ItemSlidingGesture extends DragGesture {
|
export class ItemSlidingGesture extends DragGesture {
|
||||||
@ -108,7 +108,7 @@ export class ItemSlidingGesture extends DragGesture {
|
|||||||
itemData.hasMouseOut = true;
|
itemData.hasMouseOut = true;
|
||||||
}
|
}
|
||||||
|
|
||||||
raf(() => {
|
nativeRaf(() => {
|
||||||
if (!this.dragEnded && !this.preventDrag) {
|
if (!this.dragEnded && !this.preventDrag) {
|
||||||
isItemActive(itemContainerEle, true);
|
isItemActive(itemContainerEle, true);
|
||||||
this.open(itemContainerEle, newX, false);
|
this.open(itemContainerEle, newX, false);
|
||||||
@ -146,7 +146,7 @@ export class ItemSlidingGesture extends DragGesture {
|
|||||||
itemContainerEle.removeEventListener('mouseout', this.onMouseOut);
|
itemContainerEle.removeEventListener('mouseout', this.onMouseOut);
|
||||||
itemData.hasMouseOut = false;
|
itemData.hasMouseOut = false;
|
||||||
|
|
||||||
raf(() => {
|
nativeRaf(() => {
|
||||||
this.open(itemContainerEle, restingPoint, true);
|
this.open(itemContainerEle, restingPoint, true);
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
@ -8,7 +8,6 @@ import {Keyboard} from '../../util/keyboard';
|
|||||||
import {NavParams} from './nav-params';
|
import {NavParams} from './nav-params';
|
||||||
import {pascalCaseToDashCase, isBlank} from '../../util/util';
|
import {pascalCaseToDashCase, isBlank} from '../../util/util';
|
||||||
import {Portal} from './nav-portal';
|
import {Portal} from './nav-portal';
|
||||||
import {raf} from '../../util/dom';
|
|
||||||
import {SwipeBackGesture} from './swipe-back';
|
import {SwipeBackGesture} from './swipe-back';
|
||||||
import {Transition} from '../../transitions/transition';
|
import {Transition} from '../../transitions/transition';
|
||||||
import {ViewController} from './view-controller';
|
import {ViewController} from './view-controller';
|
||||||
|
@ -1,4 +1,4 @@
|
|||||||
import {raf, rafFrames} from '../../util/dom';
|
import {rafFrames} from '../../util/dom';
|
||||||
|
|
||||||
|
|
||||||
export class Activator {
|
export class Activator {
|
||||||
|
@ -1,5 +1,5 @@
|
|||||||
import {Activator} from './activator';
|
import {Activator} from './activator';
|
||||||
import {CSS, raf, rafFrames} from '../../util/dom';
|
import {CSS, nativeRaf, rafFrames} from '../../util/dom';
|
||||||
const win: any = window;
|
const win: any = window;
|
||||||
|
|
||||||
|
|
||||||
@ -22,7 +22,7 @@ export class RippleActivator extends Activator {
|
|||||||
self._queue.push(activatableEle);
|
self._queue.push(activatableEle);
|
||||||
|
|
||||||
this._zone.runOutsideAngular(function() {
|
this._zone.runOutsideAngular(function() {
|
||||||
raf(function() {
|
nativeRaf(function() {
|
||||||
var i;
|
var i;
|
||||||
|
|
||||||
for (i = 0; i < self._queue.length; i++) {
|
for (i = 0; i < self._queue.length; i++) {
|
||||||
|
@ -137,7 +137,7 @@ export class TapClick {
|
|||||||
|
|
||||||
pointerEnd(ev) {
|
pointerEnd(ev) {
|
||||||
let activatableEle = getActivatableTarget(ev.target);
|
let activatableEle = getActivatableTarget(ev.target);
|
||||||
if (activatableEle) {
|
if (activatableEle && this.startCoord) {
|
||||||
this.activator && this.activator.upAction(ev, activatableEle, this.startCoord.x, this.startCoord.y);
|
this.activator && this.activator.upAction(ev, activatableEle, this.startCoord.x, this.startCoord.y);
|
||||||
}
|
}
|
||||||
this.moveListeners(false);
|
this.moveListeners(false);
|
||||||
|
@ -8,7 +8,7 @@ import {VirtualItem, VirtualHeader, VirtualFooter} from './virtual-item';
|
|||||||
import {VirtualCell, VirtualNode, VirtualData} from './virtual-util';
|
import {VirtualCell, VirtualNode, VirtualData} from './virtual-util';
|
||||||
import {processRecords, populateNodeData, initReadNodes, writeToNodes, updateDimensions, adjustRendered, calcDimensions, estimateHeight} from './virtual-util';
|
import {processRecords, populateNodeData, initReadNodes, writeToNodes, updateDimensions, adjustRendered, calcDimensions, estimateHeight} from './virtual-util';
|
||||||
import {isBlank, isPresent, isFunction} from '../../util/util';
|
import {isBlank, isPresent, isFunction} from '../../util/util';
|
||||||
import {rafFrames, raf, cancelRaf, pointerCoord, nativeTimeout, clearNativeTimeout} from '../../util/dom';
|
import {rafFrames, nativeRaf, cancelRaf, pointerCoord, nativeTimeout, clearNativeTimeout} from '../../util/dom';
|
||||||
import {Img} from '../img/img';
|
import {Img} from '../img/img';
|
||||||
|
|
||||||
|
|
||||||
@ -391,7 +391,7 @@ export class VirtualScroll implements DoCheck, AfterContentInit, OnDestroy {
|
|||||||
// oh no! the DOM doesn't have good data yet!
|
// oh no! the DOM doesn't have good data yet!
|
||||||
// let's try again in XXms, and give up eventually if we never get data
|
// let's try again in XXms, and give up eventually if we never get data
|
||||||
attempts++;
|
attempts++;
|
||||||
raf(function() {
|
nativeRaf(function() {
|
||||||
readDimensions(done);
|
readDimensions(done);
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
@ -439,7 +439,7 @@ export class VirtualScroll implements DoCheck, AfterContentInit, OnDestroy {
|
|||||||
this._cd.detectChanges();
|
this._cd.detectChanges();
|
||||||
|
|
||||||
// wait a frame before trying to read and calculate the dimensions
|
// wait a frame before trying to read and calculate the dimensions
|
||||||
raf(this.postRenderVirtual.bind(this));
|
nativeRaf(this.postRenderVirtual.bind(this));
|
||||||
}
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
|
@ -25,7 +25,10 @@
|
|||||||
})();
|
})();
|
||||||
|
|
||||||
// use native raf rather than the zone wrapped one
|
// use native raf rather than the zone wrapped one
|
||||||
export const raf = (window[window['Zone']['__symbol__']('requestAnimationFrame')] || window[window['Zone']['__symbol__']('webkitRequestAnimationFrame')])['bind'](window);
|
export const nativeRaf = (window[window['Zone']['__symbol__']('requestAnimationFrame')] || window[window['Zone']['__symbol__']('webkitRequestAnimationFrame')])['bind'](window);
|
||||||
|
|
||||||
|
// zone wrapped raf
|
||||||
|
export const raf = window.requestAnimationFrame.bind(window);
|
||||||
export const cancelRaf = window.cancelAnimationFrame.bind(window);
|
export const cancelRaf = window.cancelAnimationFrame.bind(window);
|
||||||
|
|
||||||
export const nativeTimeout = window[window['Zone']['__symbol__']('setTimeout')]['bind'](window);
|
export const nativeTimeout = window[window['Zone']['__symbol__']('setTimeout')]['bind'](window);
|
||||||
@ -35,11 +38,11 @@ export function rafFrames(framesToWait, callback) {
|
|||||||
framesToWait = Math.ceil(framesToWait);
|
framesToWait = Math.ceil(framesToWait);
|
||||||
|
|
||||||
if (framesToWait < 2) {
|
if (framesToWait < 2) {
|
||||||
raf(callback);
|
nativeRaf(callback);
|
||||||
|
|
||||||
} else {
|
} else {
|
||||||
nativeTimeout(() => {
|
nativeTimeout(() => {
|
||||||
raf(callback);
|
nativeRaf(callback);
|
||||||
}, (framesToWait - 1) * 16.6667);
|
}, (framesToWait - 1) * 16.6667);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
@ -2,7 +2,7 @@ import {Injectable, NgZone} from 'angular2/core';
|
|||||||
|
|
||||||
import {Config} from '../config/config';
|
import {Config} from '../config/config';
|
||||||
import {Form} from './form';
|
import {Form} from './form';
|
||||||
import {hasFocusedTextInput, raf, rafFrames, nativeTimeout} from './dom';
|
import {hasFocusedTextInput, nativeRaf, rafFrames, nativeTimeout} from './dom';
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* @name Keyboard
|
* @name Keyboard
|
||||||
@ -109,7 +109,7 @@ export class Keyboard {
|
|||||||
*/
|
*/
|
||||||
close() {
|
close() {
|
||||||
console.debug('keyboard close()');
|
console.debug('keyboard close()');
|
||||||
raf(() => {
|
nativeRaf(() => {
|
||||||
if (hasFocusedTextInput()) {
|
if (hasFocusedTextInput()) {
|
||||||
// only focus out when a text input has focus
|
// only focus out when a text input has focus
|
||||||
this._form.focusOut();
|
this._form.focusOut();
|
||||||
@ -137,7 +137,7 @@ export class Keyboard {
|
|||||||
let isKeyInputEnabled = false;
|
let isKeyInputEnabled = false;
|
||||||
|
|
||||||
function cssClass() {
|
function cssClass() {
|
||||||
raf(() => {
|
nativeRaf(() => {
|
||||||
document.body.classList[isKeyInputEnabled ? 'add' : 'remove']('focus-outline');
|
document.body.classList[isKeyInputEnabled ? 'add' : 'remove']('focus-outline');
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
@ -1,4 +1,4 @@
|
|||||||
import {CSS, pointerCoord, raf, cancelRaf} from '../util/dom';
|
import {CSS, pointerCoord, nativeRaf, cancelRaf} from '../util/dom';
|
||||||
|
|
||||||
|
|
||||||
export class ScrollView {
|
export class ScrollView {
|
||||||
@ -84,7 +84,7 @@ export class ScrollView {
|
|||||||
}
|
}
|
||||||
|
|
||||||
if (easedT < 1) {
|
if (easedT < 1) {
|
||||||
raf(step);
|
nativeRaf(step);
|
||||||
|
|
||||||
} else {
|
} else {
|
||||||
// done
|
// done
|
||||||
@ -96,9 +96,9 @@ export class ScrollView {
|
|||||||
self.isPlaying = true;
|
self.isPlaying = true;
|
||||||
|
|
||||||
// chill out for a frame first
|
// chill out for a frame first
|
||||||
raf(() => {
|
nativeRaf(() => {
|
||||||
startTime = Date.now();
|
startTime = Date.now();
|
||||||
raf(step);
|
nativeRaf(step);
|
||||||
});
|
});
|
||||||
|
|
||||||
});
|
});
|
||||||
@ -232,7 +232,7 @@ export class ScrollView {
|
|||||||
// ******** DOM READ ****************
|
// ******** DOM READ ****************
|
||||||
this._setMax();
|
this._setMax();
|
||||||
|
|
||||||
this._rafId = raf(this._decelerate.bind(this));
|
this._rafId = nativeRaf(this._decelerate.bind(this));
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -260,7 +260,7 @@ export class ScrollView {
|
|||||||
self.setTop(self._top);
|
self.setTop(self._top);
|
||||||
|
|
||||||
if (self._top > 0 && self._top < self._max && Math.abs(self._velocity) > MIN_VELOCITY_CONTINUE_DECELERATION) {
|
if (self._top > 0 && self._top < self._max && Math.abs(self._velocity) > MIN_VELOCITY_CONTINUE_DECELERATION) {
|
||||||
self._rafId = raf(self._decelerate.bind(self));
|
self._rafId = nativeRaf(self._decelerate.bind(self));
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
Reference in New Issue
Block a user