diff --git a/Makefile b/Makefile index 57892cb0..42729b51 100755 --- a/Makefile +++ b/Makefile @@ -10,6 +10,7 @@ CSSMIN = ${DIR}.min.css FILES = js/jquery.ui.widget.js \ js/jquery.mobile.widget.js \ + js/jquery.mobile.media.js \ js/jquery.mobile.support.js \ js/jquery.mobile.event.js \ js/jquery.mobile.hashchange.js \ diff --git a/js/index.php b/js/index.php index b928bddb..6e0d0923 100644 --- a/js/index.php +++ b/js/index.php @@ -4,6 +4,7 @@ $elements = array( 'jquery.js', 'jquery.ui.widget.js', 'jquery.mobile.widget.js', + 'jquery.mobile.media.js', 'jquery.mobile.support.js', 'jquery.mobile.event.js', 'jquery.mobile.hashchange.js', diff --git a/js/jquery.mobile.js b/js/jquery.mobile.js index 00bfc728..9284a922 100644 --- a/js/jquery.mobile.js +++ b/js/jquery.mobile.js @@ -113,10 +113,7 @@ //enable/disable hashchange event listener //toggled internally when location.hash is updated to match the url of a successful page load - hashListener = true, - - //media-query-like width breakpoints, which are translated to classes on the html element - resolutionBreakpoints = [320,480,768,1024]; + hashListener = true; //add mobile, initial load "rendering" classes to docEl $html.addClass('ui-mobile ui-mobile-rendering'); @@ -546,54 +543,6 @@ }); }); - //add orientation class on flip/resize. - $window.bind( "orientationchange.htmlclass", function( event ) { - $html.removeClass( "portrait landscape" ).addClass( event.orientation ); - }); - - //add breakpoint classes for faux media-q support - function detectResolutionBreakpoints(){ - var currWidth = $window.width(), - minPrefix = "min-width-", - maxPrefix = "max-width-", - minBreakpoints = [], - maxBreakpoints = [], - unit = "px", - breakpointClasses; - - $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 ); - } - if( currWidth <= resolutionBreakpoints[ i ] ){ - maxBreakpoints.push( maxPrefix + resolutionBreakpoints[ i ] + unit ); - } - }); - - if( minBreakpoints.length ){ breakpointClasses = minBreakpoints.join(" "); } - if( maxBreakpoints.length ){ breakpointClasses += " " + maxBreakpoints.join(" "); } - - $html.addClass( breakpointClasses ); - }; - - //add breakpoints now and on oc/resize events - $window.bind( "orientationchange resize", detectResolutionBreakpoints); - detectResolutionBreakpoints(); - - //common breakpoints, overrideable, changeable - $.mobile.addResolutionBreakpoints = function( newbps ){ - if( $.type( newbps ) === "array" ){ - resolutionBreakpoints = resolutionBreakpoints.concat( newbps ); - } - else { - resolutionBreakpoints.push( newbps ); - } - detectResolutionBreakpoints(); - } - //animation complete callback //TODO - update support test and create special event for transitions //check out transitionEnd (opera per Paul's request) diff --git a/js/jquery.mobile.media.js b/js/jquery.mobile.media.js new file mode 100644 index 00000000..05899872 --- /dev/null +++ b/js/jquery.mobile.media.js @@ -0,0 +1,100 @@ +/* +* 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 +*/ +(function($, undefined ) { + +var $window = $(window), + $html = $( "html" ), + + //media-query-like width breakpoints, which are translated to classes on the html element + resolutionBreakpoints = [320,480,768,1024]; + + +/* $.mobile.media method: pass a CSS media type or query and get a bool return + note: this feature relies on actual media query support for media queries, though types will work most anywhere + examples: + $.mobile.media('screen') //>> tests for screen media type + $.mobile.media('screen and (min-width: 480px)') //>> tests for screen media type with window width > 480px + $.mobile.media('@media screen and (-webkit-min-device-pixel-ratio: 2)') //>> tests for webkit 2x pixel ratio (iPhone 4) +*/ +$.mobile.media = (function() { + // TODO: use window.matchMedia once at least one UA implements it + var cache = {}, + testDiv = $( "
" ), + fakeBody = $( "" ).append( testDiv ); + + return function( query ) { + if ( !( query in cache ) ) { + var styleBlock = $( "" ); + $html.prepend( fakeBody ).prepend( styleBlock ); + cache[ query ] = testDiv.css( "position" ) === "absolute"; + fakeBody.add( styleBlock ).remove(); + } + return cache[ query ]; + }; +})(); + +/* + 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-", + maxPrefix = "max-width-", + minBreakpoints = [], + maxBreakpoints = [], + unit = "px", + breakpointClasses; + + $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 ); + } + if( currWidth <= resolutionBreakpoints[ i ] ){ + maxBreakpoints.push( maxPrefix + resolutionBreakpoints[ i ] + unit ); + } + }); + + if( minBreakpoints.length ){ breakpointClasses = minBreakpoints.join(" "); } + if( maxBreakpoints.length ){ breakpointClasses += " " + maxBreakpoints.join(" "); } + + $html.addClass( breakpointClasses ); +}; + +/* $.mobile.addResolutionBreakpoints method: + pass either a number or an array of numbers and they'll be added to the min/max breakpoint classes + Examples: + $.mobile.addResolutionBreakpoints( 500 ); + $.mobile.addResolutionBreakpoints( [500, 1200] ); +*/ +$.mobile.addResolutionBreakpoints = function( newbps ){ + if( $.type( newbps ) === "array" ){ + resolutionBreakpoints = resolutionBreakpoints.concat( newbps ); + } + else { + resolutionBreakpoints.push( newbps ); + } + detectResolutionBreakpoints(); +} + + +/* bind to orientationchange, resize, and mobileinit +to add classes to HTML element for min/max breakpoints and orientation */ +$window.bind( "orientationchange.htmlclass resize.htmlclass mobileinit.htmlclass", function( event ) { + //add orientation class to HTML element on flip/resize. + $html.removeClass( "portrait landscape" ).addClass( event.orientation ); + //add breakpoint classes for min/max widths + detectResolutionBreakpoints(); +}); + +})(jQuery); \ No newline at end of file diff --git a/js/jquery.mobile.support.js b/js/jquery.mobile.support.js index ca86d284..7cc288ac 100644 --- a/js/jquery.mobile.support.js +++ b/js/jquery.mobile.support.js @@ -6,26 +6,7 @@ */ (function($, undefined ) { -// test whether a CSS media type or query applies -$.mobile.media = (function() { - // TODO: use window.matchMedia once at least one UA implements it - var cache = {}, - $html = $( "html" ), - testDiv = $( "
" ), - fakeBody = $( "" ).append( testDiv ); - - return function( query ) { - if ( !( query in cache ) ) { - var styleBlock = $( "" ); - $html.prepend( fakeBody ).prepend( styleBlock ); - cache[ query ] = testDiv.css( "position" ) === "absolute"; - fakeBody.add( styleBlock ).remove(); - } - return cache[ query ]; - }; -})(); + var fakeBody = $( "" ).prependTo( "html" ), fbCSS = fakeBody[0].style,