From 25f2458d83d23ef67ec7f07497d3948ed5119324 Mon Sep 17 00:00:00 2001 From: Florian Mounier Date: Thu, 23 Feb 2012 10:17:29 +0100 Subject: [PATCH] Refactor js --- pygal/css/graph.css | 2 +- pygal/js/graph.coffee | 68 ++++++++++----------- pygal/js/graph.js | 136 +++++++++++++++++++++++------------------- pygal/svg.py | 4 +- 4 files changed, 108 insertions(+), 102 deletions(-) diff --git a/pygal/css/graph.css b/pygal/css/graph.css index f92ddee..06fbac5 100644 --- a/pygal/css/graph.css +++ b/pygal/css/graph.css @@ -114,7 +114,7 @@ svg * { } .reactive.active { - fill-opacity: {{ fill_opacity_hover }}; + fill-opacity: {{ style.opacity_hover }}; } .series text { diff --git a/pygal/js/graph.coffee b/pygal/js/graph.coffee index bc62b8f..053c5fa 100644 --- a/pygal/js/graph.coffee +++ b/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 = -> - for element in _('.reactive-text') - element.addEventListener('mouseover', ((e) -> - -> - add_class(e, 'active') - add_class(document.getElementById(e.id.replace(/re/, '')), 'active') - )(element), false) - element.addEventListener('mouseout', ((e) -> - -> - rm_class(e, 'active') - rm_class(document.getElementById(e.id.replace(/re/, '')), 'active') - )(element), false) - for element in _('.reactive') - element.addEventListener('mouseover', ((e) -> - -> - 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) +deactivate = (elements...) -> + for element in elements + rm_class(element, 'active') + +reactive = (element) -> document.getElementById('re' + element.id) +active = (element) -> document.getElementById(element.id.replace(/re/, '')) - for element in _('.activate-serie') - element.addEventListener('mouseover', ((e) -> - -> - num = e.id.replace('activate-serie-', '') - for element in _('.serie-' + num + ' .reactive') - add_class(element, 'active') - add_class(document.getElementById('re' + element.id), 'active') - )(element), false) - element.addEventListener('mouseout', ((e) -> - -> - num = e.id.replace('activate-serie-', '') - for element in _('.serie-' + num + ' .reactive') - rm_class(element, 'active') - rm_class(document.getElementById('re' + element.id), 'active') - )(element), false) +hover = (elts, over, out) -> + for elt in elts + elt.addEventListener('mouseover', + ((elt) -> (-> over.call(elt)))(elt) + , false) + elt.addEventListener('mouseout', + ((elt) -> (-> out.call(elt)))(elt) + , false) + +@svg_load = -> + hover _('.reactive-text'), (-> activate(@, active(@))), (-> deactivate(@, active(@))) + hover _('.reactive'), (-> activate(@, reactive(@))), (-> deactivate(@, reactive(@))) + hover _('.activate-serie'), ( + -> + num = this.id.replace('activate-serie-', '') + for element in _('.serie-' + num + ' .reactive') + activate(element, reactive(element))), ( + -> + num = this.id.replace('activate-serie-', '') + for element in _('.serie-' + num + ' .reactive') + deactivate(element, reactive(element))) diff --git a/pygal/js/graph.js b/pygal/js/graph.js index 4c04dee..97cca2e 100644 --- a/pygal/js/graph.js +++ b/pygal/js/graph.js @@ -1,7 +1,8 @@ // Generated by CoffeeScript 1.2.1-pre (function() { - var add_class, 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; }; + 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; }, + __slice = [].slice; _ = function(x) { return document.querySelectorAll(x); @@ -26,74 +27,87 @@ return e.setAttribute('class', cn.join(' ')); }; - this.svg_load = function() { - var element, _i, _j, _k, _len, _len2, _len3, _ref, _ref2, _ref3, _results; - _ref = _('.reactive-text'); - for (_i = 0, _len = _ref.length; _i < _len; _i++) { - element = _ref[_i]; - element.addEventListener('mouseover', (function(e) { - return function() { - add_class(e, 'active'); - return add_class(document.getElementById(e.id.replace(/re/, '')), 'active'); - }; - })(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); + activate = 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(add_class(element, 'active')); } - _ref2 = _('.reactive'); - 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) { - return function() { - rm_class(e, 'active'); - return rm_class(document.getElementById('re' + e.id), 'active'); - }; - })(element), false); + return _results; + }; + + 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')); } - _ref3 = _('.activate-serie'); + return _results; + }; + + reactive = function(element) { + return document.getElementById('re' + element.id); + }; + + active = function(element) { + 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++) { - element = _ref3[_k]; - element.addEventListener('mouseover', (function(e) { + for (_i = 0, _len = elts.length; _i < _len; _i++) { + elt = elts[_i]; + elt.addEventListener('mouseover', (function(elt) { return function() { - var element, num, _l, _len4, _ref4, _results2; - 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; + return over.call(elt); }; - })(element), false); - _results.push(element.addEventListener('mouseout', (function(e) { + })(elt), false); + _results.push(elt.addEventListener('mouseout', (function(elt) { return function() { - var element, num, _l, _len4, _ref4, _results2; - num = e.id.replace('activate-serie-', ''); - _ref4 = _('.serie-' + num + ' .reactive'); - _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 out.call(elt); }; - })(element), false)); + })(elt), false)); } return _results; }; + 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); diff --git a/pygal/svg.py b/pygal/svg.py index 990fd99..70c66e9 100644 --- a/pygal/svg.py +++ b/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):