From c2ebeb1f95c6e0fc1989e7078de3d0181a2354a4 Mon Sep 17 00:00:00 2001 From: fOuttaMyPaint Date: Thu, 26 Dec 2024 13:03:14 -0500 Subject: [PATCH] Refactor file paths for JavaScript resources and update QRCode feature implementation --- js/features/qr-code.js | 138 +++++++++++++++++++++++++++++++++-------- 1 file changed, 113 insertions(+), 25 deletions(-) diff --git a/js/features/qr-code.js b/js/features/qr-code.js index eba4a84..3ba3e48 100644 --- a/js/features/qr-code.js +++ b/js/features/qr-code.js @@ -1,32 +1,27 @@ -class QRCode extends BaseTool { +import { BaseTool } from './base-tool.js'; +import { notifications } from '../utils/ui.js'; + +export default class QRCode extends BaseTool { constructor() { super(); - this.initializeElements(); - this.initializeState(); + this.elements = this.initializeElements(); + this.state = this.initializeState(); + this.initialize(); this.bindEvents(); } initializeElements() { return { - // Input elements textInput: document.getElementById('text-input'), - - // QR code options errorCorrectionSelect: document.getElementById('error-correction'), sizeInput: document.getElementById('size'), colorInput: document.getElementById('color'), backgroundInput: document.getElementById('background'), - - // Action buttons generateButton: document.getElementById('generate-button'), downloadButton: document.getElementById('download-button'), clearButton: document.getElementById('clear-button'), - - // Display elements qrContainer: document.getElementById('qr-container'), qrCanvas: document.getElementById('qr-canvas'), - - // Notification notification: document.querySelector('.notification') }; } @@ -46,47 +41,140 @@ class QRCode extends BaseTool { bindEvents() { const { textInput, errorCorrectionSelect, sizeInput, colorInput, backgroundInput, generateButton, downloadButton, clearButton } = this.elements; - // Input events textInput.addEventListener('input', this.validateInput.bind(this)); textInput.addEventListener('keypress', (e) => { if (e.key === 'Enter') this.generateQRCode(); }); - // Option events errorCorrectionSelect.addEventListener('change', this.updateOptions.bind(this)); sizeInput.addEventListener('input', this.updateOptions.bind(this)); colorInput.addEventListener('input', this.updateOptions.bind(this)); backgroundInput.addEventListener('input', this.updateOptions.bind(this)); - // Button events generateButton.addEventListener('click', this.generateQRCode.bind(this)); downloadButton.addEventListener('click', this.downloadQRCode.bind(this)); clearButton.addEventListener('click', this.clearInput.bind(this)); - // Keyboard shortcuts this.addKeyboardShortcut('g', this.generateQRCode.bind(this), { ctrl: true }); this.addKeyboardShortcut('d', this.downloadQRCode.bind(this), { ctrl: true }); } initialize() { - // Set initial values this.elements.errorCorrectionSelect.value = this.state.options.errorCorrectionLevel; this.elements.sizeInput.value = this.state.options.size; this.elements.colorInput.value = this.state.options.color; this.elements.backgroundInput.value = this.state.options.background; - - // Hide QR container initially this.elements.qrContainer.style.display = 'none'; - - // Disable buttons initially this.elements.generateButton.disabled = true; this.elements.downloadButton.disabled = true; } - // ... rest of the class implementation ... + validateInput() { + const text = this.elements.textInput.value.trim(); + this.elements.generateButton.disabled = !text; + if (this.state.qr && !text) { + this.clearQRCode(); + } + } + + updateOptions() { + this.state.options = { + errorCorrectionLevel: this.elements.errorCorrectionSelect.value, + size: parseInt(this.elements.sizeInput.value), + color: this.elements.colorInput.value, + background: this.elements.backgroundInput.value + }; + + if (this.state.qr) { + this.generateQRCode(); + } + } + + async generateQRCode() { + const text = this.elements.textInput.value.trim(); + if (!text) return; + + try { + if (!this.state.qr) { + this.state.qr = new QRCodeStyling({ + width: this.state.options.size, + height: this.state.options.size, + type: 'canvas', + data: text, + dotsOptions: { + color: this.state.options.color, + type: 'square' + }, + backgroundOptions: { + color: this.state.options.background + }, + qrOptions: { + errorCorrectionLevel: this.state.options.errorCorrectionLevel + } + }); + } else { + this.state.qr.update({ + data: text, + width: this.state.options.size, + height: this.state.options.size, + dotsOptions: { + color: this.state.options.color + }, + backgroundOptions: { + color: this.state.options.background + }, + qrOptions: { + errorCorrectionLevel: this.state.options.errorCorrectionLevel + } + }); + } + + this.elements.qrContainer.innerHTML = ''; + await this.state.qr.append(this.elements.qrContainer); + this.elements.qrContainer.style.display = 'block'; + this.elements.downloadButton.disabled = false; + this.showNotification('QR code generated successfully'); + } catch (error) { + console.error('QR code generation error:', error); + this.showNotification('Failed to generate QR code', 'error'); + } + } + + async downloadQRCode() { + if (!this.state.qr) return; + + try { + const canvas = this.elements.qrContainer.querySelector('canvas'); + const dataUrl = canvas.toDataURL('image/png'); + const link = document.createElement('a'); + link.href = dataUrl; + link.download = 'qr-code.png'; + document.body.appendChild(link); + link.click(); + document.body.removeChild(link); + } catch (error) { + console.error('Download error:', error); + this.showNotification('Failed to download QR code', 'error'); + } + } + + clearInput() { + this.elements.textInput.value = ''; + this.validateInput(); + this.clearQRCode(); + } + + clearQRCode() { + if (this.state.qr) { + this.elements.qrContainer.innerHTML = ''; + this.elements.qrContainer.style.display = 'none'; + this.elements.downloadButton.disabled = true; + this.state.qr = null; + } + } } -// Initialize the feature when the DOM is ready -document.addEventListener('DOMContentLoaded', () => { +// Initialize the tool if we're on the QR code page +if (document.querySelector('.qr-controls')) { new QRCode(); -}); +}