made default breakpoints non-overrideable and exposed function $.mobile.addResolutionBreakpoints (accepts number or array of numbers) which can be used to add widths to be used in min/max media classes on HTML element.

This commit is contained in:
scottjehl 2010-10-24 09:39:21 -04:00
parent 0dcb2f2971
commit d7d43db120

View file

@ -59,7 +59,8 @@
nextPageRole = null,
hashListener = true,
unHashedSelectors = '[data-rel=dialog]',
baseUrl = location.protocol + '//' + location.host + location.pathname;
baseUrl = location.protocol + '//' + location.host + location.pathname,
resolutionBreakpoints = [320,480,768,1024];
// TODO: don't expose (temporary during code reorg)
$.mobile.urlStack = urlStack;
@ -392,33 +393,43 @@
});
//add breakpoint classes for faux media-q support
function resolutionBreakpoints(){
function detectResolutionBreakpoints(){
var currWidth = $window.width(),
minPrefix = "min-width-",
maxPrefix = "max-width-",
minBreakpoints = [],
maxBreakpoints = [];
$html.removeClass( minPrefix + $.mobile.resolutionBreakpoints.join(" " + minPrefix) + maxPrefix +
" " + $.mobile.resolutionBreakpoints.join(" " + maxPrefix) );
$html.removeClass( minPrefix + resolutionBreakpoints.join(" " + minPrefix) + maxPrefix +
" " + resolutionBreakpoints.join(" " + maxPrefix) );
$.each($.mobile.resolutionBreakpoints,function( i ){
if( currWidth >= $.mobile.resolutionBreakpoints[ i ] ){
minBreakpoints.push( $.mobile.resolutionBreakpoints[ i ] );
$.each(resolutionBreakpoints,function( i ){
if( currWidth >= resolutionBreakpoints[ i ] ){
minBreakpoints.push( resolutionBreakpoints[ i ] );
}
if( currWidth <= $.mobile.resolutionBreakpoints[ i ] ){
maxBreakpoints.push( $.mobile.resolutionBreakpoints[ i ] );
if( currWidth <= resolutionBreakpoints[ i ] ){
maxBreakpoints.push( resolutionBreakpoints[ i ] );
}
});
$html.addClass( minPrefix + minBreakpoints.join(" " + minPrefix) + " " + maxPrefix + maxBreakpoints.join(" " + maxPrefix) );
};
//common breakpoints, overrideable, changeable
$.mobile.resolutionBreakpoints = [320,480,768,1024];
$window.bind( "orientationchange resize", resolutionBreakpoints);
resolutionBreakpoints();
//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();
}
//insert mobile meta - these will need to be configurable somehow.
var headPrepends =
$head.prepend(