Code cleanup; removed roundabout JS implementation of settings menu's…

… open and close buttons.
QuiteAFancyEmerald · Jul 18, 2024 · deb8338 · deb8338
1 parent 0d1d3c9
commit deb8338
Show file tree

Hide file tree

Showing 4 changed files with 7 additions and 31 deletions.
diff --git a/views/assets/css/styles-1644738239.css b/views/assets/css/styles-1644738239.css
@@ -423,7 +423,6 @@ details[open] summary {
   z-index: 5; /* Ensures it appears above other content */
   align-items: center;
   justify-content: center;
-  display: none; /* Flexbox to center content */
 }
 
 .settings-content {
@@ -437,7 +436,7 @@ details[open] summary {
   text-align: center;
 }
 
-.dropdown-parent:focus-within .dropdown-settings {
+.dropdown-parent:focus-within .dropdown-settings:not(:is(:has(.close-settings-btn:active))) {
   display: flex; /* Flexbox to center content */
 }
 

diff --git a/views/assets/js/common-16451543478.js b/views/assets/js/common-16451543478.js
@@ -471,7 +471,7 @@ addEventListener("DOMContentLoaded", () => {
 
 //          Which function is used for the click event is determined by
 //          the corresponding location/index in the dirnames object.
-            let functionsList = [
+            const functionsList = [
               () => goFrame(item.path),
               () => goFrame("/?eg&core=" + item.core + "&rom=" + item.rom),
               () => item.custom ? goProx[item.custom]("stealth") : goFrame("/archive/g/" + item.path)

diff --git a/views/assets/js/csel.js b/views/assets/js/csel.js
@@ -67,6 +67,9 @@ readCookie("HBHideAds").then(s => (s != "false") ? pageHideAds() : pageShowAds((
 //  All code below is used by the Settings UI in the navigation bar.
 if (document.getElementById("csel")) {
 
+    let closeBtn = document.querySelector(".dropdown-settings .close-settings-btn");
+    closeBtn.addEventListener("click", () => {document.activeElement.blur()});
+
 //  Allow users to set a custom title with the UI.
     let titleform = document.getElementById("titleform");
     titleform.addEventListener("submit", e => {

diff --git a/views/pages/misc/deobf/header.html b/views/pages/misc/deobf/header.html
@@ -32,38 +32,12 @@
       </ul>
     </div>
   </li>
-  <li class="dropdown-parent open-settings-menu">
+  <li class="dropdown-parent">
     <div class="pulse white-text">
       <a href="#">Settings <i class="fas fa-cog pulse"></i></a>
     </div>
     <div class="dropdown-settings" tabindex="0">
       <div id="csel"><!--SETTINGS--></div>
     </div>
   </li>
-</ul>
-<script>
-function setupSettingsDropdown() {
-  const openSettingsBtn = document.querySelector('.open-settings-menu');
-  const settingsContent = document.querySelector('.dropdown-settings');
-
-  if (!openSettingsBtn || !settingsContent) {
-    console.error('Open settings button or settings content not found.');
-    return;
-  }
-
-  openSettingsBtn.addEventListener('click', () => {
-    settingsContent.style.display = 'flex'; // Display the settings dropdown
-  });
-
-  document.addEventListener('click', (event) => {
-    const isCloseBtn = event.target.closest('.close-settings-btn');
-    if (isCloseBtn) {
-      settingsContent.style.display = 'none'; // Hide the settings dropdown
-    }
-  });
-}
-
-document.addEventListener('DOMContentLoaded', () => {
-  setupSettingsDropdown();
-});
-</script>
+</ul>