components

3.6 KB

1. // pagination.hl — THE PAGINATION: "Previous 1 .. 44 45 46 .. 89 Next". Buttons for the first and last page, the current page
2. // and its neighbours, "…" for the pages left out. Previous is missing on the first page, Next on the last. Plain Hybriel, no
3. // script. The page reads `page` (1-based) and `pages` (how many there are) as its own members — set `pages` on the tag:
4. // `Pagination { pages = 89 }`. USE ONE PER PAGE: a composed component's members are the page's state (COMPONENTS.md §12).
5. // Every entry is a button (an `if` or a conditional attribute would re-create the DOM, hybriel#41); the "…" ones
6. // only differ by class, and a click on them does nothing (a bound attribute like tabindex does not follow a reassigned list).
7. Number page = 1
8. Number pages = 10
9. String previousLabel = 'Previous'
10. String nextLabel = 'Next'
11. Hybrid items = build(page, pages)
13. entry(label, target, cls) {
14. return { label = label target = target cls = cls }
15. }
17. // the page numbers to show: first, last, current ± 1; at either end four in a row; 0 = a gap
18. numbers(p, n) {
19. let want = []
20. let i = 1
21. while (i <= n) {
22. let near = i == 1 || i == n || (i >= p - 1 && i <= p + 1)
23. if (p <= 3 && i <= 4) { near = true }
24. if (p >= n - 2 && i >= n - 3) { near = true }
25. if (near) { want.push(i) }
26. i = i + 1
27. }
28. let out = []
29. let last = 0
30. let k = 0
31. while (k < want.length) {
32. let v = want[k]
33. if (v == last + 2) { out.push(v - 1) }
34. else if (v > last + 2) { out.push(0) }
35. out.push(v)
36. last = v
37. k = k + 1
38. }
39. return out
40. }
42. build(p, n) {
43. let out = []
44. if (p > 1) { out.push(entry(previousLabel, p - 1, 'step')) }
45. let nums = numbers(p, n)
46. let k = 0
47. while (k < nums.length) {
48. let v = nums[k]
49. if (v == 0) { out.push(entry('…', 0, 'gap')) }
50. else { out.push(entry('' + v, v, v == p ? 'page current' : 'page')) }
51. k = k + 1
52. }
53. if (p < n) { out.push(entry(nextLabel, p + 1, 'step')) }
54. return out
55. }
57. show(p) {
58. if (p < 1 || p > pages) { return }
59. page = p
60. items = build(p, pages)
61. }
63. // 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.
64. Style {
65. pagination { display = 'block' }
66. 'pagination ol' { display = 'flex' flexWrap = 'wrap' gap = '.3rem' margin = '0' padding = '0' listStyle = 'none' }
67. 'pagination button' { font = 'inherit' fontWeight = '600' minWidth = '2.2rem' padding = '.35rem .6rem' color = 'var(--color-text, rgb(195, 200, 205))' background = 'transparent' border = '1px solid var(--color-border, rgb(70, 75, 80))' borderRadius = '.4rem' cursor = 'pointer' }
68. 'pagination button:hover' { background = 'var(--color-surface, rgb(35, 40, 45))' }
69. 'pagination li.current button' { color = 'var(--color-accent-text, rgb(15, 20, 25))' background = 'var(--color-accent, #569bd4)' border = '1px solid var(--color-accent, #569bd4)' }
70. 'pagination li.gap button' { color = 'var(--color-text-muted, rgb(145, 150, 155))' background = 'transparent' border = '0' minWidth = '0' padding = '.35rem .2rem' cursor = 'default' pointerEvents = 'none' }
71. }
73. View {
74. pagination {
75. nav { title = "Pagination"
76. ol { id = "pagination-items" for (it of items) { li { class = it.cls button { type = "button" class = "quiet" it.label on click(e) { emit paginationGo(e.target.textContent) } } } } }
77. }
78. }
79. }
81. // the click carries the button's text (a bound attribute does not follow a reassigned list, a text does)
82. on paginationGo(text) {
83. if (text == previousLabel) { show(page - 1) }
84. else if (text == nextLabel) { show(page + 1) }
85. else if (text != '…') { show(toNumber(text)) }
86. }