diff --git a/ionic/components/app/app.ts b/ionic/components/app/app.ts index 6a4b5fd3b0..e45b75a0db 100644 --- a/ionic/components/app/app.ts +++ b/ionic/components/app/app.ts @@ -1,7 +1,6 @@ import {Title} from 'angular2/angular2'; import {rafFrames} from '../../util/dom'; -import {ClickBlock} from '../../util/click-block'; import {ScrollTo} from '../../animations/scroll-to'; @@ -11,11 +10,12 @@ import {ScrollTo} from '../../animations/scroll-to'; */ export class IonicApp { - constructor(config) { + constructor(config, clickBlock) { this._config = config; this._titleSrv = new Title(); this._title = ''; this._disTime = 0; + this._clickBlock = clickBlock; // Our component registry map this.components = {}; @@ -49,9 +49,7 @@ export class IonicApp { */ setEnabled(isEnabled, fallback=700) { this._disTime = (isEnabled ? 0 : Date.now() + fallback); - if (this._config.get('clickBlock')) { - ClickBlock(!isEnabled, fallback + 100); - } + this._clickBlock.show(!isEnabled, fallback + 100); } /** diff --git a/ionic/config/bootstrap.ts b/ionic/config/bootstrap.ts index 244722880d..41eab44ae5 100644 --- a/ionic/config/bootstrap.ts +++ b/ionic/config/bootstrap.ts @@ -17,7 +17,8 @@ import {Translate} from '../translation/translate'; import {ClickBlock} from '../util/click-block'; import {FeatureDetect} from '../util/feature-detect'; import {initTapClick} from '../components/tap-click/tap-click'; -import * as dom from '../util/dom'; +import {ClickBlock} from '../util/click-block'; +import {ready, closest} from '../util/dom'; export function ionicProviders(args={}) { @@ -36,13 +37,15 @@ export function ionicProviders(args={}) { platform.load(); config.setPlatform(platform); - let app = new IonicApp(config); + let clickBlock = new ClickBlock(config.get('clickBlock')); + + let app = new IonicApp(config, clickBlock); let events = new Events(); initTapClick(window, document, app, config); let featureDetect = new FeatureDetect(); - setupDom(window, document, config, platform, featureDetect); + setupDom(window, document, config, platform, clickBlock, featureDetect); bindEvents(window, document, platform, events); // prepare the ready promise to fire....when ready @@ -69,10 +72,10 @@ export function ionicProviders(args={}) { } -function setupDom(window, document, config, platform, featureDetect) { +function setupDom(window, document, config, platform, clickBlock, featureDetect) { let bodyEle = document.body; if (!bodyEle) { - return dom.ready(function() { + return ready(function() { applyBodyCss(document, config, platform); }); } @@ -104,6 +107,10 @@ function setupDom(window, document, config, platform, featureDetect) { bodyEle.classList.add('enable-hover'); } + if (config.get('clickBlock')) { + clickBlock.enable(); + } + // run feature detection tests featureDetect.run(window, document); } @@ -131,7 +138,7 @@ function bindEvents(window, document, platform, events) { var el = document.elementFromPoint(platform.width() / 2, platform.height() / 2); if(!el) { return; } - var content = dom.closest(el, 'scroll-content'); + var content = closest(el, 'scroll-content'); if(content) { var scrollTo = new ScrollTo(content); scrollTo.start(0, 0, 300, 0); diff --git a/ionic/util/click-block.ts b/ionic/util/click-block.ts index 8db77baca7..f1edf01f30 100644 --- a/ionic/util/click-block.ts +++ b/ionic/util/click-block.ts @@ -3,9 +3,31 @@ const DEFAULT_EXPIRE = 330; let cbEle, fallbackTimerId; let isShowing = false; -function disableInput(ev) { - ev.preventDefault(); - ev.stopPropagation(); + +export class ClickBlock { + + enable() { + cbEle = document.createElement('div'); + cbEle.className = 'click-block'; + document.body.appendChild(cbEle); + cbEle.addEventListener('touchmove', function(ev) { + ev.preventDefault(); + ev.stopPropagation(); + }); + this._enabled = true; + } + + show(shouldShow, expire) { + if (this._enabled) { + if (shouldShow) { + show(expire); + + } else { + hide(); + } + } + } + } function show(expire) { @@ -13,16 +35,8 @@ function show(expire) { fallbackTimerId = setTimeout(hide, expire || DEFAULT_EXPIRE); if (!isShowing) { - isShowing = true; - if (cbEle) { - cbEle.classList.add(CSS_CLICK_BLOCK); - - } else { - cbEle = document.createElement('div'); - cbEle.className = 'click-block ' + CSS_CLICK_BLOCK; - document.body.appendChild(cbEle); - } - cbEle.addEventListener('touchmove', disableInput); + cbEle.classList.add(CSS_CLICK_BLOCK); + isShowing = true; } } @@ -31,10 +45,5 @@ function hide() { if (isShowing) { cbEle.classList.remove(CSS_CLICK_BLOCK); isShowing = false; - cbEle.removeEventListener('touchmove', disableInput); } } - -export let ClickBlock = function(shouldShow, expire) { - (shouldShow ? show : hide)(expire); -};