Completed automated module creation for external services.

Note: changed previous behaviour: automated module creation is now opt-in. Reasoning: the majority of vendor libraries dont actually use module.exports! externalModule.js cleaned up so its not dependent on global variables for counting the number of times a vendor library has been loaded. Removed trial services that manually took references off `window` and stuck them in providers. Patched up the application where `window` references now correctly do not work.
QutEcoacoustics · Oct 28, 2014 · f56f4e4 · f56f4e4
1 parent 3e7caa1
commit f56f4e4
Show file tree

Hide file tree

Showing 20 changed files with 125 additions and 126 deletions.
diff --git a/Gruntfile.js b/Gruntfile.js
@@ -35,7 +35,7 @@ module.exports = function (grunt) {
      */
     var processVendorJs =
         require("./buildConfig/vendorTemplateProcessing.js")
-        (grunt, "./buildConfig/vendor.wrapper", "window.bawApp.externalsCallback", userConfig.vendor_files.jsDoNotWrap);
+        (grunt, "./buildConfig/vendor.wrapper", "window.bawApp.externalsCallback", userConfig.vendor_files.jsWrapWithModule);
 
 
     /**
@@ -741,6 +741,7 @@ module.exports = function (grunt) {
         var jsFiles = filterForJS(this.filesSrc).map(function (file) {
             return file.replace(dirRE, '');
         });
+
         var cssFiles = filterForCSS(this.filesSrc).map(function (file) {
             return file.replace(dirRE, '');
         });

diff --git a/buildConfig/build.config.js b/buildConfig/build.config.js
@@ -85,14 +85,19 @@ module.exports = {
      * recommended that you use wildcards.
      */
     vendor_files: {
-        jsDoNotWrap: [
-            'vendor/jquery/dist/jquery.js',
-            'vendor/angular/angular.js'
+        jsWrapWithModule: [
+            'vendor/momentjs/moment.js',
+            'vendor/lodash/dist/lodash.js',
+
+            'vendor/bowser/bowser.js',
+            'vendor/humanize-duration/humanize-duration.js'
         ],
         js: [
             'vendor/jquery/dist/jquery.js',
             'vendor/angular/angular.js',
 
+            'buildConfig/externalModule.js',
+
 
             // TODO: THIS IS TERRIBLE! REMOVE UI ASAP... OR AT LEAST ONLY INCLUDE RELEVANT COMPONENTS
             'vendor/jquery-ui/ui/jquery-ui.js',
@@ -127,6 +132,7 @@ 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/angular-growl-v2/build/angular-growl.js',
             'vendor/angular-local-storage/angular-local-storage.js',

diff --git a/buildConfig/externalModule.js b/buildConfig/externalModule.js
@@ -7,27 +7,39 @@
  */
 
 // global variable
-window.bawApp = window.bawApp || {};
-window.bawApp.externals = {};
-window.bawApp.externalsCallback = function (error, module) {
-    window.bawApp.externals[module.name] = module;
-};
+var angularApplicationNamespace = "bawApp";
+window[angularApplicationNamespace] = window[angularApplicationNamespace] || {};
+window[angularApplicationNamespace].externals = {};
+window[angularApplicationNamespace].externalsCallback = function (error, capturedModule) {
+    var that = window[angularApplicationNamespace];
+
+    that.externals[capturedModule.moduleName] = capturedModule;
 
+    that.externalsCallback.count = (that.externalsCallback.count || 0) + 1;
 
+    if (that.externalsCallback.count >= capturedModule.externalModulesCount) {
+        that.externalsComplete();
+    }
+};
 
 // later when vendor assets are done loading
-(function(window) {
-    var moduleNames = [];
-    angular.forEach(window.bawApp.externals, function (value, key) {
-        var moduleName = "bawApp.vendorServices." + key;
-
-        angular
-            .module(moduleName, [])
-            .provider(key,
+window[angularApplicationNamespace].externalsComplete = function() {
+    // define core module
+    var moduleName = angularApplicationNamespace + ".vendorServices.auto";
+    console.debug("Creating module ", moduleName);
+    var vendorModule = angular.module(moduleName, []);
+
+    angular.forEach(window[angularApplicationNamespace].externals, function (value, key) {
+        var capturedModule = value,
+            providerName = key,
+            vendorExport = capturedModule.exports;
+
+        console.debug("Creating provider ", providerName);
+        vendorModule.provider(providerName,
                       function () {
-                          var vendorInstance = value;
+                          var vendorInstance = vendorExport;
 
-                          this.configureVendorInstance = function (instance) {
+                          this.configureVendorInstance = function () {
                               return vendorInstance;
                           };
 
@@ -36,10 +48,13 @@ window.bawApp.externalsCallback = function (error, module) {
                               return vendorInstance;
                           }];
                       });
-
-        moduleNames.push(moduleName);
     });
 
-    // define core module
-    angular.module("bawApp.vendorServices", moduleNames);
-})(window);
+    // cleanup
+    console.debug("cleaning up vendor externals hack");
+    delete window[angularApplicationNamespace].externals;
+    delete window[angularApplicationNamespace].externalsComplete;
+    window[angularApplicationNamespace].externalsCallback = function() {
+        console.error("The vendor externals callback is no longer valid!", arguments);
+    }
+};
diff --git a/buildConfig/vendor.wrapper b/buildConfig/vendor.wrapper
@@ -7,6 +7,7 @@
  */
 (function (module, callback) {
 
+ var exports = module.exports;
 /*
  Vendor template: begin original file.
  */
@@ -15,4 +16,4 @@
  Vendor template: End original file.
  */
     callback(undefined, module);
-})({exports: {}, moduleName: "<%= filename %>"}, <%= callbackName %>);
+})({exports: {}, moduleName: "<%= filename %>", externalModulesCount: <%= externalModulesCount %>}, <%= callbackName %>);
diff --git a/buildConfig/vendorTemplateProcessing.js b/buildConfig/vendorTemplateProcessing.js
@@ -1,18 +1,18 @@
 
 
-module.exports = function(grunt, template, callbackName, ignoreFiles) {
+module.exports = function(grunt, template, callbackName, includeFiles) {
     var fs = require('fs'),
         path = require("path"),
         _ = require('lodash');
 
     var vendorTemplate = fs.readFileSync(template, "utf-8"),
-        ignoreFiles = ignoreFiles || [];
+        includeFiles = includeFiles || [];
 
 
     return function process(content, sourcePath) {
 
 
-        if (ignoreFiles.indexOf(sourcePath) >= 0) {
+        if (includeFiles.indexOf(sourcePath) === -1) {
             return content;
         }
 
@@ -21,7 +21,8 @@ module.exports = function(grunt, template, callbackName, ignoreFiles) {
         var data = {
             content: content,
             filename: path.basename(sourcePath, path.extname(sourcePath)),
-            callbackName: callbackName
+            callbackName: callbackName,
+            externalModulesCount: includeFiles.length
         };
 
         return _.template(vendorTemplate, data);

diff --git a/src/app/annotationViewer/annotationViewer.js b/src/app/annotationViewer/annotationViewer.js
@@ -1,6 +1,6 @@
 var avModule = angular.module('bawApp.annotationViewer', ['bawApp.annotationViewer.gridLines']);
 
-avModule.controller('AnnotationViewerCtrl', ['$scope', '$element', '$attrs', '$transclude', 'Tag',
+avModule.controller('AnnotationViewerCtrl', ['$scope', '$element', '$attrs', '$transclude', 'Tag', "lodash",
 
     // TODO: possible optimisation evaluate these functions once per frame
 
@@ -13,7 +13,7 @@ avModule.controller('AnnotationViewerCtrl', ['$scope', '$element', '$attrs', '$t
      * @constructor
      * @param Tag
      */
-        function AnnotationViewerCtrl($scope, $element, $attrs, $transclude, Tag) {
+        function AnnotationViewerCtrl($scope, $element, $attrs, $transclude, Tag, _) {
 
         $scope.$watch(function () {
             // updated in directive

diff --git a/src/app/app.js b/src/app/app.js
@@ -60,6 +60,8 @@ var app = angular.module('baw',
                              'decipher.tags',
                              'angular-growl',
                              'LocalStorageModule',
+                             "bawApp.vendorServices",
+
 
                              'url', /* a custom uri formatter */
                              'bawApp.configuration', /* a mapping of all static path configurations
@@ -78,7 +80,7 @@ var app = angular.module('baw',
                              'bawApp.directives.toggleSwitch',
                              'bawApp.filters', /* our filters.js     */
 
-                             "bawApp.services.core",
+
                              'bawApp.services.queryBuilder',
                              'bawApp.services', /* our services.js    */
                              'bawApp.services.unitConverter',
@@ -330,8 +332,8 @@ var app = angular.module('baw',
           }])
 
     .controller('AppCtrl',
-                ['$scope', '$location', 'conf.constants', 'growl', '$timeout', 'localStorageService',
-                 function AppCtrl($scope, $location, constants, growl, $timeout, localStorageService) {
+                ['$scope', '$location', 'conf.constants', 'growl', '$timeout', 'localStorageService', "bowser",
+                 function AppCtrl($scope, $location, constants, growl, $timeout, localStorageService, bowser) {
 
                      $scope.showDebugUi = function () {
                          var r = window.cssRules.getCssRule(".debug-UI");
@@ -347,13 +349,12 @@ var app = angular.module('baw',
                      };
 
                      // 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);
+                     var version = parseFloat(bowser.browser.version);
                      angular.forEach(supported.optimum, function (value, key) {
-                         if (isSupportedBrowser || (bowser[key] && version >= value)) {
+                         if (isSupportedBrowser || (bowser.browser[key] && version >= value)) {
                              isSupportedBrowser = true;
                          }
                      });
@@ -364,11 +365,11 @@ var app = angular.module('baw',
 
                                  var supportedBrowser = false;
                                  angular.forEach(supported.supported, function (value, key) {
-                                     if (bowser[key]) {
+                                     if (bowser.browser[key]) {
                                          if (version >= value) {
                                              growl.info(supported.baseMessage.format({
-                                                 name: bowser.name,
-                                                 version: bowser.version,
+                                                 name: bowser.browser.name,
+                                                 version: bowser.browser.version,
                                                  reason: "not well tested"
                                              }));
                                              supportedBrowser = true;
@@ -382,8 +383,8 @@ var app = angular.module('baw',
 
                                  if (!supportedBrowser) {
                                      growl.warning(supported.baseMessage.format({
-                                         name: bowser.name,
-                                         version: bowser.version,
+                                         name: bowser.browser.name,
+                                         version: bowser.browser.version,
                                          reason: "not supported"
                                      }));
                                  }

diff --git a/src/app/listen/listen.js b/src/app/listen/listen.js
@@ -21,6 +21,7 @@ angular.module('bawApp.listen', ['decipher.tags', 'ui.bootstrap.typeahead'])
         'UserProfile',
         'UserProfileEvents',
         'Bookmark',
+        "moment",
         /**
          * The listen controller.
          * @param $scope
@@ -48,7 +49,8 @@ angular.module('bawApp.listen', ['decipher.tags', 'ui.bootstrap.typeahead'])
          */
             function ListenCtrl(
             $scope, $resource, $location, $routeParams, $route, $q, paths, constants, $url, ngAudioEvents,
-            AudioRecording, MediaService, Media, AudioEvent, Tag, Taggings, Site, Project, UserProfile, UserProfileEvents, Bookmark) {
+            AudioRecording, MediaService, Media, AudioEvent, Tag, Taggings, Site, Project, UserProfile,
+            UserProfileEvents, Bookmark, moment) {
 
 
             var CHUNK_DURATION_SECONDS = constants.listen.chunkDurationSeconds;

diff --git a/src/common/jquery.drawabox.js b/src/common/jquery.drawabox.js
@@ -451,7 +451,7 @@
     methods.setBox = function setBox(id, top, left, height, width, selected) {
         return this.each(function () {
 
-            var matchingBoxElement = _.filter(this.children, function(element) {
+            var matchingBoxElement = [].slice.call(this.children).filter(function(element) {
                return element.getAttribute("data-id") === id.toString();
             })[0];
 

diff --git a/src/components/directives/bawAnnotationViewer.js b/src/components/directives/bawAnnotationViewer.js
@@ -5,7 +5,8 @@ bawds.directive('bawAnnotationViewer',
         'bawApp.unitConverter',
         'AudioEvent',
         'Tag',
-        function (paths, unitConverter, AudioEvent, Tag) {
+        "lodash",
+        function (paths, unitConverter, AudioEvent, Tag, _) {
 
             /**
              * Create an watcher for an audio event model.

diff --git a/src/components/filters/filters.js b/src/components/filters/filters.js
@@ -36,7 +36,7 @@
      *
      * requires momentjs
      */
-    bawfs.filter('moment', function() {
+    bawfs.filter('moment', ["moment", function(moment) {
        return function(input, method) {
 
            if (input) {
@@ -49,7 +49,7 @@
 
            return "";
        };
-    });
+    }]);
 
 
     /**

diff --git a/src/components/services/externals/bowserService.js b/src/components/services/externals/bowserService.js
diff --git a/src/components/services/externals/externals.js b/src/components/services/externals/externals.js
diff --git a/src/components/services/externals/lodashService.js b/src/components/services/externals/lodashService.js
diff --git a/src/components/services/externals/momentService.js b/src/components/services/externals/momentService.js