Archived
1
0
This repository has been archived on 2020-12-10. You can view files and clone it, but cannot push or open issues or pull requests.
old/assets/js/post-create.js

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 (/\&nbsp;$/.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 (/\&nbsp;$/.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 (!/\&nbsp;$/.test($(this).html())) {
filter += '&nbsp;';
}
$(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 (/\&nbsp;$/.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 (!/&nbsp;$/.test($(this).html())) {
// filter += '&nbsp;';
// }
// $(this).html(filter);
// set_range(end, end, this);
// })
// ;
$('#contentField').on('mouseup', function (e) {
if (!/\&nbsp;$/.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.');
}
});
}