diff --git a/js/jQuery.mobile.event.js b/js/jQuery.mobile.event.js index 8ba2a547..723c47e6 100644 --- a/js/jQuery.mobile.event.js +++ b/js/jQuery.mobile.event.js @@ -145,6 +145,35 @@ $.event.special.swipe = { } }; +$.event.special.orientationchange = { + orientation: function( elem ) { + return elem.width() / elem.height() < 1.1 ? "portrait" : "landscape"; + }, + + setup: function() { + var thisObject = this, + $this = $( thisObject ), + orientation = $.event.special.orientationchange.orientation( $this ); + + function handler() { + var newOrientation = $.event.special.orientationchange.orientation( $this ); + + if ( orientation !== newOrientation ) { + $.event.handle.call( thisObject, "orientationchange", { + orientation: newOrientation + } ); + orientation = newOrientation; + } + } + + if ( $.support.orientation ) { + thisObject.addEventListener( "orientationchange", handler, false ); + } else { + $this.bind( "resize", handler ); + } + } +}; + $.each({ scrollstop: "scrollstart", taphold: "tap", diff --git a/js/jQuery.mobile.js b/js/jQuery.mobile.js index 4f1441a1..3820b556 100644 --- a/js/jQuery.mobile.js +++ b/js/jQuery.mobile.js @@ -24,7 +24,6 @@ transitionSpecified = false, currentTransition = 'slide', transitionDuration = 350, - orientation, backBtnText = "Back", prevUrl = location.hash; @@ -73,18 +72,10 @@ - //add orientation class on flip/resize. This should probably use special events. Also, any drawbacks to just using resize? - $window.bind( ($.support.orientation ? 'orientationchange' : 'resize'), updateOrientation); - - //orientation change classname logic - logic borrowed/modified from jQtouch - function updateOrientation() { - var neworientation = window.innerWidth < window.innerHeight ? 'portrait' : 'landscape'; - if(orientation !== neworientation){ - $body.trigger('turn', {orientation: orientation}); //temp event name - } - orientation = neworientation; - $html.removeClass('portrait landscape').addClass(orientation); - } + //add orientation class on flip/resize. + $window.bind( "orientationchange", function( event, data ) { + $html.removeClass( "portrait landscape" ).addClass( data.orientation ); + }); //add mobile, loading classes to doc $html.addClass('ui-mobile'); @@ -285,7 +276,7 @@ $window.trigger( "hashchange" ); //update orientation - updateOrientation(); + $html.addClass( $.event.special.orientationchange.orientation( $window ) ); //swipe right always triggers a back $body.bind('swiperight.jqm',function(){ diff --git a/js/jQuery.mobile.support.js b/js/jQuery.mobile.support.js index 56c38af1..8951d357 100644 --- a/js/jQuery.mobile.support.js +++ b/js/jQuery.mobile.support.js @@ -5,7 +5,7 @@ Possible additions: */ $.extend( $.support, { - orientation: !!window.orientation, + orientation: "orientation" in window, touch: typeof Touch === "object", WebKitAnimationEvent: typeof WebKitTransitionEvent === "object", pushState: !!history.pushState