Add browse dashboard, tags, visibility control, export, QR sharing, and embed mode
- 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
This commit is contained in:
42
public/js/qr.js
Normal file
42
public/js/qr.js
Normal file
@@ -0,0 +1,42 @@
|
||||
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(); };
|
||||
}
|
||||
Reference in New Issue
Block a user