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

chore(TapClick): update TapClick to work w/ ionicBootstrap

Browse Source
This commit is contained in:
Adam Bradley
2016-05-31 17:38:39 -05:00
parent 5117660f2e
commit 5f8b0130cb
4 changed files with 48 additions and 56 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@ -1,4 +1,4 @@
import {rafFrames} from '../../util/dom';
import {rafFrames, nativeTimeout} from '../../util/dom';
export class Activator {
@ -6,7 +6,7 @@ export class Activator {
protected _queue: Array<HTMLElement> = [];
protected _active: Array<HTMLElement> = [];
constructor(protected app, config, protected _zone) {
constructor(protected app, config) {
this._css = config.get('activatedClass') || 'activated';
}
@ -20,29 +20,23 @@ export class Activator {
// queue to have this element activated
self._queue.push(activatableEle);
this._zone.runOutsideAngular(() => {
rafFrames(2, function() {
let activatableEle;
for (let i = 0; i < self._queue.length; i++) {
activatableEle = self._queue[i];
if (activatableEle && activatableEle.parentNode) {
self._active.push(activatableEle);
activatableEle.classList.add(self._css);
}
rafFrames(2, function() {
let activatableEle;
for (let i = 0; i < self._queue.length; i++) {
activatableEle = self._queue[i];
if (activatableEle && activatableEle.parentNode) {
self._active.push(activatableEle);
activatableEle.classList.add(self._css);
}
self._queue = [];
});
}
self._queue = [];
});
}
upAction(ev: UIEvent, activatableEle: HTMLElement, pointerX: number, pointerY: number) {
// the user was pressing down, then just let up
let self = this;
function activateUp() {
self.clearState();
}
this._zone.runOutsideAngular(() => {
rafFrames(CLEAR_STATE_DEFERS, activateUp);
rafFrames(CLEAR_STATE_DEFERS, () => {
this.clearState();
});
}
@ -52,7 +46,7 @@ export class Activator {
// 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
// buttons during a transition. This will retry in XX milliseconds.
setTimeout(() => {
nativeTimeout(() => {
this.clearState();
}, 600);

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

@ -1,6 +1,5 @@
import {Activator} from './activator';
import {CSS, nativeRaf, rafFrames} from '../../util/dom';
const win: any = window;
/**
@ -8,8 +7,8 @@ const win: any = window;
*/
export class RippleActivator extends Activator {
constructor(app, config, zone) {
super(app, config, zone);
constructor(app, config) {
super(app, config);
}
downAction(ev, activatableEle, pointerX, pointerY) {
@ -21,42 +20,39 @@ export class RippleActivator extends Activator {
// queue to have this element activated
self._queue.push(activatableEle);
this._zone.runOutsideAngular(function() {
nativeRaf(function() {
var i;
nativeRaf(function() {
var i;
for (i = 0; i < self._queue.length; i++) {
var queuedEle = self._queue[i];
if (queuedEle && queuedEle.parentNode) {
self._active.push(queuedEle);
for (i = 0; i < self._queue.length; i++) {
var queuedEle = self._queue[i];
if (queuedEle && queuedEle.parentNode) {
self._active.push(queuedEle);
// DOM WRITE
queuedEle.classList.add(self._css);
// DOM WRITE
queuedEle.classList.add(self._css);
var j = queuedEle.childElementCount;
while (j--) {
var rippleEle: any = queuedEle.children[j];
if (rippleEle.tagName === 'ION-BUTTON-EFFECT') {
// DOM WRITE
rippleEle.style.left = '-9999px';
rippleEle.style.opacity = '';
rippleEle.style[CSS.transform] = 'scale(0.001) translateZ(0px)';
rippleEle.style[CSS.transition] = '';
var j = queuedEle.childElementCount;
while (j--) {
var rippleEle: any = queuedEle.children[j];
if (rippleEle.tagName === 'ION-BUTTON-EFFECT') {
// DOM WRITE
rippleEle.style.left = '-9999px';
rippleEle.style.opacity = '';
rippleEle.style[CSS.transform] = 'scale(0.001) translateZ(0px)';
rippleEle.style[CSS.transition] = '';
// DOM READ
var clientRect = activatableEle.getBoundingClientRect();
rippleEle.$top = clientRect.top;
rippleEle.$left = clientRect.left;
rippleEle.$width = clientRect.width;
rippleEle.$height = clientRect.height;
break;
}
// DOM READ
var clientRect = activatableEle.getBoundingClientRect();
rippleEle.$top = clientRect.top;
rippleEle.$left = clientRect.left;
rippleEle.$width = clientRect.width;
rippleEle.$height = clientRect.height;
break;
}
}
}
self._queue = [];
});
}
self._queue = [];
});
}

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

@ -23,15 +23,15 @@ export class TapClick {
constructor(
config: Config,
private app: App,
private zone: NgZone
zone: NgZone
) {
let self = this;
if (config.get('activator') === 'ripple') {
self.activator = new RippleActivator(app, config, zone);
self.activator = new RippleActivator(app, config);
} else if (config.get('activator') === 'highlight') {
self.activator = new Activator(app, config, zone);
self.activator = new Activator(app, config);
}
self.usePolyfill = (config.get('tapPolyfill') === true);
@ -47,7 +47,6 @@ export class TapClick {
addListener('mouseup', self.mouseUp.bind(self), true);
});
self.pointerMove = function(ev) {
if ( hasPointerMoved(POINTER_MOVE_UNTIL_CANCEL, self.startCoord, pointerCoord(ev)) ) {
self.pointerCancel(ev);

3
src/config/bootstrap.ts
View File

@ -48,6 +48,9 @@ export function ionicPostBootstrap(ngComponentRef: ComponentRef<any>): Component
platform.setZone(ngComponentRef.injector.get(NgZone));
platform.prepareReady();
// TODO: Use PLATFORM_INITIALIZER
ngComponentRef.injector.get(TapClick);
// TODO: Use Renderer
ngComponentRef.location.nativeElement.classList.add('app-init');