components

7.3 KB

1. // month-view.hl — THE MONTH VIEW: prev / next buttons on top, the month's name and the year between them, the
2. // days below (weeks start on Monday; the days of the neighbouring months are dimmed; today is marked).
3. // All Hybriel, no .js: the date arithmetic is written here (plain integers), so it runs the same on the server (first
4. // render) and in the browser (paging). What only the browser knows — today in the user's time zone, the month and
5. // weekday names in the user's language (`Date` and `Intl` are browser globals of View handlers) — is read the moment
6. // the pointer, a finger or the keyboard reaches the month view; until then the server's UTC date and English names show.
7. // The page reads `year` and `month` (1–12) as its own members. USE ONE PER PAGE: a composed component's
8. // members are the page's state (COMPONENTS.md §12).
9. import { serverToday } from './clock.hl'
11. String today = serverToday()
12. Number year = toNumber(today.slice(0, 4))
13. Number month = toNumber(today.slice(5, 7))
14. Hybrid monthNames = ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December']
15. Hybrid weekdayNames = ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
16. String title = monthNames[month - 1] + ' ' + year
17. Hybrid weekdays = weekdayNames
18. Hybrid days = build(year, month, today)
19. Number seen = 0
20. Number paged = 0
21. String prevLabel = 'Previous month'
22. String nextLabel = 'Next month'
24. pad4(n) { return ('' + (10000 + n)).slice(1) }
26. pad(n) { return n < 10 ? '0' + n : '' + n }
28. leap(y) { return (y % 4 == 0 && y % 100 != 0) || y % 400 == 0 }
30. daysIn(y, m) {
31. if (m == 2) { return leap(y) ? 29 : 28 }
32. if (m == 4 || m == 6 || m == 9 || m == 11) { return 30 }
33. return 31
34. }
36. // 0 = Monday … 6 = Sunday (Sakamoto's method gives 0 = Sunday)
37. weekdayOf(y, m, d) {
38. let t = [0, 3, 2, 5, 0, 3, 5, 1, 4, 6, 2, 4]
39. let yy = m < 3 ? y - 1 : y
40. let sun = (yy + (yy - yy % 4) / 4 - (yy - yy % 100) / 100 + (yy - yy % 400) / 400 + t[m - 1] + d) % 7
41. return (sun + 6) % 7
42. }
44. // 42 days (six weeks of seven), so the view keeps its height from month to month
45. build(y, m, todayText) {
46. let py = m == 1 ? y - 1 : y
47. let pm = m == 1 ? 12 : m - 1
48. let ny = m == 12 ? y + 1 : y
49. let nm = m == 12 ? 1 : m + 1
50. let lead = weekdayOf(y, m, 1)
51. let n = daysIn(y, m)
52. let pn = daysIn(py, pm)
53. let out = []
54. let day = 1 - lead
55. let w = 0
56. while (w < 6) {
57. let i = 0
58. while (i < 7) {
59. let cy = y
60. let cm = m
61. let cd = day
62. let cls = ''
63. if (day < 1) { cy = py cm = pm cd = pn + day cls = 'outside' }
64. if (day > n) { cy = ny cm = nm cd = day - n cls = 'outside' }
65. let date = cy + '-' + pad(cm) + '-' + pad(cd)
66. if (date == todayText) { cls = 'today' }
67. out.push({ n = cd date = date cls = cls })
68. day = day + 1
69. i = i + 1
70. }
71. w = w + 1
72. }
73. return out
74. }
76. show(y, m) {
77. year = y
78. month = m
79. title = monthNames[m - 1] + ' ' + y
80. days = build(y, m, today)
81. }
83. // Colours: the semantic WorldAPI tokens as css variables, each with its palette value as fallback, so a copy of this file is styled in an app that declares no tokens (an app that imports shared/tokens.hl in its styles.hl and sets --color-accent wins). A component's browser module cannot import tokens.hl itself.
84. Style {
85. '@keyframes month-view-mount' { 'from' { opacity = '.999' } to { opacity = '1' } }
86. 'month-view' { display = 'grid' gap = '.5rem' animation = 'month-view-mount 100ms infinite' }
87. 'month-view header' { display = 'flex' alignItems = 'center' justifyContent = 'space-between' gap = '.5rem' }
88. 'month-view h2' { margin = '0' fontSize = '1.1rem' color = 'var(--color-text-strong, rgb(245, 250, 255))' textAlign = 'center' flex = '1' textTransform = 'capitalize' }
89. 'month-view ol' { display = 'grid' gridTemplateColumns = 'repeat(7, minmax(0, 1fr))' margin = '0' padding = '0' listStyle = 'none' }
90. 'month-view button' { font = 'inherit' fontWeight = '600' padding = '.4rem .9rem' color = 'var(--color-text, rgb(195, 200, 205))' background = 'transparent' border = '1px solid var(--color-border, rgb(70, 75, 80))' borderRadius = '.4rem' cursor = 'pointer' }
91. 'month-view button:hover' { background = 'var(--color-surface, rgb(35, 40, 45))' }
92. '#month-weekdays li' { padding = '.3rem 0' fontSize = '.8rem' fontWeight = '600' color = 'var(--color-text-muted, rgb(145, 150, 155))' textAlign = 'center' }
93. '#month-days li' { minHeight = '3rem' padding = '.3rem' border = '1px solid var(--color-border, rgb(70, 75, 80))' textAlign = 'right' background = 'var(--color-surface, rgb(35, 40, 45))' }
94. '#month-days time' { color = 'var(--color-text, rgb(195, 200, 205))' fontSize = '.95rem' }
95. '#month-days li.outside' { background = 'var(--color-background, rgb(25, 30, 35))' }
96. '#month-days li.outside time' { color = 'var(--color-text-muted, rgb(145, 150, 155))' }
97. '#month-days li.today' { outline = '2px solid var(--color-accent, #569bd4)' outlineOffset = '-2px' }
98. '#month-days li.today time' { color = 'var(--color-accent, #569bd4)' fontWeight = '800' }
99. '@media (min-width: 40rem)' {
100. '#month-days li' { minHeight = '5rem' }
101. }
102. }
104. View {
105. monthView { on animationiteration(e) { emit monthMount(e) } on pointerover(e) { emit monthEnv(e) } on focusin(e) { emit monthEnv(e) } on touchstart(e) { emit monthEnv(e) }
106. header {
107. button { id = "month-prev" type = "button" class = "quiet" title = prevLabel "‹" on click(e) { emit monthPrev(e) } }
108. h2 { id = "month-title" title }
109. button { id = "month-next" type = "button" class = "quiet" title = nextLabel "›" on click(e) { emit monthNext(e) } }
110. }
111. ol { id = "month-weekdays" for (name of weekdays) { li { name } } }
112. ol { id = "month-days" for (d of days) { li { class = d.cls time { datetime = d.date d.n } } } }
113. input { id = "month-view-goto" type = "hidden" on change(e) { emit monthGoto(e.target.value) } }
114. }
115. }
117. on monthPrev(e) {
118. browserEnv()
119. paged = 1
120. show(month == 1 ? year - 1 : year, month == 1 ? 12 : month - 1)
121. }
123. on monthNext(e) {
124. browserEnv()
125. paged = 1
126. show(month == 12 ? year + 1 : year, month == 12 ? 1 : month + 1)
127. }
129. // the mount hook (a 100 ms CSS animation fires once the page is live): the browser's today is read at load, not on first touch
130. on monthMount(e) {
131. e.target.style.animationName = 'none'
132. browserEnv()
133. }
135. // the browser's today and language, once: today follows the user's time zone, the names their language
136. on monthEnv(e) { browserEnv() }
138. browserEnv() {
139. if (seen == 1) { return null }
140. seen = 1
141. let now = new Date()
142. let lang = navigator.language != null ? navigator.language : 'en'
143. today = pad4(now.getFullYear()) + '-' + pad(now.getMonth() + 1) + '-' + pad(now.getDate())
144. let mf = Intl.DateTimeFormat(lang, { month = 'long' })
145. let df = Intl.DateTimeFormat(lang, { weekday = 'short' })
146. let ms = []
147. let ds = []
148. let i = 0
149. while (i < 12) { ms.push(mf.format(new Date(Date.UTC(2024, i, 15, 12)))) i = i + 1 }
150. i = 0
151. while (i < 7) { ds.push(df.format(new Date(Date.UTC(2024, 0, 1 + i, 12)))) i = i + 1 }
152. monthNames = ms
153. weekdayNames = ds
154. weekdays = ds
155. let de = lang.slice(0, 2) == 'de'
156. prevLabel = de ? 'Voriger Monat' : 'Previous month'
157. nextLabel = de ? 'Nächster Monat' : 'Next month'
158. // the month shown follows the corrected today only while the user has not paged yet
159. if (paged == 0) { show(toNumber(today.slice(0, 4)), toNumber(today.slice(5, 7))) } else { show(year, month) }
160. }
162. // from a host script (the date picker): "YYYY-MM-DD" → show that date's month
163. on monthGoto(text) {
164. paged = 1
165. show(toNumber(text.slice(0, 4)), toNumber(text.slice(5, 7)))
166. }