Jump to content
  • JavaScript Masthead-slim Template for Spotfire


    This article provides a JavaScript Masthead-slim Template for Spotfire

    slim.png.c780803d335675c3c09539b0a8bbd1b3.png

    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


    User Feedback

    Recommended Comments

    There are no comments to display.


×
×
  • Create New...