mstoeck3/fscalc
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Compare commits

base: mstoeck3:8cf8900784a15bd853dce0124bf2a43e7d54c4c8
Branches Tags
mstoeck3:main
..
compare: mstoeck3:16a754fa3f1d28182f0013a441d322a6649e8329
Branches Tags
mstoeck3:main

No commits in common. "8cf8900784a15bd853dce0124bf2a43e7d54c4c8" and "16a754fa3f1d28182f0013a441d322a6649e8329" have entirely different histories.
8cf8900784 ... 16a754fa3f

2 changed files with 27 additions and 47 deletions
Show Stats Expand all files Collapse all files

51
webroot/js/calculator.js
View File

@ -17,32 +17,16 @@ export class Calculator {
const decStr = value.toString(10); const decStr = value.toString(10);
const binStr = '0b' + value.toString(2); const binStr = '0b' + value.toString(2);
// Update only the calculator inside the currently active tab to avoid duplicate-id issues // Update all calculator displays (for current active tab)
const activeContent = document.querySelector('.tab-content.active'); const inputs = document.querySelectorAll('[id*="calcInput"]');
if (!activeContent) { const hexElements = document.querySelectorAll('[id*="hexValue"]');
// Fallback: try to update the first calculator on the page const decElements = document.querySelectorAll('[id*="decValue"]');
const fallbackInput = document.querySelector('.calc-input-field'); const binElements = document.querySelectorAll('[id*="binValue"]');
if (fallbackInput) fallbackInput.value = hexStr;
const fallbackHex = document.querySelector('.hex-value');
if (fallbackHex) fallbackHex.textContent = hexStr;
const fallbackDec = document.querySelector('.dec-value');
if (fallbackDec) fallbackDec.textContent = decStr;
const fallbackBin = document.querySelector('.bin-value');
if (fallbackBin) fallbackBin.textContent = binStr;
return;
}
const input = activeContent.querySelector('.calc-input-field'); inputs.forEach(input => input.value = hexStr);
if (input) input.value = hexStr; hexElements.forEach(el => el.textContent = hexStr);
decElements.forEach(el => el.textContent = decStr);
const hexElement = activeContent.querySelector('.hex-value'); binElements.forEach(el => el.textContent = binStr);
if (hexElement) hexElement.textContent = hexStr;
const decElement = activeContent.querySelector('.dec-value');
if (decElement) decElement.textContent = decStr;
const binElement = activeContent.querySelector('.bin-value');
if (binElement) binElement.textContent = binStr;
} }
input(digit) { input(digit) {
@ -63,9 +47,7 @@ export class Calculator {
} }
operation(operation) { operation(operation) {
// If there is a pending operation and we are not waiting for a new operand, if (this.state.previousValue !== 0 && !this.state.waitingForOperand) {
// evaluate it first so chained operations work as expected.
if (this.state.operation !== null && !this.state.waitingForOperand) {
this.equals(false); this.equals(false);
} }
@ -184,8 +166,7 @@ export class Calculator {
} else if (key === 'ENTER' || key === '=') { } else if (key === 'ENTER' || key === '=') {
e.preventDefault(); e.preventDefault();
this.equals(); this.equals();
} else if (key === 'ESCAPE' || key === 'DELETE') { } else if (key === 'ESCAPE' || key === 'C') {
// Use Escape or Delete to clear. Do not use 'C' since it collides with hex digit C.
e.preventDefault(); e.preventDefault();
this.clear(); this.clear();
} else if (key === 'BACKSPACE') { } else if (key === 'BACKSPACE') {
@ -200,20 +181,20 @@ export class Calculator {
<div class="calculator-container"> <div class="calculator-container">
<div class="calc-display"> <div class="calc-display">
<div class="calc-input"> <div class="calc-input">
<input type="text" class="calc-input-field" placeholder="0x0" readonly> <input type="text" id="calcInput" placeholder="0x0" readonly>
</div> </div>
<div class="calc-conversions"> <div class="calc-conversions">
<div class="conversion-row"> <div class="conversion-row">
<span class="conv-label">HEX:</span> <span class="conv-label">HEX:</span>
<span class="conv-value hex-value">0x0</span> <span class="conv-value" id="hexValue">0x0</span>
</div> </div>
<div class="conversion-row"> <div class="conversion-row">
<span class="conv-label">DEC:</span> <span class="conv-label">DEC:</span>
<span class="conv-value dec-value">0</span> <span class="conv-value" id="decValue">0</span>
</div> </div>
<div class="conversion-row"> <div class="conversion-row">
<span class="conv-label">BIN:</span> <span class="conv-label">BIN:</span>
<span class="conv-value bin-value">0b0</span> <span class="conv-value" id="binValue">0b0</span>
</div> </div>
</div> </div>
</div> </div>
@ -223,7 +204,7 @@ export class Calculator {
<button class="calc-btn number">B</button> <button class="calc-btn number">B</button>
<button class="calc-btn number">C</button> <button class="calc-btn number">C</button>
<button class="calc-btn number">D</button> <button class="calc-btn number">D</button>
<button class="calc-btn clear">CLR</button> <button class="calc-btn clear">C</button>
</div> </div>
<div class="calc-row"> <div class="calc-row">
<button class="calc-btn number">E</button> <button class="calc-btn number">E</button>

23
webroot/js/utils.js
View File

@ -99,23 +99,24 @@ export function createTooltip() {
} }
} }
export function showTooltipAt(x, y, text) { export function showTooltip(element, text) {
createTooltip(); createTooltip();
tooltip.innerHTML = text; tooltip.innerHTML = text;
tooltip.style.display = 'block'; tooltip.style.display = 'block';
const rect = element.getBoundingClientRect();
const tooltipRect = tooltip.getBoundingClientRect(); const tooltipRect = tooltip.getBoundingClientRect();
let left = x + 12; // offset from mouse pointer
let top = y + 12;
let left = rect.left + (rect.width / 2) - (tooltipRect.width / 2);
let top = rect.top - tooltipRect.height - 8;
if (left < 10) left = 10;
if (left + tooltipRect.width > window.innerWidth - 10) { if (left + tooltipRect.width > window.innerWidth - 10) {
left = window.innerWidth - tooltipRect.width - 10; left = window.innerWidth - tooltipRect.width - 10;
} }
if (top + tooltipRect.height > window.innerHeight - 10) { if (top < 10) {
top = y - tooltipRect.height - 12; top = rect.bottom + 8;
} }
if (left < 10) left = 10;
if (top < 10) top = 10;
tooltip.style.left = left + 'px'; tooltip.style.left = left + 'px';
tooltip.style.top = top + 'px'; tooltip.style.top = top + 'px';
@ -129,19 +130,17 @@ export function hideTooltip() {
// Setup tooltip event listeners // Setup tooltip event listeners
export function setupTooltips() { export function setupTooltips() {
document.addEventListener('mousemove', function (e) { document.addEventListener('mouseover', function (e) {
if (e.target.classList.contains('result-label')) { if (e.target.classList.contains('result-label')) {
const formula = e.target.getAttribute('data-formula'); const formula = e.target.getAttribute('data-formula');
if (formula) { if (formula) {
showTooltipAt(e.clientX, e.clientY, `Formel: ${formula}`); showTooltip(e.target, `Formel: ${formula}`);
} }
} else if (e.target.classList.contains('result-value')) { } else if (e.target.classList.contains('result-value')) {
const formula = e.target.getAttribute('data-result-formula'); const formula = e.target.getAttribute('data-result-formula');
if (formula && formula !== '') { if (formula && formula !== '') {
showTooltipAt(e.clientX, e.clientY, `Berechnung: ${formula}`); showTooltip(e.target, `Berechnung: ${formula}`);
} }
} else {
hideTooltip();
} }
}); });