From 76de9ba1518a41a530e349768b257a4893b44aad Mon Sep 17 00:00:00 2001
From: Brian Quinn <brian@learningpool.com>
Date: Wed, 15 Jun 2016 17:42:30 +0100
Subject: [PATCH] Slight tidy-up of device.js

The binding to 'resize' should not happen until Adapt.config is available.
---
 src/core/js/device.js | 37 +++++++++++++++++++------------------
 1 file changed, 19 insertions(+), 18 deletions(-)

diff --git a/src/core/js/device.js b/src/core/js/device.js
index 14de6cfc8..33c460d93 100644
--- a/src/core/js/device.js
+++ b/src/core/js/device.js
@@ -2,41 +2,44 @@ define(function(require) {
 
     var Adapt = require('coreJS/adapt');
     var Bowser = require('coreJS/libraries/bowser');
-
-    Adapt.device = {};
-
     var $window = $(window);
 
-    // Check whether device is touch enabled
-    Adapt.device.touch = Modernizr.touch;
+    Adapt.device = {
+        touch: Modernizr.touch,
+        screenWidth: isAppleDevice() ? screen.width : window.innerWidth || $window.width()
+    };
 
     Adapt.once('app:dataReady', function() {
-        // The theme.json will have been loaded at this point
         Adapt.device.screenSize = checkScreenSize();
 
-        $('html').addClass("size-"+Adapt.device.screenSize);
-    });
+        $('html').addClass("size-" + Adapt.device.screenSize);
 
-    Adapt.device.screenWidth = isAppleDevice()
-        ? screen.width
-        : window.innerWidth || $window.width();
+        // As Adapt.config is available it's ok to bind the 'resize'.
+        $window.on('resize', onWindowResize);
+    });
 
+    /**
+     * Compares the calculated screen width to the breakpoints defined in config.json.
+     * 
+     * @returns {string} 'large', 'medium' or 'small'
+     */
     function checkScreenSize() {
-
+        var screenSizeConfig = Adapt.config.get('screenSize');
         var screenSize;
 
-        if (Adapt.device.screenWidth > Adapt.config.get('screenSize').medium) {
+        if (Adapt.device.screenWidth > screenSizeConfig.medium) {
             screenSize = 'large';
-        } else if (Adapt.device.screenWidth > Adapt.config.get('screenSize').small) {
+        } else if (Adapt.device.screenWidth > screenSizeConfig.small) {
             screenSize = 'medium';
         } else {
             screenSize = 'small';
         }
+
         return screenSize;
     }
 
     var onWindowResize = _.debounce(function onScreenSizeChanged() {
-
+        // Calculate the screen width.
         Adapt.device.screenWidth = isAppleDevice()
             ? screen.width
             : window.innerWidth || $window.width();
@@ -46,7 +49,7 @@ define(function(require) {
         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);
 
             Adapt.trigger('device:changed', Adapt.device.screenSize);
         }
@@ -55,8 +58,6 @@ define(function(require) {
 
     }, 100);
 
-    $window.on('resize', onWindowResize);
-
     var browser = Bowser.name;
     var version = Bowser.version;
     var OS = Bowser.osversion;