fix site scrolling

This commit is contained in:
matthieu42morin 2024-04-29 15:42:50 +02:00
parent b0b463bea6
commit f90270bc24
1 changed files with 20 additions and 17 deletions

View File

@ -21,6 +21,23 @@
storedTitle.set('') storedTitle.set('')
function handleTagClick(tag) {
if (tags.includes(tag)) {
tags = tags.filter(tagName => tagName !== tag);
} else {
tags = [...tags, tag];
}
scrollToRecentFeed();
}
function scrollToRecentFeed() {
const recentFeedSection = document.getElementById('recent-feed');
if (recentFeedSection) {
recentFeedSection.scrollIntoView({ behavior: 'smooth' });
}
}
$: storedPosts.subscribe(storedPosts => (allPosts = storedPosts.filter(post => !post.flags?.includes('unlisted')))) $: storedPosts.subscribe(storedPosts => (allPosts = storedPosts.filter(post => !post.flags?.includes('unlisted'))))
$: storedTags.subscribe(storedTags => (allTags = storedTags as string[])) $: storedTags.subscribe(storedTags => (allTags = storedTags as string[]))
@ -29,13 +46,9 @@
$: if (tags) { $: if (tags) {
posts = !tags ? allPosts : allPosts.filter(post => tags.every(tag => post.tags?.includes(tag))) posts = !tags ? allPosts : allPosts.filter(post => tags.every(tag => post.tags?.includes(tag)))
if (browser) { if (loaded && browser) {
const newUrl = tags.length > 0 ? `/?tags=${tags.toString()}#recent-feed` : '/#recent-feed'; const newUrl = `/?tags=${tags.toString()}`;
history.pushState(null, '', newUrl); history.pushState(null, '', newUrl);
const recentFeedSection = document.getElementById('recent-feed');
if (recentFeedSection) {
recentFeedSection.scrollIntoView({ behavior: 'smooth' });
}
} }
} }
@ -79,17 +92,7 @@
{#each allTags as tag} {#each allTags as tag}
<button <button
id={tag} id={tag}
on:click|preventDefault={() => { on:click={() => handleTagClick(tag)}
if (tags.includes(tag)) {
tags = tags.filter(tagName => tagName != tag);
} else {
tags = [...tags, tag];
}
const recentFeedSection = document.getElementById('recent-feed');
if (recentFeedSection) {
recentFeedSection.scrollIntoView({ behavior: 'smooth' });
}
}}
class:!btn-secondary={tags.includes(tag)} class:!btn-secondary={tags.includes(tag)}
class:shadow-lg={tags.includes(tag)} class:shadow-lg={tags.includes(tag)}
class="btn btn-sm btn-ghost normal-case border-dotted border-base-content/20 border-2 mt-4 mb-8 xl:m-0 whitespace-nowrap"> class="btn btn-sm btn-ghost normal-case border-dotted border-base-content/20 border-2 mt-4 mb-8 xl:m-0 whitespace-nowrap">