Async-load google jsapi and handle its nonexistence

Some users block google for analytics apis and such, so we need to handle
whenever the lib isn't available by just not drawing charts.

Closes #34

Author: alexcrichton

app/controllers/crate/index.js

@@ -131,14 +131,20 @@ export default Ember.ObjectController.extend({
                 }
                 data.push(row);
             }
-            data = google.visualization.arrayToDataTable(data);
-
-            var fmt = new google.visualization.DateFormat({
-                pattern: 'LLL d, yyyy',
-            });
-            fmt.format(data, 0);
 
             var drawChart = function() {
+                if (!window.google || !window.googleChartsLoaded) {
+                    Ember.$('.graph').hide();
+                    return;
+                } else {
+                    Ember.$('.graph').show();
+                }
+                data = google.visualization.arrayToDataTable(data);
+
+                var fmt = new google.visualization.DateFormat({
+                    pattern: 'LLL d, yyyy',
+                });
+                fmt.format(data, 0);
                 var el = document.getElementById('graph-data');
                 if (!el) {
                     return;
@@ -159,6 +165,8 @@ export default Ember.ObjectController.extend({
             Ember.run.scheduleOnce('afterRender', this, drawChart);
             Ember.$(window).off('resize.chart');
             Ember.$(window).on('resize.chart', drawChart);
+            Ember.$(document).off('googleChartsLoaded');
+            Ember.$(document).on('googleChartsLoaded', drawChart);
         },
     },
 });

app/index.html

@@ -19,10 +19,8 @@
       window.EmberENV = {{EMBER_ENV}};
     </script>
     <script src="assets/vendor.js"></script>
-    <script type="text/javascript" src="https://www.google.com/jsapi"></script>
     <script src="assets/cargo.js"></script>
     <script>
-        google.load('visualization', '1.0', {'packages':['corechart']});
         window.Cargo = require('cargo/app')['default'].create({{APP_CONFIG}});
     </script>
   </body>

app/initializers/google.js

@@ -0,0 +1,19 @@
+import Ember from 'ember';
+
+export var initialize = function() {
+    Ember.$.getScript('https://www.google.com/jsapi', function() {
+        google.load('visualization', '1.0', {
+            'packages': ['corechart'],
+            'callback': function() {
+                window.googleChartsLoaded = true;
+                Ember.$(document).trigger('googleChartsLoaded');
+            }
+        });
+    });
+};
+
+export default {
+    name: 'google',
+
+    initialize: initialize
+};

app/routes/application.js

@@ -4,18 +4,14 @@ import ajax from 'ic-ajax';
 export default Ember.Route.extend({
     beforeModel: function() {
         var self = this;
-        console.log('index route', this.session.get('isLoggedIn'),
-                    this.session.get('currentUser'));
         if (this.session.get('isLoggedIn') &&
             this.session.get('currentUser') === null)
         {
             return ajax('/me').then(function(response) {
-                console.log('good', response);
                 var user = self.store.push('user', response.user);
                 user.set('api_token', response.api_token);
                 self.session.set('currentUser', user);
             }).catch(function() {
-                console.log('bad');
                 self.session.logoutUser();
             });
         }

app/routes/login.js

@@ -15,7 +15,6 @@ export default Ember.Route.extend({
             if (!win.closed) { return; }
             window.clearInterval(oauthInterval);
             var response = JSON.parse(localStorage.github_response);
-            console.log('loging response', response);
 
             if (!response.ok) {
                 self.controllerFor('application').set('flashError',

app/services/session.js

@@ -8,21 +8,18 @@ export default Ember.Object.extend({
     init: function() {
         this.set('isLoggedIn', localStorage.getItem('isLoggedIn') === '1');
         this.set('currentUser', null);
-        console.log('session-init', this.get('isLoggedIn'));
     },
 
     loginUser: function(user) {
         this.set('isLoggedIn', true);
         this.set('currentUser', user);
         localStorage.setItem('isLoggedIn', '1');
-        console.log('session-login', this.get('isLoggedIn'));
     },
 
     logoutUser: function() {
         this.set('savedTransition', null);
         this.set('isLoggedIn', null);
         this.set('currentUser', null);
         localStorage.removeItem('isLoggedIn');
-        console.log('session-logout', this.get('isLoggedIn'));
     },
 });