components

10.7 KB

1. // range-picker.hl — THE DATE RANGE PICKER, all Hybriel: one text field ("YYYY-MM-DD – YYYY-MM-DD", typing works) that opens a
2. // month under it; a click on a day sets the start, a second click sets the end (an earlier second click swaps them), the
3. // days between are highlighted. The month grid is built here (no Date arithmetic: plain integers, so the server render and
4. // the browser agree); the browser's own today and language come in when the field gets focus (`Date` and `Intl` are
5. // browser globals of View handlers). The popup is shown by CSS while the field or the popup has focus (:focus-within), so
6. // no `if` re-creates the DOM. The field posts in a form by its `name`.
8. import { now, timestamp } from 'hl:time'
10. // the server's today (UTC) for the first render only; the browser corrects it when the field gets focus
11. serverToday = () => { return timestamp(now()).slice(0, 10) }
13. String name = 'range'
14. String value = ''
15. String kept = ''
16. String pending = ''
17. String start = ''
18. String end = ''
19. String invalidText = 'false'
20. String today = serverToday()
21. Number year = toNumber(today.slice(0, 4))
22. Number month = toNumber(today.slice(5, 7))
23. Hybrid monthNames = ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December']
24. Hybrid weekdayNames = ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
25. Hybrid weekdays = weekdayNames
26. String title = monthNames[month - 1] + ' ' + year
27. Hybrid days = build(year, month, today, '', '')
28. String prevLabel = 'Previous month'
29. String nextLabel = 'Next month'
30. String placeholder = 'YYYY-MM-DD – YYYY-MM-DD'
31. String sep = ' – '
33. pad(n) { return n < 10 ? '0' + n : '' + n }
35. leap(y) { return (y % 4 == 0 && y % 100 != 0) || y % 400 == 0 }
37. daysIn(y, m) {
38. if (m == 2) { return leap(y) ? 29 : 28 }
39. if (m == 4 || m == 6 || m == 9 || m == 11) { return 30 }
40. return 31
41. }
43. // 0 = Monday … 6 = Sunday (Sakamoto's method gives 0 = Sunday)
44. weekdayOf(y, m, d) {
45. let t = [0, 3, 2, 5, 0, 3, 5, 1, 4, 6, 2, 4]
46. let yy = m < 3 ? y - 1 : y
47. let sun = (yy + (yy - yy % 4) / 4 - (yy - yy % 100) / 100 + (yy - yy % 400) / 400 + t[m - 1] + d) % 7
48. return (sun + 6) % 7
49. }
51. // "YYYY-MM-DD" → yyyymmdd as a number (strings have no ordering operators), or 0 when it is not a real day
52. keyOf(s) {
53. if (s.length != 10 || s.slice(4, 5) != '-' || s.slice(7, 8) != '-') { return 0 }
54. let y = toNumber(s.slice(0, 4))
55. let m = toNumber(s.slice(5, 7))
56. let d = toNumber(s.slice(8, 10))
57. if (y == null || m == null || d == null) { return 0 }
58. if (m < 1 || m > 12 || d < 1 || d > daysIn(y, m)) { return 0 }
59. if (('' + (10000 + y)).slice(1) + '-' + pad(m) + '-' + pad(d) != s) { return 0 }
60. return y * 10000 + m * 100 + d
61. }
63. // 42 days (six weeks of seven) so the popup keeps its height; each carries its state as a class
64. build(y, m, todayText, a, b) {
65. let py = m == 1 ? y - 1 : y
66. let pm = m == 1 ? 12 : m - 1
67. let ny = m == 12 ? y + 1 : y
68. let nm = m == 12 ? 1 : m + 1
69. let lead = weekdayOf(y, m, 1)
70. let n = daysIn(y, m)
71. let pn = daysIn(py, pm)
72. let ka = keyOf(a)
73. let kb = keyOf(b)
74. let out = []
75. let day = 1 - lead
76. let i = 0
77. while (i < 42) {
78. let cy = y
79. let cm = m
80. let cd = day
81. let cls = ''
82. if (day < 1) { cy = py cm = pm cd = pn + day cls = 'outside' }
83. if (day > n) { cy = ny cm = nm cd = day - n cls = 'outside' }
84. let date = ('' + (10000 + cy)).slice(1) + '-' + pad(cm) + '-' + pad(cd)
85. let k = cy * 10000 + cm * 100 + cd
86. if (date == todayText) { cls = cls + ' today' }
87. if (ka != 0 && kb != 0 && k > ka && k < kb) { cls = cls + ' between' }
88. if ((ka != 0 && k == ka) || (kb != 0 && k == kb)) { cls = cls + ' selected' }
89. out.push({ n = cd date = date cls = cls })
90. day = day + 1
91. i = i + 1
92. }
93. return out
94. }
96. show(y, m) {
97. year = y
98. month = m
99. title = monthNames[m - 1] + ' ' + y
100. days = build(y, m, today, start, end)
101. }
103. // the field's text → sets start / end when it is two real days (either order), else marks the field
104. apply(text) {
105. let n = text.length
106. let a = n >= 21 ? text.slice(0, 10) : ''
107. let b = n >= 21 ? text.slice(n - 10, n) : ''
108. let ka = keyOf(a)
109. let kb = keyOf(b)
110. if (ka != 0 && kb != 0) {
111. start = ka <= kb ? a : b
112. end = ka <= kb ? b : a
113. invalidText = 'false'
114. return true
115. }
116. start = ''
117. end = ''
118. invalidText = text != '' ? 'true' : 'false'
119. return false
120. }
122. // the month of a "YYYY-MM-DD" day, when it is not the month on show
123. gotoDay(s) {
124. if (keyOf(s) == 0) { return null }
125. show(toNumber(s.slice(0, 4)), toNumber(s.slice(5, 7)))
126. }
128. // 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.
129. Style {
130. 'range-picker' { position = 'relative' display = 'block' maxWidth = '18rem' }
131. 'range-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' }
132. 'range-picker input:focus' { outline = '2px solid var(--color-accent, #569bd4)' outlineOffset = '-1px' }
133. 'range-picker input[aria-invalid="true"]' { borderColor = 'var(--color-danger, #f44747)' }
134. 'range-picker picker-popup' { display = 'none' position = 'absolute' top = '100%' left = '0' zIndex = '4' width = 'min(22rem, 90vw)' marginTop = '.25rem' outline = 'none' }
135. 'range-picker:focus-within picker-popup' { display = 'block' }
136. 'range-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' }
137. 'range-picker month-view header' { display = 'flex' alignItems = 'center' justifyContent = 'space-between' gap = '.5rem' }
138. 'range-picker month-view h2' { margin = '0' fontSize = '1.1rem' color = 'var(--color-text-strong, rgb(245, 250, 255))' textAlign = 'center' flex = '1' textTransform = 'capitalize' }
139. 'range-picker month-view ol' { display = 'grid' gridTemplateColumns = 'repeat(7, minmax(0, 1fr))' margin = '0' padding = '0' listStyle = 'none' }
140. 'range-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' }
141. 'range-picker button:hover' { background = 'var(--color-surface, rgb(35, 40, 45))' }
142. 'range-picker ol.weekdays li' { padding = '.3rem 0' fontSize = '.8rem' fontWeight = '600' color = 'var(--color-text-muted, rgb(145, 150, 155))' textAlign = 'center' }
143. 'range-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' }
144. 'range-picker ol.days li:hover' { background = 'var(--color-background-sunken, rgb(15, 20, 25))' }
145. 'range-picker ol.days time' { color = 'var(--color-text, rgb(195, 200, 205))' fontSize = '.95rem' }
146. 'range-picker ol.days li.outside' { background = 'var(--color-background, rgb(25, 30, 35))' }
147. 'range-picker ol.days li.outside time' { color = 'var(--color-text-muted, rgb(145, 150, 155))' }
148. 'range-picker ol.days li.today' { outline = '2px solid var(--color-accent, #569bd4)' outlineOffset = '-2px' }
149. 'range-picker ol.days li.between' { background = 'var(--color-background-sunken, rgb(15, 20, 25))' outline = '1px solid var(--color-accent, #569bd4)' outlineOffset = '-1px' }
150. 'range-picker ol.days li.selected' { background = 'var(--color-accent, #569bd4)' }
151. 'range-picker ol.days li.selected time' { color = 'var(--color-accent-text, rgb(15, 20, 25))' }
152. }
154. View {
155. rangePicker {
156. input { id = "range-picker-input" name = name type = "text" autocomplete = "off" maxlength = "23" title = placeholder placeholder = placeholder value = value 'aria-invalid' = invalidText on focus(e) { emit rangeOpen(e) } on input(e) { emit rangeTyped(e.target.value) } on keydown(e) { emit rangeKey(e.key) } }
157. pickerPopup { tabindex = "-1"
158. monthView {
159. header {
160. button { id = "range-prev" type = "button" class = "quiet" title = prevLabel "‹" on click(e) { emit rangePrev(e) } }
161. h2 { title }
162. button { id = "range-next" type = "button" class = "quiet" title = nextLabel "›" on click(e) { emit rangeNext(e) } }
163. }
164. ol { class = "weekdays" for (wd of weekdays) { li { wd } } }
165. ol { class = "days" for (d of days) { li { class = d.cls time { datetime = d.date d.n } on click(e) { emit rangePick(d.date) } } } }
166. }
167. }
168. }
169. }
171. // the browser knows today and its language; the field gets focus first, so this runs before a day is clicked
172. on rangeOpen(e) {
173. let now = new Date()
174. let lang = navigator.language != null ? navigator.language : 'en'
175. let t = ('' + (10000 + now.getFullYear())).slice(1) + '-' + pad(now.getMonth() + 1) + '-' + pad(now.getDate())
176. if (t != today) {
177. let mf = Intl.DateTimeFormat(lang, { month = 'long' })
178. let df = Intl.DateTimeFormat(lang, { weekday = 'short' })
179. let ms = []
180. let ds = []
181. let i = 0
182. while (i < 12) { ms.push(mf.format(new Date(Date.UTC(2024, i, 15, 12)))) i = i + 1 }
183. i = 0
184. while (i < 7) { ds.push(df.format(new Date(Date.UTC(2024, 0, 1 + i, 12)))) i = i + 1 }
185. today = t
186. monthNames = ms
187. weekdayNames = ds
188. weekdays = ds
189. let de = lang.slice(0, 2) == 'de'
190. prevLabel = de ? 'Voriger Monat' : 'Previous month'
191. nextLabel = de ? 'Nächster Monat' : 'Next month'
192. }
193. // a half-picked start is dropped; the month shown is the range's start, else today's month
194. if (pending != '') {
195. pending = ''
196. value = kept
197. apply(kept)
198. }
199. if (start != '') { gotoDay(start) } else { show(toNumber(today.slice(0, 4)), toNumber(today.slice(5, 7))) }
200. }
202. on rangeTyped(text) {
203. pending = ''
204. value = text
205. if (apply(text)) { gotoDay(start) } else { show(year, month) }
206. kept = start != '' ? start + sep + end : ''
207. }
209. on rangeKey(key) {
210. if (key == 'Escape' || key == 'Enter') {
211. if (pending != '') {
212. pending = ''
213. value = kept
214. apply(kept)
215. show(year, month)
216. }
217. document.activeElement.blur()
218. }
219. }
221. on rangePrev(e) { show(month == 1 ? year - 1 : year, month == 1 ? 12 : month - 1) }
223. on rangeNext(e) { show(month == 12 ? year + 1 : year, month == 12 ? 1 : month + 1) }
225. on rangePick(d) {
226. if (pending == '') {
227. kept = start != '' ? start + sep + end : ''
228. pending = d
229. start = d
230. end = ''
231. value = d + sep
232. invalidText = 'false'
233. show(year, month)
234. return null
235. }
236. let a = keyOf(pending) <= keyOf(d) ? pending : d
237. let b = keyOf(pending) <= keyOf(d) ? d : pending
238. pending = ''
239. start = a
240. end = b
241. value = a + sep + b
242. kept = value
243. show(year, month)
244. document.activeElement.blur()
245. }