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

feat: add stack copy buttons to calculator display

Browse Source
This commit is contained in:
MatMoul
2026-05-15 21:32:43 +02:00
parent 39659745a6
commit 80bcdac320
3 changed files with 120 additions and 14 deletions
Download Patch File Download Diff File Expand all files Collapse all files
samples/calc-02/index.js
+53 -5
View File
@@ -16,6 +16,13 @@ const stackEls = {
X: document.getElementById('stackX'),
};
const stackCopyButtons = {
T: document.querySelector('[data-copy-stack="T"]'),
Z: document.querySelector('[data-copy-stack="Z"]'),
Y: document.querySelector('[data-copy-stack="Y"]'),
X: document.querySelector('[data-copy-stack="X"]'),
};
const keypadGrid = document.getElementById('keypadGrid');
const functionsGrid = document.getElementById('functionsGrid');
const trigoGrid = document.getElementById('trigoGrid');
@@ -113,16 +120,40 @@ function getStackLine(indexFromTop) {
return indexFromTop >= 0 && indexFromTop < calc.stack.length ? calc.stack[indexFromTop] : '';
}
function getStackDisplayValue(label) {
if (label === 'X') {
return calc.isEditing ? calc.inputValue : (calc.formatNumber(getStackLine(0)) || '');
}
if (label === 'Y') {
return calc.isEditing ? (calc.formatNumber(getStackLine(0)) || '') : (calc.formatNumber(getStackLine(1)) || '');
}
if (label === 'Z') {
return calc.isEditing ? (calc.formatNumber(getStackLine(1)) || '') : (calc.formatNumber(getStackLine(2)) || '');
}
return calc.isEditing ? (calc.formatNumber(getStackLine(2)) || '') : (calc.formatNumber(getStackLine(3)) || '');
}
function updateCopyButtons() {
for (const label of ['T', 'Z', 'Y', 'X']) {
const value = getStackDisplayValue(label);
const button = stackCopyButtons[label];
if (!button) continue;
button.classList.toggle('is-visible', Boolean(value));
button.disabled = !value;
button.setAttribute('aria-hidden', value ? 'false' : 'true');
}
}
function render() {
normalizeStack();
const isPortrait = window.matchMedia('(orientation: portrait)').matches || window.innerWidth <= 860;
calculatorEl?.classList.toggle('portrait', isPortrait);
calculatorEl?.classList.toggle('landscape', !isPortrait);
const editingValue = calc.isEditing ? calc.inputValue : '';
stackEls.X.textContent = calc.isEditing ? editingValue : (calc.formatNumber(getStackLine(0)) || '');
stackEls.Y.textContent = calc.isEditing ? (calc.formatNumber(getStackLine(0)) || '') : (calc.formatNumber(getStackLine(1)) || '');
stackEls.Z.textContent = calc.isEditing ? (calc.formatNumber(getStackLine(1)) || '') : (calc.formatNumber(getStackLine(2)) || '');
stackEls.T.textContent = calc.isEditing ? (calc.formatNumber(getStackLine(2)) || '') : (calc.formatNumber(getStackLine(3)) || '');
stackEls.X.textContent = getStackDisplayValue('X');
stackEls.Y.textContent = getStackDisplayValue('Y');
stackEls.Z.textContent = getStackDisplayValue('Z');
stackEls.T.textContent = getStackDisplayValue('T');
updateCopyButtons();
modeButton.textContent = calc.angleMode;
}
@@ -244,6 +275,17 @@ function buildGrid(container, keys) {
keys.forEach((key) => container.appendChild(createKeyButton(key)));
}
async function copyStackValue(label) {
const value = getStackDisplayValue(label);
if (!value) return;
try {
await navigator.clipboard.writeText(value);
setStatus(`Copied ${label}`);
} catch (error) {
setStatus('Copy unavailable', true);
}
}
function handleKeyboard(event) {
if (event.defaultPrevented) return;
const key = event.key;
@@ -321,6 +363,12 @@ window.addEventListener('scroll', () => {
}, true);
window.addEventListener('click', (event) => {
const stackCopyButton = event.target.closest('.stack-copy-button');
if (stackCopyButton) {
const label = stackCopyButton.dataset.copyStack;
if (label) copyStackValue(label);
return;
}
if (modeMenuEl && !event.target.closest('.mode-menu') && event.target !== modeButton) {
closeModeMenu();
}