github-mirror/BookStack
2
0
Fork 0
mirror of https://github.com/BookStackApp/BookStack.git synced 2025-05-25 00:00:00 +08:00
Code Issues Actions 8 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';
}
}

36
resources/assets/js/global.js
View File

@ -87,12 +87,42 @@ Controllers(ngApp, window.$events);
//Global jQuery Config & Extensions
/**
* Scroll the view to a specific element.
* @param {HTMLElement} element
*/
window.scrollToElement = function(element) {
if (!element) return;
let top = element.getBoundingClientRect().top + document.body.scrollTop;
$('html, body').animate({
scrollTop: top - 60 // Adjust to change final scroll position top margin
}, 300);
};
/**
* Scroll and highlight an element.
* @param {HTMLElement} element
*/
window.scrollAndHighlight = function(element) {
if (!element) return;
window.scrollToElement(element);
let color = document.getElementById('custom-styles').getAttribute('data-color-light');
let initColor = window.getComputedStyle(element).getPropertyValue('background-color');
element.style.backgroundColor = color;
setTimeout(() => {
element.classList.add('selectFade');
element.style.backgroundColor = initColor;
}, 10);
setTimeout(() => {
element.classList.remove('selectFade');
element.style.backgroundColor = '';
}, 3000);
};
// Smooth scrolling
jQuery.fn.smoothScrollTo = function () {
if (this.length === 0) return;
$('html, body').animate({
scrollTop: this.offset().top - 60 // Adjust to change final scroll position top margin
}, 300); // Adjust to change animations speed (ms)
window.scrollToElement(this[0]);
return this;
};

13
resources/assets/js/pages/page-show.js
View File

@ -81,15 +81,7 @@ let setupPageShow = window.setupPageShow = function (pageId) {
let idElem = document.getElementById(text);
$('.page-content [data-highlighted]').attr('data-highlighted', '').css('background-color', '');
if (idElem !== null) {
let $idElem = $(idElem);
let color = $('#custom-styles').attr('data-color-light');
$idElem.css('background-color', color).attr('data-highlighted', 'true').smoothScrollTo();
setTimeout(() => {
$idElem.addClass('anim').addClass('selectFade').css('background-color', '');
setTimeout(() => {
$idElem.removeClass('selectFade');
}, 3000);
}, 100);
window.scrollAndHighlight(idElem);
} else {
$('.page-content').find(':contains("' + text + '")').smoothScrollTo();
}
@ -158,9 +150,6 @@ let setupPageShow = window.setupPageShow = function (pageId) {
unstickTree();
}
});
// in order to call from other places.
window.setupPageShow.goToText = goToText;
};
module.exports = setupPageShow;

1
resources/assets/js/translations.js
View File

@ -44,7 +44,6 @@ class Translator {
// Parse exact matches
let exactMatches = t.match(exactCountRegex);
console.log(exactMatches);
if (exactMatches !== null && Number(exactMatches[1]) === count) {
result = t.replace(exactCountRegex, '').trim();
break;