9 lines
4.4 KiB
JavaScript
Executable File
9 lines
4.4 KiB
JavaScript
Executable File
let fontFamily=getComputedStyle(document.body).fontFamily;function basicNodeTemplate(e){return`
|
|
<div style='display: flex; flex-direction: row; gap:10px; align-items: center; height: 100%; box-shadow: 1px 2px 4px #ccc; padding: 0 15px;'>
|
|
<img style='width: 50px; height: 50px; border-radius: 50%;' src='${e.imageURL}' alt=''>
|
|
<div style="font-weight: 500; font-family: ${fontFamily}; font-size: 14px">${e.name}</div>
|
|
</div>`}function verticalNodeTemplate(e){return`
|
|
<div style='display: flex; flex-direction: column; gap: 10px; justify-content: center; align-items: center; height: 100%'>
|
|
<img style='width: 50px; height: 50px; border-radius: 50%;' src='${e.imageURL}' alt=''/>
|
|
<div style="font-weight: 500; font-family: ${fontFamily}; font-size: 14px">${e.name}</div>
|
|
</div>`}let sharedOptions={contentKey:"data",width:"100%",enableToolbar:!1,nodeWidth:170,nodeHeight:70,childrenSpacing:70,siblingSpacing:30,fontColor:ins("light-text-emphasis"),nodeTemplate:basicNodeTemplate,nodeStyle:"box-shadow: -3px 6px 8px -5px rgba(0,0,0,0.31)",edgeColorHover:ins("secondary")};function renderApexTree(e,s,a){e=document.getElementById(e);e&&new ApexTree(e,s).render(a)}let data1={id:"Lucas_Alex",data:{name:"Lucas Alex",imageURL:"assets/images/users/user-1.jpg"},options:{nodeBGColor:ins("primary-rgb",.5)},children:[{id:"Alex_Lee",data:{name:"Alex Lee",imageURL:"assets/images/users/user-3.jpg"},options:{nodeBGColor:ins("danger-rgb",.5)},children:[{id:"Mia_Patel",data:{name:"Mia Patel",imageURL:"assets/images/users/user-9.jpg"},options:{nodeBGColor:ins("info-rgb",.5)}},{id:"Ryan_Clark",data:{name:"Ryan Clark",imageURL:"assets/images/users/user-10.jpg"},options:{nodeBGColor:ins("info-rgb",.5)}},{id:"Zoe_Wang",data:{name:"Zoe Wang",imageURL:"assets/images/users/user-2.jpg"},options:{nodeBGColor:ins("info-rgb",.5)}}]},{id:"Leo_Kim",data:{name:"Leo Kim",imageURL:"assets/images/users/user-6.jpg"},options:{nodeBGColor:ins("danger-rgb",.5)},children:[{id:"Ava_Jones",data:{name:"Ava Jones",imageURL:"assets/images/users/user-3.jpg"},options:{nodeBGColor:ins("purple-rgb",.5)}},{id:"Maya_Gupta",data:{name:"Maya Gupta",imageURL:"assets/images/users/user-7.jpg"},options:{nodeBGColor:ins("purple-rgb",.5)}}]},{id:"Lily_Chen",data:{name:"Lily Chen",imageURL:"assets/images/users/user-4.jpg"},options:{nodeBGColor:ins("danger-rgb",.5)},children:[{id:"Jake_Scott",data:{name:"Jake Scott",imageURL:"assets/images/users/user-3.jpg"},options:{nodeBGColor:ins("secondary-rgb",.5)}}]},{id:"Max_Ruiz",data:{name:"Max Ruiz",imageURL:"assets/images/users/user-8.jpg"},options:{nodeBGColor:ins("danger-rgb",.5)}}]},data2=(renderApexTree("right-to-left",{...sharedOptions,direction:"right"},data1),renderApexTree("bottom-tree",{...sharedOptions,direction:"bottom"},data1),{id:"ms",data:{imageURL:"assets/images/users/user-1.jpg",name:"Margret Swanson"},options:{nodeBGColor:ins("primary-rgb",.5),nodeBGColorHover:ins("primary-rgb",.7)},children:[{id:"mh",data:{imageURL:"assets/images/users/user-3.jpg",name:"Mark Hudson"},options:{nodeBGColor:ins("danger-rgb",.5),nodeBGColorHover:ins("danger-rgb",.7)},children:[{id:"kb",data:{imageURL:"assets/images/users/user-2.jpg",name:"Karyn Borbas"},options:{nodeBGColor:ins("info-rgb",.5),nodeBGColorHover:ins("info-rgb",.7)}},{id:"cr",data:{imageURL:"assets/images/users/user-9.jpg",name:"Chris Rup"},options:{nodeBGColor:ins("purple-rgb",.5),nodeBGColorHover:ins("purple-rgb",.7)}}]},{id:"cs",data:{imageURL:"assets/images/users/user-7.jpg",name:"Chris Lysek"},options:{nodeBGColor:ins("secondary-rgb",.5),nodeBGColorHover:ins("secondary-rgb",.7)},children:[{id:"Noah_Chandler",data:{imageURL:"assets/images/users/user-6.jpg",name:"Noah Chandler"},options:{nodeBGColor:ins("info",.5),nodeBGColorHover:ins("info",.7)}},{id:"Felix_Wagner",data:{imageURL:"assets/images/users/user-4.jpg",name:"Felix Wagner"},options:{nodeBGColor:ins("success-rgb",.5),nodeBGColorHover:ins("success-rgb",.7)}}]}]});renderApexTree("top-tree",{contentKey:"data",width:"100%",nodeWidth:150,nodeHeight:100,fontColor:ins("light-text-emphasis"),edgeColorHover:ins("secondary"),childrenSpacing:50,siblingSpacing:20,direction:"top",nodeTemplate:verticalNodeTemplate,enableToolbar:!1},data2),renderApexTree("collapse-expand",{contentKey:"data",width:"100%",nodeWidth:150,nodeHeight:100,fontColor:ins("light-text-emphasis"),edgeColorHover:ins("secondary"),childrenSpacing:50,siblingSpacing:20,direction:"top",nodeTemplate:verticalNodeTemplate,enableToolbar:!1,enableExpandCollapse:!0},data2); |