diff --git a/src/components/app/app.ts b/src/components/app/app.ts index 3ea0232765..b3df0d51d2 100644 --- a/src/components/app/app.ts +++ b/src/components/app/app.ts @@ -53,22 +53,23 @@ export class App { * while views transition, a modal slides up, an action-sheet * slides up, etc. After the transition completes it is set back to `true`. * @param {boolean} isEnabled - * @param {boolean} fallback When `isEnabled` is set to `false`, this argument + * @param {number} duration When `isEnabled` is set to `false`, this argument * is used to set the maximum number of milliseconds that app will wait until * it will automatically enable the app again. It's basically a fallback incase * something goes wrong during a transition and the app wasn't re-enabled correctly. */ setEnabled(isEnabled: boolean, duration: number = 700) { this._disTime = (isEnabled ? 0 : Date.now() + duration); - + const CLICK_BLOCK_BUFFER_IN_MILLIS = 64; if (this._clickBlock) { - if (duration > 32) { - // only do a click block if the duration is longer than XXms - this._clickBlock.show(true, duration + 64); - - } else { + if ( isEnabled || duration <= 32 ) { + // disable the click block if it's enabled, or the duration is tiny this._clickBlock.show(false, 0); } + else { + // show the click block for duration + some number + this._clickBlock.show(true, duration + CLICK_BLOCK_BUFFER_IN_MILLIS); + } } } diff --git a/src/components/app/test/app.spec.ts b/src/components/app/test/app.spec.ts index 6507987a7f..44b63a56bf 100644 --- a/src/components/app/test/app.spec.ts +++ b/src/components/app/test/app.spec.ts @@ -83,7 +83,77 @@ describe('IonicApp', () => { expect(app.getActiveNav()).toBeNull(); expect(app.getRootNav()).toBeNull(); }); + }); + describe('setEnabled', () => { + it('should disable click block when app is enabled', () => { + // arrange + let mockClickBlock = { + show: () => {} + }; + + spyOn(mockClickBlock, 'show'); + + app._clickBlock = mockClickBlock; + + // act + app.setEnabled(true); + + // assert + expect(mockClickBlock.show).toHaveBeenCalledWith(false, 0); + }); + + it('should disable click block when app is disabled but duration of less than 32 passed', () => { + // arrange + let mockClickBlock = { + show: () => {} + }; + + spyOn(mockClickBlock, 'show'); + + app._clickBlock = mockClickBlock; + + // act + app.setEnabled(false, 20); + + // assert + expect(mockClickBlock.show).toHaveBeenCalledWith(false, 0); + }); + + it('should enable click block when false is passed with duration', () => { + // arrange + let mockClickBlock = { + show: () => {} + }; + + spyOn(mockClickBlock, 'show'); + + app._clickBlock = mockClickBlock; + + // act + app.setEnabled(false, 200); + + // assert + expect(mockClickBlock.show).toHaveBeenCalledWith(true, 200 + 64); + }); + + it('should enable click block when false is passed w/o duration', () => { + // arrange + let mockClickBlock = { + show: () => {} + }; + + spyOn(mockClickBlock, 'show'); + + app._clickBlock = mockClickBlock; + + // act + app.setEnabled(false); + + // assert + // 700 is the default + expect(mockClickBlock.show).toHaveBeenCalledWith(true, 700 + 64); + }); }); var app: App; diff --git a/src/config/bootstrap.ts b/src/config/bootstrap.ts index 25a645b90b..b43235dae8 100644 --- a/src/config/bootstrap.ts +++ b/src/config/bootstrap.ts @@ -160,6 +160,10 @@ function setupDom(window: Window, document: Document, config: Config, platform: bodyEle.classList.add('enable-hover'); } + if (config.get('clickBlock')) { + clickBlock.enable(); + } + // run feature detection tests featureDetect.run(window, document); }