github-mirror/BookStack
2
0
Fork 0
mirror of https://github.com/BookStackApp/BookStack.git synced 2025-05-28 11:05:43 +08:00
Code Issues Actions 11 Packages Projects Releases Wiki Activity

Added comment reply and delete confirmation.

Browse Source 
Also fixed local_id bug
Added component helpers
Added global scroll & Highlight helpers
This commit is contained in:
Dan Brown
2017-09-09 15:56:24 +01:00
parent fea5630ea4
commit 41f56e659d
15 changed files with 158 additions and 69 deletions
Download Patch File Download Diff File Expand all files Collapse all files

40
resources/assets/js/components/index.js
View File

@ -16,18 +16,36 @@ let componentMapping = {
window.components = {};
let componentNames = Object.keys(componentMapping);
initAll();
for (let i = 0, len = componentNames.length; i < len; i++) {
let name = componentNames[i];
let elems = document.querySelectorAll(`[${name}]`);
if (elems.length === 0) continue;
/**
* Initialize components of the given name within the given element.
* @param {String} componentName
* @param {HTMLElement|Document} parentElement
*/
function initComponent(componentName, parentElement) {
let elems = parentElement.querySelectorAll(`[${componentName}]`);
if (elems.length === 0) return;
let component = componentMapping[name];
if (typeof window.components[name] === "undefined") window.components[name] = [];
let component = componentMapping[componentName];
if (typeof window.components[componentName] === "undefined") window.components[componentName] = [];
for (let j = 0, jLen = elems.length; j < jLen; j++) {
let instance = new component(elems[j]);
if (typeof elems[j].components === 'undefined') elems[j].components = {};
elems[j].components[name] = instance;
window.components[name].push(instance);
let instance = new component(elems[j]);
if (typeof elems[j].components === 'undefined') elems[j].components = {};
elems[j].components[componentName] = instance;
window.components[componentName].push(instance);
}
}
}
/**
* Initialize all components found within the given element.
* @param parentElement
*/
function initAll(parentElement) {
if (typeof parentElement === 'undefined') parentElement = document;
for (let i = 0, len = componentNames.length; i < len; i++) {
initComponent(componentNames[i], parentElement);
}
}
window.components.init = initAll;

38
resources/assets/js/components/page-comments.js
View File

@ -18,11 +18,18 @@ class PageComments {
this.elem.addEventListener('submit', this.updateComment.bind(this));
this.editingComment = null;
this.parentId = null;
}
handleAction(event) {
let actionElem = event.target.closest('[action]');
if (event.target.matches('a[href^="#"]')) {
let id = event.target.href.split('#')[1];
console.log(document.querySelector('#' + id));
window.scrollAndHighlight(document.querySelector('#' + id));
}
if (actionElem === null) return;
event.preventDefault();
let action = actionElem.getAttribute('action');
if (action === 'edit') this.editComment(actionElem.closest('[comment]'));
@ -30,7 +37,8 @@ class PageComments {
if (action === 'delete') this.deleteComment(actionElem.closest('[comment]'));
if (action === 'addComment') this.showForm();
if (action === 'hideForm') this.hideForm();
if (action === 'reply') this.setReply();
if (action === 'reply') this.setReply(actionElem.closest('[comment]'));
if (action === 'remove-reply-to') this.removeReplyTo();
}
closeUpdateForm() {
@ -54,7 +62,7 @@ class PageComments {
let reqData = {
text: text,
html: md.render(text),
// parent_id: this.parent_id TODO - Handle replies
parent_id: this.parentId || null,
};
// TODO - Loading indicator
let commentId = this.editingComment.getAttribute('comment');
@ -63,6 +71,7 @@ class PageComments {
newComment.innerHTML = resp.data;
this.editingComment.innerHTML = newComment.children[0].innerHTML;
window.$events.emit('success', window.trans('entities.comment_updated_success'));
window.components.init(this.editingComment);
this.closeUpdateForm();
this.editingComment = null;
});
@ -71,7 +80,6 @@ class PageComments {
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'));
@ -86,14 +94,15 @@ class PageComments {
let reqData = {
text: text,
html: md.render(text),
// parent_id: this.parent_id TODO - Handle replies
parent_id: this.parentId || null,
};
// 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]);
let newElem = newComment.children[0];
this.container.appendChild(newElem);
window.components.init(newElem);
window.$events.emit('success', window.trans('entities.comment_created_success'));
this.resetForm();
this.updateCount();
@ -109,13 +118,15 @@ class PageComments {
this.formInput.value = '';
this.formContainer.appendChild(this.form);
this.hideForm();
this.removeReplyTo();
}
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
this.formInput.focus();
window.scrollToElement(this.formInput);
}
hideForm() {
@ -124,9 +135,18 @@ class PageComments {
this.elem.querySelector('[comment-add-button]').style.display = 'block';
}
setReply() {
setReply(commentElem) {
this.showForm();
this.parentId = Number(commentElem.getAttribute('local-id'));
this.elem.querySelector('[comment-form-reply-to]').style.display = 'block';
let replyLink = this.elem.querySelector('[comment-form-reply-to] a');
replyLink.textContent = `#${this.parentId}`;
replyLink.href = `#comment${this.parentId}`;
}
removeReplyTo() {
this.parentId = null;
this.elem.querySelector('[comment-form-reply-to]').style.display = 'none';
}
}