From 67e6fc2329e13a88ba37f198ecbe704c3947ebf0 Mon Sep 17 00:00:00 2001 From: Phyks Date: Sat, 19 Apr 2014 16:08:30 +0200 Subject: [PATCH] Bugfix width margins and size + update doc --- README.md | 17 ++++++++++------- examples/index.html | 8 ++++---- examples/index2.html | 12 ++++++------ examples/index3.html | 8 ++++---- examples/index4.html | 8 ++++---- examples/index5.html | 8 ++++---- examples/index6.html | 8 ++++---- examples/index7.html | 8 ++++---- timeline.js | 4 +++- timeline.min.js | 2 +- 10 files changed, 44 insertions(+), 39 deletions(-) diff --git a/README.md b/README.md index 98ad872..c245536 100644 --- a/README.md +++ b/README.md @@ -15,6 +15,7 @@ I coded it because I couldn't find any basic JS library to do this, without any * [Line only graph example](http://phyks.github.io/timeline.js/examples/index5.html) * [Graph with legend example](http://phyks.github.io/timeline.js/examples/index6.html) * [Interactivity with points example](http://phyks.github.io/timeline.js/examples/index7.html) +* [Multiple holders example](http://phyks.github.io/timeline.js/examples/index8.html) ## Usage @@ -23,7 +24,7 @@ I coded it because I couldn't find any basic JS library to do this, without any First, you must include the `timeline.js` or `timeline.min.js` script. -Then, you need to init the Timeline drawing, using `Timeline.init({'id': 'holder', 'height': '100%', 'width': '100%', 'grid': 'both', 'x_axis': true, 'rounded': false, 'x_callback': false});`. The arguments are all optional and are: +Then, you need to init a Timeline object, using something like `var tl = new Timeline({'id': 'holder', 'height': '100%', 'width': '100%', 'grid': 'both', 'x_axis': true, 'rounded': false, 'x_callback': false});`. The arguments are all optional and are: * `id` : the id of the parent element that will contain the Timeline * `width` / `height` : width and height of the created Timeline * `grid` : none / small / big / both to choose which type of grid you want @@ -33,17 +34,19 @@ Then, you need to init the Timeline drawing, using `Timeline.init({'id': 'holder * `rounded` : true / false to use splines to smoothen the graph or not * `x_callback` : callback function to call to get texts for the x legend. Not yet implemented -Then, you can add as many graphs as you want, with `Timeline.addGraph(NAME, COLOR);` where COLOR must be a valid CSS color. -And you can add points using `Timeline.addPoints(GRAPH_NAME, POINTS);`. Points is an array of point objects, which are of the type `{'x': ABSCISSA, 'y': ORDINATE, 'label': LABEL}`. LABEL is the text to display in the infobox when the mouse is over the point. You can use '%x' and '%y' in labels and they will be automatically replaced by the coordinates. You can also use `` and `` HTML tags. You can add another (optional) element `click` which must be a ffunction to bind to onclick event on this point. +_Note :_ One Timeline object corresponds to one holder. -_Note_ : You don't have to sort the points inside a same list of points in a Timeline.addGraph call. They will be sorted for you. But, if you call Timeline.addPoints multiple times, you must sort the points yourself between each call. The script won't do it for you and it will result in weird graphs if you don't do it. +Then, you can add as many graphs as you want, with `tl.addGraph(NAME, COLOR);` where COLOR must be a valid CSS color. +And you can add points using `tl.addPoints(GRAPH_NAME, POINTS);`. Points is an array of point objects, which are of the type `{'x': ABSCISSA, 'y': ORDINATE, 'label': LABEL}`. LABEL is the text to display in the infobox when the mouse is over the point. You can use '%x' and '%y' in labels and they will be automatically replaced by the coordinates. You can also use `` and `` HTML tags. You can add another (optional) element `click` which must be a ffunction to bind to onclick event on this point. -Finally, you can draw the Timeline with `Timeline.draw();`. +_Note_ : You don't have to sort the points inside a same list of points in a tl.addGraph call. They will be sorted for you. But, if you call tl.addPoints multiple times, you must sort the points yourself between each call. The script won't do it for you and it will result in weird graphs if you don't do it. + +Finally, you can draw the timeline with `tl.draw();`. ## Other functions -* `Timeline.clearGraph(GRAPH);` to delete the data for the graph GRAPH, or for all graphs + the graphs definition if GRAPH is not specified. -* `Timeline.hasGraph(GRAPH);` to check if a graph with name GRAPH has already been defined or not. +* `tl.clearGraph(GRAPH);` to delete the data for the graph GRAPH, or for all graphs + the graphs definition if GRAPH is not specified. +* `tl.hasGraph(GRAPH);` to check if a graph with name GRAPH has already been defined or not. ## License diff --git a/examples/index.html b/examples/index.html index 28ab9b6..2546982 100644 --- a/examples/index.html +++ b/examples/index.html @@ -12,12 +12,12 @@
diff --git a/examples/index2.html b/examples/index2.html index 9d1deb6..f90b671 100644 --- a/examples/index2.html +++ b/examples/index2.html @@ -12,15 +12,15 @@
diff --git a/examples/index3.html b/examples/index3.html index 2d3ea4b..63624a7 100644 --- a/examples/index3.html +++ b/examples/index3.html @@ -12,12 +12,12 @@
diff --git a/examples/index4.html b/examples/index4.html index 0535e3d..a73df0a 100644 --- a/examples/index4.html +++ b/examples/index4.html @@ -12,12 +12,12 @@
diff --git a/examples/index5.html b/examples/index5.html index 22ded15..be5d8fd 100644 --- a/examples/index5.html +++ b/examples/index5.html @@ -12,12 +12,12 @@
diff --git a/examples/index6.html b/examples/index6.html index 7535323..61bbee5 100644 --- a/examples/index6.html +++ b/examples/index6.html @@ -12,12 +12,12 @@
diff --git a/examples/index7.html b/examples/index7.html index 11857d9..063c121 100644 --- a/examples/index7.html +++ b/examples/index7.html @@ -12,12 +12,12 @@
diff --git a/timeline.js b/timeline.js index 6932c3a..df7600c 100644 --- a/timeline.js +++ b/timeline.js @@ -70,7 +70,9 @@ function Timeline(arg) { } this.parent_holder = document.getElementById(arg.id); - var svg = this.createElement('svg:svg', { 'width': arg.width, 'height': arg.height }); + this.parent_holder.style.width = arg.width; + this.parent_holder.style.height = arg.height; + var svg = this.createElement('svg:svg', { 'width': '100%', 'height': '100%' }); svg.setAttributeNS('http://www.w3.org/2000/xmlns/', 'xmlns:xlink', this.xlinkns); this.parent_holder.appendChild(svg); diff --git a/timeline.min.js b/timeline.min.js index a89c8c8..5c2393a 100644 --- a/timeline.min.js +++ b/timeline.min.js @@ -1 +1 @@ -function Timeline(l){this.ns="http://www.w3.org/2000/svg";this.xlinkns="http://www.w3.org/1999/xlink";this.marginBottom=10;this.marginTop=15;this.marginLeft=10;this.marginRight=10;this.rounded=false;this.x_axis=false;this.fill=true;this.line="line";this.dashed_style="5, 5";this.parent_holder=false;this.holder=false;this.g=false;this.axis=false;this.graphs=[];this.raw_points=[];this.x_callback=false;var d=window.onresize||function(){};var i=this;window.onresize=function(){d();if(i.g!==false){i.g.setAttribute("transform","translate(0, "+i.parent_holder.offsetHeight+") scale(1, -1)");if(i.x_axis===true){i.axis.setAttribute("x2",i.parent_holder.offsetWidth-13-i.marginRight)}[].forEach.call(i.holder.querySelectorAll(".label, .over, .point, .line, .graph, .legend_x"),function(m){m.parentNode.removeChild(m)});i.draw()}};if(!document.implementation.hasFeature("http://www.w3.org/TR/SVG11/feature#Image","1.1")){alert("ERROR : Your browser does not support embedded SVG.")}this.parent_holder=document.getElementById(l.id);var j=this.createElement("svg:svg",{width:l.width,height:l.height});j.setAttributeNS("http://www.w3.org/2000/xmlns/","xmlns:xlink",this.xlinkns);this.parent_holder.appendChild(j);this.holder=this.parent_holder.querySelector("svg");defs=this.createElement("defs",{});this.holder.appendChild(defs);if(l.grid==="small"||l.grid==="both"){var k=this.createElement("pattern",{id:"smallGrid",width:8,height:8,patternUnits:"userSpaceOnUse"});var f=this.createElement("path",{d:"M 8 0 L 0 0 0 8",fill:"none",stroke:"gray","stroke-width":"0.5"});k.appendChild(f);defs.appendChild(k)}if(l.grid==="big"||l.grid==="both"){var e=this.createElement("pattern",{id:"grid",width:80,height:80,patternUnits:"userSpaceOnUse"});if(l.grid==="both"){var c=this.createElement("rect",{width:80,height:80,fill:"url(#smallGrid)"});e.appendChild(c)}var h=this.createElement("path",{d:"M 80 0 L 0 0 0 80",fill:"none",stroke:"gray","stroke-width":"1"});e.appendChild(h);defs.appendChild(e)}this.grid=l.grid;var g=this.createElement("marker",{id:"markerArrow",markerWidth:13,markerHeight:13,refX:2,refY:6,orient:"auto"});var b=this.createElement("path",{d:"M2,2 L2,11 L10,6 L2,2",fill:"gray"});g.appendChild(b);defs.appendChild(g);this.g=this.createElement("g",{transform:"translate(0, "+this.parent_holder.offsetHeight+") scale(1, -1)"});this.holder.appendChild(this.g);if(l.x_axis===true){this.axis=this.createElement("line",{x1:this.marginLeft,y1:this.parent_holder.offsetHeight/2+1.5,x2:this.parent_holder.offsetWidth-13-this.marginRight,y2:this.parent_holder.offsetHeight/2+1.5,stroke:"gray","stroke-width":3,"marker-end":'url("#markerArrow")'});this.g.appendChild(this.axis)}if(this.grid!=="none"){var a=this.createElement("rect",{width:"100%",height:"100%"});if(this.grid==="big"||this.grid==="both"){a.setAttribute("fill","url(#grid)")}else{a.setAttribute("fill","url(#smallGrid)")}this.g.appendChild(a)}this.rounded=l.rounded;this.x_axis=l.x_axis;this.line=l.line;this.fill=l.fill;this.x_callback=l.x_callback}Timeline.prototype.createElement=function(b,a){var c=document.createElementNS(this.ns,b);for(attr in a){c.setAttribute(attr,a[attr])}return c};Timeline.prototype.hasClass=function(b,a){return(" "+b.getAttribute("class")+" ").indexOf(" "+a+" ")>-1};Timeline.prototype.addGraph=function(b,a){this.graphs[b]=a};Timeline.prototype.hasGraph=function(a){if(typeof(this.graphs[a])==="undefined"){return false}else{return true}};Timeline.prototype.clearGraph=function(b){if(typeof(b)==="undefined"){this.raw_points=[];this.graphs=[]}else{for(var a=0;a=0;--g){p[g]=(d[g]-j[g]*p[g+1])/k[g]}for(var g=0;gc||c===false){c=j[p].x}if(j[p].yb||b===false){b=j[p].y}}var f=this.getNewXY(g,c,e,b);var i=f(Math.pow(10,Math.floor(Math.log(c-g)/Math.log(10))),Math.pow(10,Math.floor(Math.log(b-e)/Math.log(10))));var o=f(0,0);var n={x:i.x-o.x,y:i.y-o.y};if(this.grid==="big"||this.grid==="both"){var a=this.holder.getElementById("grid");a.setAttribute("width",n.x);a.setAttribute("height",n.y);var h=f(Math.floor(g/Math.pow(10,Math.floor(Math.log(c-g)/Math.log(10))))*Math.pow(10,Math.floor(Math.log(c-g)/Math.log(10))),Math.floor(e/Math.pow(10,Math.floor(Math.log(b-e)/Math.log(10))))*Math.pow(10,Math.floor(Math.log(b-e)/Math.log(10))));a.setAttribute("y",h.y);a.setAttribute("x",h.x);a.querySelector("path").setAttribute("d","M "+n.x+" 0 L 0 0 0 "+n.y);if(this.grid==="both"){a.querySelector("rect").setAttribute("width",n.x);a.querySelector("rect").setAttribute("height",n.y)}}if(this.grid==="small"||this.grid==="both"){n.x=n.x/10;n.y=n.y/10;var a=this.holder.getElementById("smallGrid");a.setAttribute("width",n.x);a.setAttribute("height",n.y);if(this.grid==="small"){var m=f(Math.floor(g/Math.pow(10,Math.floor(Math.log(c-g)/Math.log(10))))*Math.pow(10,Math.floor(Math.log(c-g)/Math.log(10))),Math.floor(e/Math.pow(10,Math.floor(Math.log(b-e)/Math.log(10))))*Math.pow(10,Math.floor(Math.log(b-e)/Math.log(10))));a.setAttribute("y",m.y);a.setAttribute("x",m.x)}a.querySelector("path").setAttribute("d","M "+n.x+" 0 L 0 0 0 "+n.y)}if(this.x_axis===true){y=f(0,0).y;this.axis.setAttribute("y1",y);this.axis.setAttribute("y2",y)}return f};Timeline.prototype.draw=function(){var B=this.scale(this.raw_points);var v=[],p;var o,n;var d;var l=this;for(var s=0;sv.length){break}r++}}for(var u=q+1;u","").split("");for(var u=0;u]+)>)/ig,"").replace("%y",this.raw_points[j[s].id].y).replace("%x",this.raw_points[j[s].id].x);if(u%2==0){d.appendChild(document.createTextNode(m[u]))}else{var z=this.createElement("tspan",{dy:"-5"});z.appendChild(document.createTextNode(m[u]));d.appendChild(z)}}p=this.createElement("path",{stroke:"black","stroke-width":2,fill:"white",opacity:0.5});w.appendChild(p);w.appendChild(d);var A=j[s].x-d.getBoundingClientRect().width/2;var a=this.parent_holder.offsetHeight-j[s].y-20;var f=d.getBoundingClientRect().width;var t=d.getBoundingClientRect().height;if(j[s].x-d.getBoundingClientRect().width/2<0){A=j[s].x+20;a=this.parent_holder.offsetHeight-j[s].y+5;p.setAttribute("d","M "+(A-5)+" "+(a+5)+" L "+(A-5)+" "+(a-t/2+7.5)+" L "+(A-10)+" "+(a-t/2+5)+" L "+(A-5)+" "+(a-t/2+2.5)+" L "+(A-5)+" "+(a-t+5)+" L "+(A+f+5)+" "+(a-t+5)+" L "+(A+f+5)+" "+(a+5)+" Z")}else{if(j[s].y+d.getBoundingClientRect().height+12>this.parent_holder.offsetHeight){A=j[s].x+20;a=this.parent_holder.offsetHeight-j[s].y+5;p.setAttribute("d","M "+(A-5)+" "+(a+5)+" L "+(A-5)+" "+(a-t/2+7.5)+" L "+(A-10)+" "+(a-t/2+5)+" L "+(A-5)+" "+(a-t/2+2.5)+" L "+(A-5)+" "+(a-t+5)+" L "+(A+f+5)+" "+(a-t+5)+" L "+(A+f+5)+" "+(a+5)+" Z");if(A+f>this.parent_holder.offsetWidth){A=j[s].y-f-20;a=this.parent_holder.offsetHeight-j[s].y+5;p.setAttribute("d","M "+(A-5)+" "+(a+5)+" L "+(A-5)+" "+(a-t+5)+" L "+(A+f+5)+" "+(a-t+5)+" L "+(A+f+5)+" "+(a-t/2+2.5)+" L "+(A+f+10)+" "+(a-t/2+5)+" L "+(A+f+5)+" "+(a-t/2+7.5)+" L "+(A+f+5)+" "+(a+5)+" Z")}}else{if(j[s].x+f/2+12>this.parent_holder.offsetWidth){A=j[s].x-f-20;a=this.parent_holder.offsetHeight-j[s].y+5;p.setAttribute("d","M "+(A-5)+" "+(a+5)+" L "+(A-5)+" "+(a-t+5)+" L "+(A+f+5)+" "+(a-t+5)+" L "+(A+f+5)+" "+(a-t/2+2.5)+" L "+(A+f+10)+" "+(a-t/2+5)+" L "+(A+f+5)+" "+(a-t/2+7.5)+" L "+(A+f+5)+" "+(a+5)+" Z")}else{p.setAttribute("d","M "+(A-5)+" "+(a+5)+" L "+(A-5)+" "+(a-t+5)+" L "+(A+f+5)+" "+(a-t+5)+" L "+(A+f+5)+" "+(a+5)+" L "+(A+f/2+2.5)+" "+(a+5)+" L "+(A+f/2)+" "+(a+10)+" L "+(A+f/2-2.5)+" "+(a+5)+" Z")}}}d.setAttribute("x",A);d.setAttribute("y",a);w.setAttribute("display","none")}}}}; \ No newline at end of file +function Timeline(l){this.ns="http://www.w3.org/2000/svg";this.xlinkns="http://www.w3.org/1999/xlink";this.marginBottom=10;this.marginTop=15;this.marginLeft=10;this.marginRight=10;this.rounded=false;this.x_axis=false;this.fill=true;this.line="line";this.dashed_style="5, 5";this.parent_holder=false;this.holder=false;this.g=false;this.axis=false;this.graphs=[];this.raw_points=[];this.x_callback=false;var d=window.onresize||function(){};var i=this;window.onresize=function(){d();if(i.g!==false){i.g.setAttribute("transform","translate(0, "+i.parent_holder.offsetHeight+") scale(1, -1)");if(i.x_axis===true){i.axis.setAttribute("x2",i.parent_holder.offsetWidth-13-i.marginRight)}[].forEach.call(i.holder.querySelectorAll(".label, .over, .point, .line, .graph, .legend_x"),function(m){m.parentNode.removeChild(m)});i.draw()}};if(!document.implementation.hasFeature("http://www.w3.org/TR/SVG11/feature#Image","1.1")){alert("ERROR : Your browser does not support embedded SVG.")}this.parent_holder=document.getElementById(l.id);this.parent_holder.style.width=l.width;this.parent_holder.style.height=l.height;var j=this.createElement("svg:svg",{width:"100%",height:"100%"});j.setAttributeNS("http://www.w3.org/2000/xmlns/","xmlns:xlink",this.xlinkns);this.parent_holder.appendChild(j);this.holder=this.parent_holder.querySelector("svg");defs=this.createElement("defs",{});this.holder.appendChild(defs);if(l.grid==="small"||l.grid==="both"){var k=this.createElement("pattern",{id:"smallGrid",width:8,height:8,patternUnits:"userSpaceOnUse"});var f=this.createElement("path",{d:"M 8 0 L 0 0 0 8",fill:"none",stroke:"gray","stroke-width":"0.5"});k.appendChild(f);defs.appendChild(k)}if(l.grid==="big"||l.grid==="both"){var e=this.createElement("pattern",{id:"grid",width:80,height:80,patternUnits:"userSpaceOnUse"});if(l.grid==="both"){var c=this.createElement("rect",{width:80,height:80,fill:"url(#smallGrid)"});e.appendChild(c)}var h=this.createElement("path",{d:"M 80 0 L 0 0 0 80",fill:"none",stroke:"gray","stroke-width":"1"});e.appendChild(h);defs.appendChild(e)}this.grid=l.grid;var g=this.createElement("marker",{id:"markerArrow",markerWidth:13,markerHeight:13,refX:2,refY:6,orient:"auto"});var b=this.createElement("path",{d:"M2,2 L2,11 L10,6 L2,2",fill:"gray"});g.appendChild(b);defs.appendChild(g);this.g=this.createElement("g",{transform:"translate(0, "+this.parent_holder.offsetHeight+") scale(1, -1)"});this.holder.appendChild(this.g);if(l.x_axis===true){this.axis=this.createElement("line",{x1:this.marginLeft,y1:this.parent_holder.offsetHeight/2+1.5,x2:this.parent_holder.offsetWidth-13-this.marginRight,y2:this.parent_holder.offsetHeight/2+1.5,stroke:"gray","stroke-width":3,"marker-end":'url("#markerArrow")'});this.g.appendChild(this.axis)}if(this.grid!=="none"){var a=this.createElement("rect",{width:"100%",height:"100%"});if(this.grid==="big"||this.grid==="both"){a.setAttribute("fill","url(#grid)")}else{a.setAttribute("fill","url(#smallGrid)")}this.g.appendChild(a)}this.rounded=l.rounded;this.x_axis=l.x_axis;this.line=l.line;this.fill=l.fill;this.x_callback=l.x_callback}Timeline.prototype.createElement=function(b,a){var c=document.createElementNS(this.ns,b);for(attr in a){c.setAttribute(attr,a[attr])}return c};Timeline.prototype.hasClass=function(b,a){return(" "+b.getAttribute("class")+" ").indexOf(" "+a+" ")>-1};Timeline.prototype.addGraph=function(b,a){this.graphs[b]=a};Timeline.prototype.hasGraph=function(a){if(typeof(this.graphs[a])==="undefined"){return false}else{return true}};Timeline.prototype.clearGraph=function(b){if(typeof(b)==="undefined"){this.raw_points=[];this.graphs=[]}else{for(var a=0;a=0;--g){p[g]=(d[g]-j[g]*p[g+1])/k[g]}for(var g=0;gc||c===false){c=j[p].x}if(j[p].yb||b===false){b=j[p].y}}var f=this.getNewXY(g,c,e,b);var i=f(Math.pow(10,Math.floor(Math.log(c-g)/Math.log(10))),Math.pow(10,Math.floor(Math.log(b-e)/Math.log(10))));var o=f(0,0);var n={x:i.x-o.x,y:i.y-o.y};if(this.grid==="big"||this.grid==="both"){var a=this.holder.getElementById("grid");a.setAttribute("width",n.x);a.setAttribute("height",n.y);var h=f(Math.floor(g/Math.pow(10,Math.floor(Math.log(c-g)/Math.log(10))))*Math.pow(10,Math.floor(Math.log(c-g)/Math.log(10))),Math.floor(e/Math.pow(10,Math.floor(Math.log(b-e)/Math.log(10))))*Math.pow(10,Math.floor(Math.log(b-e)/Math.log(10))));a.setAttribute("y",h.y);a.setAttribute("x",h.x);a.querySelector("path").setAttribute("d","M "+n.x+" 0 L 0 0 0 "+n.y);if(this.grid==="both"){a.querySelector("rect").setAttribute("width",n.x);a.querySelector("rect").setAttribute("height",n.y)}}if(this.grid==="small"||this.grid==="both"){n.x=n.x/10;n.y=n.y/10;var a=this.holder.getElementById("smallGrid");a.setAttribute("width",n.x);a.setAttribute("height",n.y);if(this.grid==="small"){var m=f(Math.floor(g/Math.pow(10,Math.floor(Math.log(c-g)/Math.log(10))))*Math.pow(10,Math.floor(Math.log(c-g)/Math.log(10))),Math.floor(e/Math.pow(10,Math.floor(Math.log(b-e)/Math.log(10))))*Math.pow(10,Math.floor(Math.log(b-e)/Math.log(10))));a.setAttribute("y",m.y);a.setAttribute("x",m.x)}a.querySelector("path").setAttribute("d","M "+n.x+" 0 L 0 0 0 "+n.y)}if(this.x_axis===true){y=f(0,0).y;this.axis.setAttribute("y1",y);this.axis.setAttribute("y2",y)}return f};Timeline.prototype.draw=function(){var B=this.scale(this.raw_points);var v=[],p;var o,n;var d;var l=this;for(var s=0;sv.length){break}r++}}for(var u=q+1;u","").split("");for(var u=0;u]+)>)/ig,"").replace("%y",this.raw_points[j[s].id].y).replace("%x",this.raw_points[j[s].id].x);if(u%2==0){d.appendChild(document.createTextNode(m[u]))}else{var z=this.createElement("tspan",{dy:"-5"});z.appendChild(document.createTextNode(m[u]));d.appendChild(z)}}p=this.createElement("path",{stroke:"black","stroke-width":2,fill:"white",opacity:0.5});w.appendChild(p);w.appendChild(d);var A=j[s].x-d.getBoundingClientRect().width/2;var a=this.parent_holder.offsetHeight-j[s].y-20;var f=d.getBoundingClientRect().width;var t=d.getBoundingClientRect().height;if(j[s].x-d.getBoundingClientRect().width/2<0){A=j[s].x+20;a=this.parent_holder.offsetHeight-j[s].y+5;p.setAttribute("d","M "+(A-5)+" "+(a+5)+" L "+(A-5)+" "+(a-t/2+7.5)+" L "+(A-10)+" "+(a-t/2+5)+" L "+(A-5)+" "+(a-t/2+2.5)+" L "+(A-5)+" "+(a-t+5)+" L "+(A+f+5)+" "+(a-t+5)+" L "+(A+f+5)+" "+(a+5)+" Z")}else{if(j[s].y+d.getBoundingClientRect().height+12>this.parent_holder.offsetHeight){A=j[s].x+20;a=this.parent_holder.offsetHeight-j[s].y+5;p.setAttribute("d","M "+(A-5)+" "+(a+5)+" L "+(A-5)+" "+(a-t/2+7.5)+" L "+(A-10)+" "+(a-t/2+5)+" L "+(A-5)+" "+(a-t/2+2.5)+" L "+(A-5)+" "+(a-t+5)+" L "+(A+f+5)+" "+(a-t+5)+" L "+(A+f+5)+" "+(a+5)+" Z");if(A+f>this.parent_holder.offsetWidth){A=j[s].y-f-20;a=this.parent_holder.offsetHeight-j[s].y+5;p.setAttribute("d","M "+(A-5)+" "+(a+5)+" L "+(A-5)+" "+(a-t+5)+" L "+(A+f+5)+" "+(a-t+5)+" L "+(A+f+5)+" "+(a-t/2+2.5)+" L "+(A+f+10)+" "+(a-t/2+5)+" L "+(A+f+5)+" "+(a-t/2+7.5)+" L "+(A+f+5)+" "+(a+5)+" Z")}}else{if(j[s].x+f/2+12>this.parent_holder.offsetWidth){A=j[s].x-f-20;a=this.parent_holder.offsetHeight-j[s].y+5;p.setAttribute("d","M "+(A-5)+" "+(a+5)+" L "+(A-5)+" "+(a-t+5)+" L "+(A+f+5)+" "+(a-t+5)+" L "+(A+f+5)+" "+(a-t/2+2.5)+" L "+(A+f+10)+" "+(a-t/2+5)+" L "+(A+f+5)+" "+(a-t/2+7.5)+" L "+(A+f+5)+" "+(a+5)+" Z")}else{p.setAttribute("d","M "+(A-5)+" "+(a+5)+" L "+(A-5)+" "+(a-t+5)+" L "+(A+f+5)+" "+(a-t+5)+" L "+(A+f+5)+" "+(a+5)+" L "+(A+f/2+2.5)+" "+(a+5)+" L "+(A+f/2)+" "+(a+10)+" L "+(A+f/2-2.5)+" "+(a+5)+" Z")}}}d.setAttribute("x",A);d.setAttribute("y",a);w.setAttribute("display","none")}}}}; \ No newline at end of file