Created
October 29, 2012 19:11
-
-
Save marsvogel/3975819 to your computer and use it in GitHub Desktop.
JavaScript jQuery Check If Lanscape Or Portrait Mode On Mobile Devices
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| /*! ========================================================================= | |
| * jQuery Orientation Plugin | |
| * ========================================================================== | |
| * | |
| * Dieses Plugin bietet die Möglichkeit Callback Funktionen an | |
| * den Lanscape und Portrait Modus zu binden. | |
| * | |
| * # Benutzung | |
| * | |
| * Um eine Funktion im Landscape Modus auszuführen benötigt man folgende | |
| * Funktion: | |
| * | |
| * $.Landscape(function(){ | |
| * // Dein Code hier | |
| * }); | |
| * | |
| * Für den Portrait Modus funktioniert es ganz ähnlich: | |
| * | |
| * $.Portrait(function(){ | |
| * // Dein Code hier | |
| * }); | |
| * | |
| * # Funktionsweise | |
| * | |
| * Das Plugin prüft die Existenz des Gyroscopes und dessen Eigenschaften alpha, beta und gamma. | |
| * Existiert das Gyroscope wird das Verhältnis des Viewports gemessen und die jeweilige Callback | |
| * Funktion aufgerufen | |
| * | |
| * @author Christopher Bischoff | |
| * @company REDCODE.DE | |
| * @version 0.1 | |
| * @dependencies jQuery-1.8.2 ( lower versions are possible, but not tested <3 ) | |
| * @date 2012-10-30 09:43 | |
| */ | |
| (function( $ ){ | |
| var m = { | |
| // Hilfsvariablen zum blocken der Funktionen, damit die jeweilige | |
| // nicht mehrmals die Sekunde ausgeführt wird | |
| // Landscape | |
| doL : true, | |
| // Portrait | |
| doP : true, | |
| // Construktor | |
| // Das Argument 'mode' wird von den $.Landscape() und $.Portrait() Funktionen übergeben, | |
| // damit der Construktor weis, was er vor sich hat. | |
| init : function( mode, cb ){ | |
| // Existiert das DeviceOrientationEvent nicht, wird false zurückgegeben | |
| if ( window.DeviceOrientationEvent ) { | |
| window.addEventListener("deviceorientation", function( event ) { | |
| // Wenn alle drei Koordinaten existieren befindet man sich auf einem Mobilgerät, | |
| // ansonsten wird false zurückgegeben | |
| if ( ( event.alpha !== null ) && ( event.beta !== null ) && ( event.gamma !== null ) ) { | |
| // Portrait Modus | |
| if ( ( window.innerHeight > window.innerWidth ) && ( mode === 'p' && m.doP === true ) ) { | |
| // Schalte $.Landscape() frei und blocke $.Portrait() | |
| // damit wird sicher gestellt, das die $.Portrait() nicht mehrmals | |
| // die Sekunde ausgeführt wird | |
| m.doL = true; | |
| m.doP = false; | |
| // Führe die in $.Portrait() übergebene callback Funktion aus | |
| cb(); | |
| // Landscape Modus | |
| } else if ( ( window.innerHeight < window.innerWidth ) && ( mode === 'l' && m.doL === true ) ) { | |
| // Schalte $.Portrait() frei und blocke $.Landscape() | |
| // damit wird sicher gestellt, das die $.Landscape() nicht mehrmals | |
| // die Sekunde ausgeführt wird | |
| m.doL = false; | |
| m.doP = true; | |
| // Führe die in $.Landscape() übergebene callback Funktion aus | |
| cb(); | |
| } | |
| // Tritt eine unbekannte Ausnahme auf, wird false zurückgegeben | |
| return false; | |
| } | |
| // Das Gyroskop ist nicht voll funktionsfähig oder wird nicht unterstützt | |
| return false; | |
| }, true); | |
| } | |
| // Das DeviceOrientationEvent existiert nicht | |
| return false; | |
| } | |
| }; | |
| $.Landscape = function( cb ) { | |
| m.init('l', cb); | |
| }; | |
| $.Portrait = function( cb ) { | |
| m.init('p', cb); | |
| }; | |
| })( jQuery ); |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment