Re-worked device.js to make use of Bowser 1.5 features

src/core/js/device.js

@@ -4,20 +4,43 @@ define(function(require) {
     var Bowser = require('coreJS/libraries/bowser');
     var $window = $(window);
 
-    Adapt.device = {};
-    Adapt.device.touch = Modernizr.touch;
-    Adapt.device.screenWidth = getScreenWidth();
-    Adapt.device.screenHeight = getScreenHeight();
-    Adapt.device.orientation = getScreenOrientation();
-    Adapt.device.aspectRatio = getScreenAspectRatio();
+    Adapt.device = {
+        touch: Modernizr.touch,
+        screenWidth: getScreenWidth(),
+        screenHeight: getScreenHeight(),
+        browser: Bowser.name,
+        version: Bowser.version,
+        OS: getOperatingSystem(),
+        osVersion: Bowser.osversion || '',
+        renderingEngine: getRenderingEngine()
+    };
+
+    // Define 'orientation' and 'aspectRatio' here once 'screenWidth' and 'screenHeight' have been set,
+    // as both these functions are getters, essentially.
+    Object.defineProperties(Adapt.device, {
+        "orientation": {
+            get: function () {
+                return (this.screenWidth >= this.screenHeight) ? 'landscape' : 'portrait';
+            }
+        },
+        "aspectRatio": {
+            get: function () {
+                return this.screenWidth / this.screenHeight;
+            }
+        }
+    });
 
     Adapt.once('app:dataReady', function() {
         Adapt.device.screenSize = checkScreenSize();
 
-        $('html').addClass("size-" + Adapt.device.screenSize);
+        $('html').addClass('size-' + Adapt.device.screenSize);
+
+        if (Adapt.device.orientation) {
+            $('html').addClass('orientation-' + Adapt.device.orientation);
+        }
 
         // As Adapt.config is available it's ok to bind the 'resize'.
-        $window.on('resize', onWindowResize);
+        $window.on('resize orientationchange', onWindowResize);
     });
 
     /**
@@ -52,27 +75,69 @@ define(function(require) {
             : window.innerHeight || $window.height();
     }
 
-    function getScreenOrientation() {
-        return (Adapt.device.screenWidth >= Adapt.device.screenHeight) ? 'landscape' : 'portrait';
+    function getOperatingSystem() {
+        var os = '';
+        var flags = ['windows', 'mac', 'linux', 'windowsphone', 'chromeos', 'android',
+            'ios', 'blackberry', 'firefoxos', 'webos', 'bada', 'tizen', 'sailfish'];
+
+        for (var i = 0; i < flags.length; i++) {
+            if (Bowser[flags[i]]) {
+                os = flags[i];
+                break;
+            }
+        }
+
+        if (os === '') {
+            // Fall back to using navigator.platform in case Bowser can't detect the OS.
+            var platform = navigator.platform;
+            var platforms = ['Win', 'Mac', 'Linux'];
+            os = 'PlatformUnknown';
+
+            for (var i = 0; i < platforms.length; i++) {
+                if (platform.indexOf(platforms[i]) != -1) {
+                    os = platforms[i].toLowerCase();
+                    break;
+                }
+            }
+
+            // Set consistency with the Bowser flags.
+            if (os == 'win') {
+                os = 'windows';
+            }
+        }
+
+        return os;
     }
 
-    function getScreenAspectRatio() {
-        return Adapt.device.screenWidth / Adapt.device.screenHeight;
+    function getRenderingEngine() {
+        var engine = '';
+        var flags = ['webkit', 'blink', 'gecko', 'msie', 'msedge'];
+
+        for (var i = 0; i < flags.length; i++) {
+            if (Bowser[flags[i]]) {
+                engine = flags[i];
+                break;
+            }
+        }
+
+        return engine;
     }
 
     var onWindowResize = _.debounce(function onScreenSizeChanged() {
-        // Calculate the screen properties:
+        // Calculate the screen properties.
         Adapt.device.screenWidth = getScreenWidth();
         Adapt.device.screenHeight = getScreenHeight();
-        Adapt.device.orientation = getScreenOrientation();
-        Adapt.device.aspectRatio = getScreenAspectRatio();
 
         var newScreenSize = checkScreenSize();
 
         if (newScreenSize !== Adapt.device.screenSize) {
             Adapt.device.screenSize = newScreenSize;
 
-            $('html').removeClass("size-small size-medium size-large").addClass("size-" + Adapt.device.screenSize);
+            $('html').removeClass('size-small size-medium size-large').addClass('size-' + Adapt.device.screenSize);
+
+            if (Adapt.device.orientation) {
+                $('html').removeClass('orientation-landscape orientation-portrait').addClass('orientation-' + Adapt.device.orientation);
+            }
 
             Adapt.trigger('device:changed', Adapt.device.screenSize);
         }
@@ -81,13 +146,6 @@ define(function(require) {
 
     }, 100);
 
-    var browser = Bowser.name;
-    var version = Bowser.version;
-    var OS = Bowser.osversion;
-
-    // Bowser only checks against navigator.userAgent so if the OS is undefined, do a check on the navigator.platform
-    if (OS == undefined) OS = getPlatform();
-
     function isAppleDevice() {
         return /iPad|iPhone|iPod/.test(navigator.userAgent) && !window.MSStream;
     }
@@ -100,42 +158,38 @@ define(function(require) {
         return (Math.abs(window.orientation) === 90) ? screen.width : screen.height;
     }
 
-    function getPlatform() {
+    function getAppleDeviceType() {
+        var type = '';
 
-        var platform = navigator.platform;
+        var flags = ['iphone', 'ipad', 'ipod'];
 
-        if (platform.indexOf("Win") != -1) {
-            return "Windows";
-        } else if (platform.indexOf("Mac") != -1) {
-            return "Mac";
-        } else if (platform.indexOf("Linux") != -1) {
-            return "Linux";
+        for (var i = 0; i < flags.length; i++) {
+            if (Bowser[flags[i]]) {
+                type = flags[i];
+                break;
+            }
         }
 
-        return "PlatformUnknown";
+        return type;
     }
 
     function pixelDensity() {
-        var fltPixelDensity = ( window.devicePixelRatio || 1 );
+        var pixelDensity = (window.devicePixelRatio || 1);
 
-        if( fltPixelDensity >= 3 ) {
+        if (pixelDensity >= 3) {
             return 'ultra-high';
-        } else if( fltPixelDensity >= 2 ) {
+        } else if (pixelDensity >= 2) {
             return 'high';
-        } else if( fltPixelDensity >= 1.5 ) {
+        } else if (pixelDensity >= 1.5) {
             return 'medium';
         } else {
             return 'low';
         }
     }
 
-    var browserString = browser + " version-" + version + " OS-" + OS;
-	/* MAKE DEVICE IDENTIFICATION UNIFORM CASE */
-    Adapt.device.browser = browser ? browser.toLowerCase() : "";
-    Adapt.device.version = version ? version.toLowerCase() : "";
-    Adapt.device.OS = OS ? OS.toLowerCase() : "";
-    browserString = browserString.replace("Internet Explorer", "ie");
+    // Convert 'msie' to 'ie' for backwards compatibility
+    var browserString = (Adapt.device.browser.toLowerCase() === 'msie') ? 'ie' : Adapt.device.browser.toLowerCase();
+    browserString = browserString + ' version-' + Adapt.device.version + ' OS-' + Adapt.device.OS + ' ' + getAppleDeviceType();
 
     $("html").addClass(browserString + ' pixel-density-' + pixelDensity());
-
 });