From 424800a3c98a9428eb1aece27c3d763ed10c554b Mon Sep 17 00:00:00 2001 From: Adam Bradley Date: Tue, 24 Nov 2015 14:02:36 -0600 Subject: [PATCH] fix(transition): update disabling transitions --- ionic/components/app/app.ts | 13 ------ ionic/components/menu/menu.ts | 4 -- ionic/components/nav/nav-controller.ts | 50 +++++++++++++++-------- ionic/components/tabs/tabs.ts | 7 ++-- ionic/components/tap-click/activator.ts | 2 +- ionic/components/text-input/text-input.ts | 11 +++-- 6 files changed, 45 insertions(+), 42 deletions(-) diff --git a/ionic/components/app/app.ts b/ionic/components/app/app.ts index 44bf65db8a..6a4b5fd3b0 100644 --- a/ionic/components/app/app.ts +++ b/ionic/components/app/app.ts @@ -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 diff --git a/ionic/components/menu/menu.ts b/ionic/components/menu/menu.ts index 16b5897e7d..f0bcae1eb2 100644 --- a/ionic/components/menu/menu.ts +++ b/ionic/components/menu/menu.ts @@ -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; diff --git a/ionic/components/nav/nav-controller.ts b/ionic/components/nav/nav-controller.ts index 96eda118a8..4ef667e18b 100644 --- a/ionic/components/nav/nav-controller.ts +++ b/ionic/components/nav/nav-controller.ts @@ -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) { - // 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); - } + 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(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(); diff --git a/ionic/components/tabs/tabs.ts b/ionic/components/tabs/tabs.ts index f3d6ad6e52..1bd0c9b714 100644 --- a/ionic/components/tabs/tabs.ts +++ b/ionic/components/tabs/tabs.ts @@ -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 diff --git a/ionic/components/tap-click/activator.ts b/ionic/components/tap-click/activator.ts index 0f2b746fc0..bd8fef0c88 100644 --- a/ionic/components/tap-click/activator.ts +++ b/ionic/components/tap-click/activator.ts @@ -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. diff --git a/ionic/components/text-input/text-input.ts b/ionic/components/text-input/text-input.ts index 134bb4dc64..ad54e5ccfe 100644 --- a/ionic/components/text-input/text-input.ts +++ b/ionic/components/text-input/text-input.ts @@ -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(); });