Browse Source

Refactor js

pull/8/head
Florian Mounier 13 years ago
parent
commit
25f2458d83
  1. 2
      pygal/css/graph.css
  2. 60
      pygal/js/graph.coffee
  3. 130
      pygal/js/graph.js
  4. 4
      pygal/svg.py

2
pygal/css/graph.css

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

60
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/, ''))
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)
for element in _('.activate-serie')
element.addEventListener('mouseover', ((e) ->
@svg_load = ->
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')
add_class(document.getElementById('re' + element.id), 'active')
)(element), false)
element.addEventListener('mouseout', ((e) ->
activate(element, reactive(element))), (
->
num = e.id.replace('activate-serie-', '')
num = this.id.replace('activate-serie-', '')
for element in _('.serie-' + num + ' .reactive')
rm_class(element, 'active')
rm_class(document.getElementById('re' + element.id), 'active')
)(element), false)
deactivate(element, reactive(element)))

130
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');
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'));
}
return _results;
};
})(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');
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');
return _results;
};
})(element), false);
element.addEventListener('mouseout', (function(e) {
return function() {
rm_class(e, 'active');
return rm_class(document.getElementById('re' + e.id), 'active');
reactive = function(element) {
return document.getElementById('re' + element.id);
};
})(element), false);
}
_ref3 = _('.activate-serie');
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 out.call(elt);
};
})(elt), false));
}
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);

4
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):

Loading…
Cancel
Save