rwdjs.js

/**
  * RWDJS
  * --------------------------------------------------
  * Responsive Web Design using JavaScript
  */

;(function(window, document, undefined) {

  var _this;
  var rwdjs = rwdjs || {};

  /**
    * Initialize rwdjs
    */

  rwdjs.init = function() {

    _this = this;
    this.cache();
    this.bind();
    this.updateDOM();

  };

  /**
    * Cache reusable data
    */

  rwdjs.cache = function() {

    this.html = document.getElementsByTagName('html')[0];
    this.classNames = [ 'w-small', 'w-medium', 'w-regular', 'w-large' ];
    this.breakpoints = {
      small: 400,
      medium: 650,
      regular: 900,
      large: 1150
    };

  };

  /**
    * Bind event listeners
    */

  rwdjs.bind = function() {
    window.addEventListener('resize', _this.throttle(_this.updateDOM), false);
  };

  /**
    * Update DOM
    */

  rwdjs.updateDOM = function() {

    this.cleanDOM();

    var w = window.innerWidth;

    if ( w >= this.breakpoints.small && w < this.breakpoints.medium ) {
      this.html.classList.add('w-small');
    } else if ( w >= this.breakpoints.medium && w < this.breakpoints.regular ) {
      this.html.classList.add('w-medium');
    } else if ( w >= this.breakpoints.regular && w < this.breakpoints.large ) {
      this.html.classList.add('w-regular');
    } else if ( w >= this.breakpoints.large ) {
      this.html.classList.add('w-large');
    }

    console.log(this.html.classList);

  };

  /**
    * Clean DOM
    */

  rwdjs.cleanDOM = function() {

    var len = this.classNames.length;
    var i = 0;
    for (i; i < len; i++) {
      this.html.classList.remove(this.classNames[i]);
    }

  };

  /**
    * Throttle utility
    */

  rwdjs.throttle = function(func, delay) {

    var timer = null;

    return function() {
      var context = this;
      var args = arguments;

      clearTimeout(timer);
      timer = setTimeout(function() {
        func.apply(context, args);
      }, delay || 500);
    };

  };

  /**
    * Let's Play!
    */

  rwdjs.init();

})(window, document);