Removed jquery from dropzone

Also added fadeout to custom animation lib
This commit is contained in:
Dan Brown 2019-07-06 15:08:26 +01:00
parent 15c39c1976
commit f7f7cd464c
No known key found for this signature in database
GPG Key ID: 46D9F943C24A2EF9
2 changed files with 19 additions and 3 deletions

View File

@ -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. * Hide the element by sliding the contents upwards.
* @param {Element} element * @param {Element} element

View File

@ -1,4 +1,5 @@
import DropZone from "dropzone"; import DropZone from "dropzone";
import { fadeOut } from "../../services/animations";
const template = ` const template = `
<div class="dropzone-container"> <div class="dropzone-container">
@ -8,7 +9,6 @@ const template = `
const props = ['placeholder', 'uploadUrl', 'uploadedTo']; const props = ['placeholder', 'uploadUrl', 'uploadedTo'];
// TODO - Remove jQuery usage
function mounted() { function mounted() {
const container = this.$el; const container = this.$el;
const _this = this; const _this = this;
@ -37,7 +37,7 @@ function mounted() {
dz.on('success', function (file, data) { dz.on('success', function (file, data) {
_this.$emit('success', {file, data}); _this.$emit('success', {file, data});
$(file.previewElement).fadeOut(400, function () { fadeOut(file.previewElement, 800, () => {
dz.removeFile(file); dz.removeFile(file);
}); });
}); });
@ -46,7 +46,8 @@ function mounted() {
_this.$emit('error', {file, errorMessage, xhr}); _this.$emit('error', {file, errorMessage, xhr});
function setMessage(message) { 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) { if (xhr && xhr.status === 413) {