Permalink
Browse files

Updated Regex to support decimals, changed calculation for eminpix, c…

…leaned up the math for min/max calculations, update paragraph tags to use EM based widths as opposed to pixels for more accurate testing
  • Loading branch information...
1 parent 9a93ca1 commit f56d351988ee7a8f007b505c5a4cf74f42f91a0b Ryan Wheale committed Oct 27, 2011
Showing with 12 additions and 31 deletions.
  1. +10 −29 respond.src.js
  2. +1 −1 test/test.css
  3. +1 −1 test/test.html
View
@@ -10,7 +10,7 @@
respond.mediaQueriesSupported = mqSupported;
//if media queries are supported, exit here
- //if( mqSupported ){ return; }
+ if( mqSupported ){ return; }
//define vars
var doc = win.document,
@@ -60,7 +60,6 @@
}
}
makeRequests();
-
},
//recurse through request queue, get css text
@@ -124,8 +123,8 @@
mediastyles.push( {
media : thisq.match( /(only\s+)?([a-zA-Z]+)(\sand)?/ ) && RegExp.$2,
rules : rules.length - 1,
- minw : thisq.match( /\(min\-width:[\s]*([\s]*[0-9]+)(px|em)[\s]*\)/ ) && parseFloat( RegExp.$1 ) + ( RegExp.$2 || "" ),
- maxw : thisq.match( /\(max\-width:[\s]*([\s]*[0-9]+)(px|em)[\s]*\)/ ) && parseFloat( RegExp.$1 ) + ( RegExp.$2 || "" )
+ minw : thisq.match( /\(min\-width:[\s]*([\s]*[0-9\.]+)(px|em)[\s]*\)/ ) && parseFloat( RegExp.$1 ) + ( RegExp.$2 || "" ),
+ maxw : thisq.match( /\(max\-width:[\s]*([\s]*[0-9\.]+)(px|em)[\s]*\)/ ) && parseFloat( RegExp.$1 ) + ( RegExp.$2 || "" )
} );
}
}
@@ -165,7 +164,6 @@
}
ret = div.offsetWidth;
- console.log('w: ' + ret);
if( fakeUsed ){
docElem.removeChild( fakeBody );
@@ -190,41 +188,24 @@
var thisstyle = mediastyles[ i ],
min = thisstyle.minw,
max = thisstyle.maxw;
- console.log('BEFORE: min: ' + min +', max: ' + max);
+
if( !!min ){
- min = parseFloat( min )
- if() {
- min *= eminpx;
- }
-
- min = /em/i.test( min ) ?
+ min = parseFloat( min ) * ( /em/i.test( min ) ? eminpx : 1 );
}
- if( max && /em/i.test( max ) ){
- max = parseFloat( max ) * eminpx;
+ if( !!max ){
+ max = parseFloat( max ) * ( /em/i.test( max ) ? eminpx : 1 );
}
- min = parseFloat(min);
- max = parseFloat(max);
-
- console.log('AFTER: min: ' + min +', max: ' + max);
- console.log(' min || max: ' + (!!min || !!max));
- console.log(' ( !!min && currWidth >= min ) : ' + ( !!min && currWidth >= min ) );
- console.log(' ( !!max && currWidth <= max ) : ' + ( !!max && currWidth <= max ) );
- if( (!!min || !!max) &&
- (
- ( !!min && currWidth >= min ) ||
- ( !!max && currWidth <= max )
- ) ){
+ if(!min && !max ||
+ ( !min || min && currWidth >= min ) &&
+ ( !max || max && currWidth <= max )){
if( !styleBlocks[ thisstyle.media ] ){
styleBlocks[ thisstyle.media ] = [];
}
- console.log('INSIDE');
styleBlocks[ thisstyle.media ].push( rules[ thisstyle.rules ] );
}
}
- console.log('---- styleblocks:');
- console.log(styleBlocks);
//remove any existing respond style element(s)
for( var i in appendedEls ){
if( appendedEls[ i ] && appendedEls[ i ].parentNode === head ){
View
@@ -13,7 +13,7 @@ body {
p {
width: 60%;
min-width: 18.75em; /* 300px @ 16px */
- max-width: 43.75; /* 700px @ 16px */
+ max-width: 43.75em; /* 700px @ 16px */
margin: 2em auto;
background: #fff;
padding: 20px;
View
@@ -14,7 +14,7 @@
<p>For a realistic use case for media queries: read up on <a href="http://www.alistapart.com/articles/responsive-web-design/">Responsive Web Design</a></p>
- <p id="attribute-test">Media-attributes are working too! This should be visible above 600px.</p>
+ <p id="attribute-test">Media-attributes are working too! This should be visible above 37.5em.</p>
</body>
</html>

0 comments on commit f56d351

Please sign in to comment.