mediaquery
Version:
turns human readable breakpoints into correct mediaqueries
2 lines (1 loc) • 1.5 kB
JavaScript
var MQ={asArray:function(obj){var bp=this.getBreakPoints(obj),custom=this.getCustomQueries(obj);return this._translate(this._makeSteps(this._toSortedArray(bp))).concat(this._objToArr(custom))},asObject:function(obj){return this._arrToObj(this.asArray(obj))},getBreakPoints:function(obj){return obj==={}?obj:Object.keys(obj).reduce(function(prev,next){return"number"==typeof obj[next]&&(prev[next]=obj[next]),prev},{})},getCustomQueries:function(obj){return obj==={}?obj:Object.keys(obj).reduce(function(prev,next){return"string"==typeof obj[next]&&(prev[next]=obj[next]),prev},{})},_toSortedArray:function(obj){return obj==={}?[]:Object.keys(obj).map(function(el){return[el,obj[el]]}).sort(function(a,b){return a[1]-b[1]})},_makeSteps:function(arr){return arr.length?arr[arr.length-1][1]===1/0?arr:arr.concat([1/0]):[]},_translate:function(arr){return arr===[]?arr:arr.map(function(el,index){return 0===index?[el[0],"screen and (max-width: "+el[1]+"px)"]:index===arr.length-1?[el[0]||"default","screen and (min-width: "+(arr[index-1][1]+1)+"px)"]:[el[0],"screen and (min-width: "+(arr[index-1][1]+1)+"px) and (max-width: "+el[1]+"px)"]})},_objToArr:function(obj){return Object.keys(obj).map(function(el){return[el,obj[el]]})},_arrToObj:function(arr){return arr.reduce(function(prev,next){return prev[next[0]]=next[1],prev},{})}};"undefined"!=typeof module&&"undefined"!=typeof module.exports?module.exports=MQ:"function"==typeof define&&define.amd?define([],function(){return MQ}):window.MQ=MQ;