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. // 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
21. // app that declares no tokens. Buttons have no border (the creator's rule); the footer's last button is the main one (accent). The
22. // footer sticks to the bottom of a long content.
23. Style {
24. 'html:has(modal-dialog > dialog[open])' { overflow = 'hidden' }
25. 'modal-dialog' { display = 'contents' }
26. '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, rgb(195, 200, 205))' background = 'var(--color-background, rgb(25, 30, 35))' border = '1px solid var(--color-border, rgb(70, 75, 80))' borderRadius = '.6rem' overscrollBehavior = 'contain' }
27. 'modal-dialog > dialog[open]' { display = 'flex' flexDirection = 'column' }
28. 'modal-dialog > dialog::backdrop' { background = 'var(--color-background-sunken, rgb(15, 20, 25))' opacity = '.75' }
29. 'modal-dialog > dialog:focus' { outline = 'none' }
30. 'modal-dialog header' { display = 'flex' alignItems = 'center' gap = '.5rem' padding = '.6rem .6rem .6rem 1rem' borderBottom = '1px solid var(--color-border, rgb(70, 75, 80))' }
31. 'modal-dialog h2' { flex = '1' margin = '0' fontSize = '1.1rem' lineHeight = '1.3' color = 'var(--color-text-strong, rgb(245, 250, 255))' overflowWrap = 'anywhere' }
32. 'modal-dialog button' { font = 'inherit' fontWeight = '600' padding = '.45rem .9rem' color = 'var(--color-text, rgb(195, 200, 205))' background = 'transparent' border = '0' borderRadius = '.4rem' cursor = 'pointer' }
33. 'modal-dialog button:hover' { background = 'var(--color-surface, rgb(35, 40, 45))' }
34. 'modal-dialog button:focus-visible' { outline = '2px solid var(--color-accent, #569bd4)' outlineOffset = '1px' }
35. '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, rgb(145, 150, 155))' }
36. 'modal-dialog button.modal-x:hover' { color = 'var(--color-text-strong, rgb(245, 250, 255))' }
37. 'modal-dialog modal-body' { display = 'block' flex = '1' minHeight = '0' overflow = 'auto' padding = '1rem' overflowWrap = 'anywhere' }
38. 'modal-dialog modal-body > :first-child' { marginTop = '0' }
39. 'modal-dialog modal-body > :last-child:not(footer)' { marginBottom = '0' }
40. '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, rgb(15, 20, 25))' borderTop = '1px solid var(--color-border, rgb(70, 75, 80))' }
41. 'modal-dialog modal-body footer button:last-child' { color = 'var(--color-accent-text, rgb(15, 20, 25))' background = 'var(--color-accent, #569bd4)' }
42. 'modal-dialog modal-body footer button:last-child:hover' { filter = 'brightness(1.1)' }
43. }
45. View {
46. modalDialog {
47. 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) }
48. header {
49. h2 { title }
50. button { type = "button" class = "modal-x" title = closeLabel 'aria-label' = closeLabel "×" on click(e) { emit modalX(e) } }
51. }
52. modalBody { slot }
53. }
54. }
55. }
57. dialogOf(node) { return node.closest('modal-dialog').querySelector('dialog') }
59. // what can take the focus inside the window, in Tab order (enough for forms and buttons; no positive tabindex)
60. focusables(d) {
61. all = Array.from(d.querySelectorAll('button, [href], input, select, textarea, summary, [tabindex], [contenteditable="true"]'))
62. out = []
63. for (el of all) {
64. if (!el.disabled && el.getAttribute('tabindex') != '-1' && el.getClientRects().length > 0) { out.push(el) }
65. }
66. return out
67. }
69. // every way out ends here: the browser's `close` event, with the reason in the dialog's returnValue ('' = the browser closed it by
70. // itself, which only Esc does); the reason goes out as a bubbling `close` on <modal-dialog> (the dialog's own `close` does not bubble;
71. // a modal inside this one's content sends its bubbling one past here, so only this dialog's own counts)
72. on modalClosed(e) {
73. d = e.target
74. if (d != e.currentTarget) { return }
75. let reason = d.returnValue != '' ? d.returnValue : 'escape'
76. d.returnValue = ''
77. d.parentNode.dispatchEvent(new CustomEvent('close', { bubbles = true detail = { id = d.id reason = reason } }))
78. }
80. // Esc: the browser cancels and closes; the reason is set before it does
81. on modalCancel(e) {
82. if (e.target.tagName == 'DIALOG') { e.target.returnValue = 'escape' }
83. }
85. on modalX(e) { dialogOf(e.target).close('close') }
87. // Tab / Shift+Tab go round inside the window (without this the focus would leave to the browser's own bar)
88. on modalKey(e) {
89. if (e.key != 'Tab') { return }
90. d = dialogOf(e.target)
91. f = focusables(d)
92. if (f.length == 0) { e.preventDefault() d.focus() return }
93. first = f[0]
94. last = f[f.length - 1]
95. at = document.activeElement
96. if (e.shiftKey && (at == first || at == d || !d.contains(at))) { e.preventDefault() last.focus() }
97. if (!e.shiftKey && (at == last || !d.contains(at))) { e.preventDefault() first.focus() }
98. }
100. // a press on the dim background lands on the dialog element itself (its content covers the rest of it); the press must also start
101. // there, so a text selection dragged out of the window does not close it
102. on modalDown(e) {
103. d = dialogOf(e.target)
104. d.modalDownOut = e.target == d
105. }
107. on modalClick(e) {
108. d = dialogOf(e.target)
109. if (e.target == d) {
110. if (d.modalDownOut && d.getAttribute('data-backdrop') != 'false') { d.close('backdrop') }
111. return
112. }
113. // a button in the content's footer closes it; its value (or its text) is the reason
114. b = e.target.closest('footer button')
115. if (b != null && d.contains(b)) {
116. r = b.value != '' ? b.value : b.textContent.trim()
117. d.close(r)
118. }
119. }