main.js

/**
 * Our object namespacing
 */

window.EJ         = window.EJ || {},
EJ.helpers        = EJ.helpers || {},
EJ.helpers.device = EJ.helpers.device || {},
EJ.constants      = EJ.constants || {},
EJ.features       = EJ.features || {},
EJ.config         = EJ.config || {};




/**
 * Our app's contstants
 */

EJ.constants.DESKTOP   = 990,
EJ.constants.TABLETLG  = 989,
EJ.constants.TABLETSM  = 768,
EJ.constants.MOBILE    = 767;

EJ.constants.MOBILEMQ  = 'only screen and (max-width: ' + EJ.constants.MOBILE + 'px)',
EJ.constants.TABLETMQ  = 'only screen and (min-width: ' + EJ.constants.TABLETSM + 'px) and (max-width: ' + EJ.constants.TABLETLG + 'px)',
EJ.constants.DESKTOPMQ = 'only screen and (min-width: ' + EJ.constants.DESKTOP + 'px)';




/**
 * Our debug
 */

if ( location.hostname.indexOf('localhost') !== -1 && window.location.port === '9000' || window.location.hash === '#debug=true' ) {
  EJ.debug = true;
  var head    = document.getElementsByTagName('head')[0];
  var script  = document.createElement('script');
  script.type = 'text/javascript';
  script.src  = 'http://localhost:35729/livereload.js';
  head.appendChild(script);
}




/**
 * Safe console log
 */

window.log = function(){
  log.history = log.history || [];   // store logs to an array for reference
  log.history.push(arguments);
  if ( this.console ) {
    console.log( Array.prototype.slice.call(arguments) );
  }
};




/**
 * Get Width Helper - This is re-run on every debouced resize event that will help setup our responsiveness
 */

EJ.helpers.getWidth = function() {
  // Lets setup our widths
  EJ.helpers.innerWidth = !window.innerWidth ? document.documentElement.clientWidth : window.innerWidth;

  // Queries based on screen width
  EJ.helpers.device.desktop = EJ.helpers.innerWidth > EJ.constants.DESKTOP,
  EJ.helpers.device.tablet  = EJ.helpers.innerWidth <= EJ.constants.TABLETLG && EJ.helpers.innerWidth > EJ.constants.TABLETSM,
  EJ.helpers.device.mobile  = EJ.helpers.innerWidth <= EJ.constants.MOBILE;

  // Queries based on media query tests (Modernizr.mq API)
  EJ.helpers.device.desktopMQ = Modernizr.mq(EJ.constants.DESKTOPMQ),
  EJ.helpers.device.tabletMQ  = Modernizr.mq(EJ.constants.TABLETMQ),
  EJ.helpers.device.mobileMQ  = Modernizr.mq(EJ.constants.MOBILEMQ);

  EJ.helpers.device.touch = Modernizr.touch;

  function mobileCheck() {
    var check = false;
    (function(a){if(/(android|ipad|playbook|silk|bb\d+|meego).+mobile|avantgo|bada\/|blackberry|blazer|compal|elaine|fennec|hiptop|iemobile|ip(hone|od)|iris|kindle|lge |maemo|midp|mmp|netfront|opera m(ob|in)i|palm( os)?|phone|p(ixi|re)\/|plucker|pocket|psp|series(4|6)0|symbian|treo|up\.(browser|link)|vodafone|wap|windows (ce|phone)|xda|xiino/i.test(a)||/1207|6310|6590|3gso|4thp|50[1-6]i|770s|802s|a wa|abac|ac(er|oo|s\-)|ai(ko|rn)|al(av|ca|co)|amoi|an(ex|ny|yw)|aptu|ar(ch|go)|as(te|us)|attw|au(di|\-m|r |s )|avan|be(ck|ll|nq)|bi(lb|rd)|bl(ac|az)|br(e|v)w|bumb|bw\-(n|u)|c55\/|capi|ccwa|cdm\-|cell|chtm|cldc|cmd\-|co(mp|nd)|craw|da(it|ll|ng)|dbte|dc\-s|devi|dica|dmob|do(c|p)o|ds(12|\-d)|el(49|ai)|em(l2|ul)|er(ic|k0)|esl8|ez([4-7]0|os|wa|ze)|fetc|fly(\-|_)|g1 u|g560|gene|gf\-5|g\-mo|go(\.w|od)|gr(ad|un)|haie|hcit|hd\-(m|p|t)|hei\-|hi(pt|ta)|hp( i|ip)|hs\-c|ht(c(\-| |_|a|g|p|s|t)|tp)|hu(aw|tc)|i\-(20|go|ma)|i230|iac( |\-|\/)|ibro|idea|ig01|ikom|im1k|inno|ipaq|iris|ja(t|v)a|jbro|jemu|jigs|kddi|keji|kgt( |\/)|klon|kpt |kwc\-|kyo(c|k)|le(no|xi)|lg( g|\/(k|l|u)|50|54|\-[a-w])|libw|lynx|m1\-w|m3ga|m50\/|ma(te|ui|xo)|mc(01|21|ca)|m\-cr|me(rc|ri)|mi(o8|oa|ts)|mmef|mo(01|02|bi|de|do|t(\-| |o|v)|zz)|mt(50|p1|v )|mwbp|mywa|n10[0-2]|n20[2-3]|n30(0|2)|n50(0|2|5)|n7(0(0|1)|10)|ne((c|m)\-|on|tf|wf|wg|wt)|nok(6|i)|nzph|o2im|op(ti|wv)|oran|owg1|p800|pan(a|d|t)|pdxg|pg(13|\-([1-8]|c))|phil|pire|pl(ay|uc)|pn\-2|po(ck|rt|se)|prox|psio|pt\-g|qa\-a|qc(07|12|21|32|60|\-[2-7]|i\-)|qtek|r380|r600|raks|rim9|ro(ve|zo)|s55\/|sa(ge|ma|mm|ms|ny|va)|sc(01|h\-|oo|p\-)|sdk\/|se(c(\-|0|1)|47|mc|nd|ri)|sgh\-|shar|sie(\-|m)|sk\-0|sl(45|id)|sm(al|ar|b3|it|t5)|so(ft|ny)|sp(01|h\-|v\-|v )|sy(01|mb)|t2(18|50)|t6(00|10|18)|ta(gt|lk)|tcl\-|tdg\-|tel(i|m)|tim\-|t\-mo|to(pl|sh)|ts(70|m\-|m3|m5)|tx\-9|up(\.b|g1|si)|utst|v400|v750|veri|vi(rg|te)|vk(40|5[0-3]|\-v)|vm40|voda|vulc|vx(52|53|60|61|70|80|81|83|85|98)|w3c(\-| )|webc|whit|wi(g |nc|nw)|wmlb|wonu|x700|yas\-|your|zeto|zte\-/i.test(a.substr(0,4)))check = true})(navigator.userAgent||navigator.vendor||window.opera);
    return check;
  }

  EJ.helpers.device.mobileCheck = mobileCheck();

  if ( EJ.debug ) {
    log('innerWidth:', EJ.helpers.innerWidth);
    log('Desktop:', EJ.helpers.device.desktop);
    log('Tablet:', EJ.helpers.device.tablet);
    log('Mobile:', EJ.helpers.device.mobile);
    log('MobileCheck (ua):', EJ.helpers.device.mobileCheck);
    log('Touch Device:', EJ.helpers.device.touch);
  }
};




/**
 * Our simple pubsub system
 */

EJ.events = {};
(function(q) {
  'use strict';

  var topics = {},
    subUid = -1;

  q.subscribe = function(topic, func) {
    if ( !topics[topic] ) {
      topics[topic] = [];
    }

    var token = (++subUid).toString();
    topics[topic].push({
      token: token,
      func: func
    });

    return token;
  };

  q.publish = function(topic, args) {
    if ( !topics[topic] ) {
      return false;
    }

    setTimeout(function() {
      var subscribers = topics[topic],
          len = subscribers ? subscribers.length : 0;

      while (len--) {
        subscribers[len].func(topic, args);
      }
    }, 0);

    return true;
  };

  q.unsubscribe = function(token) {
    for ( var m in topics ) {
      if ( topics[m] ) {
        for ( var i = 0, j = topics[m].length; i < j; i++ ) {
          if ( topics[m][i].token === token ) {
            topics[m].splice(i, 1);
            return token;
          }
        }
      }
    }
    return false;
  };
}(EJ.events));




/**
 * Features loader
 * Iterates over all data-features attributes in the DOM and will execute EJ.features.featureName.init()
 */

EJ.features = {
  init: function() {
    var features = $('[data-features]');
    if ( !features.length ) return false;
    for ( var i = 0; i < features.length; i++ ) {
      var $el = $(features[i]),
        func = $el.data('features');
      if ( this[func] && typeof this[func].init === 'function' ) {
          this[func].init($el);
      }
    }
  }
};




/**
 * Deboucned resize handler
 */

EJ.helpers.resizeThrottle = (function(throttle) {
  throttle.init = function() {
    var updateLayout = _.debounce(function(e) {
      if ( EJ.debug ) log('Throttled resize event. Broadcasting...');
      EJ.events.publish('resize');
      //EJ.helpers.checkWidthConditions();
    }, 500);
    window.addEventListener("resize", updateLayout, false);
  };

  return throttle;
}(EJ.helpers.resizeThrottle || {}));





/**
 * Functions that will be re-fired when a window resize event is broadcasted
 */

EJ.helpers.checkWidthConditions = (function(conds) {
  var funcs = function() {
    // Important: these have to be re-called on every resize event since getWidth handles all of our
    // sizing and sets our device metrics (App.helpers.device tree) along with loading any conditional
    // assets through Modernizr.load if needed.
    EJ.helpers.getWidth();

    // if mobile width, mobile media query or mobile ua returns true, broadcast a resize:mobile event
    if ( EJ.helpers.device.mobile || EJ.helpers.device.mobileMQ || EJ.helpers.device.mobileCheck ) EJ.events.publish('resize:mobile');

    // if we are in the tablet realm, lets publish that
    if ( EJ.helpers.device.tablet || EJ.helpers.device.tabletMQ ) EJ.events.publish('resize:tablet');
  };

  conds.init = function() {
    EJ.events.subscribe('resize', function() {
      funcs();
    });
  };

  return conds;
}(EJ.helpers.checkWidthConditions || {}));





/**
 * Our initialize function. This will be called on dom-ready
 */

EJ.initialize = function() {
  EJ.helpers.getWidth(),
  EJ.helpers.checkWidthConditions.init(),
  EJ.helpers.resizeThrottle.init(),
  EJ.features.init();
};




/**
 * my musings
 */


EJ.evtHandler = function(e) {
  console.log('EJ.evtHandler', e);
  var target = e.target || e.srcElement || e.originalTarget;
  console.log('target', target);
}

var createNestedObject = function(base, names, values) {
    base = base[names] = values;
};

var EventRegistry = {};

var Events = {
  add: function(feature, value) {
    createNestedObject(EventRegistry, feature, value);
  },
  get: function(key) {
    return EventRegistry[key];
  },
  remove: function(key) {
    return delete EventRegistry[key];
  }
};




/**
 * Dom ready
 */

$(function() {
  EJ.initialize();
});