From f7f7cd464cfc7012e9676986c6fa86d48aefc384 Mon Sep 17 00:00:00 2001
From: Dan Brown <ssddanbrown@googlemail.com>
Date: Sat, 6 Jul 2019 15:08:26 +0100
Subject: [PATCH] Removed jquery from dropzone

Also added fadeout to custom animation lib
---
 resources/assets/js/services/animations.js      | 15 +++++++++++++++
 resources/assets/js/vues/components/dropzone.js |  7 ++++---
 2 files changed, 19 insertions(+), 3 deletions(-)

diff --git a/resources/assets/js/services/animations.js b/resources/assets/js/services/animations.js
index 5cb90b70c..8a3e9a57b 100644
--- a/resources/assets/js/services/animations.js
+++ b/resources/assets/js/services/animations.js
@@ -1,3 +1,18 @@
+/**
+ * Fade out the given element.
+ * @param {Element} element
+ * @param {Number} animTime
+ * @param {Function|null} onComplete
+ */
+export function fadeOut(element, animTime = 400, onComplete = null) {
+    animateStyles(element, {
+        opacity: ['1', '0']
+    }, animTime, () => {
+        element.style.display = 'none';
+        if (onComplete) onComplete();
+    });
+}
+
 /**
  * Hide the element by sliding the contents upwards.
  * @param {Element} element
diff --git a/resources/assets/js/vues/components/dropzone.js b/resources/assets/js/vues/components/dropzone.js
index 9d3d22b4d..751cca330 100644
--- a/resources/assets/js/vues/components/dropzone.js
+++ b/resources/assets/js/vues/components/dropzone.js
@@ -1,4 +1,5 @@
 import DropZone from "dropzone";
+import { fadeOut } from "../../services/animations";
 
 const template = `
     <div class="dropzone-container">
@@ -8,7 +9,6 @@ const template = `
 
 const props = ['placeholder', 'uploadUrl', 'uploadedTo'];
 
-// TODO - Remove jQuery usage
 function mounted() {
    const container = this.$el;
    const _this = this;
@@ -37,7 +37,7 @@ function mounted() {
 
             dz.on('success', function (file, data) {
                 _this.$emit('success', {file, data});
-                $(file.previewElement).fadeOut(400, function () {
+                fadeOut(file.previewElement, 800, () => {
                     dz.removeFile(file);
                 });
             });
@@ -46,7 +46,8 @@ function mounted() {
                 _this.$emit('error', {file, errorMessage, xhr});
 
                 function setMessage(message) {
-                    $(file.previewElement).find('[data-dz-errormessage]').text(message);
+                    const messsageEl = file.previewElement.querySelector('[data-dz-errormessage]');
+                    messsageEl.textContent = message;
                 }
 
                 if (xhr && xhr.status === 413) {