Setting menu click handler cleanup

src/emulator.js

@@ -610,7 +610,7 @@ class EmulatorJS {
         
         let timeout = null;
         const hide = () => {
-            if (this.paused) return;
+            if (this.paused || this.settingsMenuOpen) return;
             this.elements.menu.classList.add("ejs_menu_bar_hidden");
         }
         
@@ -714,17 +714,31 @@ class EmulatorJS {
         this.elements.menu.appendChild(spacer);
         
         this.settingParent = this.createElement("div");
-        let menuOpen = false;
+        this.settingsMenuOpen = false;
         const settingButton = addButton("Settings", '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path d="M495.9 166.6C499.2 175.2 496.4 184.9 489.6 191.2L446.3 230.6C447.4 238.9 448 247.4 448 256C448 264.6 447.4 273.1 446.3 281.4L489.6 320.8C496.4 327.1 499.2 336.8 495.9 345.4C491.5 357.3 486.2 368.8 480.2 379.7L475.5 387.8C468.9 398.8 461.5 409.2 453.4 419.1C447.4 426.2 437.7 428.7 428.9 425.9L373.2 408.1C359.8 418.4 344.1 427 329.2 433.6L316.7 490.7C314.7 499.7 307.7 506.1 298.5 508.5C284.7 510.8 270.5 512 255.1 512C241.5 512 227.3 510.8 213.5 508.5C204.3 506.1 197.3 499.7 195.3 490.7L182.8 433.6C167 427 152.2 418.4 138.8 408.1L83.14 425.9C74.3 428.7 64.55 426.2 58.63 419.1C50.52 409.2 43.12 398.8 36.52 387.8L31.84 379.7C25.77 368.8 20.49 357.3 16.06 345.4C12.82 336.8 15.55 327.1 22.41 320.8L65.67 281.4C64.57 273.1 64 264.6 64 256C64 247.4 64.57 238.9 65.67 230.6L22.41 191.2C15.55 184.9 12.82 175.3 16.06 166.6C20.49 154.7 25.78 143.2 31.84 132.3L36.51 124.2C43.12 113.2 50.52 102.8 58.63 92.95C64.55 85.8 74.3 83.32 83.14 86.14L138.8 103.9C152.2 93.56 167 84.96 182.8 78.43L195.3 21.33C197.3 12.25 204.3 5.04 213.5 3.51C227.3 1.201 241.5 0 256 0C270.5 0 284.7 1.201 298.5 3.51C307.7 5.04 314.7 12.25 316.7 21.33L329.2 78.43C344.1 84.96 359.8 93.56 373.2 103.9L428.9 86.14C437.7 83.32 447.4 85.8 453.4 92.95C461.5 102.8 468.9 113.2 475.5 124.2L480.2 132.3C486.2 143.2 491.5 154.7 495.9 166.6V166.6zM256 336C300.2 336 336 300.2 336 255.1C336 211.8 300.2 175.1 256 175.1C211.8 175.1 176 211.8 176 255.1C176 300.2 211.8 336 256 336z"/></svg>', () => {
-            menuOpen = !menuOpen;
+            this.settingsMenuOpen = !this.settingsMenuOpen;
-            settingButton[1].classList.toggle("ejs_svg_rotate", menuOpen);
+            settingButton[1].classList.toggle("ejs_svg_rotate", this.settingsMenuOpen);
-            settingButton[2].style.display = menuOpen ? "none" : "";
+            settingButton[2].style.display = this.settingsMenuOpen ? "none" : "";
-            this.settingsMenu.style.display = menuOpen ? "" : "none";
+            this.settingsMenu.style.display = this.settingsMenuOpen ? "" : "none";
         }, this.settingParent, true);
         this.elements.menu.appendChild(this.settingParent);
-        
+        this.closeSettingsMenu = () => {
-        
+            if (!this.settingsMenu) return;
-        
+            this.settingsMenuOpen = false;
+            settingButton[1].classList.toggle("ejs_svg_rotate", this.settingsMenuOpen);
+            settingButton[2].style.display = "";
+            this.settingsMenu.style.display = "none";
+        }
+        this.addEventListener(this.elements.parent, "click", (e) => {
+            if (e.target === settingButton[0]) return;
+            setTimeout(() => {
+                if (this.settingsJustClicked) {
+                    this.settingsJustClicked = false;
+                    return;
+                }
+                this.closeSettingsMenu();
+            }, 10)
+        })
         
         const enter = addButton("Enter Fullscreen", '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path d="M208 281.4c-12.5-12.5-32.76-12.5-45.26-.002l-78.06 78.07l-30.06-30.06c-6.125-6.125-14.31-9.367-22.63-9.367c-4.125 0-8.279 .7891-12.25 2.43c-11.97 4.953-19.75 16.62-19.75 29.56v135.1C.0013 501.3 10.75 512 24 512h136c12.94 0 24.63-7.797 29.56-19.75c4.969-11.97 2.219-25.72-6.938-34.87l-30.06-30.06l78.06-78.07c12.5-12.49 12.5-32.75 .002-45.25L208 281.4zM487.1 0h-136c-12.94 0-24.63 7.797-29.56 19.75c-4.969 11.97-2.219 25.72 6.938 34.87l30.06 30.06l-78.06 78.07c-12.5 12.5-12.5 32.76 0 45.26l22.62 22.62c12.5 12.5 32.76 12.5 45.26 0l78.06-78.07l30.06 30.06c9.156 9.141 22.87 11.84 34.87 6.937C504.2 184.6 512 172.9 512 159.1V23.1C512 10.74 501.3 0 487.1 0z"/></svg>', () => {
             if (this.elements.parent.requestFullscreen) {
@@ -1472,6 +1486,9 @@ class EmulatorJS {
     }
     setupSettingsMenu() {
         this.settingsMenu = this.createElement("div");
+        this.addEventListener(this.settingsMenu, "click", (e) => {
+            this.settingsJustClicked = true;
+        })
         this.settingsMenu.classList.add("ejs_settings_parent");
         const nested = this.createElement("div");
         nested.classList.add("ejs_settings_transition");