Skip to content

Commit

Permalink
Re-worked device.js to make use of Bowser 1.5 features
Browse files Browse the repository at this point in the history 
- Added support for orientation-landscape and orientation-portrait classes
- Added new 'renderingEngine' property
- Added more advanced support for detecting the operating system
- Renamed Adapt.device.OS to Adapt.device.os
  • Loading branch information
@brian-learningpool
brian-learningpool committed Dec 1, 2016
1 parent f2e90b4 commit 81ebe0b
Show file tree
Hide file tree
Showing 2 changed files with 84 additions and 50 deletions.
2 changes: 1 addition & 1 deletion src/core/js/accessibility.js
View file
Expand Up @@ -173,7 +173,7 @@ define(function(require) {
var bottomoffset = 0; var bottomoffset = 0;
$.a11y.options.focusOffsetTop = topOffset; $.a11y.options.focusOffsetTop = topOffset;
$.a11y.options.focusOffsetBottom = bottomoffset; $.a11y.options.focusOffsetBottom = bottomoffset;
$.a11y.options.OS = Adapt.device.OS.toLowerCase(); $.a11y.options.OS = Adapt.device.os.toLowerCase();
$.a11y.options.isTouchDevice = Modernizr.touch; $.a11y.options.isTouchDevice = Modernizr.touch;


if (this.isActive()) { if (this.isActive()) {
Expand Down
132 changes: 83 additions & 49 deletions src/core/js/device.js
View file
Expand Up @@ -4,20 +4,43 @@ define(function(require) {
var Bowser = require('coreJS/libraries/bowser'); var Bowser = require('coreJS/libraries/bowser');
var $window = $(window); var $window = $(window);


Adapt.device = {}; Adapt.device = {
Adapt.device.touch = Modernizr.touch; touch: Modernizr.touch,
Adapt.device.screenWidth = getScreenWidth(); screenWidth: getScreenWidth(),
Adapt.device.screenHeight = getScreenHeight(); screenHeight: getScreenHeight(),
Adapt.device.orientation = getScreenOrientation(); browser: Bowser.name,
Adapt.device.aspectRatio = getScreenAspectRatio(); 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.once('app:dataReady', function() {
Adapt.device.screenSize = checkScreenSize(); 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'. // As Adapt.config is available it's ok to bind the 'resize'.
$window.on('resize', onWindowResize); $window.on('resize orientationchange', onWindowResize);
}); });


/** /**
Expand Down Expand Up @@ -52,27 +75,64 @@ define(function(require) {
: window.innerHeight || $window.height(); : window.innerHeight || $window.height();
} }


function getScreenOrientation() { function getOperatingSystem() {
return (Adapt.device.screenWidth >= Adapt.device.screenHeight) ? 'landscape' : 'portrait'; 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() { function getRenderingEngine() {
return Adapt.device.screenWidth / Adapt.device.screenHeight; 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() { var onWindowResize = _.debounce(function onScreenSizeChanged() {
// Calculate the screen properties: // Calculate the screen properties.
Adapt.device.screenWidth = getScreenWidth(); Adapt.device.screenWidth = getScreenWidth();
Adapt.device.screenHeight = getScreenHeight(); Adapt.device.screenHeight = getScreenHeight();
Adapt.device.orientation = getScreenOrientation();
Adapt.device.aspectRatio = getScreenAspectRatio();


var newScreenSize = checkScreenSize(); var newScreenSize = checkScreenSize();


if (newScreenSize !== Adapt.device.screenSize) { if (newScreenSize !== Adapt.device.screenSize) {
Adapt.device.screenSize = newScreenSize; 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); Adapt.trigger('device:changed', Adapt.device.screenSize);
} }
Expand All @@ -81,13 +141,6 @@ define(function(require) {


}, 100); }, 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() { function isAppleDevice() {
return /iPad|iPhone|iPod/.test(navigator.userAgent) && !window.MSStream; return /iPad|iPhone|iPod/.test(navigator.userAgent) && !window.MSStream;
} }
Expand All @@ -100,42 +153,23 @@ define(function(require) {
return (Math.abs(window.orientation) === 90) ? screen.width : screen.height; 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() { function pixelDensity() {
var fltPixelDensity = ( window.devicePixelRatio || 1 ); var pixelDensity = (window.devicePixelRatio || 1);


if( fltPixelDensity >= 3 ) { if (pixelDensity >= 3) {
return 'ultra-high'; return 'ultra-high';
} else if( fltPixelDensity >= 2 ) { } else if (pixelDensity >= 2) {
return 'high'; return 'high';
} else if( fltPixelDensity >= 1.5 ) { } else if (pixelDensity >= 1.5) {
return 'medium'; return 'medium';
} else { } else {
return 'low'; return 'low';
} }
} }


var browserString = browser + " version-" + version + " OS-" + OS; // Convert 'msie' to 'ie' for backwards compatibility
/* MAKE DEVICE IDENTIFICATION UNIFORM CASE */ var browserString = (Adapt.device.browser.toLowerCase() === 'msie') ? 'ie' : Adapt.device.browser.toLowerCase();
Adapt.device.browser = browser ? browser.toLowerCase() : ""; browserString = browserString + ' version-' + Adapt.device.version + ' OS-' + Adapt.device.os;
Adapt.device.version = version ? version.toLowerCase() : "";
Adapt.device.OS = OS ? OS.toLowerCase() : "";
browserString = browserString.replace("Internet Explorer", "ie");


$("html").addClass(browserString + ' pixel-density-' + pixelDensity()); $("html").addClass(browserString + ' pixel-density-' + pixelDensity());

}); });

0 comments on commit 81ebe0b

Please sign in to comment.