3 files changed, 200 insertions, 0 deletions
diff --git a/app/static/js/eternalload.js b/app/static/js/eternalload.js
new file mode 100644
index 0000000..fe23c98
--- /dev/null
+++ b/app/static/js/eternalload.js
@@ -0,0 +1,120 @@
+const progress_width = 100;
+const progress_radius = 20;
+const progress_len = progress_radius * 2 * Math.PI;
+
+const PREVIEW_TEMPLATE = `
+<div class="eternal-progress-wrapper">
+    <div class="eternal-progress-bg"></div>
+    <svg class="eternal-progress-svg">
+        <circle class="eternal-progress-path"
+                cx="${progress_width / 2}"
+                cy="${progress_width / 2}"
+                r="${progress_radius}"
+                fill="none"
+                stroke-width="5"
+                stroke-miterlimit="10" />
+    </svg>
+    <pre class="eternal-progress-status"></pre>
+</div>
+`
+
+const REMOTE_LOAD_TEMPLATE = `
+<form method='POST' autocomplete="off">
+  <input class="eternal-url-input" type="text" placeholder="Remote image">
+  <span class="eternal-url-span"></span>
+</form>
+`.trim();
+
+function append_template_for_file (node, file, fileno) {
+    const imageurl = URL.createObjectURL(file);
+    node.insertAdjacentHTML('beforeend', PREVIEW_TEMPLATE);
+    let newnode = node.lastChild.previousSibling;
+    console.log(newnode);
+    let style = newnode.querySelector('.eternal-progress-bg').style;
+    style.background = 'url(' + imageurl + ')';
+    style.backgroundSize = 'cover';
+    style.backgroundPosition = 'center';
+    style.backgroundRepeat = 'no-repeat';
+    newnode.setAttribute('id', 'progress-files-' + fileno.toString());
+
+    return newnode;
+}
+
+class EternalLoad {
+    constructor (node) {
+        this.root = document.createElement('div');
+        this.root.setAttribute('id', 'eternal-root');
+        this.local = {};
+        this.remote = {};
+    }
+
+    attach (target) {
+        if (this.local.btn)
+            this.root.appendChild(this.local.btn);
+        target.appendChild(this.root);
+
+        return this;
+    }
+
+    use_local (url) {
+        this.local.btn = document.createElement('button');
+        this.local.btn.setAttribute('class', 'btn');
+        this.local.btn.textContent = 'local file';
+        
+        this.local.total = 0;
+        this.local.processed = 0;
+        this.local.page_hard_lock = 1;
+
+        this.local.btn.addEventListener('click', (e) => {
+            let input = document.createElement('input');
+            input.type = 'file';
+            input.accept = 'image/*';
+            input.multiple = true;
+            input.addEventListener('change', (input_event) => {
+                Array.prototype.forEach.call(input_event.target.files, file => {
+                    let data = new FormData();
+                    data.append('im', file);
+
+                    let fileno = this.local.total;
+                    this.local.total += 1;
+                    let wrapper = append_template_for_file (this.root, file, fileno);
+                    let progress = wrapper.querySelector('.eternal-progress-path');
+                    let status = wrapper.querySelector('.eternal-progress-status');
+
+                    let req = new XMLHttpRequest();
+                    req.addEventListener('load', (e) => {
+                        let bg = wrapper.querySelector('.eternal-progress-bg');
+                        bg.style.filter = 'none';
+                        progress.style.stroke = '#0000';
+                        
+                        this.local.processed += 1;
+                        if (this.local.processed == this.local.total && !this.local.page_hard_lock)
+                            location.reload();
+                    });
+                    req.upload.addEventListener('progress', (e) => {
+                        let complete = 0;
+                        if (e.lengthComputable)
+                            complete = e.loaded / e.total;
+                        status.innerHTML = `${(e.loaded / 1000000).toFixed(2)}/${(e.total / 1000000).toFixed(2)}M`;
+                        progress.style.strokeDasharray = `${(complete * Math.PI * 2 * progress_radius)},${progress_len}`;
+
+                    });
+
+                    req.open('POST', url);
+                    req.send(data);
+                });
+                this.local.page_hard_lock = 0;
+            });
+
+            input.click();
+        });
+
+        return this;
+    }
+
+    use_remote (url) {
+        return this;
+    }
+}
+
+export default EternalLoad;
diff --git a/app/static/js/load.js b/app/static/js/load.js
new file mode 100644
index 0000000..574841b
--- /dev/null
+++ b/app/static/js/load.js
@@ -0,0 +1,6 @@
+import EternalLoad from './eternalload.js'
+
+let load = new EternalLoad()
+                .use_local('/c/push')
+                .use_remote('/c/push_url')
+                .attach(document.querySelector('#template-goes-here'));
diff --git a/app/static/js/push.js b/app/static/js/push.js
new file mode 100644
index 0000000..e6916c8
--- /dev/null
+++ b/app/static/js/push.js
@@ -0,0 +1,74 @@
+const progress_radius = 20;
+const progress_len = progress_radius * 2 * Math.PI;
+
+window.addEventListener('DOMContentLoaded', function() {
+    let pusher = document.getElementById('push-image-btn');
+
+    let total = 0;
+    let processed = 0;
+    let page_hard_lock = 1;
+
+    pusher.addEventListener('click', function(e) {
+        let input = document.createElement('input');
+        input.type = 'file';
+        input.accept = 'image/*';
+        input.multiple = true;
+        input.addEventListener('change', (input_event) => {
+            console.log(input_event.target.files);
+            Array.prototype.forEach.call(input_event.target.files, file => {
+                let data = new FormData();
+                data.append('im', file);
+
+                let fileno = total;
+                total += 1;
+                let wrapper = append_template_for_file (file, fileno);
+                let progress = wrapper.querySelector('.progress-path');
+                let status = wrapper.querySelector('.progress-status');
+
+                let req = new XMLHttpRequest();
+                req.addEventListener('load', (e) => {
+                    let bg = wrapper.querySelector('.progress-bg');
+                    bg.style.filter = 'none';
+                    progress.style.stroke = '#0000';
+                    
+                    processed += 1;
+                    if (processed == total && !page_hard_lock) {
+                        location.reload();
+                    }
+                });
+                req.upload.addEventListener('progress', (e) => {
+                    let complete = 0;
+                    if (e.lengthComputable) {
+                        complete = e.loaded / e.total;
+                    }
+                    status.innerHTML = (e.loaded / 1000000).toFixed(2) + '/' + (e.total / 1000000).toFixed(2) + 'M';
+                    progress.style.strokeDasharray = (complete * Math.PI * 2 * progress_radius).toString () + ',' + progress_len.toString();
+
+                });
+
+                req.open('POST', '/c/push');
+                req.send(data);
+            });
+            page_hard_lock = 0;
+        });
+
+        input.click();
+    });
+});
+
+function append_template_for_file (file, fileno) {
+    let imageurl = URL.createObjectURL(file);
+    let tmpl = document.querySelector('#progress-template');
+    let root = document.querySelector('#template-goes-here');
+    let newnode = document.importNode(tmpl.content, true);
+    let style = newnode.querySelector('.progress-bg').style;
+    style.background = 'url(' + imageurl + ')';
+    style.backgroundSize = 'cover';
+    style.backgroundPosition = 'center';
+    style.backgroundRepeat = 'no-repeat';
+    root.appendChild(newnode);
+    let appended = root.lastChild.previousSibling;
+    appended.setAttribute('id', 'progress-files-' + fileno.toString());
+
+    return appended;
+}