mirror of
https://github.com/ionic-team/ionic-framework.git
synced 2025-08-19 03:32:21 +08:00
fix(activator): ensure links active during transition
This commit is contained in:
@ -41,7 +41,8 @@ export class IonicApp {
|
|||||||
*/
|
*/
|
||||||
constructor() {
|
constructor() {
|
||||||
this.overlays = [];
|
this.overlays = [];
|
||||||
this._disableTime = 0;
|
this._disTime = 0;
|
||||||
|
this._trnsTime = 0;
|
||||||
|
|
||||||
// Our component registry map
|
// Our component registry map
|
||||||
this.components = {};
|
this.components = {};
|
||||||
@ -63,9 +64,9 @@ export class IonicApp {
|
|||||||
*/
|
*/
|
||||||
focusHolder(val) {
|
focusHolder(val) {
|
||||||
if (arguments.length) {
|
if (arguments.length) {
|
||||||
this._focusHolder = val;
|
this._fcsHldr = val;
|
||||||
}
|
}
|
||||||
return this._focusHolder;
|
return this._fcsHldr;
|
||||||
}
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
@ -89,16 +90,29 @@ export class IonicApp {
|
|||||||
* something goes wrong during a transition and the app wasn't re-enabled correctly.
|
* something goes wrong during a transition and the app wasn't re-enabled correctly.
|
||||||
*/
|
*/
|
||||||
setEnabled(isEnabled, fallback=700) {
|
setEnabled(isEnabled, fallback=700) {
|
||||||
this._disableTime = (isEnabled ? 0 : Date.now() + fallback);
|
this._disTime = (isEnabled ? 0 : Date.now() + fallback);
|
||||||
ClickBlock(!isEnabled, fallback + 100);
|
ClickBlock(!isEnabled, fallback + 100);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Boolean if the app is actively enabled or not.
|
||||||
|
* @return {bool}
|
||||||
|
*/
|
||||||
|
isEnabled() {
|
||||||
|
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.
|
* Boolean if the app is actively transitioning or not.
|
||||||
* @return {bool}
|
* @return {bool}
|
||||||
*/
|
*/
|
||||||
isEnabled() {
|
isTransitioning() {
|
||||||
return (this._disableTime < Date.now());
|
console.debug('isTransitioning', (this._trnsTime > Date.now()), this._trnsTime, Date.now())
|
||||||
|
return (this._trnsTime > Date.now());
|
||||||
}
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
|
@ -136,12 +136,14 @@ export class Menu extends Ion {
|
|||||||
setProgess(value) {
|
setProgess(value) {
|
||||||
// user actively dragging the menu
|
// user actively dragging the menu
|
||||||
this._disable();
|
this._disable();
|
||||||
|
this.app.setTransitioning(true);
|
||||||
this._type.setProgess(value);
|
this._type.setProgess(value);
|
||||||
}
|
}
|
||||||
|
|
||||||
setProgressEnd(shouldComplete) {
|
setProgressEnd(shouldComplete) {
|
||||||
// user has finished dragging the menu
|
// user has finished dragging the menu
|
||||||
this._disable();
|
this._disable();
|
||||||
|
this.app.setTransitioning(true);
|
||||||
this._type.setProgressEnd(shouldComplete).then(isOpen => {
|
this._type.setProgressEnd(shouldComplete).then(isOpen => {
|
||||||
this._after(isOpen);
|
this._after(isOpen);
|
||||||
});
|
});
|
||||||
@ -154,11 +156,13 @@ export class Menu extends Ion {
|
|||||||
this.getBackdropElement().classList.add('show-backdrop');
|
this.getBackdropElement().classList.add('show-backdrop');
|
||||||
|
|
||||||
this._disable();
|
this._disable();
|
||||||
|
this.app.setTransitioning(true);
|
||||||
}
|
}
|
||||||
|
|
||||||
_after(isOpen) {
|
_after(isOpen) {
|
||||||
// keep opening/closing the menu disabled for a touch more yet
|
// keep opening/closing the menu disabled for a touch more yet
|
||||||
this._disable();
|
this._disable();
|
||||||
|
this.app.setTransitioning(false);
|
||||||
|
|
||||||
this.isOpen = isOpen;
|
this.isOpen = isOpen;
|
||||||
|
|
||||||
|
@ -280,6 +280,7 @@ export class NavController extends Ion {
|
|||||||
// block any clicks during the transition and provide a
|
// block any clicks during the transition and provide a
|
||||||
// fallback to remove the clickblock if something goes wrong
|
// fallback to remove the clickblock if something goes wrong
|
||||||
this.app.setEnabled(false, duration);
|
this.app.setEnabled(false, duration);
|
||||||
|
this.app.setTransitioning(true, duration);
|
||||||
}
|
}
|
||||||
|
|
||||||
// start the transition
|
// start the transition
|
||||||
@ -318,6 +319,7 @@ export class NavController extends Ion {
|
|||||||
|
|
||||||
// disables the app during the transition
|
// disables the app during the transition
|
||||||
this.app.setEnabled(false);
|
this.app.setEnabled(false);
|
||||||
|
this.app.setTransitioning(true);
|
||||||
|
|
||||||
// default the direction to "back"
|
// default the direction to "back"
|
||||||
let opts = {
|
let opts = {
|
||||||
@ -364,6 +366,7 @@ export class NavController extends Ion {
|
|||||||
if (this._sbTrans) {
|
if (this._sbTrans) {
|
||||||
// continue to disable the app while actively dragging
|
// continue to disable the app while actively dragging
|
||||||
this.app.setEnabled(false, 4000);
|
this.app.setEnabled(false, 4000);
|
||||||
|
this.app.setTransitioning(true, 4000);
|
||||||
|
|
||||||
// set the transition animation's progress
|
// set the transition animation's progress
|
||||||
this._sbTrans.progress(value);
|
this._sbTrans.progress(value);
|
||||||
@ -380,13 +383,14 @@ export class NavController extends Ion {
|
|||||||
|
|
||||||
// disables the app during the transition
|
// disables the app during the transition
|
||||||
this.app.setEnabled(false);
|
this.app.setEnabled(false);
|
||||||
|
this.app.setTransitioning(true);
|
||||||
|
|
||||||
this._sbTrans.progressEnd(completeSwipeBack, rate).then(() => {
|
this._sbTrans.progressEnd(completeSwipeBack, rate).then(() => {
|
||||||
|
|
||||||
this.zone.run(() => {
|
this.zone.run(() => {
|
||||||
// find the views that were entering and leaving
|
// find the views that were entering and leaving
|
||||||
let enteringView = this.getStagedenteringView();
|
let enteringView = this.getStagedEnteringView();
|
||||||
let leavingView = this.getStagedleavingView();
|
let leavingView = this.getStagedLeavingView();
|
||||||
|
|
||||||
if (enteringView && leavingView) {
|
if (enteringView && leavingView) {
|
||||||
// finish up the animation
|
// finish up the animation
|
||||||
@ -520,6 +524,7 @@ export class NavController extends Ion {
|
|||||||
// allow clicks again, but still set an enable time
|
// allow clicks again, but still set an enable time
|
||||||
// meaning nothing with this view controller can happen for XXms
|
// meaning nothing with this view controller can happen for XXms
|
||||||
this.app.setEnabled(true);
|
this.app.setEnabled(true);
|
||||||
|
this.app.setTransitioning(false);
|
||||||
|
|
||||||
if (this.views.length === 1) {
|
if (this.views.length === 1) {
|
||||||
this.elementRef.nativeElement.classList.add('has-views');
|
this.elementRef.nativeElement.classList.add('has-views');
|
||||||
@ -585,7 +590,7 @@ export class NavController extends Ion {
|
|||||||
* TODO
|
* TODO
|
||||||
* @returns {TODO} TODO
|
* @returns {TODO} TODO
|
||||||
*/
|
*/
|
||||||
getStagedenteringView() {
|
getStagedEnteringView() {
|
||||||
for (let i = 0, ii = this.views.length; i < ii; i++) {
|
for (let i = 0, ii = this.views.length; i < ii; i++) {
|
||||||
if (this.views[i].state === STAGED_ENTERING_STATE) {
|
if (this.views[i].state === STAGED_ENTERING_STATE) {
|
||||||
return this.views[i];
|
return this.views[i];
|
||||||
@ -598,7 +603,7 @@ export class NavController extends Ion {
|
|||||||
* TODO
|
* TODO
|
||||||
* @returns {TODO} TODO
|
* @returns {TODO} TODO
|
||||||
*/
|
*/
|
||||||
getStagedleavingView() {
|
getStagedLeavingView() {
|
||||||
for (let i = 0, ii = this.views.length; i < ii; i++) {
|
for (let i = 0, ii = this.views.length; i < ii; i++) {
|
||||||
if (this.views[i].state === STAGED_LEAVING_STATE) {
|
if (this.views[i].state === STAGED_LEAVING_STATE) {
|
||||||
return this.views[i];
|
return this.views[i];
|
||||||
|
@ -127,6 +127,7 @@ export class OverlayRef {
|
|||||||
animation.before.addClass('show-overlay');
|
animation.before.addClass('show-overlay');
|
||||||
|
|
||||||
this.app.setEnabled(false, animation.duration());
|
this.app.setEnabled(false, animation.duration());
|
||||||
|
this.app.setTransitioning(true, animation.duration());
|
||||||
|
|
||||||
this.app.zoneRunOutside(() => {
|
this.app.zoneRunOutside(() => {
|
||||||
|
|
||||||
@ -134,6 +135,7 @@ export class OverlayRef {
|
|||||||
|
|
||||||
this.app.zoneRun(() => {
|
this.app.zoneRun(() => {
|
||||||
this.app.setEnabled(true);
|
this.app.setEnabled(true);
|
||||||
|
this.app.setTransitioning(false);
|
||||||
animation.dispose();
|
animation.dispose();
|
||||||
instance.onViewDidEnter && instance.onViewDidEnter();
|
instance.onViewDidEnter && instance.onViewDidEnter();
|
||||||
resolve();
|
resolve();
|
||||||
@ -159,6 +161,7 @@ export class OverlayRef {
|
|||||||
|
|
||||||
animation.after.removeClass('show-overlay');
|
animation.after.removeClass('show-overlay');
|
||||||
this.app.setEnabled(false, animation.duration());
|
this.app.setEnabled(false, animation.duration());
|
||||||
|
this.app.setTransitioning(true, animation.duration());
|
||||||
|
|
||||||
animation.play().then(() => {
|
animation.play().then(() => {
|
||||||
instance.onViewDidLeave && instance.onViewDidLeave();
|
instance.onViewDidLeave && instance.onViewDidLeave();
|
||||||
@ -167,6 +170,7 @@ export class OverlayRef {
|
|||||||
this._dispose();
|
this._dispose();
|
||||||
|
|
||||||
this.app.setEnabled(true);
|
this.app.setEnabled(true);
|
||||||
|
this.app.setTransitioning(false);
|
||||||
animation.dispose();
|
animation.dispose();
|
||||||
|
|
||||||
resolve();
|
resolve();
|
||||||
|
@ -35,7 +35,7 @@ export class Activator {
|
|||||||
clearState() {
|
clearState() {
|
||||||
// all states should return to normal
|
// all states should return to normal
|
||||||
|
|
||||||
if (!this.app.isEnabled() && this.clearAttempt < 30) {
|
if ((!this.app.isEnabled() || this.app.isTransitioning()) && this.clearAttempt < 30) {
|
||||||
// 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.
|
||||||
|
@ -233,6 +233,7 @@ export class TextInput extends Ion {
|
|||||||
// manually scroll the text input to the top
|
// manually scroll the text input to the top
|
||||||
// do not allow any clicks while it's scrolling
|
// do not allow any clicks while it's scrolling
|
||||||
this.app.setEnabled(false, SCROLL_INTO_VIEW_DURATION);
|
this.app.setEnabled(false, SCROLL_INTO_VIEW_DURATION);
|
||||||
|
this.app.setTransitioning(true, SCROLL_INTO_VIEW_DURATION);
|
||||||
|
|
||||||
// temporarily move the focus to the focus holder so the browser
|
// 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
|
// doesn't freak out while it's trying to get the input in place
|
||||||
@ -247,6 +248,7 @@ export class TextInput extends Ion {
|
|||||||
|
|
||||||
// all good, allow clicks again
|
// all good, allow clicks again
|
||||||
this.app.setEnabled(true);
|
this.app.setEnabled(true);
|
||||||
|
this.app.setTransitioning(false);
|
||||||
});
|
});
|
||||||
|
|
||||||
} else {
|
} else {
|
||||||
|
@ -14,8 +14,8 @@ export class Transition extends Animation {
|
|||||||
super();
|
super();
|
||||||
|
|
||||||
// get the entering and leaving items
|
// get the entering and leaving items
|
||||||
let enteringView = this.entering = nav.getStagedenteringView();
|
let enteringView = this.entering = nav.getStagedEnteringView();
|
||||||
let leavingView = this.leaving = nav.getStagedleavingView();
|
let leavingView = this.leaving = nav.getStagedLeavingView();
|
||||||
|
|
||||||
// create animation for the entering item's "ion-view" element
|
// create animation for the entering item's "ion-view" element
|
||||||
this.enteringView = new Animation(enteringView.viewElementRef());
|
this.enteringView = new Animation(enteringView.viewElementRef());
|
||||||
|
Reference in New Issue
Block a user