- Notifications
You must be signed in to change notification settings - Fork121
ryanve/response.js
Folders and files
| Name | Name | Last commit message | Last commit date | |
|---|---|---|---|---|
Repository files navigation
Response is an experimentaljQuery/Ender/Zepto plugin that gives web designers tools for building responsive websites. It can dynamically swap content based onbreakpoints and data attributes. (npm:response.js)
API(0.10)
Response's main feature is its breakpoint sets. They offer the ability to serve different content via breakpoint-based data attributes. They are best applied with a mobile-first approach. Devs can choose custom breakpoints to create exactly data attributes they need. By default none are setup.
Sets are created either by callingResponse.create(options) directly, or automatically via JSON stored in abody[data-responsejs].Theoptions can be a plain object or an array of them.
Response.create({prop:"width"// "width" "device-width" "height" "device-height" or "device-pixel-ratio",prefix:"min-width- r src"// the prefix(es) for your data attributes (aliases are optional),breakpoints:[1281,1025,961,641,481,320,0]// min breakpoints (defaults for width/device-width),lazy:true// optional param - data attr contents lazyload rather than whole page at once});
<bodydata-responsejs='{ "create": [ { "prop": "width" , "prefix": "min-width- r src" , "lazy": true , "breakpoints": [1281,1025,961,641,481,320,0] } ]}'>
<divdata-min-width-481="markup @ 481px+"data-min-width-961="markup @ 961px+"> default markup for 480px- or no-js</div>
Define a custombreakpoint set that uses a custom test
/** *@param {string} prop custom property name (or an existing prop to override) *@param {Function} test callback to test min breakpoints for the prop */Response.addTest('viewport-area',function(min){returnmin>=Response.viewportW()*Response.viewportH();}).create({prop:'viewport-area'// custom prop name,breakpoints:[100000,1000000,10000000]// custom breakpoints,dynamic:true// set this to true if prop needs to be tested on resize});
Methods fromverge
Response.viewportW()// CSS viewport widthResponse.viewportH()// CSS viewport heightResponse.mq(mediaQuery)// => booleanResponse.inViewport(elem,cushion?)// => booleanResponse.inX(elem,cushion?)// => booleanResponse.inY(elem,cushion?)// => booleanResponse.scrollX()// => numberResponse.scrollY()// => number
Response.deviceW()// device widthResponse.deviceH()// device heightResponse.deviceMax()// calculated Math.max(deviceW, deviceH)Response.deviceMin()// calculated Math.min(deviceW, deviceH)
Response.dpr(1.5)// true when device-pixel-ratio is 1.5+Response.dpr(2)// true when device-pixel-ratio is 2+Response.dpr()// get device-pixel-ratio - returns integer or float (0 if undetectable)
Response.band(481)// true in viewports 481px wide and up.Response.band(0,480)// true in viewports 0-480px wide.Response.wave(641)// true in viewport 641px high and up.Response.wave(0,640)// true in viewports 0-640px high.
Response.device.band(481)// true for devices 481px wide and upResponse.device.band(0,480)// true for devices 0-480px wide.Response.device.wave(641)// true for devices 641px high and up.Response.device.wave(0,640)// true for devices 0-640px high.
Call a function onbreakpoint set crossovers
Response.crossover('width',function(){// runs when 'width' breakpoints are crossed})Response.crossover(function(){// runs when any defined breakpoint is crossed})
@deprecated event utils
Response.ready(fn)// call fn on readyResponse.resize(fn)// call fn on resizeResponse.action(fn|fns)// call fn(s) on ready *and* on resize
@deprecated dataset utils
Response.dataset(elem,key)// getResponse.dataset(elem,[key])// get and render (See Response.render)Response.dataset(elem,key,value)// setResponse.dataset(elem,atts)// set multiple data atts at onceResponse.deletes(elem,keys)// delete one or more data attsResponse.dataset(document.body,"pulpFiction",5)// sets <body data-pulp-fiction="5">Response.dataset(document.body,"pulpFiction")// -> "5"Response.dataset(document.body,["pulpFiction"])// -> 5Response.render(str)// convert stringified primitives to correct value e.g. "true" to trueResponse.camelize(str)// convert 'pulp-fiction' or 'data-pulp-fiction' to pulpFictionResponse.datatize(str)// convert 'pulpFiction' to 'data-pulp-fiction'Response.target(keys)// convert keys like "a b c" or ["a","b","c"] to $("[data-a],[data-b],[data-c]")Response.access(keys)// access an array of dataset values that correspond to an array of dataset keysResponse.store($elems,key,attrToReadFrom?)// store init content of each elem to data key
@deprecated object utils
Response.affix(stack,prefix?,suffix?)// create array w/ prefix|suffix added to each stack valueResponse.each(stack,fn,scope?)// call fn for each item in stackResponse.map(stack,fn,scope?)// map stack into a new arrayResponse.merge(target,source)// merge source's defined values into targetResponse.object(parent)// create a new object that inherits parent (via Object.create where possible)Response.route(stack|other,fn,scope?)// call fn on each stack value or on a non-stackResponse.sift(stack,fn?,scope|invert?)// like _.compact, [].filter, and jQuery.grep
// Unmodify windowResponse.noConflict()
// Unmodify window and save reference to our ResponseletR=Response.noConflict()
Response.noConflict(function(Response){// Unmodify window and get safe reference to our Response in here})
AMD usage
define(['jquery'],Response.noConflict);// define module and unmodify window
About
Responsive design toolkit
Topics
Resources
License
Stars
Watchers
Forks
Packages0
No packages published