JavaScript Radial Icon Menu

itemsPerLayer = 1

itemsPerLayer = 4

html

<div class="iconMenu">
 <SpotfireControl id="spotfire action control link 1" />
 <SpotfireControl id="spotfire action control link 2" />
 <SpotfireControl id="spotfire action control link 3" />
 <SpotfireControl id="spotfire action control link 4" />
 <SpotfireControl id="spotfire action control link 5" />
 <SpotfireControl id="spotfire action control link 6" />
</div>

<img class="icons fa-solid fa-bolt,fa-solid fa-bolt-lightning,icon-graph,fa-solid fa-arrow-trend-up,fa-solid fa-check,fa-solid fa-house"/>

js

/*
description:converts spotfire links to an iconic menu. Supports font awesome and simple-line-icons
usage:

<div class="iconMenu">
   <a>spotfire link 1</a>
   <a>spotfire link 2</a>
   <a>spotfire link 3</a>
</div>
<img class="icons icon-user,icon-fire,fa-solid fa-arrow-trend-up"

*/

//script parameters
let spaceBetweenLayers = 40;
let itemsPerLayer = 5; //◄ set to 1 for horizontal menu

style = `
<link  rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/simple-line-icons/2.4.1/css/simple-line-icons.css"></link>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.3.0/css/all.min.css"/>

<style>
.iconMenu {
  position: fixed;
  top:37px;left:53px;
  z-index:1;
  width: 50px;
  height: 50px;
}

.iconMenu a {
    position: fixed;
    width: 20px;
    height: 20px;
    background-color: #ccc;
    border-radius: 50%;
    justify-content: center;
    transition-timing-function: cubic-bezier(0,0,0,1);
    transition-duration: .5s; 
    display: flex;
    justify-content: center;
    align-items: center;
text-decoration:none !important;
 
    /*look and feel*/
    background: #1f83f2;
    box-shadow: 5px 5px 7px rgba(0, 0, 0, 0.25), inset 2px 2px 5px rgba(255, 255, 255, 0.5), inset -3px
3px 5px rgba(0, 0, 0, 0.5);
    color:white !important; 
    height:23px;
    width:23px;
}

.iconMenu a:last-child{opacity:1}
.iconMenu a:hover{
    background: #8f18f8;
}
</style>
`

document.querySelector(".iconMenu").insertAdjacentHTML("afterend",style);

//script
let timeOutPID=0;
let boxShadow = document.querySelector(".iconMenu a").style.boxShadow;

function hover() {
  let gap = spaceBetweenLayers;
  let elements = document.querySelectorAll(".iconMenu a");
  elements.forEach((e, i) => {
    if(i==elements.length-1) return;
    let angle = (100 / itemsPerLayer) * (i%itemsPerLayer);
    i%itemsPerLayer||(gap+=spaceBetweenLayers)
    e.style.transform = `rotate(${angle}deg) translate(${gap}px) rotate(-${angle}deg)`;
    e.style.boxShadow=boxShadow;
    e.onmouseover = resetDelayClose;
    e.onmouseout = delayClose;
  });
 
 resetDelayClose();
}

function close(){
  let elements = document.querySelectorAll(".iconMenu a");
  elements.forEach((e, i) => {
    if (i==elements.length-1) return;
    e.style.transform = `translate(0px)`;
    e.style.boxShadow="unset";
  });
}

function delayClose(){
  timeOutPID = setTimeout(close,1234)
}

function resetDelayClose(){
  timeOutPID && clearTimeout(timeOutPID);
}

document.querySelector(".iconMenu a:last-child").onmouseover = hover;
document.querySelector(".iconMenu a:last-child").onmouseout = delayClose; 

//setup icons on links
icons = document.querySelector(".icons").classList.value.split(",")
icons[0] = icons[0].replace("icons ","");
console.log(icons)

document.querySelectorAll(".iconMenu a").forEach((e,i)=>{
  e.className = icons[i];
  e.title = e.innerText;
  e.innerText=""
})  

hover();
delayClose();