From 46ea55bd9516f66b073fe7420ddb26e646af6f75 Mon Sep 17 00:00:00 2001 From: Phyks Date: Sat, 19 Apr 2014 14:56:47 +0200 Subject: [PATCH] Resize working with latest refactor. TODO : Update doc. --- timeline.js | 35 ++++++++++++++++++----------------- timeline.min.js | 2 +- 2 files changed, 19 insertions(+), 18 deletions(-) diff --git a/timeline.js b/timeline.js index f56d9e7..6932c3a 100644 --- a/timeline.js +++ b/timeline.js @@ -47,6 +47,24 @@ function Timeline(arg) { this.raw_points = []; this.x_callback = false; + var old = window.onresize || function () {}; + var obj = this; + window.onresize = function() { + old(); + + // Redraw the Timeline to fit the new size + if(obj.g !== false) { + obj.g.setAttribute('transform', 'translate(0, ' + obj.parent_holder.offsetHeight + ') scale(1, -1)'); + if(obj.x_axis === true) { + obj.axis.setAttribute('x2', obj.parent_holder.offsetWidth - 13 - obj.marginRight); + } + [].forEach.call(obj.holder.querySelectorAll('.label, .over, .point, .line, .graph, .legend_x'), function(el) { + el.parentNode.removeChild(el); + }); + obj.draw(); + } + }; + if(!document.implementation.hasFeature("http://www.w3.org/TR/SVG11/feature#Image", "1.1")) { alert("ERROR : Your browser does not support embedded SVG."); } @@ -555,20 +573,3 @@ Timeline.prototype.draw = function() { } } }; - -// TODO -var old = window.onresize || function () {}; -window.onresize = function() { - old(); - // Redraw the Timeline to fit the new size - if(Timeline.g !== false) { - Timeline.g.setAttribute('transform', 'translate(0, ' + Timeline.parent_holder.offsetHeight + ') scale(1, -1)'); - if(Timeline.x_axis === true) { - Timeline.axis.setAttribute('x2', Timeline.parent_holder.offsetWidth - 13 - Timeline.marginRight); - } - [].forEach.call(Timeline.holder.querySelectorAll('.label, .over, .point, .line, .graph, .legend_x'), function(el) { - el.parentNode.removeChild(el); - }); - Timeline.draw(); - } -}; diff --git a/timeline.min.js b/timeline.min.js index f0af5be..a89c8c8 100644 --- a/timeline.min.js +++ b/timeline.min.js @@ -1 +1 @@ -function Timeline(j){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;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(j.id);var h=this.createElement("svg:svg",{width:j.width,height:j.height});h.setAttributeNS("http://www.w3.org/2000/xmlns/","xmlns:xlink",this.xlinkns);this.parent_holder.appendChild(h);this.holder=this.parent_holder.querySelector("svg");defs=this.createElement("defs",{});this.holder.appendChild(defs);if(j.grid==="small"||j.grid==="both"){var i=this.createElement("pattern",{id:"smallGrid",width:8,height:8,patternUnits:"userSpaceOnUse"});var e=this.createElement("path",{d:"M 8 0 L 0 0 0 8",fill:"none",stroke:"gray","stroke-width":"0.5"});i.appendChild(e);defs.appendChild(i)}if(j.grid==="big"||j.grid==="both"){var d=this.createElement("pattern",{id:"grid",width:80,height:80,patternUnits:"userSpaceOnUse"});if(j.grid==="both"){var c=this.createElement("rect",{width:80,height:80,fill:"url(#smallGrid)"});d.appendChild(c)}var f=this.createElement("path",{d:"M 80 0 L 0 0 0 80",fill:"none",stroke:"gray","stroke-width":"1"});d.appendChild(f);defs.appendChild(d)}this.grid=j.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(j.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=j.rounded;this.x_axis=j.x_axis;this.line=j.line;this.fill=j.fill;this.x_callback=j.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")}}}};var old=window.onresize||function(){};window.onresize=function(){old();if(Timeline.g!==false){Timeline.g.setAttribute("transform","translate(0, "+Timeline.parent_holder.offsetHeight+") scale(1, -1)");if(Timeline.x_axis===true){Timeline.axis.setAttribute("x2",Timeline.parent_holder.offsetWidth-13-Timeline.marginRight)}[].forEach.call(Timeline.holder.querySelectorAll(".label, .over, .point, .line, .graph, .legend_x"),function(a){a.parentNode.removeChild(a)});Timeline.draw()}}; \ 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);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