Removed jquery from dropzone

Also added fadeout to custom animation lib

diff --git a/resources/assets/js/services/animations.js b/resources/assets/js/services/animations.js
index 5cb90b70c77cf13048ae82a4ec64df56977e58f0..8a3e9a57b4ac1a22a932981296570468f4a960f9 100644 (file)
--- 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 9d3d22b4dd2fdf7668299a1c65a1799db0e46366..751cca330020c8d3cf3ffeba6e70e84d33774779 100644 (file)
--- 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) {