tracker

5.0 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. `named`: a head shows the timeline's
22. // name (the franchise index); a timeline's own page has it in its h1 already (mission 025: the name was there twice)
23. static flatRows = (&blocks, &modes, &named) => {
24. let out = []
25. for (b of blocks) {
26. let byRelease = modes[b.id] == 'release'
27. out.push({ kind = 'head' isHead = true isItem = false key = b.id id = b.id name = b.name hasName = named href = b.href countText = b.countText
28. timelineClass = byRelease ? 'sortbtn' : 'sortbtn on' releaseClass = byRelease ? 'sortbtn on' : 'sortbtn' })
29. let list = byRelease ? b.byRelease : b.items
30. for (it of list) {
31. 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
32. posterUrl = it.posterUrl typeLabel = it.kind dateLabel = it.dateLabel })
33. }
34. }
35. return out
36. }
38. slug = null
39. tslug = null
40. session = null
41. canEdit = editorOf(session)
43. data = pageOf(slug, tslug)
44. found = data.kind != 'none'
45. notFound = data.kind == 'none'
46. isTimeline = data.kind == 'timeline'
47. name = data.name
48. summary = data.summary
49. hasSummary = summary != ''
50. hasFranchise = data.franchiseName != ''
51. franchiseName = data.franchiseName
52. franchiseHref = data.franchiseHref
53. editHref = data.editHref
54. showEdit = canEdit && isTimeline
55. // tracker#20 (merge, mission 070): "Franchise | Star Trek", "Timeline | …" — the type word in its colour (styles.hl type-*)
56. typeText = isTimeline ? 'Timeline' : 'Franchise'
57. typeClass = isTimeline ? 'type-word type-timeline' : 'type-word type-franchise'
58. blocks = data.blocks
59. hasBlocks = blocks.length > 0
60. noBlocks = found && blocks.length == 0
61. modes = {}
62. namedHeads = !isTimeline
63. rows = flatRows(blocks, modes, namedHeads)
65. __title = found ? name + ' — ' + appTitle : appTitle
67. View {
68. franchisePage { "data-kind" = data.kind
69. if (notFound) {
70. h1 { "Not found" }
71. p { "This franchise or timeline doesn't exist." }
72. }
73. if (found) {
74. if (hasFranchise) { a { id = "franchise-up" class = "franchise-up" href = franchiseHref franchiseName } }
75. franchisesHead {
76. h1 { class = "typed" typeWord { class = typeClass typeText } typeSep { "|" } typeName { name } }
77. if (showEdit) { a { id = "timeline-edit" class = "button" href = editHref "Edit" } }
78. }
79. if (hasSummary) { p { class = "franchise-summary" summary } }
80. if (noBlocks) { p { class = "muted" "No timelines yet." } }
81. if (hasBlocks) {
82. timelineBlocks {
83. for (row of rows) {
84. if (row.isHead) {
85. timelineHead { "data-timeline" = row.id
86. timelineTitle {
87. if (row.hasName) { a { class = "timeline-name" href = row.href row.name } }
88. timelineCount { row.countText }
89. }
90. sortToggle { "aria-label" = "Sort"
91. button { type = "button" class = row.timelineClass value = "timeline" "Timeline" on click(e) { emit sortTimeline(row.id, 'timeline') } }
92. button { type = "button" class = row.releaseClass value = "release" "Release" on click(e) { emit sortTimeline(row.id, 'release') } }
93. }
94. }
95. }
96. if (row.isItem) {
97. a { class = "timeline-item" href = row.href "data-timeline" = row.timeline
98. img { class = "film-poster" src = row.posterUrl alt = "" loading = "lazy" }
99. filmText {
100. filmTitle { row.title }
101. filmMeta {
102. span { row.typeLabel }
103. span { class = "timeline-date" row.dateLabel }
104. }
105. }
106. }
107. }
108. }
109. }
110. }
111. }
112. }
113. }
115. on sortTimeline(timelineId, mode) {
116. let m = modes
117. m[timelineId] = mode
118. modes = m
119. rows = flatRows(blocks, modes, namedHeads)
120. }