tracker

4.7 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. // tracker#20 (merge, mission 070): "Franchise | Star Trek", "Timeline | …" — the type word in its colour (styles.hl type-*)
55. typeText = isTimeline ? 'Timeline' : 'Franchise'
56. typeClass = isTimeline ? 'type-word type-timeline' : 'type-word type-franchise'
57. blocks = data.blocks
58. hasBlocks = blocks.length > 0
59. noBlocks = found && blocks.length == 0
60. modes = {}
61. rows = flatRows(blocks, modes)
63. __title = found ? name + ' — ' + appTitle : appTitle
65. View {
66. franchisePage { "data-kind" = data.kind
67. if (notFound) {
68. h1 { "Not found" }
69. p { "This franchise or timeline doesn't exist." }
70. }
71. if (found) {
72. if (hasFranchise) { a { id = "franchise-up" class = "franchise-up" href = franchiseHref franchiseName } }
73. franchisesHead {
74. h1 { class = "typed" typeWord { class = typeClass typeText } typeSep { "|" } typeName { name } }
75. if (showEdit) { a { id = "timeline-edit" class = "button" href = editHref "Edit" } }
76. }
77. if (hasSummary) { p { class = "franchise-summary" summary } }
78. if (noBlocks) { p { class = "muted" "No timelines yet." } }
79. if (hasBlocks) {
80. timelineBlocks {
81. for (row of rows) {
82. if (row.isHead) {
83. timelineHead { "data-timeline" = row.id
84. timelineTitle {
85. a { class = "timeline-name" href = row.href row.name }
86. timelineCount { row.countText }
87. }
88. sortToggle { "aria-label" = "Sort"
89. button { type = "button" class = row.timelineClass value = "timeline" "Timeline" on click(e) { emit sortTimeline(row.id, 'timeline') } }
90. button { type = "button" class = row.releaseClass value = "release" "Release" on click(e) { emit sortTimeline(row.id, 'release') } }
91. }
92. }
93. }
94. if (row.isItem) {
95. a { class = "timeline-item" href = row.href "data-timeline" = row.timeline
96. img { class = "film-poster" src = row.posterUrl alt = "" loading = "lazy" }
97. filmText {
98. filmTitle { row.title }
99. filmMeta {
100. span { row.typeLabel }
101. span { class = "timeline-date" row.dateLabel }
102. }
103. }
104. }
105. }
106. }
107. }
108. }
109. }
110. }
111. }
113. on sortTimeline(timelineId, mode) {
114. let m = modes
115. m[timelineId] = mode
116. modes = m
117. rows = flatRows(blocks, modes)
118. }