utils.js

utils.js

import { config } from './../config';
const utils = {
  Log (param) {
    if (config.debug) {
      console.log('¯\_(ツ)_/¯', param);
    }
  },
  Warn (param) {
    if (config.debug) {
      console.warn('(づ｡◕‿‿◕｡)づ', param);
    }
  },
  Err (param) {
    if (config.debug) {
      console.error('(ノಠ益ಠ)ノ彡┻━┻', param);
    }
  },
  deviceIsMobile: null,
  screenDimensions: {
    h : null,
    w : null
  },
  isMobile () {
    window.requestAnimationFrame(function () {
      utils.screenDimensions.w = window.innerWidth;
      utils.screenDimensions.h = window.innerHeight;
      var el = document.querySelector('body');
      // utils.Log(['testing isMobile', utils.screenDimensions]);
      if (utils.screenDimensions.w <= 768) {
        utils.deviceIsMobile = true;
        el.classList.add('is-mobile');
        return true;
      } else {
        utils.deviceIsMobile = false;
        el.classList.remove('is-mobile');
        return false;
      }
    });
  },
  autoReflower (callback) {
    // utils.Log('_utils.autoReflower start');
    var timeout, delay, calls;
    timeout = false; // holder for timeout id
    delay = 100; // delay after event is "complete" to run callback
    calls = 0; // counter for calls, uncomment it in the event listenner if you want to log performance & function calls
    // window.resize event listener + performance management + debounce function + event throttling + callback management
    window.addEventListener('resize', function() {
      window.requestAnimationFrame(function () {
        clearTimeout(timeout);
        timeout = setTimeout(function () {
          utils.isMobile();
          if (callback) {
            callback();
          }
          // calls += 1; utils.Log(['call from autoReflower : ', calls]);
        }, delay);
      });

    });
    // calls += 1; utils.Log(['call from autoReflower : ', calls]);
    utils.isMobile();
  }
};
export {utils};