diff --git a/src/core/js/accessibility.js b/src/core/js/accessibility.js index 4b172e199..048c20645 100644 --- a/src/core/js/accessibility.js +++ b/src/core/js/accessibility.js @@ -173,7 +173,7 @@ define(function(require) { var bottomoffset = 0; $.a11y.options.focusOffsetTop = topOffset; $.a11y.options.focusOffsetBottom = bottomoffset; - $.a11y.options.OS = Adapt.device.OS.toLowerCase(); + $.a11y.options.OS = Adapt.device.os.toLowerCase(); $.a11y.options.isTouchDevice = Modernizr.touch; if (this.isActive()) { diff --git a/src/core/js/device.js b/src/core/js/device.js index 7fed5bf92..482737704 100644 --- a/src/core/js/device.js +++ b/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,64 @@ 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; + } + } + } + + 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 +141,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 +153,23 @@ define(function(require) { return (Math.abs(window.orientation) === 90) ? screen.width : screen.height; } - function getPlatform() { - - var platform = navigator.platform; - - if (platform.indexOf("Win") != -1) { - return "Windows"; - } else if (platform.indexOf("Mac") != -1) { - return "Mac"; - } else if (platform.indexOf("Linux") != -1) { - return "Linux"; - } - - return "PlatformUnknown"; - } - 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; $("html").addClass(browserString + ' pixel-density-' + pixelDensity()); - });