JavaScript Masthead-slim Template for Spotfire

Introduction

This template supports the following components:

• masthead-logo
• masthead-title 
• masthead-nav 
• masthead-options

html

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

<div id="masthead-logo" >
   <img src="69fd3f368d36430faf918ba509991c97.png"/>
</div>

<h1 id="masthead-title" >   JavaScript Masthead-slim 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>

masthead-slim.js

var masthead = document.getElementById("masthead");
var color = masthead.style.color;
var background = masthead.style.background;
var fontSize= masthead.style.fontSize;

html = `
<span class="masthead-logo masthead-title"></span>
<span class="logo masthead-nav" ></span>


	<style>
	#masthead {
	    display: flex;
	    flex-wrap: wrap;
	}

	.masthead-title, .masthead-logo img {
		display: flex;
		flex-wrap: wrap;
		background:${background};
		font-size:${fontSize};
		height:calc(10px + ${fontSize});
		color:${color};
		padding: 10px 25px;
		whitespace-nowrap;
		align-items:center;
	} 

	.masthead-logo img {
		padding:0 20px 0 0;
		height:calc(10px + ${fontSize})
	}

	.masthead-nav {
		display: flex;
		flex-wrap: wrap;
		font-size:${fontSize};
		list-style: none;
		margin-left: auto;
	}
	.masthead-nav li {
		display: flex;
		height:calc(10px + ${fontSize});
		background:${background};
		color:${color} !important;
		margin: 0 3px;
		padding: 10px 25px; 
		text-decoration:none !important;
		cursor:default;
		whitespace-nowrap;
	}
	.masthead-nav a {
		color:${color} !important;
		text-decoration:none !important;
		cursor:default;
		display: flex;
		align-items: center;
	}
	.masthead-nav a svg{
		margin-right:5px;
	}
	.masthead-nav a:hover{
		background:rgba(0,0,0,.5)
	}

	</style>
`
 
masthead.innerHTML = html


//move elements function
function moveElement(from,to){
	if(to!=undefined){
		if (from.id == "masthead-nav"){
			icons = document.querySelector("#masthead-nav-icons") ;
			if(icons) icons = document.querySelector("#masthead-nav-icons").innerText.split(",").map(x=>`<i data-feather="${x}"></i>  `);
			let i=0;
			[...document.querySelectorAll("#masthead-nav a")].forEach(x=>{
				if(x.innerText.endsWith("***")) x.innerText = x.innerText.replace("***","")
				li = document.createElement("li");
				li.append(x);
				if (icons[i]) x.insertAdjacentHTML("afterbegin",icons[i++]);
				document.querySelector(".masthead-nav").append(li)
			})
		}
		to.append(...from.childNodes);	
	}
	from.remove()
	if (!to) console.log(`⚠️ class ".${from.id}" does not exists on template!`)
}


//move elements
var imports = "nav,title,logo,options,nav-icons,filters";  										
imports = imports.split(",").map(x=>{return "#masthead-"+x}).join(", "); 
[...document.querySelectorAll(imports)].forEach(e=>{t="."+e.id;moveElement(e,document.querySelector(t)) });

iconSize = parseInt(window.getComputedStyle(masthead).getPropertyValue("font-size").replace("px",""))-5+"px";
if (typeof feather!="undefined") feather.replace({width:iconSize,height:iconSize})

masthead.style=""

You need feather icons to work. To install the latest version of feather icons, copy the code from https://unpkg.com/feather-icons and add a new script called feather-icons@x.xx.x.js. The version shows up at the URLafter the file loads. 

Place the URL as the description of your scripts. It's a good practice!

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

◄ Back to JavaScript Masthead for Spotfire