138 lines
4.4 KiB
JavaScript
138 lines
4.4 KiB
JavaScript
document.addEventListener('DOMContentLoaded', () => {
|
|
// 1. Initialization
|
|
const modeSelector = document.getElementById('mode-selector');
|
|
const qrContainer = document.getElementById('qr-container');
|
|
const downloadBtn = document.getElementById('btn-download');
|
|
|
|
// Forms
|
|
const forms = {
|
|
text: document.getElementById('form-text'),
|
|
wifi: document.getElementById('form-wifi'),
|
|
email: document.getElementById('form-email')
|
|
};
|
|
|
|
// Inputs collection for event binding
|
|
const allInputs = document.querySelectorAll('input, textarea, select');
|
|
|
|
// Initialize QR Library
|
|
// Using CorrectLevel.H (High) as requested
|
|
let qrcode = new QRCode(qrContainer, {
|
|
width: 256,
|
|
height: 256,
|
|
colorDark : "#000000",
|
|
colorLight : "#ffffff",
|
|
correctLevel : QRCode.CorrectLevel.H
|
|
});
|
|
|
|
// 2. State & Logic
|
|
let currentMode = 'text';
|
|
let debounceTimer;
|
|
|
|
// Switch Input Forms
|
|
function switchMode(newMode) {
|
|
currentMode = newMode;
|
|
|
|
// Hide all forms
|
|
Object.values(forms).forEach(form => form.classList.remove('active'));
|
|
|
|
// Show selected form
|
|
forms[newMode].classList.add('active');
|
|
|
|
// Trigger update immediately
|
|
updateQR();
|
|
}
|
|
|
|
// String Builders
|
|
function getDataString() {
|
|
if (currentMode === 'text') {
|
|
return document.getElementById('inp-text').value;
|
|
}
|
|
|
|
else if (currentMode === 'wifi') {
|
|
const ssid = document.getElementById('inp-wifi-ssid').value;
|
|
const pass = document.getElementById('inp-wifi-pass').value;
|
|
const type = document.getElementById('inp-wifi-type').value;
|
|
|
|
if (!ssid) return ''; // SSID is minimum requirement
|
|
|
|
// Format: WIFI:S:MyNetwork;T:WPA;P:mypassword;;
|
|
// Note: Special characters in SSID/Pass should ideally be escaped,
|
|
// but standard readers handle raw strings well usually.
|
|
// Adding escape for semicolons/colons is safer practice:
|
|
const cleanSSID = ssid.replace(/([\\;,:])/g, '\\$1');
|
|
const cleanPass = pass.replace(/([\\;,:])/g, '\\$1');
|
|
|
|
return `WIFI:S:${cleanSSID};T:${type};P:${cleanPass};;`;
|
|
}
|
|
|
|
else if (currentMode === 'email') {
|
|
const to = document.getElementById('inp-email-to').value;
|
|
const sub = document.getElementById('inp-email-sub').value;
|
|
const body = document.getElementById('inp-email-body').value;
|
|
|
|
if (!to) return '';
|
|
|
|
return `mailto:${to}?subject=${encodeURIComponent(sub)}&body=${encodeURIComponent(body)}`;
|
|
}
|
|
|
|
return '';
|
|
}
|
|
|
|
// QR Update Logic
|
|
function updateQR() {
|
|
const data = getDataString();
|
|
|
|
if (!data || data.trim() === '') {
|
|
qrcode.clear(); // Clear the code
|
|
downloadBtn.disabled = true;
|
|
return;
|
|
}
|
|
|
|
downloadBtn.disabled = false;
|
|
|
|
// Visual Stability: Fade opacity slightly during update logic if desired,
|
|
// but qrcode.makeCode is instantaneous on small data.
|
|
// We ensure high performance by not recreating the object.
|
|
qrcode.makeCode(data);
|
|
}
|
|
|
|
// Debounce Function
|
|
function handleInput() {
|
|
clearTimeout(debounceTimer);
|
|
debounceTimer = setTimeout(() => {
|
|
updateQR();
|
|
}, 300); // 300ms delay
|
|
}
|
|
|
|
// 3. Event Listeners
|
|
|
|
// Mode Switching
|
|
modeSelector.addEventListener('change', (e) => switchMode(e.target.value));
|
|
|
|
// Input Detection (Auto-Update)
|
|
allInputs.forEach(input => {
|
|
// Skip mode selector as it has its own handler
|
|
if(input.id !== 'mode-selector') {
|
|
input.addEventListener('input', handleInput);
|
|
}
|
|
});
|
|
|
|
// Download Logic
|
|
downloadBtn.addEventListener('click', () => {
|
|
// Find the image generated by qrcode.js
|
|
const img = qrContainer.querySelector('img');
|
|
|
|
if (img && img.src) {
|
|
const link = document.createElement('a');
|
|
link.href = img.src;
|
|
link.download = `qrcode-${currentMode}-${Date.now()}.png`;
|
|
document.body.appendChild(link);
|
|
link.click();
|
|
document.body.removeChild(link);
|
|
}
|
|
});
|
|
|
|
// Initial run
|
|
switchMode('text');
|
|
});
|