diff --git a/cwms-data-api/src/main/webapp/css/HEC.header.css b/cwms-data-api/src/main/webapp/css/HEC.header.css index 85a1694288..e07e46bfb1 100644 --- a/cwms-data-api/src/main/webapp/css/HEC.header.css +++ b/cwms-data-api/src/main/webapp/css/HEC.header.css @@ -373,14 +373,14 @@ a { color: #f1f1f1; } -.overlay .closebtn { +.overlay .closeBtn { position: absolute; top: 20px; right: 45px; font-size: 60px; } -.closebtn:hover::before { +.closeBtn:hover::before { content: ""; } @@ -455,7 +455,7 @@ a { .top-level-menu { list-style: none; - display: block; + display: flex; padding: 0; color: #d0d0d0; font-size: 13.6px; @@ -484,6 +484,11 @@ a { line-height: initial; } +/* Bootstrap/tailwind-esq classes */ +.ml-auto { + margin-left: auto; +} + /* Menu Link Styles */ .top-level-menu a @@ -598,7 +603,7 @@ a { display: inline-block; } - .overlay .closebtn { + .overlay .closeBtn { font-size: 40px; top: -5px; right: 5px; diff --git a/cwms-data-api/src/main/webapp/js/header.js b/cwms-data-api/src/main/webapp/js/header.js index 969ee4ca61..5532393ae2 100644 --- a/cwms-data-api/src/main/webapp/js/header.js +++ b/cwms-data-api/src/main/webapp/js/header.js @@ -1,31 +1,38 @@ -window.addEventListener("load", function() { - var coll_mob = document.getElementsByClassName("collapsible-mobile"); - for (let col_m_idx = 0; col_m_idx < coll_mob.length; col_m_idx++) { +// Setup the page's collapses +let coll_mob = document.getElementsByClassName("collapsible-mobile"); +for (let col_m_idx = 0; col_m_idx < coll_mob.length; col_m_idx++) { coll_mob[col_m_idx].addEventListener("click", function (e) { - this.classList.toggle("active"); - var content = this.nextElementSibling; - if (content.style.display == "none") { - content.style.display = "block"; - } else { - content.style.display = "none"; - } + this.classList.toggle("active"); + const content = this.nextElementSibling; + if (content.style.display == "none") { + content.style.display = "block"; + } else { + content.style.display = "none"; + } }); - } -}, false); +} +const burgerBtn = document.getElementById("burgerBtn"); +if (burgerBtn) { + burgerBtn.addEventListener("click", openNav); +} +const closeBtn = document.querySelector(".closeBtn"); +if (closeBtn) { + closeBtn.addEventListener("click", closeNav); +} // Mobile Burger Bar function openNav() { - var mobileNav = document.getElementById("mobileNav"); - mobileNav.classList.add("open"); - var child = document.getElementById("mobileNavContent"); - mobileNav.style.right = child.clientWidth - child.offsetWidth + "px"; - var open = document.getElementById("burgerBtn"); - open.style.display = "none"; - var child = document.getElementById("overlay-content"); + const mobileNav = document.getElementById("mobileNav"); + mobileNav.classList.add("open"); + const child = document.getElementById("mobileNavContent"); + mobileNav.style.right = child.clientWidth - child.offsetWidth + "px"; + const BURGER_BTN = document.getElementById("burgerBtn"); + BURGER_BTN.style.display = "none"; } function closeNav() { - mobileNav.classList.remove("open"); - var open = document.getElementById("burgerBtn"); - open.style.display = null; + const mobileNav = document.getElementById("mobileNav") + mobileNav.classList.remove("open"); + const BURGER_BTN = document.getElementById("burgerBtn"); + BURGER_BTN.style.display = null; } diff --git a/cwms-data-api/src/main/webapp/js/util.js b/cwms-data-api/src/main/webapp/js/util.js index d0ccce2435..de70375b5d 100644 --- a/cwms-data-api/src/main/webapp/js/util.js +++ b/cwms-data-api/src/main/webapp/js/util.js @@ -1,14 +1,41 @@ -function load (id, url) { - var con = document.getElementById(id) - var xhr = new XMLHttpRequest(); - - xhr.onreadystatechange = function (e) { - if (xhr.readyState == 4 && xhr.status == 200) { - con.innerHTML = xhr.responseText; - } - } - - xhr.open("GET", url, true); - xhr.setRequestHeader('Content-type', 'text/html'); - xhr.send(); +function load(id, url) { + var con = document.getElementById(id); + var xhr = new XMLHttpRequest(); + + xhr.onreadystatechange = function () { + // Check if the request is complete and was successful + if (xhr.readyState == 4 && xhr.status == 200) { + con.innerHTML = xhr.responseText; + + // Reinitialize any scripts in the loaded content + // This is necessary because innerHTML does not execute scripts + // We create new script elements and replace the old ones + // to ensure they are executed. + const scripts = con.querySelectorAll("script"); + scripts.forEach((oldScript) => { + const newScript = document.createElement("script"); + + // Add attributes from the old script to the new one + Array.from(oldScript.attributes).forEach(attr => + newScript.setAttribute(attr.name, attr.value) + ); + + // If the old script has inline code, set it as the text content of the new script + if (oldScript.innerHTML) { + newScript.textContent = oldScript.innerHTML; + } + + // Replace the old script with the new one + oldScript.parentNode.replaceChild(newScript, oldScript); + }); + } + else if (xhr.readyState == 4) { + console.error("Error loading content from " + url + ": " + xhr.statusText); + con.innerHTML = "

Error loading content. Please try again later.

"; + } + }; + + xhr.open("GET", url, true); + xhr.setRequestHeader("Content-type", "text/html"); + xhr.send(); } diff --git a/cwms-data-api/src/main/webapp/templates/HEC.header.html b/cwms-data-api/src/main/webapp/templates/HEC.header.html index 1e9e20aae0..bd88212469 100644 --- a/cwms-data-api/src/main/webapp/templates/HEC.header.html +++ b/cwms-data-api/src/main/webapp/templates/HEC.header.html @@ -16,19 +16,39 @@
- ☰ + ☰
- × + ×
Swagger Docs Swagger UI -
+ CDA GitHub +
+ Client Libraries +
+
+ Python + JavaScript - User Docs + JavaScript - Github +
@@ -48,7 +68,7 @@ - +