Dropzone: started on design/ui of uploading

- Added new wider target handling.
- Updated upload item dom with design and seperate "landing" zone.
- Added new helper for simple dom element creation.

resources/js/components/dropzone.js

@@ -1,16 +1,22 @@
 import {Component} from './component';
 import {Clipboard} from '../services/clipboard';
+import {
+    elem, getLoading, removeLoading,
+} from '../services/dom';
 
 export class Dropzone extends Component {
 
     setup() {
         this.container = this.$el;
+        this.statusArea = this.$refs.statusArea;
+
         this.url = this.$opts.url;
         this.successMessage = this.$opts.successMessage;
         this.removeMessage = this.$opts.removeMessage;
         this.uploadLimit = Number(this.$opts.uploadLimit); // TODO - Use
         this.uploadLimitMessage = this.$opts.uploadLimitMessage; // TODO - Use
         this.timeoutMessage = this.$opts.timeoutMessage; // TODO - Use
+        this.zoneText = this.$opts.zoneText;
         // window.uploadTimeout // TODO - Use
         // TODO - Click-to-upload buttons/areas
         // TODO - Drop zone highlighting of existing element
@@ -20,9 +26,15 @@ export class Dropzone extends Component {
     }
 
     setupListeners() {
+        let depth = 0;
+
         this.container.addEventListener('dragenter', event => {
-            this.container.style.border = '1px dotted tomato';
             event.preventDefault();
+            depth += 1;
+
+            if (depth === 1) {
+                this.showOverlay();
+            }
         });
 
         this.container.addEventListener('dragover', event => {
@@ -30,7 +42,8 @@ export class Dropzone extends Component {
         });
 
         const reset = () => {
-            this.container.style.border = null;
+            this.hideOverlay();
+            depth = 0;
         };
 
         this.container.addEventListener('dragend', event => {
@@ -38,11 +51,15 @@ export class Dropzone extends Component {
         });
 
         this.container.addEventListener('dragleave', event => {
-            reset();
+            depth -= 1;
+            if (depth === 0) {
+                reset();
+            }
         });
 
         this.container.addEventListener('drop', event => {
             event.preventDefault();
+            reset();
             const clipboard = new Clipboard(event.dataTransfer);
             const files = clipboard.getFiles();
             for (const file of files) {
@@ -51,6 +68,21 @@ export class Dropzone extends Component {
         });
     }
 
+    showOverlay() {
+        const overlay = this.container.querySelector('.dropzone-overlay');
+        if (!overlay) {
+            const zoneElem = elem('div', {class: 'dropzone-overlay'}, [this.zoneText]);
+            this.container.append(zoneElem);
+        }
+    }
+
+    hideOverlay() {
+        const overlay = this.container.querySelector('.dropzone-overlay');
+        if (overlay) {
+            overlay.remove();
+        }
+    }
+
     /**
      * @param {File} file
      * @return {Upload}
@@ -70,10 +102,12 @@ export class Dropzone extends Component {
             markError(message) {
                 status.setAttribute('data-status', 'error');
                 status.textContent = message;
+                removeLoading(dom);
             },
             markSuccess(message) {
                 status.setAttribute('data-status', 'success');
                 status.textContent = message;
+                removeLoading(dom);
             },
         };
 
@@ -119,26 +153,27 @@ export class Dropzone extends Component {
      * @return {{image: Element, dom: Element, progress: Element, label: Element, status: Element}}
      */
     createDomForFile(file) {
-        const dom = document.createElement('div');
-        const label = document.createElement('div');
-        const status = document.createElement('div');
-        const progress = document.createElement('div');
-        const image = document.createElement('img');
+        const image = elem('img', {src: ''});
+        const status = elem('div', {class: 'dropzone-file-item-status'}, []);
+        const progress = elem('div', {class: 'dropzone-file-item-progress'});
+        const imageWrap = elem('div', {class: 'dropzone-file-item-image-wrap'}, [image]);
 
-        dom.classList.add('dropzone-file-item');
-        status.classList.add('dropzone-file-item-status');
-        progress.classList.add('dropzone-file-item-progress');
-
-        image.src = ''; // TODO - file icon
-        label.innerText = file.name;
+        const dom = elem('div', {class: 'dropzone-file-item'}, [
+            imageWrap,
+            elem('div', {class: 'dropzone-file-item-text-wrap'}, [
+                elem('div', {class: 'dropzone-file-item-label'}, [file.name]),
+                getLoading(),
+                status,
+            ]),
+            progress,
+        ]);
 
         if (file.type.startsWith('image/')) {
             image.src = URL.createObjectURL(file);
         }
 
-        dom.append(image, label, progress, status);
         return {
-            dom, label, image, progress, status,
+            dom, progress, status,
         };
     }
 

resources/js/services/dom.js

@@ -1,3 +1,29 @@
+/**
+ * Create a new element with the given attrs and children.
+ * Children can be a string for text nodes or other elements.
+ * @param {String} tagName
+ * @param {Object<String, String>} attrs
+ * @param {Element[]|String[]}children
+ * @return {*}
+ */
+export function elem(tagName, attrs = {}, children = []) {
+    const el = document.createElement(tagName);
+
+    for (const [key, val] of Object.entries(attrs)) {
+        el.setAttribute(key, val);
+    }
+
+    for (const child of children) {
+        if (typeof child === 'string') {
+            el.append(document.createTextNode(child));
+        } else {
+            el.append(child);
+        }
+    }
+
+    return el;
+}
+
 /**
  * Run the given callback against each element that matches the given selector.
  * @param {String} selector
@@ -108,6 +134,17 @@ export function showLoading(element) {
     element.innerHTML = '<div class="loading-container"><div></div><div></div><div></div></div>';
 }
 
+/**
+ * Get a loading element indicator element.
+ * @returns {Element}
+ */
+export function getLoading() {
+    const wrap = document.createElement('div');
+    wrap.classList.add('loading-container');
+    wrap.innerHTML = '<div></div><div></div><div></div>';
+    return wrap;
+}
+
 /**
  * Remove any loading indicators within the given element.
  * @param {Element} element