314 lines
11 KiB
JavaScript
314 lines
11 KiB
JavaScript
function showFullPost(uuid, username) {
|
|
let defaultUrl = window.location.pathname;
|
|
if(window.location.pathname.indexOf('user') === -1)
|
|
defaultUrl += window.location.search;
|
|
|
|
$.ajax({
|
|
url: "/user/single_post_data/" + username + "/" + uuid,
|
|
beforeSend: () => {
|
|
const origin = encodeURI(btoa(window.location.href.split('/post')[0]));
|
|
window.history.pushState('', '', '/user/' + username + '/post/' + uuid + '?o=' + origin);
|
|
|
|
$('body').append(`
|
|
<div class="modal fade postFullviewModal" role="dialog" tabindex="-1" id="postFullviewModal">
|
|
<div class="modal-dialog modal-lg" role="document">
|
|
<div class="modal-content">
|
|
<div class="modal-header">
|
|
<button type="button" class="close" data-dismiss="modal" aria-label="Schließen">
|
|
<span aria-hidden="true">×</span>
|
|
</button>
|
|
</div>
|
|
<div class="modal-body">
|
|
<div class="text-center">
|
|
<i class="fas fa-3x fa-spinner fa-spin"></i>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
`);
|
|
const modal = $('#postFullviewModal');
|
|
|
|
modal.modal('show');
|
|
|
|
modal.on('hidden.bs.modal', () => {
|
|
$('.postFullviewModal').remove();
|
|
window.history.replaceState('', '', defaultUrl);
|
|
});
|
|
},
|
|
success: (data) => {
|
|
$('#postFullviewModal .modal-body').empty().append(data);
|
|
registerPostEvents();
|
|
}
|
|
});
|
|
}
|
|
|
|
function showFullscreenImage(imageURL) {
|
|
$('body').append(`
|
|
<div class="modal fade imageFullviewModal" role="dialog" tabindex="-1" id="imageFullviewModal">
|
|
<div class="modal-dialog modal-dialog-centered modal-lg" role="document">
|
|
<div class="modal-content">
|
|
<img src="${imageURL}" class="img-fluid rounded">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
`);
|
|
$('#imageFullviewModal').modal('show').on('hidden.bs.modal', function () {
|
|
$(this).remove();
|
|
});
|
|
$('.postFullviewModal').modal('hide');
|
|
}
|
|
|
|
function registerPostEvents() {
|
|
$('.action-btn.like-button').click((e) => {
|
|
e.preventDefault();
|
|
addPostLike($(e.currentTarget));
|
|
});
|
|
|
|
$('.action-btn.reply-button').click((e) => {
|
|
e.preventDefault();
|
|
const target = $(e.currentTarget);
|
|
console.log(target, $('.postFullviewModal'));
|
|
$('.postFullviewModal').modal('hide');
|
|
$('#postModal #replyTo').val(target.data('uuid'));
|
|
$('#postModal').modal('show');
|
|
});
|
|
|
|
$('.action-btn.more-options-button').click((e) => {
|
|
e.preventDefault();
|
|
|
|
});
|
|
|
|
$('.post-item').click(function (e) {
|
|
const target = e.target;
|
|
|
|
if(target.tagName !== 'A' && target.tagName !== 'IMG' && target.tagName !== 'I' && !target.classList.contains('post-media')) {
|
|
e.preventDefault();
|
|
const uuid = $(this).data('uuid');
|
|
const username = $(this).data('username');
|
|
|
|
showFullPost(uuid, username);
|
|
}
|
|
});
|
|
|
|
$('.post-media').click(function () {
|
|
showFullscreenImage($(this).data('full-image'));
|
|
});
|
|
}
|
|
registerPostEvents();
|
|
|
|
const pendingRequests = [];
|
|
function addPostLike(el) {
|
|
const uuid = el.data('uuid');
|
|
|
|
console.log(el, uuid);
|
|
if(pendingRequests.indexOf(uuid) !== -1)
|
|
return;
|
|
|
|
const icon = $('.fa-heart', el);
|
|
const text = $('span', el);
|
|
const likeCount = parseInt(text.text());
|
|
$.ajax({
|
|
url: '/posts/addPostLike',
|
|
method: 'post',
|
|
data: {
|
|
postUUID: uuid
|
|
},
|
|
success: (result) => {
|
|
console.log(result);
|
|
if(result.success) {
|
|
text.text(result.likeCount);
|
|
if(result.isLiked) {
|
|
icon.removeClass('far').addClass('fas');
|
|
icon.parent().addClass('active');
|
|
} else {
|
|
icon.removeClass('fas').addClass('far');
|
|
icon.parent().removeClass('active');
|
|
}
|
|
} else {
|
|
text.text(likeCount);
|
|
$('body').append(`
|
|
<div class="alert alert-warning snackbar" id="message-uuid-${uuid}" role="alert">
|
|
${result.message}
|
|
</div>
|
|
`);
|
|
icon.toggleClass('far').toggleClass('fas');
|
|
icon.parent().toggleClass('active');
|
|
setTimeout(() => {
|
|
$('#message-uuid-' + uuid).remove();
|
|
}, 6000);
|
|
}
|
|
pendingRequests.splice(pendingRequests.indexOf(uuid), 1);
|
|
},
|
|
beforeSend: () => {
|
|
pendingRequests.push(uuid);
|
|
if(icon.hasClass('far')) {
|
|
text.text(likeCount + 1);
|
|
} else {
|
|
text.text(likeCount - 1);
|
|
}
|
|
icon.toggleClass('far').toggleClass('fas');
|
|
icon.parent().toggleClass('active');
|
|
},
|
|
error: console.log
|
|
});
|
|
}
|
|
|
|
function copyToClipboard(text) {
|
|
const $temp = $('<input>');
|
|
$('body').append($temp);
|
|
$temp.val(text).select();
|
|
document.execCommand('copy');
|
|
$temp.remove();
|
|
$('.snackbar-container').append('<div class="alert alert-primary snackbar" role="alert">Text wurde in die Zwischenablage kopiert!</div>');
|
|
}
|
|
|
|
function openPostReportModal(uuid) {
|
|
$('body').append(`
|
|
<div class="modal fade" id="postReportModal" tabindex="-1" role="dialog" aria-labelledby="postReportLabel">
|
|
<div class="modal-dialog modal-dialog-centered" role="document">
|
|
<div class="modal-content">
|
|
<div class="modal-header">
|
|
<h4 class="modal-title" id="postReportTitle">Post melden</h4>
|
|
<button type="button" class="close" data-dismiss="modal" aria-label="Schließen">
|
|
<span>×</span>
|
|
</button>
|
|
</div>
|
|
<div class="modal-body text-center" id="postReportBody">
|
|
<i class="fa fa-cog fa-spin fa-4x"></i>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
`);
|
|
|
|
$('#postReportModal').modal('show');
|
|
$('#postReportModal').on('hidden.bs.modal', function () {
|
|
$('#postReportModal').remove();
|
|
});
|
|
|
|
loadPostReportModal(uuid);
|
|
}
|
|
|
|
function loadPostReportModal(uuid) {
|
|
$.ajax({
|
|
url: '/posts/getReportModal',
|
|
data: {
|
|
uuid
|
|
},
|
|
success: (data) => {
|
|
$('#postReportModal .modal-dialog').html(data);
|
|
$('#postReportForm').submit((e) => {
|
|
e.preventDefault();
|
|
$('#postReportForm').slideUp();
|
|
setTimeout(() => {
|
|
$('#postReportBody').append('<i class="fa fa-cog fa-4x fa-spin text-center"></i>');
|
|
}, 200);
|
|
submitReportForm(uuid, $('#postReportReason').val(), $('#postReportText').val());
|
|
});
|
|
}, error: () => {
|
|
$('#postReportBody').html('<div class="alert alert-danger" role="alert">Dialog couldn\'t be loaded.');
|
|
}
|
|
});
|
|
}
|
|
|
|
function submitReportForm(postUuid, reportReason, reportText) {
|
|
$.ajax({
|
|
url: '/posts/reportPost',
|
|
data: {
|
|
uuid: postUuid,
|
|
reason: reportReason,
|
|
explanation: reportText
|
|
},
|
|
method: 'POST',
|
|
success: (data) => {
|
|
setTimeout(() => {
|
|
$('#postReportBody').find('.fa').fadeOut();
|
|
}, 500);
|
|
console.log(data);
|
|
if(data.success) {
|
|
$('#postReportBody').append(`<div class="alert alert-success" role="alert" style="display: none;">${data.message}</div>`);
|
|
} else {
|
|
$('#postReportBody').append(`<div class="alert alert-danger" role="alert" style="display: none;">${data.message}</div>`);
|
|
setTimeout(() => {
|
|
$('#postReportForm').slideDown();
|
|
$('#postReportBody').find('.alert').slideUp();
|
|
setTimeout(() => {
|
|
$('#postReportBody').find('.alert').remove();
|
|
}, 500);
|
|
}, 2500);
|
|
}
|
|
setTimeout(() => {
|
|
$('#postReportBody').find('.alert').slideDown();
|
|
}, 1000);
|
|
}
|
|
})
|
|
}
|
|
|
|
function openDeletePostModal(uuid) {
|
|
$('body').append(`
|
|
<div class="modal fade" id="postDeleteModal" tabindex="-1" role="dialog" aria-labelledby="postReportLabel">
|
|
<div class="modal-dialog modal-dialog-centered modal-lg" role="document">
|
|
<div class="modal-content">
|
|
<div class="modal-header">
|
|
<h4 class="modal-title" id="postReportTitle">Post löschen</h4>
|
|
<button type="button" class="close" data-dismiss="modal" aria-label="Schließen">
|
|
<span>×</span>
|
|
</button>
|
|
</div>
|
|
<div class="modal-body text-center" id="postDeleteBody">
|
|
<i class="fa fa-cog fa-spin fa-4x"></i>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
`);
|
|
|
|
$('#postDeleteModal').modal('show');
|
|
$('#postDeleteModal').on('hidden.bs.modal', function () {
|
|
$('#postDeleteModal').remove();
|
|
});
|
|
|
|
loadDeletePostModal(uuid);
|
|
}
|
|
|
|
function loadDeletePostModal(uuid) {
|
|
$.ajax({
|
|
url: '/posts/getDeleteModal',
|
|
data: {
|
|
uuid
|
|
},
|
|
method: 'post',
|
|
success: data => {
|
|
$('#postReportTitle').text(data.title);
|
|
$('#postDeleteBody').removeClass('text-center').html(data.body);
|
|
}
|
|
});
|
|
}
|
|
|
|
function deletePost(uuid) {
|
|
$.ajax({
|
|
url: '/posts/deletePost',
|
|
method: 'post',
|
|
data: { uuid },
|
|
beforeSend: () => {
|
|
$('#postDeleteBody').addClass('text-center').html('<i class="fa fa-cog fa-spin fa-4x"></i>');
|
|
},
|
|
success: data => {
|
|
if(data.success) {
|
|
$('#postDeleteBody').html('<div class="alert alert-success" role="alert"></div>');
|
|
} else {
|
|
$('#postDeleteBody').html('<div class="alert alert-danger" role="alert"></div>');
|
|
}
|
|
$('#postDeleteBody').removeClass('text-center').find('.alert').text(data.message);
|
|
setTimeout(() => {
|
|
$('#postDeleteModal').modal('hide');
|
|
$(`.post-item[data-uuid=${uuid}]`).slideUp();
|
|
setTimeout(() => {
|
|
$('#postDeleteModal').modal('dispose').remove();
|
|
$(`.post-item[data-uuid=${uuid}]`).remove();
|
|
}, 500);
|
|
}, 2000);
|
|
}
|
|
})
|
|
} |