Deduplicate popout menu code; adjust styling

macrovision.css

@@ -872,9 +872,9 @@ button {
 }
 
 .menu-button {
-    height: 56pt;
-    width: 56pt;
-    font-size: 36pt;
+    height: 36pt;
+    width: 36pt;
+    font-size: 24pt;
     padding: 5px;
 }
 
@@ -884,8 +884,8 @@ button {
 }
 
 .menu-text {
-    font-size: 24pt;
-    margin-left: 6pt;
+    font-size: 16pt;
+    margin-left: 3pt;
 }
 
 #options-entity-defaults > button {

macrovision.html

@@ -52,7 +52,10 @@
     }
   </script>
   <input hidden id="file-upload-picker" type='file' multiple>
-  <div class="popout-menu" id="sidebar-menu">
+  <div class="popout-menu" id="menu-menu">
+
+  </div>
+  <div class="popout-menu" id="scene-menu">
 
   </div>
   <div class="popout-menu" id="settings-menu">

macrovision.js

@@ -3147,7 +3147,7 @@ function handleResize(update = true) {
 }
 
 function preparePopoutMenu() {
-    const menubar = document.querySelector("#sidebar-menu");
+    const menubar = document.querySelector("#menu-menu");
 
     [
         {
@@ -4116,183 +4116,86 @@ function entityRelativePosition(pos, entityElement) {
     return pos;
 }
 
-function setupMenuButtons() {
-    document
-        .querySelector("#copy-screenshot")
-        .addEventListener("click", (e) => {
-            copyScreenshot();
-        });
-
-    document
-        .querySelector("#save-screenshot")
-        .addEventListener("click", (e) => {
-            saveScreenshot();
-        });
-
-    document
-        .querySelector("#open-screenshot")
-        .addEventListener("click", (e) => {
-            openScreenshot();
-        });
-
-    document.querySelector("#toggle-menu").addEventListener("click", (e) => {
-        const popoutMenu = document.querySelector("#sidebar-menu");
-        if (popoutMenu.classList.contains("visible")) {
-            popoutMenu.classList.remove("visible");
-        } else {
-            document
-                .querySelectorAll(".popout-menu")
-                .forEach((menu) => menu.classList.remove("visible"));
-            const rect = e.target.getBoundingClientRect();
-            popoutMenu.classList.add("visible");
-
-            popoutMenu.style.left = rect.x + rect.width + 10 + "px";
-            popoutMenu.style.top = rect.y + rect.height + 10 + "px";
-
-            let menuWidth = popoutMenu.getBoundingClientRect().width;
-            let screenWidth = window.innerWidth;
-
-            if (menuWidth * 1.5 > screenWidth) {
-                popoutMenu.style.left = 25 + "px";
-            }
-        }
-        e.stopPropagation();
-    });
-
-    document.querySelector("#sidebar-menu").addEventListener("click", (e) => {
-        e.stopPropagation();
-    });
-
-    document.querySelector("#sidebar-menu").addEventListener("touchstart", (e) => {
-        e.stopPropagation();
-    });
-
-    document.addEventListener("click", (e) => {
-        document.querySelector("#sidebar-menu").classList.remove("visible");
-    });
-
-    document.addEventListener("touchstart", (e) => {
-        document.querySelector("#sidebar-menu").classList.remove("visible");
-    });
+function hidePopoutMenu(id) {
+    document.querySelector(id).classList.remove("visible");
+}
 
+function showPopoutMenu(id, event) {
     document
-        .querySelector("#toggle-settings")
-        .addEventListener("click", (e) => {
-            const popoutMenu = document.querySelector("#settings-menu");
-            if (popoutMenu.classList.contains("visible")) {
-                popoutMenu.classList.remove("visible");
-            } else {
-                document
-                    .querySelectorAll(".popout-menu")
-                    .forEach((menu) => menu.classList.remove("visible"));
-                const rect = e.target.getBoundingClientRect();
-                popoutMenu.classList.add("visible");
-                popoutMenu.style.left = rect.x + rect.width + 10 + "px";
-                popoutMenu.style.top = rect.y + rect.height + 10 + "px";
-
-                let menuWidth = popoutMenu.getBoundingClientRect().width;
-                let screenWidth = window.innerWidth;
-
-                if (menuWidth * 1.5 > screenWidth) {
-                    popoutMenu.style.left = 25 + "px";
-                }
-            }
-            e.stopPropagation();
-        });
-
-    document.querySelector("#settings-menu").addEventListener("click", (e) => {
-        e.stopPropagation();
-    });
+        .querySelectorAll(".popout-menu")
+        .forEach((menu) => menu.classList.remove("visible"));
+    const popoutMenu = document.querySelector(id);
+    const rect = event.currentTarget.getBoundingClientRect();
+    popoutMenu.classList.add("visible");
 
-    document.querySelector("#settings-menu").addEventListener("touchstart", (e) => {
-        e.stopPropagation();
-    });
+    popoutMenu.style.left = rect.x + "px";
+    popoutMenu.style.top = rect.y + rect.height + "px";
 
-    document.addEventListener("click", (e) => {
-        document.querySelector("#settings-menu").classList.remove("visible");
-    });
+    let menuWidth = popoutMenu.getBoundingClientRect().width;
+    let screenWidth = window.innerWidth;
 
-    document.addEventListener("touchstart", (e) => {
-        document.querySelector("#settings-menu").classList.remove("visible");
-    });
+    if (menuWidth * 1.5 > screenWidth) {
+        popoutMenu.style.left = 25 + "px";
+    }
+}
 
-    document.querySelector("#toggle-filters").addEventListener("click", (e) => {
-        const popoutMenu = document.querySelector("#filters-menu");
+function setupPopoutMenu(type) {
+    let buttonId = "#toggle-" + type;
+    let menuId = "#" + type + "-menu";
+    document.querySelector(buttonId).addEventListener("click", (e) => {
+        const popoutMenu = document.querySelector(menuId);
         if (popoutMenu.classList.contains("visible")) {
-            popoutMenu.classList.remove("visible");
+            hidePopoutMenu(menuId);
         } else {
-            document
-                .querySelectorAll(".popout-menu")
-                .forEach((menu) => menu.classList.remove("visible"));
-            const rect = e.target.getBoundingClientRect();
-            popoutMenu.classList.add("visible");
-            popoutMenu.style.left = rect.x + rect.width + 10 + "px";
-            popoutMenu.style.top = rect.y + rect.height + 10 + "px";
-
-            let menuWidth = popoutMenu.getBoundingClientRect().width;
-            let screenWidth = window.innerWidth;
-
-            if (menuWidth * 1.5 > screenWidth) {
-                popoutMenu.style.left = 25 + "px";
-            }
+            showPopoutMenu(menuId, e);
         }
         e.stopPropagation();
     });
 
-    document.querySelector("#filters-menu").addEventListener("click", (e) => {
+    document.querySelector(buttonId).addEventListener("touchend", (e) => {
         e.stopPropagation();
     });
 
-    document.querySelector("#filters-menu").addEventListener("touchstart", (e) => {
+    document.querySelector(menuId).addEventListener("click", (e) => {
         e.stopPropagation();
     });
 
-    document.addEventListener("click", (e) => {
-        document.querySelector("#filters-menu").classList.remove("visible");
+    document.querySelector(menuId).addEventListener("touchend", (e) => {
+        e.stopPropagation();
     });
 
-    document.addEventListener("touchstart", (e) => {
-        document.querySelector("#filters-menu").classList.remove("visible");
+    document.addEventListener("click", (e) => {
+        document.querySelector(menuId).classList.remove("visible");
     });
 
-    document.querySelector("#toggle-info").addEventListener("click", (e) => {
-        const popoutMenu = document.querySelector("#info-menu");
-        if (popoutMenu.classList.contains("visible")) {
-            popoutMenu.classList.remove("visible");
-        } else {
-            document
-                .querySelectorAll(".popout-menu")
-                .forEach((menu) => menu.classList.remove("visible"));
-            const rect = e.target.getBoundingClientRect();
-            popoutMenu.classList.add("visible");
-            popoutMenu.style.left = rect.x + rect.width + 10 + "px";
-            popoutMenu.style.top = rect.y + rect.height + 10 + "px";
-
-            let menuWidth = popoutMenu.getBoundingClientRect().width;
-            let screenWidth = window.innerWidth;
-
-            if (menuWidth * 1.5 > screenWidth) {
-                popoutMenu.style.left = 25 + "px";
-            }
-        }
-        e.stopPropagation();
+    document.addEventListener("touchend", (e) => {
+        document.querySelector(menuId).classList.remove("visible");
     });
+}
 
-    document.querySelector("#info-menu").addEventListener("click", (e) => {
-        e.stopPropagation();
-    });
+function setupMenuButtons() {
+    document
+        .querySelector("#copy-screenshot")
+        .addEventListener("click", (e) => {
+            copyScreenshot();
+        });
 
-    document.querySelector("#info-menu").addEventListener("touchstart", (e) => {
-        e.stopPropagation();
-    });
+    document
+        .querySelector("#save-screenshot")
+        .addEventListener("click", (e) => {
+            saveScreenshot();
+        });
 
-    document.addEventListener("click", (e) => {
-        document.querySelector("#info-menu").classList.remove("visible");
-    });
+    document
+        .querySelector("#open-screenshot")
+        .addEventListener("click", (e) => {
+            openScreenshot();
+        });
 
-    document.addEventListener("touchstart", (e) => {
-        document.querySelector("#info-menu").classList.remove("visible");
-    });
+    setupPopoutMenu("menu");
+    setupPopoutMenu("settings");
+    setupPopoutMenu("filters");
+    setupPopoutMenu("info");
 }
 
 function setupSidebar() {