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-item.js

314 lines
11 KiB
JavaScript
Raw Normal View History

2018-10-16 16:28:42 +00:00
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,
2018-10-16 16:28:42 +00:00
beforeSend: () => {
2018-10-17 14:27:56 +00:00
const origin = encodeURI(btoa(window.location.href.split('/post')[0]));
2018-10-16 16:28:42 +00:00
window.history.pushState('', '', '/user/' + username + '/post/' + uuid + '?o=' + origin);
2018-10-17 14:27:56 +00:00
2018-10-16 16:28:42 +00:00
$('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">&times;</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();
2018-10-17 14:27:56 +00:00
window.history.replaceState('', '', defaultUrl);
2018-10-16 16:28:42 +00:00
});
},
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',
2018-10-16 16:28:42 +00:00
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>&times;</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',
2018-10-16 16:28:42 +00:00
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',
2018-10-16 16:28:42 +00:00
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">
2018-10-16 16:28:42 +00:00
<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>&times;</span>
</button>
</div>
<div class="modal-body text-center" id="postDeleteBody">
2018-10-16 16:28:42 +00:00
<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',
2018-10-16 16:28:42 +00:00
data: {
uuid
},
method: 'post',
2018-10-16 16:28:42 +00:00
success: data => {
$('#postReportTitle').text(data.title);
$('#postDeleteBody').removeClass('text-center').html(data.body);
2018-10-16 16:28:42 +00:00
}
});
}
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);
}
})
2018-10-16 16:28:42 +00:00
}