Caleb/Blog
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Add progresive enhancment for tag picker when client js is available

Browse Source
This commit is contained in:
Caleb Braaten 2026-01-16 13:51:06 -08:00
parent 560020632f
commit 9bf7827aa0
2 changed files with 109 additions and 92 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

189
src/frontend/clientJS/tag-picker.ts
View File

@ -1,100 +1,119 @@
// // Client-side tag picker toggle functionality // Add function to 'Clear all filters'
// class TagPickerManager { document.querySelector('.clear-tags-btn')
// constructor() { ?.addEventListener('click', (e) => {
// this.init(); const activeTags = document.querySelectorAll('a.tag-pill.active')
// } activeTags.forEach((activeTag) => {
activeTag.classList.remove('active')
})
updateTagUrls();
})
// init() { // Add function to toggle tag filters
// this.attachTagClickListeners(); document.querySelectorAll('a.tag-pill')
// } .forEach((tagPill) => {
tagPill.addEventListener('click', (e) => toggleTagPill(e))
})
// // Parse current URL to get active tags function toggleTagPill(e: Event) {
// getActiveTags(): string[] { const target = e.currentTarget as HTMLElement;
// const urlParams = new URLSearchParams(window.location.search); const searchParams = new URLSearchParams(window.location.search)
// return urlParams.getAll('tag').map(tag => decodeURIComponent(tag).replace(/-/g, ' '));
// }
// // Generate query string from tags array if (target.classList.contains('active')) {
// generateTagQueryString(tags: string[]): string { target.classList.remove('active')
// if (tags.length === 0) return ''; searchParams.delete('tag', getURLSafeTagName(target.innerText))
// const params = new URLSearchParams(); } else {
// tags.forEach(tag => { target.classList.add('active')
// params.append('tag', tag.toLowerCase().replace(/\s+/g, '-')); searchParams.append('tag', getURLSafeTagName(target.innerText))
// }); }
// return params.toString();
// }
// // Toggle a tag and update the page // Update tag urls after the loader in onLoad completes
// toggleTag(tagName: string) { setTimeout(() => updateTagUrls(), 0)
// const currentTags = this.getActiveTags(); }
// // Toggle logic: if tag is active, remove it; otherwise add it function updateTagUrls() {
// const newTags = currentTags.includes(tagName) const activeTags = document.querySelectorAll('a.tag-pill.active')
// ? currentTags.filter(t => t !== tagName) const inactiveTags = document.querySelectorAll('a.tag-pill:not(.active)')
// : [...currentTags, tagName];
// // Navigate to new URL let baseTagParams = '';
// const queryString = this.generateTagQueryString(newTags); activeTags.forEach((val) => {
// const newUrl = queryString ? `/?${queryString}` : '/'; baseTagParams += `&tag=${getURLSafeTagName(val.innerHTML)}`
// window.location.href = newUrl; })
// }
// // Attach click listeners to tag links inactiveTags.forEach((val) => {
// attachTagClickListeners() { val.setAttribute('href', `/?tag=${getURLSafeTagName(val.innerHTML)}${baseTagParams}`)
// const tagLinks = document.querySelectorAll('[data-taglink], .post-tag'); })
// tagLinks.forEach(link => { activeTags.forEach((val) => {
// link.addEventListener('click', (e) => { const tagName = getURLSafeTagName(val.innerHTML)
// e.preventDefault();
// const tagName = link.textContent?.trim();
// if (tagName) {
// this.toggleTag(tagName);
// }
// });
// });
// }
// // Update visual state of tags based on current URL const activeTagLink = baseTagParams.split(`&tag=${getURLSafeTagName(val.innerHTML)}`).join('')
// updateTagVisualState() {
// const activeTags = this.getActiveTags();
// // Update tag pills in sidebar if (activeTagLink.length > 1) {
// document.querySelectorAll('.tag-pill').forEach(link => { val.setAttribute('href', `/?${activeTagLink.substring(1)}`)
// const tagName = link.textContent?.trim(); } else {
// if (tagName && activeTags.includes(tagName)) { val.setAttribute('href', '/')
// link.classList.add('active'); }
// } else { })
// link.classList.remove('active'); }
// }
// });
// // Update post tags // Helper function normalizing the user facing tag name into
// document.querySelectorAll('.post-tag').forEach(link => { // the url format for the tag name.
// const tagName = link.textContent?.trim(); function getURLSafeTagName(tag: string) {
// if (tagName && activeTags.includes(tagName)) { return tag.toLowerCase().split(" ").join("-")
// link.classList.add('active'); }
// } else {
// link.classList.remove('active');
// }
// });
// // Update clear filters button visibility // Function to sync the UI state with the current URL
// const tagActions = document.querySelector('.tag-actions'); function syncStateFromUrl() {
// if (tagActions) { const searchParams = new URLSearchParams(window.location.search);
// tagActions.style.display = activeTags.length > 0 ? 'block' : 'none'; const currentTags = searchParams.getAll('tag');
// }
// }
// }
// // Initialize on page load // Reset all tags to inactive
// const tagPickerManager = new TagPickerManager(); document.querySelectorAll('a.tag-pill').forEach(tagPill => {
tagPill.classList.remove('active');
});
// // Update visual state after page loads // Set active tags based on current URL
// document.addEventListener('DOMContentLoaded', () => { let activeTagCount = 0
// tagPickerManager.updateTagVisualState(); currentTags.forEach(tagUrl => {
// }); document.querySelectorAll('a.tag-pill').forEach(tagPill => {
const pill = tagPill as HTMLElement;
if (getURLSafeTagName(pill.innerText) === tagUrl) {
pill.classList.add('active');
activeTagCount++
}
});
});
// // Also call immediately if DOM is already loaded // If there is an active tag, show the clear filters button
// if (document.readyState === 'interactive' || document.readyState === 'complete') { const tagActions = document.querySelector('.tag-actions') as HTMLElement
// tagPickerManager.updateTagVisualState(); if (activeTagCount > 0) {
// } // Show the clear tags button
tagActions.style.display = 'block';
} else {
// Hide the clear tags button
tagActions.style.display = 'none';
}
updateTagUrls();
}
// Hook into the popstate event to sync state when navigating back/forward
window.addEventListener('popstate', () => {
syncStateFromUrl();
});
// Hook into the navigation system to sync state after content loads
// We'll observe the main element for changes
const observer = new MutationObserver((mutations) => {
mutations.forEach((mutation) => {
if (mutation.type === 'childList' && document.querySelector('main')) {
syncStateFromUrl();
}
});
});
// Start observing the document body for changes
observer.observe(document.body, {
childList: true,
subtree: true
});

12
src/frontend/components/tag-picker.tsx
View File

@ -52,13 +52,11 @@ export function TagPicker({ searchParams }: { searchParams?: URLSearchParams })
</ul> </ul>
{/* Show clear tags button if there are selected tags */} {/* Show clear tags button if there are selected tags */}
{selectedTags.length > 0 && ( <div className="tag-actions" style={{ display: selectedTags.length > 0 ? 'block' : 'none' }}>
<div className="tag-actions"> <a href="/" className="clear-tags-btn">
<a href="/" className="clear-tags-btn"> Clear all filters
Clear all filters </a>
</a> </div>
</div>
)}
<script dangerouslySetInnerHTML={{ __html: minifyJS(tagPickerScript) }} /> <script dangerouslySetInnerHTML={{ __html: minifyJS(tagPickerScript) }} />
</div> </div>
) )