Last active
August 29, 2015 14:00
-
-
Save kris-ellery/11194130 to your computer and use it in GitHub Desktop.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
/** | |
* 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); |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment