Database refactoring and improving blog comments, blog post history and more
This commit is contained in:
Marcel
@@ -169,7 +169,7 @@
|
||||
.widget.filled-background .media {
|
||||
margin-top: 0;
|
||||
padding: 10px 0;
|
||||
border-bottom: 1px solid rgba(0,0,0,.3);
|
||||
border-bottom: 1px solid rgba(0, 0, 0, .3);
|
||||
transition: transform .2s;
|
||||
}
|
||||
|
||||
@@ -195,3 +195,31 @@
|
||||
right: 30%;
|
||||
}
|
||||
|
||||
.following-post {
|
||||
display: block;
|
||||
height: 108px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.following-post .following-post-image {
|
||||
float: left;
|
||||
background-size: cover;
|
||||
background-position: center;
|
||||
width: 100px;
|
||||
height: 100%;
|
||||
border-radius: 10px;
|
||||
margin-right: 10px;
|
||||
}
|
||||
|
||||
.following-post.right .following-post-image {
|
||||
float: right;
|
||||
margin-right: 0;
|
||||
margin-left: 10px;
|
||||
}
|
||||
|
||||
.following-post h4 {
|
||||
max-height: 48px;
|
||||
overflow: hidden;
|
||||
-ms-text-overflow: ellipsis;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
@@ -8,6 +8,15 @@ body {
|
||||
overflow-x: hidden;
|
||||
}
|
||||
|
||||
h1, h2, h3, h4, h5, h6 {
|
||||
font-family: Roboto, Helvetica, Arial, sans-serif;
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-family: "Roboto Black", Helvetica, "Arial Black", Arial, sans-serif;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.left_col {
|
||||
background: #444;
|
||||
}
|
||||
|
||||
@@ -1407,6 +1407,87 @@ ul#downloadSlider a.active .overlay {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.user-post-item {
|
||||
display: grid;
|
||||
grid-template-areas: "logo username metadata" "logo content content" "logo actions actions";
|
||||
grid-template-rows: 25px auto 35px;
|
||||
grid-template-columns: 90px auto 1fr;
|
||||
grid-gap: 10px 5px;
|
||||
|
||||
box-shadow: 0 2px 2px 0 rgba(0, 0, 0, .14), 0 3px 1px -2px rgba(0, 0, 0, .2), 0 1px 5px 0 rgba(0, 0, 0, .12);
|
||||
background-color: rgb(255, 255, 255);
|
||||
padding: 3px 10px;
|
||||
border-radius: 10px;
|
||||
/*min-height: 100px;*/
|
||||
}
|
||||
|
||||
.user-post-item:hover {
|
||||
background-color: rgb(245, 245, 245)
|
||||
}
|
||||
|
||||
.user-post-item .item-avatar-container {
|
||||
grid-area: logo;
|
||||
padding: 10px 0 10px 5px;
|
||||
}
|
||||
|
||||
.user-post-item .item-avatar {
|
||||
max-width: 100%;
|
||||
height: 75px;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.user-post-item .item-avatar-container .fa {
|
||||
margin-top: 5px;
|
||||
padding: 15px;
|
||||
font-size: 35px;
|
||||
color: #fff;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.user-post-item .item-avatar-container .fa.fa-check {
|
||||
background-color: #08DD73;
|
||||
}
|
||||
|
||||
.user-post-item .item-user {
|
||||
grid-area: username;
|
||||
margin: 5px 0 0 !important;
|
||||
font-size: 20px;
|
||||
}
|
||||
|
||||
.user-post-item .item-meta {
|
||||
grid-area: metadata;
|
||||
margin: 9px 10px 0 0;
|
||||
color: rgb(97, 97, 97);
|
||||
font-size: 16px;
|
||||
font-weight: 400;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
.user-post-item .item-content {
|
||||
grid-area: content;
|
||||
font-size: 18px;
|
||||
color: #777;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.user-post-item .item-actions {
|
||||
grid-area: actions;
|
||||
height: 35px;
|
||||
}
|
||||
|
||||
.user-post-item .item-actions .item-btn {
|
||||
display: inline-block;
|
||||
margin: 0 5px;
|
||||
padding: 5px 10px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.user-post-item .item-actions .item-btn:first-child {
|
||||
margin-left: -10px;
|
||||
}
|
||||
|
||||
.like-button-floating {
|
||||
position: fixed;
|
||||
-webkit-transform: translateX(-100%);
|
||||
|
||||
@@ -27,9 +27,9 @@ const toolbarOptions = [
|
||||
const editor = tinymce.init({
|
||||
selector: '#postContent',
|
||||
plugins: [
|
||||
'advlist autolink link image lists charmap print preview hr anchor pagebreak spellchecker',
|
||||
'searchreplace wordcount visualblocks visualchars code fullscreen insertdatetime media nonbreaking',
|
||||
'save table contextmenu directionality emoticons template paste textcolor'
|
||||
'advlist autolink link image lists charmap print preview hr anchor pagebreak spellchecker',
|
||||
'searchreplace wordcount visualblocks visualchars code fullscreen insertdatetime media nonbreaking',
|
||||
'save table contextmenu directionality emoticons template paste textcolor'
|
||||
],
|
||||
templates: '/admin/blog/getTemplates',
|
||||
toolbar: 'insertfile undo redo | styleselect | bold italic | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | link image | print preview media fullpage | forecolor backcolor emoticons'
|
||||
@@ -63,20 +63,19 @@ $(document).on("keydown", function (e) {
|
||||
// });
|
||||
// });
|
||||
|
||||
$('#postTitle').bind('click', function () {
|
||||
$(this).attr('contentEditable', true);
|
||||
}).blur(
|
||||
$('#postTitle')
|
||||
.bind('click', function () {
|
||||
$(this).attr('contentEditable', true);
|
||||
}).blur(
|
||||
function () {
|
||||
$(this).attr('contentEditable', false);
|
||||
}).on('keyup', function () {
|
||||
if (changeUrl) {
|
||||
var title = prepareString($('#postTitle').text());
|
||||
$('#postUrl').val(encodeURI(title));
|
||||
}
|
||||
});
|
||||
|
||||
$('#postTitle').on('keyup', function () {
|
||||
if (changeUrl) {
|
||||
var title = prepareString($('#postTitle').text());
|
||||
$('#postUrl').val(encodeURI(title));
|
||||
}
|
||||
});
|
||||
|
||||
$('#postDescription').bind('click', function () {
|
||||
$(this).attr('contentEditable', true);
|
||||
}).blur(
|
||||
@@ -89,7 +88,7 @@ $('#postCategory').bind('change', function () {
|
||||
});
|
||||
|
||||
function switchCategory() {
|
||||
if ($('#postCategory').val() === 'new-category') {
|
||||
if ($('#postCategory').val().includes('new-category')) {
|
||||
$('#new-category').fadeIn(250);
|
||||
} else {
|
||||
$('#new-category').fadeOut(250);
|
||||
@@ -175,11 +174,11 @@ const existingTags = new Bloodhound({
|
||||
queryTokenizer: Bloodhound.tokenizers.whitespace,
|
||||
// prefetch: {
|
||||
// url: '/admin/blog/tagsList',
|
||||
// filter: function (list) {
|
||||
// return $.map(list, function (cityname) {
|
||||
// return {name: cityname};
|
||||
// });
|
||||
// }
|
||||
// filter: function (list) {
|
||||
// return $.map(list, function (cityname) {
|
||||
// return {name: cityname};
|
||||
// });
|
||||
// }
|
||||
// }
|
||||
prefetch: {
|
||||
url: '/admin/blog/tagsList',
|
||||
@@ -236,13 +235,8 @@ $(function () {
|
||||
getPostTags();
|
||||
// getTranslations();
|
||||
|
||||
if ($('#contentID').val() !== '-1') {
|
||||
getContentData();
|
||||
}
|
||||
|
||||
if ($('#translationID').val() !== '-1') {
|
||||
getTranslationData();
|
||||
}
|
||||
if ($('#versionID').val() !== '-1')
|
||||
getVersionData();
|
||||
}
|
||||
|
||||
$('#postPublishDate').datetimepicker({
|
||||
@@ -291,66 +285,56 @@ function getPostData() {
|
||||
console.log(result);
|
||||
|
||||
if (result.status === 'success') {
|
||||
$('#postUrl').val(result.postData.postUrl);
|
||||
$('#postCategory').val(result.postData.postCategoryID);
|
||||
const categoryIDs = result.postData.categories.map(item => item.ID);
|
||||
$('#postCategory').val(categoryIDs);
|
||||
switchCategory();
|
||||
|
||||
$('#postPublishDate').data('DateTimePicker').setValue(convertDate(result.postData.postPublishDate));
|
||||
// $('#postPublishDate').val(convertDate(result.postData.postPublishDate));
|
||||
$('#uploadedImage').val(result.postData.postImage);
|
||||
$('.img-container').css('background-image', 'url(' + result.postData.postImage + ')');
|
||||
$('#uploadedImage').val(result.postData.image);
|
||||
$('.img-container').css('background-image', 'url(' + result.postData.image + ')');
|
||||
$('#postPublishDate').data('DateTimePicker').setValue(convertDate(result.postData.initialRelease));
|
||||
}
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
if (result.postData.postState === "1") {
|
||||
$('#postUrl').attr('disabled', '');
|
||||
changeUrl = false;
|
||||
$('#postUrl').keydown((e) => {
|
||||
e.preventDefault();
|
||||
|
||||
function getVersionData() {
|
||||
const postID = $('#postID').val();
|
||||
const versionID = $('#versionID').val();
|
||||
const lang = $('#postLanguage').val();
|
||||
|
||||
$.ajax({
|
||||
url: '/admin/blog/getVersion',
|
||||
method: 'post',
|
||||
data: {
|
||||
postID, versionID, lang,
|
||||
},
|
||||
success: (result) => {
|
||||
console.log(result);
|
||||
if (result.status === 'success') {
|
||||
$('#postTitle').text(result.title);
|
||||
$('#postDescription').text(result.description);
|
||||
|
||||
console.log(tinyMCE.get('postContent'));
|
||||
if (typeof (tinymce.activeEditor.contentDocument) !== 'undefined') {
|
||||
tinyMCE.on('addeditor', (e) => {
|
||||
const editor = e.editor;
|
||||
if (editor.id === 'postContent') {
|
||||
editor.setContent(result.content);
|
||||
console.log(e);
|
||||
}
|
||||
});
|
||||
} else {
|
||||
// tinyMCE.activeEditor.setContent(result.content);
|
||||
$('#postContent').val(result.content);
|
||||
}
|
||||
}
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
function getContentData() {
|
||||
const postID = $('#postID').val();
|
||||
const contentID = $('#contentID').val();
|
||||
const lang = $('#postLanguage').val();
|
||||
$.ajax({
|
||||
url: '/admin/blog/getContent',
|
||||
method: 'post',
|
||||
data: {
|
||||
postID, contentID, lang
|
||||
$('#postUrl').val(result.url);
|
||||
$('#versionID').val('-1');
|
||||
}
|
||||
},
|
||||
success: (result) => {
|
||||
console.log(result);
|
||||
if (result.status === 'success') {
|
||||
quill.clipboard.dangerouslyPasteHTML(result.contentData.content);
|
||||
// $('#contentID').val('-1');
|
||||
}
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
function getTranslationData() {
|
||||
const postID = $('#postID').val();
|
||||
const translationID = $('#translationID').val();
|
||||
const lang = $('#postLanguage').val();
|
||||
$.ajax({
|
||||
url: '/admin/blog/getTranslationData',
|
||||
method: 'post',
|
||||
data: {
|
||||
postID, translationID, lang
|
||||
},
|
||||
success: (result) => {
|
||||
console.log(result);
|
||||
|
||||
if (result.status === 'success') {
|
||||
$('#postTitle').text(result.translationData.postTitle);
|
||||
$('#postDescription').text(result.translationData.postDesc);
|
||||
}
|
||||
}
|
||||
})
|
||||
error: console.log
|
||||
});
|
||||
}
|
||||
|
||||
function getPostTags() {
|
||||
@@ -377,54 +361,57 @@ $(function () {
|
||||
$('#switchLanguages > li').click(function () {
|
||||
const currentPostTitle = $('#postTitle').text();
|
||||
const currentPostDescription = $('#postDescription').text();
|
||||
const currentPostContent = quill.getContents();
|
||||
const currentContentID = $('#contentID').val();
|
||||
const currentTranslationID = $('#translationID').val();
|
||||
// const currentPostContent = quill.getContents();
|
||||
const currentPostContent = tinymce.get('postContent').getContent();
|
||||
const currentPostUrl = $('#postUrl').val();
|
||||
const currentVersionID = $('#versionID').val();
|
||||
|
||||
$('#switchLanguages > li.active').data('title', currentPostTitle)
|
||||
$('#switchLanguages > li.active')
|
||||
.data('title', currentPostTitle)
|
||||
.data('description', currentPostDescription)
|
||||
.data('content', currentPostContent)
|
||||
.data('contentid', currentContentID)
|
||||
.data('translationid', currentTranslationID)
|
||||
.data('url', currentPostUrl)
|
||||
.data('versionid', currentVersionID)
|
||||
.removeClass('active');
|
||||
|
||||
console.log($(this));
|
||||
|
||||
const versionID = $(this).data('versionid');
|
||||
|
||||
$('#versionID').val(versionID);
|
||||
$('#postLanguage').val($(this).data('lang'));
|
||||
|
||||
if ($(this).data('title')) {
|
||||
const postTitle = $(this).data('title');
|
||||
const postDescription = $(this).data('description');
|
||||
const postContent = $(this).data('content');
|
||||
const postUrl = $(this).data('url');
|
||||
|
||||
$('#postTitle').text(postTitle);
|
||||
$('#postDescription').text(postDescription);
|
||||
quill.setContents(postContent);
|
||||
// quill.setContents(postContent);
|
||||
tinymce.get('postContent').setContent(postContent);
|
||||
$('#postUrl').val(postUrl);
|
||||
} else {
|
||||
getVersionData();
|
||||
}
|
||||
|
||||
const contentID = $(this).data('contentid');
|
||||
const translationID = $(this).data('translationid');
|
||||
|
||||
$('#contentID').val(contentID);
|
||||
$('#translationID').val(translationID);
|
||||
$('#postLanguage').val($(this).data('lang'));
|
||||
|
||||
getTranslationData();
|
||||
getContentData();
|
||||
|
||||
$(this).addClass('active');
|
||||
});
|
||||
});
|
||||
|
||||
function sendPost(executionFinished) {
|
||||
const postID = $('#postID').val(),
|
||||
contentID = $('#contentID').val(),
|
||||
translationID = $('#translationID').val(),
|
||||
versionID = $('#versionID').val(),
|
||||
postImage = $('#uploadedImage').val(),
|
||||
postTitle = $('#postTitle').text(),
|
||||
postDescription = $('#postDescription').text(),
|
||||
postContent = $('.ql-editor').html(),
|
||||
postContent = tinyMCE.activeEditor.getContent(),
|
||||
postPublishDate = $('#postPublishDate').val(),
|
||||
postUrl = $('#postUrl').val(),
|
||||
postCategory = $('#postCategory').val(),
|
||||
postCategories = $('#postCategory').val(),
|
||||
newCategoryName = $('#cat-name').val(),
|
||||
newCategoryDisplayName = $('#cat-dname').val(),
|
||||
postLanguage = $('#postLanguage').val(),
|
||||
postTags = $('#postTags').tagsinput('items');
|
||||
|
||||
@@ -433,29 +420,47 @@ function sendPost(executionFinished) {
|
||||
method: 'post',
|
||||
data: {
|
||||
postID,
|
||||
contentID,
|
||||
translationID,
|
||||
versionID,
|
||||
postImage,
|
||||
postTitle,
|
||||
postDescription,
|
||||
postContent,
|
||||
postPublishDate,
|
||||
postUrl,
|
||||
postCategory,
|
||||
postCategories,
|
||||
newCategoryName,
|
||||
newCategoryDisplayName,
|
||||
postLanguage,
|
||||
postTags
|
||||
},
|
||||
success: (result) => {
|
||||
console.log(result);
|
||||
|
||||
const newCategory = postCategories.includes('new-category');
|
||||
|
||||
if (result.success) {
|
||||
$('#postID').val(result.postID);
|
||||
$('#contentID').val(result.contentID);
|
||||
$('#switchLanguages > li.active').data('contentid', result.contentID);
|
||||
$('#translationID').val(result.translationID);
|
||||
$('#switchLanguages > li.active').data('translationid', result.translationID);
|
||||
$('#versionID').val(result.versionID);
|
||||
$('#switchLanguages > li.active').data('versionid', result.versionID);
|
||||
|
||||
$('.snackbar-container').append(`<div class="alert alert-success snackbar" role="alert">${result.message}</div>`);
|
||||
|
||||
if(newCategory) {
|
||||
if(!!result.newCategoryID) {
|
||||
let categories = postCategories;
|
||||
categories.splice(categories.indexOf('new-category'), 1);
|
||||
categories.push(result.newCategoryID.toString());
|
||||
|
||||
$('#postCategory').append(`<option value="${result.newCategoryID}">${newCategoryDisplayName}</option>`);
|
||||
setTimeout(() => {
|
||||
$('#postCategory').val(categories);
|
||||
}, 250);
|
||||
$('#cat-name').val('');
|
||||
$('#cat-dname').val('');
|
||||
} else {
|
||||
$('.snackbar-container').append('<div class="alert alert-warning snackbar" role="alert">Die neue Kategorie konnte nicht erstellt werden.</div>');
|
||||
}
|
||||
}
|
||||
} else {
|
||||
$('.snackbar-container').append(`<div class="alert alert-danger snackbar" role="alert">${result.message}</div>`);
|
||||
}
|
||||
@@ -469,17 +474,17 @@ function sendPost(executionFinished) {
|
||||
|
||||
function publishPost() {
|
||||
const postID = $('#postID').val(),
|
||||
contentID = $('#contentID').val(),
|
||||
contentDE = $('#switchLanguages').find('> li[data-lang=de]').data('contentid'),
|
||||
contentEN = $('#switchLanguages').find('> li[data-lang=en]').data('contentid'),
|
||||
contentFR = $('#switchLanguages').find('> li[data-lang=fr]').data('contentid');
|
||||
versionID = $('#versionID').val(),
|
||||
versionDE = $('#switchLanguages').find('> li[data-lang=de]').data('versionid'),
|
||||
versionEN = $('#switchLanguages').find('> li[data-lang=en]').data('versionid'),
|
||||
versionFR = $('#switchLanguages').find('> li[data-lang=fr]').data('versionid');
|
||||
|
||||
$.ajax({
|
||||
url: '/admin/blog/publishPost',
|
||||
method: 'post',
|
||||
data: {
|
||||
postID, contentID,
|
||||
contentIDs: {'de': contentDE, 'en': contentEN, 'fr': contentFR}
|
||||
postID, versionID,
|
||||
versionIDs: {'de': versionDE, 'en': versionEN, 'fr': versionFR}
|
||||
},
|
||||
success: (result) => {
|
||||
console.log(result);
|
||||
|
||||
39
assets/js/blog-history.js
Normal file
39
assets/js/blog-history.js
Normal file
@@ -0,0 +1,39 @@
|
||||
let compareItems = [];
|
||||
|
||||
$('.history-compare').on('click', function () {
|
||||
const hashID = $(this).data('hashid');
|
||||
if(compareItems.includes(this)) {
|
||||
compareItems.splice(compareItems.indexOf(this));
|
||||
|
||||
if(compareItems.length === 0) {
|
||||
$('.history-compare').text('Vergleichen mit ...');
|
||||
} else {
|
||||
$(this).text('Zum Vergleich hinzufügen');
|
||||
}
|
||||
} else {
|
||||
if(compareItems.length === 0) {
|
||||
$('.history-compare').text('Zum Vergleich hinzufügen');
|
||||
} else {
|
||||
|
||||
}
|
||||
compareItems.push(this);
|
||||
$(this).text('Vom Vergleich entfernen');
|
||||
}
|
||||
updateCompareItemsView();
|
||||
});
|
||||
|
||||
function updateCompareItemsView() {
|
||||
$('.compare-items').empty();
|
||||
compareItems.forEach(item => {
|
||||
$('.compare-items').append(`<span class="badge badge-primary">${item.dataset.hashid.substring(0, 6)}</span>`);
|
||||
});
|
||||
|
||||
if(compareItems.length >= 2) {
|
||||
const url = window.location.pathname + '/compare/' + compareItems[0].dataset.hashid + '/' + compareItems[1].dataset.hashid;
|
||||
$('.compare-btn').attr('disabled', false)
|
||||
.attr('href', url);
|
||||
} else {
|
||||
$('.compare-btn').attr('disabled', true)
|
||||
.attr('href', '#');
|
||||
}
|
||||
}
|
||||
@@ -38,26 +38,39 @@ var addComment = function () {
|
||||
comment: comment
|
||||
},
|
||||
beforeSend: function () {
|
||||
var date = new Date();
|
||||
date = date.getDate() + '.' + date.getMonth() + '.' + date.getYear() + ' ' + date.getHours() + ':' + date.getMinutes() + ' Uhr';
|
||||
item = $(`
|
||||
<li>
|
||||
<div class="well comment-well">
|
||||
<div class="d-inline-block mr-2">
|
||||
<div class="image-placeholder">
|
||||
<div class="user-post-item">
|
||||
<div class="item-avatar-container">
|
||||
<div class="loadingSpinner"></div>
|
||||
</div>
|
||||
<h3 class="item-user">
|
||||
<a href="#">
|
||||
Du
|
||||
</a>
|
||||
</h3>
|
||||
<h4 class="item-meta">
|
||||
jetzt gerade
|
||||
</h4>
|
||||
<p class="item-content">
|
||||
${comment}
|
||||
</p>
|
||||
<div class="item-actions">
|
||||
<a href="#" class="item-btn" data-toggle="tooltip" data-placement="top" title="Antworten">
|
||||
<i class="far fa-comment"></i>
|
||||
<span>0</span>
|
||||
</a>
|
||||
<a href="#" class="item-btn" data-toggle="tooltip" data-placement="top" title="Gefällt mir">
|
||||
<i class="far fa-heart"></i>
|
||||
<span>0</span>
|
||||
</a>
|
||||
<div class="item-btn dropdown">
|
||||
<a href="#" class="" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
|
||||
<i class="fa fa-ellipsis-h"></i>
|
||||
</a>
|
||||
<div class="dropdown-menu"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="d-inline-block mr-2">
|
||||
<h3>
|
||||
<small>
|
||||
von Dir / ${date}
|
||||
</small>
|
||||
</h3>
|
||||
<p class="comment">${comment}</p>
|
||||
</div>
|
||||
<div class="loading-container d-inline-block">
|
||||
<i class="fa fa-cog fa-spin"></i>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
`);
|
||||
@@ -67,27 +80,57 @@ var addComment = function () {
|
||||
$('#addComment').attr('disabled', '');
|
||||
},
|
||||
success: function (data) {
|
||||
if (data.type === 'success') {
|
||||
console.log(data);
|
||||
if (data.success) {
|
||||
$('#commentField').val('');
|
||||
$('#notice-container').html('<div class="alert alert-success" role="alert">Dein Kommentar wurde <b>erfolgreich</b> gesendet!</div>');
|
||||
$('.loading-container', item).css('background-color', '#28b62c');
|
||||
$('.loading-container i', item)
|
||||
.removeClass('fa-cog').removeClass('fa-spin')
|
||||
.addClass('fa-check').css('color', '#fff');
|
||||
$('.content h3 small', item).hide()
|
||||
.html(`von <a href="/user/${data.content.username}" target="_blank">${data.content.displayname}</a> / ${data.content.date}`).fadeIn();
|
||||
$('.loading-container', item).delay(2000).fadeOut(2000);
|
||||
$('.comment-well', item).prepend(`<img src="${data.content.profilePic}" style="display:none">`);
|
||||
$('.comment-well img', item).fadeIn(2000);
|
||||
$('.image-placeholder', item).remove();
|
||||
wait(8000);
|
||||
$('.content', item).removeClass('small');
|
||||
$('.comment-count').text(parseInt($('.comment-count').text()) + 1);
|
||||
} else {
|
||||
|
||||
addSnackbar('success', 'Dein Kommentar wurde erfolgreich veröffentlicht!');
|
||||
|
||||
item
|
||||
.find('.item-avatar').attr('src', data.content.profilePicture).attr('alt', data.content.username)
|
||||
.find('.item-user a').attr('href', data.content.profileUrl).text(data.content.displayname);
|
||||
|
||||
item.find('.item-avatar-container .loadingSpinner').fadeOut();
|
||||
|
||||
setTimeout(() => {
|
||||
item.find('.item-avatar-container .loadingSpinner').remove();
|
||||
item.find('.item-avatar-container')
|
||||
.addClass('text-center')
|
||||
.append('<i class="fa fa-check" style="display:none"></i>')
|
||||
.find('.fa').fadeIn();
|
||||
}, 500);
|
||||
|
||||
setTimeout(() => {
|
||||
item.find('.item-avatar-container .fa').fadeOut();
|
||||
}, 1500);
|
||||
|
||||
setTimeout(() => {
|
||||
item.find('.item-avatar-container')
|
||||
.empty()
|
||||
.removeClass('text-center')
|
||||
.append(`<img src="${data.content.profilePicture}" class="item-avatar" style="display:none">`)
|
||||
.find('img').fadeIn();
|
||||
}, 2000);
|
||||
|
||||
// $('.loading-container', item).css('background-color', '#28b62c');
|
||||
// $('.loading-container i', item)
|
||||
// .removeClass('fa-cog').removeClass('fa-spin')
|
||||
// .addClass('fa-check').css('color', '#fff');
|
||||
// $('.content h3 small', item).hide()
|
||||
// .html(`von <a href="/user/${data.content.username}" target="_blank">${data.content.displayname}</a> / ${data.content.date}`).fadeIn();
|
||||
// $('.loading-container', item).delay(2000).fadeOut(2000);
|
||||
// $('.comment-well', item).prepend(`<img src="${data.content.profilePic}" style="display:none">`);
|
||||
// $('.comment-well img', item).fadeIn(2000);
|
||||
// $('.image-placeholder', item).remove();
|
||||
// wait(8000);
|
||||
// $('.content', item).removeClass('small');
|
||||
// $('.comment-count').text(parseInt($('.comment-count').text()) + 1);
|
||||
} else {
|
||||
addSnackbar('danger', data.message);
|
||||
}
|
||||
},
|
||||
error: function (data) {
|
||||
console.log(data);
|
||||
$('#notice-container').html('<div class="alert alert-danger" role="alert"><b>Error:</b> Comment couldn\'t be sent caused by an unkown error! Please try again later or contact the admin to get help!</div>');
|
||||
$('div.loading-container', item).css('background-color', '#ff4136');
|
||||
$('div.loading-container i', item).removeClass('fa-cog').removeClass('fa-spin').addClass('fa-exclamation').css("color", '#fff');
|
||||
|
||||
92
assets/js/comment-item.js
Normal file
92
assets/js/comment-item.js
Normal file
@@ -0,0 +1,92 @@
|
||||
function openCommentReportModal(ID) {
|
||||
openAsyncModal(
|
||||
'/blog/getReportModal',
|
||||
'Kommentar melden',
|
||||
{ID},
|
||||
() => {
|
||||
$('#commentReportForm').on('submit', function(event) {
|
||||
event.preventDefault();
|
||||
|
||||
const reason = $('#commentReportReason').val();
|
||||
const text = $('#commentReportText').val();
|
||||
|
||||
reportComment(ID, reason, text);
|
||||
});
|
||||
},
|
||||
'commentReportModal'
|
||||
);
|
||||
}
|
||||
|
||||
function reportComment(ID, reason, text) {
|
||||
const modal = $('#commentReportModal');
|
||||
|
||||
$.ajax({
|
||||
url: '/blog/reportComment',
|
||||
data: {
|
||||
ID, reason, text
|
||||
},
|
||||
method: 'POST',
|
||||
success: (result) => {
|
||||
console.log(result);
|
||||
|
||||
modal.modal('hide');
|
||||
|
||||
if(result.success) {
|
||||
addSnackbar('success', result.message);
|
||||
} else {
|
||||
addSnackbar('danger', result.message);
|
||||
}
|
||||
},
|
||||
error: (result) => {
|
||||
console.log(result);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
function openCommentDeleteModal(ID) {
|
||||
openAsyncModal(
|
||||
'/blog/getDeleteModal',
|
||||
'Kommentar löschen',
|
||||
{ID},
|
||||
() => {
|
||||
console.log('tetst');
|
||||
},
|
||||
'commentDeleteModal',
|
||||
'lg'
|
||||
)
|
||||
}
|
||||
|
||||
function deleteComment(ID) {
|
||||
const modal = $('#commentDeleteModal');
|
||||
|
||||
modal.find('.modal-body').empty().append('<div class="loadingSpinner"></div>');
|
||||
|
||||
$.ajax({
|
||||
url: '/blog/deleteComment',
|
||||
data: {
|
||||
ID
|
||||
},
|
||||
method: 'POST',
|
||||
success: (result) => {
|
||||
modal.modal('hide');
|
||||
console.log(result);
|
||||
if(result.success) {
|
||||
addSnackbar('success', result.message);
|
||||
$('#comment-' + ID).slideUp();
|
||||
|
||||
let commentCount = $('.comment-count').text();
|
||||
if(commentCount !== '') {
|
||||
commentCount = parseInt(commentCount) - 1;
|
||||
$('.comment-count').text(commentCount);
|
||||
}
|
||||
|
||||
setTimeout(() => {
|
||||
$('#comment-' + ID).remove();
|
||||
}, 500)
|
||||
} else {
|
||||
addSnackbar('danger', result.message);
|
||||
}
|
||||
},
|
||||
error: console.log
|
||||
});
|
||||
}
|
||||
@@ -230,7 +230,7 @@ function closeSearch() {
|
||||
function executeSearch() {
|
||||
const search = $('.navbar-search input').val().trim();
|
||||
|
||||
if(search.length < 3) {
|
||||
if (search.length < 3) {
|
||||
addSnackbar('warning', 'Bitte gib mindestens 3 Buchstaben als Suchbegriff an.');
|
||||
return;
|
||||
}
|
||||
@@ -455,4 +455,55 @@ function addSnackbar(type, text) {
|
||||
setTimeout(() => {
|
||||
snackbar.remove();
|
||||
}, 5500);
|
||||
}
|
||||
|
||||
function openAsyncModal(url, title, data, finished, id, size = 'default') {
|
||||
const modal = $(`
|
||||
<div class="modal fade" id="${id}" tabindex="-1" role="dialog">
|
||||
<div class="modal-dialog ${size !== 'default' ? 'modal-' + size : ''} modal-dialog-centered" role="document">
|
||||
<div class="modal-content">
|
||||
<div class="modal-header">
|
||||
<h4 class="modal-title">${title}</h4>
|
||||
<button type="button" class="close" data-dismiss="modal" aria-label="Schließen">
|
||||
<span>×</span>
|
||||
</button>
|
||||
</div>
|
||||
<div class="modal-body">
|
||||
<div class="loadingSpinner"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
`);
|
||||
$('body').append(modal);
|
||||
modal.modal('show');
|
||||
|
||||
$.ajax({
|
||||
url,
|
||||
data,
|
||||
method: 'POST',
|
||||
success: (result) => {
|
||||
console.log(result);
|
||||
modal.find('.modal-body').empty();
|
||||
if(result.success) {
|
||||
modal.find('.modal-title').text(result.title);
|
||||
modal.find('.modal-body').append(result.body);
|
||||
finished();
|
||||
} else {
|
||||
modal.modal('hide');
|
||||
addSnackbar('danger', result.message);
|
||||
}
|
||||
},
|
||||
error: (data) => {
|
||||
console.log(data);
|
||||
modal.modal('hide');
|
||||
addSnackbar('danger', '<b>Ein unbekannter Fehler ist aufgetreten.</b> Versuche, die Seite erneut zu laden, oder kontaktiere das Support-Team sollte der Fehler bestehen bleiben.');
|
||||
}
|
||||
});
|
||||
|
||||
modal.on('hidden.bs.modal', function() {
|
||||
$(this).remove();
|
||||
});
|
||||
|
||||
return modal;
|
||||
}
|
||||
@@ -372,10 +372,31 @@ function submitPost(content, replyTo) {
|
||||
resetPostForm();
|
||||
},
|
||||
success: function (data) {
|
||||
console.log(data);
|
||||
$('.loadingSpinner', body).remove();
|
||||
body.append(data);
|
||||
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.');
|
||||
}
|
||||
});
|
||||
}
|
||||
@@ -81,7 +81,8 @@ function registerPostEvents() {
|
||||
$('.post-item').click(function (e) {
|
||||
const target = e.target;
|
||||
|
||||
if(target.tagName !== 'BUTTON' && target.tagName !== 'INPUT' && target.tagName !== 'A' && target.tagName !== 'IMG' && target.tagName !== 'I' && !target.classList.contains('post-media')) {
|
||||
const forbiddenElements = ['BUTTON', 'A', 'INPUT', 'IMG', 'I', 'SPAN'];
|
||||
if(!forbiddenElements.includes(target.tagName) && !target.classList.contains('post-media')) {
|
||||
e.preventDefault();
|
||||
const uuid = $(this).data('uuid');
|
||||
const username = $(this).data('username');
|
||||
@@ -141,16 +142,9 @@ function addPostLike(el) {
|
||||
}
|
||||
} else {
|
||||
text.text(likeCount);
|
||||
$('body').append(`
|
||||
<div class="alert alert-warning snackbar" id="message-uuid-${uuid}" role="alert">
|
||||
${result.message}
|
||||
</div>
|
||||
`);
|
||||
addSnackbar('warning', result.message);
|
||||
icon.toggleClass('far').toggleClass('fas');
|
||||
icon.parent().toggleClass('active');
|
||||
setTimeout(() => {
|
||||
$('#message-uuid-' + uuid).remove();
|
||||
}, 6000);
|
||||
}
|
||||
pendingRequests.splice(pendingRequests.indexOf(uuid), 1);
|
||||
},
|
||||
@@ -215,7 +209,7 @@ function loadPostReportModal(uuid) {
|
||||
e.preventDefault();
|
||||
$('#postReportForm').slideUp();
|
||||
setTimeout(() => {
|
||||
$('#postReportBody').append('<i class="fa fa-cog fa-4x fa-spin text-center"></i>');
|
||||
$('#postReportBody').addClass('text-center').append('<i class="fa fa-cog fa-4x fa-spin"></i>');
|
||||
}, 200);
|
||||
submitReportForm(uuid, $('#postReportReason').val(), $('#postReportText').val());
|
||||
});
|
||||
@@ -225,11 +219,11 @@ function loadPostReportModal(uuid) {
|
||||
});
|
||||
}
|
||||
|
||||
function submitReportForm(postUuid, reportReason, reportText) {
|
||||
function submitReportForm(hashID, reportReason, reportText) {
|
||||
$.ajax({
|
||||
url: '/posts/reportPost',
|
||||
data: {
|
||||
uuid: postUuid,
|
||||
hashID,
|
||||
reason: reportReason,
|
||||
explanation: reportText
|
||||
},
|
||||
@@ -253,8 +247,8 @@ function submitReportForm(postUuid, reportReason, reportText) {
|
||||
setTimeout(() => {
|
||||
$('#postReportBody').find('.alert').slideDown();
|
||||
}, 1000);
|
||||
}
|
||||
})
|
||||
},
|
||||
});
|
||||
}
|
||||
|
||||
function openDeletePostModal(uuid) {
|
||||
@@ -278,52 +272,52 @@ function openDeletePostModal(uuid) {
|
||||
|
||||
$('#postDeleteModal').modal('show');
|
||||
$('#postDeleteModal').on('hidden.bs.modal', function () {
|
||||
$('#postDeleteModal').remove();
|
||||
$(this).remove();
|
||||
});
|
||||
|
||||
loadDeletePostModal(uuid);
|
||||
}
|
||||
|
||||
function loadDeletePostModal(uuid) {
|
||||
function loadDeletePostModal(hashID) {
|
||||
$.ajax({
|
||||
url: '/posts/getDeleteModal',
|
||||
data: {
|
||||
uuid
|
||||
hashID
|
||||
},
|
||||
method: 'post',
|
||||
success: data => {
|
||||
$('#postReportTitle').text(data.title);
|
||||
$('#postDeleteBody').removeClass('text-center').html(data.body);
|
||||
}
|
||||
},
|
||||
error: console.log
|
||||
});
|
||||
}
|
||||
|
||||
function deletePost(uuid) {
|
||||
function deletePost(hashID) {
|
||||
$.ajax({
|
||||
url: '/posts/deletePost',
|
||||
method: 'post',
|
||||
data: { uuid },
|
||||
data: { hashID },
|
||||
beforeSend: () => {
|
||||
$('#postDeleteBody').addClass('text-center').html('<i class="fa fa-cog fa-spin fa-4x"></i>');
|
||||
},
|
||||
success: data => {
|
||||
let timeout = 2000;
|
||||
if(data.success) {
|
||||
$('#postDeleteBody').html('<div class="alert alert-success" role="alert"></div>');
|
||||
addSnackbar('success', data.message);
|
||||
timeout = 0;
|
||||
} else {
|
||||
$('#postDeleteBody').html('<div class="alert alert-danger" role="alert"></div>');
|
||||
$('#postDeleteBody').html(`<div class="alert alert-danger" role="alert">${data.message}</div>`);
|
||||
}
|
||||
$('#postDeleteBody').removeClass('text-center').find('.alert').text(data.message);
|
||||
|
||||
setTimeout(() => {
|
||||
$('#postDeleteModal').modal('hide');
|
||||
$(`.post-item[data-uuid=${uuid}]`).slideUp();
|
||||
$(`.post-item[data-uuid=${hashID}]`).slideUp();
|
||||
setTimeout(() => {
|
||||
$('#postDeleteModal').modal('dispose').remove();
|
||||
$(`.post-item[data-uuid=${uuid}]`).remove();
|
||||
$(`.post-item[data-uuid=${hashID}]`).remove();
|
||||
}, 500);
|
||||
}, 2000);
|
||||
}, timeout);
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
function addScrollListener() {
|
||||
}
|
||||
@@ -6,7 +6,7 @@ $("input").blur(function () {
|
||||
passwordError = false,
|
||||
passwordRepeatError = false;
|
||||
// Username
|
||||
if ($(this).attr('name') === "username") {
|
||||
if ($(this).attr('name') === "displayname") {
|
||||
if ($(this).val().length < 4) {
|
||||
$('#usernameErrorLength').addClass('active');
|
||||
usernameError = true;
|
||||
|
||||
Reference in New Issue
Block a user