30 lines
9.8 KiB
JavaScript
30 lines
9.8 KiB
JavaScript
document.addEventListener("DOMContentLoaded",function(){const config={StandardEyeIcon:"fas fa-bullseye",StandardColor:"white",SuccessColor:"#4169E1",TextColor:"#4169E1",BackgroundColor:"linear-gradient(to bottom, rgba(0, 0, 0, 0.8), rgba(20, 40, 100, 0.8))",BorderColor:"#4169E1",LineColor:"#4169E1"};const targetEye=document.getElementById("target-eye");const targetLabel=document.getElementById("target-label");const TargetEyeStyleObject=targetEye.style;function applyColors(){TargetEyeStyleObject.color=config.LineColor;document.querySelectorAll('.connector-line, .branch-curve-left, .branch-curve-right, .branch-line').forEach(element=>{if(element.classList.contains('connector-vertical')){element.style.backgroundColor=config.LineColor}else if(element.classList.contains('branch-curve-left')||element.classList.contains('branch-curve-right')){element.style.borderColor=config.LineColor}else{element.style.backgroundColor=config.LineColor}});document.querySelectorAll('.target-option').forEach(element=>{element.style.backgroundColor=config.BackgroundColor;element.style.color=config.TextColor;element.style.borderColor=config.BorderColor})}
|
|
function OpenTarget(data){targetLabel.textContent="";targetEye.style.display="block";targetEye.className=config.StandardEyeIcon;if(data&&data.colors){config.StandardColor=data.colors.EyeColor||config.StandardColor;config.LineColor=data.colors.LineColor||config.LineColor;config.SuccessColor=data.colors.LineColor||config.SuccessColor;config.TextColor=data.colors.TextColor||config.TextColor;config.BackgroundColor=data.colors.ButtonBackgroundColor||config.BackgroundColor;config.BorderColor=data.colors.ButtonBorderColor||config.BorderColor}
|
|
TargetEyeStyleObject.color=config.StandardColor}
|
|
function CloseTarget(){targetLabel.textContent="";targetEye.style.display="none"}
|
|
function createConnectors(){const verticalLine=document.createElement("div");verticalLine.className="connector-line connector-vertical";targetLabel.appendChild(verticalLine)}
|
|
function createBranch(level,totalLevels){const branchContainer=document.createElement("div");branchContainer.className="branch-container";const basePosition=43;const branchSpacing=5;const invertedLevel=totalLevels-level-1;const topOffset=basePosition-(invertedLevel*branchSpacing);branchContainer.style.top=`${topOffset}%`;const leftCurve=document.createElement("div");leftCurve.className="branch-curve-left";branchContainer.appendChild(leftCurve);const rightCurve=document.createElement("div");rightCurve.className="branch-curve-right";branchContainer.appendChild(rightCurve);const leftLine=document.createElement("div");leftLine.className=`branch-line branch-line-left branch-line-left-${level}`;branchContainer.appendChild(leftLine);const rightLine=document.createElement("div");rightLine.className=`branch-line branch-line-right branch-line-right-${level}`;branchContainer.appendChild(rightLine);targetLabel.appendChild(branchContainer);return branchContainer}
|
|
function organizeOptions(options){const branches=[];let currentBranch=[];let topOption=null;if(Object.keys(options).length%2!==0){const firstKey=Object.keys(options)[0];topOption={index:firstKey,itemData:options[firstKey]};for(let i=1;i<Object.keys(options).length;i++){const index=Object.keys(options)[i];const itemData=options[index];if(currentBranch.length<2){currentBranch.push({index,itemData})}
|
|
if(currentBranch.length===2||i===Object.keys(options).length-1){branches.push([...currentBranch]);currentBranch=[]}}}else{for(let[index,itemData]of Object.entries(options)){if(currentBranch.length<2){currentBranch.push({index,itemData})}
|
|
if(currentBranch.length===2||index===Object.keys(options).length-1){branches.push([...currentBranch]);currentBranch=[]}}}
|
|
return{branches,topOption}}
|
|
function createTargetOption(branchContainer,position,index,itemData,level){if(itemData!==null){const targetOption=document.createElement("div");targetOption.id=`target-option-${Number(index) + 1}`;targetOption.className="target-option";targetOption.style.backgroundColor=config.BackgroundColor;targetOption.style.color=config.TextColor;targetOption.style.borderColor=config.BorderColor;if(position===0){targetOption.classList.add("target-option-left");targetOption.classList.add(`target-option-left-${level}`);targetOption.style.top=branchContainer.style.top}else{targetOption.classList.add("target-option-right");targetOption.classList.add(`target-option-right-${level}`);targetOption.style.top=branchContainer.style.top}
|
|
const targetIcon=document.createElement("span");targetIcon.id=`target-icon-${Number(index) + 1}`;targetIcon.className="target-icon";const icon=document.createElement("i");icon.className=itemData.icon;targetIcon.appendChild(icon);targetIcon.appendChild(document.createTextNode(" "));targetOption.appendChild(targetIcon);targetOption.appendChild(document.createTextNode(itemData.label));targetLabel.appendChild(targetOption)}}
|
|
function createTopOption(index,itemData,totalOptionsCount){if(itemData!==null){const targetOption=document.createElement("div");targetOption.id=`target-option-${Number(index) + 1}`;targetOption.className="target-option";targetOption.style.backgroundColor=config.BackgroundColor;targetOption.style.color=config.TextColor;targetOption.style.borderColor=config.BorderColor;targetOption.classList.add("target-option-top");const topOffset=Math.max(0,(totalOptionsCount-1)*2.5);const topPosition=40-topOffset;targetOption.style.setProperty('--top-option-position',`${topPosition}%`);const targetIcon=document.createElement("span");targetIcon.id=`target-icon-${Number(index) + 1}`;targetIcon.className="target-icon";const icon=document.createElement("i");icon.className=itemData.icon;targetIcon.appendChild(icon);targetIcon.appendChild(document.createTextNode(" "));targetOption.appendChild(targetIcon);targetOption.appendChild(document.createTextNode(itemData.label));targetLabel.appendChild(targetOption);targetOption.dataset.topPosition=topPosition}}
|
|
function adjustVerticalLineHeight(){const branchContainers=document.querySelectorAll('.branch-container');const numBranches=branchContainers.length;const verticalLine=document.querySelector('.connector-vertical');const topOption=document.querySelector('.target-option-top');const hasTopOption=topOption!==null;if(verticalLine){if(numBranches===0&&!hasTopOption){verticalLine.style.height='0%';return}
|
|
let highestBranchTop=50;branchContainers.forEach(branch=>{const topPosition=parseFloat(branch.style.top);if(topPosition<highestBranchTop){highestBranchTop=topPosition}});if(hasTopOption){const topPosition=parseFloat(topOption.dataset.topPosition||50);highestBranchTop=topPosition}
|
|
const lineHeight=Math.abs(50-highestBranchTop)-1+'%';verticalLine.style.height=lineHeight;verticalLine.style.bottom='50%';verticalLine.style.top='auto'}}
|
|
function FoundTarget(item){if(item.data){targetEye.className=item.data}
|
|
TargetEyeStyleObject.color=config.LineColor;targetLabel.textContent="";createConnectors();const{branches,topOption}=organizeOptions(item.options);if(topOption){createTopOption(topOption.index,topOption.itemData,Object.keys(item.options).length)}
|
|
branches.forEach((branchItems,level)=>{const branchContainer=createBranch(level,branches.length);branchItems.forEach(({index,itemData},position)=>{createTargetOption(branchContainer,position,index,itemData,level)})});setTimeout(adjustVerticalLineHeight,0);setTimeout(applyColors,10)}
|
|
function handleMouseDown(event){const element=event.target;let targetElement=element;while(targetElement&&targetElement.parentElement){if(targetElement.id&&targetElement.id.startsWith('target-option-')){break}
|
|
targetElement=targetElement.parentElement}
|
|
if(targetElement&&targetElement.id&&targetElement.id.startsWith('target-option-')){const split=targetElement.id.split("-");if(split[0]==="target"&&split[1]==="option"&&event.button===0){fetch(`https://${GetParentResourceName()}/selectTarget`,{method:"POST",headers:{"Content-Type":"application/json; charset=UTF-8"},body:JSON.stringify(split[2]),}).catch((error)=>console.error("Error:",error));targetLabel.textContent=""}}}
|
|
function handleKeyDown(event){if(event.key==="Escape"||event.key==="Backspace"){CloseTarget();fetch(`https://${GetParentResourceName()}/closeTarget`,{method:"POST",headers:{"Content-Type":"application/json; charset=UTF-8"},body:"",}).catch((error)=>console.error("Error:",error))}}
|
|
function handleMouseOver(event){const element=event.target;let targetElement=element;while(targetElement&&targetElement.parentElement){if(targetElement.id&&targetElement.id.startsWith('target-option-')){break}
|
|
targetElement=targetElement.parentElement}
|
|
if(targetElement&&targetElement.id&&targetElement.id.startsWith('target-option-')){if(targetElement.classList.contains('target-option-top')){targetElement.style.transform="translateX(-50%) scale(1.05)"}else{targetElement.style.transform="translateY(-50%) scale(1.05)"}}}
|
|
function handleMouseOut(event){const element=event.target;let targetElement=element;while(targetElement&&targetElement.parentElement){if(targetElement.id&&targetElement.id.startsWith('target-option-')){break}
|
|
targetElement=targetElement.parentElement}
|
|
if(targetElement&&targetElement.id&&targetElement.id.startsWith('target-option-')){if(targetElement.classList.contains('target-option-top')){targetElement.style.transform="translateX(-50%)"}else{targetElement.style.transform="translateY(-50%)"}}}
|
|
window.addEventListener("message",function(event){switch(event.data.response){case "openTarget":OpenTarget(event.data);break;case "closeTarget":CloseTarget();break;case "foundTarget":FoundTarget(event.data);break}});window.addEventListener("mousedown",handleMouseDown);window.addEventListener("keydown",handleKeyDown);window.addEventListener("mouseover",handleMouseOver);window.addEventListener("mouseout",handleMouseOut);window.addEventListener("unload",function(){window.removeEventListener("mousedown",handleMouseDown);window.removeEventListener("keydown",handleKeyDown);window.removeEventListener("mouseover",handleMouseOver);window.removeEventListener("mouseout",handleMouseOut)})}) |