Skip to content

refactor: replace scroll-sentinel id with lvt-scroll-sentinel attribute #72

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
adnaan wants to merge 1 commit into
base: main
Choose a base branch
from
+6 −6
Open

refactor: replace scroll-sentinel id with lvt-scroll-sentinel attribute #72

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion patterns/handlers_lists.go
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -147,7 +147,7 @@ func valueSelectHandler(baseOpts []livetemplate.Option) http.Handler {
type InfiniteScrollController struct{}

// LoadMore is dispatched by the client-side IntersectionObserver when
// <div id="scroll-sentinel"> becomes visible. Uses the larger
// <div lvt-scroll-sentinel> becomes visible. Uses the larger
// infiniteScrollDataset (100 items) so the auto-pagination cascade is
// actually visible during the demo; ClickToLoad uses the 25-item
// listDataset which only needs a couple of clicks.
Expand Down
6 changes: 3 additions & 3 deletions patterns/patterns_test.go
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -1345,7 +1345,7 @@ func TestURLFilters(t *testing.T) {

// --- Pattern #10: Infinite Scroll ---

// TestInfiniteScroll verifies the #scroll-sentinel IntersectionObserver
// TestInfiniteScroll verifies the [lvt-scroll-sentinel] IntersectionObserver
// wiring and the loadMorePending throttle. In headless Chrome the short
// first page keeps the sentinel intersecting, so page 2 auto-advances;
// subsequent pages require an explicit scroll because the sentinel has
Expand Down Expand Up @@ -1416,7 +1416,7 @@ func TestInfiniteScroll(t *testing.T) {
// Scroll once
err := chromedp.Run(ctx,
chromedp.Evaluate(`(() => {
const s = document.getElementById('scroll-sentinel');
const s = document.querySelector('[lvt-scroll-sentinel]');
if (s) s.scrollIntoView({ block: 'center' });
})()`, nil),
e2etest.WaitFor(`document.querySelectorAll('tbody tr[data-key]').length > `+fmt.Sprintf("%d", baseline), 5*time.Second),
Expand All @@ -1429,7 +1429,7 @@ func TestInfiniteScroll(t *testing.T) {
_ = chromedp.Run(ctx, chromedp.Evaluate(`document.querySelectorAll('tbody tr[data-key]').length`, &afterFirstScroll))
err = chromedp.Run(ctx,
chromedp.Evaluate(`(() => {
const s = document.getElementById('scroll-sentinel');
const s = document.querySelector('[lvt-scroll-sentinel]');
if (s) s.scrollIntoView({ block: 'center' });
})()`, nil),
e2etest.WaitFor(`document.querySelectorAll('tbody tr[data-key]').length > `+fmt.Sprintf("%d", afterFirstScroll), 5*time.Second),
Expand Down
4 changes: 2 additions & 2 deletions patterns/templates/lists/infinite-scroll.tmpl
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
{{define "content"}}
<article>
<h3>Infinite Scroll</h3>
<p><small>A single <code>&lt;div id="scroll-sentinel"&gt;</code> at the end of the list is watched by the client's IntersectionObserver. When it enters the viewport, the client dispatches <code>load_more</code> automatically — no client JS to wire up. Dataset has 100 items; scroll to watch pages append.</small></p>
<p><small>A single <code>&lt;div lvt-scroll-sentinel&gt;</code> at the end of the list is watched by the client's IntersectionObserver. When it enters the viewport, the client dispatches <code>load_more</code> automatically — no client JS to wire up. Dataset has 100 items; scroll to watch pages append.</small></p>
<table>
<thead><tr><th>ID</th><th>Name</th><th>Email</th></tr></thead>
<tbody>
Expand All @@ -15,7 +15,7 @@
</tbody>
</table>
{{if .HasMore}}
<div id="scroll-sentinel"><small aria-busy="true">Loading more…</small></div>
<div lvt-scroll-sentinel><small aria-busy="true">Loading more…</small></div>
{{else}}
<p><small>End of list.</small></p>
{{end}}
Expand Down
Loading