Made some changes to the comment system

Changed to be rendered server side along with page content.
Changed deletion to fully delete comments from the database.
Added 'local_id' to comments for referencing.
Updated reply system to be non-nested (Incomplete)
Made database comment format entity-agnostic to be more future proof.
Updated designs of comment sections.
This commit is contained in:
Dan Brown
2017-09-03 16:37:51 +01:00
parent e3f2bde26d
commit fea5630ea4
24 changed files with 478 additions and 731 deletions

View File

@ -10,6 +10,7 @@ let componentMapping = {
'entity-selector': require('./entity-selector'),
'sidebar': require('./sidebar'),
'page-picker': require('./page-picker'),
'page-comments': require('./page-comments'),
};
window.components = {};

View File

@ -0,0 +1,137 @@
const MarkdownIt = require("markdown-it");
const md = new MarkdownIt({ html: true });
class PageComments {
constructor(elem) {
this.elem = elem;
this.pageId = Number(elem.getAttribute('page-id'));
this.formContainer = elem.querySelector('[comment-form-container]');
this.form = this.formContainer.querySelector('form');
this.formInput = this.form.querySelector('textarea');
this.container = elem.querySelector('[comment-container]');
// TODO - Handle elem usage when no permissions
this.form.addEventListener('submit', this.saveComment.bind(this));
this.elem.addEventListener('click', this.handleAction.bind(this));
this.elem.addEventListener('submit', this.updateComment.bind(this));
this.editingComment = null;
}
handleAction(event) {
let actionElem = event.target.closest('[action]');
if (actionElem === null) return;
let action = actionElem.getAttribute('action');
if (action === 'edit') this.editComment(actionElem.closest('[comment]'));
if (action === 'closeUpdateForm') this.closeUpdateForm();
if (action === 'delete') this.deleteComment(actionElem.closest('[comment]'));
if (action === 'addComment') this.showForm();
if (action === 'hideForm') this.hideForm();
if (action === 'reply') this.setReply();
}
closeUpdateForm() {
if (!this.editingComment) return;
this.editingComment.querySelector('[comment-content]').style.display = 'block';
this.editingComment.querySelector('[comment-edit-container]').style.display = 'none';
}
editComment(commentElem) {
this.hideForm();
if (this.editingComment) this.closeUpdateForm();
commentElem.querySelector('[comment-content]').style.display = 'none';
commentElem.querySelector('[comment-edit-container]').style.display = 'block';
this.editingComment = commentElem;
}
updateComment(event) {
let form = event.target;
event.preventDefault();
let text = form.querySelector('textarea').value;
let reqData = {
text: text,
html: md.render(text),
// parent_id: this.parent_id TODO - Handle replies
};
// TODO - Loading indicator
let commentId = this.editingComment.getAttribute('comment');
window.$http.put(window.baseUrl(`/ajax/comment/${commentId}`), reqData).then(resp => {
let newComment = document.createElement('div');
newComment.innerHTML = resp.data;
this.editingComment.innerHTML = newComment.children[0].innerHTML;
window.$events.emit('success', window.trans('entities.comment_updated_success'));
this.closeUpdateForm();
this.editingComment = null;
});
}
deleteComment(commentElem) {
let id = commentElem.getAttribute('comment');
// TODO - Loading indicator
// TODO - Confirm dropdown
window.$http.delete(window.baseUrl(`/ajax/comment/${id}`)).then(resp => {
commentElem.parentNode.removeChild(commentElem);
window.$events.emit('success', window.trans('entities.comment_deleted_success'));
this.updateCount();
});
}
saveComment(event) {
event.preventDefault();
event.stopPropagation();
let text = this.formInput.value;
let reqData = {
text: text,
html: md.render(text),
// parent_id: this.parent_id TODO - Handle replies
};
// TODO - Loading indicator
window.$http.post(window.baseUrl(`/ajax/page/${this.pageId}/comment`), reqData).then(resp => {
let newComment = document.createElement('div');
newComment.innerHTML = resp.data;
this.container.appendChild(newComment.children[0]);
window.$events.emit('success', window.trans('entities.comment_created_success'));
this.resetForm();
this.updateCount();
});
}
updateCount() {
let count = this.container.children.length;
this.elem.querySelector('[comments-title]').textContent = window.trans_choice('entities.comment_count', count, {count});
}
resetForm() {
this.formInput.value = '';
this.formContainer.appendChild(this.form);
this.hideForm();
}
showForm() {
this.formContainer.style.display = 'block';
this.formContainer.parentNode.style.display = 'block';
this.elem.querySelector('[comment-add-button]').style.display = 'none';
this.formInput.focus(); // TODO - Scroll to input on focus
}
hideForm() {
this.formContainer.style.display = 'none';
this.formContainer.parentNode.style.display = 'none';
this.elem.querySelector('[comment-add-button]').style.display = 'block';
}
setReply() {
this.showForm();
}
}
// TODO - Go to comment if url param set
module.exports = PageComments;

View File

@ -73,6 +73,7 @@ let ngApp = angular.module('bookStack', ['ngResource', 'ngAnimate', 'ngSanitize'
const Translations = require("./translations");
let translator = new Translations(window.translations);
window.trans = translator.get.bind(translator);
window.trans_choice = translator.getPlural.bind(translator);
require("./vues/vues");

View File

@ -20,9 +20,64 @@ class Translator {
* @returns {*}
*/
get(key, replacements) {
let text = this.getTransText(key);
return this.performReplacements(text, replacements);
}
/**
* Get pluralised text, Dependant on the given count.
* Same format at laravel's 'trans_choice' helper.
* @param key
* @param count
* @param replacements
* @returns {*}
*/
getPlural(key, count, replacements) {
let text = this.getTransText(key);
let splitText = text.split('|');
let result = null;
let exactCountRegex = /^{([0-9]+)}/;
let rangeRegex = /^\[([0-9]+),([0-9*]+)]/;
for (let i = 0, len = splitText.length; i < len; i++) {
let t = splitText[i];
// Parse exact matches
let exactMatches = t.match(exactCountRegex);
console.log(exactMatches);
if (exactMatches !== null && Number(exactMatches[1]) === count) {
result = t.replace(exactCountRegex, '').trim();
break;
}
// Parse range matches
let rangeMatches = t.match(rangeRegex);
if (rangeMatches !== null) {
let rangeStart = Number(rangeMatches[1]);
if (rangeStart <= count && (rangeMatches[2] === '*' || Number(rangeMatches[2]) >= count)) {
result = t.replace(rangeRegex, '').trim();
break;
}
}
}
if (result === null && splitText.length > 1) {
result = (count === 1) ? splitText[0] : splitText[1];
}
if (result === null) result = splitText[0];
return this.performReplacements(result, replacements);
}
/**
* Fetched translation text from the store for the given key.
* @param key
* @returns {String|Object}
*/
getTransText(key) {
let splitKey = key.split('.');
let value = splitKey.reduce((a, b) => {
return a != undefined ? a[b] : a;
return a !== undefined ? a[b] : a;
}, this.store);
if (value === undefined) {
@ -30,16 +85,25 @@ class Translator {
value = key;
}
if (replacements === undefined) return value;
return value;
}
let replaceMatches = value.match(/:([\S]+)/g);
if (replaceMatches === null) return value;
/**
* Perform replacements on a string.
* @param {String} string
* @param {Object} replacements
* @returns {*}
*/
performReplacements(string, replacements) {
if (!replacements) return string;
let replaceMatches = string.match(/:([\S]+)/g);
if (replaceMatches === null) return string;
replaceMatches.forEach(match => {
let key = match.substring(1);
if (typeof replacements[key] === 'undefined') return;
value = value.replace(match, replacements[key]);
string = string.replace(match, replacements[key]);
});
return value;
return string;
}
}

View File

@ -1,113 +0,0 @@
const MarkdownIt = require("markdown-it");
const md = new MarkdownIt({ html: true });
var template = `
<div class="comment-editor" v-cloak>
<form novalidate>
<textarea name="markdown" rows="3" v-model="comment.text" :placeholder="trans('entities.comment_placeholder')"></textarea>
<input type="hidden" v-model="comment.pageId" name="comment.pageId" :value="pageId">
<button type="button" v-if="isReply || isEdit" class="button muted" v-on:click="closeBox">{{ trans('entities.comment_cancel') }}</button>
<button type="submit" class="button pos" v-on:click.prevent="saveComment">{{ trans('entities.comment_save') }}</button>
</form>
</div>
`;
const props = {
pageId: {},
commentObj: {},
isReply: {
default: false,
type: Boolean
}, isEdit: {
default: false,
type: Boolean
}
};
function data() {
let comment = {
text: ''
};
if (this.isReply) {
comment.page_id = this.commentObj.page_id;
comment.id = this.commentObj.id;
} else if (this.isEdit) {
comment = this.commentObj;
}
return {
comment: comment,
trans: trans
};
}
const methods = {
saveComment: function (event) {
let pageId = this.comment.page_id || this.pageId;
let commentText = this.comment.text;
if (!commentText) {
return this.$events.emit('error', trans('errors.empty_comment'))
}
let commentHTML = md.render(commentText);
let serviceUrl = `/ajax/page/${pageId}/comment/`;
let httpMethod = 'post';
let reqObj = {
text: commentText,
html: commentHTML
};
if (this.isEdit === true) {
// this will be set when editing the comment.
serviceUrl = `/ajax/page/${pageId}/comment/${this.comment.id}`;
httpMethod = 'put';
} else if (this.isReply === true) {
// if its reply, get the parent comment id
reqObj.parent_id = this.comment.id;
}
$http[httpMethod](window.baseUrl(serviceUrl), reqObj).then(resp => {
if (!isCommentOpSuccess(resp)) {
this.$events.emit('error', getErrorMsg(resp));
return;
}
// hide the comments first, and then retrigger the refresh
if (this.isEdit) {
this.$emit('comment-edited', event, resp.data.comment);
} else {
this.comment.text = '';
this.$emit('comment-added', event);
if (this.isReply === true) {
this.$emit('comment-replied', event, resp.data.comment);
} else {
this.$parent.$emit('new-comment', event, resp.data.comment);
}
}
this.$events.emit('success', resp.data.message);
}).catch(err => {
this.$events.emit('error', trans('errors.comment_add'))
});
},
closeBox: function (event) {
this.$emit('editor-removed', event);
}
};
const computed = {};
function isCommentOpSuccess(resp) {
if (resp && resp.data && resp.data.status === 'success') {
return true;
}
return false;
}
function getErrorMsg(response) {
if (response.data) {
return response.data.message;
} else {
return trans('errors.comment_add');
}
}
module.exports = { name: 'comment-reply', template, data, props, methods, computed };

View File

@ -1,174 +0,0 @@
const commentReply = require('./comment-reply');
const template = `
<div class="comment-box">
<div class='page-comment' :id="commentId">
<div class="user-image">
<img :src="comment.created_by.avatar_url" alt="user avatar">
</div>
<div class="comment-container">
<div class="comment-header">
<a :href="comment.created_by.profile_url">{{comment.created_by.name}}</a>
</div>
<div v-html="comment.html" v-if="comment.active" class="comment-body" v-bind:class="{ 'comment-inactive' : !comment.active }">
</div>
<div v-if="!comment.active" class="comment-body comment-inactive">
{{ trans('entities.comment_deleted') }}
</div>
<div class="comment-actions">
<ul>
<li v-if="(level < 4 && canComment)">
<a href="#" comment="comment" v-on:click.prevent="replyComment">{{ trans('entities.comment_reply') }}</a>
</li>
<li v-if="canEditOrDelete('update')">
<a href="#" comment="comment" v-on:click.prevent="editComment">{{ trans('entities.comment_edit') }}</a>
</li>
<li v-if="canEditOrDelete('delete')">
<a href="#" comment="comment" v-on:click.prevent="deleteComment">{{ trans('entities.comment_delete') }}</a>
</li>
<li>{{ trans('entities.comment_create') }}
<a :title="comment.created.day_time_str" :href="commentHref">{{comment.created.diff}}</a>
</li>
<li v-if="comment.updated">
<span :title="comment.updated.day_time_str">{{trans('entities.comment_updated_text', { updateDiff: comment.updated.diff }) }}
<a :href="comment.updated_by.profile_url">{{comment.updated_by.name}}</a>
</span>
</li>
</ul>
</div>
<div v-if="showEditor">
<comment-reply :page-id="comment.page_id" :comment-obj="comment"
v-on:editor-removed.stop.prevent="hideComment"
v-on:comment-replied.stop="commentReplied(...arguments)"
v-on:comment-edited.stop="commentEdited(...arguments)"
v-on:comment-added.stop="commentAdded"
:is-reply="isReply" :is-edit="isEdit">
</comment-reply>
</div>
<comment v-for="(comment, index) in comments" :initial-comment="comment" :index="index"
:level="nextLevel" :key="comment.id" :permissions="permissions" :current-user-id="currentUserId"
v-on:comment-added.stop="commentAdded"></comment>
</div>
</div>
</div>
`;
const props = ['initialComment', 'index', 'level', 'permissions', 'currentUserId'];
function data() {
return {
trans: trans,
comments: [],
showEditor: false,
comment: this.initialComment,
nextLevel: this.level + 1
};
}
const methods = {
deleteComment: function () {
var resp = window.confirm(trans('entities.comment_delete_confirm'));
if (!resp) {
return;
}
this.$http.delete(window.baseUrl(`/ajax/comment/${this.comment.id}`)).then(resp => {
if (!isCommentOpSuccess(resp)) {
this.$events.emit('error', trans('error.comment_delete'));
return;
}
this.$events.emit('success', trans('entities.comment_deleted'));
this.comment = resp.data.comment;
}).catch(err => {
this.$events.emit('error', trans('error.comment_delete'));
});
},
replyComment: function () {
this.toggleEditor(false);
},
editComment: function () {
this.toggleEditor(true);
},
hideComment: function () {
this.showEditor = false;
},
toggleEditor: function (isEdit) {
this.showEditor = false;
this.isEdit = isEdit;
this.isReply = !isEdit;
this.showEditor = true;
},
commentReplied: function (event, comment) {
this.comments.push(comment);
this.showEditor = false;
},
commentEdited: function (event, comment) {
this.comment = comment;
this.showEditor = false;
},
commentAdded: function (event, comment) {
// this is to handle non-parent child relationship
// we want to make it go up.
this.$emit('comment-added', event);
},
canEditOrDelete: function (prop) {
if (!this.comment.active) {
return false;
}
if (!this.permissions) {
return false;
}
let propAll = 'comment_' + prop + '_all';
let propOwn = 'comment_' + prop + '_own';
if (this.permissions[propAll]) {
return true;
}
if (this.permissions[propOwn] && this.comment.created_by.id === this.currentUserId) {
return true;
}
return false;
},
canComment: function () {
if (!this.permissions) {
return false;
}
return this.permissions.comment_create === true;
}
};
const computed = {
commentId: function () {
return `comment-${this.comment.page_id}-${this.comment.id}`;
},
commentHref: function () {
return `#?cm=${this.commentId}`;
}
};
function mounted() {
if (this.comment.sub_comments && this.comment.sub_comments.length) {
// set this so that we can render the next set of sub comments.
this.comments = this.comment.sub_comments;
}
}
function isCommentOpSuccess(resp) {
if (resp && resp.data && resp.data.status === 'success') {
return true;
}
return false;
}
module.exports = {
name: 'comment',
template, data, props, methods, computed, mounted, components: {
commentReply
}
};

View File

@ -1,117 +0,0 @@
const comment = require('./components/comments/comment');
const commentReply = require('./components/comments/comment-reply');
let data = {
totalCommentsStr: trans('entities.comments_loading'),
comments: [],
permissions: null,
currentUserId: null,
trans: trans,
commentCount: 0
};
let methods = {
commentAdded: function () {
++this.totalComments;
}
}
let computed = {
totalComments: {
get: function () {
return this.commentCount;
},
set: function (value) {
this.commentCount = value;
if (value === 0) {
this.totalCommentsStr = trans('entities.no_comments');
} else if (value === 1) {
this.totalCommentsStr = trans('entities.one_comment');
} else {
this.totalCommentsStr = trans('entities.x_comments', {
numComments: value
});
}
}
},
canComment: function () {
if (!this.permissions) {
return false;
}
return this.permissions.comment_create === true;
}
}
function mounted() {
this.pageId = Number(this.$el.getAttribute('page-id'));
let linkedCommentId = getUrlParameter('cm');
this.$http.get(window.baseUrl(`/ajax/page/${this.pageId}/comments/`)).then(resp => {
if (!isCommentOpSuccess(resp)) {
// just show that no comments are available.
vm.totalComments = 0;
this.$events.emit('error', getErrorMsg(resp));
return;
}
this.comments = resp.data.comments;
this.totalComments = +resp.data.total;
this.permissions = resp.data.permissions;
this.currentUserId = resp.data.user_id;
if (!linkedCommentId) {
return;
}
// adding a setTimeout to give the comment list some time to render
// before focusing the comment.
setTimeout(function() {
focusLinkedComment(linkedCommentId);
});
}).catch(err => {
this.$events.emit('error', trans('errors.comment_list'));
});
}
function isCommentOpSuccess(resp) {
if (resp && resp.data && resp.data.status === 'success') {
return true;
}
return false;
}
function getErrorMsg(response) {
if (response.data) {
return response.data.message;
} else {
return trans('errors.comment_add');
}
}
function created() {
this.$on('new-comment', function (event, comment) {
this.comments.push(comment);
})
}
function beforeDestroy() {
this.$off('new-comment');
}
function getUrlParameter(name) {
name = name.replace(/[\[]/, '\\[').replace(/[\]]/, '\\]');
var regex = new RegExp('[\\?&]' + name + '=([^&#]*)');
var results = regex.exec(location.hash);
return results === null ? '' : decodeURIComponent(results[1].replace(/\+/g, ' '));
}
function focusLinkedComment(linkedCommentId) {
let comment = document.getElementById(linkedCommentId);
if (comment && comment.length !== 0) {
window.setupPageShow.goToText(linkedCommentId);
}
}
module.exports = {
data, methods, mounted, computed, components: {
comment, commentReply
},
created, beforeDestroy
};

View File

@ -11,7 +11,6 @@ let vueMapping = {
'image-manager': require('./image-manager'),
'tag-manager': require('./tag-manager'),
'attachment-manager': require('./attachment-manager'),
'page-comments': require('./page-comments')
};
window.vues = {};