components

10.4 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. t = [0, 3, 2, 5, 0, 3, 5, 1, 4, 6, 2, 4]
46. yy = m < 3 ? y - 1 : y
47. 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. y = toNumber(s.slice(0, 4))
55. m = toNumber(s.slice(5, 7))
56. 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. py = m == 1 ? y - 1 : y
66. pm = m == 1 ? 12 : m - 1
67. ny = m == 12 ? y + 1 : y
68. nm = m == 12 ? 1 : m + 1
69. lead = weekdayOf(y, m, 1)
70. let n = daysIn(y, m)
71. pn = daysIn(py, pm)
72. ka = keyOf(a)
73. kb = keyOf(b)
74. 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. n = text.length
106. a = n >= 21 ? text.slice(0, 10) : ''
107. b = n >= 21 ? text.slice(n - 10, n) : ''
108. ka = keyOf(a)
109. 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. // 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
129. // 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
130. // theme) restyles it. No frames: a border or ring only where it means something (focus, today, an invalid field). A component's browser module
131. // cannot import tokens itself.
132. Style {
133. 'range-picker' { position = 'relative' display = 'block' maxWidth = '18rem' }
134. 'range-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' }
135. 'range-picker input:focus' { outline = '2px solid var(--color-accent, #555)' outlineOffset = '-1px' }
136. 'range-picker input[aria-invalid="true"]' { outline = '2px dashed var(--color-danger, #000)' outlineOffset = '-2px' }
137. 'range-picker picker-popup' { display = 'none' position = 'absolute' top = '100%' left = '0' zIndex = '4' width = 'min(22rem, 90vw)' marginTop = '.25rem' outline = 'none' }
138. 'range-picker:focus-within picker-popup' { display = 'block' }
139. 'range-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)' }
140. 'range-picker month-view header' { display = 'flex' alignItems = 'center' justifyContent = 'space-between' gap = '.5rem' }
141. 'range-picker month-view h2' { margin = '0' fontSize = '1.1rem' color = 'var(--color-text-strong, #000)' textAlign = 'center' flex = '1' textTransform = 'capitalize' }
142. 'range-picker month-view ol' { display = 'grid' gridTemplateColumns = 'repeat(7, minmax(0, 1fr))' gap = '.2rem' margin = '0' padding = '0' listStyle = 'none' }
143. 'range-picker button' { font = 'inherit' fontWeight = '600' padding = '.4rem .9rem' color = 'var(--color-text, #000)' background = 'transparent' border = '0' borderRadius = '.4rem' cursor = 'pointer' }
144. 'range-picker button:hover' { background = 'var(--color-surface, #f2f2f2)' }
145. 'range-picker ol.weekdays li' { padding = '.3rem 0' fontSize = '.8rem' fontWeight = '600' color = 'var(--color-text-muted, #555)' textAlign = 'center' }
146. 'range-picker ol.days li' { minHeight = '2rem' padding = '.3rem' border = '0' borderRadius = '.3rem' textAlign = 'right' background = 'var(--color-surface, #f2f2f2)' cursor = 'pointer' }
147. 'range-picker ol.days li:hover' { background = 'var(--color-background-sunken, #ddd)' }
148. 'range-picker ol.days time' { color = 'var(--color-text, #000)' fontSize = '.95rem' }
149. 'range-picker ol.days li.outside' { background = 'var(--color-background, #fff)' }
150. 'range-picker ol.days li.outside time' { color = 'var(--color-text-muted, #555)' }
151. 'range-picker ol.days li.today' { outline = '2px solid var(--color-accent, #000)' outlineOffset = '-2px' }
152. 'range-picker ol.days li.between' { background = 'var(--color-background-sunken, #ddd)' }
153. 'range-picker ol.days li.selected' { background = 'var(--color-accent, #000)' }
154. 'range-picker ol.days li.selected time' { color = 'var(--color-accent-text, #fff)' }
155. }
157. View {
158. rangePicker {
159. 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) } }
160. pickerPopup { tabindex = "-1"
161. monthView {
162. header {
163. button { id = "range-prev" type = "button" class = "quiet" title = prevLabel "‹" on click(e) { emit rangePrev(e) } }
164. h2 { title }
165. button { id = "range-next" type = "button" class = "quiet" title = nextLabel "›" on click(e) { emit rangeNext(e) } }
166. }
167. ol { class = "weekdays" for (wd of weekdays) { li { wd } } }
168. ol { class = "days" for (d of days) { li { class = d.cls time { datetime = d.date d.n } on click(e) { emit rangePick(d.date) } } } }
169. }
170. }
171. }
172. }
174. // the browser knows today and its language; the field gets focus first, so this runs before a day is clicked
175. on rangeOpen(e) {
176. let now = new Date()
177. lang = navigator.language != null ? navigator.language : 'en'
178. t = ('' + (10000 + now.getFullYear())).slice(1) + '-' + pad(now.getMonth() + 1) + '-' + pad(now.getDate())
179. if (t != today) {
180. mf = Intl.DateTimeFormat(lang, { month = 'long' })
181. df = Intl.DateTimeFormat(lang, { weekday = 'short' })
182. ms = []
183. ds = []
184. let i = 0
185. while (i < 12) { ms.push(mf.format(new Date(Date.UTC(2024, i, 15, 12)))) i = i + 1 }
186. i = 0
187. while (i < 7) { ds.push(df.format(new Date(Date.UTC(2024, 0, 1 + i, 12)))) i = i + 1 }
188. today = t
189. monthNames = ms
190. weekdayNames = ds
191. weekdays = ds
192. de = lang.slice(0, 2) == 'de'
193. prevLabel = de ? 'Voriger Monat' : 'Previous month'
194. nextLabel = de ? 'Nächster Monat' : 'Next month'
195. }
196. // a half-picked start is dropped; the month shown is the range's start, else today's month
197. if (pending != '') {
198. pending = ''
199. value = kept
200. apply(kept)
201. }
202. if (start != '') { gotoDay(start) } else { show(toNumber(today.slice(0, 4)), toNumber(today.slice(5, 7))) }
203. }
205. on rangeTyped(text) {
206. pending = ''
207. value = text
208. if (apply(text)) { gotoDay(start) } else { show(year, month) }
209. kept = start != '' ? start + sep + end : ''
210. }
212. on rangeKey(key) {
213. if (key == 'Escape' || key == 'Enter') {
214. if (pending != '') {
215. pending = ''
216. value = kept
217. apply(kept)
218. show(year, month)
219. }
220. document.activeElement.blur()
221. }
222. }
224. on rangePrev(e) { show(month == 1 ? year - 1 : year, month == 1 ? 12 : month - 1) }
226. on rangeNext(e) { show(month == 12 ? year + 1 : year, month == 12 ? 1 : month + 1) }
228. on rangePick(d) {
229. if (pending == '') {
230. kept = start != '' ? start + sep + end : ''
231. pending = d
232. start = d
233. end = ''
234. value = d + sep
235. invalidText = 'false'
236. show(year, month)
237. return null
238. }
239. a = keyOf(pending) <= keyOf(d) ? pending : d
240. b = keyOf(pending) <= keyOf(d) ? d : pending
241. pending = ''
242. start = a
243. end = b
244. value = a + sep + b
245. kept = value
246. show(year, month)
247. document.activeElement.blur()
248. }