Add progresive enhancment for tag picker when client js is available
This commit is contained in:
parent
560020632f
commit
9bf7827aa0
@ -1,100 +1,119 @@
|
||||
// // Client-side tag picker toggle functionality
|
||||
// class TagPickerManager {
|
||||
// constructor() {
|
||||
// this.init();
|
||||
// }
|
||||
// Add function to 'Clear all filters'
|
||||
document.querySelector('.clear-tags-btn')
|
||||
?.addEventListener('click', (e) => {
|
||||
const activeTags = document.querySelectorAll('a.tag-pill.active')
|
||||
activeTags.forEach((activeTag) => {
|
||||
activeTag.classList.remove('active')
|
||||
})
|
||||
updateTagUrls();
|
||||
})
|
||||
|
||||
// init() {
|
||||
// this.attachTagClickListeners();
|
||||
// }
|
||||
// Add function to toggle tag filters
|
||||
document.querySelectorAll('a.tag-pill')
|
||||
.forEach((tagPill) => {
|
||||
tagPill.addEventListener('click', (e) => toggleTagPill(e))
|
||||
})
|
||||
|
||||
// // Parse current URL to get active tags
|
||||
// getActiveTags(): string[] {
|
||||
// const urlParams = new URLSearchParams(window.location.search);
|
||||
// return urlParams.getAll('tag').map(tag => decodeURIComponent(tag).replace(/-/g, ' '));
|
||||
// }
|
||||
function toggleTagPill(e: Event) {
|
||||
const target = e.currentTarget as HTMLElement;
|
||||
const searchParams = new URLSearchParams(window.location.search)
|
||||
|
||||
// // Generate query string from tags array
|
||||
// generateTagQueryString(tags: string[]): string {
|
||||
// if (tags.length === 0) return '';
|
||||
// const params = new URLSearchParams();
|
||||
// tags.forEach(tag => {
|
||||
// params.append('tag', tag.toLowerCase().replace(/\s+/g, '-'));
|
||||
// });
|
||||
// return params.toString();
|
||||
// }
|
||||
if (target.classList.contains('active')) {
|
||||
target.classList.remove('active')
|
||||
searchParams.delete('tag', getURLSafeTagName(target.innerText))
|
||||
} else {
|
||||
target.classList.add('active')
|
||||
searchParams.append('tag', getURLSafeTagName(target.innerText))
|
||||
}
|
||||
|
||||
// // Toggle a tag and update the page
|
||||
// toggleTag(tagName: string) {
|
||||
// const currentTags = this.getActiveTags();
|
||||
// Update tag urls after the loader in onLoad completes
|
||||
setTimeout(() => updateTagUrls(), 0)
|
||||
}
|
||||
|
||||
// // Toggle logic: if tag is active, remove it; otherwise add it
|
||||
// const newTags = currentTags.includes(tagName)
|
||||
// ? currentTags.filter(t => t !== tagName)
|
||||
// : [...currentTags, tagName];
|
||||
function updateTagUrls() {
|
||||
const activeTags = document.querySelectorAll('a.tag-pill.active')
|
||||
const inactiveTags = document.querySelectorAll('a.tag-pill:not(.active)')
|
||||
|
||||
// // Navigate to new URL
|
||||
// const queryString = this.generateTagQueryString(newTags);
|
||||
// const newUrl = queryString ? `/?${queryString}` : '/';
|
||||
// window.location.href = newUrl;
|
||||
// }
|
||||
let baseTagParams = '';
|
||||
activeTags.forEach((val) => {
|
||||
baseTagParams += `&tag=${getURLSafeTagName(val.innerHTML)}`
|
||||
})
|
||||
|
||||
// // Attach click listeners to tag links
|
||||
// attachTagClickListeners() {
|
||||
// const tagLinks = document.querySelectorAll('[data-taglink], .post-tag');
|
||||
inactiveTags.forEach((val) => {
|
||||
val.setAttribute('href', `/?tag=${getURLSafeTagName(val.innerHTML)}${baseTagParams}`)
|
||||
})
|
||||
|
||||
// tagLinks.forEach(link => {
|
||||
// link.addEventListener('click', (e) => {
|
||||
// e.preventDefault();
|
||||
// const tagName = link.textContent?.trim();
|
||||
// if (tagName) {
|
||||
// this.toggleTag(tagName);
|
||||
// }
|
||||
// });
|
||||
// });
|
||||
// }
|
||||
activeTags.forEach((val) => {
|
||||
const tagName = getURLSafeTagName(val.innerHTML)
|
||||
|
||||
// // Update visual state of tags based on current URL
|
||||
// updateTagVisualState() {
|
||||
// const activeTags = this.getActiveTags();
|
||||
const activeTagLink = baseTagParams.split(`&tag=${getURLSafeTagName(val.innerHTML)}`).join('')
|
||||
|
||||
// // Update tag pills in sidebar
|
||||
// document.querySelectorAll('.tag-pill').forEach(link => {
|
||||
// const tagName = link.textContent?.trim();
|
||||
// if (tagName && activeTags.includes(tagName)) {
|
||||
// link.classList.add('active');
|
||||
// } else {
|
||||
// link.classList.remove('active');
|
||||
// }
|
||||
// });
|
||||
if (activeTagLink.length > 1) {
|
||||
val.setAttribute('href', `/?${activeTagLink.substring(1)}`)
|
||||
} else {
|
||||
val.setAttribute('href', '/')
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
// // Update post tags
|
||||
// document.querySelectorAll('.post-tag').forEach(link => {
|
||||
// const tagName = link.textContent?.trim();
|
||||
// if (tagName && activeTags.includes(tagName)) {
|
||||
// link.classList.add('active');
|
||||
// } else {
|
||||
// link.classList.remove('active');
|
||||
// }
|
||||
// });
|
||||
// Helper function normalizing the user facing tag name into
|
||||
// the url format for the tag name.
|
||||
function getURLSafeTagName(tag: string) {
|
||||
return tag.toLowerCase().split(" ").join("-")
|
||||
}
|
||||
|
||||
// // Update clear filters button visibility
|
||||
// const tagActions = document.querySelector('.tag-actions');
|
||||
// if (tagActions) {
|
||||
// tagActions.style.display = activeTags.length > 0 ? 'block' : 'none';
|
||||
// }
|
||||
// }
|
||||
// }
|
||||
// Function to sync the UI state with the current URL
|
||||
function syncStateFromUrl() {
|
||||
const searchParams = new URLSearchParams(window.location.search);
|
||||
const currentTags = searchParams.getAll('tag');
|
||||
|
||||
// // Initialize on page load
|
||||
// const tagPickerManager = new TagPickerManager();
|
||||
// Reset all tags to inactive
|
||||
document.querySelectorAll('a.tag-pill').forEach(tagPill => {
|
||||
tagPill.classList.remove('active');
|
||||
});
|
||||
|
||||
// // Update visual state after page loads
|
||||
// document.addEventListener('DOMContentLoaded', () => {
|
||||
// tagPickerManager.updateTagVisualState();
|
||||
// });
|
||||
// Set active tags based on current URL
|
||||
let activeTagCount = 0
|
||||
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 (document.readyState === 'interactive' || document.readyState === 'complete') {
|
||||
// tagPickerManager.updateTagVisualState();
|
||||
// }
|
||||
// If there is an active tag, show the clear filters button
|
||||
const tagActions = document.querySelector('.tag-actions') as HTMLElement
|
||||
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
|
||||
});
|
||||
|
||||
@ -52,13 +52,11 @@ export function TagPicker({ searchParams }: { searchParams?: URLSearchParams })
|
||||
</ul>
|
||||
|
||||
{/* Show clear tags button if there are selected tags */}
|
||||
{selectedTags.length > 0 && (
|
||||
<div className="tag-actions">
|
||||
<a href="/" className="clear-tags-btn">
|
||||
Clear all filters
|
||||
</a>
|
||||
</div>
|
||||
)}
|
||||
<div className="tag-actions" style={{ display: selectedTags.length > 0 ? 'block' : 'none' }}>
|
||||
<a href="/" className="clear-tags-btn">
|
||||
Clear all filters
|
||||
</a>
|
||||
</div>
|
||||
<script dangerouslySetInnerHTML={{ __html: minifyJS(tagPickerScript) }} />
|
||||
</div>
|
||||
)
|
||||
|
||||
Loading…
Reference in New Issue
Block a user