add js version rendering. still needs download

1 files changed, 77 insertions, 0 deletions

diff --git a/pnit-form.mjs b/pnit-form.mjs
new file mode 100644
index 0000000..c1fa16c
--- /dev/null
+++ b/pnit-form.mjs
@@ -0,0 +1,77 @@
+const worker = new Worker('worker.js', { type: 'module' });
+
+export default class extends HTMLElement {
+    static name = 'x-pnit-form';
+    static register() {
+        console.debug('Registering Element', this.name, this);
+        customElements.define(this.name, this);
+    }
+
+    get form() {
+        return this.querySelector('form');
+    }
+
+    get ignoreHeader() {
+        return this.form.querySelector('input[name="ignore-header"]').checked;
+    }
+
+    get threshold() {
+        return Number(this.form.querySelector('input[name="pni-threshold"]').value);
+    }
+
+    get files() {
+        const inputs = Array.from(this.form.querySelectorAll('input[type="file"]'));
+        return inputs.flatMap(inp => Array.from(inp.files));
+    }
+
+    get resultTable() {
+        return document.getElementById('pnit-results');
+    }
+
+    connectedCallback() {
+        console.debug('PNITForm#connectedCallback', this);
+
+        worker.onmessage = this.handleWorkerMessage.bind(this);
+        worker.onmessageerror = this.handleWorkerMessageError.bind(this);
+        worker.onerror = this.handleWorkerError.bind(this);
+
+        this.form.onchange = this.process.bind(this);
+        this.form.onchange();
+    }
+
+    handleWorkerMessage(e) {
+        const row = document.createElement('tr');
+        e.data.forEach(v => {
+            const col = document.createElement('td');
+            col.innerText = v;
+            row.appendChild(col);
+        });
+        this.resultTable.appendChild(row);
+    }
+
+    handleWorkerMessageError(e) {
+        console.error('onmessageerror', e);
+    }
+
+    handleWorkerError(e) {
+        console.error('onerror', e);
+    }
+
+    process() {
+        console.debug('PNITForm#process', this);
+
+        this.resultTable.innerHTML = '';
+
+        if (isNaN(this.threshold)) {
+            console.error('threshold invalid');
+            return;
+        }
+        this.files.forEach(file => {
+            worker.postMessage({
+                ignoreHeader: this.ignoreHeader,
+                threshold: this.threshold,
+                file
+            });
+        });
+    }
+}