JavaScript Masthead-simple Template for Spotfire

Introduction

This template supports the following components:

• masthead-logo
• masthead-itle 
• masthead-nav - page navigation

html

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

<div id="masthead-logo" >
   Logo
</div>

<h1 id="masthead-title" >JavaScript Masthead nav-dropdown for Spotfire</h1>


<div id="masthead-nav" >
	<a>page 1</a>
	<a>page 2***</a>
	<a>page 3</a>
</div>

<div id="masthead-nav-icons" hidden>coffee,globe,grid,cpu</div>


<div id="masthead-options" >
	<a>option 1</a>
	<a>option 2</a>
	<a>option 3</a>
</div>

mashtead-simple.js

masthead = document.getElementById("masthead");

html = `

<table width="100%" height="100%" border=0 cellspacing=0 class="masthead">
<tr >
<td style="text-align:left;padding:0 20px;width:10%" class="masthead-logo"></td>
<td style="text-align:center;width:80%" class="masthead-title">
</td>
<td style="text-align:right;padding:0 20px;width:10%"></td>
<tr >
  <td style="text-align:center" colspan="3" class="masthead-nav"></td></tr>
</tr>

<style>
#masthead, .masthead table {
  height:100%;
}

.masthead tr{
  color:${masthead.style.color};
  background:${masthead.style.background||"#3498db"};
  color:${masthead.style.color||"white"} !important;

}

.masthead-title{
  	 font-size: ${masthead.style.fontSize||"32px"}
}

.masthead-nav{
   background:rgba(0,0,0,0.1);
}

.masthead-nav a, .masthead-nav button {
    padding: 0 20px;
    font-size: calc(${masthead.style.fontSize||"30px"}*0.70);
    text-decoration: none !important;
    color:${masthead.style.color||"white"} !important;
}
</style>`;

//add html
masthead.innerHTML=html;

//move elements function
function moveElement(from,to){
	if(to!=undefined){
		if (from.id=="masthead-nav")[...document.querySelectorAll("#masthead-nav a")].forEach(x=>{	
			if(x.innerText.endsWith("***")) {
				x.innerText = x.innerText.replace("***","")
			}
		})
	to.append(...from.childNodes);	
	} else {
		console.log("warning")
	}
		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)) });

Checkout the JavaScript Fixed Masthead for Spotfire to make this masthead fixed to the top when scrolling the page

◄ Back to JavaScript Masthead for Spotfire