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. t = [0, 3, 2, 5, 0, 3, 5, 1, 4, 6, 2, 4]
39. yy = m < 3 ? y - 1 : y
40. 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. py = m == 1 ? y - 1 : y
47. pm = m == 1 ? 12 : m - 1
48. ny = m == 12 ? y + 1 : y
49. nm = m == 12 ? 1 : m + 1
50. lead = weekdayOf(y, m, 1)
51. let n = daysIn(y, m)
52. pn = daysIn(py, pm)
53. 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. // Look: black, white and the greys #555 #999 #ddd #f2f2f2 (the library's base, named in shared/base.hl; README "Look"). Every colour is a semantic token
84. // with its base value as fallback, `var(--color-…, #000)`, so a bare copy looks right and an app that declares the tokens (layouts.worldapi.org's
85. // theme) restyles it. No frames: a border or ring only where it means something (today). A component's browser module
86. // cannot import tokens itself.
87. Style {
88. '@keyframes month-view-mount' { 'from' { opacity = '.999' } to { opacity = '1' } }
89. 'month-view' { display = 'grid' gap = '.5rem' animation = 'month-view-mount 100ms infinite' }
90. 'month-view header' { display = 'flex' alignItems = 'center' justifyContent = 'space-between' gap = '.5rem' }
91. 'month-view h2' { margin = '0' fontSize = '1.1rem' color = 'var(--color-text-strong, #000)' textAlign = 'center' flex = '1' textTransform = 'capitalize' }
92. 'month-view ol' { display = 'grid' gridTemplateColumns = 'repeat(7, minmax(0, 1fr))' gap = '.25rem' margin = '0' padding = '0' listStyle = 'none' }
93. 'month-view button' { font = 'inherit' fontWeight = '600' padding = '.4rem .9rem' color = 'var(--color-text, #000)' background = 'transparent' border = '0' borderRadius = '.4rem' cursor = 'pointer' }
94. 'month-view button:hover' { background = 'var(--color-surface, #f2f2f2)' }
95. '#month-weekdays li' { padding = '.3rem 0' fontSize = '.8rem' fontWeight = '600' color = 'var(--color-text-muted, #555)' textAlign = 'center' }
96. '#month-days li' { minHeight = '3rem' padding = '.3rem' border = '0' borderRadius = '.3rem' textAlign = 'right' background = 'var(--color-surface, #f2f2f2)' }
97. '#month-days time' { color = 'var(--color-text, #000)' fontSize = '.95rem' }
98. '#month-days li.outside' { background = 'var(--color-background, #fff)' }
99. '#month-days li.outside time' { color = 'var(--color-text-muted, #555)' }
100. '#month-days li.today' { outline = '2px solid var(--color-accent, #000)' outlineOffset = '-2px' }
101. '#month-days li.today time' { color = 'var(--color-accent, #000)' fontWeight = '800' }
102. '@media (min-width: 40rem)' {
103. '#month-days li' { minHeight = '5rem' }
104. }
105. }
107. View {
108. 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) }
109. header {
110. button { id = "month-prev" type = "button" class = "quiet" title = prevLabel "‹" on click(e) { emit monthPrev(e) } }
111. h2 { id = "month-title" title }
112. button { id = "month-next" type = "button" class = "quiet" title = nextLabel "›" on click(e) { emit monthNext(e) } }
113. }
114. ol { id = "month-weekdays" for (name of weekdays) { li { name } } }
115. ol { id = "month-days" for (d of days) { li { class = d.cls time { datetime = d.date d.n } } } }
116. input { id = "month-view-goto" type = "hidden" on change(e) { emit monthGoto(e.target.value) } }
117. }
118. }
120. on monthPrev(e) {
121. browserEnv()
122. paged = 1
123. show(month == 1 ? year - 1 : year, month == 1 ? 12 : month - 1)
124. }
126. on monthNext(e) {
127. browserEnv()
128. paged = 1
129. show(month == 12 ? year + 1 : year, month == 12 ? 1 : month + 1)
130. }
132. // 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
133. on monthMount(e) {
134. e.target.style.animationName = 'none'
135. browserEnv()
136. }
138. // the browser's today and language, once: today follows the user's time zone, the names their language
139. on monthEnv(e) { browserEnv() }
141. browserEnv() {
142. if (seen == 1) { return null }
143. seen = 1
144. now = new Date()
145. lang = navigator.language != null ? navigator.language : 'en'
146. today = pad4(now.getFullYear()) + '-' + pad(now.getMonth() + 1) + '-' + pad(now.getDate())
147. mf = Intl.DateTimeFormat(lang, { month = 'long' })
148. df = Intl.DateTimeFormat(lang, { weekday = 'short' })
149. ms = []
150. ds = []
151. let i = 0
152. while (i < 12) { ms.push(mf.format(new Date(Date.UTC(2024, i, 15, 12)))) i = i + 1 }
153. i = 0
154. while (i < 7) { ds.push(df.format(new Date(Date.UTC(2024, 0, 1 + i, 12)))) i = i + 1 }
155. monthNames = ms
156. weekdayNames = ds
157. weekdays = ds
158. de = lang.slice(0, 2) == 'de'
159. prevLabel = de ? 'Voriger Monat' : 'Previous month'
160. nextLabel = de ? 'Nächster Monat' : 'Next month'
161. // the month shown follows the corrected today only while the user has not paged yet
162. if (paged == 0) { show(toNumber(today.slice(0, 4)), toNumber(today.slice(5, 7))) } else { show(year, month) }
163. }
165. // from a host script (the date picker): "YYYY-MM-DD" → show that date's month
166. on monthGoto(text) {
167. paged = 1
168. show(toNumber(text.slice(0, 4)), toNumber(text.slice(5, 7)))
169. }