tracker

4.4 KB

1. // components/franchise.hl — `/franchises/:slug` (a franchise's index: its timelines, each a list of its titles) AND
2. // `/timelines/:tslug` (one timeline, its franchise above it) — tracker.worldapi.org#19, mission 066. Each timeline has its own
3. // sort toggle: "Timeline" (the in-world order, as edited) | "Release" (a movie by its release, a series by the release date of
4. // its LAST episode — franchises.hl releaseKeyOf). A row: small poster, title (year), Movie/Series and the date the release
5. // sort uses.
6. //
7. // ONE FLAT LIST of rows (a `head` row per timeline, then its `item` rows), not a nested for over timelines > titles: the same
8. // proven shape as the show page's seasons (hybriel#86). Both orders of every timeline come with the page (`blocks`); a toggle
9. // only rebuilds `rows` in the browser (`flatRows` is pure) — no request.
10. parent './main.hl'
11. import { appTitle } from '../project.hl'
12. import { franchisePage, timelinePage, isEditorSession } from '../franchises.hl'
14. // static + LOCAL: an mpackdb-backed helper must be `static` (hybriel#115/#116, mission 047)
15. static pageOf = (slug, tslug) => {
16. let p = tslug != null ? timelinePage(tslug) : franchisePage(slug)
17. return p != null ? p : { kind = 'none' name = '' slug = '' summary = '' franchiseName = '' franchiseHref = '' blocks = [] editHref = '' }
18. }
19. static editorOf = (session) => { return isEditorSession(session) }
21. // pure (runs in the browser on a toggle): the rows of every timeline in its chosen order
22. static flatRows = (blocks, modes) => {
23. let out = []
24. for (b of blocks) {
25. let byRelease = modes[b.id] == 'release'
26. out.push({ kind = 'head' isHead = true isItem = false key = b.id id = b.id name = b.name href = b.href countText = b.countText
27. timelineClass = byRelease ? 'sortbtn' : 'sortbtn on' releaseClass = byRelease ? 'sortbtn on' : 'sortbtn' })
28. let list = byRelease ? b.byRelease : b.items
29. for (it of list) {
30. out.push({ kind = 'item' isHead = false isItem = true key = b.id + ':' + it.id id = it.id timeline = b.id pos = it.pos title = it.title href = it.href
31. posterUrl = it.posterUrl typeLabel = it.kind dateLabel = it.dateLabel })
32. }
33. }
34. return out
35. }
37. slug = null
38. tslug = null
39. session = null
40. canEdit = editorOf(session)
42. data = pageOf(slug, tslug)
43. found = data.kind != 'none'
44. notFound = data.kind == 'none'
45. isTimeline = data.kind == 'timeline'
46. name = data.name
47. summary = data.summary
48. hasSummary = summary != ''
49. hasFranchise = data.franchiseName != ''
50. franchiseName = data.franchiseName
51. franchiseHref = data.franchiseHref
52. editHref = data.editHref
53. showEdit = canEdit && isTimeline
54. blocks = data.blocks
55. hasBlocks = blocks.length > 0
56. noBlocks = found && blocks.length == 0
57. modes = {}
58. rows = flatRows(blocks, modes)
60. __title = found ? name + ' — ' + appTitle : appTitle
62. View {
63. franchisePage { "data-kind" = data.kind
64. if (notFound) {
65. h1 { "Not found" }
66. p { "This franchise or timeline doesn't exist." }
67. }
68. if (found) {
69. if (hasFranchise) { a { id = "franchise-up" class = "franchise-up" href = franchiseHref franchiseName } }
70. franchisesHead {
71. h1 { name }
72. if (showEdit) { a { id = "timeline-edit" class = "button" href = editHref "Edit" } }
73. }
74. if (hasSummary) { p { class = "franchise-summary" summary } }
75. if (noBlocks) { p { class = "muted" "No timelines yet." } }
76. if (hasBlocks) {
77. timelineBlocks {
78. for (row of rows) {
79. if (row.isHead) {
80. timelineHead { "data-timeline" = row.id
81. timelineTitle {
82. a { class = "timeline-name" href = row.href row.name }
83. timelineCount { row.countText }
84. }
85. sortToggle { "aria-label" = "Sort"
86. button { type = "button" class = row.timelineClass value = "timeline" "Timeline" on click(e) { emit sortTimeline(row.id, 'timeline') } }
87. button { type = "button" class = row.releaseClass value = "release" "Release" on click(e) { emit sortTimeline(row.id, 'release') } }
88. }
89. }
90. }
91. if (row.isItem) {
92. a { class = "timeline-item" href = row.href "data-timeline" = row.timeline
93. img { class = "film-poster" src = row.posterUrl alt = "" loading = "lazy" }
94. filmText {
95. filmTitle { row.title }
96. filmMeta {
97. span { row.typeLabel }
98. span { class = "timeline-date" row.dateLabel }
99. }
100. }
101. }
102. }
103. }
104. }
105. }
106. }
107. }
108. }
110. on sortTimeline(timelineId, mode) {
111. let m = modes
112. m[timelineId] = mode
113. modes = m
114. rows = flatRows(blocks, modes)
115. }