darkwiiplayer/js
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

Make filesize component nicer

Browse source
This commit is contained in:
Talia 2022-06-22 15:53:14 +02:00
parent 5795439ae1
commit 2b0e698e8d
2 changed files with 7 additions and 3 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

8
page/filesize.js
View file

@ -1,4 +1,4 @@
import {text, html} from '../skooma.js' import {text, html, fragment} from '../skooma.js'
import element from "../element.js" import element from "../element.js"
element(class FileSize extends HTMLElement { element(class FileSize extends HTMLElement {
@ -17,13 +17,17 @@ element(class FileSize extends HTMLElement {
this.update() this.update()
} }
cloneChildren(deep=true) {
return Array.from(this.childNodes).map(node => node.cloneNode(deep))
}
update() { update() {
if (this.file) { if (this.file) {
fetch(this.file) fetch(this.file)
.then(response=>response.arrayBuffer()) .then(response=>response.arrayBuffer())
.then(buffer => buffer.byteLength) .then(buffer => buffer.byteLength)
.then(length => { .then(length => {
this.shadowRoot.replaceChildren(text`(${length} Bytes unminified)`) this.shadowRoot.replaceChildren(text`${fragment(...this.cloneChildren())} (${length} Bytes unminified)`)
}) })
} }
} }

2
page/skooma.html
View file

@ -19,7 +19,7 @@
<h3>What are the benefits of Skooma?</h3> <h3>What are the benefits of Skooma?</h3>
<p> <p>
Skooma is only a small <file-size file="../skooma.js"></file-size> ES6 Skooma is only a <file-size file="../skooma.js">small</file-size> ES6
module that uses meta-programming to turn JavaScript into a module that uses meta-programming to turn JavaScript into a
<span title="Domain-Specific Language">DSL</span> that generates HTML <span title="Domain-Specific Language">DSL</span> that generates HTML
and XML subtrees. and XML subtrees.