components

7.2 KB

1. // modal.hl — THE MODAL DIALOG, pure Hybriel (no JavaScript file): a window over the page with a title, a × and any content; the
2. // page behind is dimmed, blocked (inert) and does not scroll. `Modal { id = "confirm" title = "Delete it?" p { "…" } }`.
3. // Built on the browser's own `<dialog>` opened with `showModal()`: the browser makes the page behind inert, puts the focus
4. // inside and gives it back to the opener when it closes. This file adds what the browser leaves open: Tab / Shift+Tab wrap
5. // inside the window, Esc, a click on the dim background (switchable: `backdropClose = "false"`), footer buttons, no scrolling
6. // behind, and ONE close signal with the reason: a bubbling `close` event on `<modal-dialog>` (hl:web binds standard DOM event names
7. // only, ticket #31), `e.detail.reason` =
8. // "close" (×), "escape", "backdrop", a footer button's `value` (or its text), or what the host passed to `close(reason)`.
9. // The host opens and closes it by the dialog's id: `document.getElementById('confirm').showModal()` / `.close('saved')`.
10. // Several modals may stand on one page: every member is assigned a literal per reference, and the handlers read the
11. // options from the element (a composed component's members are the page's state — never write them in a handler).
13. String id = 'modal'
14. String title = ''
15. String backdropClose = 'true'
16. String closeLabel = 'Close'
18. slot = null
20. // 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
21. // semantic token with its base value as fallback, so a bare copy looks right and an app that declares the tokens (layouts.worldapi.org's theme)
22. // restyles it. No frames: the grey dimmed page around the white window is the separation. Buttons have no border (the creator's rule); the footer's last button is the main one (accent). The
23. // footer sticks to the bottom of a long content.
24. Style {
25. 'html:has(modal-dialog > dialog[open])' { overflow = 'hidden' }
26. 'modal-dialog' { display = 'contents' }
27. 'modal-dialog > dialog' { boxSizing = 'border-box' width = 'min(34rem, calc(100vw - 2rem))' maxWidth = 'none' maxHeight = 'calc(100dvh - 2rem)' margin = 'auto' padding = '0' color = 'var(--color-text, #000)' background = 'var(--color-background, #fff)' border = '0' borderRadius = '.6rem' overscrollBehavior = 'contain' }
28. 'modal-dialog > dialog[open]' { display = 'flex' flexDirection = 'column' }
29. 'modal-dialog > dialog::backdrop' { background = 'var(--color-background-sunken, #555)' opacity = '.75' }
30. 'modal-dialog > dialog:focus' { outline = 'none' }
31. 'modal-dialog header' { display = 'flex' alignItems = 'center' gap = '.5rem' padding = '.6rem .6rem .6rem 1rem' borderBottom = '0' }
32. 'modal-dialog h2' { flex = '1' margin = '0' fontSize = '1.1rem' lineHeight = '1.3' color = 'var(--color-text-strong, #000)' overflowWrap = 'anywhere' }
33. 'modal-dialog button' { font = 'inherit' fontWeight = '600' padding = '.45rem .9rem' color = 'var(--color-text, #000)' background = 'transparent' border = '0' borderRadius = '.4rem' cursor = 'pointer' }
34. 'modal-dialog button:hover' { background = 'var(--color-surface, #f2f2f2)' }
35. 'modal-dialog button:focus-visible' { outline = '2px solid var(--color-accent, #555)' outlineOffset = '1px' }
36. 'modal-dialog button.modal-x' { flex = 'none' width = '2.4rem' height = '2.4rem' padding = '0' fontSize = '1.5rem' lineHeight = '1' color = 'var(--color-text-muted, #555)' }
37. 'modal-dialog button.modal-x:hover' { color = 'var(--color-text-strong, #000)' }
38. 'modal-dialog modal-body' { display = 'block' flex = '1' minHeight = '0' overflow = 'auto' padding = '1rem' overflowWrap = 'anywhere' }
39. 'modal-dialog modal-body > :first-child' { marginTop = '0' }
40. 'modal-dialog modal-body > :last-child:not(footer)' { marginBottom = '0' }
41. 'modal-dialog modal-body footer' { position = 'sticky' bottom = '-1rem' display = 'flex' flexWrap = 'wrap' justifyContent = 'flex-end' gap = '.5rem' margin = '1rem -1rem -1rem' padding = '.75rem 1rem' background = 'var(--color-background-sunken, #f2f2f2)' borderTop = '0' }
42. 'modal-dialog modal-body footer button:last-child' { color = 'var(--color-accent-text, #fff)' background = 'var(--color-accent, #000)' }
43. 'modal-dialog modal-body footer button:last-child:hover' { filter = 'brightness(1.1)' }
44. }
46. View {
47. modalDialog {
48. dialog { id = id 'aria-label' = title 'data-backdrop' = backdropClose on close(e) { emit modalClosed(e) } on cancel(e) { emit modalCancel(e) } on keydown(e) { emit modalKey(e) } on pointerdown(e) { emit modalDown(e) } on click(e) { emit modalClick(e) }
49. header {
50. h2 { title }
51. button { type = "button" class = "modal-x" title = closeLabel 'aria-label' = closeLabel "×" on click(e) { emit modalX(e) } }
52. }
53. modalBody { slot }
54. }
55. }
56. }
58. dialogOf(node) { return node.closest('modal-dialog').querySelector('dialog') }
60. // what can take the focus inside the window, in Tab order (enough for forms and buttons; no positive tabindex)
61. focusables(d) {
62. all = Array.from(d.querySelectorAll('button, [href], input, select, textarea, summary, [tabindex], [contenteditable="true"]'))
63. out = []
64. for (el of all) {
65. if (!el.disabled && el.getAttribute('tabindex') != '-1' && el.getClientRects().length > 0) { out.push(el) }
66. }
67. return out
68. }
70. // every way out ends here: the browser's `close` event, with the reason in the dialog's returnValue ('' = the browser closed it by
71. // itself, which only Esc does); the reason goes out as a bubbling `close` on <modal-dialog> (the dialog's own `close` does not bubble;
72. // a modal inside this one's content sends its bubbling one past here, so only this dialog's own counts)
73. on modalClosed(e) {
74. d = e.target
75. if (d != e.currentTarget) { return }
76. let reason = d.returnValue != '' ? d.returnValue : 'escape'
77. d.returnValue = ''
78. d.parentNode.dispatchEvent(new CustomEvent('close', { bubbles = true detail = { id = d.id reason = reason } }))
79. }
81. // Esc: the browser cancels and closes; the reason is set before it does
82. on modalCancel(e) {
83. if (e.target.tagName == 'DIALOG') { e.target.returnValue = 'escape' }
84. }
86. on modalX(e) { dialogOf(e.target).close('close') }
88. // Tab / Shift+Tab go round inside the window (without this the focus would leave to the browser's own bar)
89. on modalKey(e) {
90. if (e.key != 'Tab') { return }
91. d = dialogOf(e.target)
92. f = focusables(d)
93. if (f.length == 0) { e.preventDefault() d.focus() return }
94. first = f[0]
95. last = f[f.length - 1]
96. at = document.activeElement
97. if (e.shiftKey && (at == first || at == d || !d.contains(at))) { e.preventDefault() last.focus() }
98. if (!e.shiftKey && (at == last || !d.contains(at))) { e.preventDefault() first.focus() }
99. }
101. // a press on the dim background lands on the dialog element itself (its content covers the rest of it); the press must also start
102. // there, so a text selection dragged out of the window does not close it
103. on modalDown(e) {
104. d = dialogOf(e.target)
105. d.modalDownOut = e.target == d
106. }
108. on modalClick(e) {
109. d = dialogOf(e.target)
110. if (e.target == d) {
111. if (d.modalDownOut && d.getAttribute('data-backdrop') != 'false') { d.close('backdrop') }
112. return
113. }
114. // a button in the content's footer closes it; its value (or its text) is the reason
115. b = e.target.closest('footer button')
116. if (b != null && d.contains(b)) {
117. r = b.value != '' ? b.value : b.textContent.trim()
118. d.close(r)
119. }
120. }