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

fix calculator

Browse Source
This commit is contained in:
overcuriousity 2025-10-04 20:20:08 +02:00
parent 1cfcb0a0b1
commit 444294b9fb
2 changed files with 40 additions and 51 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

77
webroot/js/calculator.js
View File

@ -122,27 +122,24 @@ export class Calculator {
} }
setupEventListeners() { setupEventListeners() {
// Button clicks // Event delegation for calculator buttons
document.addEventListener('click', (e) => { document.addEventListener('click', (e) => {
if (e.target.classList.contains('calc-btn')) { // Only handle clicks on calculator buttons
const action = e.target.getAttribute('onclick'); if (!e.target.classList.contains('calc-btn')) return;
if (action) {
// Parse the onclick attribute to determine the action const button = e.target;
if (action.includes('calcInput')) {
const match = action.match(/calcInput\('([^']+)'\)/); if (button.classList.contains('number')) {
if (match) this.input(match[1]); this.input(button.textContent);
} else if (action.includes('calcOperation')) { } else if (button.classList.contains('operation')) {
const match = action.match(/calcOperation\('([^']+)'\)/); this.operation(button.textContent);
if (match) this.operation(match[1]); } else if (button.classList.contains('equals')) {
} else if (action.includes('calcEquals')) {
this.equals(); this.equals();
} else if (action.includes('calcClear')) { } else if (button.classList.contains('clear')) {
this.clear(); this.clear();
} else if (action.includes('calcBackspace')) { } else if (button.classList.contains('backspace')) {
this.backspace(); this.backspace();
} }
}
}
}); });
// Keyboard support // Keyboard support
@ -203,38 +200,38 @@ export class Calculator {
</div> </div>
<div class="calc-buttons"> <div class="calc-buttons">
<div class="calc-row"> <div class="calc-row">
<button class="calc-btn number" onclick="calcInput('A')">A</button> <button class="calc-btn number">A</button>
<button class="calc-btn number" onclick="calcInput('B')">B</button> <button class="calc-btn number">B</button>
<button class="calc-btn number" onclick="calcInput('C')">C</button> <button class="calc-btn number">C</button>
<button class="calc-btn number" onclick="calcInput('D')">D</button> <button class="calc-btn number">D</button>
<button class="calc-btn clear" onclick="calcClear()">C</button> <button class="calc-btn clear">C</button>
</div> </div>
<div class="calc-row"> <div class="calc-row">
<button class="calc-btn number" onclick="calcInput('E')">E</button> <button class="calc-btn number">E</button>
<button class="calc-btn number" onclick="calcInput('F')">F</button> <button class="calc-btn number">F</button>
<button class="calc-btn number" onclick="calcInput('7')">7</button> <button class="calc-btn number">7</button>
<button class="calc-btn number" onclick="calcInput('8')">8</button> <button class="calc-btn number">8</button>
<button class="calc-btn operation" onclick="calcOperation('/')">/</button> <button class="calc-btn operation">/</button>
</div> </div>
<div class="calc-row"> <div class="calc-row">
<button class="calc-btn number" onclick="calcInput('4')">4</button> <button class="calc-btn number">4</button>
<button class="calc-btn number" onclick="calcInput('5')">5</button> <button class="calc-btn number">5</button>
<button class="calc-btn number" onclick="calcInput('6')">6</button> <button class="calc-btn number">6</button>
<button class="calc-btn operation" onclick="calcOperation('*')">*</button> <button class="calc-btn operation">*</button>
<button class="calc-btn operation" onclick="calcOperation('MOD')">MOD</button> <button class="calc-btn operation">MOD</button>
</div> </div>
<div class="calc-row"> <div class="calc-row">
<button class="calc-btn number" onclick="calcInput('1')">1</button> <button class="calc-btn number">1</button>
<button class="calc-btn number" onclick="calcInput('2')">2</button> <button class="calc-btn number">2</button>
<button class="calc-btn number" onclick="calcInput('3')">3</button> <button class="calc-btn number">3</button>
<button class="calc-btn operation" onclick="calcOperation('-')">-</button> <button class="calc-btn operation">-</button>
<button class="calc-btn operation" onclick="calcOperation('+')">+</button> <button class="calc-btn operation">+</button>
</div> </div>
<div class="calc-row"> <div class="calc-row">
<button class="calc-btn number wide" onclick="calcInput('0')">0</button> <button class="calc-btn number wide">0</button>
<button class="calc-btn number" onclick="calcInput('9')">9</button> <button class="calc-btn number">9</button>
<button class="calc-btn backspace" onclick="calcBackspace()">⌫</button> <button class="calc-btn backspace">⌫</button>
<button class="calc-btn equals" onclick="calcEquals()">=</button> <button class="calc-btn equals">=</button>
</div> </div>
</div> </div>
</div> </div>

8
webroot/js/main.js
View File

@ -76,20 +76,12 @@ class FilesystemCalculator {
setupCalculator() { setupCalculator() {
this.calculator.setupEventListeners(); this.calculator.setupEventListeners();
// Make calculator functions globally available for onclick handlers
window.calcInput = (digit) => this.calculator.input(digit);
window.calcOperation = (operation) => this.calculator.operation(operation);
window.calcEquals = () => this.calculator.equals();
window.calcClear = () => this.calculator.clear();
window.calcBackspace = () => this.calculator.backspace();
} }
setupUtilities() { setupUtilities() {
setupTooltips(); setupTooltips();
setupCopyButtons(); setupCopyButtons();
// Make copyToClipboard globally available for onclick handlers
window.copyToClipboard = (elementId) => { window.copyToClipboard = (elementId) => {
import('./utils.js').then(module => { import('./utils.js').then(module => {
module.copyToClipboard(elementId); module.copyToClipboard(elementId);