From 28a10ec74d76efa97df939db2dfa9d1abd437fe9 Mon Sep 17 00:00:00 2001 From: scottjehl Date: Wed, 17 Nov 2010 11:14:07 -0500 Subject: [PATCH] Moved all of the media query and responsive design related scripting to jquery.mobile.media.js. This plugin can run independent of mobile core, with the exception that it does bind to orientationchange, which is defined in the events js. Fixes #388 --- Makefile | 1 + js/index.php | 1 + js/jquery.mobile.js | 53 +------------------ js/jquery.mobile.media.js | 100 ++++++++++++++++++++++++++++++++++++ js/jquery.mobile.support.js | 21 +------- 5 files changed, 104 insertions(+), 72 deletions(-) create mode 100644 js/jquery.mobile.media.js 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,