Simpler animation handling

client/scripts/application.js

@@ -27,8 +27,7 @@
 (function(hscd) {
     'use strict';
 
-    var _custom = '[custom]';
+    var _ctx = { log: [] };
-    var _ctx    = { log: [] };
 
     function onAdjust(name, value) {
         _ctx.query.features[name] = value;
@@ -212,20 +211,13 @@
 
     $(document).on({
         ajaxStart: function() {
-            if (_.has(_ctx, 'grapher')) {
-                _ctx.grapher.enable(false);
-            }
             $('#spinner').show();
         },
 
         ajaxStop: function() {
-            if (_.has(_ctx, 'grapher')) {
-                _ctx.grapher.enable(true);
-            }
             $('#spinner').hide();
         },
 
         ready: onReady()
     });
-
 }(window.hscd = window.hscd || {}));

client/scripts/grapher.js

@@ -91,7 +91,7 @@
         var _width       = 125;
         var _easeTime    = 200;
 
-        var _enabled        = true;
+        var _animation      = null;
         var _canvas         = params.canvas;
         var _data           = params.data;
         var _index          = params.index;
@@ -226,7 +226,15 @@
         }
 
         function animateIndicator(valueOld, valueNew) {
-            Snap.animate(
+            if (valueOld === valueNew) {
+                return;
+            }
+
+            if (_animation !== null) {
+                _animation.stop();
+            }
+
+            _animation = Snap.animate(
                 valueOld,
                 valueNew,
                 function(value) {
@@ -236,6 +244,7 @@
                 mina.linear,
                 function() {
                     updateDensity();
+                    _animation = null;
                 }
             );
         }
@@ -271,7 +280,7 @@
         }
 
         function clicked(event, x, y) {
-            if (_enabled) {
+            if (_animation === null) {
                 var rect = _canvas.node.getBoundingClientRect();
                 updateValue(indicatorToValue(y - rect.top));
             }
@@ -284,10 +293,6 @@
             animateIndicator(_valueAnimated, _data.value);
         };
 
-        this.enable = function(enable) {
-            _enabled = enable;
-        };
-
         createShapes();
     }
 
@@ -373,11 +378,5 @@
                 this.setColumns(_data);
             }
         };
-
-        this.enable = function(enable) {
-            for (var name in _columns) {
-                _columns[name].enable(enable);
-            }
-        };
     };
 }(window.grapher = window.grapher || {}));