No snippets found. Add one to get started!
';
return;
}
snippetsToRender.forEach(snippet => {
const card = document.createElement('div');
card.className = 'sc-snippet-card';
card.dataset.id = snippet.id;
const tagsHTML = snippet.tags.map(tag => `
${tag}`).join('');
// Sanitize code for HTML display
const sanitizedCode = snippet.code.replace(//g, ">");
card.innerHTML = `
`;
snippetsList.appendChild(card);
});
// After appending, highlight all code blocks
Prism.highlightAll();
};
/**
* Resets the form to its initial state.
*/
const resetForm = () => {
editMode = false;
snippetForm.reset();
snippetIdInput.value = '';
formTitle.textContent = 'Add New Snippet';
submitBtn.textContent = 'Add Snippet';
cancelEditBtn.style.display = 'none';
};
// --- EVENT HANDLERS --- //
snippetForm.addEventListener('submit', (e) => {
e.preventDefault();
const title = snippetTitleInput.value.trim();
const language = snippetLanguageInput.value.trim();
const code = snippetCodeInput.value.trim();
const tags = snippetTagsInput.value.split(',').map(tag => tag.trim()).filter(Boolean);
const id = parseInt(snippetIdInput.value, 10);
if (!title || !language || !code) {
// A more user-friendly notification could be added here
console.error("Title, Language, and Code are required.");
return;
}
if (editMode && id) {
// Update existing snippet
const index = snippets.findIndex(s => s.id === id);
if (index > -1) {
snippets[index] = { id, title, language, code, tags };
}
} else {
// Add new snippet
const newSnippet = { id: nextId++, title, language, code, tags };
snippets.push(newSnippet);
}
renderSnippets();
resetForm();
});
cancelEditBtn.addEventListener('click', resetForm);
snippetsList.addEventListener('click', (e) => {
const button = e.target.closest('.sc-action-btn');
if (!button) return;
const card = e.target.closest('.sc-snippet-card');
const snippetId = parseInt(card.dataset.id, 10);
const snippet = snippets.find(s => s.id === snippetId);
if (button.classList.contains('delete-btn')) {
if (confirm(`Are you sure you want to delete "${snippet.title}"?`)) {
snippets = snippets.filter(s => s.id !== snippetId);
renderSnippets();
}
} else if (button.classList.contains('edit-btn')) {
editMode = true;
snippetIdInput.value = snippet.id;
snippetTitleInput.value = snippet.title;
snippetLanguageInput.value = snippet.language;
snippetCodeInput.value = snippet.code;
snippetTagsInput.value = snippet.tags.join(', ');
formTitle.textContent = 'Edit Snippet';
submitBtn.textContent = 'Save Changes';
cancelEditBtn.style.display = 'block';
window.scrollTo({ top: 0, behavior: 'smooth' });
} else if (button.classList.contains('copy-btn')) {
// Use document.execCommand for broader compatibility within iframes
const textArea = document.createElement('textarea');
textArea.value = snippet.code;
document.body.appendChild(textArea);
textArea.select();
try {
document.execCommand('copy');
// Simple visual feedback
button.innerHTML = 'Copied!';
setTimeout(() => {
button.innerHTML = `
`;
}, 1500);
} catch (err) {
console.error('Failed to copy text: ', err);
}
document.body.removeChild(textArea);
}
});
searchInput.addEventListener('input', (e) => {
const searchTerm = e.target.value.toLowerCase();
const filteredSnippets = snippets.filter(s =>
s.title.toLowerCase().includes(searchTerm) ||
s.language.toLowerCase().includes(searchTerm) ||
s.code.toLowerCase().includes(searchTerm) ||
s.tags.some(tag => tag.toLowerCase().includes(searchTerm))
);
renderSnippets(filteredSnippets);
});
downloadPdfBtn.addEventListener('click', () => {
const { jsPDF } = window.jspdf;
const doc = new jsPDF();
doc.setFontSize(22);
doc.text("My Snippet Collection", 105, 20, null, null, "center");
let yPos = 30;
snippets.forEach((snippet, index) => {
if (yPos > 260) { // Check for page break
doc.addPage();
yPos = 20;
}
doc.setFontSize(14);
doc.setFont(undefined, 'bold');
doc.text(`${snippet.title} (${snippet.language})`, 14, yPos);
yPos += 7;
doc.setFontSize(10);
doc.setFont(undefined, 'normal');
doc.text(`Tags: ${snippet.tags.join(', ')}`, 14, yPos);
yPos += 10;
doc.setFont('Courier', 'normal');
doc.setFontSize(9);
// Split text to fit page width
const lines = doc.splitTextToSize(snippet.code, 180);
doc.text(lines, 14, yPos);
yPos += (lines.length * 4) + 10; // Adjust y position after code block
// Add a separator
if (index < snippets.length - 1) {
doc.setDrawColor(200);
doc.line(14, yPos - 5, 196, yPos - 5);
}
});
doc.save("snippet-collection.pdf");
});
// --- INITIALIZATION --- //
renderSnippets();
});
