-
Notifications
You must be signed in to change notification settings - Fork 22
[WebUI] Fix legacy web UI mobile menu + Add menu items #1190
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Merged
+102
−43
Merged
Changes from all commits
Commits
Show all changes
7 commits
Select commit
Hold shift + click to select a range
24bf85a
Format with prettier
krowvin 8836ccf
Update to modern let/const
krowvin ca51af8
Correct issue with innerHTML tags not being executed when appended to…
krowvin 5e0eb10
Add client libraries and github link.
krowvin 8bb07fc
Remove unused console logs
krowvin 7be5e9b
Add icons for languages, include mobile menu items.
krowvin 2b60a21
Remove unused link
krowvin File filter
Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
There are no files selected for viewing
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -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; | ||
| } |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -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 = "<p>Error loading content. Please try again later.</p>"; | ||
| } | ||
| }; | ||
|
|
||
| xhr.open("GET", url, true); | ||
| xhr.setRequestHeader("Content-type", "text/html"); | ||
| xhr.send(); | ||
| } |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
what is the purpose of the
?_=2?There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
This makes sure if someone has loaded the header recently and has it cached that it will force the browser to refetch the file (ignore cache). I've also used
v=2to try to make that more clear in other sites, but I wasn't intending on starting versioning for that file as someone may miss this little detail between updates.Instead I use
_to suggest this parameter value is not important to being passed in.Although technically I don't think this JavaScript was being executed/fetched in the current site so in this case it might not actually do anything!
We could certainly get more into this topic, but it won't matter when the site goes to using vite as it uses a new css/file hash for each build. (Files are hashed on the output of the bundler
rollup): https://vite.dev/guide/build.html#advanced-base-optionsRead more on the cache busting I did above with
_=here: (they usever)https://www.keycdn.com/support/what-is-cache-busting#using-cache-busting-with-a-cdn