WIP, thinking about converting to EF

Scripts/main.ts

@@ -37,8 +37,6 @@ export default class Main {
     }
 
     private init() {
-        this.linearProgress.open()
-
         let main = document.querySelector("main")
         let directories = main.querySelector("ul")
 

Scripts/upload.ts

@@ -0,0 +1,58 @@
+import {MDCChipSet} from "@material/chips"
+import Builder from "./utility"
+
+class Uploader {
+    chips: MDCChipSet
+
+    constructor() {
+        this.init()
+    }
+
+    init() {
+        let upload = document.getElementById("lzh_upload") as HTMLInputElement
+        let container = document.querySelector(".mdc-evolution-chip-set__chips")
+
+        document.addEventListener("MDCChipSet:interaction", (event: Event) => {
+            console.log(event)
+        })
+
+        document.addEventListener("MDCChipSet:selection", (event: Event) => {
+            console.log(event)
+        })
+
+        upload.addEventListener("change", (event: InputEvent) => {
+            while (container.firstChild) container.removeChild(container.firstChild)
+
+            for (let index = 0; index < upload.files.length; index++) {
+                this.addChip(container, index, upload.files.item(index))
+            }
+
+            let element = document.querySelector(".mdc-evolution-chip-set")
+            this.chips = MDCChipSet.attachTo(element)
+        })
+    }
+
+    addChip(container: Element, index: number, file: File) {
+        const chipClass = "mdc-evolution-chip"
+        
+        let textButton = Builder.element("button", {"type":"button","tabindex":0}, `${chipClass}__action`, `${chipClass}__action--primary`)
+            .addChildren(
+                Builder.element("span", {}, `${chipClass}__ripple`, `${chipClass}__ripple--primary`),
+                Builder.element("span", {}, `${chipClass}__text-label`).setText(file.name))
+        let textWrapper = Builder.element("span", {"role":"gridcell"}, `${chipClass}__cell`, `${chipClass}__cell--primary`)
+            .addChildren(textButton)
+        
+        let trailingButton = Builder.element("button", {"type":"button","tabindex":-1,"data-mdc-deletable":"true","aria-label":`Remove ${file.name}`})
+            .addChildren(
+                Builder.element("span", {}, `${chipClass}__ripple`,`${chipClass}__ripple--trailing`),
+                Builder.element("span", {}, `${chipClass}__icon`,`${chipClass}__icon--trailing`).setText("close"))
+        let trailingWrapper = Builder.element("span", {"role":"gridcell"}, `${chipClass}__cell`, `${chipClass}__cell--trailing`)
+            .addChildren(trailingButton)
+        
+        let chip = Builder.element("span", {"role":"row","id":`chip_${index}`}, chipClass).addChildren(textWrapper, trailingWrapper).build()
+
+        container.appendChild(chip)
+    }
+}
+
+new Uploader()

Scripts/utility.ts

@@ -46,4 +46,8 @@ export default class Builder {
     build(): HTMLElement {
         return this.element
     }
+    
+    static element(tag: string, attributes: { [key: string]: string | number }, ...classes: string[]): Builder {
+        return new Builder(tag).addAttributes(attributes).addClass(...classes)
+    }
 }