Hopiu/jquery-mobile
1
0
Fork 0
mirror of https://github.com/Hopiu/jquery-mobile.git synced 2026-04-27 01:24:41 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

tests for default resolution break points, some missing semicolons, and element reference in each loop

Browse source
This commit is contained in:
John Bender 2010-11-19 01:20:46 -08:00
parent 19cf97465c
commit d0cca83be8
2 changed files with 46 additions and 35 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

52
js/jquery.mobile.media.js
View file

@ -2,14 +2,14 @@
* jQuery Mobile Framework : resolution and CSS media query related helpers and behavior
* Copyright (c) jQuery Project
* Dual licensed under the MIT (MIT-LICENSE.txt) and GPL (GPL-LICENSE.txt) licenses.
* Note: Code is in draft form and is subject to change
*/
* Note: Code is in draft form and is subject to change
*/
(function($, undefined ) {
var $window = $(window),
$html = $( "html" ),
//media-query-like width breakpoints, which are translated to classes on the html element
//media-query-like width breakpoints, which are translated to classes on the html element
resolutionBreakpoints = [320,480,768,1024];
@ -25,7 +25,7 @@ $.mobile.media = (function() {
var cache = {},
testDiv = $( "<div id='jquery-mediatest'>" ),
fakeBody = $( "<body>" ).append( testDiv );
return function( query ) {
if ( !( query in cache ) ) {
var styleBlock = $( "<style type='text/css'>" +
@ -43,7 +43,7 @@ $.mobile.media = (function() {
private function for adding/removing breakpoint classes to HTML element for faux media-query support
It does not require media query support, instead using JS to detect screen width > cross-browser support
This function is called on orientationchange, resize, and mobileinit, and is bound via the 'htmlclass' event namespace
*/
*/
function detectResolutionBreakpoints(){
var currWidth = $window.width(),
minPrefix = "min-width-",
@ -52,31 +52,31 @@ function detectResolutionBreakpoints(){
maxBreakpoints = [],
unit = "px",
breakpointClasses;
$html.removeClass( minPrefix + resolutionBreakpoints.join(unit + " " + minPrefix) + unit + " " +
$html.removeClass( minPrefix + resolutionBreakpoints.join(unit + " " + minPrefix) + unit + " " +
maxPrefix + resolutionBreakpoints.join( unit + " " + maxPrefix) + unit );
$.each(resolutionBreakpoints,function( i ){
if( currWidth >= resolutionBreakpoints[ i ] ){
minBreakpoints.push( minPrefix + resolutionBreakpoints[ i ] + unit );
$.each(resolutionBreakpoints,function( i, breakPoint ){
if( currWidth >= breakPoint ){
minBreakpoints.push( minPrefix + breakPoint + unit );
}
if( currWidth <= resolutionBreakpoints[ i ] ){
maxBreakpoints.push( maxPrefix + resolutionBreakpoints[ i ] + unit );
if( currWidth <= breakPoint ){
maxBreakpoints.push( maxPrefix + breakPoint + unit );
}
});
if( minBreakpoints.length ){ breakpointClasses = minBreakpoints.join(" "); }
if( maxBreakpoints.length ){ breakpointClasses += " " + maxBreakpoints.join(" "); }
$html.addClass( breakpointClasses );
$html.addClass( breakpointClasses );
};
/* $.mobile.addResolutionBreakpoints method:
/* $.mobile.addResolutionBreakpoints method:
pass either a number or an array of numbers and they'll be added to the min/max breakpoint classes
Examples:
Examples:
$.mobile.addResolutionBreakpoints( 500 );
$.mobile.addResolutionBreakpoints( [500, 1200] );
*/
*/
$.mobile.addResolutionBreakpoints = function( newbps ){
if( $.type( newbps ) === "array" ){
resolutionBreakpoints = resolutionBreakpoints.concat( newbps );
@ -84,24 +84,24 @@ $.mobile.addResolutionBreakpoints = function( newbps ){
else {
resolutionBreakpoints.push( newbps );
}
resolutionBreakpoints.sort(function(a,b){ return a-b; })
resolutionBreakpoints.sort(function(a,b){ return a-b; });
detectResolutionBreakpoints();
}
};
/* on mobileinit, add classes to HTML element
/* on mobileinit, add classes to HTML element
and set handlers to update those on orientationchange and resize*/
$(document).bind("mobileinit.htmlclass", function(){
/* bind to orientationchange and resize
/* bind to orientationchange and resize
to add classes to HTML element for min/max breakpoints and orientation */
$window.bind("orientationchange.htmlclass resize.htmlclass", function(event){
//add orientation class to HTML element on flip/resize.
if(event.orientation){
$html.removeClass( "portrait landscape" ).addClass( event.orientation );
}
//add classes to HTML element for min/max breakpoints
//add classes to HTML element for min/max breakpoints
detectResolutionBreakpoints();
});
//trigger event manually
$window.trigger( "orientationchange.htmlclass" );
});

29
tests/unit/media/media_core.js
View file

@ -16,42 +16,53 @@
test( "media query check returns true when the position is absolute", function(){
$.fn.css = function(){ return "absolute"; };
same($.mobile.media('screen 1'), true);
same($.mobile.media("screen 1"), true);
});
test( "media query check returns false when the position is not absolute", function(){
$.fn.css = function(){ return "not absolute"; };
same($.mobile.media('screen 2'), false);
same($.mobile.media("screen 2"), false);
});
test( "media query check is cached", function(){
$.fn.css = function(){ return "absolute"; };
same($.mobile.media('screen 3'), true);
same($.mobile.media("screen 3"), true);
$.fn.css = function(){ return "not absolute"; };
same($.mobile.media('screen 3'), true);
same($.mobile.media("screen 3"), true);
});
test( "window widths smaller than the break points set max-width classes", function(){
$.fn.width = function(){ return 120; };
$.mobile.addResolutionBreakpoints([125]);
ok($('html').hasClass('max-width-125px'));
ok($("html").hasClass("max-width-125px"));
});
test( "window widths larger than the break points set min-width classes", function(){
$.fn.width = function(){ return 1900; };
$.mobile.addResolutionBreakpoints([125]);
ok($('html').hasClass('min-width-125px'));
ok($("html").hasClass("min-width-125px"));
});
test( "many break points result in many class additions", function(){
$.fn.width = function(){ return 1900; };
$.mobile.addResolutionBreakpoints([1, 2]);
ok($('html').hasClass('min-width-1px'));
ok($('html').hasClass('min-width-2px'));
ok($("html").hasClass("min-width-1px"));
ok($("html").hasClass("min-width-2px"));
});
test( "adds all classes for default res breakpoints", function(){
expect( 4 );
$.fn.width = function(){ return 1900; };
$.mobile.addResolutionBreakpoints([]);
// TODO should expose the defaults to prevent brittle tests
$.each([320, 480, 768, 1024], function(i, element){
ok($("html").hasClass("min-width-" + element + "px"));
});
});
test( "triggering mobile init triggers orientationchange.htmlclass", function(){
@ -81,6 +92,6 @@
$("html").removeClass("min-width-320px");
$(window).trigger("resize.htmlclass");
ok($('html').hasClass('min-width-320px'));
ok($("html").hasClass("min-width-320px"));
});
})(jQuery);