Hmm, so it looks like the article's script doesn't take into account having nested links (ie. <a><SpotfireControls id=blahblahblah></a> where the Spotfire control is a Link action control). So what's happening is that it's moving the link action control up out of the parent <a>. So this HTML:
<div class="iconMenu" style="background:yellow;color:blue;font-size:50px;">
<a><SpotfireControl id="7f4b2b132dc244a8b29b58297d16a13f" /></a>
<a>Action Control Link 2</a>
<a>Action Control Link 3</a>
<a>Action Control Link 4</a>
<a>Action Control Link 5</a>
<a>Action Control Link 6</a>
<a>Action Control Link 7</a>
<a>Action Control Link 8</a>
<a>Action Control Link 9</a>
<a>Action Control Link 10</a>
<a>Menu</a>
</div>
<img class="icons fa-solid fa-1, fa-solid fa-2,fa-solid fa-3,fa-solid fa-4,fa-solid fa-5,fa-solid fa-6,fa-solid fa-7,fa-solid fa-8,fa-solid fa-9, fa-solid fa-0, fa-solid fa-bars"/>
Becomes this:
<div class="iconMenu" style="background:yellow;color:blue;font-size:50px;">
<a class="fa-solid fa-1"></a>
<a id="7f4b2b132dc244a8b29b58297d16a13f" href="javascript:void(0);" class="fa-solid fa-2" title="Home"> //This is the Spotfire Link action control.
<a class="fa-solid fa-3">Action Control Link 2</a>
<a class="fa-solid fa-4">Action Control Link 3</a>
<a class="fa-solid fa-5">Action Control Link 4</a>
<a class="fa-solid fa-6">Action Control Link 5</a>
<a class="fa-solid fa-7">Action Control Link 6</a>
<a class="fa-solid fa-8">Action Control Link 7</a>
<a class="fa-solid fa-9">Action Control Link 8</a>
<a class="fa-solid fa-0">Action Control Link 9</a>
<a class="fa-solid fa-bars">Action Control Link 10</a>
<a class="undefined">Menu</a> //Since the Spotfire control 'stole' one of the icons, this becomes undefined, since there are 12 elements and only 11 icon classes.
</div>
The easiest solution is to remove the container <a> around the Spotfire Link action control. However, there is some base styling applied to Link action controls, and, unfortunately, the styles are inline instead of in a style sheet. So you'd need to use !important to override them. The most notable is the font size, but there are a few others. A potential alternative would be to extract the action controls to their own hidden container and just use the icons as facades, but that would take a good bit more work.
I went through and rewrote the code to implement the overriding the font-size but also to implement some general best practices (such as using var when setting variables, checking that elements exist, etc.):
var spaceBetweenLayers = 100;
var itemsPerLayer = 1;
var startingAngle = 0
var endingAngle= 120
var canvasPos = document.querySelector('[class^="sfx_canvas"]').getBoundingClientRect() ;
var iconMenu = document.querySelector(".iconMenu");
if (iconMenu) {
var iconMenuStyle = iconMenu.style;
var backgroundColor= iconMenuStyle.background || "#fff";
var foregroundColor = iconMenuStyle.color || "navy";
var fontSize = iconMenuStyle.fontSize || "20px";
var style = `
<link href='https://cdnjs.cloudflare.com/ajax/libs/simple-line-icons/2.4.1/css/simple-line-icons.css' rel='stylesheet' ></link>
<link href='https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.3.0/css/all.min.css' rel='stylesheet'/>
<style>
.iconMenu {
position: fixed;
top:${canvasPos.y+15}px;
left:${canvasPos.x+15}px;
z-index:1;
height:0;
}
.iconMenu a {
font-size: ${fontSize} !important;
position: fixed;
display: flex;
justify-content: center;
align-items: center;
text-decoration:none !important;
cursor: pointer;
/*animation*/
transition-timing-function: cubic-bezier(0,0,0,1);
transition-duration: .25s;
/*size and shape*/
width: ${fontSize};
height: ${fontSize};
padding: calc(${fontSize}/3);
border-radius: 100%;
/*colors*/
color:#747880 !important;
background-color: ${backgroundColor};
box-shadow: 0 4px 18px #0000001a,0 4px 5px #0000001a;
}
.iconMenu a:last-child{
opacity:100%
}
.iconMenu a:hover{
color: #8498fa !important;
}
</style>
`;
iconMenu.insertAdjacentHTML("afterend",style);
//script
var timeOutPID = 0;
var menuLinks = document.querySelectorAll(".iconMenu a")
if (menuLinks) {
var boxShadow = document.querySelector(".iconMenu a").style.boxShadow;
function hover() {
let gap = spaceBetweenLayers;
let elements = document.querySelectorAll(".iconMenu a");
if (elements) {
elements.forEach((e, i) => {
if(i==elements.length-1) return;
let angle = (endingAngle / itemsPerLayer) * (i%itemsPerLayer) + startingAngle;
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");
if (elements) {
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
var icons = document.querySelector(".icons").classList.value.split(",");
icons[0] = icons[0].replace("icons ","");
menuLinks.forEach((e,i)=>{
e.className = icons[i];
e.title = e.innerText;
e.innerText = "";
});
hover();
delayClose();
};
};
The HTML for this method would look like this:
<div class="iconMenu" style="background:yellow;color:blue;font-size:50px;">
<SpotfireControl id="7f4b2b132dc244a8b29b58297d16a13f" />
<a>Action Control Link 2</a>
<a>Action Control Link 3</a>
<a>Action Control Link 4</a>
<a>Action Control Link 5</a>
<a>Action Control Link 6</a>
<a>Action Control Link 7</a>
<a>Action Control Link 8</a>
<a>Action Control Link 9</a>
<a>Action Control Link 10</a>
<a>Menu</a>
</div>
<img class="icons fa-solid fa-1, fa-solid fa-2,fa-solid fa-3,fa-solid fa-4,fa-solid fa-5,fa-solid fa-6,fa-solid fa-7,fa-solid fa-8,fa-solid fa-9, fa-solid fa-0, fa-solid fa-bars"/>
You'd just replace each <a>Action Control Link #</a> with a Spotfire Link action control with the desired title.
