tracker

1.6 KB

1. // components/tilelist.hl — the poster grid + pagination of /movies and /shows (tracker.worldapi.org#13), composed by
2. // components/movies.hl and components/allshows.hl: `TileList { tiles = … page = … pages = … basePath = '/movies' }`.
3. // A tile: poster, title, year, a link to the show page. Page 1 is `basePath`, page n `basePath/page/n`.
4. // The pagination is components.hybriel's, copied verbatim (components/pagination.hl). It has no data out yet (its
5. // README, hybriel#87), so a click on one of its buttons bubbles up to `pagerBox` here, which reads the button's text
6. // ("Previous", "Next", a number; "…" goes nowhere) and navigates (client-side: the shell stays).
7. import { navigate } from 'hl:web'
8. import Pagination from './pagination.hl'
10. tiles = []
11. page = 1
12. pages = 1
13. basePath = '/'
14. // one page only: no pagination at all (a lone "1" says nothing)
15. hasPages = pages > 1
17. View {
18. tileList {
19. tileGrid {
20. for (t of tiles) {
21. a { class = "tile" href = t.href
22. img { class = "tile-poster" src = t.posterUrl alt = t.title loading = "lazy" }
23. tileTitle { t.title }
24. tileYear { t.year }
25. }
26. }
27. }
28. if (hasPages) {
29. pagerBox { on click(e) { emit pagerClick(e) }
30. Pagination { pages = pages page = page }
31. }
32. }
33. }
34. }
36. on pagerClick(e) {
37. if (e.target == null || e.target.tagName != 'BUTTON') { return null }
38. let text = e.target.textContent
39. let to = 0
40. if (text == 'Previous') { to = page - 1 }
41. else if (text == 'Next') { to = page + 1 }
42. else if (text != '…') { to = toNumber(text) }
43. if (to < 1 || to > pages || to == page) { return null }
44. navigate(to == 1 ? basePath : basePath + '/page/' + to)
45. }