components

10.5 KB

1. // date-picker.hl — THE DATE PICKER for input fields, all Hybriel (no JavaScript file): `DatePicker { names = "arrival,departure" }`
2. // makes one text field per name; click a field, a month opens under it, click a day and the field shows it as YYYY-MM-DD.
3. // Typing works too. Each field posts in a form by its name. The month grid is built here (plain integers, so the server render
4. // and the browser agree); the browser's own today and language come in when a field gets focus (`Date` and `Intl` are browser
5. // globals of View handlers). The popup is shown by CSS while its field or the popup has focus (:focus-within), so no `if`
6. // re-creates the DOM. Use ONE `DatePicker` per page (a composed component's members are the page's state) — give it all the fields.
8. import { now, timestamp } from 'hl:time'
10. // the server's today (UTC) for the first render only; the browser corrects it when a field gets focus
11. serverToday = () => { return timestamp(now()).slice(0, 10) }
13. String names = 'date'
14. Hybrid fields = names.split(',')
15. Hybrid values = blanks(fields)
16. Hybrid rows = makeRows(fields)
17. String today = serverToday()
18. Number year = toNumber(today.slice(0, 4))
19. Number month = toNumber(today.slice(5, 7))
20. Hybrid monthNames = ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December']
21. Hybrid weekdayNames = ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
22. Hybrid weekdays = weekdayNames
23. String title = monthNames[month - 1] + ' ' + year
24. String selected = ''
25. Hybrid days = build(year, month, today, '')
26. String prevLabel = 'Previous month'
27. String nextLabel = 'Next month'
28. String placeholder = 'YYYY-MM-DD'
30. blanks(list) {
31. let out = []
32. let i = 0
33. while (i < list.length) { out.push('') i = i + 1 }
34. return out
35. }
37. // `rows` is never reassigned: re-rendering the rows would re-create the input elements, and a re-created input on a slow
38. // round trip shows an empty value although its attribute is set. A field's text and its invalid mark are written to the
39. // element itself (see field()) instead of being bound.
40. makeRows(list) {
41. let out = []
42. let i = 0
43. while (i < list.length) {
44. out.push({ name = list[i] hint = list[i] + ', ' + placeholder })
45. i = i + 1
46. }
47. return out
48. }
50. pad(n) { return n < 10 ? '0' + n : '' + n }
52. leap(y) { return (y % 4 == 0 && y % 100 != 0) || y % 400 == 0 }
54. daysIn(y, m) {
55. if (m == 2) { return leap(y) ? 29 : 28 }
56. if (m == 4 || m == 6 || m == 9 || m == 11) { return 30 }
57. return 31
58. }
60. // 0 = Monday … 6 = Sunday (Sakamoto's method gives 0 = Sunday)
61. weekdayOf(y, m, d) {
62. let t = [0, 3, 2, 5, 0, 3, 5, 1, 4, 6, 2, 4]
63. let yy = m < 3 ? y - 1 : y
64. let sun = (yy + (yy - yy % 4) / 4 - (yy - yy % 100) / 100 + (yy - yy % 400) / 400 + t[m - 1] + d) % 7
65. return (sun + 6) % 7
66. }
68. // "YYYY-MM-DD" → yyyymmdd as a number (strings have no ordering operators), or 0 when it is not a real day
69. keyOf(s) {
70. if (s.length != 10 || s.slice(4, 5) != '-' || s.slice(7, 8) != '-') { return 0 }
71. let y = toNumber(s.slice(0, 4))
72. let m = toNumber(s.slice(5, 7))
73. let d = toNumber(s.slice(8, 10))
74. if (y == null || m == null || d == null) { return 0 }
75. if (m < 1 || m > 12 || d < 1 || d > daysIn(y, m)) { return 0 }
76. if (('' + (10000 + y)).slice(1) + '-' + pad(m) + '-' + pad(d) != s) { return 0 }
77. return y * 10000 + m * 100 + d
78. }
80. // 42 days (six weeks of seven) so the popup keeps its height; each carries its state as a class
81. build(y, m, todayText, chosen) {
82. let py = m == 1 ? y - 1 : y
83. let pm = m == 1 ? 12 : m - 1
84. let ny = m == 12 ? y + 1 : y
85. let nm = m == 12 ? 1 : m + 1
86. let lead = weekdayOf(y, m, 1)
87. let n = daysIn(y, m)
88. let pn = daysIn(py, pm)
89. let out = []
90. let day = 1 - lead
91. let i = 0
92. while (i < 42) {
93. let cy = y
94. let cm = m
95. let cd = day
96. let cls = ''
97. if (day < 1) { cy = py cm = pm cd = pn + day cls = 'outside' }
98. if (day > n) { cy = ny cm = nm cd = day - n cls = 'outside' }
99. let date = ('' + (10000 + cy)).slice(1) + '-' + pad(cm) + '-' + pad(cd)
100. if (date == todayText) { cls = cls + ' today' }
101. if (date == chosen) { cls = cls + ' selected' }
102. out.push({ n = cd date = date cls = cls })
103. day = day + 1
104. i = i + 1
105. }
106. return out
107. }
109. show(y, m) {
110. year = y
111. month = m
112. title = monthNames[m - 1] + ' ' + y
113. days = build(y, m, today, selected)
114. }
116. // the row of a field name
117. indexOf(name) {
118. let i = 0
119. while (i < fields.length) {
120. if (fields[i] == name) { return i }
121. i = i + 1
122. }
123. return 0
124. }
126. // the input element of a field name
127. field(name) { return document.querySelector('date-picker input[name="' + name + '"]') }
129. // a field's text changed (typed or picked): keep it, mark it when it is not a real day, show its month
130. setValue(name, text, showMonth) {
131. let i = indexOf(name)
132. let k = keyOf(text)
133. values[i] = text
134. let el = field(name)
135. if (el.value != text) { el.value = text }
136. el.setAttribute('aria-invalid', text != '' && k == 0 ? 'true' : 'false')
137. selected = k != 0 ? text : ''
138. if (k != 0 && showMonth) { show(toNumber(text.slice(0, 4)), toNumber(text.slice(5, 7))) } else { show(year, month) }
139. }
141. // 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.
142. Style {
143. 'date-picker' { display = 'grid' gap = '.75rem' maxWidth = '18rem' }
144. 'date-field' { position = 'relative' display = 'block' }
145. 'date-picker input' { width = '100%' boxSizing = 'border-box' font = 'inherit' padding = '.4rem .6rem' color = 'var(--color-text, rgb(195, 200, 205))' background = 'var(--color-background-sunken, rgb(15, 20, 25))' border = '1px solid var(--color-border, rgb(70, 75, 80))' borderRadius = '.4rem' }
146. 'date-picker input:focus' { outline = '2px solid var(--color-accent, #569bd4)' outlineOffset = '-1px' }
147. 'date-picker input[aria-invalid="true"]' { borderColor = 'var(--color-danger, #f44747)' }
148. 'date-picker picker-popup' { display = 'none' position = 'absolute' top = '100%' left = '0' zIndex = '4' width = 'min(22rem, 90vw)' marginTop = '.25rem' outline = 'none' }
149. 'date-field:focus-within picker-popup' { display = 'block' }
150. 'date-picker month-view' { display = 'grid' gap = '.5rem' padding = '.5rem' background = 'var(--color-background, rgb(25, 30, 35))' border = '1px solid var(--color-border, rgb(70, 75, 80))' borderRadius = '.5rem' }
151. 'date-picker month-view header' { display = 'flex' alignItems = 'center' justifyContent = 'space-between' gap = '.5rem' }
152. 'date-picker month-view h2' { margin = '0' fontSize = '1.1rem' color = 'var(--color-text-strong, rgb(245, 250, 255))' textAlign = 'center' flex = '1' textTransform = 'capitalize' }
153. 'date-picker month-view ol' { display = 'grid' gridTemplateColumns = 'repeat(7, minmax(0, 1fr))' margin = '0' padding = '0' listStyle = 'none' }
154. 'date-picker 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' }
155. 'date-picker button:hover' { background = 'var(--color-surface, rgb(35, 40, 45))' }
156. 'date-picker ol.weekdays li' { padding = '.3rem 0' fontSize = '.8rem' fontWeight = '600' color = 'var(--color-text-muted, rgb(145, 150, 155))' textAlign = 'center' }
157. 'date-picker ol.days li' { minHeight = '2rem' padding = '.3rem' border = '1px solid var(--color-border, rgb(70, 75, 80))' textAlign = 'right' background = 'var(--color-surface, rgb(35, 40, 45))' cursor = 'pointer' }
158. 'date-picker ol.days li:hover' { background = 'var(--color-background-sunken, rgb(15, 20, 25))' }
159. 'date-picker ol.days time' { color = 'var(--color-text, rgb(195, 200, 205))' fontSize = '.95rem' }
160. 'date-picker ol.days li.outside' { background = 'var(--color-background, rgb(25, 30, 35))' }
161. 'date-picker ol.days li.outside time' { color = 'var(--color-text-muted, rgb(145, 150, 155))' }
162. 'date-picker ol.days li.today' { outline = '2px solid var(--color-accent, #569bd4)' outlineOffset = '-2px' }
163. 'date-picker ol.days li.selected' { background = 'var(--color-accent, #569bd4)' }
164. 'date-picker ol.days li.selected time' { color = 'var(--color-accent-text, rgb(15, 20, 25))' }
165. }
167. View {
168. datePicker {
169. for (r of rows) {
170. dateField {
171. input { name = r.name type = "text" inputmode = "numeric" autocomplete = "off" maxlength = "10" title = r.hint placeholder = placeholder 'aria-invalid' = "false" on focus(e) { emit dateOpen(r.name) } on input(e) { emit dateTyped(r.name, e.target.value) } on keydown(e) { emit dateKey(e.key) } }
172. pickerPopup { tabindex = "-1"
173. monthView {
174. header {
175. button { type = "button" class = "quiet prev" title = prevLabel "‹" on click(e) { emit datePrev(e) } }
176. h2 { title }
177. button { type = "button" class = "quiet next" title = nextLabel "›" on click(e) { emit dateNext(e) } }
178. }
179. ol { class = "weekdays" for (wd of weekdays) { li { wd } } }
180. ol { class = "days" for (d of days) { li { class = d.cls time { datetime = d.date d.n } on click(e) { emit datePick(r.name, d.date) } } } }
181. }
182. }
183. }
184. }
185. }
186. }
188. // the browser knows today and its language; a field gets focus first, so this runs before a day is clicked
189. on dateOpen(name) {
190. let now = new Date()
191. let lang = navigator.language != null ? navigator.language : 'en'
192. let t = ('' + (10000 + now.getFullYear())).slice(1) + '-' + pad(now.getMonth() + 1) + '-' + pad(now.getDate())
193. if (t != today) {
194. let mf = Intl.DateTimeFormat(lang, { month = 'long' })
195. let df = Intl.DateTimeFormat(lang, { weekday = 'short' })
196. let ms = []
197. let ds = []
198. let i = 0
199. while (i < 12) { ms.push(mf.format(new Date(Date.UTC(2024, i, 15, 12)))) i = i + 1 }
200. i = 0
201. while (i < 7) { ds.push(df.format(new Date(Date.UTC(2024, 0, 1 + i, 12)))) i = i + 1 }
202. today = t
203. monthNames = ms
204. weekdayNames = ds
205. weekdays = ds
206. let de = lang.slice(0, 2) == 'de'
207. prevLabel = de ? 'Voriger Monat' : 'Previous month'
208. nextLabel = de ? 'Nächster Monat' : 'Next month'
209. }
210. let text = values[indexOf(name)]
211. selected = keyOf(text) != 0 ? text : ''
212. if (selected != '') { show(toNumber(text.slice(0, 4)), toNumber(text.slice(5, 7))) } else { show(toNumber(today.slice(0, 4)), toNumber(today.slice(5, 7))) }
213. }
215. on dateTyped(name, text) { setValue(name, text, true) }
217. on dateKey(key) {
218. if (key == 'Escape' || key == 'Enter') { document.activeElement.blur() }
219. }
221. on datePrev(e) { show(month == 1 ? year - 1 : year, month == 1 ? 12 : month - 1) }
223. on dateNext(e) { show(month == 12 ? year + 1 : year, month == 12 ? 1 : month + 1) }
225. on datePick(name, d) {
226. setValue(name, d, false)
227. document.activeElement.blur()
228. }