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

Compare commits

base: m/mtm-rpn-js:6dcf1d603cf840bf39ea6b6496ff9f572880c0a9
Branches Tags
m/mtm-rpn-js:dev m/mtm-rpn-js:main
...
compare: m/mtm-rpn-js:e9a6ad49d133ff3cb79e6ed89928e610e6719425
Branches Tags
m/mtm-rpn-js:dev m/mtm-rpn-js:main

2 Commits
6dcf1d603c ... e9a6ad49d1

Author SHA1 Message Date
matmoul e9a6ad49d1 refactor(samples/hp48): unify popup menu handling and move angle mode into keypad 2026-04-24 23:55:00 +02:00
matmoul 613e688608 refactor: simplify hp48 sample UI 2026-04-24 23:53:25 +02:00
1 changed files with 75 additions and 127 deletions
Expand all files Collapse all files
samples/hp48/index.html
+75 -127
View File
@@ -41,24 +41,6 @@
box-shadow: 0 18px 48px rgba(0, 0, 0, 0.25); box-shadow: 0 18px 48px rgba(0, 0, 0, 0.25);
} }
.brand {
color: #fafafa;
display: flex;
justify-content: space-between;
align-items: baseline;
margin-bottom: 12px;
gap: 12px;
}
.brand h1 {
margin: 0;
font-size: 18px;
letter-spacing: 0.06em;
}
.brand small {
color: #c9c9c9;
}
.screen { .screen {
background: linear-gradient(180deg, #dbe8b8, var(--screen)); background: linear-gradient(180deg, #dbe8b8, var(--screen));
@@ -127,25 +109,12 @@
pointer-events: none; pointer-events: none;
} }
.input-row { input, button {
display: grid;
grid-template-columns: 1fr 150px;
gap: 12px;
margin-top: 14px;
}
input, select, button {
border-radius: 10px; border-radius: 10px;
border: 1px solid #000; border: 1px solid #000;
font: inherit; font: inherit;
} }
input, select {
padding: 12px 14px;
background: #f7f7f7;
color: #111;
}
.panel { .panel {
position: relative; position: relative;
margin-top: 14px; margin-top: 14px;
@@ -236,23 +205,8 @@
button:hover { filter: brightness(1.08); } button:hover { filter: brightness(1.08); }
button:active { transform: translateY(1px); } button:active { transform: translateY(1px); }
.status {
margin-top: 12px;
display: flex;
flex-wrap: wrap;
gap: 10px;
color: #ececec;
font-size: 13px;
}
.pill { .popup-menu {
border: 1px solid rgba(255, 255, 255, 0.15);
border-radius: 999px;
padding: 5px 10px;
background: rgba(255, 255, 255, 0.05);
}
.constants-menu {
position: absolute; position: absolute;
top: 54px; top: 54px;
left: 14px; left: 14px;
@@ -267,11 +221,11 @@
box-shadow: 0 12px 28px rgba(0, 0, 0, 0.35); box-shadow: 0 12px 28px rgba(0, 0, 0, 0.35);
} }
.constants-menu[hidden] { .popup-menu[hidden] {
display: none; display: none;
} }
.constants-menu button { .popup-menu button {
width: 100%; width: 100%;
min-height: 40px; min-height: 40px;
} }
@@ -284,22 +238,12 @@
font-size: 13px; font-size: 13px;
} }
.hint {
color: #ddd;
margin-top: 10px;
font-size: 13px;
line-height: 1.5;
}
@media (max-width: 820px) { @media (max-width: 820px) {
.wrap { .wrap {
padding: 16px; padding: 16px;
} }
.input-row {
grid-template-columns: 1fr;
}
.keypad-labels, .keypad-labels,
.keypad-wrap { .keypad-wrap {
gap: 8px; gap: 8px;
@@ -321,11 +265,6 @@
border-radius: 16px; border-radius: 16px;
} }
.brand {
flex-direction: column;
align-items: flex-start;
}
.keypad-labels, .keypad-labels,
.keypad-wrap { .keypad-wrap {
grid-template-columns: 1fr; grid-template-columns: 1fr;
@@ -346,11 +285,6 @@
<body> <body>
<div class="wrap"> <div class="wrap">
<div class="calc"> <div class="calc">
<div class="brand">
<h1>HP48-style RPN</h1>
<small>powered by src/rpn-calculator.js</small>
</div>
<div class="screen" id="screen" tabindex="0" role="application" aria-label="HP48 style calculator screen"> <div class="screen" id="screen" tabindex="0" role="application" aria-label="HP48 style calculator screen">
<div class="screen-top"> <div class="screen-top">
<div>RPN stack</div> <div>RPN stack</div>
@@ -362,20 +296,6 @@
<input id="input" class="hidden-input" type="text" autocomplete="off" aria-hidden="true" tabindex="-1"> <input id="input" class="hidden-input" type="text" autocomplete="off" aria-hidden="true" tabindex="-1">
<div class="input-row">
<div class="hint">Keyboard works globally: digits, numpad, Enter, Backspace, Delete, Esc, ↑, ↓, →, +, -, *, /, %, ^, q, n, r, i, g, l, s, c, S, C, x, y, z, t</div>
<select id="angleMode">
<option value="deg">Degrees</option>
<option value="rad">Radians</option>
<option value="grad">Grads</option>
</select>
</div>
<div class="status">
<div class="pill">inputValue: <span id="inputValueLabel"></span></div>
<div class="pill">isEditing: <span id="editingLabel"></span></div>
</div>
<div class="panel" id="keypadPanel"> <div class="panel" id="keypadPanel">
<div class="title">Calculator Keys</div> <div class="title">Calculator Keys</div>
<div class="keypad-labels" aria-hidden="true"> <div class="keypad-labels" aria-hidden="true">
@@ -388,14 +308,18 @@
<div class="keypad-group numbers" id="numbersKeypad"></div> <div class="keypad-group numbers" id="numbersKeypad"></div>
<div class="keypad-group operators" id="operatorsKeypad"></div> <div class="keypad-group operators" id="operatorsKeypad"></div>
</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="pi">π</button>
<button type="button" data-const="e">e</button> <button type="button" data-const="e">e</button>
</div> </div>
</div> </div>
<div id="error" class="error"></div> <div id="error" class="error"></div>
<div class="hint">Use Enter to commit the current value. Buttons call <code>command(...)</code> directly, like a real RPN demo.</div>
</div> </div>
</div> </div>
@@ -408,18 +332,16 @@
const displayEl = document.getElementById('display'); const displayEl = document.getElementById('display');
const errorEl = document.getElementById('error'); const errorEl = document.getElementById('error');
const inputValueLabel = document.getElementById('inputValueLabel');
const editingLabel = document.getElementById('editingLabel');
const modeLabel = document.getElementById('modeLabel'); const modeLabel = document.getElementById('modeLabel');
const angleMode = document.getElementById('angleMode');
const functionsKeypadEl = document.getElementById('functionsKeypad'); const functionsKeypadEl = document.getElementById('functionsKeypad');
const numbersKeypadEl = document.getElementById('numbersKeypad'); const numbersKeypadEl = document.getElementById('numbersKeypad');
const operatorsKeypadEl = document.getElementById('operatorsKeypad'); const operatorsKeypadEl = document.getElementById('operatorsKeypad');
const keypadPanelEl = document.getElementById('keypadPanel'); const keypadPanelEl = document.getElementById('keypadPanel');
const angleModeMenuEl = document.getElementById('angleModeMenu');
const constantsMenuEl = document.getElementById('constantsMenu'); const constantsMenuEl = document.getElementById('constantsMenu');
let stackCursor = null; let stackCursor = null;
let isConstantsMenuOpen = false; let openMenuName = null;
let isMovingStackItem = false; let isMovingStackItem = false;
let stackSnapshotBeforeMove = null; let stackSnapshotBeforeMove = null;
@@ -427,8 +349,8 @@
return { return {
functions: [ functions: [
[ [
{ label: 'consts', type: 'special', value: 'toggleConstsMenu', active: isConstantsMenuOpen, menuAnchor: true }, { label: calc.angleMode, type: 'special', value: 'toggleAngleModeMenu', active: openMenuName === 'angle-mode', menuAnchor: 'angle-mode' },
null, { label: 'consts', type: 'special', value: 'toggleConstsMenu', active: openMenuName === 'constants', menuAnchor: 'constants' },
null, null,
null, null,
], ],
@@ -539,7 +461,7 @@
button.classList.add('active-toggle'); button.classList.add('active-toggle');
} }
if (key.menuAnchor) { if (key.menuAnchor) {
button.dataset.menuAnchor = 'constants'; button.dataset.menuAnchor = key.menuAnchor;
} }
button.addEventListener('click', (event) => handleKeypadAction(key, event)); button.addEventListener('click', (event) => handleKeypadAction(key, event));
groupEl.appendChild(button); groupEl.appendChild(button);
@@ -552,46 +474,64 @@
renderKeypadGroup(functionsKeypadEl, layout.functions); renderKeypadGroup(functionsKeypadEl, layout.functions);
renderKeypadGroup(numbersKeypadEl, layout.numbers); renderKeypadGroup(numbersKeypadEl, layout.numbers);
renderKeypadGroup(operatorsKeypadEl, layout.operators); renderKeypadGroup(operatorsKeypadEl, layout.operators);
if (isConstantsMenuOpen) { if (openMenuName) {
positionConstantsMenu(); positionMenu(openMenuName);
} }
} }
function openConstantsMenu(anchorEl) { function getMenuElement(name) {
isConstantsMenuOpen = true; if (name === 'angle-mode') {
constantsMenuEl.hidden = false; 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) { if (anchorEl) {
const panelRect = keypadPanelEl.getBoundingClientRect(); const panelRect = keypadPanelEl.getBoundingClientRect();
const anchorRect = anchorEl.getBoundingClientRect(); const anchorRect = anchorEl.getBoundingClientRect();
constantsMenuEl.style.left = `${anchorRect.left - panelRect.left}px`; menuEl.style.left = `${anchorRect.left - panelRect.left}px`;
constantsMenuEl.style.top = `${anchorRect.bottom - panelRect.top + 6}px`; menuEl.style.top = `${anchorRect.bottom - panelRect.top + 6}px`;
} }
} }
function closeConstantsMenu() { function closeMenu() {
isConstantsMenuOpen = false; openMenuName = null;
angleModeMenuEl.hidden = true;
constantsMenuEl.hidden = true; constantsMenuEl.hidden = true;
} }
function positionConstantsMenu() { function positionMenu(name) {
const anchorEl = keypadPanelEl.querySelector('[data-menu-anchor="constants"]'); const anchorEl = keypadPanelEl.querySelector(`[data-menu-anchor="${name}"]`);
if (!anchorEl) { if (!anchorEl) {
return; return;
} }
openConstantsMenu(anchorEl); openMenu(name, anchorEl);
} }
function toggleConstantsMenu(anchorEl) { function toggleMenu(name, anchorEl) {
if (isConstantsMenuOpen) { if (openMenuName === name) {
closeConstantsMenu(); closeMenu();
return; return;
} }
openConstantsMenu(anchorEl); openMenu(name, anchorEl);
} }
function runEscapeAction() { function runEscapeAction() {
if (isConstantsMenuOpen) { if (openMenuName) {
closeConstantsMenu(); closeMenu();
render(); render();
return; return;
} }
@@ -618,8 +558,13 @@
} }
if (key.type === 'special') { if (key.type === 'special') {
if (key.value === 'toggleAngleModeMenu') {
toggleMenu('angle-mode', event?.currentTarget);
render();
return;
}
if (key.value === 'toggleConstsMenu') { if (key.value === 'toggleConstsMenu') {
toggleConstantsMenu(event?.currentTarget); toggleMenu('constants', event?.currentTarget);
render(); render();
return; return;
} }
@@ -783,10 +728,7 @@
} else { } else {
displayEl.textContent = 'READY'; displayEl.textContent = 'READY';
} }
inputValueLabel.textContent = calc.inputValue || '∅';
editingLabel.textContent = String(calc.isEditing);
modeLabel.textContent = calc.angleMode; modeLabel.textContent = calc.angleMode;
angleMode.value = calc.angleMode;
errorEl.textContent = ''; errorEl.textContent = '';
renderKeypad(); renderKeypad();
} }
@@ -1024,43 +966,49 @@
window.addEventListener('keydown', handleKeydown); 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) => { constantsMenuEl.addEventListener('click', (event) => {
const button = event.target.closest('[data-const]'); const button = event.target.closest('[data-const]');
if (!button) { if (!button) {
return; return;
} }
closeConstantsMenu(); closeMenu();
execute(button.dataset.const); execute(button.dataset.const);
}); });
document.addEventListener('click', (event) => { document.addEventListener('click', (event) => {
if (!isConstantsMenuOpen) { if (!openMenuName) {
return; return;
} }
if (constantsMenuEl.contains(event.target)) { const openMenuEl = getMenuElement(openMenuName);
if (openMenuEl && openMenuEl.contains(event.target)) {
return; return;
} }
if (event.target.closest('[data-menu-anchor="constants"]')) { if (event.target.closest(`[data-menu-anchor="${openMenuName}"]`)) {
return; return;
} }
closeConstantsMenu(); closeMenu();
render(); render();
}); });
window.addEventListener('resize', () => { window.addEventListener('resize', () => {
if (isConstantsMenuOpen) { if (openMenuName) {
positionConstantsMenu(); positionMenu(openMenuName);
} }
}); });
screen.addEventListener('click', focusScreen); screen.addEventListener('click', focusScreen);
window.addEventListener('load', focusScreen); window.addEventListener('load', focusScreen);
angleMode.addEventListener('change', (event) => {
calc.angleMode = event.target.value;
render();
});
render(); render();
focusScreen(); focusScreen();
</script> </script>