Refactor js

pygal/css/graph.css

@@ -114,7 +114,7 @@ svg * {
 }
 
 .reactive.active {
-  fill-opacity:  {{ fill_opacity_hover }};
+  fill-opacity:  {{ style.opacity_hover }};
 }
 
 .series text {

pygal/js/graph.coffee

@@ -15,43 +15,35 @@ rm_class = (e, class_name) ->
             cn.splice(i, 1)
     e.setAttribute('class', cn.join(' '))
 
+activate = (elements...) ->
+    for element in elements
+        add_class(element, 'active')
 
-@svg_load = ->
+deactivate = (elements...) ->
-    for element in _('.reactive-text')
+    for element in elements
-        element.addEventListener('mouseover', ((e) ->
+        rm_class(element, 'active')
-            ->
+
-                add_class(e, 'active')
+reactive = (element) -> document.getElementById('re' + element.id)
-                add_class(document.getElementById(e.id.replace(/re/, '')), 'active')
+active = (element) -> document.getElementById(element.id.replace(/re/, ''))
-        )(element), false)
+
-        element.addEventListener('mouseout', ((e) ->
+hover = (elts, over, out) ->
-            ->
+    for elt in elts
-                rm_class(e, 'active')
+        elt.addEventListener('mouseover',
-                rm_class(document.getElementById(e.id.replace(/re/, '')), 'active')
+            ((elt) -> (-> over.call(elt)))(elt)
-        )(element), false)
+        , false)
-    for element in _('.reactive')
+        elt.addEventListener('mouseout',
-        element.addEventListener('mouseover', ((e) ->
+            ((elt) -> (-> out.call(elt)))(elt)
-            ->
+        , false)
-                add_class(e, 'active')
-                add_class(document.getElementById('re' + e.id), 'active')
-        )(element), false)
-        element.addEventListener('mouseout', ((e) ->
-            ->
-                rm_class(e, 'active')
-                rm_class(document.getElementById('re' + e.id), 'active')
-        )(element), false)
 
-    for element in _('.activate-serie')
+@svg_load = ->
-       element.addEventListener('mouseover', ((e) ->
+    hover _('.reactive-text'), (-> activate(@, active(@))), (-> deactivate(@, active(@)))
+    hover _('.reactive'), (-> activate(@, reactive(@))), (-> deactivate(@, reactive(@)))
+    hover _('.activate-serie'), (
         ->
-                num = e.id.replace('activate-serie-', '')
+            num = this.id.replace('activate-serie-', '')
             for element in _('.serie-' + num + ' .reactive')
-                    add_class(element, 'active')
+                activate(element, reactive(element))), (
-                    add_class(document.getElementById('re' + element.id), 'active')
-        )(element), false)
-        element.addEventListener('mouseout', ((e) ->
         ->
-                num = e.id.replace('activate-serie-', '')
+            num = this.id.replace('activate-serie-', '')
             for element in _('.serie-' + num + ' .reactive')
-                    rm_class(element, 'active')
+                deactivate(element, reactive(element)))
-                    rm_class(document.getElementById('re' + element.id), 'active')
-        )(element), false)

pygal/js/graph.js

@@ -1,7 +1,8 @@
 // Generated by CoffeeScript 1.2.1-pre
 (function() {
-  var add_class, rm_class, _,
+  var activate, active, add_class, deactivate, hover, reactive, rm_class, _,
-    __indexOf = [].indexOf || function(item) { for (var i = 0, l = this.length; i < l; i++) { if (i in this && this[i] === item) return i; } return -1; };
+    __indexOf = [].indexOf || function(item) { for (var i = 0, l = this.length; i < l; i++) { if (i in this && this[i] === item) return i; } return -1; },
+    __slice = [].slice;
 
   _ = function(x) {
     return document.querySelectorAll(x);
@@ -26,74 +27,87 @@
     return e.setAttribute('class', cn.join(' '));
   };
 
-  this.svg_load = function() {
+  activate = function() {
-    var element, _i, _j, _k, _len, _len2, _len3, _ref, _ref2, _ref3, _results;
+    var element, elements, _i, _len, _results;
-    _ref = _('.reactive-text');
+    elements = 1 <= arguments.length ? __slice.call(arguments, 0) : [];
-    for (_i = 0, _len = _ref.length; _i < _len; _i++) {
+    _results = [];
-      element = _ref[_i];
+    for (_i = 0, _len = elements.length; _i < _len; _i++) {
-      element.addEventListener('mouseover', (function(e) {
+      element = elements[_i];
-        return function() {
+      _results.push(add_class(element, 'active'));
-          add_class(e, 'active');
+    }
-          return add_class(document.getElementById(e.id.replace(/re/, '')), 'active');
+    return _results;
-        };
-      })(element), false);
-      element.addEventListener('mouseout', (function(e) {
-        return function() {
-          rm_class(e, 'active');
-          return rm_class(document.getElementById(e.id.replace(/re/, '')), 'active');
   };
-      })(element), false);
+
+  deactivate = function() {
+    var element, elements, _i, _len, _results;
+    elements = 1 <= arguments.length ? __slice.call(arguments, 0) : [];
+    _results = [];
+    for (_i = 0, _len = elements.length; _i < _len; _i++) {
+      element = elements[_i];
+      _results.push(rm_class(element, 'active'));
     }
-    _ref2 = _('.reactive');
+    return _results;
-    for (_j = 0, _len2 = _ref2.length; _j < _len2; _j++) {
-      element = _ref2[_j];
-      element.addEventListener('mouseover', (function(e) {
-        return function() {
-          add_class(e, 'active');
-          return add_class(document.getElementById('re' + e.id), 'active');
   };
-      })(element), false);
+
-      element.addEventListener('mouseout', (function(e) {
+  reactive = function(element) {
-        return function() {
+    return document.getElementById('re' + element.id);
-          rm_class(e, 'active');
-          return rm_class(document.getElementById('re' + e.id), 'active');
   };
-      })(element), false);
+
-    }
+  active = function(element) {
-    _ref3 = _('.activate-serie');
+    return document.getElementById(element.id.replace(/re/, ''));
+  };
+
+  hover = function(elts, over, out) {
+    var elt, _i, _len, _results;
     _results = [];
-    for (_k = 0, _len3 = _ref3.length; _k < _len3; _k++) {
+    for (_i = 0, _len = elts.length; _i < _len; _i++) {
-      element = _ref3[_k];
+      elt = elts[_i];
-      element.addEventListener('mouseover', (function(e) {
+      elt.addEventListener('mouseover', (function(elt) {
         return function() {
-          var element, num, _l, _len4, _ref4, _results2;
+          return over.call(elt);
-          num = e.id.replace('activate-serie-', '');
-          _ref4 = _('.serie-' + num + ' .reactive');
-          _results2 = [];
-          for (_l = 0, _len4 = _ref4.length; _l < _len4; _l++) {
-            element = _ref4[_l];
-            add_class(element, 'active');
-            _results2.push(add_class(document.getElementById('re' + element.id), 'active'));
-          }
-          return _results2;
         };
-      })(element), false);
+      })(elt), false);
-      _results.push(element.addEventListener('mouseout', (function(e) {
+      _results.push(elt.addEventListener('mouseout', (function(elt) {
         return function() {
-          var element, num, _l, _len4, _ref4, _results2;
+          return out.call(elt);
-          num = e.id.replace('activate-serie-', '');
+        };
-          _ref4 = _('.serie-' + num + ' .reactive');
+      })(elt), false));
-          _results2 = [];
-          for (_l = 0, _len4 = _ref4.length; _l < _len4; _l++) {
-            element = _ref4[_l];
-            rm_class(element, 'active');
-            _results2.push(rm_class(document.getElementById('re' + element.id), 'active'));
     }
-          return _results2;
+    return _results;
   };
-      })(element), false));
+
+  this.svg_load = function() {
+    hover(_('.reactive-text'), (function() {
+      return activate(this, active(this));
+    }), (function() {
+      return deactivate(this, active(this));
+    }));
+    hover(_('.reactive'), (function() {
+      return activate(this, reactive(this));
+    }), (function() {
+      return deactivate(this, reactive(this));
+    }));
+    return hover(_('.activate-serie'), (function() {
+      var element, num, _i, _len, _ref, _results;
+      num = this.id.replace('activate-serie-', '');
+      _ref = _('.serie-' + num + ' .reactive');
+      _results = [];
+      for (_i = 0, _len = _ref.length; _i < _len; _i++) {
+        element = _ref[_i];
+        _results.push(activate(element, reactive(element)));
+      }
+      return _results;
+    }), (function() {
+      var element, num, _i, _len, _ref, _results;
+      num = this.id.replace('activate-serie-', '');
+      _ref = _('.serie-' + num + ' .reactive');
+      _results = [];
+      for (_i = 0, _len = _ref.length; _i < _len; _i++) {
+        element = _ref[_i];
+        _results.push(deactivate(element, reactive(element)));
       }
       return _results;
+    }));
   };
 
 }).call(this);

pygal/svg.py

@@ -54,9 +54,9 @@ class Svg(object):
                 font_sizes=self.graph.font_sizes,
                 hidden='y' if self.graph._horizontal else 'x',
                 fill_opacity=self.graph.style.opacity
-                if self.graph.fill else 0,
+                if self.graph.fill else .4,
                 fill_opacity_hover=self.graph.style.opacity_hover
-                if self.graph.fill else 0)
+                if self.graph.fill else .6)
             style.text = templ.decode('utf-8')
 
     def add_script(self, js):