381 lines
12 KiB
JavaScript
381 lines
12 KiB
JavaScript
$('#contentField').on('keyup', function (e) {
|
|
var range = window.getSelection().getRangeAt(0);
|
|
var end_node = range.endContainer;
|
|
var end = range.endOffset;
|
|
|
|
if (end_node !== this) {
|
|
const text_nodes = get_text_nodes_in(this);
|
|
for (let i = 0; i < text_nodes.length; ++i) {
|
|
if (text_nodes[i] === end_node) {
|
|
break;
|
|
}
|
|
end += text_nodes[i].length;
|
|
}
|
|
}
|
|
|
|
let html = $(this).html();
|
|
if (/\ $/.test(html) && $(this).text().length === end) {
|
|
end--;
|
|
set_range(end, end, this);
|
|
return;
|
|
}
|
|
|
|
let filter = html.replace(/<span class="mention">/g, "")
|
|
.replace(/<span class="hashtag">/g, "")
|
|
.replace(/<\/span>/g, "")
|
|
.replace(/@[A-Za-z0-9._]+/g, function (match) {
|
|
return `<span class="mention">${match}</span>`;
|
|
})
|
|
.replace(/#[A-Za-z0-9._]+/g, function (match) {
|
|
return `<span class="hashtag">${match}</span>`;
|
|
});
|
|
|
|
if (!/ $/.test($(this).html())) {
|
|
filter += ' ';
|
|
}
|
|
$(this).html(filter);
|
|
set_range(end, end, this);
|
|
});
|
|
|
|
$('#contentField').on('mouseup', function (e) {
|
|
if (!/\ $/.test($(this).html())) {
|
|
return;
|
|
}
|
|
var range = window.getSelection().getRangeAt(0);
|
|
var end = range.endOffset;
|
|
var end_node = range.endContainer;
|
|
if (end_node != this) {
|
|
var text_nodes = get_text_nodes_in(this);
|
|
for (var i = 0; i < text_nodes.length; ++i) {
|
|
if (text_nodes[i] == end_node) {
|
|
break;
|
|
}
|
|
end += text_nodes[i].length;
|
|
}
|
|
}
|
|
if ($(this).text().length == end) {
|
|
end = end - 1;
|
|
set_range(end, end, this);
|
|
}
|
|
});
|
|
|
|
function get_text_nodes_in(node) {
|
|
var text_nodes = [];
|
|
if (node.nodeType === 3) {
|
|
text_nodes.push(node);
|
|
} else {
|
|
var children = node.childNodes;
|
|
for (var i = 0, len = children.length; i < len; ++i) {
|
|
var text_node;
|
|
text_nodes.push.apply(text_nodes, get_text_nodes_in(children[i]));
|
|
}
|
|
}
|
|
return text_nodes;
|
|
}
|
|
|
|
function set_range(start, end, element) {
|
|
var range = document.createRange();
|
|
range.selectNodeContents(element);
|
|
var text_nodes = get_text_nodes_in(element);
|
|
var foundStart = false;
|
|
var char_count = 0, end_char_count;
|
|
|
|
for (var i = 0, text_node; text_node = text_nodes[i++];) {
|
|
end_char_count = char_count + text_node.length;
|
|
if (!foundStart && start >= char_count && (start < end_char_count || (start === end_char_count && i < text_nodes.length))) {
|
|
range.setStart(text_node, start - char_count);
|
|
foundStart = true;
|
|
}
|
|
if (foundStart && end <= end_char_count) {
|
|
range.setEnd(text_node, end - char_count);
|
|
break;
|
|
}
|
|
char_count = end_char_count;
|
|
}
|
|
|
|
var selection = window.getSelection();
|
|
selection.removeAllRanges();
|
|
selection.addRange(range);
|
|
}
|
|
|
|
$.fn.selectRange = function (start, end) {
|
|
var e = document.getElementById($(this).attr('id'));
|
|
if (!e) {
|
|
} else if (e.setSelectionRange) {
|
|
e.focus();
|
|
e.setSelectionRange(start, end);
|
|
} /* WebKit */
|
|
else if (e.createTextRange) {
|
|
var range = e.createTextRange();
|
|
range.collapse(true);
|
|
range.moveEnd('character', end);
|
|
range.moveStart('character', start);
|
|
range.select();
|
|
} /* IE */
|
|
else if (e.selectionStart) {
|
|
e.selectionStart = start;
|
|
e.selectionEnd = end;
|
|
}
|
|
};
|
|
|
|
let postMedia = [];
|
|
|
|
function publishPost() {
|
|
let isFilled = true;
|
|
let content = $('#contentField').text();
|
|
if (postMedia.length === 0 && content === "") {
|
|
$('#postModal #content').addClass('has-error');
|
|
isFilled = false;
|
|
} else {
|
|
$('#postModal #content').addClass('has-success');
|
|
}
|
|
|
|
if (isFilled) {
|
|
const replyTo = $('#postModal #replyTo').val();
|
|
submitPost(content, replyTo);
|
|
} else {
|
|
addSnackbar('primary', 'Wir haben leider noch nicht erlernt, wie man leere Posts veröffentlicht.');
|
|
}
|
|
}
|
|
|
|
let uploadingFiles = [];
|
|
|
|
(function () {
|
|
// file drag hover
|
|
function fileDragHover(e) {
|
|
e.stopPropagation();
|
|
e.preventDefault();
|
|
e.target.className = (e.type == "dragover" ? "hover" : "");
|
|
}
|
|
|
|
// file selection
|
|
function fileSelectHandler(e) {
|
|
|
|
// cancel event and hover styling
|
|
fileDragHover(e);
|
|
|
|
// fetch FileList object
|
|
const files = e.target.files || e.dataTransfer.files;
|
|
|
|
// process all File objects
|
|
let i = 0;
|
|
for (let f of files) {
|
|
const generalType = f.type.split('/')[0];
|
|
|
|
if (postMedia.length + i > 4 || postMedia.find(media => media.type !== 'image' || media.type !== generalType)) {
|
|
addSnackbar('warning', 'Du kannst maximal vier Bilder zu einem Post hinzufügen.');
|
|
continue;
|
|
}
|
|
|
|
parseFile(f);
|
|
uploadFile(f);
|
|
i++;
|
|
}
|
|
}
|
|
|
|
// output file information
|
|
function parseFile(file) {
|
|
$('#postModalPublish').addClass('disabled').attr('disabled', true);
|
|
uploadingFiles.push(file);
|
|
|
|
const thumbnailEl = $('<div class="post-image"></div>');
|
|
$('.post-images').append(thumbnailEl);
|
|
switch (file.type.split('/')[0]) {
|
|
case 'image':
|
|
const reader = new FileReader();
|
|
reader.addEventListener('load', () => {
|
|
thumbnailEl.css('background-image', `url(${reader.result})`);
|
|
});
|
|
break;
|
|
|
|
if (postMedia.length >= 4)
|
|
$('.postImageUpload').hide();
|
|
case 'video':
|
|
const video = document.createElement('video');
|
|
video.src = URL.createObjectURL(file);
|
|
|
|
video.addEventListener('loadeddata', () => {
|
|
const width = video.videoWidth;
|
|
const height = video.videoHeight;
|
|
|
|
const canvas = document.createElement('canvas');
|
|
canvas.width = width;
|
|
canvas.height = height;
|
|
canvas.getContext('2d').drawImage(video, 0, 0, width, height);
|
|
|
|
thumbnailEl.css('background-image', `url(${canvas.toDataURL()})`);
|
|
});
|
|
|
|
$('.postImageUpload').hide();
|
|
break;
|
|
case 'audio':
|
|
break;
|
|
}
|
|
}
|
|
|
|
// upload JPEG files
|
|
function uploadFile(file) {
|
|
var xhr = new XMLHttpRequest();
|
|
const allowedTypes = ['image/jpg', 'image/jpeg', 'image/gif', 'image/png', 'video/mp4'];
|
|
if (xhr.upload && allowedTypes.includes(file.type) && file.size <= 100000000) {
|
|
const formData = new FormData();
|
|
formData.append('postMedia', file);
|
|
|
|
$.ajax({
|
|
url: '/user/uploadPostMedia',
|
|
method: 'POST',
|
|
data: formData,
|
|
processData: false,
|
|
contentType: false,
|
|
success: (data) => {
|
|
postMedia.push({
|
|
type: data.type,
|
|
path: data.path,
|
|
});
|
|
|
|
uploadingFiles.splice(uploadingFiles.indexOf(file), 1);
|
|
if(uploadingFiles.length === 0) {
|
|
$('#postModalPublish').removeClass('disabled').attr('disabled', false);
|
|
}
|
|
},
|
|
});
|
|
|
|
}
|
|
|
|
}
|
|
|
|
// initialize
|
|
function init() {
|
|
|
|
var fileselect = $('#postFiles')[0],
|
|
filedrag = $('#postFiles')[0];
|
|
// submitbutton = $id("submitbutton");
|
|
|
|
if (!fileselect)
|
|
return;
|
|
|
|
// file select
|
|
fileselect.addEventListener("change", fileSelectHandler, false);
|
|
|
|
// is XHR2 available?
|
|
var xhr = new XMLHttpRequest();
|
|
if (xhr.upload) {
|
|
|
|
// file drop
|
|
filedrag.addEventListener("dragover", fileDragHover, false);
|
|
filedrag.addEventListener("dragleave", fileDragHover, false);
|
|
filedrag.addEventListener("drop", fileSelectHandler, false);
|
|
filedrag.style.display = "block";
|
|
}
|
|
|
|
}
|
|
|
|
// call initialization file
|
|
if (window.File && window.FileList && window.FileReader) {
|
|
init();
|
|
}
|
|
|
|
|
|
})();
|
|
|
|
$('#postModal')
|
|
.on('hide.bs.modal', function (e) {
|
|
if (!this.forceQuit && (postMedia.length > 0 || $('#contentField').text().trim().length > 0)) {
|
|
e.preventDefault();
|
|
|
|
let allowClosing = false;
|
|
const confirmModal = $(`
|
|
<div class="modal fade" role="dialog">
|
|
<div class="modal-dialog modal-dialog-centered" role="document">
|
|
<div class="modal-content">
|
|
<div class="modal-header">
|
|
<h4 class="modal-title">Post verwerfen?</h4>
|
|
</div>
|
|
<div class="modal-footer">
|
|
<button class="btn btn-sm btn-outline btn-red dismiss" type="button" data-dismiss="modal">Ja, Post verwerfen</button>
|
|
<button class="btn btn-sm btn-primary continue" type="submit" data-dismiss="modal">Nein, Post behalten</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
`);
|
|
confirmModal.modal('show');
|
|
|
|
$('.dismiss', confirmModal).click(() => {
|
|
allowClosing = true;
|
|
|
|
this.forceQuit = true;
|
|
$(this).modal('hide');
|
|
});
|
|
|
|
$('.continue', confirmModal).click(() => {
|
|
allowClosing = true;
|
|
});
|
|
|
|
confirmModal
|
|
.on('hide.bs.modal', function (e) {
|
|
if (!allowClosing)
|
|
e.preventDefault();
|
|
})
|
|
.on('hidden.bs.modal', function () {
|
|
$(this).remove();
|
|
});
|
|
} else {
|
|
this.forceQuit = false;
|
|
}
|
|
})
|
|
.on('hidden.bs.modal', () => {
|
|
$('#postModal #replyTo').val(-1);
|
|
|
|
if(postMedia.length > 0) {
|
|
postMedia.forEach(media => {
|
|
$.ajax({
|
|
url: '/user/deletePostMedia',
|
|
method: 'POST',
|
|
data: {
|
|
path: media.path
|
|
}
|
|
});
|
|
});
|
|
}
|
|
resetPostForm();
|
|
$('#postModalBody > *:not(#postForm)').remove();
|
|
$('#postForm').show();
|
|
$('#postModal .modal-footer').show();
|
|
});
|
|
|
|
function resetPostForm() {
|
|
uploadingFiles = [];
|
|
postMedia = [];
|
|
$('.post-images').empty();
|
|
$('.postImageUpload').show();
|
|
$('#contentField').text('');
|
|
}
|
|
|
|
function submitPost(content, replyTo) {
|
|
if (postMedia.length > 4) {
|
|
return;
|
|
}
|
|
|
|
const body = $('#postModalBody');
|
|
$.ajax({
|
|
url: "/user/publishPost",
|
|
method: 'POST',
|
|
data: {
|
|
content,
|
|
replyTo,
|
|
postMedia
|
|
},
|
|
beforeSend: function () {
|
|
body.children().hide().parent().append('<div class="loadingSpinner"></div>');
|
|
$('#postModal .modal-footer').hide();
|
|
resetPostForm();
|
|
},
|
|
success: function (data) {
|
|
$('.loadingSpinner', body).remove();
|
|
body.append(data);
|
|
},
|
|
error: function (data) {
|
|
}
|
|
});
|
|
} |