feat: replace calc topbar controls with popup menus

samples/calc-01/index.js

@@ -9,6 +9,10 @@ const inputValueLabel = document.getElementById('inputValueLabel');
 const editingLabel = document.getElementById('editingLabel');
 const modeLabel = document.getElementById('modeLabel');
 const angleMode = document.getElementById('angleMode');
+const modeMenuButton = document.getElementById('modeMenuButton');
+const modeMenu = document.getElementById('modeMenu');
+const constsMenuButton = document.getElementById('constsMenuButton');
+const constsMenu = document.getElementById('constsMenu');
 
 const keyLayouts = {
   functions: [
@@ -137,6 +141,28 @@ function handleBackspaceAction() {
   execute('drop');
 }
 
+function closePopupMenus() {
+  modeMenu.hidden = true;
+  constsMenu.hidden = true;
+  modeMenuButton.setAttribute('aria-expanded', 'false');
+  constsMenuButton.setAttribute('aria-expanded', 'false');
+}
+
+function togglePopupMenu(menuName) {
+  const isModeMenu = menuName === 'mode';
+  const targetMenu = isModeMenu ? modeMenu : constsMenu;
+  const targetButton = isModeMenu ? modeMenuButton : constsMenuButton;
+  const otherMenu = isModeMenu ? constsMenu : modeMenu;
+  const otherButton = isModeMenu ? constsMenuButton : modeMenuButton;
+  const willOpen = targetMenu.hidden;
+
+  otherMenu.hidden = true;
+  otherButton.setAttribute('aria-expanded', 'false');
+
+  targetMenu.hidden = !willOpen;
+  targetButton.setAttribute('aria-expanded', String(willOpen));
+}
+
 function createButton(cell) {
   if (!cell) {
     const spacer = document.createElement('div');
@@ -151,6 +177,7 @@ function createButton(cell) {
   button.className = cell.className;
   button.addEventListener('click', () => {
     focusScreen();
+    closePopupMenus();
     if (cell.type === 'input') {
       pressKey(cell.value);
       return;
@@ -164,6 +191,11 @@ function createButton(cell) {
         handleBackspaceAction();
         return;
       }
+      if (cell.value === 'setModeDeg' || cell.value === 'setModeRad' || cell.value === 'setModeGrad') {
+        angleMode.value = cell.value === 'setModeDeg' ? 'deg' : (cell.value === 'setModeRad' ? 'rad' : 'grad');
+        angleMode.dispatchEvent(new Event('change'));
+        return;
+      }
     }
     execute(cell.value);
   });
@@ -348,6 +380,7 @@ function render() {
   inputValueLabel.textContent = calc.inputValue || '∅';
   editingLabel.textContent = String(calc.isEditing);
   modeLabel.textContent = calc.angleMode;
+  modeMenuButton.textContent = calc.angleMode;
   angleMode.value = calc.angleMode;
   errorEl.textContent = '';
 }
@@ -593,18 +626,43 @@ function handleKeydown(event) {
 
 window.addEventListener('keydown', handleKeydown);
 
-screen.addEventListener('click', focusScreen);
+screen.addEventListener('click', () => {
+  closePopupMenus();
+  focusScreen();
+});
 window.addEventListener('load', focusScreen);
 
+document.addEventListener('click', (event) => {
+  if (!event.target.closest('#modeMenuWrap') && !event.target.closest('#constsMenuWrap')) {
+    closePopupMenus();
+  }
+});
+
+modeMenuButton.addEventListener('click', (event) => {
+  event.stopPropagation();
+  togglePopupMenu('mode');
+});
+
+constsMenuButton.addEventListener('click', (event) => {
+  event.stopPropagation();
+  togglePopupMenu('consts');
+});
+
 angleMode.addEventListener('change', (event) => {
   calc.angleMode = event.target.value;
+  closePopupMenus();
   render();
 });
 
 renderKeyLayout(document.getElementById('functionsButtons'), keyLayouts.functions);
 renderKeyLayout(document.getElementById('numbersButtons'), keyLayouts.numbers);
 renderKeyLayout(document.getElementById('operatorsButtons'), keyLayouts.operators);
-renderKeyLayout(document.getElementById('constButtons'), [topButtons.consts]);
+renderKeyLayout(modeMenu, [[
+  { type: 'action', value: 'setModeDeg', label: 'Degrees', className: 'key-function' },
+  { type: 'action', value: 'setModeRad', label: 'Radians', className: 'key-function' },
+  { type: 'action', value: 'setModeGrad', label: 'Grads', className: 'key-function' },
+]]);
+renderKeyLayout(constsMenu, [topButtons.consts]);
 document.getElementById('deleteButton').appendChild(createButton(topButtons.del));
 document.getElementById('backspaceButton').appendChild(createButton(topButtons.backspace));
 document.getElementById('escapeButton').appendChild(createButton(topButtons.escape));