components

2.8 KB

1. // demo.hl — `/modal`: four modals on one page, opened by the page's buttons, and the reason each one closed with. The page opens a
2. // modal by its dialog's id (`showModal()`), closes one itself (`close('saved')`), and hears the modal's bubbling `close` on a wrapper element.
3. parent '../main.hl'
4. import Modal from './modal.hl'
6. __title = 'Modal · Hybriel components'
7. String lastClosed = 'nothing yet'
8. String saved = ''
9. Hybrid paragraphs = longText()
11. longText() {
12. let out = []
13. let i = 1
14. while (i <= 20) { out.push('Paragraph ' + i + ': the page behind stays where it was while this scrolls.') i = i + 1 }
15. return out
16. }
18. View {
19. modalDemo { on close(e) { emit demoClosed(e) }
20. h1 { "Modal" }
21. p { class = "muted" "A window over the page: the page behind is dimmed and blocked. Esc, the × and a click on the dim background close it; the page is told how it was closed." }
22. p { class = "modal-openers"
23. button { type = "button" id = "open-info" "Information" on click(e) { emit demoOpen('info') } }
24. button { type = "button" id = "open-confirm" "Confirm (OK / Cancel)" on click(e) { emit demoOpen('confirm') } }
25. button { type = "button" id = "open-form" "A form (no background close)" on click(e) { emit demoOpen('form') } }
26. button { type = "button" id = "open-long" "Long text" on click(e) { emit demoOpen('long') } }
27. }
28. p { "Last closed: " output { id = "modal-last" lastClosed } }
29. p { "Saved name: " output { id = "modal-saved" saved } }
30. p { a { id = "readme" href = "/modal/README.md" "README (how to use it)" } }
32. Modal { id = "info" title = "Information"
33. p { "A modal holds any content. Close it with the ×, Esc or a click on the dim background." }
34. }
35. Modal { id = "confirm" title = "Delete the draft?"
36. p { "The draft will be gone. This cannot be undone." }
37. footer {
38. button { type = "button" value = "cancel" "Cancel" }
39. button { type = "button" value = "ok" "Delete" }
40. }
41. }
42. Modal { id = "form" title = "Your name" backdropClose = "false"
43. p { "A click on the background does not close this one: only the ×, Esc, Cancel or Save." }
44. p { label { "Name " input { id = "modal-name" type = "text" autocomplete = "off" } } }
45. footer {
46. button { type = "button" value = "cancel" "Cancel" }
47. button { type = "button" id = "modal-save" "Save" on click(e) { emit demoSave(e) } }
48. }
49. }
50. Modal { id = "long" title = "Long text"
51. p { "The window keeps inside the screen; its content scrolls, the page behind does not." }
52. for (t of paragraphs) { p { t } }
53. }
54. }
55. }
57. on demoOpen(id) { document.getElementById(id).showModal() }
59. // "Save" is the page's own button: the page takes the name and closes the modal itself, with its own reason
60. on demoSave(e) {
61. saved = document.getElementById('modal-name').value
62. document.getElementById('form').close('saved')
63. }
65. on demoClosed(e) { lastClosed = e.detail.id + ': ' + e.detail.reason }