refactor(samples/hp48): unify popup menu handling and move angle mode into keypad

samples/hp48/index.html

@@ -109,25 +109,12 @@
       pointer-events: none;
     }
 
-    .input-row {
-      display: grid;
-      grid-template-columns: 1fr 150px;
-      gap: 12px;
-      margin-top: 14px;
-    }
-
-    input, select, button {
+    input, button {
       border-radius: 10px;
       border: 1px solid #000;
       font: inherit;
     }
 
-    input, select {
-      padding: 12px 14px;
-      background: #f7f7f7;
-      color: #111;
-    }
-
     .panel {
       position: relative;
       margin-top: 14px;
@@ -219,7 +206,7 @@
     button:active { transform: translateY(1px); }
 
 
-    .constants-menu {
+    .popup-menu {
       position: absolute;
       top: 54px;
       left: 14px;
@@ -234,11 +221,11 @@
       box-shadow: 0 12px 28px rgba(0, 0, 0, 0.35);
     }
 
-    .constants-menu[hidden] {
+    .popup-menu[hidden] {
       display: none;
     }
 
-    .constants-menu button {
+    .popup-menu button {
       width: 100%;
       min-height: 40px;
     }
@@ -257,10 +244,6 @@
         padding: 16px;
       }
 
-      .input-row {
-        grid-template-columns: 1fr;
-      }
-
       .keypad-labels,
       .keypad-wrap {
         gap: 8px;
@@ -313,14 +296,6 @@
 
       <input id="input" class="hidden-input" type="text" autocomplete="off" aria-hidden="true" tabindex="-1">
 
-      <div class="input-row">
-        <select id="angleMode">
-          <option value="deg">Degrees</option>
-          <option value="rad">Radians</option>
-          <option value="grad">Grads</option>
-        </select>
-      </div>
-
       <div class="panel" id="keypadPanel">
         <div class="title">Calculator Keys</div>
         <div class="keypad-labels" aria-hidden="true">
@@ -333,7 +308,12 @@
           <div class="keypad-group numbers" id="numbersKeypad"></div>
           <div class="keypad-group operators" id="operatorsKeypad"></div>
         </div>
-        <div id="constantsMenu" class="constants-menu" hidden>
+        <div id="angleModeMenu" class="popup-menu" hidden>
+          <button type="button" data-angle-mode="deg">deg</button>
+          <button type="button" data-angle-mode="rad">rad</button>
+          <button type="button" data-angle-mode="grad">grad</button>
+        </div>
+        <div id="constantsMenu" class="popup-menu" hidden>
           <button type="button" data-const="pi">π</button>
           <button type="button" data-const="e">e</button>
         </div>
@@ -353,15 +333,15 @@
     const displayEl = document.getElementById('display');
     const errorEl = document.getElementById('error');
     const modeLabel = document.getElementById('modeLabel');
-    const angleMode = document.getElementById('angleMode');
     const functionsKeypadEl = document.getElementById('functionsKeypad');
     const numbersKeypadEl = document.getElementById('numbersKeypad');
     const operatorsKeypadEl = document.getElementById('operatorsKeypad');
     const keypadPanelEl = document.getElementById('keypadPanel');
+    const angleModeMenuEl = document.getElementById('angleModeMenu');
     const constantsMenuEl = document.getElementById('constantsMenu');
 
     let stackCursor = null;
-    let isConstantsMenuOpen = false;
+    let openMenuName = null;
     let isMovingStackItem = false;
     let stackSnapshotBeforeMove = null;
 
@@ -369,8 +349,8 @@
       return {
         functions: [
           [
-            { label: 'consts', type: 'special', value: 'toggleConstsMenu', active: isConstantsMenuOpen, menuAnchor: true },
-            null,
+            { label: calc.angleMode, type: 'special', value: 'toggleAngleModeMenu', active: openMenuName === 'angle-mode', menuAnchor: 'angle-mode' },
+            { label: 'consts', type: 'special', value: 'toggleConstsMenu', active: openMenuName === 'constants', menuAnchor: 'constants' },
             null,
             null,
           ],
@@ -481,7 +461,7 @@
             button.classList.add('active-toggle');
           }
           if (key.menuAnchor) {
-            button.dataset.menuAnchor = 'constants';
+            button.dataset.menuAnchor = key.menuAnchor;
           }
           button.addEventListener('click', (event) => handleKeypadAction(key, event));
           groupEl.appendChild(button);
@@ -494,46 +474,64 @@
       renderKeypadGroup(functionsKeypadEl, layout.functions);
       renderKeypadGroup(numbersKeypadEl, layout.numbers);
       renderKeypadGroup(operatorsKeypadEl, layout.operators);
-      if (isConstantsMenuOpen) {
-        positionConstantsMenu();
+      if (openMenuName) {
+        positionMenu(openMenuName);
       }
     }
 
-    function openConstantsMenu(anchorEl) {
-      isConstantsMenuOpen = true;
-      constantsMenuEl.hidden = false;
+    function getMenuElement(name) {
+      if (name === 'angle-mode') {
+        return angleModeMenuEl;
+      }
+      if (name === 'constants') {
+        return constantsMenuEl;
+      }
+      return null;
+    }
+
+    function openMenu(name, anchorEl) {
+      const menuEl = getMenuElement(name);
+      if (!menuEl) {
+        return;
+      }
+
+      closeMenu();
+      openMenuName = name;
+      menuEl.hidden = false;
+
       if (anchorEl) {
         const panelRect = keypadPanelEl.getBoundingClientRect();
         const anchorRect = anchorEl.getBoundingClientRect();
-        constantsMenuEl.style.left = `${anchorRect.left - panelRect.left}px`;
-        constantsMenuEl.style.top = `${anchorRect.bottom - panelRect.top + 6}px`;
+        menuEl.style.left = `${anchorRect.left - panelRect.left}px`;
+        menuEl.style.top = `${anchorRect.bottom - panelRect.top + 6}px`;
       }
     }
 
-    function closeConstantsMenu() {
-      isConstantsMenuOpen = false;
+    function closeMenu() {
+      openMenuName = null;
+      angleModeMenuEl.hidden = true;
       constantsMenuEl.hidden = true;
     }
 
-    function positionConstantsMenu() {
-      const anchorEl = keypadPanelEl.querySelector('[data-menu-anchor="constants"]');
+    function positionMenu(name) {
+      const anchorEl = keypadPanelEl.querySelector(`[data-menu-anchor="${name}"]`);
       if (!anchorEl) {
         return;
       }
-      openConstantsMenu(anchorEl);
+      openMenu(name, anchorEl);
     }
 
-    function toggleConstantsMenu(anchorEl) {
-      if (isConstantsMenuOpen) {
-        closeConstantsMenu();
+    function toggleMenu(name, anchorEl) {
+      if (openMenuName === name) {
+        closeMenu();
         return;
       }
-      openConstantsMenu(anchorEl);
+      openMenu(name, anchorEl);
     }
 
     function runEscapeAction() {
-      if (isConstantsMenuOpen) {
-        closeConstantsMenu();
+      if (openMenuName) {
+        closeMenu();
         render();
         return;
       }
@@ -560,8 +558,13 @@
         }
 
         if (key.type === 'special') {
+          if (key.value === 'toggleAngleModeMenu') {
+            toggleMenu('angle-mode', event?.currentTarget);
+            render();
+            return;
+          }
           if (key.value === 'toggleConstsMenu') {
-            toggleConstantsMenu(event?.currentTarget);
+            toggleMenu('constants', event?.currentTarget);
             render();
             return;
           }
@@ -726,7 +729,6 @@
         displayEl.textContent = 'READY';
       }
       modeLabel.textContent = calc.angleMode;
-      angleMode.value = calc.angleMode;
       errorEl.textContent = '';
       renderKeypad();
     }
@@ -964,43 +966,49 @@
 
     window.addEventListener('keydown', handleKeydown);
 
+    angleModeMenuEl.addEventListener('click', (event) => {
+      const button = event.target.closest('[data-angle-mode]');
+      if (!button) {
+        return;
+      }
+      calc.angleMode = button.dataset.angleMode;
+      closeMenu();
+      render();
+    });
+
     constantsMenuEl.addEventListener('click', (event) => {
       const button = event.target.closest('[data-const]');
       if (!button) {
         return;
       }
-      closeConstantsMenu();
+      closeMenu();
       execute(button.dataset.const);
     });
 
     document.addEventListener('click', (event) => {
-      if (!isConstantsMenuOpen) {
+      if (!openMenuName) {
         return;
       }
-      if (constantsMenuEl.contains(event.target)) {
+      const openMenuEl = getMenuElement(openMenuName);
+      if (openMenuEl && openMenuEl.contains(event.target)) {
         return;
       }
-      if (event.target.closest('[data-menu-anchor="constants"]')) {
+      if (event.target.closest(`[data-menu-anchor="${openMenuName}"]`)) {
         return;
       }
-      closeConstantsMenu();
+      closeMenu();
       render();
     });
 
     window.addEventListener('resize', () => {
-      if (isConstantsMenuOpen) {
-        positionConstantsMenu();
+      if (openMenuName) {
+        positionMenu(openMenuName);
       }
     });
 
     screen.addEventListener('click', focusScreen);
     window.addEventListener('load', focusScreen);
 
-    angleMode.addEventListener('change', (event) => {
-      calc.angleMode = event.target.value;
-      render();
-    });
-
     render();
     focusScreen();
   </script>