phyks/timeline.js
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Improving popups

Browse Source
This commit is contained in:
Phyks 2014-03-29 00:19:12 +01:00
parent c8c18966a2
commit 035bb0858f
2 changed files with 40 additions and 16 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
examples/index.html
View File

@ -1,13 +1,14 @@
<html> <html>
<head> <head>
<title>Dynamic Vector Circle</title> <meta charset="utf-8">
<title>Timeline.js example</title>
<style type="text/css"> <style type="text/css">
body { body {
background-color: #333; background-color: #333;
} }
</style> </style>
</head> </head>
<body onload="SVG.init('holder', '100%', '100%', 'both', true, true); SVG.addPoints([{'x':200, 'y':50, 'label':'test'},{'x':100, 'y':100, 'label':'test2'},{'x':150,'y':25, 'label':'test3'},{'x':175, 'y':-200, 'label':'test4'}]); SVG.draw();"> <body onload="SVG.init('holder', '100%', '100%', 'both', true, true); SVG.addPoints([{'x':200, 'y':50, 'label':'test'},{'x':100, 'y':100, 'label':'test2'},{'x':150,'y':25, 'label':'test3'},{'x':175, 'y':-200, 'label':'test4'},{'x':125, 'y':75, 'label':'µg/m<sup>3</sup>'}]); SVG.draw();">
<div id="holder"></div> <div id="holder"></div>
<script type="text/javascript" src="../timeline.js"></script> <script type="text/javascript" src="../timeline.js"></script>
</body> </body>

51
timeline.js
View File

@ -3,7 +3,7 @@ SVG.ns = "http://www.w3.org/2000/svg";
SVG.xlinkns = "http://www.w3.org/1999/xlink"; SVG.xlinkns = "http://www.w3.org/1999/xlink";
SVG.marginBottom = 10; SVG.marginBottom = 10;
SVG.marginTop = 10; SVG.marginTop = 15;
SVG.marginLeft = 10; SVG.marginLeft = 10;
SVG.marginRight = 10; SVG.marginRight = 10;
SVG.rounded = false; SVG.rounded = false;
@ -296,25 +296,48 @@ SVG.draw = function() {
SVG.g.appendChild(element); SVG.g.appendChild(element);
if(SVG.labels[point] !== '') { if(SVG.labels[point] !== '') {
var g = document.createElementNS(SVG.ns, 'g');
g.setAttribute('class', 'label');
g.setAttribute('id', 'label_'+point);
g.setAttribute('transform', 'translate(0, ' + SVG.holder.parentElement.offsetHeight + ') scale(1, -1)');
SVG.g.appendChild(g);
element = document.createElementNS(SVG.ns, 'text'); element = document.createElementNS(SVG.ns, 'text');
element.setAttribute('class', 'label'); element.innerHTML = SVG.labels[point].replace(/(<([^>]+)>)/ig, '');
element.setAttribute('id', 'label_'+point);
element.innerHTML = SVG.labels[point]; var path = document.createElementNS(SVG.ns, 'path');
element.setAttribute('transform', 'translate(0, ' + SVG.holder.parentElement.offsetHeight + ') scale(1, -1)'); path.setAttribute('stroke', 'black');
SVG.g.appendChild(element); path.setAttribute('stroke-width', 2);
if(x[point] + element.getBoundingClientRect().width / 2 > SVG.holder.parentElement.offsetWidth) { path.setAttribute('fill', 'white');
element.setAttribute('x', x[point] - element.getBoundingClientRect().width - 10); path.setAttribute('opacity', 0.5);
element.setAttribute('y', SVG.holder.parentElement.offsetHeight - y[point] + 5);
// Append here to have them with the good z-index, update their attributes later
g.appendChild(path);
g.appendChild(element);
var x_text = x[point] - element.getBoundingClientRect().width / 2;
var y_text = SVG.holder.parentElement.offsetHeight - y[point] - 20;
var element_width = element.getBoundingClientRect().width;
var element_height = element.getBoundingClientRect().height;
if(x[point] + element_width / 2 > SVG.holder.parentElement.offsetWidth) {
x_text = x[point] - element_width - 20;
y_text = SVG.holder.parentElement.offsetHeight - y[point] + 5;
path.setAttribute('d', 'M '+(x_text - 5)+' '+(y_text + 5)+' L '+(x_text - 5)+' '+(y_text - element_height + 5)+' L '+(x_text + element_width + 5)+' '+(y_text - element_height + 5)+' L '+(x_text + element_width + 5)+' '+(y_text - element_height/2 + 2.5)+' L '+(x_text + element_width + 10)+' '+(y_text - element_height/2 + 5)+' L '+(x_text + element_width + 5)+' '+(y_text - element_height/2 + 7.5)+' L '+(x_text + element_width + 5)+' '+(y_text + 5)+' Z');
} }
else if(x[point] - element.getBoundingClientRect().width / 2 < 0) { else if(x[point] - element.getBoundingClientRect().width / 2 < 0) {
element.setAttribute('x', x[point] + 10); x_text = x[point] + 20;
element.setAttribute('y', SVG.holder.parentElement.offsetHeight - y[point] + 5); y_text = SVG.holder.parentElement.offsetHeight - y[point] + 5;
path.setAttribute('d', 'M '+(x_text - 5)+' '+(y_text + 5)+' L '+(x_text - 5)+' '+(y_text - element_height/2 + 7.5)+' L '+(x_text - 10)+' '+(y_text - element_height/2 + 5)+' L '+(x_text - 5)+' '+(y_text - element_height/2 + 2.5)+' L '+(x_text - 5)+' '+(y_text - element_height + 5)+' L '+(x_text + element_width + 5)+' '+(y_text - element_height + 5)+' L '+(x_text + element_width + 5)+' '+(y_text + 5)+' Z');
} }
else { else {
element.setAttribute('x', x[point] - element.getBoundingClientRect().width / 2); path.setAttribute('d', 'M '+(x_text - 5)+' '+(y_text + 5)+' L '+(x_text - 5)+' '+(y_text - element_height + 5)+' L '+(x_text + element_width + 5)+' '+(y_text - element_height + 5)+' L '+(x_text + element_width + 5)+' '+(y_text + 5)+' L '+(x_text + element_width/2 + 2.5)+' '+(y_text + 5)+' L '+(x_text + element_width/2)+' '+(y_text + 10)+' L '+(x_text + element_width/2 - 2.5)+' '+(y_text + 5)+' Z');
element.setAttribute('y', SVG.holder.parentElement.offsetHeight - y[point] - 10);
} }
element.setAttribute('display', 'none'); element.setAttribute('x', x_text);
element.setAttribute('y', y_text);
g.setAttribute('display', 'none');
} }
} }