Skip to content

Instantly share code, notes, and snippets.

@JamesEggers1
Created February 24, 2012 22:42
Show Gist options
  • Star 1 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save JamesEggers1/1904283 to your computer and use it in GitHub Desktop.
Save JamesEggers1/1904283 to your computer and use it in GitHub Desktop.
My Orientation Change polyfill module
var OrientationManager = (function () {
"use strict";
var supportsOrientationChange = window.hasOwnProperty("onorientationchange")
, orientationEvent = supportsOrientationChange ? "orientationchange" : "resize"
, currentOrientation = window.orientation || 0
, currentWidth = window.outerWidth;
function orientationChanged(callBack) {
var newWidth = window.outerWidth
, newOrientation = window.orientation || (newWidth !== currentWidth) ? 1 : 0;
// only change orientation and call provided callback if necessary
if (newOrientation !== currentOrientation) {
currentOrientation = newOrientation;
currentWidth = newWidth;
if (callBack) { callBack(); }
}
}
// exports
return {
supportsOrientationChange: supportsOrientationChange
, orientation: currentOrientation
, orientationEvent: orientationEvent
, orientationChanged: orientationChanged
};
} ());
// jQuery binding usecase
$(function($){
$(window).on(orientationEvent, function (){OrientationManager.orientationChanged(myCallback);});
});
@jpoehls
Copy link

jpoehls commented Mar 1, 2012

Looks good. Simple, I like it. I have a few suggestions:

  1. Make the OrientationManager.orientationChanged() event support multiple callbacks.

  2. When the OrientationManager.orientationChanged() event fires the callback, either pass in the OrientationManager as the context this (i.e. callBack.apply(OrientationManager)) or pass the OrientationManager, or the newOrientation as an argument to the callBack().

    I think this would make it slightly easier for the consumer since they won't have to turn around and call OrientationManager.currentOrientation in their callback function.

@jpoehls
Copy link

jpoehls commented Mar 1, 2012

Hmm. Question. Is there a reason you don't set window.orientation, if this is meant as a polyfill?

@albohlabs
Copy link

I created a repo under orientation-change-polyfill.
🍺 Feel free to contribute.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment