gitlab-org--gitlab-foss/app/assets/javascripts/dropzone_input.js
2017-05-15 12:15:56 +01:00

229 lines
8.5 KiB
JavaScript

/* eslint-disable func-names, space-before-function-paren, wrap-iife, max-len, one-var, no-var, one-var-declaration-per-line, no-unused-vars, camelcase, quotes, no-useless-concat, prefer-template, quote-props, comma-dangle, object-shorthand, consistent-return, prefer-arrow-callback */
/* global Dropzone */
require('./preview_markdown');
window.DropzoneInput = (function() {
function DropzoneInput(form) {
var $mdArea, alertAttr, alertClass, appendToTextArea, btnAlert, child, closeAlertMessage, closeSpinner, divAlert, divHover, divSpinner, dropzone, form_dropzone, form_textarea, getFilename, handlePaste, iconPaperclip, iconSpinner, insertToTextArea, isImage, max_file_size, pasteText, uploads_path, showError, showSpinner, uploadFile, uploadProgress;
Dropzone.autoDiscover = false;
alertClass = "alert alert-danger alert-dismissable div-dropzone-alert";
alertAttr = "class=\"close\" data-dismiss=\"alert\"" + "aria-hidden=\"true\"";
divHover = "<div class=\"div-dropzone-hover\"></div>";
divSpinner = "<div class=\"div-dropzone-spinner\"></div>";
divAlert = "<div class=\"" + alertClass + "\"></div>";
iconPaperclip = "<i class=\"fa fa-paperclip div-dropzone-icon\"></i>";
iconSpinner = "<i class=\"fa fa-spinner fa-spin div-dropzone-icon\"></i>";
uploadProgress = $("<div class=\"div-dropzone-progress\"></div>");
btnAlert = "<button type=\"button\"" + alertAttr + ">&times;</button>";
uploads_path = window.uploads_path || null;
max_file_size = gon.max_file_size || 10;
form_textarea = $(form).find(".js-gfm-input");
form_textarea.wrap("<div class=\"div-dropzone\"></div>");
form_textarea.on('paste', (function(_this) {
return function(event) {
return handlePaste(event);
};
})(this));
$mdArea = $(form_textarea).closest('.md-area');
$(form).setupMarkdownPreview();
form_dropzone = $(form).find('.div-dropzone');
form_dropzone.parent().addClass("div-dropzone-wrapper");
form_dropzone.append(divHover);
form_dropzone.find(".div-dropzone-hover").append(iconPaperclip);
form_dropzone.append(divSpinner);
form_dropzone.find(".div-dropzone-spinner").append(iconSpinner);
form_dropzone.find(".div-dropzone-spinner").append(uploadProgress);
form_dropzone.find(".div-dropzone-spinner").css({
"opacity": 0,
"display": "none"
});
if (!uploads_path) return;
dropzone = form_dropzone.dropzone({
url: uploads_path,
dictDefaultMessage: "",
clickable: true,
paramName: "file",
maxFilesize: max_file_size,
uploadMultiple: false,
headers: {
"X-CSRF-Token": $("meta[name=\"csrf-token\"]").attr("content")
},
previewContainer: false,
processing: function() {
return $(".div-dropzone-alert").alert("close");
},
dragover: function() {
$mdArea.addClass('is-dropzone-hover');
form.find(".div-dropzone-hover").css("opacity", 0.7);
},
dragleave: function() {
$mdArea.removeClass('is-dropzone-hover');
form.find(".div-dropzone-hover").css("opacity", 0);
},
drop: function() {
$mdArea.removeClass('is-dropzone-hover');
form.find(".div-dropzone-hover").css("opacity", 0);
form_textarea.focus();
},
success: function(header, response) {
const processingFileCount = this.getQueuedFiles().length + this.getUploadingFiles().length;
const shouldPad = processingFileCount >= 1;
pasteText(response.link.markdown, shouldPad);
},
error: function(temp) {
var checkIfMsgExists, errorAlert;
errorAlert = $(form).find('.error-alert');
checkIfMsgExists = errorAlert.children().length;
if (checkIfMsgExists === 0) {
errorAlert.append(divAlert);
$(".div-dropzone-alert").append(btnAlert + "Attaching the file failed.");
}
},
totaluploadprogress: function(totalUploadProgress) {
uploadProgress.text(Math.round(totalUploadProgress) + "%");
},
sending: function() {
form_dropzone.find(".div-dropzone-spinner").css({
"opacity": 0.7,
"display": "inherit"
});
},
queuecomplete: function() {
uploadProgress.text("");
$(".dz-preview").remove();
$(".markdown-area").trigger("input");
$(".div-dropzone-spinner").css({
"opacity": 0,
"display": "none"
});
}
});
child = $(dropzone[0]).children("textarea");
handlePaste = function(event) {
var filename, image, pasteEvent, text;
pasteEvent = event.originalEvent;
if (pasteEvent.clipboardData && pasteEvent.clipboardData.items) {
image = isImage(pasteEvent);
if (image) {
event.preventDefault();
filename = getFilename(pasteEvent) || "image.png";
text = "{{" + filename + "}}";
pasteText(text);
return uploadFile(image.getAsFile(), filename);
}
}
};
isImage = function(data) {
var i, item;
i = 0;
while (i < data.clipboardData.items.length) {
item = data.clipboardData.items[i];
if (item.type.indexOf("image") !== -1) {
return item;
}
i += 1;
}
return false;
};
pasteText = function(text, shouldPad) {
var afterSelection, beforeSelection, caretEnd, caretStart, textEnd;
var formattedText = text;
if (shouldPad) formattedText += "\n\n";
const textarea = child.get(0);
caretStart = textarea.selectionStart;
caretEnd = textarea.selectionEnd;
textEnd = $(child).val().length;
beforeSelection = $(child).val().substring(0, caretStart);
afterSelection = $(child).val().substring(caretEnd, textEnd);
$(child).val(beforeSelection + formattedText + afterSelection);
textarea.setSelectionRange(caretStart + formattedText.length, caretEnd + formattedText.length);
textarea.style.height = `${textarea.scrollHeight}px`;
form_textarea.trigger("input");
form_textarea.get(0).dispatchEvent(new Event('input'));
};
getFilename = function(e) {
var value;
if (window.clipboardData && window.clipboardData.getData) {
value = window.clipboardData.getData("Text");
} else if (e.clipboardData && e.clipboardData.getData) {
value = e.clipboardData.getData("text/plain");
}
value = value.split("\r");
return value.first();
};
uploadFile = function(item, filename) {
var formData;
formData = new FormData();
formData.append("file", item, filename);
return $.ajax({
url: uploads_path,
type: "POST",
data: formData,
dataType: "json",
processData: false,
contentType: false,
headers: {
"X-CSRF-Token": $("meta[name=\"csrf-token\"]").attr("content")
},
beforeSend: function() {
showSpinner();
return closeAlertMessage();
},
success: function(e, textStatus, response) {
return insertToTextArea(filename, response.responseJSON.link.markdown);
},
error: function(response) {
return showError(response.responseJSON.message);
},
complete: function() {
return closeSpinner();
}
});
};
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 form.find(".div-dropzone-spinner").css({
"opacity": 0.7,
"display": "inherit"
});
};
closeSpinner = function() {
return form.find(".div-dropzone-spinner").css({
"opacity": 0,
"display": "none"
});
};
showError = function(message) {
var checkIfMsgExists, errorAlert;
errorAlert = $(form).find('.error-alert');
checkIfMsgExists = errorAlert.children().length;
if (checkIfMsgExists === 0) {
errorAlert.append(divAlert);
return $(".div-dropzone-alert").append(btnAlert + message);
}
};
closeAlertMessage = function() {
return form.find(".div-dropzone-alert").alert("close");
};
form.find(".markdown-selector").click(function(e) {
e.preventDefault();
$(this).closest('.gfm-form').find('.div-dropzone').click();
form_textarea.focus();
});
}
return DropzoneInput;
})();