From 497b82a352c019b6461d24db2dc9b17bc4c514ed Mon Sep 17 00:00:00 2001 From: Scott Jehl Date: Thu, 13 Sep 2012 11:55:06 -0500 Subject: [PATCH] updated our $.mobile.media function to use the matchMedia polyfill, which defers to the native function where possible. $.mobile.media still returns a boolean as it always has, but now, window.matchMedia is exposed in unsupporting environments too, which gives developers access to its standard API that returns an object, and in native implementations, supports listeners as well (a polyfill is available for that part too). This addresses issue #4979 --- js/jquery.mobile.media.js | 73 ++++++++++++++++++++------------------- 1 file changed, 37 insertions(+), 36 deletions(-) diff --git a/js/jquery.mobile.media.js b/js/jquery.mobile.media.js index 73b680290cb..b21de247deb 100644 --- a/js/jquery.mobile.media.js +++ b/js/jquery.mobile.media.js @@ -8,43 +8,44 @@ define( [ "jquery", "./jquery.mobile.core" ], function( $ ) { //>>excludeEnd("jqmBuildExclude"); (function( $, undefined ) { -var $window = $( window ), - $html = $( "html" ); - -/* $.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 = document.createElement( "style" ), - cssrule = "@media " + query + " { #jquery-mediatest { position:absolute; } }"; - - //must set type for IE! - styleBlock.type = "text/css"; - - if ( styleBlock.styleSheet ) { - styleBlock.styleSheet.cssText = cssrule; - } else { - styleBlock.appendChild( document.createTextNode(cssrule) ); - } - - $html.prepend( fakeBody ).prepend( styleBlock ); - cache[ query ] = testDiv.css( "position" ) === "absolute"; - fakeBody.add( styleBlock ).remove(); - } - return cache[ query ]; + /*! matchMedia() polyfill - Test a CSS media type/query in JS. Authors & copyright (c) 2012: Scott Jehl, Paul Irish, Nicholas Zakas. Dual MIT/BSD license */ + window.matchMedia = window.matchMedia || (function( doc, undefined ) { + + "use strict"; + + var bool, + docElem = doc.documentElement, + refNode = docElem.firstElementChild || docElem.firstChild, + // fakeBody required for + fakeBody = doc.createElement( "body" ), + div = doc.createElement( "div" ); + + div.id = "mq-test-1"; + div.style.cssText = "position:absolute;top:-100em"; + fakeBody.style.background = "none"; + fakeBody.appendChild(div); + + return function(q){ + + div.innerHTML = "­"; + + docElem.insertBefore( fakeBody, refNode ); + bool = div.offsetWidth === 42; + docElem.removeChild( fakeBody ); + + return { + matches: bool, + media: q + }; + + }; + + }( document )); + + // $.mobile.media uses matchMedia to return a boolean. + $.mobile.media = function( q ) { + return window.matchMedia( q ).matches; }; -})(); })(jQuery); //>>excludeStart("jqmBuildExclude", pragmas.jqmBuildExclude);