tracker

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