mirror of
https://github.com/ionic-team/ionic-framework.git
synced 2025-08-18 19:21:34 +08:00
fix(transition): update disabling transitions
This commit is contained in:
@ -16,7 +16,6 @@ export class IonicApp {
|
||||
this._titleSrv = new Title();
|
||||
this._title = '';
|
||||
this._disTime = 0;
|
||||
this._trnsTime = 0;
|
||||
|
||||
// Our component registry map
|
||||
this.components = {};
|
||||
@ -63,18 +62,6 @@ export class IonicApp {
|
||||
return (this._disTime < Date.now());
|
||||
}
|
||||
|
||||
setTransitioning(isTransitioning, fallback=700) {
|
||||
this._trnsTime = (isTransitioning ? Date.now() + fallback : 0);
|
||||
}
|
||||
|
||||
/**
|
||||
* Boolean if the app is actively transitioning or not.
|
||||
* @return {bool}
|
||||
*/
|
||||
isTransitioning() {
|
||||
return (this._trnsTime > Date.now());
|
||||
}
|
||||
|
||||
/**
|
||||
* Register a known component with a key, for easy lookups later.
|
||||
* @param {TODO} id The id to use to register the component
|
||||
|
@ -200,7 +200,6 @@ export class Menu extends Ion {
|
||||
// user actively dragging the menu
|
||||
if (this.isEnabled) {
|
||||
this._prevent();
|
||||
this.app.setTransitioning(true);
|
||||
this._getType().setProgess(value);
|
||||
this.opening.next(value);
|
||||
}
|
||||
@ -213,7 +212,6 @@ export class Menu extends Ion {
|
||||
// user has finished dragging the menu
|
||||
if (this.isEnabled) {
|
||||
this._prevent();
|
||||
this.app.setTransitioning(true);
|
||||
this._getType().setProgressEnd(shouldComplete).then(isOpen => {
|
||||
this._after(isOpen);
|
||||
});
|
||||
@ -231,7 +229,6 @@ export class Menu extends Ion {
|
||||
this.getBackdropElement().classList.add('show-backdrop');
|
||||
|
||||
this._prevent();
|
||||
this.app.setTransitioning(true);
|
||||
this.keyboard.close();
|
||||
}
|
||||
}
|
||||
@ -243,7 +240,6 @@ export class Menu extends Ion {
|
||||
// keep opening/closing the menu disabled for a touch more yet
|
||||
if (this.isEnabled) {
|
||||
this._prevent();
|
||||
this.app.setTransitioning(false);
|
||||
|
||||
this.isOpen = isOpen;
|
||||
|
||||
|
@ -128,6 +128,7 @@ export class NavController extends Ion {
|
||||
this.renderer = renderer;
|
||||
|
||||
this._views = [];
|
||||
this._trnsTime = 0;
|
||||
|
||||
this._sbTrans = null;
|
||||
this._sbEnabled = config.get('swipeBackEnabled') || false;
|
||||
@ -142,6 +143,18 @@ export class NavController extends Ion {
|
||||
]);
|
||||
}
|
||||
|
||||
/**
|
||||
* Boolean if the nav controller is actively transitioning or not.
|
||||
* @return {bool}
|
||||
*/
|
||||
isTransitioning() {
|
||||
return (this._trnsTime > Date.now());
|
||||
}
|
||||
|
||||
setTransitioning(isTransitioning, fallback=700) {
|
||||
this._trnsTime = (isTransitioning ? Date.now() + fallback : 0);
|
||||
}
|
||||
|
||||
/**
|
||||
* TODO
|
||||
* @name NavController#push
|
||||
@ -155,19 +168,18 @@ export class NavController extends Ion {
|
||||
console.debug('invalid componentType to push');
|
||||
return Promise.reject();
|
||||
}
|
||||
|
||||
if (typeof componentType !== 'function') {
|
||||
throw 'Loading component must be a component class, not "' + componentType.toString() + '"';
|
||||
}
|
||||
|
||||
let now = Date.now();
|
||||
let last = this.last();
|
||||
if (last && last.componentType === componentType && now + 500 > this._lastPush) {
|
||||
console.debug('same componentType pushed as active');
|
||||
if (this.isTransitioning()) {
|
||||
console.debug('nav controller actively transitioning');
|
||||
return Promise.reject();
|
||||
}
|
||||
this._lastPush = now;
|
||||
|
||||
let resolve;
|
||||
this.setTransitioning(true, 500);
|
||||
|
||||
let promise = null;
|
||||
if (!callback) {
|
||||
promise = new Promise(res => { callback = res; });
|
||||
@ -225,6 +237,13 @@ export class NavController extends Ion {
|
||||
return Promise.reject();
|
||||
}
|
||||
|
||||
if (this.isTransitioning()) {
|
||||
console.debug('nav controller actively transitioning');
|
||||
return Promise.reject();
|
||||
}
|
||||
|
||||
this.setTransitioning(true, 500);
|
||||
|
||||
let resolve;
|
||||
let promise = new Promise(res => { resolve = res; });
|
||||
|
||||
@ -498,12 +517,11 @@ export class NavController extends Ion {
|
||||
}
|
||||
|
||||
let duration = transAnimation.duration();
|
||||
if (duration > 64) {
|
||||
let enableApp = (duration < 64);
|
||||
// block any clicks during the transition and provide a
|
||||
// fallback to remove the clickblock if something goes wrong
|
||||
self.app.setEnabled(false, duration);
|
||||
self.app.setTransitioning(true, duration);
|
||||
}
|
||||
self.app.setEnabled(enableApp, duration);
|
||||
self.setTransitioning(!enableApp, duration);
|
||||
|
||||
if (opts.pageType) {
|
||||
transAnimation.before.addClass(opts.pageType);
|
||||
@ -647,7 +665,7 @@ export class NavController extends Ion {
|
||||
|
||||
// disables the app during the transition
|
||||
this.app.setEnabled(false);
|
||||
this.app.setTransitioning(true);
|
||||
this.setTransitioning(true);
|
||||
|
||||
// default the direction to "back"
|
||||
let opts = {
|
||||
@ -696,7 +714,7 @@ export class NavController extends Ion {
|
||||
if (this._sbTrans) {
|
||||
// continue to disable the app while actively dragging
|
||||
this.app.setEnabled(false, 4000);
|
||||
this.app.setTransitioning(true, 4000);
|
||||
this.setTransitioning(true, 4000);
|
||||
|
||||
// set the transition animation's progress
|
||||
this._sbTrans.progress(value);
|
||||
@ -714,7 +732,7 @@ export class NavController extends Ion {
|
||||
|
||||
// disables the app during the transition
|
||||
this.app.setEnabled(false);
|
||||
this.app.setTransitioning(true);
|
||||
this.setTransitioning(true);
|
||||
|
||||
this._sbTrans.progressEnd(completeSwipeBack, rate).then(() => {
|
||||
|
||||
@ -853,7 +871,7 @@ export class NavController extends Ion {
|
||||
// allow clicks again, but still set an enable time
|
||||
// meaning nothing with this view controller can happen for XXms
|
||||
this.app.setEnabled(true);
|
||||
this.app.setTransitioning(false);
|
||||
this.setTransitioning(false);
|
||||
|
||||
this._sbComplete();
|
||||
|
||||
|
@ -117,6 +117,7 @@ export class Tabs extends Ion {
|
||||
|
||||
this._tabs = [];
|
||||
this._id = ++tabIds;
|
||||
this._ids = -1;
|
||||
|
||||
// Tabs may also be an actual ViewController which was navigated to
|
||||
// if Tabs is static and not navigated to within a NavController
|
||||
@ -151,7 +152,7 @@ export class Tabs extends Ion {
|
||||
* @private
|
||||
*/
|
||||
add(tab) {
|
||||
tab.id = this._id + '-' + (++_tabIds);
|
||||
tab.id = this._id + '-' + (++this._ids);
|
||||
this._tabs.push(tab);
|
||||
|
||||
return (this._tabs.length === 1);
|
||||
@ -268,7 +269,7 @@ export class Tabs extends Ion {
|
||||
|
||||
}
|
||||
|
||||
let _tabIds = -1;
|
||||
let tabIds = -1;
|
||||
|
||||
|
||||
/**
|
||||
@ -309,8 +310,6 @@ class TabButton extends Ion {
|
||||
}
|
||||
}
|
||||
|
||||
let tabIds = -1;
|
||||
|
||||
|
||||
/**
|
||||
* @private
|
||||
|
@ -56,7 +56,7 @@ export class Activator {
|
||||
clearState() {
|
||||
// all states should return to normal
|
||||
|
||||
if ((!this.app.isEnabled() || this.app.isTransitioning())) {
|
||||
if (!this.app.isEnabled()) {
|
||||
// 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.
|
||||
|
@ -1,5 +1,6 @@
|
||||
import {Component, Directive, NgIf, forwardRef, Host, Optional, ElementRef, Renderer, Attribute} from 'angular2/angular2';
|
||||
|
||||
import {NavController} from '../nav/nav-controller';
|
||||
import {Config} from '../../config/config';
|
||||
import {Form} from '../../util/form';
|
||||
import {Label} from './label';
|
||||
@ -36,7 +37,8 @@ export class TextInput {
|
||||
renderer: Renderer,
|
||||
app: IonicApp,
|
||||
platform: Platform,
|
||||
@Optional() @Host() scrollView: Content
|
||||
@Optional() @Host() scrollView: Content,
|
||||
@Optional() navCtrl: NavController
|
||||
) {
|
||||
this.renderer = renderer;
|
||||
|
||||
@ -49,6 +51,7 @@ export class TextInput {
|
||||
this.app = app;
|
||||
this.elementRef = elementRef;
|
||||
this.platform = platform;
|
||||
this.navCtrl = navCtrl;
|
||||
|
||||
this.scrollView = scrollView;
|
||||
this.scrollAssist = config.get('scrollAssist');
|
||||
@ -83,7 +86,7 @@ export class TextInput {
|
||||
|
||||
let self = this;
|
||||
self.scrollMove = (ev) => {
|
||||
if (!self.app.isTransitioning()) {
|
||||
if (!(this.navCtrl && this.navCtrl.isTransitioning())) {
|
||||
self.deregMove();
|
||||
|
||||
if (self.hasFocus) {
|
||||
@ -173,7 +176,7 @@ export class TextInput {
|
||||
// do not allow any clicks while it's scrolling
|
||||
let scrollDuration = getScrollAssistDuration(scrollData.scrollAmount);
|
||||
this.app.setEnabled(false, scrollDuration);
|
||||
this.app.setTransitioning(true, scrollDuration);
|
||||
this.navCtrl && this.navCtrl.setTransitioning(true, scrollDuration);
|
||||
|
||||
// temporarily move the focus to the focus holder so the browser
|
||||
// doesn't freak out while it's trying to get the input in place
|
||||
@ -188,7 +191,7 @@ export class TextInput {
|
||||
|
||||
// all good, allow clicks again
|
||||
this.app.setEnabled(true);
|
||||
this.app.setTransitioning(false);
|
||||
this.navCtrl && this.navCtrl.setTransitioning(false);
|
||||
this.regMove();
|
||||
});
|
||||
|
||||
|
Reference in New Issue
Block a user