'use strict'; var gebi = document.getElementById.bind(document); var elNotice, elEvents, elLockInfo, elFirstSize, mediaQuery; var orientationFired=false; // bad size detection var cueInterval, cueDelay = 3500; function updateViaMediaQuery(source) { var txt = "MediaQuery listener: "; if(mediaQuery.matches) txt += "portrait"; else txt += "landscape"; txt += " " + source + ""; addDiv(txt); } function addLockDiv(text) { var el = document.createElement("div"); el.opacity = 0; el.innerHTML = " " + text; el.className = 'newevent'; elLockInfo.appendChild(el); } function addDiv(text) { var el = document.createElement("div"); el.opacity = 0; el.innerHTML = " " + Date.now() + " " + text; setTimeout(function(){ elEvents.appendChild(el); setTimeout(function(){el.className = 'newevent'}, 5); }, 5); } function screenListener() { addDiv("Screen " + screen.orientation.type + ""); } function orientationListener() { //addDiv(""); // for appending elEvents.innerHTML = ""; // for resetting addDiv("Orientation " + window.orientation + ""); orientationFired=true; clearInterval(cueInterval); } function getDimensions(){ var w = Math.max(document.documentElement.clientWidth, window.innerWidth || 0); var h = Math.max(document.documentElement.clientHeight, window.innerHeight || 0); return [w,h]; } function resizeListener() { var wh = getDimensions(); addDiv("Resize " + "[width: " + wh[0] + " height: " + wh[1] + "]"); if(orientationFired === false) gebi("badSizeFlag").innerHTML = " Bad onload size detected!"; } function isLockOrientationAvailable(){ screen.lockOrientationUniversal = screen.lockOrientation || screen.mozLockOrientation || screen.msLockOrientation;// || screen.orientation.lock.bind(screen.orientation); if(!screen.lockOrientationUniversal ) { addLockDiv("screen.lockOrientation is NOT available"); } else { try { var tmp = screen.lockOrientationUniversal('landscape-primary'); var ul = screen.unlockOrientation || screen.mozUnlockOrientation || screen.msUnlockOrientation; ul(); addLockDiv("screen.lockOrientation OK!!!"); } catch(e) { addLockDiv("LockOrientation (error): " + e.message + ""); } } //TODO: var o; //o = ScreenOrientation; //alert(ScreenOrientation()) // illegal constructor // may not have lock() and unlock() // for(var i in o) addDiv(i + ": "+ o[i] + "") // check Promise sytem if(screen.orientation.lock) { screen.orientation.lock('portrait').then( function(response){ screen.oriention.unlock(); addLockDiv("screen.orientation.lock() OK!!!"); } ).catch(function(e){ addLockDiv("screen.orientation.lock (Promise error): " + e.message + ""); }) } } window.onload=function() { // If these are outside onload(), it imposes up to 10s LAG on orientation change events window.addEventListener("orientationchange", orientationListener, false); window.addEventListener("resize", resizeListener, false); window.addEventListener("beforeunload", cleanup, false); if(screen.orientation) screen.orientation.addEventListener('change', screenListener, false); // ^^^ lagfix elNotice = gebi("notice"); elLockInfo = gebi("lockInfo"); elEvents = gebi("events"); elFirstSize = gebi("loadSize"); var wh = getDimensions(); elFirstSize.innerHTML += "" + wh[0] + " x " + wh[1] + ""; mediaQuery = window.matchMedia("(orientation: portrait)"); mediaQuery.addListener(updateViaMediaQuery); isLockOrientationAvailable(); updateViaMediaQuery("(at onload)"); addDiv("Screen " + screen.orientation.type + " (at onload)"); cueInterval = setInterval(function(){ gebi("thewobz").className = ""; setTimeout(function(){ gebi("thewobz").className = "wobble"; }, 15); }, cueDelay); } function cleanup() { clearInterval(cueInterval); if(screen.orientation) screen.orientation.removeEventListener('change', screenListener, false); mediaQuery.removeListener(updateViaMediaQuery); window.removeEventListener("resize", resizeListener, false); window.removeEventListener("orientationchange", orientationListener, false); window.removeEventListener("beforeunload", cleanup, false); }

Orientation API [lagfix] (portrait + landscape + lock, resizes + soft keyboard)