mirror of
https://github.com/Hopiu/jquery-mobile.git
synced 2026-04-05 07:01:00 +00:00
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
This commit is contained in:
scottjehl
parent
d7becdc728
commit
28a10ec74d
5 changed files with 104 additions and 72 deletions
1
Makefile
1
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 \
|
||||
|
|
|
|||
|
|
@ -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',
|
||||
|
|
|
|||
|
|
@ -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)
|
||||
|
|
|
|||
100
js/jquery.mobile.media.js
Normal file
100
js/jquery.mobile.media.js
Normal file
|
|
@ -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 = $( "<div id='jquery-mediatest'>" ),
|
||||
fakeBody = $( "<body>" ).append( testDiv );
|
||||
|
||||
return function( query ) {
|
||||
if ( !( query in cache ) ) {
|
||||
var styleBlock = $( "<style type='text/css'>" +
|
||||
"@media " + query + "{#jquery-mediatest{position:absolute;}}" +
|
||||
"</style>" );
|
||||
$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);
|
||||
|
|
@ -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 = $( "<div id='jquery-mediatest'>" ),
|
||||
fakeBody = $( "<body>" ).append( testDiv );
|
||||
|
||||
return function( query ) {
|
||||
if ( !( query in cache ) ) {
|
||||
var styleBlock = $( "<style type='text/css'>" +
|
||||
"@media " + query + "{#jquery-mediatest{position:absolute;}}" +
|
||||
"</style>" );
|
||||
$html.prepend( fakeBody ).prepend( styleBlock );
|
||||
cache[ query ] = testDiv.css( "position" ) === "absolute";
|
||||
fakeBody.add( styleBlock ).remove();
|
||||
}
|
||||
return cache[ query ];
|
||||
};
|
||||
})();
|
||||
|
||||
|
||||
var fakeBody = $( "<body>" ).prependTo( "html" ),
|
||||
fbCSS = fakeBody[0].style,
|
||||
|
|
|
|||
Loading…
Reference in a new issue