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);
}
.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 {
background: linear-gradient(180deg, #dbe8b8, var(--screen));
@@ -127,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;
@@ -236,23 +205,8 @@
button:hover { filter: brightness(1.08); }
button:active { transform: translateY(1px); }
.status {
margin-top: 12px;
display: flex;
flex-wrap: wrap;
gap: 10px;
color: #ececec;
font-size: 13px;
}
.pill {
border: 1px solid rgba(255, 255, 255, 0.15);
border-radius: 999px;
padding: 5px 10px;
background: rgba(255, 255, 255, 0.05);
}
.constants-menu {
.popup-menu {
position: absolute;
top: 54px;
left: 14px;
@@ -267,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;
}
@@ -284,22 +238,12 @@
font-size: 13px;
}
.hint {
color: #ddd;
margin-top: 10px;
font-size: 13px;
line-height: 1.5;
}
@media (max-width: 820px) {
.wrap {
padding: 16px;
}
.input-row {
grid-template-columns: 1fr;
}
.keypad-labels,
.keypad-wrap {
gap: 8px;
@@ -321,11 +265,6 @@
border-radius: 16px;
}
.brand {
flex-direction: column;
align-items: flex-start;
}
.keypad-labels,
.keypad-wrap {
grid-template-columns: 1fr;
@@ -346,11 +285,6 @@
<body>
<div class="wrap">
<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-top">
<div>RPN stack</div>
@@ -362,20 +296,6 @@
<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="title">Calculator Keys</div>
<div class="keypad-labels" aria-hidden="true">
@@ -388,14 +308,18 @@
<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>
</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>
@@ -408,18 +332,16 @@
const displayEl = document.getElementById('display');
const errorEl = document.getElementById('error');
const inputValueLabel = document.getElementById('inputValueLabel');
const editingLabel = document.getElementById('editingLabel');
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;
@@ -427,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,
],
@@ -539,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);
@@ -552,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;
}
@@ -618,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;
}
@@ -783,10 +728,7 @@
} else {
displayEl.textContent = 'READY';
}
inputValueLabel.textContent = calc.inputValue || '∅';
editingLabel.textContent = String(calc.isEditing);
modeLabel.textContent = calc.angleMode;
angleMode.value = calc.angleMode;
errorEl.textContent = '';
renderKeypad();
}
@@ -1024,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>