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. 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. 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. out = []
44. if (p > 1) { out.push(entry(previousLabel, p - 1, 'step')) }
45. 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. // 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
64. // 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
65. // theme) restyles it. No frames: a border or ring only where it means something. A component's browser module
66. // cannot import tokens itself.
67. Style {
68. pagination { display = 'block' }
69. 'pagination ol' { display = 'flex' flexWrap = 'wrap' gap = '.3rem' margin = '0' padding = '0' listStyle = 'none' }
70. 'pagination button' { font = 'inherit' fontWeight = '600' minWidth = '2.2rem' padding = '.35rem .6rem' color = 'var(--color-text, #000)' background = 'transparent' border = '0' borderRadius = '.4rem' cursor = 'pointer' }
71. 'pagination button:hover' { background = 'var(--color-surface, #f2f2f2)' }
72. 'pagination li.current button' { color = 'var(--color-accent-text, #fff)' background = 'var(--color-accent, #000)' border = '0' }
73. 'pagination li.gap button' { color = 'var(--color-text-muted, #555)' background = 'transparent' border = '0' minWidth = '0' padding = '.35rem .2rem' cursor = 'default' pointerEvents = 'none' }
74. }
76. View {
77. pagination {
78. nav { title = "Pagination"
79. 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) } } } } }
80. }
81. }
82. }
84. // the click carries the button's text (a bound attribute does not follow a reassigned list, a text does)
85. on paginationGo(text) {
86. if (text == previousLabel) { show(page - 1) }
87. else if (text == nextLabel) { show(page + 1) }
88. else if (text != '…') { show(toNumber(text)) }
89. }