components

5.0 KB

1. // file-upload.hl — THE FILE UPLOAD (one file), pure Hybriel: a drop zone with a "Choose a file" button. The chosen or dropped file goes
2. // to the app through `emit server saveFile(file)` (the framework carries it over HTTP, in parts, with progress: hybriel#94); the app's
3. // `on server saveFile(file)` decides where it is stored and answers anything but null when it took it (a face that raises an error or
4. // answers null = the upload failed). Name, size and progress show while it goes; a finished file is listed under "Uploaded".
5. // One file at a time: a drop of several takes the first, a file dropped during an upload is ignored. USE ONE PER PAGE (a composed
6. // component's members are the page's state). The page is written by DOM calls in the handlers: the emit blocks its handler, and
7. // `on client uploadProgress` paints the bar meanwhile.
8. String dropText = 'Drop a file here or'
9. String chooseText = 'Choose a file'
10. String uploadedTitle = 'Uploaded'
12. sizeText(n) {
13. if (n < 1024) { return n + ' B' }
14. if (n < 1048576) { return (n / 1024).toFixed(1) + ' KB' }
15. return (n / 1048576).toFixed(1) + ' MB'
16. }
18. View {
19. fileUpload {
20. dropZone { on dragover(e) { emit uploadOver(e) } on dragleave(e) { emit uploadLeave(e) } on drop(e) { emit uploadDrop(e) }
21. p { dropText }
22. label { class = "choose" chooseText input { type = "file" on change(e) { emit uploadChosen(e) } } }
23. uploadStatus { 'aria-live' = "polite"
24. strong { class = "name" }
25. span { class = "size" }
26. progress { max = "100" value = "0" }
27. output { class = "state" }
28. }
29. }
30. uploadedList {
31. h2 { uploadedTitle }
32. ul { class = "uploaded" }
33. }
34. }
35. }
37. rootOf(node) { return node.closest('file-upload') }
39. on uploadOver(e) {
40. e.preventDefault()
41. rootOf(e.target).classList.add('over')
42. }
43. on uploadLeave(e) { rootOf(e.target).classList.remove('over') }
44. on uploadDrop(e) {
45. e.preventDefault()
46. let root = rootOf(e.target)
47. root.classList.remove('over')
48. if (e.dataTransfer.files.length > 0) { send(root, e.dataTransfer.files[0]) }
49. }
50. on uploadChosen(e) {
51. let root = rootOf(e.target)
52. let input = e.target
53. if (input.files.length > 0) { send(root, input.files[0]) }
54. input.value = ''
55. }
57. on client uploadProgress(p) {
58. for (root of document.querySelectorAll('file-upload.busy')) {
59. let bar = root.querySelector('progress')
60. bar.max = p.size > 0 ? p.size : 1
61. bar.value = p.sent
62. }
63. }
65. send(root, file) {
66. if (root.classList.contains('busy')) { return null }
67. root.classList.add('busy')
68. root.classList.remove('done')
69. root.classList.remove('failed')
70. root.classList.add('shown')
71. root.querySelector('.name').textContent = file.name
72. root.querySelector('.size').textContent = sizeText(file.size)
73. let bar = root.querySelector('progress')
74. bar.max = 100
75. bar.value = 0
76. let state = root.querySelector('.state')
77. state.textContent = 'Uploading…'
78. let saved = emit server saveFile(file)
79. root.classList.remove('busy')
80. if (saved == null) {
81. root.classList.add('failed')
82. state.textContent = 'Failed'
83. return null
84. }
85. bar.max = 100
86. bar.value = 100
87. root.classList.add('done')
88. state.textContent = 'Uploaded'
89. let li = document.createElement('li')
90. li.textContent = file.name + ' — ' + sizeText(file.size)
91. root.querySelector('ul.uploaded').appendChild(li)
92. }
94. // ---- look: the component's own Style; colours are the semantic tokens with the palette value as fallback
95. Style {
96. 'file-upload' { display = 'block' color = 'var(--color-text, rgb(195, 200, 205))' }
97. 'file-upload drop-zone' { display = 'block' padding = '1rem' textAlign = 'center' border = '2px dashed var(--color-border, rgb(70, 75, 80))' borderRadius = '.5rem' }
98. 'file-upload.over drop-zone' { borderColor = 'var(--color-accent, #569bd4)' background = 'var(--color-surface, rgb(35, 40, 45))' }
99. 'file-upload drop-zone p' { margin = '0 0 .5rem' color = 'var(--color-text-muted, rgb(145, 150, 155))' }
100. 'file-upload label.choose' { display = 'inline-block' padding = '.35rem .8rem' cursor = 'pointer' border = '1px solid var(--color-border, rgb(70, 75, 80))' borderRadius = '.35rem' background = 'var(--color-surface, rgb(35, 40, 45))' }
101. 'file-upload label.choose:hover' { borderColor = 'var(--color-accent, #569bd4)' }
102. 'file-upload label.choose input' { display = 'none' }
103. 'file-upload upload-status' { display = 'none' marginTop = '.8rem' textAlign = 'left' }
104. 'file-upload.shown upload-status' { display = 'block' }
105. 'file-upload upload-status .name' { overflowWrap = 'anywhere' }
106. 'file-upload upload-status .size' { marginLeft = '.6rem' color = 'var(--color-text-muted, rgb(145, 150, 155))' }
107. 'file-upload progress' { display = 'block' width = '100%' margin = '.4rem 0' accentColor = 'var(--color-accent, #569bd4)' }
108. 'file-upload.done .state' { color = 'var(--color-success, #6a9955)' }
109. 'file-upload.failed .state' { color = 'var(--color-danger, #f44747)' }
110. 'file-upload upload-status .state' { fontSize = '.9rem' }
111. 'file-upload uploaded-list h2' { margin = '1rem 0 .3rem' fontSize = '1rem' }
112. 'file-upload ul.uploaded' { margin = '0' paddingLeft = '1.2rem' }
113. 'file-upload ul.uploaded:empty::after' { content = '"Nothing yet."' marginLeft = '-1.2rem' color = 'var(--color-text-muted, rgb(145, 150, 155))' }
114. }