Implement pasting image from clipboard for browsers that supports that (#5317)

release/v1.15
Lauris BH 2018-11-15 03:20:13 +02:00 committed by techknowlogick
parent e110943562
commit 7278372388
1 changed files with 82 additions and 0 deletions

View File

@ -171,6 +171,87 @@ function initReactionSelector(parent) {
});
}
function insertAtCursor(field, value) {
if (field.selectionStart || field.selectionStart === 0) {
var startPos = field.selectionStart;
var endPos = field.selectionEnd;
field.value = field.value.substring(0, startPos)
+ value
+ field.value.substring(endPos, field.value.length);
field.selectionStart = startPos + value.length;
field.selectionEnd = startPos + value.length;
} else {
field.value += value;
}
}
function replaceAndKeepCursor(field, oldval, newval) {
if (field.selectionStart || field.selectionStart === 0) {
var startPos = field.selectionStart;
var endPos = field.selectionEnd;
field.value = field.value.replace(oldval, newval);
field.selectionStart = startPos + newval.length - oldval.length;
field.selectionEnd = endPos + newval.length - oldval.length;
} else {
field.value = field.value.replace(oldval, newval);
}
}
function retrieveImageFromClipboardAsBlob(pasteEvent, callback){
if (!pasteEvent.clipboardData) {
return;
}
var items = pasteEvent.clipboardData.items;
if (typeof(items) === "undefined") {
return;
}
for (var i = 0; i < items.length; i++) {
if (items[i].type.indexOf("image") === -1) continue;
var blob = items[i].getAsFile();
if (typeof(callback) === "function") {
pasteEvent.preventDefault();
pasteEvent.stopPropagation();
callback(blob);
}
}
}
function uploadFile(file, callback) {
var xhr = new XMLHttpRequest();
xhr.onload = function() {
if (xhr.status == 200) {
callback(xhr.responseText);
}
};
xhr.open("post", suburl + "/attachments", true);
xhr.setRequestHeader("X-Csrf-Token", csrf);
var formData = new FormData();
formData.append('file', file, file.name);
xhr.send(formData);
}
function initImagePaste(target) {
target.each(function(i, field) {
field.addEventListener('paste', function(event){
retrieveImageFromClipboardAsBlob(event, function(img) {
var name = img.name.substr(0, img.name.lastIndexOf('.'));
insertAtCursor(field, '![' + name + ']()');
uploadFile(img, function(res) {
var data = JSON.parse(res);
replaceAndKeepCursor(field, '![' + name + ']()', '![' + name + '](' + suburl + '/attachments/' + data.uuid + ')');
var input = $('<input id="' + data.uuid + '" name="files" type="hidden">').val(data.uuid);
$('.files').append(input);
});
});
}, false);
});
}
function initCommentForm() {
if ($('.comment.form').length == 0) {
return
@ -178,6 +259,7 @@ function initCommentForm() {
initBranchSelector();
initCommentPreviewTab($('.comment.form'));
initImagePaste($('.comment.form textarea'));
// Listsubmit
function initListSubmits(selector, outerSelector) {