diff options
Diffstat (limited to 'lib')
-rw-r--r-- | lib/LICENSE | 21 | ||||
-rw-r--r-- | lib/tree_maker-min.css | 1 | ||||
-rw-r--r-- | lib/tree_maker-min.js | 1 |
3 files changed, 23 insertions, 0 deletions
diff --git a/lib/LICENSE b/lib/LICENSE new file mode 100644 index 0000000..6fd9ab3 --- /dev/null +++ b/lib/LICENSE @@ -0,0 +1,21 @@ +MIT License + +Copyright (c) 2019 Remi-Leclercq-Blondel + +Permission is hereby granted, free of charge, to any person obtaining a copy +of this software and associated documentation files (the "Software"), to deal +in the Software without restriction, including without limitation the rights +to use, copy, modify, merge, publish, distribute, sublicense, and/or sell +copies of the Software, and to permit persons to whom the Software is +furnished to do so, subject to the following conditions: + +The above copyright notice and this permission notice shall be included in all +copies or substantial portions of the Software. + +THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR +IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, +FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE +AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER +LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, +OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE +SOFTWARE. diff --git a/lib/tree_maker-min.css b/lib/tree_maker-min.css new file mode 100644 index 0000000..944d36e --- /dev/null +++ b/lib/tree_maker-min.css @@ -0,0 +1 @@ +#from_tree__container__step__card__first,.tree__container,.tree__container__branch{display:flex;flex-direction:row;justify-content:center}.tree__container__step__card{text-align:center;margin:20px}.tree__container__step__card p{padding:10px;box-shadow:0 0 4px 1px rgba(121,121,121,.3);border-radius:4px;text-align:center;width:150px;display:inline-block;margin:0!important}#tree__svg-container{z-index:-1;position:absolute}.tree__container__step{flex:1 1 0px;width:auto;padding:0}.tree__container__step__card__p{cursor:pointer;transition:transform .2s ease}.tree__container__step__card__p:hover{transform:translateX(3px)}
\ No newline at end of file diff --git a/lib/tree_maker-min.js b/lib/tree_maker-min.js new file mode 100644 index 0000000..8a56741 --- /dev/null +++ b/lib/tree_maker-min.js @@ -0,0 +1 @@ +let treeParamas,pathNumber=1,allLinks=[],strokeWidth="5px",strokeColor="#000000";function treeMaker(t,e){let r=document.getElementById(e.id);treeParamas=void 0===e.treeParams?{}:e.treeParams,void 0!==e.link_width&&(strokeWidth=e.link_width),void 0!==e.link_color&&(strokeColor=e.link_color);pathNumber=1;allLinks=[];let n=document.createElement("div");n.id="tree__svg-container",r.appendChild(n);let a=document.createElementNS("http://www.w3.org/2000/svg","svg");a.id="tree__svg-container__svg",n.appendChild(a);let i=document.createElement("div");i.id="tree__container",r.appendChild(i);let s=document.createElement("div");s.classList="tree__container__step__card",s.id="tree__container__step__card__first",i.appendChild(s);let o=void 0!==treeParamas[Object.keys(t)[0]]&&void 0!==treeParamas[Object.keys(t)[0]].trad?treeParamas[Object.keys(t)[0]].trad:Object.keys(t)[0].trad;s.innerHTML='<p class="tree__container__step__card__p" id="card_'+Object.keys(t)[0]+'">'+o+"</p>",addStyleToCard(treeParamas[Object.keys(t)[0]],Object.keys(t)[0]),iterate(t[Object.keys(t)[0]],!0,"tree__container__step__card__first"),connectCard();let d=document.querySelectorAll(".tree__container__step__card__p");for(let t=0;d.length>t;t++)d[t].addEventListener("click",function(t){e.card_click(t.target)});window.onresize=function(){n.setAttribute("height","0"),n.setAttribute("width","0"),connectCard()}}function connectCard(){let t=document.getElementById("tree__svg-container__svg");for(let e=0;allLinks.length>e;e++)connectElements(t,document.getElementById(allLinks[e][0]),document.getElementById(allLinks[e][1]),document.getElementById(allLinks[e][2]))}function iterate(t,e=!1,r=""){let n=document.getElementById("tree__svg-container__svg"),a=document.createElement("div");a.id="from_"+r,a.classList.add("tree__container__branch"),document.getElementById(r).after(a);for(const i in t){let s=void 0!==treeParamas[i]&&void 0!==treeParamas[i].trad?treeParamas[i].trad:i;if(a.innerHTML+='<div class="tree__container__step"><div class="tree__container__step__card" id="'+i+'"><p id="card_'+i+'" class="tree__container__step__card__p">'+s+"</p></div></div>",addStyleToCard(treeParamas[i],i),""!==r&&!e){let t=document.createElementNS("http://www.w3.org/2000/svg","path");t.id="path"+pathNumber,t.setAttribute("stroke",strokeColor),t.setAttribute("fill","none"),t.setAttribute("stroke-width",strokeWidth),n.appendChild(t),allLinks.push(["path"+pathNumber,r,i]),pathNumber++}if(e){let t=document.createElementNS("http://www.w3.org/2000/svg","path");t.id="path"+pathNumber,t.setAttribute("stroke",strokeColor),t.setAttribute("fill","none"),t.setAttribute("stroke-width",strokeWidth),n.appendChild(t),allLinks.push(["path"+pathNumber,"tree__container__step__card__first",i]),pathNumber++}Object.keys(t[i]).length>0&&iterate(t[i],!1,i)}}function addStyleToCard(t,e){if(void 0!==t&&void 0!==t.styles){let r=document.getElementById("card_"+e);for(const n in treeParamas[e].styles)r.style[n]=t.styles[n]}}function signum(t){return t<0?-1:1}function absolute(t){return t<0?-t:t}function drawPath(t,e,r,n,a,i){let s=parseFloat(e.getAttribute("stroke-width"));t.getAttribute("height")<i&&t.setAttribute("height",i),t.getAttribute("width")<r+s&&t.setAttribute("width",r+s),t.getAttribute("width")<a+s&&t.setAttribute("width",a+s);let o=.15*(a-r),d=.15*(i-n),l=d<absolute(o)?d:absolute(o),c=0,_=1;r>a&&(c=1,_=0),e.setAttribute("d","M"+r+" "+n+" V"+(n+l)+" A"+l+" "+l+" 0 0 "+c+" "+(r+l*signum(o))+" "+(n+2*l)+" H"+(a-l*signum(o))+" A"+l+" "+l+" 0 0 "+_+" "+a+" "+(n+3*l)+" V"+i)}function connectElements(t,e,r,n){let a=document.getElementById("tree__svg-container");if(r.offsetTop>n.offsetTop){let t=r;r=n,n=t}let i=a.offsetTop,s=a.offsetLeft;drawPath(t,e,r.offsetLeft+.5*r.offsetWidth-s,r.offsetTop+r.offsetHeight-i,n.offsetLeft+.5*n.offsetWidth-s,n.offsetTop-i)} |