m/mtm-rpn-js
1
0
Fork 0
Code Issues Actions Activity

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

Browse Source
This commit is contained in:
MatMoul
2026-04-24 23:55:00 +02:00
parent 613e688608
commit e9a6ad49d1
1 changed files with 75 additions and 67 deletions
Download Patch File Download Diff File Expand all files Collapse all files
samples/hp48/index.html
+75 -67
View File
@@ -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>