modularize

2025-09-28 23:05:45 +02:00
parent 315440e1c1
commit 1cfcb0a0b1
9 changed files with 1741 additions and 1660 deletions
--- a/webroot/js/main.js
+++ b/webroot/js/main.js
@@ -0,0 +1,139 @@
+// Main application file that coordinates all modules
+
+import { setupTooltips, setupCopyButtons } from './utils.js';
+import { Calculator } from './calculator.js';
+import { FATFilesystem } from './filesystems/fat.js';
+
+class FilesystemCalculator {
+    constructor() {
+        this.filesystems = [
+            new FATFilesystem()
+        ];
+        this.calculator = new Calculator();
+        this.activeTab = null;
+    }
+
+    init() {
+        this.renderTabs();
+        this.renderContent();
+        this.setupEventListeners();
+        this.setupCalculator();
+        this.setupUtilities();
+        
+        // Activate first tab
+        if (this.filesystems[0] && this.filesystems[0].variants[0]) {
+            this.switchTab(this.filesystems[0].variants[0].id);
+        }
+    }
+
+    renderTabs() {
+        const tabsContainer = document.getElementById('filesystem-tabs');
+        const tabs = [];
+
+        this.filesystems.forEach(filesystem => {
+            filesystem.variants.forEach(variant => {
+                tabs.push(`
+                    <div class="tab" data-tab="${variant.id}">
+                        ${variant.name}
+                    </div>
+                `);
+            });
+        });
+
+        tabsContainer.innerHTML = tabs.join('');
+    }
+
+    renderContent() {
+        const contentContainer = document.getElementById('filesystem-content');
+        const calculatorHTML = this.calculator.generateHTML();
+        const contents = [];
+
+        this.filesystems.forEach(filesystem => {
+            filesystem.variants.forEach(variant => {
+                contents.push(filesystem.generateTabContentHTML(variant.id, calculatorHTML));
+            });
+        });
+
+        contentContainer.innerHTML = contents.join('');
+    }
+
+    setupEventListeners() {
+        // Tab switching
+        document.addEventListener('click', (e) => {
+            if (e.target.classList.contains('tab')) {
+                const tabId = e.target.getAttribute('data-tab');
+                this.switchTab(tabId);
+            }
+        });
+
+        // Input listeners for all filesystems
+        this.filesystems.forEach(filesystem => {
+            filesystem.variants.forEach(variant => {
+                filesystem.setupInputListeners(variant.id);
+            });
+        });
+    }
+
+    setupCalculator() {
+        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() {
+        setupTooltips();
+        setupCopyButtons();
+        
+        // Make copyToClipboard globally available for onclick handlers
+        window.copyToClipboard = (elementId) => {
+            import('./utils.js').then(module => {
+                module.copyToClipboard(elementId);
+            });
+        };
+    }
+
+    switchTab(tabId) {
+        // Update tab appearance
+        document.querySelectorAll('.tab').forEach(tab => {
+            tab.classList.remove('active');
+        });
+        document.querySelector(`[data-tab="${tabId}"]`).classList.add('active');
+
+        // Update content visibility
+        document.querySelectorAll('.tab-content').forEach(content => {
+            content.classList.remove('active');
+        });
+        document.getElementById(tabId).classList.add('active');
+
+        this.activeTab = tabId;
+
+        // Update calculator display
+        this.calculator.updateDisplay();
+
+        // Trigger calculation for the new tab
+        const filesystem = this.findFilesystemForTab(tabId);
+        if (filesystem) {
+            filesystem.calculate(tabId);
+        }
+    }
+
+    findFilesystemForTab(tabId) {
+        for (const filesystem of this.filesystems) {
+            if (filesystem.variants.some(variant => variant.id === tabId)) {
+                return filesystem;
+            }
+        }
+        return null;
+    }
+}
+
+// Initialize the application when DOM is loaded
+document.addEventListener('DOMContentLoaded', () => {
+    const app = new FilesystemCalculator();
+    app.init();
+});