JSFiddle - React, Tailwind, and code Playground
by darcyclarke
JavaScript
!(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...