* Optional hiding child comments (start) * Changed confirm button in comments hide form * Hide children comments if hide_children was passed * Added a spec for hidden child comment notifications * Hide only explicitly hidden comments * Hide comment modal on article page * Prevent default behaviour for hide comment link * Improved hide comments modal looks * Improved hide comments modal looks * Removed unused code * Send hide comment form via fetch * Hide comment descendants when hide_children was passed * Don't hide hidden comments descendants on permalink * Removed unnecesary span * Improved hide comments modal styling * Removed unused styles and js, improved styling * Clickable label Co-authored-by: ludwiczakpawel <ludwiczakpawel@gmail.com> * Fixed showing hidden comments spoiler for article author * Fixed hideArticleComments.spec.js * Fixed displaying hidden comments text for artice author, added specs * Target hide comments modal inside the modal when adding a listener Co-authored-by: Suzanne Aitchison <suzanne@forem.com> * Replaced hide comment link with a button * Refactored adding hide_children url param Co-authored-by: Suzanne Aitchison <suzanne@forem.com> * Fixed cypress hide comments test * Removed aria-label for submit on the hide comments modal * Fixed formatting Co-authored-by: ludwiczakpawel <ludwiczakpawel@gmail.com> Co-authored-by: Suzanne Aitchison <suzanne@forem.com>
84 lines
2.2 KiB
JavaScript
84 lines
2.2 KiB
JavaScript
/* eslint-disable no-alert */
|
|
export function initHiddenComments() {
|
|
function unhide(commentId) {
|
|
fetch(`/comments/${commentId}/unhide`, {
|
|
method: 'PATCH',
|
|
headers: {
|
|
'X-CSRF-Token': window.csrfToken,
|
|
},
|
|
})
|
|
.then((response) => response.json())
|
|
.then((response) => {
|
|
if (response.hidden === 'false') {
|
|
/* eslint-disable-next-line no-restricted-globals */
|
|
location.reload();
|
|
}
|
|
});
|
|
}
|
|
|
|
function showHideCommentsModal(commentId) {
|
|
const form = document.getElementById('hide-comments-modal__form');
|
|
form.action = `/comments/${commentId}/hide`;
|
|
|
|
window.Forem.showModal({
|
|
title: 'Confirm hiding the comment',
|
|
contentSelector: '#hide-comments-modal',
|
|
overlay: true,
|
|
}).then(() => {
|
|
const hideCommentForm = document.querySelector(
|
|
'#window-modal .hide-comments-modal__form',
|
|
);
|
|
|
|
hideCommentForm.addEventListener('submit', handleHideCommentsFormSubmit);
|
|
});
|
|
}
|
|
|
|
const hideButtons = Array.from(
|
|
document.getElementsByClassName('hide-comment'),
|
|
);
|
|
|
|
hideButtons.forEach((butt) => {
|
|
const { commentId } = butt.dataset;
|
|
butt.addEventListener('click', (e) => {
|
|
e.preventDefault();
|
|
showHideCommentsModal(commentId);
|
|
});
|
|
});
|
|
|
|
const unhideLinks = Array.from(
|
|
document.getElementsByClassName('unhide-comment'),
|
|
);
|
|
|
|
unhideLinks.forEach((link) => {
|
|
const { commentId } = link.dataset;
|
|
link.addEventListener('click', (e) => {
|
|
e.preventDefault();
|
|
unhide(commentId);
|
|
});
|
|
});
|
|
|
|
const handleHideCommentsFormSubmit = (e) => {
|
|
e.preventDefault();
|
|
e.stopPropagation();
|
|
const { target: form } = e;
|
|
const hide_children_check = form.getElementsByClassName('hide_children')[0];
|
|
const url = `${form.action}${
|
|
hide_children_check.checked ? '?hide_children=1' : ''
|
|
}`;
|
|
|
|
fetch(url, {
|
|
method: 'PATCH',
|
|
headers: {
|
|
'X-CSRF-Token': window.csrfToken,
|
|
},
|
|
})
|
|
.then((response) => response.json())
|
|
.then((response) => {
|
|
if (response.hidden === 'true') {
|
|
/* eslint-disable-next-line no-restricted-globals */
|
|
location.reload();
|
|
}
|
|
});
|
|
};
|
|
}
|
|
/* eslint-enable no-alert */
|