refactor(clickBlock): add to dom on init

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')) {
+    this._clickBlock.show(!isEnabled, fallback + 100);
-      ClickBlock(!isEnabled, fallback + 100);
-    }
   }
 
   /**

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);

ionic/util/click-block.ts

@@ -3,9 +3,31 @@ const DEFAULT_EXPIRE = 330;
 let cbEle, fallbackTimerId;
 let isShowing = false;
 
-function disableInput(ev) {
+
+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);
-
+      isShowing = true;
-    } else {
-      cbEle = document.createElement('div');
-      cbEle.className = 'click-block ' + CSS_CLICK_BLOCK;
-      document.body.appendChild(cbEle);
-    }
-    cbEle.addEventListener('touchmove', disableInput);
   }
 }
 
@@ -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);
-};