public
Last active

JavaScript shim of iOS's window.orientation + orientationchange events for other (typically mobile) browsers

  • Download Gist
orientationChange.js
JavaScript
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188 189 190 191 192 193 194 195 196 197 198
/*
* OrientationChange Event Shim
* http://github.com/richtr
*
* Copyright (c) 2012, Rich Tibbett
*
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*/
 
/*
* DESCRIPTION:
* ------------
*
* JavaScript shim of iOS's window.orientation + orientationchange events
* for other (typically mobile) browsers.
*
* Documentation URL @
* http://developer.apple.com/library/IOS/#documentation/AppleApplications/Reference/SafariWebContent/HandlingEvents/HandlingEvents.html
*
* Demo page @
* http://people.opera.com/richt/release/demos/orientation/orientationchange_shim/test.html
*
* USAGE:
* ------
*
* 1. Add this file to the <head> of your web page:
*
* <script type="text/javascript" src="orientationChange.js"></script>
*
* 2. Register for 'orientationchange' events in the usual way:
*
* window.addEventListener('orientationchange', function(e) {
* console.log( window.orientation );
* }, true);
*
* or:
*
* window.onorientationchange = function(e) {
* console.log( window.orientation );
* }
*
* or:
*
* <body onorientationchange="checkOrientation()">
*
* *********************************************************************
* NOTE: Adding e.g. <body onorientationchange="checkOrientation()"> is
* partially supported but is not recommended. Please consider using one
* of the scripting approaches shown above instead.
* *********************************************************************
*
* KNOWN ISSUES:
* --------------
*
* 21-06-2012:
* The native orientationchange implementation in Android's Native Browser
* and Chrome Beta for Android is borked. Note that this shim is not loaded
* in these browsers. This shims does not replace these broken native
* implementations.
*
*/
 
!(function( window, undefined ) {
 
var supportsOrientation = ( typeof window.orientation == 'number' && typeof window.onorientationchange == 'object' );
 
// Do nothing if we don't need to shim
if ( supportsOrientation ) return;
 
/* START: requestAnimationFrame shim
*
* By: Eric Möller
* URL: http://my.opera.com/emoller/blog/2011/12/20/requestanimationframe-for-smart-er-animating
*/
(function() {
var lastTime = 0;
var vendors = ['ms', 'moz', 'webkit', 'o'];
for (var x = 0; x < vendors.length && !window.requestAnimationFrame; ++x) {
window.requestAnimationFrame = window[vendors[x] + 'RequestAnimationFrame'];
window.cancelRequestAnimationFrame = window[vendors[x] +
'CancelRequestAnimationFrame'];
}
 
if (!window.requestAnimationFrame)
window.requestAnimationFrame = function(callback, element) {
var currTime = new Date().getTime();
var timeToCall = Math.max(0, 16 - (currTime - lastTime));
var id = window.setTimeout(function() {
callback(currTime + timeToCall);
},
timeToCall);
lastTime = currTime + timeToCall;
return id;
};
 
if (!window.cancelAnimationFrame)
window.cancelAnimationFrame = function(id) {
clearTimeout(id);
};
} ());
 
/* END: requestAnimationFrame shim */
 
var cOrientationChange = function() {
 
this.currentOrientationAngle = -1;
this.lastOrientationAngle = -2;
 
this.currentOrientationState = this.lastOrientationState = ( window.innerWidth > window.innerHeight ) ? 'landscape': 'portrait';
 
var self = this;
 
// Setup deviceorientation listener (if it is available)
window.addEventListener( 'deviceorientation', function( e ) {
// Don't use unless we have a 3-axis implementation of device orientation
if ( e.alpha === null || e.alpha === undefined ) {
self.currentOrientationAngle = 0;
return;
}
 
// set orientation angle to nearest 90 degrees
self.currentOrientationAngle = Math.round( -e.gamma / 90) * 90;
 
// correction for holding the device upside down
if ( self.currentOrientationAngle == 0 && e.beta < 0 ) {
self.currentOrientationAngle = 180;
}
 
}, true );
 
this.manualOrientationChange = function() {
 
// landscape when width is biggest, otherwise portrait
self.currentOrientationState = ( window.innerWidth > window.innerHeight ) ? 'landscape': 'portrait';
 
if ( ( self.currentOrientationState !== self.lastOrientationState ) ||
( self.lastOrientationAngle === -2 && self.currentOrientationAngle !== -1 ) ||
( self.currentOrientationAngle !== 0 && self.currentOrientationAngle === -self.lastOrientationAngle ) ) {
 
if ( self.currentOrientationAngle === -1 ) self.currentOrientationAngle = 0;
 
// Update static window.orientation value
window.orientation = self.currentOrientationAngle;
 
// Create and dispatch pseudo-orientationchange event
var orientationEvent = window.document.createEvent( 'Event' );
orientationEvent.initEvent( 'orientationchange', true, true );
orientationEvent.orientation = this.currentOrientationAngle;
orientationEvent.mode = this.currentOrientationState;
window.dispatchEvent( orientationEvent );
 
// Fire event to window.onorientationchange assigned handler (if any)
if ( typeof window.onorientationchange == 'object' ) {
window.onorientationchange.call( this, orientationEvent );
}
 
// Check for onorientationevent handler on body element and execute
var body = document.body;
if( body && body.getAttribute('onorientationchange')) {
// Create new script and run function
var onorientationchange_script = document.createElement('script');
onorientationchange_script.type = "text/javascript";
onorientationchange_script.textContent = "//<![CDATA[\n" + body.getAttribute('onorientationchange') + "\n//]]>";
body.appendChild(onorientationchange_script);
onorientationchange_script.parentNode.removeChild( onorientationchange_script );
}
 
self.lastOrientationAngle = self.currentOrientationAngle;
self.lastOrientationState = self.currentOrientationState;
 
}
 
window.requestAnimationFrame( self.manualOrientationChange.bind( self ) );
 
};
 
this.manualOrientationChange();
 
};
 
//*** WINDOW EVENTLISTENER SHIM
var orientationHandler = new cOrientationChange();
 
window.orientation = orientationHandler.currentOrientationAngle === -1 ? 0: orientationHandler.currentOrientationAngle;
 
window.onorientationchange = function( e ) {};
 
})( window );

Please sign in to comment on this gist.

Something went wrong with that request. Please try again.