JavaScript Masthead-breadcrumb for Spotfire

Introduction

This masthead only supports the masthead-nav navigation component. 

html

<div id="masthead" style="FONT-SIZE: 20px; BACKGROUND: #3498db; COLOR: white"></div> 

<div id="masthead-nav" style="text-align:center;font-size:20px">
   <a>page 1</a>
   <a>page 2***</a>
   <a>page 3</a>
</div>

masthead-breadcrumb-nav.js

var masthead = document.getElementById("masthead");
activeColor = masthead.style.background.replace("rgb","rgba").replace(")",",.8)")

html = `

<ul class="masthead-nav" id="breadcrumb">

</ul>
 

<style>

#breadcrumb {
	 font-size: ${masthead.style.fontSize}; 			/* ◄ dynamic font size from masthead */
	 list-style: none;
	 display: inline-block;
}
 #breadcrumb li {
	 float: left;
}
 #breadcrumb li a {
	 color: ${masthead.style.color} !important;				/* ◄ dynamic from masthead text color*/
	 display: block;
	 background: ${masthead.style.background};				/* ◄ dynamic from masthead background color*/
	 text-decoration: none;
	 position: relative;
	 height: calc(${masthead.style.fontSize}*2);                  	/* ◄ dynamic 2x font size*/
	 line-height: calc(${masthead.style.fontSize}*2);            	/* ◄ dynamic 2X font size*/
	 padding: 0 10px 0 5px;
	 text-align: center;
	 margin-right: 23px;
}
 #breadcrumb li:first-child a {
	 padding-left: 15px;
}
 #breadcrumb li:last-child a {
	 padding-right: 15px;
}
 #breadcrumb li a:before, #breadcrumb li a:after {
	 content: "";
	 position: absolute;
	 top: 0;
	 border: 0 solid ${masthead.style.background};	      	/*◄ dynamic background color*/
	 border-width:${masthead.style.fontSize} 10px;        	/*◄ dynamic 1X font size*/
}
 #breadcrumb li a:before {
	 left: -20px;
	 border-left-color: transparent;
}
 #breadcrumb li a:after {
	 left: 100%;
	 border-color: transparent;
	 border-left-color: ${masthead.style.background} ;          	/*◄ dynamic background color*/
}
 #breadcrumb li a:hover,
#breadcrumb .active  {
	 background-color: ${activeColor};      	/*◄ dynamic font color*/
	 color: ${masthead.style.color} !important;                      	/*◄ dynamic background color*/
}
 #breadcrumb li a:hover:before,
#breadcrumb .active:before  {
	 border-color: ${activeColor};                 	/*◄ dynamic font color*/
	 border-left-color: transparent;
}
 #breadcrumb li a:hover:after,
#breadcrumb .active:after  {
	 border-left-color: ${activeColor};  	/*◄ dynamic background*/
}
 
</style>
`


masthead.innerHTML = html


//move elements function
function moveElement(from,to){
	if(to!=undefined){
				
	  if (from.id == "masthead-nav") [...document.querySelectorAll("#masthead-nav a")].forEach(a=>{	
		li = document.createElement("li");
		if(a.innerText.endsWith("***")) {
			a.className="active"
			a.innerText = a.innerText.replace("***","")
		}
		li.append(a);
		document.querySelector(".masthead-nav").append(li)
	  })
        }
	 
	from.remove()  
}

 
//finds #masthead-nav, #masthead-title and place its contents to .masthead-nav, .masthead-title and so on)
var imports = "nav,title,logo,options,filters,nav-icons";  
imports = imports.split(",").map(x=>{return "#masthead-"+x}).join(", "); 
[...document.querySelectorAll(imports)].forEach(e=>{t="."+e.id;moveElement(e,document.querySelector(t)) });

masthead.style.background="none";

To make this script fixed at the top of the screen, try the JavaScript Fixed Masthead for Spotfire

◄ Back to JavaScript Masthead for Spotfire