Let the chart handle its own loading css

3 files changed, 4 insertions, 12 deletions

diff --git a/assets/css/style.css b/assets/css/style.css
index f1c21ef..561b11e 100644
--- a/assets/css/style.css
+++ b/assets/css/style.css
@@ -20,7 +20,7 @@ p, li, dt, dd, td, th, div {
     font-size: 12px;
 }
 
-.loading {
+.loading .title {
     background-repeat: no-repeat;
     background-position: 0 50%;
     background-image: url(/assets/icons/loading.gif);
diff --git a/index.html b/index.html
index 913dfe4..02e31fe 100644
--- a/index.html
+++ b/index.html
@@ -95,15 +95,6 @@
                     templateFactory('.application-charts'), serialDownloader)
             );
 
-            // Show a loading icon when a chart is being redrawn
-            $('.chart-container').live('chart_loading', function(e) {
-                $(this).find('.title').addClass('loading');
-            });
-
-            $('.chart-container').live('chart_loaded', function(e) {
-                $(this).find('.title').removeClass('loading');
-            });
-
             // Initialise all the charts
             cc.init();
         }
diff --git a/jarmon.js b/jarmon.js
index 0f2db79..077fc70 100644
--- a/jarmon.js
+++ b/jarmon.js
@@ -477,7 +477,8 @@ jarmon.Chart.prototype.draw = function() {
      * @return: A I{MochiKit.Async.Deferred} which calls back with the chart
      *          data when the chart has been rendered.
      **/
-    this.template.trigger('chart_loading');
+    this.template.addClass('loading');
+
     var result;
     var results = [];
     for(var i=0; i<this.data.length; i++) {
@@ -574,7 +575,7 @@ jarmon.Chart.prototype.draw = function() {
                 }, this)
             .addBoth(
                 function(self, res) {
-                    self.template.trigger('chart_loaded');
+                    self.template.removeClass('loading');
                     return res;
                 }, this);
 };