feat(browser) Finished browser check, Closes #99

Browser check occurs once on app load. If a browser is not supported a warning message is shown. If it is not well tested and info message is shown. Of note: two handy module have been incorporated into the solution: - angular-growl-v2: a notification system we can reuse for other things - localStorageService: a thing wrapper around the localStorage API.
QutEcoacoustics · Aug 23, 2014 · b9b51cf · b9b51cf
1 parent 7430858
commit b9b51cf
Show file tree

Hide file tree

Showing 9 changed files with 99 additions and 11 deletions.
diff --git a/bower.json b/bower.json
@@ -20,7 +20,9 @@
     "angular-tags": "git://github.com/boneskull/angular-tags.git#master",
     "angular-sanitize": "~1.2.x",
     "draggabilly": "~1.1.x",
-    "bowser": "0.7.x"
+    "bowser": "0.7.x",
+    "angular-growl-v2": "~0.7.0",
+    "angular-local-storage": "~0.0.7"
   },
   "dependencies": {},
   "resolutions": {

diff --git a/build.config.js b/build.config.js
@@ -120,7 +120,9 @@ module.exports = {
             // get-size depends on get-style-property... it has to come after it
             'vendor/get-size/get-size.js',
             'vendor/draggabilly/draggabilly.js',
-            'vendor/bowser/bowser.js'
+            'vendor/bowser/bowser.js',
+            'vendor/angular-growl-v2/build/angular-growl.js',
+            'vendor/angular-local-storage/angular-local-storage.js'
 
         ],
         css: [
@@ -132,7 +134,8 @@ module.exports = {
             //'vendor/select2/select2-bootstrap.css',
             //'vendor/select2/select2.css'
 
-            'vendor/angular-tags/dist/angular-tags-0.3.1.css'
+            'vendor/angular-tags/dist/angular-tags-0.3.1.css',
+            'vendor/angular-growl-v2/build/angular-growl.css'
         ],
         assets: [
             // jquery-ui is stoopid, special case

diff --git a/src/app/app.js b/src/app/app.js
@@ -58,6 +58,8 @@ var app = angular.module('baw',
                              'ui.bootstrap.typeahead',
                              'ui.bootstrap.tpls',
                              'decipher.tags',
+                             'angular-growl',
+                             'LocalStorageModule',
 
                              'url', /* a custom uri formatter */
                              'bawApp.configuration', /* a mapping of all static path configurations
@@ -99,8 +101,8 @@ var app = angular.module('baw',
                              'bawApp.birdWalks'
                          ])
 
-    .config(['$routeProvider', '$locationProvider', '$httpProvider', 'conf.paths', '$sceDelegateProvider',
-             function ($routeProvider, $locationProvider, $httpProvider, paths, $sceDelegateProvider) {
+    .config(['$routeProvider', '$locationProvider', '$httpProvider', 'conf.paths', 'conf.constants', '$sceDelegateProvider', 'growlProvider', 'localStorageServiceProvider',
+             function ($routeProvider, $locationProvider, $httpProvider, paths, constants, $sceDelegateProvider, growlProvider, localStorageServiceProvider) {
                  // adjust security whitelist for resource urls
                  var currentWhitelist = $sceDelegateProvider.resourceUrlWhitelist();
                  currentWhitelist.push(paths.api.root+'/**');
@@ -174,6 +176,12 @@ var app = angular.module('baw',
                  // for angular. This causes rails to do stupid shit for things like 403s... with old header it gives a 302
                  // and redirects to HTML page. WTF.
                  $httpProvider.defaults.headers['common']['Accept'] = 'application/json';
+
+                 // configure angular-growl
+                 growlProvider.globalPosition('top-center');
+
+                 // configure local storage provider with our own namepspace
+                 localStorageServiceProvider.setPrefix(constants.namespace);
              }])
 
 
@@ -313,14 +321,14 @@ var app = angular.module('baw',
           }])
 
     .controller('AppCtrl',
-                ['$scope', '$location',
-                 function AppCtrl($scope, $location) {
+                ['$scope', '$location', 'conf.constants', 'growl', '$timeout', 'localStorageService',
+                 function AppCtrl($scope, $location, constants, growl, $timeout, localStorageService) {
 
-                     $scope.showDebugUi = function() {
+                     $scope.showDebugUi = function () {
                          var r = window.cssRules.getCssRule(".debug-UI");
                          r.style.display = "";
                      };
-                     $scope.hideDebugUi = function() {
+                     $scope.hideDebugUi = function () {
                          var r = window.cssRules.getCssRule(".debug-UI");
                          r.style.display = "none";
                      };
@@ -329,4 +337,56 @@ var app = angular.module('baw',
                          return $location.path().indexOf(pathFragment) != -1;
                      };
 
+                     // do browser check
+                     // assume bowser is on global scope
+                     // only do it once - we best not be too annoying
+                     var supported = constants.browserSupport;
+                     var isSupportedBrowser = false;
+                     var version = parseFloat(bowser.version);
+                     angular.forEach(supported.optimum, function (value, key) {
+                         if (isSupportedBrowser || (bowser[key] && version >= value)) {
+                             isSupportedBrowser = true;
+                         }
+                     });
+                     if (!isSupportedBrowser) {
+                         if (!localStorageService.isSupported || !localStorageService.get(supported.localStorageKey)) {
+                             $timeout(function () {
+
+
+                                 var supportedBrowser = false;
+                                 angular.forEach(supported.supported, function (value, key) {
+                                     if (bowser[key]) {
+                                         if (version >= value) {
+                                             growl.info(supported.baseMessage.format({
+                                                 name: bowser.name,
+                                                 version: bowser.version,
+                                                 reason: "not well tested"
+                                             }));
+                                             supportedBrowser = true;
+                                         }
+                                         else {
+                                             supportedBrowser = false;
+                                         }
+
+                                     }
+                                 });
+
+                                 if (!supportedBrowser) {
+                                     growl.warning(supported.baseMessage.format({
+                                         name: bowser.name,
+                                         version: bowser.version,
+                                         reason: "not supported"
+                                     }));
+                                 }
+
+                             });
+                             localStorageService.set(supported.localStorageKey, true);
+                         }
+                     }
+
+
+                     $scope.testGrowl = function () {
+                         growl.success("I'm a success message!");
+                     };
+
                  }]);
diff --git a/src/app/app.spec.js b/src/app/app.spec.js
@@ -3,4 +3,8 @@ describe('AppCtrl', function() {
     it('should pass a dummy test', function() {
        expect(true).toBeTruthy();
     });
+
+    it("checks bowser is on the global scope", function() {
+        expect(window.bowser).toBeDefined();
+    });
 });
diff --git a/src/app/home/home.tpl.html b/src/app/home/home.tpl.html
@@ -44,7 +44,7 @@ <h3>Experiments</h3>
 
     <h3>Download annotations</h3>
     <label>
-        <input type="checkbox" ng-model="checked" checked="true" > test binding is {{checked}}
+        <input type="checkbox" ng-model="checked" checked="true" ng-click="testGrowl()" > test binding is {{checked}}
     </label>
     <label>
         <input type="checkbox" ng-model="disabled" > is disabled {{disabled}}

diff --git a/src/baw.configuration.tpl.js b/src/baw.configuration.tpl.js
@@ -166,6 +166,7 @@ angular.module('bawApp.configuration', ['url'])
     })()
     )
     .constant("conf.constants", {
+        namespace: "baw-client",
         listen: {
             chunkDurationSeconds: 30.0,
             minAudioDurationSeconds: 2.0
@@ -200,6 +201,8 @@ angular.module('bawApp.configuration', ['url'])
                 opera: 23,
                 ios:  5.1,
                 android: 4.0
-            }
+            },
+            baseMessage: "Your current internet browser ({name}, version {version}) is {reason}. <br/> Consider updating or try using <a target='_blank' href='https://www.google.com.au/intl/en_au/chrome/browser/' >Google Chrome</a>.",
+            localStorageKey: "browserSupport.checked"
         }
     });
diff --git a/src/index.html b/src/index.html
@@ -71,6 +71,9 @@
 
     </nav>
 
+    <div growl>
+
+    </div>
     <!--<div id="login-holder">-->
         <!--<div id="loginbox">-->
             <!--<div id="login-inner" ng-controller="LoginCtrl">-->

diff --git a/src/sass/_angularGrowlCustomisation.scss b/src/sass/_angularGrowlCustomisation.scss
@@ -0,0 +1,11 @@
+/**
+ * Custom overrides of the style in
+ * /vendor/angular-growl-v2/build/angular-growl.css
+ */
+$custom-width: 576px;
+.growl-container.growl-fixed.top-center {
+  @extend .growl-container.growl-fixed.top-center;
+
+  max-width: $custom-width;
+  margin-left: -(($custom-width / 2));
+}
diff --git a/src/sass/application.tpl.scss b/src/sass/application.tpl.scss
@@ -24,6 +24,8 @@ $DEBUG: '<%= build_configs.current.key === "development" %>' == 'true';
 
 @import "touch/touch";
 
+@import "angularGrowlCustomisation";
+
 // TODO: create someway to automatically import files
 //@import "partials/*";