components

10.4 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. 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. 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. t = [0, 3, 2, 5, 0, 3, 5, 1, 4, 6, 2, 4]
63. yy = m < 3 ? y - 1 : y
64. 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. y = toNumber(s.slice(0, 4))
72. m = toNumber(s.slice(5, 7))
73. 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. py = m == 1 ? y - 1 : y
83. pm = m == 1 ? 12 : m - 1
84. ny = m == 12 ? y + 1 : y
85. nm = m == 12 ? 1 : m + 1
86. lead = weekdayOf(y, m, 1)
87. let n = daysIn(y, m)
88. pn = daysIn(py, pm)
89. 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. i = indexOf(name)
132. k = keyOf(text)
133. values[i] = text
134. 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. // 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
142. // 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
143. // theme) restyles it. No frames: a border or ring only where it means something (focus, today, an invalid field). A component's browser module
144. // cannot import tokens itself.
145. Style {
146. 'date-picker' { display = 'grid' gap = '.75rem' maxWidth = '18rem' }
147. 'date-field' { position = 'relative' display = 'block' }
148. 'date-picker input' { width = '100%' boxSizing = 'border-box' font = 'inherit' padding = '.4rem .6rem' color = 'var(--color-text, #000)' background = 'var(--color-background-sunken, #f2f2f2)' border = '0' borderRadius = '.4rem' }
149. 'date-picker input:focus' { outline = '2px solid var(--color-accent, #555)' outlineOffset = '-1px' }
150. 'date-picker input[aria-invalid="true"]' { outline = '2px dashed var(--color-danger, #000)' outlineOffset = '-2px' }
151. 'date-picker picker-popup' { display = 'none' position = 'absolute' top = '100%' left = '0' zIndex = '4' width = 'min(22rem, 90vw)' marginTop = '.25rem' outline = 'none' }
152. 'date-field:focus-within picker-popup' { display = 'block' }
153. 'date-picker month-view' { display = 'grid' gap = '.5rem' padding = '.5rem' background = 'var(--color-background, #fff)' border = '0' borderRadius = '.5rem' boxShadow = '0 .5rem 1.5rem rgba(0, 0, 0, .25)' }
154. 'date-picker month-view header' { display = 'flex' alignItems = 'center' justifyContent = 'space-between' gap = '.5rem' }
155. 'date-picker month-view h2' { margin = '0' fontSize = '1.1rem' color = 'var(--color-text-strong, #000)' textAlign = 'center' flex = '1' textTransform = 'capitalize' }
156. 'date-picker month-view ol' { display = 'grid' gridTemplateColumns = 'repeat(7, minmax(0, 1fr))' gap = '.2rem' margin = '0' padding = '0' listStyle = 'none' }
157. 'date-picker button' { font = 'inherit' fontWeight = '600' padding = '.4rem .9rem' color = 'var(--color-text, #000)' background = 'transparent' border = '0' borderRadius = '.4rem' cursor = 'pointer' }
158. 'date-picker button:hover' { background = 'var(--color-surface, #f2f2f2)' }
159. 'date-picker ol.weekdays li' { padding = '.3rem 0' fontSize = '.8rem' fontWeight = '600' color = 'var(--color-text-muted, #555)' textAlign = 'center' }
160. 'date-picker ol.days li' { minHeight = '2rem' padding = '.3rem' border = '0' borderRadius = '.3rem' textAlign = 'right' background = 'var(--color-surface, #f2f2f2)' cursor = 'pointer' }
161. 'date-picker ol.days li:hover' { background = 'var(--color-background-sunken, #ddd)' }
162. 'date-picker ol.days time' { color = 'var(--color-text, #000)' fontSize = '.95rem' }
163. 'date-picker ol.days li.outside' { background = 'var(--color-background, #fff)' }
164. 'date-picker ol.days li.outside time' { color = 'var(--color-text-muted, #555)' }
165. 'date-picker ol.days li.today' { outline = '2px solid var(--color-accent, #000)' outlineOffset = '-2px' }
166. 'date-picker ol.days li.selected' { background = 'var(--color-accent, #000)' }
167. 'date-picker ol.days li.selected time' { color = 'var(--color-accent-text, #fff)' }
168. }
170. View {
171. datePicker {
172. for (r of rows) {
173. dateField {
174. 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) } }
175. pickerPopup { tabindex = "-1"
176. monthView {
177. header {
178. button { type = "button" class = "quiet prev" title = prevLabel "‹" on click(e) { emit datePrev(e) } }
179. h2 { title }
180. button { type = "button" class = "quiet next" title = nextLabel "›" on click(e) { emit dateNext(e) } }
181. }
182. ol { class = "weekdays" for (wd of weekdays) { li { wd } } }
183. 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) } } } }
184. }
185. }
186. }
187. }
188. }
189. }
191. // the browser knows today and its language; a field gets focus first, so this runs before a day is clicked
192. on dateOpen(name) {
193. let now = new Date()
194. lang = navigator.language != null ? navigator.language : 'en'
195. t = ('' + (10000 + now.getFullYear())).slice(1) + '-' + pad(now.getMonth() + 1) + '-' + pad(now.getDate())
196. if (t != today) {
197. mf = Intl.DateTimeFormat(lang, { month = 'long' })
198. df = Intl.DateTimeFormat(lang, { weekday = 'short' })
199. ms = []
200. ds = []
201. let i = 0
202. while (i < 12) { ms.push(mf.format(new Date(Date.UTC(2024, i, 15, 12)))) i = i + 1 }
203. i = 0
204. while (i < 7) { ds.push(df.format(new Date(Date.UTC(2024, 0, 1 + i, 12)))) i = i + 1 }
205. today = t
206. monthNames = ms
207. weekdayNames = ds
208. weekdays = ds
209. de = lang.slice(0, 2) == 'de'
210. prevLabel = de ? 'Voriger Monat' : 'Previous month'
211. nextLabel = de ? 'Nächster Monat' : 'Next month'
212. }
213. text = values[indexOf(name)]
214. selected = keyOf(text) != 0 ? text : ''
215. 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))) }
216. }
218. on dateTyped(name, text) { setValue(name, text, true) }
220. on dateKey(key) {
221. if (key == 'Escape' || key == 'Enter') { document.activeElement.blur() }
222. }
224. on datePrev(e) { show(month == 1 ? year - 1 : year, month == 1 ? 12 : month - 1) }
226. on dateNext(e) { show(month == 12 ? year + 1 : year, month == 12 ? 1 : month + 1) }
228. on datePick(name, d) {
229. setValue(name, d, false)
230. document.activeElement.blur()
231. }