Hopiu/jquery-mobile
1
0
Fork 0
mirror of https://github.com/Hopiu/jquery-mobile.git synced 2026-03-16 22:10:25 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

jQuery core style guide conformance: jquery.mobile.media.js

Browse source
This commit is contained in:
Rick Waldron 2011-06-28 18:19:05 -04:00
parent a9020282b5
commit eaa91317d1
1 changed files with 50 additions and 37 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

87
js/jquery.mobile.media.js
View file

@ -4,13 +4,13 @@
* Dual licensed under the MIT or GPL Version 2 licenses.
* http://jquery.org/license
*/
(function($, undefined ) {
(function( $, undefined ) {
var $window = $(window),
var $window = $( window ),
$html = $( "html" ),
//media-query-like width breakpoints, which are translated to classes on the html element
resolutionBreakpoints = [320,480,768,1024];
resolutionBreakpoints = [ 320, 480, 768, 1024 ];
/* $.mobile.media method: pass a CSS media type or query and get a bool return
@ -28,17 +28,18 @@ $.mobile.media = (function() {
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));
}
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();
@ -52,7 +53,7 @@ $.mobile.media = (function() {
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(){
function detectResolutionBreakpoints() {
var currWidth = $window.width(),
minPrefix = "min-width-",
maxPrefix = "max-width-",
@ -64,17 +65,21 @@ function detectResolutionBreakpoints(){
$html.removeClass( minPrefix + resolutionBreakpoints.join(unit + " " + minPrefix) + unit + " " +
maxPrefix + resolutionBreakpoints.join( unit + " " + maxPrefix) + unit );
$.each(resolutionBreakpoints,function( i, breakPoint ){
if( currWidth >= breakPoint ){
$.each( resolutionBreakpoints, function( i, breakPoint ) {
if( currWidth >= breakPoint ) {
minBreakpoints.push( minPrefix + breakPoint + unit );
}
if( currWidth <= breakPoint ){
if( currWidth <= breakPoint ) {
maxBreakpoints.push( maxPrefix + breakPoint + unit );
}
});
if( minBreakpoints.length ){ breakpointClasses = minBreakpoints.join(" "); }
if( maxBreakpoints.length ){ breakpointClasses += " " + maxBreakpoints.join(" "); }
if ( minBreakpoints.length ) {
breakpointClasses = minBreakpoints.join(" ");
}
if ( maxBreakpoints.length ) {
breakpointClasses += " " + maxBreakpoints.join(" ");
}
$html.addClass( breakpointClasses );
};
@ -85,39 +90,47 @@ function detectResolutionBreakpoints(){
$.mobile.addResolutionBreakpoints( 500 );
$.mobile.addResolutionBreakpoints( [500, 1200] );
*/
$.mobile.addResolutionBreakpoints = function( newbps ){
$.mobile.addResolutionBreakpoints = function( newbps ) {
if( $.type( newbps ) === "array" ){
resolutionBreakpoints = resolutionBreakpoints.concat( newbps );
}
else {
} else {
resolutionBreakpoints.push( newbps );
}
resolutionBreakpoints.sort(function(a,b){ return a-b; });
resolutionBreakpoints.sort(function( a, b ) {
return a - b;
});
detectResolutionBreakpoints();
};
/* on mobileinit, add classes to HTML element
and set handlers to update those on orientationchange and resize*/
$(document).bind("mobileinit.htmlclass", function(){
/* bind to orientationchange and resize
to add classes to HTML element for min/max breakpoints and orientation */
/* on mobileinit, add classes to HTML element
and set handlers to update those on orientationchange and resize
*/
$( document ).bind( "mobileinit.htmlclass", function() {
// bind to orientationchange and resize
// to add classes to HTML element for min/max breakpoints and orientation
var ev = $.support.orientation;
$window.bind("orientationchange.htmlclass throttledResize.htmlclass", function(event){
//add orientation class to HTML element on flip/resize.
if(event.orientation){
$window.bind( "orientationchange.htmlclass throttledResize.htmlclass", function( event ) {
// add orientation class to HTML element on flip/resize.
if ( event.orientation ) {
$html.removeClass( "portrait landscape" ).addClass( event.orientation );
}
//add classes to HTML element for min/max breakpoints
// add classes to HTML element for min/max breakpoints
detectResolutionBreakpoints();
});
});
/* Manually trigger an orientationchange event when the dom ready event fires.
This will ensure that any viewport meta tag that may have been injected
has taken effect already, allowing us to properly calculate the width of the
document.
This will ensure that any viewport meta tag that may have been injected
has taken effect already, allowing us to properly calculate the width of the
document.
*/
$(function(){
$(function() {
//trigger event manually
$window.trigger( "orientationchange.htmlclass" );
});