Commit 85e73175 authored by Brandon Everett's avatar Brandon Everett Committed by Clement Ho

Refactor variables initialization in dropzone_input.js

parent 901319fc
...@@ -5,21 +5,28 @@ import './preview_markdown'; ...@@ -5,21 +5,28 @@ import './preview_markdown';
window.DropzoneInput = (function() { window.DropzoneInput = (function() {
function DropzoneInput(form) { function DropzoneInput(form) {
var updateAttachingMessage, $attachingFileMessage, $mdArea, $attachButton, $cancelButton, $retryLink, $uploadingErrorContainer, $uploadingErrorMessage, $uploadProgress, $uploadingProgressContainer, appendToTextArea, btnAlert, child, closeAlertMessage, closeSpinner, divHover, divSpinner, dropzone, $formDropzone, formTextarea, getFilename, handlePaste, iconPaperclip, iconSpinner, insertToTextArea, isImage, maxFileSize, pasteText, uploadsPath, showError, showSpinner, uploadFile, addFileToForm;
Dropzone.autoDiscover = false; Dropzone.autoDiscover = false;
divHover = '<div class="div-dropzone-hover"></div>'; const divHover = '<div class="div-dropzone-hover"></div>';
iconPaperclip = '<i class="fa fa-paperclip div-dropzone-icon"></i>'; const iconPaperclip = '<i class="fa fa-paperclip div-dropzone-icon"></i>';
$attachButton = form.find('.button-attach-file'); const $attachButton = form.find('.button-attach-file');
$attachingFileMessage = form.find('.attaching-file-message'); const $attachingFileMessage = form.find('.attaching-file-message');
$cancelButton = form.find('.button-cancel-uploading-files'); const $cancelButton = form.find('.button-cancel-uploading-files');
$retryLink = form.find('.retry-uploading-link'); const $retryLink = form.find('.retry-uploading-link');
$uploadProgress = form.find('.uploading-progress'); const $uploadProgress = form.find('.uploading-progress');
$uploadingErrorContainer = form.find('.uploading-error-container'); const $uploadingErrorContainer = form.find('.uploading-error-container');
$uploadingErrorMessage = form.find('.uploading-error-message'); const $uploadingErrorMessage = form.find('.uploading-error-message');
$uploadingProgressContainer = form.find('.uploading-progress-container'); const $uploadingProgressContainer = form.find('.uploading-progress-container');
uploadsPath = window.uploads_path || null; const uploadsPath = window.uploads_path || null;
maxFileSize = gon.max_file_size || 10; const maxFileSize = gon.max_file_size || 10;
formTextarea = form.find('.js-gfm-input'); const formTextarea = form.find('.js-gfm-input');
let handlePaste;
let pasteText;
let addFileToForm;
let updateAttachingMessage;
let isImage;
let getFilename;
let uploadFile;
formTextarea.wrap('<div class="div-dropzone"></div>'); formTextarea.wrap('<div class="div-dropzone"></div>');
formTextarea.on('paste', (function(_this) { formTextarea.on('paste', (function(_this) {
return function(event) { return function(event) {
...@@ -28,16 +35,16 @@ window.DropzoneInput = (function() { ...@@ -28,16 +35,16 @@ window.DropzoneInput = (function() {
})(this)); })(this));
// Add dropzone area to the form. // Add dropzone area to the form.
$mdArea = formTextarea.closest('.md-area'); const $mdArea = formTextarea.closest('.md-area');
form.setupMarkdownPreview(); form.setupMarkdownPreview();
$formDropzone = form.find('.div-dropzone'); const $formDropzone = form.find('.div-dropzone');
$formDropzone.parent().addClass('div-dropzone-wrapper'); $formDropzone.parent().addClass('div-dropzone-wrapper');
$formDropzone.append(divHover); $formDropzone.append(divHover);
$formDropzone.find('.div-dropzone-hover').append(iconPaperclip); $formDropzone.find('.div-dropzone-hover').append(iconPaperclip);
if (!uploadsPath) return; if (!uploadsPath) return;
dropzone = $formDropzone.dropzone({ const dropzone = $formDropzone.dropzone({
url: uploadsPath, url: uploadsPath,
dictDefaultMessage: '', dictDefaultMessage: '',
clickable: true, clickable: true,
...@@ -117,7 +124,7 @@ window.DropzoneInput = (function() { ...@@ -117,7 +124,7 @@ window.DropzoneInput = (function() {
} }
}); });
child = $(dropzone[0]).children('textarea'); const child = $(dropzone[0]).children('textarea');
// removeAllFiles(true) stops uploading files (if any) // removeAllFiles(true) stops uploading files (if any)
// and remove them from dropzone files queue. // and remove them from dropzone files queue.
...@@ -214,6 +221,35 @@ window.DropzoneInput = (function() { ...@@ -214,6 +221,35 @@ window.DropzoneInput = (function() {
return value.first(); return value.first();
}; };
const showSpinner = function(e) {
return $uploadingProgressContainer.removeClass('hide');
};
const closeSpinner = function() {
return $uploadingProgressContainer.addClass('hide');
};
const showError = function(message) {
$uploadingErrorContainer.removeClass('hide');
$uploadingErrorMessage.html(message);
};
const closeAlertMessage = function() {
return form.find('.div-dropzone-alert').alert('close');
};
const insertToTextArea = function(filename, url) {
return $(child).val(function(index, val) {
return val.replace(`{{${filename}}}`, url);
});
};
const appendToTextArea = function(url) {
return $(child).val(function(index, val) {
return val + url + "\n";
});
};
uploadFile = function(item, filename) { uploadFile = function(item, filename) {
var formData; var formData;
formData = new FormData(); formData = new FormData();
...@@ -262,35 +298,6 @@ window.DropzoneInput = (function() { ...@@ -262,35 +298,6 @@ window.DropzoneInput = (function() {
messageContainer.text(attachingMessage); messageContainer.text(attachingMessage);
}; };
insertToTextArea = function(filename, url) {
return $(child).val(function(index, val) {
return val.replace(`{{${filename}}}`, url);
});
};
appendToTextArea = function(url) {
return $(child).val(function(index, val) {
return val + url + "\n";
});
};
showSpinner = function(e) {
return $uploadingProgressContainer.removeClass('hide');
};
closeSpinner = function() {
return $uploadingProgressContainer.addClass('hide');
};
showError = function(message) {
$uploadingErrorContainer.removeClass('hide');
$uploadingErrorMessage.html(message);
};
closeAlertMessage = function() {
return form.find('.div-dropzone-alert').alert('close');
};
form.find('.markdown-selector').click(function(e) { form.find('.markdown-selector').click(function(e) {
e.preventDefault(); e.preventDefault();
$(this).closest('.gfm-form').find('.div-dropzone').click(); $(this).closest('.gfm-form').find('.div-dropzone').click();
......
---
title: refactor initializations in dropzone_input.js
merge_request: 12768
author: Brandon Everett
Markdown is supported
0%
or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment