e41c3e7dc4
- Browse dashboard at / with search, framework filter, tag pills, and pagination - Tags system with autocomplete datalist and per-fiddle tag management - Listed/unlisted toggle for visibility control (unlisted still accessible via direct URL) - Export standalone HTML with inlined CSS/JS and framework CDN tags - QR code modal for sharing fiddle URLs - Embed mode at /embed/:id for minimal preview-only rendering - Extract shared loadScript() utility from 4 files into utils.js - Database schema: listed column, tags and fiddle_tags tables with index
43 lines
1.1 KiB
JavaScript
43 lines
1.1 KiB
JavaScript
import { loadScript } from './utils.js';
|
|
|
|
let qrLoaded = false;
|
|
|
|
async function ensureQrLib() {
|
|
if (qrLoaded) return;
|
|
await loadScript('https://cdnjs.cloudflare.com/ajax/libs/qrcode-generator/1.4.4/qrcode.min.js');
|
|
qrLoaded = true;
|
|
}
|
|
|
|
/**
|
|
* Show a QR code modal for the given URL.
|
|
*/
|
|
export async function showQrModal(url) {
|
|
await ensureQrLib();
|
|
|
|
const modal = document.getElementById('qr-modal');
|
|
const canvas = document.getElementById('qr-canvas');
|
|
const urlDisplay = document.getElementById('qr-url');
|
|
|
|
// Generate QR
|
|
const qr = qrcode(0, 'M');
|
|
qr.addData(url);
|
|
qr.make();
|
|
|
|
canvas.innerHTML = qr.createSvgTag({ cellSize: 4, margin: 4 });
|
|
// Make QR SVG white on dark background
|
|
const svg = canvas.querySelector('svg');
|
|
if (svg) {
|
|
svg.style.background = '#fff';
|
|
svg.style.borderRadius = '4px';
|
|
svg.style.padding = '8px';
|
|
}
|
|
|
|
urlDisplay.textContent = url;
|
|
modal.classList.remove('hidden');
|
|
|
|
// Close handlers
|
|
const close = () => modal.classList.add('hidden');
|
|
document.getElementById('qr-modal-close').onclick = close;
|
|
modal.onclick = (e) => { if (e.target === modal) close(); };
|
|
}
|