Permalink
Browse files

Added initial jquery version.

Simplified API
  • Loading branch information...
1 parent be7ae2d commit d26958cb3f2e3dfb2d2165db071d0586e32c1cff @benschwarz committed Aug 3, 2012
Showing with 128 additions and 14 deletions.
  1. +9 −0 README.md
  2. +6 −1 grunt.js
  3. +88 −0 metaquery.jquery.js
  4. +1 −0 metaquery.jquery.min.js
  5. +3 −6 metaquery.js
  6. +1 −1 metaquery.min.js
  7. +20 −0 test/index-jquery.html
  8. +0 −2 test/index.html
  9. +0 −4 test/unit.js
View
9 README.md
@@ -22,8 +22,17 @@ Internally, metaQuery uses a resize event handler, you may be thinking, "but wai
Download the [production version][min] or the [development version][max].
+or, if you want the smaller, lighter jQuery powered edition:
+
+* [production jQuery version][minjq]
+* [development jQuery version][maxjq]
+
[min]: https://raw.github.com/benschwarz/metaquery/master/metaquery.min.js
[max]: https://raw.github.com/benschwarz/metaquery/master/metaquery.js
+[minjq]: https://raw.github.com/benschwarz/metaquery/master/metaquery.jquery.min.js
+[maxjq]: https://raw.github.com/benschwarz/metaquery/master/metaquery.jquery.js
+
+
In your markup:
View
7 grunt.js
@@ -6,13 +6,18 @@ module.exports = function(grunt) {
dist: {
src: ['metaquery.js'],
dest: 'metaquery.min.js'
+ },
+
+ distjq: {
+ src: ['metaquery.jquery.js'],
+ dest: 'metaquery.jquery.min.js'
}
},
qunit: {
all: ['test/*.html']
},
lint: {
- files: ['metaquery.js']
+ files: ['metaquery.js, metaquery.jquery.js']
},
watch: {
files: '<config:lint.files>',
View
88 metaquery.jquery.js
@@ -0,0 +1,88 @@
+(function ( window, document ) {
+ var metaQuery = {
+ breakpoints: {},
+ _events: {},
+ _eventMatchCache: {},
+ bind: function ( name, fn ) {
+ ( metaQuery._events[name] = [] ).push( fn );
+
+ mqChange();
+ }
+ },
+
+ debounce = function( func, wait ) {
+ var args,
+ thisArg,
+ timeoutId;
+
+ function delayed() {
+ timeoutId = null;
+ func.apply( thisArg, args );
+ }
+
+ return function() {
+ window.clearTimeout( timeoutId );
+ timeoutId = window.setTimeout( delayed, wait );
+ };
+ },
+
+ updateClasses = function ( matches, name ) {
+ $( 'html' ).toggleClass( 'breakpoint-' + name, matches );
+ },
+
+ updateElements = function ( matches, name ) {
+ if( !matches ) { return; }
+
+ $( 'img[data-mq-src]' ).each(function () {
+ var $img = $( this ),
+ attr = $img.attr( 'data-mq-src');
+
+ $img.attr( 'src', attr.replace( '[breakpoint]', name ) );
+ });
+ },
+
+ // Called when a media query changes state
+ mqChange = function () {
+ for( var name in metaQuery.breakpoints ) {
+ var query = metaQuery.breakpoints[name],
+ matches = window.matchMedia( query ).matches;
+
+ // Call events bound to a given breakpoint
+ if( metaQuery._events[name] && metaQuery._eventMatchCache[name] !== matches ) {
+ for( var i = 0; i < metaQuery._events[name].length; i++ ) {
+ var fn = metaQuery._events[name][i];
+ metaQuery._eventMatchCache[name] = matches;
+
+ if( typeof fn === 'function' ) { fn( matches ); }
+ }
+ }
+
+ updateClasses( matches, name );
+ updateElements( matches, name );
+ }
+ },
+
+ collectMediaQueries = function () {
+ $('meta[name=breakpoint]').each( function () {
+ var $el = $( this );
+ metaQuery.breakpoints[$el.attr( 'data' )] = $el.attr( 'media' );
+ });
+ },
+
+ init = function () {
+ collectMediaQueries();
+
+ $( window ).on( 'resize', debounce ( function () {
+ mqChange();
+ }, 50));
+
+ mqChange();
+ };
+
+ window.metaQuery = metaQuery;
+
+ // DOM ready
+ $(function () {
+ init();
+ })
+}( this, this.document ));
View
1 metaquery.jquery.min.js
@@ -0,0 +1 @@
+(function(a,b){var c={breakpoints:{},_events:{},_eventMatchCache:{},bind:function(a,b){(c._events[a]=[]).push(b),g()}},d=function(b,c){function g(){f=null,b.apply(e,d)}var d,e,f;return function(){a.clearTimeout(f),f=a.setTimeout(g,c)}},e=function(a,b){$("html").toggleClass("breakpoint-"+b,a)},f=function(a,b){if(!a)return;$("img[data-mq-src]").each(function(){var a=$(this),c=a.attr("data-mq-src");a.attr("src",c.replace("[breakpoint]",b))})},g=function(){for(var b in c.breakpoints){var d=c.breakpoints[b],g=a.matchMedia(d).matches;if(c._events[b]&&c._eventMatchCache[b]!==g)for(var h=0;h<c._events[b].length;h++){var i=c._events[b][h];c._eventMatchCache[b]=g,typeof i=="function"&&i(g)}e(g,b),f(g,b)}},h=function(){$("meta[name=breakpoint]").each(function(){var a=$(this);c.breakpoints[a.attr("data")]=a.attr("media")})},i=function(){h(),$(a).on("resize",d(function(){g()},50)),g()};a.metaQuery=c,$(function(){i()})})(this,this.document);
View
9 metaquery.js
@@ -87,13 +87,10 @@
for( var i = 0; i < elements.length; i++ ) {
var el = elements[i],
- attributes = el.attributes;
+ template = el.getAttribute( 'data-mq-src' );
- for( var j = 0; j < attributes.length; j++ ) {
- var attribute = attributes[j],
- rattr = attribute.name.match( /^data\-mq\-(.*)/ );
-
- if( rattr ) { el.setAttribute( rattr[1], attribute.value.replace( '[breakpoint]', name ) ); }
+ if( template ) {
+ el.src = template.replace( '[breakpoint]', name )
}
}
},
View
2 metaquery.min.js
@@ -1 +1 @@
-(function(a,b){var c={breakpoints:{},_events:{},_eventMatchCache:{},bind:function(a,b){(c._events[a]=[]).push(b),n()}},d=function(c){/in/.test(b.readyState)?a.setTimeout(function(){d(c)},9):c()},e=function(a,c,d){b.addEventListener?a.addEventListener(c,d):a.attachEvent("on"+c,d)},f=function(b,c){function g(){f=null,b.apply(e,d)}var d,e,f;return function(){a.clearTimeout(f),f=a.setTimeout(g,c)}},g={},h=function(a){return g[a]||(g[a]=new RegExp("(?:^|\\s+)"+a+"(?:\\s+|$)","g")),g[a].lastIndex=0,g[a]},i=function(a,b){return h(b).test(a.className)},j=function(a,b){a.className=(a.className||"").replace(h(b),"")},k=function(a,b){i(a,b)||(a.className=(a.className?a.className+" ":"")+b)},l=function(a,c){var d="breakpoint-"+c,e=b.documentElement;a?k(e,d):j(e,d)},m=function(a,c){if(!a)return;var d=b.getElementsByTagName("img");for(var e=0;e<d.length;e++){var f=d[e],g=f.attributes;for(var h=0;h<g.length;h++){var i=g[h],j=i.name.match(/^data\-mq\-(.*)/);j&&f.setAttribute(j[1],i.value.replace("[breakpoint]",c))}}},n=function(){for(var b in c.breakpoints){var d=c.breakpoints[b],e=a.matchMedia(d).matches;if(c._events[b]&&c._eventMatchCache[b]!==e)for(var f=0;f<c._events[b].length;f++){var g=c._events[b][f];c._eventMatchCache[b]=e,typeof g=="function"&&g(e)}l(e,b),m(e,b)}},o=function(){var a=b.getElementsByTagName("meta");for(var d=0;d<a.length;d++)if(a[d].name==="breakpoint"){var e=a[d].getAttribute("data"),f=a[d].getAttribute("media");c.breakpoints[e]=f}},p=function(){o(),e(a,"resize",f(function(){n()},50)),n()};a.metaQuery=c,d(p)})(this,this.document);
+(function(a,b){var c={breakpoints:{},_events:{},_eventMatchCache:{},bind:function(a,b){(c._events[a]=[]).push(b),n()}},d=function(c){/in/.test(b.readyState)?a.setTimeout(function(){d(c)},9):c()},e=function(a,c,d){b.addEventListener?a.addEventListener(c,d):a.attachEvent("on"+c,d)},f=function(b,c){function g(){f=null,b.apply(e,d)}var d,e,f;return function(){a.clearTimeout(f),f=a.setTimeout(g,c)}},g={},h=function(a){return g[a]||(g[a]=new RegExp("(?:^|\\s+)"+a+"(?:\\s+|$)","g")),g[a].lastIndex=0,g[a]},i=function(a,b){return h(b).test(a.className)},j=function(a,b){a.className=(a.className||"").replace(h(b),"")},k=function(a,b){i(a,b)||(a.className=(a.className?a.className+" ":"")+b)},l=function(a,c){var d="breakpoint-"+c,e=b.documentElement;a?k(e,d):j(e,d)},m=function(a,c){if(!a)return;var d=b.getElementsByTagName("img");for(var e=0;e<d.length;e++){var f=d[e],g=f.getAttribute("data-mq-src");g&&(f.src=g.replace("[breakpoint]",c))}},n=function(){for(var b in c.breakpoints){var d=c.breakpoints[b],e=a.matchMedia(d).matches;if(c._events[b]&&c._eventMatchCache[b]!==e)for(var f=0;f<c._events[b].length;f++){var g=c._events[b][f];c._eventMatchCache[b]=e,typeof g=="function"&&g(e)}l(e,b),m(e,b)}},o=function(){var a=b.getElementsByTagName("meta");for(var d=0;d<a.length;d++)if(a[d].name==="breakpoint"){var e=a[d].getAttribute("data"),f=a[d].getAttribute("media");c.breakpoints[e]=f}},p=function(){o(),e(a,"resize",f(function(){n()},50)),n()};a.metaQuery=c,d(p)})(this,this.document);
View
20 test/index-jquery.html
@@ -0,0 +1,20 @@
+<!doctype html>
+<html>
+ <head>
+ <meta name="breakpoint" data="phone" media="(max-width: 480px)">
+ <meta name="breakpoint" data="small-tablet" media="(min-width: 480px) and (max-width: 600px)">
+ <meta name="breakpoint" data="tablet" media="(min-width: 600px) and (max-width: 1024px)">
+ <meta name="breakpoint" data="widescreen" media="(min-width: 1024px)">
+
+ <link rel="stylesheet" href="./qunit.css">
+ </head>
+ <body>
+ <img src="./images/noop.jpg" data-mq-src="./images/[breakpoint].jpg">
+
+ <div id="qunit"></div>
+ </body>
+ <script src="./jquery.min.js"></script>
+ <script src="./qunit.js"></script>
+ <script src="../metaquery.jquery.js"></script>
+ <script src="./unit.js"></script>
+</html>
View
2 test/index.html
@@ -11,8 +11,6 @@
<body>
<img src="./images/noop.jpg" data-mq-src="./images/[breakpoint].jpg">
- <img alt="Breakpoint name" data-mq-alt="[breakpoint]">
-
<div id="qunit"></div>
</body>
<script src="./jquery.min.js"></script>
View
4 test/unit.js
@@ -16,10 +16,6 @@ test( 'image source set', function () {
equal( $( 'img[src]' ).attr( 'src' ), './images/phone.jpg' );
});
-test( 'image alt set', function () {
- equal( $( 'img[alt]' ).attr( 'alt' ), 'phone' );
-});
-
/*test( 'media query active', function () {
$(window).resize(320, 320);
equal( window.metaQuery.mediaqueries[0].matches, true );

0 comments on commit d26958c

Please sign in to comment.