HTMX infinite scroll trigger all set.

mikeckennedy · mikeckennedy · commit f99c3d57e3e5 · 2021-09-22T11:05:23.000-07:00
diff --git a/code/ch7_infinite_scroll/ch7_final_video_collector/templates/feed/index.html b/code/ch7_infinite_scroll/ch7_final_video_collector/templates/feed/index.html
@@ -5,7 +5,10 @@
 
         <h1>Video Collector: Recent Videos</h1>
 
-        {{ render_partial('feed/partials/video_list.html', videos=videos) }}
+        {{ render_partial('feed/partials/video_list.html',
+                videos=videos,
+                page=1,
+                has_more_videos=has_more_videos) }}
 
     </div>
 
diff --git a/code/ch7_infinite_scroll/ch7_final_video_collector/templates/feed/partials/video_list.html b/code/ch7_infinite_scroll/ch7_final_video_collector/templates/feed/partials/video_list.html
@@ -7,4 +7,13 @@
         </a>
     </div>
 
-{% endfor %}
+{% endfor %}
+
+{% if has_more_videos %}
+    <div class="scroll-trigger htmx-settling"
+         hx-get="/feed/more_videos/{{ (page+1) }}"
+         hx-trigger="revealed"
+         hx-swap="outerHTML">
+        <img src="/static/img/bars.svg" width="150px" class="htmx-indicator"/>
+    </div>
+{% endif %}
diff --git a/code/ch7_infinite_scroll/ch7_final_video_collector/viewmodels/feed/feed_viewmodel.py b/code/ch7_infinite_scroll/ch7_final_video_collector/viewmodels/feed/feed_viewmodel.py
@@ -17,3 +17,4 @@ def __init__(self, page_size: int, page: int = 1):
         end = start + page_size
 
         self.videos: List[Video] = all_videos[start:end]
+        self.has_more_videos = len(all_videos) > end

Original file line number	Diff line number	Diff line change
`@@ -17,3 +17,4 @@ def __init__(self, page_size: int, page: int = 1):`
`17`	`17`	`end = start + page_size`
`18`	`18`
`19`	`19`	`self.videos: List[Video] = all_videos[start:end]`
	`20`	`+ self.has_more_videos = len(all_videos) > end`