fix(build): Wait for config to load. Move draggable into a require.js…

… packge.
mozilla · Aug 12, 2014 · b2a0be1 · b2a0be1
1 parent 08ac812
commit b2a0be1
Show file tree

Hide file tree

Showing 5 changed files with 120 additions and 117 deletions.
diff --git a/app/scripts/main.js b/app/scripts/main.js
@@ -5,10 +5,12 @@
 'use strict';
 
 require([
-  './require_config',
-  './lib/app-start'
-],
-function (RequireConfig, AppStart) {
-  var appStart = new AppStart();
-  appStart.startApp();
-});
+    './require_config'
+  ],
+  function (RequireConfig) {
+    // Ensure config is loaded before trying to load any other scripts.
+    require(['./lib/app-start'], function (AppStart) {
+      var appStart = new AppStart();
+      appStart.startApp();
+    });
+  });
diff --git a/app/scripts/require_config.js b/app/scripts/require_config.js
@@ -18,6 +18,12 @@ require.config({
     speedTrap: '../bower_components/speed-trap/dist/speed-trap',
     md5: '../bower_components/JavaScript-MD5/js/md5'
   },
+  packages: [
+    { name: 'draggable',
+      location: '../bower_components/jquery-ui/ui',
+      main: 'draggable'
+    }
+  ],
   shim: {
     underscore: {
       exports: '_'

diff --git a/app/scripts/views/settings/avatar_change.js b/app/scripts/views/settings/avatar_change.js
@@ -5,111 +5,111 @@
 'use strict';
 
 define([
-  'jquery',
-  'underscore',
-  'views/form',
-  'stache!templates/settings/avatar_change',
-  'lib/session',
-  'lib/auth-errors'
-],
-function ($, _, FormView, Template, Session, AuthErrors) {
-
-  // a blank 1x1 png
-  var pngSrc = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAAAAAA6fptVAAAACklEQVQYV2P4DwABAQEAWk1v8QAAAABJRU5ErkJggg==';
-
-  var View = FormView.extend({
-    // user must be authenticated to see Settings
-    mustAuth: true,
-
-    template: Template,
-    className: 'avatar_change',
-
-    events: {
-      'click #file': 'filePicker',
-      'click .remove': 'remove',
-      'change #imageLoader': 'fileSet'
-    },
-
-    initialize: function () {
-      Session.clear('cropImgWidth');
-      Session.clear('cropImgHeight');
-      // override in tests
-      this.FileReader = FileReader;
-    },
-
-    afterRender: function () {
-      var wrapper = $('<div/>').css({ height: 0, width: 0, 'overflow': 'hidden' });
-      this.$(':file').wrap(wrapper);
-    },
-
-    context: function () {
-      return {
-        avatar: Session.avatar
-      };
-    },
-
-    remove: function () {
-      Session.clear('avatar');
-      this.navigate('settings/avatar');
-    },
-
-    filePicker: function () {
-      // skip the file picker if this is an automater browser
-      if (this.automatedBrowser) {
+    'jquery',
+    'underscore',
+    'views/form',
+    'stache!templates/settings/avatar_change',
+    'lib/session',
+    'lib/auth-errors'
+  ],
+  function ($, _, FormView, Template, Session, AuthErrors) {
+
+    // a blank 1x1 png
+    var pngSrc = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAAAAAA6fptVAAAACklEQVQYV2P4DwABAQEAWk1v8QAAAABJRU5ErkJggg==';
+
+    var View = FormView.extend({
+      // user must be authenticated to see Settings
+      mustAuth: true,
+
+      template: Template,
+      className: 'avatar_change',
+
+      events: {
+        'click #file': 'filePicker',
+        'click .remove': 'remove',
+        'change #imageLoader': 'fileSet'
+      },
+
+      initialize: function () {
+        Session.clear('cropImgWidth');
+        Session.clear('cropImgHeight');
+        // override in tests
+        this.FileReader = FileReader;
+      },
+
+      afterRender: function () {
+        var wrapper = $('<div/>').css({ height: 0, width: 0, 'overflow': 'hidden' });
+        this.$(':file').wrap(wrapper);
+      },
+
+      context: function () {
+        return {
+          avatar: Session.avatar
+        };
+      },
+
+      remove: function () {
+        Session.clear('avatar');
+        this.navigate('settings/avatar');
+      },
+
+      filePicker: function () {
+        // skip the file picker if this is an automater browser
+        if (this.automatedBrowser) {
+          var self = this;
+          require(['draggable'], function (ui) {
+            Session.set('cropImgSrc', pngSrc);
+            Session.set('cropImgWidth', 1);
+            Session.set('cropImgHeight', 1);
+
+            self.navigate('settings/avatar/crop');
+          });
+          return;
+        }
+        this.$('#imageLoader').click();
+      },
+
+      fileSet: function (e) {
         var self = this;
-        require(['../bower_components/jquery-ui/ui/draggable'], function (ui) {
-          Session.set('cropImgSrc', pngSrc);
-          Session.set('cropImgWidth', 1);
-          Session.set('cropImgHeight', 1);
-
-          self.navigate('settings/avatar/crop');
-        });
-        return;
-      }
-      this.$('#imageLoader').click();
-    },
-
-    fileSet: function (e) {
-      var self = this;
-      var file = e.target.files[0];
-
-      // Define our callbacks here to avoid a circular DOM reference
-      var imgOnload = function () {
-        // Store the width and height for the cropper view
-        Session.set('cropImgWidth', this.width);
-        Session.set('cropImgHeight', this.height);
-        require(['../bower_components/jquery-ui/ui/draggable'], function () {
-          self.navigate('settings/avatar/crop');
-        });
-      };
-
-      var imgOnerrer = function () {
-        self.navigate('settings/avatar', {
-          error: AuthErrors.toMessage('UNUSABLE_IMAGE')
-        });
-      };
-
-      if (file.type.match('image.*')) {
-        var reader = new self.FileReader();
-
-        reader.onload = function (event) {
-          var src = event.target.result;
-
-          Session.set('cropImgSrc', src);
-
-          var img = new Image();
-          img.src = src;
-          img.onload = imgOnload;
-          img.onerror = imgOnerrer;
+        var file = e.target.files[0];
+
+        // Define our callbacks here to avoid a circular DOM reference
+        var imgOnload = function () {
+          // Store the width and height for the cropper view
+          Session.set('cropImgWidth', this.width);
+          Session.set('cropImgHeight', this.height);
+          require(['draggable'], function () {
+            self.navigate('settings/avatar/crop');
+          });
+        };
+
+        var imgOnerrer = function () {
+          self.navigate('settings/avatar', {
+            error: AuthErrors.toMessage('UNUSABLE_IMAGE')
+          });
         };
-        reader.readAsDataURL(file);
-      } else {
-        self.navigate('settings/avatar', {
-          error: AuthErrors.toMessage('UNUSABLE_IMAGE')
-        });
+
+        if (file.type.match('image.*')) {
+          var reader = new self.FileReader();
+
+          reader.onload = function (event) {
+            var src = event.target.result;
+
+            Session.set('cropImgSrc', src);
+
+            var img = new Image();
+            img.src = src;
+            img.onload = imgOnload;
+            img.onerror = imgOnerrer;
+          };
+          reader.readAsDataURL(file);
+        } else {
+          self.navigate('settings/avatar', {
+            error: AuthErrors.toMessage('UNUSABLE_IMAGE')
+          });
+        }
       }
-    }
-  });
+    });
 
-  return View;
-});
+    return View;
+  });
diff --git a/grunttasks/requirejs.js b/grunttasks/requirejs.js
@@ -20,6 +20,7 @@ module.exports = function (grunt) {
         out: '<%= yeoman.tmp %>/scripts/main.js',
         mainConfigFile: '<%= yeoman.app %>/scripts/require_config.js',
         keepBuildDir: true,
+        findNestedDependencies: true,
         // TODO: (Issue #560) Figure out how to make sourcemaps work with grunt-usemin
         // https://github.com/yeoman/grunt-usemin/issues/30
         //generateSourceMaps: true,

diff --git a/grunttasks/uglify.js b/grunttasks/uglify.js
@@ -18,12 +18,6 @@ module.exports = function (grunt) {
           cwd: '<%= yeoman.tmp %>/scripts',
           src: ['**/*.js'],
           dest: '<%= yeoman.dist %>/scripts'
-        },
-        {
-          expand: true,
-          cwd: '<%= yeoman.app %>/bower_components/jquery-ui',
-          src: ['**/*.js'],
-          dest: '<%= yeoman.dist %>/bower_components/jquery-ui'
         }
       ]
     }