mirror of https://github.com/Kozea/pygal.git
Florian Mounier
13 years ago
10 changed files with 44 additions and 441 deletions
@ -1,149 +0,0 @@ |
|||||||
_ = (x) -> document.querySelectorAll(x) |
|
||||||
__ = (x) -> document.getElementById(x) |
|
||||||
padding = 5 |
|
||||||
tooltip_timeout = 0 |
|
||||||
tooltip_font_size = @config.tooltip_font_size |
|
||||||
anim_steps = @config.animation_steps |
|
||||||
|
|
||||||
class Queue |
|
||||||
constructor: (@delay) -> |
|
||||||
@queue = [] |
|
||||||
@running = false |
|
||||||
|
|
||||||
add: (f, args...) -> |
|
||||||
@queue.push f: f, a: args |
|
||||||
if (!@running) |
|
||||||
@running = true |
|
||||||
@_back() |
|
||||||
|
|
||||||
_run: (f) -> |
|
||||||
if(!f) |
|
||||||
@running = false |
|
||||||
else |
|
||||||
setTimeout (=> |
|
||||||
f.f f.a... |
|
||||||
@_back() |
|
||||||
), @delay |
|
||||||
|
|
||||||
_back: -> |
|
||||||
@_run @queue.shift() |
|
||||||
|
|
||||||
clear: -> |
|
||||||
if @running |
|
||||||
@queue = [] |
|
||||||
@running = false |
|
||||||
|
|
||||||
tooltip_anim_Q = new Queue 1 |
|
||||||
|
|
||||||
has_class = (e, class_name) -> |
|
||||||
return if not e |
|
||||||
cn = e.getAttribute('class').split(' ') |
|
||||||
for cls, i in cn |
|
||||||
if cls == class_name |
|
||||||
return true |
|
||||||
false |
|
||||||
|
|
||||||
add_class = (e, class_name) -> |
|
||||||
return if not e |
|
||||||
cn = e.getAttribute('class').split(' ') |
|
||||||
if not has_class(e, class_name) |
|
||||||
cn.push(class_name) |
|
||||||
e.setAttribute('class', cn.join(' ')) |
|
||||||
|
|
||||||
rm_class = (e, class_name) -> |
|
||||||
return if not e |
|
||||||
cn = e.getAttribute('class').split(' ') |
|
||||||
for cls, i in cn |
|
||||||
if cls == class_name |
|
||||||
cn.splice(i, 1) |
|
||||||
e.setAttribute('class', cn.join(' ')) |
|
||||||
|
|
||||||
width = (e) -> (e.getBBox() and e.getBBox().width) or e.offsetWidth |
|
||||||
height = (e) -> (e.getBBox() and e.getBBox().height) or e.offsetHeight |
|
||||||
|
|
||||||
svg = (tag) -> document.createElementNS('http://www.w3.org/2000/svg', tag) |
|
||||||
|
|
||||||
activate = (elements...) -> |
|
||||||
for element in elements |
|
||||||
add_class(element, 'active') |
|
||||||
|
|
||||||
deactivate = (elements...) -> |
|
||||||
for element in elements |
|
||||||
rm_class(element, 'active') |
|
||||||
|
|
||||||
Function.prototype.bind = (scope) -> |
|
||||||
_fun = @ |
|
||||||
-> _fun.apply(scope, arguments) |
|
||||||
|
|
||||||
hover = (elts, over, out) -> |
|
||||||
for elt in elts |
|
||||||
elt.addEventListener('mouseover', over.bind(elt) , false) |
|
||||||
elt.addEventListener('mouseout', out.bind(elt) , false) |
|
||||||
|
|
||||||
tooltip = (elt) -> |
|
||||||
tooltip_anim_Q.clear() |
|
||||||
clearTimeout(tooltip_timeout) |
|
||||||
_tooltip = __('tooltip') |
|
||||||
_tooltip.setAttribute('display', 'inline') |
|
||||||
_text = _tooltip.getElementsByTagName('text')[0] |
|
||||||
_rect = _tooltip.getElementsByTagName('rect')[0] |
|
||||||
value = elt.nextElementSibling |
|
||||||
_text.textContent = value.textContent |
|
||||||
w = width(_text) + 2 * padding |
|
||||||
h = height(_text) + 2 * padding |
|
||||||
_rect.setAttribute('width', w) |
|
||||||
_rect.setAttribute('height', h) |
|
||||||
_text.setAttribute('x', padding) |
|
||||||
_text.setAttribute('y', padding + tooltip_font_size) |
|
||||||
x_elt = value.nextElementSibling |
|
||||||
y_elt = x_elt.nextElementSibling |
|
||||||
x = parseInt(x_elt.textContent) |
|
||||||
if has_class(x_elt, 'centered') |
|
||||||
x -= w / 2 |
|
||||||
else if has_class(x_elt, 'left') |
|
||||||
x -= w |
|
||||||
|
|
||||||
y = parseInt(y_elt.textContent) |
|
||||||
if has_class(y_elt, 'centered') |
|
||||||
y -= h / 2 |
|
||||||
else if has_class(y_elt, 'top') |
|
||||||
y -= h |
|
||||||
|
|
||||||
[current_x, current_y] = (parseInt(s) for s in _tooltip.getAttribute('transform').replace('translate(', '').replace(')', '').split ' ') |
|
||||||
return if current_x == x and current_y == y |
|
||||||
if anim_steps |
|
||||||
x_step = (x - current_x) / (anim_steps + 1) |
|
||||||
y_step = (y - current_y) / (anim_steps + 1) |
|
||||||
anim_x = current_x |
|
||||||
anim_y = current_y |
|
||||||
for i in [0..anim_steps] |
|
||||||
anim_x += x_step |
|
||||||
anim_y += y_step |
|
||||||
tooltip_anim_Q.add ((_x, _y) -> |
|
||||||
_tooltip.setAttribute('transform', "translate(#{_x} #{_y})")), anim_x, anim_y |
|
||||||
tooltip_anim_Q.add -> _tooltip.setAttribute('transform', "translate(#{x} #{y})") |
|
||||||
else |
|
||||||
_tooltip.setAttribute('transform', "translate(#{x} #{y})") |
|
||||||
|
|
||||||
untooltip = -> |
|
||||||
tooltip_timeout = setTimeout (-> |
|
||||||
__('tooltip').setAttribute('display', 'none')), 1000 |
|
||||||
|
|
||||||
@svg_load = -> |
|
||||||
for text in _('.text-overlay .series') |
|
||||||
text.setAttribute('display', 'none') |
|
||||||
hover _('.reactive'), (-> activate(@)), (-> deactivate(@)) |
|
||||||
hover _('.activate-serie'), ( |
|
||||||
-> |
|
||||||
num = this.id.replace('activate-serie-', '') |
|
||||||
for element in _('.text-overlay .serie-' + num) |
|
||||||
element.setAttribute('display', 'inline') |
|
||||||
for element in _('.serie-' + num + ' .reactive') |
|
||||||
activate(element)), ( |
|
||||||
-> |
|
||||||
num = this.id.replace('activate-serie-', '') |
|
||||||
for element in _('.text-overlay .serie-' + num) |
|
||||||
element.setAttribute('display', 'none') |
|
||||||
for element in _('.serie-' + num + ' .reactive') |
|
||||||
deactivate(element)) |
|
||||||
hover _('.tooltip-trigger'), (-> tooltip(@)), (-> untooltip()) |
|
||||||
@ -1,274 +0,0 @@ |
|||||||
// Generated by CoffeeScript 1.2.1-pre
|
|
||||||
(function() { |
|
||||||
var Queue, activate, add_class, anim_steps, deactivate, has_class, height, hover, padding, rm_class, svg, tooltip, tooltip_anim_Q, tooltip_font_size, tooltip_timeout, untooltip, width, _, __, |
|
||||||
__slice = [].slice; |
|
||||||
|
|
||||||
_ = function(x) { |
|
||||||
return document.querySelectorAll(x); |
|
||||||
}; |
|
||||||
|
|
||||||
__ = function(x) { |
|
||||||
return document.getElementById(x); |
|
||||||
}; |
|
||||||
|
|
||||||
padding = 5; |
|
||||||
|
|
||||||
tooltip_timeout = 0; |
|
||||||
|
|
||||||
tooltip_font_size = this.config.tooltip_font_size; |
|
||||||
|
|
||||||
anim_steps = this.config.animation_steps; |
|
||||||
|
|
||||||
Queue = (function() { |
|
||||||
|
|
||||||
Queue.name = 'Queue'; |
|
||||||
|
|
||||||
function Queue(delay) { |
|
||||||
this.delay = delay; |
|
||||||
this.queue = []; |
|
||||||
this.running = false; |
|
||||||
} |
|
||||||
|
|
||||||
Queue.prototype.add = function() { |
|
||||||
var args, f; |
|
||||||
f = arguments[0], args = 2 <= arguments.length ? __slice.call(arguments, 1) : []; |
|
||||||
this.queue.push({ |
|
||||||
f: f, |
|
||||||
a: args |
|
||||||
}); |
|
||||||
if (!this.running) { |
|
||||||
this.running = true; |
|
||||||
return this._back(); |
|
||||||
} |
|
||||||
}; |
|
||||||
|
|
||||||
Queue.prototype._run = function(f) { |
|
||||||
var _this = this; |
|
||||||
if (!f) { |
|
||||||
return this.running = false; |
|
||||||
} else { |
|
||||||
return setTimeout((function() { |
|
||||||
f.f.apply(f, f.a); |
|
||||||
return _this._back(); |
|
||||||
}), this.delay); |
|
||||||
} |
|
||||||
}; |
|
||||||
|
|
||||||
Queue.prototype._back = function() { |
|
||||||
return this._run(this.queue.shift()); |
|
||||||
}; |
|
||||||
|
|
||||||
Queue.prototype.clear = function() { |
|
||||||
if (this.running) { |
|
||||||
this.queue = []; |
|
||||||
return this.running = false; |
|
||||||
} |
|
||||||
}; |
|
||||||
|
|
||||||
return Queue; |
|
||||||
|
|
||||||
})(); |
|
||||||
|
|
||||||
tooltip_anim_Q = new Queue(1); |
|
||||||
|
|
||||||
has_class = function(e, class_name) { |
|
||||||
var cls, cn, i, _i, _len; |
|
||||||
if (!e) return; |
|
||||||
cn = e.getAttribute('class').split(' '); |
|
||||||
for (i = _i = 0, _len = cn.length; _i < _len; i = ++_i) { |
|
||||||
cls = cn[i]; |
|
||||||
if (cls === class_name) return true; |
|
||||||
} |
|
||||||
return false; |
|
||||||
}; |
|
||||||
|
|
||||||
add_class = function(e, class_name) { |
|
||||||
var cn; |
|
||||||
if (!e) return; |
|
||||||
cn = e.getAttribute('class').split(' '); |
|
||||||
if (!has_class(e, class_name)) cn.push(class_name); |
|
||||||
return e.setAttribute('class', cn.join(' ')); |
|
||||||
}; |
|
||||||
|
|
||||||
rm_class = function(e, class_name) { |
|
||||||
var cls, cn, i, _i, _len; |
|
||||||
if (!e) return; |
|
||||||
cn = e.getAttribute('class').split(' '); |
|
||||||
for (i = _i = 0, _len = cn.length; _i < _len; i = ++_i) { |
|
||||||
cls = cn[i]; |
|
||||||
if (cls === class_name) cn.splice(i, 1); |
|
||||||
} |
|
||||||
return e.setAttribute('class', cn.join(' ')); |
|
||||||
}; |
|
||||||
|
|
||||||
width = function(e) { |
|
||||||
return (e.getBBox() && e.getBBox().width) || e.offsetWidth; |
|
||||||
}; |
|
||||||
|
|
||||||
height = function(e) { |
|
||||||
return (e.getBBox() && e.getBBox().height) || e.offsetHeight; |
|
||||||
}; |
|
||||||
|
|
||||||
svg = function(tag) { |
|
||||||
return document.createElementNS('http://www.w3.org/2000/svg', tag); |
|
||||||
}; |
|
||||||
|
|
||||||
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; |
|
||||||
}; |
|
||||||
|
|
||||||
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')); |
|
||||||
} |
|
||||||
return _results; |
|
||||||
}; |
|
||||||
|
|
||||||
Function.prototype.bind = function(scope) { |
|
||||||
var _fun; |
|
||||||
_fun = this; |
|
||||||
return function() { |
|
||||||
return _fun.apply(scope, arguments); |
|
||||||
}; |
|
||||||
}; |
|
||||||
|
|
||||||
hover = function(elts, over, out) { |
|
||||||
var elt, _i, _len, _results; |
|
||||||
_results = []; |
|
||||||
for (_i = 0, _len = elts.length; _i < _len; _i++) { |
|
||||||
elt = elts[_i]; |
|
||||||
elt.addEventListener('mouseover', over.bind(elt), false); |
|
||||||
_results.push(elt.addEventListener('mouseout', out.bind(elt), false)); |
|
||||||
} |
|
||||||
return _results; |
|
||||||
}; |
|
||||||
|
|
||||||
tooltip = function(elt) { |
|
||||||
var anim_x, anim_y, current_x, current_y, h, i, s, value, w, x, x_elt, x_step, y, y_elt, y_step, _i, _rect, _ref, _text, _tooltip; |
|
||||||
tooltip_anim_Q.clear(); |
|
||||||
clearTimeout(tooltip_timeout); |
|
||||||
_tooltip = __('tooltip'); |
|
||||||
_tooltip.setAttribute('display', 'inline'); |
|
||||||
_text = _tooltip.getElementsByTagName('text')[0]; |
|
||||||
_rect = _tooltip.getElementsByTagName('rect')[0]; |
|
||||||
value = elt.nextElementSibling; |
|
||||||
_text.textContent = value.textContent; |
|
||||||
w = width(_text) + 2 * padding; |
|
||||||
h = height(_text) + 2 * padding; |
|
||||||
_rect.setAttribute('width', w); |
|
||||||
_rect.setAttribute('height', h); |
|
||||||
_text.setAttribute('x', padding); |
|
||||||
_text.setAttribute('y', padding + tooltip_font_size); |
|
||||||
x_elt = value.nextElementSibling; |
|
||||||
y_elt = x_elt.nextElementSibling; |
|
||||||
x = parseInt(x_elt.textContent); |
|
||||||
if (has_class(x_elt, 'centered')) { |
|
||||||
x -= w / 2; |
|
||||||
} else if (has_class(x_elt, 'left')) { |
|
||||||
x -= w; |
|
||||||
} |
|
||||||
y = parseInt(y_elt.textContent); |
|
||||||
if (has_class(y_elt, 'centered')) { |
|
||||||
y -= h / 2; |
|
||||||
} else if (has_class(y_elt, 'top')) { |
|
||||||
y -= h; |
|
||||||
} |
|
||||||
_ref = (function() { |
|
||||||
var _i, _len, _ref, _results; |
|
||||||
_ref = _tooltip.getAttribute('transform').replace('translate(', '').replace(')', '').split(' '); |
|
||||||
_results = []; |
|
||||||
for (_i = 0, _len = _ref.length; _i < _len; _i++) { |
|
||||||
s = _ref[_i]; |
|
||||||
_results.push(parseInt(s)); |
|
||||||
} |
|
||||||
return _results; |
|
||||||
})(), current_x = _ref[0], current_y = _ref[1]; |
|
||||||
if (current_x === x && current_y === y) return; |
|
||||||
if (anim_steps) { |
|
||||||
x_step = (x - current_x) / (anim_steps + 1); |
|
||||||
y_step = (y - current_y) / (anim_steps + 1); |
|
||||||
anim_x = current_x; |
|
||||||
anim_y = current_y; |
|
||||||
for (i = _i = 0; 0 <= anim_steps ? _i <= anim_steps : _i >= anim_steps; i = 0 <= anim_steps ? ++_i : --_i) { |
|
||||||
anim_x += x_step; |
|
||||||
anim_y += y_step; |
|
||||||
tooltip_anim_Q.add((function(_x, _y) { |
|
||||||
return _tooltip.setAttribute('transform', "translate(" + _x + " " + _y + ")"); |
|
||||||
}), anim_x, anim_y); |
|
||||||
} |
|
||||||
return tooltip_anim_Q.add(function() { |
|
||||||
return _tooltip.setAttribute('transform', "translate(" + x + " " + y + ")"); |
|
||||||
}); |
|
||||||
} else { |
|
||||||
return _tooltip.setAttribute('transform', "translate(" + x + " " + y + ")"); |
|
||||||
} |
|
||||||
}; |
|
||||||
|
|
||||||
untooltip = function() { |
|
||||||
return tooltip_timeout = setTimeout((function() { |
|
||||||
return __('tooltip').setAttribute('display', 'none'); |
|
||||||
}), 1000); |
|
||||||
}; |
|
||||||
|
|
||||||
this.svg_load = function() { |
|
||||||
var text, _i, _len, _ref; |
|
||||||
_ref = _('.text-overlay .series'); |
|
||||||
for (_i = 0, _len = _ref.length; _i < _len; _i++) { |
|
||||||
text = _ref[_i]; |
|
||||||
text.setAttribute('display', 'none'); |
|
||||||
} |
|
||||||
hover(_('.reactive'), (function() { |
|
||||||
return activate(this); |
|
||||||
}), (function() { |
|
||||||
return deactivate(this); |
|
||||||
})); |
|
||||||
hover(_('.activate-serie'), (function() { |
|
||||||
var element, num, _j, _k, _len2, _len3, _ref2, _ref3, _results; |
|
||||||
num = this.id.replace('activate-serie-', ''); |
|
||||||
_ref2 = _('.text-overlay .serie-' + num); |
|
||||||
for (_j = 0, _len2 = _ref2.length; _j < _len2; _j++) { |
|
||||||
element = _ref2[_j]; |
|
||||||
element.setAttribute('display', 'inline'); |
|
||||||
} |
|
||||||
_ref3 = _('.serie-' + num + ' .reactive'); |
|
||||||
_results = []; |
|
||||||
for (_k = 0, _len3 = _ref3.length; _k < _len3; _k++) { |
|
||||||
element = _ref3[_k]; |
|
||||||
_results.push(activate(element)); |
|
||||||
} |
|
||||||
return _results; |
|
||||||
}), (function() { |
|
||||||
var element, num, _j, _k, _len2, _len3, _ref2, _ref3, _results; |
|
||||||
num = this.id.replace('activate-serie-', ''); |
|
||||||
_ref2 = _('.text-overlay .serie-' + num); |
|
||||||
for (_j = 0, _len2 = _ref2.length; _j < _len2; _j++) { |
|
||||||
element = _ref2[_j]; |
|
||||||
element.setAttribute('display', 'none'); |
|
||||||
} |
|
||||||
_ref3 = _('.serie-' + num + ' .reactive'); |
|
||||||
_results = []; |
|
||||||
for (_k = 0, _len3 = _ref3.length; _k < _len3; _k++) { |
|
||||||
element = _ref3[_k]; |
|
||||||
_results.push(deactivate(element)); |
|
||||||
} |
|
||||||
return _results; |
|
||||||
})); |
|
||||||
return hover(_('.tooltip-trigger'), (function() { |
|
||||||
return tooltip(this); |
|
||||||
}), (function() { |
|
||||||
return untooltip(); |
|
||||||
})); |
|
||||||
}; |
|
||||||
|
|
||||||
}).call(this); |
|
||||||
Loading…
Reference in new issue