Spaces:
Running
Running
| let entries = JSON.parse(localStorage.getItem('bm_entries')) || []; | |
| let currentFilter = null; | |
| const GITHUB_EXAMPLES_URL = "https://raw.githubusercontent.com/mrhappynice/bookmarklets/refs/heads/main/entries.json"; | |
| document.addEventListener('DOMContentLoaded', () => { | |
| if (entries.length === 0) { | |
| fetch('entries.json') | |
| .then(res => res.json()) | |
| .then(data => { | |
| entries = data; | |
| saveAndRefresh(); | |
| }).catch(() => renderGrid()); | |
| } else { | |
| renderGrid(); | |
| renderTags(); | |
| } | |
| document.getElementById('search-input').addEventListener('input', (e) => { | |
| renderGrid(e.target.value); | |
| }); | |
| }); | |
| function saveAndRefresh() { | |
| localStorage.setItem('bm_entries', JSON.stringify(entries)); | |
| renderGrid(); | |
| renderTags(); | |
| } | |
| // --- FIX: Proper Attribute Escaping for 3D Page and others --- | |
| function escapeHtmlAttribute(str) { | |
| if (!str) return ""; | |
| return str.replace(/"/g, '"'); | |
| } | |
| function renderGrid(searchTerm = "") { | |
| const grid = document.getElementById('grid'); | |
| grid.innerHTML = ""; | |
| const filtered = entries.filter(item => { | |
| const matchesSearch = (item.title + item.description + (item.tags || []).join(' ')) | |
| .toLowerCase().includes(searchTerm.toLowerCase()); | |
| const matchesTag = !currentFilter || (item.tags && item.tags.includes(currentFilter)); | |
| return matchesSearch && matchesTag; | |
| }); | |
| filtered.forEach(item => { | |
| const card = document.createElement('div'); | |
| card.className = 'card'; | |
| const descHtml = (item.description || "").replace(/#(\w+)/g, '<span class="hashtag" onclick="filterByTag(\'$1\')">#$1</span>'); | |
| // Use the escape function to prevent the code from breaking the href attribute | |
| const safeCode = escapeHtmlAttribute(item.code); | |
| card.innerHTML = ` | |
| <h3>${item.title}</h3> | |
| <p>${descHtml}</p> | |
| <div style="text-align: center; margin: 25px 0 15px 0;"> | |
| <a href="${safeCode}" class="bookmarklet-pill" onclick="event.preventDefault(); alert('Drag this button to your Bookmarks Bar!');">Drag Me</a> | |
| <div style="font-size: 0.75rem; color: var(--text-secondary); margin-top: 10px;"> | |
| Drag to bookmarks bar | |
| </div> | |
| </div> | |
| <div class="card-actions"> | |
| <button class="btn-icon" onclick="editEntry('${item.id}')">✏️ Edit</button> | |
| <button class="btn-icon" onclick="deleteEntry('${item.id}')">🗑️ Delete</button> | |
| </div> | |
| `; | |
| grid.appendChild(card); | |
| }); | |
| } | |
| function renderTags() { | |
| const bar = document.getElementById('tag-filter-bar'); | |
| const allTags = new Set(); | |
| entries.forEach(e => (e.tags || []).forEach(t => allTags.add(t))); | |
| bar.innerHTML = `<div class="chip ${!currentFilter ? 'active' : ''}" onclick="filterByTag(null)">All</div>`; | |
| allTags.forEach(tag => { | |
| bar.innerHTML += `<div class="chip ${currentFilter === tag ? 'active' : ''}" onclick="filterByTag('${tag}')">#${tag}</div>`; | |
| }); | |
| } | |
| function filterByTag(tag) { | |
| currentFilter = (currentFilter === tag) ? null : tag; | |
| renderTags(); | |
| renderGrid(); | |
| } | |
| // --- MODAL & EDITOR --- | |
| function openNew() { | |
| showEditor({ id: crypto.randomUUID(), title: "", description: "", code: "javascript:", tags: [] }); | |
| } | |
| function editEntry(id) { | |
| const entry = entries.find(e => e.id === id); | |
| if (entry) showEditor(entry); | |
| } | |
| function showEditor(entry) { | |
| const modal = document.getElementById('modal'); | |
| const body = document.getElementById('wizard-body'); | |
| document.getElementById('save-btn').style.display = 'block'; | |
| body.innerHTML = ` | |
| <div class="form-group"> | |
| <label>Title</label> | |
| <input type="text" id="edit-title" value="${entry.title || ''}"> | |
| </div> | |
| <div class="form-group"> | |
| <label>Description (Use #hashtags)</label> | |
| <textarea id="edit-desc" rows="3">${entry.description || ''}</textarea> | |
| </div> | |
| <div class="form-group"> | |
| <label>Code</label> | |
| <textarea id="edit-code" rows="5" style="font-family:monospace; font-size:0.8rem;">${entry.code || ''}</textarea> | |
| </div> | |
| <input type="hidden" id="edit-id" value="${entry.id}"> | |
| `; | |
| modal.classList.add('open'); | |
| } | |
| function saveEntry() { | |
| const id = document.getElementById('edit-id').value; | |
| const title = document.getElementById('edit-title').value; | |
| const description = document.getElementById('edit-desc').value; | |
| const code = document.getElementById('edit-code').value; | |
| const tags = (description.match(/#(\w+)/g) || []).map(t => t.substring(1).toLowerCase()); | |
| const index = entries.findIndex(e => e.id === id); | |
| const newEntry = { id, title, description, code, tags, updated_at: new Date().toISOString() }; | |
| if (index > -1) entries[index] = newEntry; | |
| else entries.push(newEntry); | |
| saveAndRefresh(); | |
| closeModal(); | |
| } | |
| function closeModal() { document.getElementById('modal').classList.remove('open'); } | |
| function deleteEntry(id) { if (confirm("Delete this?")) { entries = entries.filter(e => e.id !== id); saveAndRefresh(); } } | |
| // --- DATA & URL IMPORT --- | |
| function downloadData() { | |
| const blob = new Blob([JSON.stringify(entries, null, 2)], { type: 'application/json' }); | |
| const a = document.createElement('a'); | |
| a.href = URL.createObjectURL(blob); | |
| a.download = `bookmarklets_backup.json`; | |
| a.click(); | |
| } | |
| function triggerImport() { document.getElementById('import-file').click(); } | |
| function handleFileImport(input) { | |
| const file = input.files[0]; | |
| if (!file) return; | |
| const reader = new FileReader(); | |
| reader.onload = (e) => { | |
| try { mergeEntries(JSON.parse(e.target.result)); } catch (err) { alert("Invalid JSON"); } | |
| }; | |
| reader.readAsText(file); | |
| } | |
| function openUrlModal() { | |
| const modal = document.getElementById('modal'); | |
| const body = document.getElementById('wizard-body'); | |
| document.getElementById('save-btn').style.display = 'none'; | |
| body.innerHTML = ` | |
| <h2 style="margin-top:0;">Load from URL</h2> | |
| <div class="form-group"> | |
| <label>JSON URL</label> | |
| <input type="url" id="remote-url" placeholder="https://example.com/file.json"> | |
| </div> | |
| <div style="display:flex; gap:10px; flex-direction:column;"> | |
| <button class="btn-primary" onclick="fetchRemoteData()">Fetch Custom URL</button> | |
| <button class="btn-primary" onclick="fetchRemoteData('${GITHUB_EXAMPLES_URL}')" style="background:#444;">Reload GitHub Examples</button> | |
| </div> | |
| `; | |
| modal.classList.add('open'); | |
| } | |
| async function fetchRemoteData(url) { | |
| const targetUrl = url || document.getElementById('remote-url').value; | |
| if (!targetUrl) return alert("Please enter a URL."); | |
| try { | |
| const response = await fetch(targetUrl); | |
| const data = await response.json(); | |
| mergeEntries(data); | |
| closeModal(); | |
| } catch (err) { alert("Failed: " + err.message); } | |
| } | |
| function mergeEntries(newEntries) { | |
| if (!Array.isArray(newEntries)) return; | |
| let count = 0; | |
| newEntries.forEach(item => { | |
| if (!entries.find(e => e.id === item.id)) { entries.push(item); count++; } | |
| }); | |
| saveAndRefresh(); | |
| alert(`Added ${count} items.`); | |
| } |