JavaScript Masthead-waves Template for Spotfire

Introduction

This masthead example shows how to use svg as the logo to match the color of the masthead text and background. This template only supports the masthead-title component. To replace the logo, edit the JavaScript-Masthead-waves.js script.

html

<DIV id="masthead" style="FONT-SIZE: 30px; BACKGROUND: #3498db; COLOR: white;"></DIV> 
<h1 id="masthead-title" >   JavaScript Masthead-waves Template for Spotfire</h1>

JavaScript-Masthead-waves.js

var masthead = document.getElementById("masthead")

var bgColor = window.getComputedStyle(masthead).color

html = `
<div class="header">
<div class="inner-header flex">
  
<!--svg logo-->
<?xml version="1.0" encoding="utf-8"?>
  <div style="position:absolute;width:150px;left:20px">
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
	 viewBox="0 0 2498.3 658.8" style="enable-background:new 0 0 2498.3 658.8;" xml:space="preserve">
<g>
	<path class="svg_logo" d="M280.5,140.3v504.8h-77.8V140.3H0V66.2h483.4v74.1H280.5z M575.9,645.1V66.2h77.8v578.9L575.9,645.1z
		 M1202.7,481.1c0,98.2-65.7,163.9-214.8,163.9H790.6V66.2h191.7c139.8,0,201.9,62.9,201.9,153.7c0,59.2-34.3,102.9-99.2,127.5
		C1162.5,366.2,1202.7,416.2,1202.7,481.1z M988.8,138.4H869.3v181.5h107.4c83.3,0,128.8-37,128.8-93.5S1064.7,138.4,988.8,138.4
		L988.8,138.4z M983.2,391.3H869.9v181.5h125.4c86.1,0,128.8-30.6,128.8-90.8C1124.1,415.4,1064.7,391.3,983.2,391.3L983.2,391.3z
		 M1715.9,172.3c-46.3-32.6-101.6-50-158.3-49.6c-126,0-211,87.1-211,230.7s85,235.2,212.5,235.2c59.3-1,116.7-20.9,163.9-56.7
		l12.9,78.8c-54.1,31.8-115.9,48.4-178.7,48.2c-170,0-289.9-117.6-289.9-301.9s121.7-304.6,290.2-304.6
		c64.3-0.4,127.5,16.2,183.3,48.2L1715.9,172.3z M2217.8,93.2c-8.7-5.2-17.6-10-26.8-14.2c-75.7,145.1-212.5,317.6-395,415.8
		c10.1,23,23.4,44.4,39.4,63.8C1991.8,450.7,2136.6,271.5,2217.8,93.2L2217.8,93.2z"/>
	<path class="svg_logo" d="M2184.1,75.7c-39.7-16.9-82.5-25.5-125.7-25.1c-170,0-290.3,131.3-290.3,304.2c-0.1,27.7,2.9,55.3,8.9,82.3
		C1951,366.2,2105.8,209.8,2184.1,75.7L2184.1,75.7z M2225,97.2c-89.3,219.6-198.3,374.9-337.1,508.5c50.5,34,110.3,51.7,171.1,50.6
		c170,0,290.3-132.2,290.3-305.2C2348.7,236.6,2301.3,147.6,2225,97.2L2225,97.2z M2348.7,78.1c-1.8-41.3,30.2-76.2,71.5-78
		c41.3-1.8,76.2,30.2,78,71.5c0.1,2.2,0.1,4.3,0,6.5c1.8,41.3-30.2,76.2-71.5,78c-41.3,1.8-76.2-30.2-78-71.5
		C2348.6,82.4,2348.6,80.2,2348.7,78.1z M2489.7,78.1c0-36.5-29.6-66.2-66.1-66.2c-36.5,0-66.2,29.6-66.2,66.1c0,0,0,0.1,0,0.1
		c0.1,36.5,29.8,66.1,66.4,66c36.5-0.1,66.1-29.8,66-66.4V78.1z M2394.4,38.5h34.4c16.7,0,29.2,8.2,29.2,24.1
		c0.4,10.9-6.9,20.7-17.6,23.2l20.3,28.3h-17.6l-18.3-26.9h-15.6v26.9h-14.2V38.1L2394.4,38.5z M2427.5,76.4
		c7.2,1.3,14-3.5,15.3-10.7c0.1-0.6,0.2-1.2,0.2-1.8c0-7-5.7-12.8-12.7-12.8c-0.9,0-1.8,0.1-2.7,0.3h-18.3v24.5h18.4L2427.5,76.4z"
		/>
</g>
</svg>
</div>
 
    <h1 class="masthead-title"></h1>
  
</div>

<!--Waves Container-->
<div>
<svg class="waves" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
viewBox="0 24 150 28" preserveAspectRatio="none" shape-rendering="auto">
<defs>
<path id="gentle-wave" d="M-160 44c30 0 58-18 88-18s 58 18 88 18 58-18 88-18 58 18 88 18 v44h-352z" />
</defs>
<g class="parallax">
<use xlink:href="#gentle-wave" x="48" y="0" fill="rgba(255,255,255,0.7" />
<use xlink:href="#gentle-wave" x="48" y="3" fill="rgba(255,255,255,0.5)" />
<use xlink:href="#gentle-wave" x="48" y="5" fill="rgba(255,255,255,0.3)" />
<use xlink:href="#gentle-wave" x="48" y="7" fill="#fff" />
</g>
</svg>
</div>
<!--Waves end-->

</div>
<!--Header ends-->




<style>
.svg_logo{
    fill:${masthead.style.color};
    height:50px;
}
	
.header {
  margin:0;
}

.header h1 {
  font-family: 'Lato', sans-serif;
  font-weight:300;
  letter-spacing: 2px;
  font-size:${masthead.style.fontSize};
}

.header {
  position:relative;
  text-align:center;
  background: linear-gradient(60deg, ${bgColor.replace("rgb","rgba").replace(")",",0)")} 50%, ${bgColor.replace("rgb","rgba").replace(")",",.5)")} 100%);
  color:${masthead.style.color};

}

.header .inner-header {
  height:80px;
  width:100%;
  margin: 0;
  padding: 0;
}

.header .flex { /*Flexbox for containers*/
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
}

.header .waves {
    top: -50px;
    position: relative;
    width: 100%;
    height: 13vh;
    margin-bottom: -59px;
    min-height: 100px;
    max-height: 150px;
}


/* Animation */

.header .parallax > use {
  animation: move-forever 25s cubic-bezier(.55,.5,.45,.5)     infinite;
}
.header .parallax > use:nth-child(1) {animation-delay: -2s;animation-duration: 7s;}
.header .parallax > use:nth-child(2) {animation-delay: -3s;animation-duration: 10s;}
.header .parallax > use:nth-child(3) {animation-delay: -4s;animation-duration: 13s;}
.header .parallax > use:nth-child(4) {animation-delay: -5s;animation-duration: 20s;}
@keyframes move-forever {  0% {   transform: translate3d(-90px,0,0);  }  100% {     transform: translate3d(85px,0,0);  }}

/*Shrinking for mobile*/
@media (max-width: 768px) {
  .waves {
    height:40px;
    min-height:40px;
  }
  .content {
    height:30vh;
  }
  h1 {
    font-size:24px;
  }
}
</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(x=>{li = document.createElement("li");li.append(x);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,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)) });

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

◄ Back to JavaScript Masthead for Spotfire