Skip to content

Commit eec1b0c

Browse files
krowvinrma-bryson
krowvin
authored and
rma-bryson
committed
[WebUI] Fix legacy web UI mobile menu + Add menu items (#1190)
- Update touched files to newer const/let - Update `load` method for html files with JS - Update header to include github + client library links to desktop and mobile
1 parent c07fc3b commit eec1b0c

4 files changed

Lines changed: 102 additions & 43 deletions

File tree

‎cwms-data-api/src/main/webapp/css/HEC.header.css‎

Lines changed: 9 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -373,14 +373,14 @@ a {
373373
color: #f1f1f1;
374374
}
375375

376-
.overlay .closebtn {
376+
.overlay .closeBtn {
377377
position: absolute;
378378
top: 20px;
379379
right: 45px;
380380
font-size: 60px;
381381
}
382382

383-
.closebtn:hover::before {
383+
.closeBtn:hover::before {
384384
content: "";
385385
}
386386

@@ -455,7 +455,7 @@ a {
455455

456456
.top-level-menu {
457457
list-style: none;
458-
display: block;
458+
display: flex;
459459
padding: 0;
460460
color: #d0d0d0;
461461
font-size: 13.6px;
@@ -484,6 +484,11 @@ a {
484484
line-height: initial;
485485
}
486486

487+
/* Bootstrap/tailwind-esq classes */
488+
.ml-auto {
489+
margin-left: auto;
490+
}
491+
487492
/* Menu Link Styles */
488493

489494
.top-level-menu a
@@ -598,7 +603,7 @@ a {
598603
display: inline-block;
599604
}
600605

601-
.overlay .closebtn {
606+
.overlay .closeBtn {
602607
font-size: 40px;
603608
top: -5px;
604609
right: 5px;

‎cwms-data-api/src/main/webapp/js/header.js‎

Lines changed: 29 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -1,31 +1,38 @@
1-
window.addEventListener("load", function() {
2-
var coll_mob = document.getElementsByClassName("collapsible-mobile");
3-
for (let col_m_idx = 0; col_m_idx < coll_mob.length; col_m_idx++) {
1+
// Setup the page's collapses
2+
let coll_mob = document.getElementsByClassName("collapsible-mobile");
3+
for (let col_m_idx = 0; col_m_idx < coll_mob.length; col_m_idx++) {
44
coll_mob[col_m_idx].addEventListener("click", function (e) {
5-
this.classList.toggle("active");
6-
var content = this.nextElementSibling;
7-
if (content.style.display == "none") {
8-
content.style.display = "block";
9-
} else {
10-
content.style.display = "none";
11-
}
5+
this.classList.toggle("active");
6+
const content = this.nextElementSibling;
7+
if (content.style.display == "none") {
8+
content.style.display = "block";
9+
} else {
10+
content.style.display = "none";
11+
}
1212
});
13-
}
14-
}, false);
13+
}
14+
const burgerBtn = document.getElementById("burgerBtn");
15+
if (burgerBtn) {
16+
burgerBtn.addEventListener("click", openNav);
17+
}
18+
const closeBtn = document.querySelector(".closeBtn");
19+
if (closeBtn) {
20+
closeBtn.addEventListener("click", closeNav);
21+
}
1522

1623
// Mobile Burger Bar
1724
function openNav() {
18-
var mobileNav = document.getElementById("mobileNav");
19-
mobileNav.classList.add("open");
20-
var child = document.getElementById("mobileNavContent");
21-
mobileNav.style.right = child.clientWidth - child.offsetWidth + "px";
22-
var open = document.getElementById("burgerBtn");
23-
open.style.display = "none";
24-
var child = document.getElementById("overlay-content");
25+
const mobileNav = document.getElementById("mobileNav");
26+
mobileNav.classList.add("open");
27+
const child = document.getElementById("mobileNavContent");
28+
mobileNav.style.right = child.clientWidth - child.offsetWidth + "px";
29+
const BURGER_BTN = document.getElementById("burgerBtn");
30+
BURGER_BTN.style.display = "none";
2531
}
2632

2733
function closeNav() {
28-
mobileNav.classList.remove("open");
29-
var open = document.getElementById("burgerBtn");
30-
open.style.display = null;
34+
const mobileNav = document.getElementById("mobileNav")
35+
mobileNav.classList.remove("open");
36+
const BURGER_BTN = document.getElementById("burgerBtn");
37+
BURGER_BTN.style.display = null;
3138
}

‎cwms-data-api/src/main/webapp/js/util.js‎

Lines changed: 40 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,41 @@
1-
function load (id, url) {
2-
var con = document.getElementById(id)
3-
var xhr = new XMLHttpRequest();
4-
5-
xhr.onreadystatechange = function (e) {
6-
if (xhr.readyState == 4 && xhr.status == 200) {
7-
con.innerHTML = xhr.responseText;
8-
}
9-
}
10-
11-
xhr.open("GET", url, true);
12-
xhr.setRequestHeader('Content-type', 'text/html');
13-
xhr.send();
1+
function load(id, url) {
2+
var con = document.getElementById(id);
3+
var xhr = new XMLHttpRequest();
4+
5+
xhr.onreadystatechange = function () {
6+
// Check if the request is complete and was successful
7+
if (xhr.readyState == 4 && xhr.status == 200) {
8+
con.innerHTML = xhr.responseText;
9+
10+
// Reinitialize any scripts in the loaded content
11+
// This is necessary because innerHTML does not execute scripts
12+
// We create new script elements and replace the old ones
13+
// to ensure they are executed.
14+
const scripts = con.querySelectorAll("script");
15+
scripts.forEach((oldScript) => {
16+
const newScript = document.createElement("script");
17+
18+
// Add attributes from the old script to the new one
19+
Array.from(oldScript.attributes).forEach(attr =>
20+
newScript.setAttribute(attr.name, attr.value)
21+
);
22+
23+
// If the old script has inline code, set it as the text content of the new script
24+
if (oldScript.innerHTML) {
25+
newScript.textContent = oldScript.innerHTML;
26+
}
27+
28+
// Replace the old script with the new one
29+
oldScript.parentNode.replaceChild(newScript, oldScript);
30+
});
31+
}
32+
else if (xhr.readyState == 4) {
33+
console.error("Error loading content from " + url + ": " + xhr.statusText);
34+
con.innerHTML = "<p>Error loading content. Please try again later.</p>";
35+
}
36+
};
37+
38+
xhr.open("GET", url, true);
39+
xhr.setRequestHeader("Content-type", "text/html");
40+
xhr.send();
1441
}

‎cwms-data-api/src/main/webapp/templates/HEC.header.html‎

Lines changed: 24 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -16,19 +16,39 @@
1616
<ul class="top-level-menu">
1717
<li><a href="./swagger-docs">Swagger Docs</a></li>
1818
<li><a href="./swagger-ui.html">Swagger UI</a></li>
19+
<li><a>Client Libraries <i class="fas fa-caret-down"></i></a>
20+
<ul class="second-level-menu">
21+
<li><a href="https://github.com/HydrologicEngineeringCenter/cwms-python"><i class="fab fa-python"></i> Python</a></li>
22+
<li><a href="#"><i class="fab fa-js-square"></i> JavaScript <i class="fas fa-caret-right"></i></a>
23+
<ul class="third-level-menu">
24+
<li><a href="https://hydrologicengineeringcenter.github.io/cwms-data-api-client-javascript/"> User Docs</a></li>
25+
<li><a href="https://github.com/hydrologicengineeringcenter/cwms-data-api-client-javascript"><i class="fab fa-github"></i> Github</a></li>
26+
</ul>
27+
</li>
28+
</ul>
29+
</li>
30+
<li class="ml-auto"><a href="https://hydrologicengineeringcenter.github.io/cwms-data-api-client-java/"><i class="fab fa-github"></i> CDA GitHub</a></li>
1931
<li id="sphinx-docs" />
2032
</ul>
2133
</div>
2234
<div id="mobile-menu">
23-
<span class="burger-bar" id="burgerBtn" onclick="openNav()">&#9776;</span>
35+
<span class="burger-bar" id="burgerBtn">&#9776;</span>
2436
</div>
2537
</div>
2638
<div id="mobileNav" class="overlay">
27-
<a href="javascript:void(0)" class="closebtn" onclick="closeNav()">&times;</a>
39+
<a href="javascript:void(0)" class="closeBtn">&times;</a>
2840
<div id="mobileNavContent" class="overlay-content">
2941
<a class="home mobile-top-level-menu" href="./swagger-docs">Swagger Docs</a>
3042
<a class="home mobile-top-level-menu" href="./swagger-ui.html">Swagger UI</a>
31-
</div>
43+
<a class="home mobile-top-level-menu" href="https://hydrologicengineeringcenter.github.io/cwms-data-api-client-java/"><i class="fab fa-github"></i> CDA GitHub</a>
44+
<div title="Click to Expand" class="collapsible-mobile mobile-top-level-menu active">
45+
Client Libraries <i class="fas fa-caret-down"></i>
46+
</div>
47+
<div class="content-mobile" style="display: block;">
48+
<a class="menu-item" href="https://github.com/HydrologicEngineeringCenter/cwms-python"><i class="fab fa-python"></i> Python</a>
49+
<a class="menu-item" href="https://hydrologicengineeringcenter.github.io/cwms-data-api-client-javascript/"><i class="fab fa-js-square"></i> JavaScript - User Docs</a>
50+
<a class="menu-item" href="https://github.com/HydrologicEngineeringCenter/cwms-data-api-client-javascript"><i class="fab fa-github"></i> JavaScript - Github</a>
51+
</div>
3252
</div>
3353
</div>
3454
</div>
@@ -48,7 +68,7 @@
4868
</div>
4969

5070
<!-- Burger Bar Control -->
51-
<script defer type="text/javascript" src="./js/header.js"></script>
71+
<script defer type="text/javascript" src="./js/header.js?_=2"></script>
5272
<script type="text/javascript">
5373
// Setup the page's collapses
5474
let coll_legend = document.getElementsByClassName("collapsible-legend");

0 commit comments

Comments
 (0)