tracker

2.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 and navigates (client-side: the
7. // shell stays). tracker#38: the pagination's OWN click handler moves to the clicked page and rebuilds its list INTO THE
8. // SAME buttons — on a real click BEFORE this handler runs (the browser drains the microtasks between two listeners), on a
9. // script's `el.click()` AFTER it. So: when the pagination already marks another page current (`li.current`), that is the
10. // page (it resolved Previous/Next/a number against its own page, the address's); otherwise nothing was rebuilt yet and the
11. // clicked button's text still is its own label. (Reading only the text sent "2" on page 1 nowhere — the button read "1" —
12. // and "Next" on page 3 to the last page — it read "199".)
13. import { navigate } from 'hl:web'
14. import Pagination from './pagination.hl'
16. tiles = []
17. page = 1
18. pages = 1
19. basePath = '/'
20. tileClass = 'tile'
21. // one page only: no pagination at all (a lone "1" says nothing)
22. hasPages = pages > 1
24. View {
25. tileList {
26. tileGrid {
27. for (t of tiles) {
28. a { class = tileClass href = t.href
29. img { class = "tile-poster" src = t.posterUrl alt = t.title loading = "lazy" }
30. tileTitle { t.title }
31. tileYear { t.year }
32. }
33. }
34. }
35. if (hasPages) {
36. pagerBox { on click(e) { emit pagerClick(e, e.currentTarget) }
37. Pagination { pages = pages page = page }
38. }
39. }
40. }
41. }
43. // `box` = the pagerBox, taken while the click is dispatched: the clicked button may be gone by now ("Next" on the page
44. // before the last: the last page has no Next), and this handler runs after the dispatch (currentTarget is null then)
45. on pagerClick(e, box) {
46. if (e.target == null || e.target.tagName != 'BUTTON') { return null }
47. current = box == null ? null : box.querySelector('li.current button')
48. let to = current == null ? 0 : toNumber(current.textContent.trim())
49. if (to == page || current == null) {
50. text = e.target.textContent.trim()
51. if (text == 'Previous') { to = page - 1 }
52. else if (text == 'Next') { to = page + 1 }
53. else if (text != '…') { to = toNumber(text) }
54. }
55. if (to < 1 || to > pages || to == page) { return null }
56. navigate(to == 1 ? basePath : basePath + '/page/' + to)
57. }