497 lines
16 KiB
JavaScript
497 lines
16 KiB
JavaScript
// $('#contentField').on('keypress', function (e) {
|
|
// console.log(e, $(this).html());
|
|
//
|
|
// if (e.ctrlKey)
|
|
// return;
|
|
//
|
|
// setTimeout(() => {
|
|
// // console.log($(this).html());
|
|
// //
|
|
// const range = window.getSelection().getRangeAt(0);
|
|
// const endNode = range.endContainer;
|
|
// let end = range.endOffset;
|
|
//
|
|
// // console.log(range.startOffset, end);
|
|
//
|
|
// if (endNode !== this) {
|
|
// console.log('test');
|
|
// const textNodes = get_text_nodes_in(this);
|
|
// console.log(textNodes);
|
|
// for (let i = 0; i < textNodes.length; ++i) {
|
|
// if (textNodes[i] === endNode)
|
|
// break;
|
|
// end += textNodes[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, (match) => `<span class="mention">${match}</span>`)
|
|
// .replace(/#[A-Za-z0-9._]+/g, (match) => `<span class="hashtag">${match}</span>`);
|
|
//
|
|
// console.log(range.startOffset, end);
|
|
// $(this).html(filter);
|
|
// set_range(end, end, this);
|
|
// }, 1);
|
|
const keys = ['Home', 'End', 'Insert', 'Delete', 'Enter'];
|
|
$('#contentField').on('keypress', function (e) {
|
|
console.log(e.key, e.code);
|
|
if(e.ctrlKey || e.key.indexOf('Arrow') === 0 || keys.includes(e.key))
|
|
return;
|
|
|
|
console.log(e.which);
|
|
|
|
setTimeout(() => {
|
|
var range = window.getSelection().getRangeAt(0);
|
|
var end_node = range.endContainer;
|
|
var end = range.endOffset;
|
|
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;
|
|
}
|
|
}
|
|
var html = $(this).html();
|
|
if (/\ $/.test(html) && $(this).text().length == end) {
|
|
end = end - 1;
|
|
set_range(end, end, this);
|
|
return;
|
|
}
|
|
|
|
let filter = html.replace(/<span class="[^"]*">([^<\/]*)<\/span>/g, '$1')
|
|
.replace(/@[A-Za-z0-9._]+/g, (match) => `<span class="mention">${match}</span>`)
|
|
.replace(/#[A-Za-z0-9_]+/g, (match) => `<span class="hashtag">${match}</span>`);
|
|
|
|
// var filter = html.replace(/(<b>)?\/([^<\/]*)(<\/b>)?/g, '\/$2');
|
|
// console.log(filter);
|
|
// filter = filter.replace(/(<b>)?([^<\/]*)\/(<\/b>)?/g, '$2\/');
|
|
// console.log(filter);
|
|
// filter = filter.replace(/(<b>)?\/([^<\/]*)\/(<\/b>)?/g, '<b>\/$2\/<\/b>');
|
|
// console.log(filter);
|
|
|
|
if (!/\ $/.test($(this).html())) {
|
|
filter += ' ';
|
|
}
|
|
|
|
$(this).html(filter);
|
|
set_range(end, end, this);
|
|
}, 1);
|
|
});
|
|
// 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})`);
|
|
});
|
|
reader.readAsDataURL(file);
|
|
|
|
if (postMedia.length >= 4)
|
|
$('.postImageUpload').hide();
|
|
break;
|
|
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);
|
|
}
|
|
},
|
|
error: () => {
|
|
addSnackbar('danger', 'Es ist ein Fehler beim Hochladen aufgetreten')
|
|
}
|
|
});
|
|
|
|
}
|
|
|
|
}
|
|
|
|
// 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) {
|
|
console.log(data);
|
|
$('.loadingSpinner', body).remove();
|
|
body.append(`
|
|
<div class="alert alert-${data.success ? 'success' : 'danger'}" role="alert">
|
|
<b>${data.title}</b>
|
|
${data.message.join('<br>')}
|
|
</div>
|
|
`);
|
|
if (data.buttons) {
|
|
const footer = $('<div class="modal-footer"></div>');
|
|
body.parent().append(footer);
|
|
data.buttons.forEach(button => {
|
|
let btn;
|
|
if (button.action) {
|
|
btn = `<a href="${button.action}" class="btn btn-${button.type}">${button.text}</a>`;
|
|
} else {
|
|
btn = `<button role="button" class="btn btn-${button.type}">${button.text}</button>`;
|
|
}
|
|
footer.append(btn);
|
|
});
|
|
}
|
|
},
|
|
error: function (data) {
|
|
console.log(data);
|
|
addSnackbar('warning', '<b>Ein unbekannter Fehler ist beim Veröffentlichen deines Posts aufgetreten.</b> Bitte versuche es später erneut oder kontaktiere uns.');
|
|
}
|
|
});
|
|
} |