From 24bf85a847a4bd5b8e91fc788e54bccb50f0cb8a Mon Sep 17 00:00:00 2001 From: Charles Graham SWT Date: Fri, 18 Jul 2025 13:41:59 -0500 Subject: [PATCH 1/7] Format with prettier --- cwms-data-api/src/main/webapp/js/header.js | 46 +++++++++++----------- 1 file changed, 23 insertions(+), 23 deletions(-) diff --git a/cwms-data-api/src/main/webapp/js/header.js b/cwms-data-api/src/main/webapp/js/header.js index 969ee4ca61..af4afc38fe 100644 --- a/cwms-data-api/src/main/webapp/js/header.js +++ b/cwms-data-api/src/main/webapp/js/header.js @@ -1,31 +1,31 @@ -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++) { - 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"; - } - }); - } +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++) { + 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"; + } + }); + } }, false); // 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"); + 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"); } function closeNav() { - mobileNav.classList.remove("open"); - var open = document.getElementById("burgerBtn"); - open.style.display = null; + mobileNav.classList.remove("open"); + var open = document.getElementById("burgerBtn"); + open.style.display = null; } From 8836ccfb68d2f8da9a55af30e21b88dc36c6f5e5 Mon Sep 17 00:00:00 2001 From: Charles Graham SWT Date: Fri, 18 Jul 2025 13:43:03 -0500 Subject: [PATCH 2/7] Update to modern let/const --- cwms-data-api/src/main/webapp/js/header.js | 15 +++++++-------- 1 file changed, 7 insertions(+), 8 deletions(-) diff --git a/cwms-data-api/src/main/webapp/js/header.js b/cwms-data-api/src/main/webapp/js/header.js index af4afc38fe..7bcab565bc 100644 --- a/cwms-data-api/src/main/webapp/js/header.js +++ b/cwms-data-api/src/main/webapp/js/header.js @@ -1,9 +1,9 @@ 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++) { + let coll_mob = document.getElementsByClassName("collapsible-mobile"); + for (const 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; + const content = this.nextElementSibling; if (content.style.display == "none") { content.style.display = "block"; } else { @@ -15,17 +15,16 @@ window.addEventListener("load", function () { // Mobile Burger Bar function openNav() { - var mobileNav = document.getElementById("mobileNav"); + const mobileNav = document.getElementById("mobileNav"); mobileNav.classList.add("open"); - var child = document.getElementById("mobileNavContent"); + const child = document.getElementById("mobileNavContent"); mobileNav.style.right = child.clientWidth - child.offsetWidth + "px"; - var open = document.getElementById("burgerBtn"); + const open = document.getElementById("burgerBtn"); open.style.display = "none"; - var child = document.getElementById("overlay-content"); } function closeNav() { mobileNav.classList.remove("open"); - var open = document.getElementById("burgerBtn"); + const open = document.getElementById("burgerBtn"); open.style.display = null; } From ca51af824f4a88d072b363b9aecc8dbc52cbef80 Mon Sep 17 00:00:00 2001 From: Charles Graham SWT Date: Fri, 18 Jul 2025 13:55:51 -0500 Subject: [PATCH 3/7] Correct issue with innerHTML tags not being executed when appended tot he DOM. Reinsert them as script DOM nodes --- .../src/main/webapp/css/HEC.header.css | 6 +-- cwms-data-api/src/main/webapp/js/header.js | 44 ++++++++------- cwms-data-api/src/main/webapp/js/util.js | 53 ++++++++++++++----- .../src/main/webapp/templates/HEC.header.html | 7 +-- 4 files changed, 73 insertions(+), 37 deletions(-) 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..a15be1e55b 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: ""; } @@ -598,7 +598,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 7bcab565bc..654d9c9049 100644 --- a/cwms-data-api/src/main/webapp/js/header.js +++ b/cwms-data-api/src/main/webapp/js/header.js @@ -1,17 +1,24 @@ -window.addEventListener("load", function () { - let coll_mob = document.getElementsByClassName("collapsible-mobile"); - for (const 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"); - const content = this.nextElementSibling; - if (content.style.display == "none") { - content.style.display = "block"; - } else { - content.style.display = "none"; - } - }); - } -}, false); +// Setup the page's collapses +let coll_mob = document.getElementsByClassName("collapsible-mobile"); +for (const 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"); + const content = this.nextElementSibling; + if (content.style.display == "none") { + content.style.display = "block"; + } else { + content.style.display = "none"; + } + }); +} +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() { @@ -19,12 +26,13 @@ function openNav() { mobileNav.classList.add("open"); const child = document.getElementById("mobileNavContent"); mobileNav.style.right = child.clientWidth - child.offsetWidth + "px"; - const open = document.getElementById("burgerBtn"); - open.style.display = "none"; + const BURGER_BTN = document.getElementById("burgerBtn"); + BURGER_BTN.style.display = "none"; } function closeNav() { + const mobileNav = document.getElementById("mobileNav") mobileNav.classList.remove("open"); - const open = document.getElementById("burgerBtn"); - open.style.display = null; + 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..0b5d6db3be 100644 --- a/cwms-data-api/src/main/webapp/templates/HEC.header.html +++ b/cwms-data-api/src/main/webapp/templates/HEC.header.html @@ -20,11 +20,11 @@
- ☰ + ☰
- × + ×
Swagger Docs Swagger UI @@ -48,8 +48,9 @@
- +