feat: add stack copy buttons to calculator display
This commit is contained in:
@@ -87,15 +87,16 @@ body {
|
||||
grid-area: display;
|
||||
position: relative;
|
||||
padding: clamp(12px, 1.5vw, 16px);
|
||||
padding-bottom: clamp(4px, 0.6vw, 8px);
|
||||
background: linear-gradient(180deg, var(--display), var(--display2));
|
||||
color: var(--displayText);
|
||||
font-family: "Courier New", monospace;
|
||||
overflow: hidden;
|
||||
height: clamp(112px, 18vw, 160px);
|
||||
max-height: 140px;
|
||||
height: auto;
|
||||
min-height: clamp(112px, 18vw, 124px);
|
||||
max-height: none;
|
||||
align-self: start;
|
||||
margin-bottom: 0;
|
||||
min-height: 0;
|
||||
}
|
||||
|
||||
.display-grid {
|
||||
@@ -108,7 +109,7 @@ body {
|
||||
|
||||
.stack-cell {
|
||||
display: grid;
|
||||
grid-template-columns: 2.2ch 1fr;
|
||||
grid-template-columns: 2.2ch 1fr auto;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
font-size: clamp(18px, 3vw, 30px);
|
||||
@@ -283,7 +284,7 @@ button {
|
||||
text-shadow: 0 1px 0 rgba(0, 0, 0, 0.35);
|
||||
cursor: pointer;
|
||||
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.18), 0 3px 0 rgba(0, 0, 0, 0.28);
|
||||
transition: transform 120ms ease, filter 120ms ease, box-shadow 120ms ease;
|
||||
transition: transform 120ms ease, filter 120ms ease, box-shadow 120ms ease, opacity 120ms ease;
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
@@ -304,6 +305,57 @@ button:active {
|
||||
transform: translateY(2px);
|
||||
}
|
||||
|
||||
.stack-copy-button {
|
||||
padding: 4px;
|
||||
border-radius: 999px;
|
||||
min-width: 24px;
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
display: inline-grid;
|
||||
place-items: center;
|
||||
opacity: 0;
|
||||
pointer-events: none;
|
||||
transform: scale(0.9);
|
||||
background: transparent;
|
||||
box-shadow: none;
|
||||
color: rgba(31, 42, 18, 0.58);
|
||||
margin-left: 6px;
|
||||
}
|
||||
|
||||
.stack-cell:last-child {
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
|
||||
.stack-copy-button svg {
|
||||
width: 13px;
|
||||
height: 13px;
|
||||
fill: currentColor;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.stack-copy-button.is-visible {
|
||||
opacity: 0.7;
|
||||
pointer-events: auto;
|
||||
transform: scale(1);
|
||||
}
|
||||
|
||||
.stack-copy-button:hover {
|
||||
opacity: 1;
|
||||
filter: none;
|
||||
color: rgba(31, 42, 18, 0.85);
|
||||
}
|
||||
|
||||
.stack-copy-button:active {
|
||||
transform: translateY(2px) scale(1);
|
||||
color: rgba(31, 42, 18, 0.95);
|
||||
}
|
||||
|
||||
.stack-copy-button:focus-visible {
|
||||
outline: 1px solid rgba(31, 42, 18, 0.35);
|
||||
outline-offset: 2px;
|
||||
}
|
||||
|
||||
|
||||
.key-default {
|
||||
background: linear-gradient(180deg, var(--btnTop), var(--btnBottom));
|
||||
color: #eef2f7;
|
||||
@@ -385,6 +437,7 @@ button:active {
|
||||
|
||||
.display-panel {
|
||||
padding: 10px;
|
||||
padding-bottom: 8px;
|
||||
}
|
||||
|
||||
.stack-cell {
|
||||
@@ -392,6 +445,11 @@ button:active {
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.stack-copy-button {
|
||||
padding: 5px 7px;
|
||||
min-width: 28px;
|
||||
}
|
||||
|
||||
button {
|
||||
border-radius: 10px;
|
||||
padding: 8px 6px;
|
||||
|
||||
@@ -13,10 +13,10 @@
|
||||
<div class="status-bar" id="statusLine" aria-live="polite"></div>
|
||||
<div class="display-frame">
|
||||
<div class="display-grid">
|
||||
<div class="stack-cell"><span class="stack-label">T:</span><span id="stackT" class="stack-value"></span></div>
|
||||
<div class="stack-cell"><span class="stack-label">Z:</span><span id="stackZ" class="stack-value"></span></div>
|
||||
<div class="stack-cell"><span class="stack-label">Y:</span><span id="stackY" class="stack-value"></span></div>
|
||||
<div class="stack-cell"><span class="stack-label">X:</span><span id="stackX" class="stack-value"></span></div>
|
||||
<div class="stack-cell"><span class="stack-label">T:</span><span id="stackT" class="stack-value"></span><button type="button" class="stack-copy-button" data-copy-stack="T" aria-label="Copy T value"><svg viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path d="M9 9V5.5A1.5 1.5 0 0 1 10.5 4h8A1.5 1.5 0 0 1 20 5.5v8A1.5 1.5 0 0 1 18.5 15H15v3.5A1.5 1.5 0 0 1 13.5 20h-8A1.5 1.5 0 0 1 4 18.5v-8A1.5 1.5 0 0 1 5.5 9H9Zm1.5-3a.5.5 0 0 0-.5.5V9h5.5a1.5 1.5 0 0 1 1.5 1.5V16h.5a.5.5 0 0 0 .5-.5v-8a.5.5 0 0 0-.5-.5h-8Z"/></svg></button></div>
|
||||
<div class="stack-cell"><span class="stack-label">Z:</span><span id="stackZ" class="stack-value"></span><button type="button" class="stack-copy-button" data-copy-stack="Z" aria-label="Copy Z value"><svg viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path d="M9 9V5.5A1.5 1.5 0 0 1 10.5 4h8A1.5 1.5 0 0 1 20 5.5v8A1.5 1.5 0 0 1 18.5 15H15v3.5A1.5 1.5 0 0 1 13.5 20h-8A1.5 1.5 0 0 1 4 18.5v-8A1.5 1.5 0 0 1 5.5 9H9Zm1.5-3a.5.5 0 0 0-.5.5V9h5.5a1.5 1.5 0 0 1 1.5 1.5V16h.5a.5.5 0 0 0 .5-.5v-8a.5.5 0 0 0-.5-.5h-8Z"/></svg></button></div>
|
||||
<div class="stack-cell"><span class="stack-label">Y:</span><span id="stackY" class="stack-value"></span><button type="button" class="stack-copy-button" data-copy-stack="Y" aria-label="Copy Y value"><svg viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path d="M9 9V5.5A1.5 1.5 0 0 1 10.5 4h8A1.5 1.5 0 0 1 20 5.5v8A1.5 1.5 0 0 1 18.5 15H15v3.5A1.5 1.5 0 0 1 13.5 20h-8A1.5 1.5 0 0 1 4 18.5v-8A1.5 1.5 0 0 1 5.5 9H9Zm1.5-3a.5.5 0 0 0-.5.5V9h5.5a1.5 1.5 0 0 1 1.5 1.5V16h.5a.5.5 0 0 0 .5-.5v-8a.5.5 0 0 0-.5-.5h-8Z"/></svg></button></div>
|
||||
<div class="stack-cell"><span class="stack-label">X:</span><span id="stackX" class="stack-value"></span><button type="button" class="stack-copy-button" data-copy-stack="X" aria-label="Copy X value"><svg viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path d="M9 9V5.5A1.5 1.5 0 0 1 10.5 4h8A1.5 1.5 0 0 1 20 5.5v8A1.5 1.5 0 0 1 18.5 15H15v3.5A1.5 1.5 0 0 1 13.5 20h-8A1.5 1.5 0 0 1 4 18.5v-8A1.5 1.5 0 0 1 5.5 9H9Zm1.5-3a.5.5 0 0 0-.5.5V9h5.5a1.5 1.5 0 0 1 1.5 1.5V16h.5a.5.5 0 0 0 .5-.5v-8a.5.5 0 0 0-.5-.5h-8Z"/></svg></button></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -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();
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user