richtr/orientationChange.js

## orientationChange.js
/*
 * 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 == 'function' );

    // 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 == 'function' ) {
                    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 );
	/*
	* 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 == 'function' );

	// 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 == 'function' ) {
	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 );