docbrown/app/javascript/contentDisplayPolicy/initHiddenComments.js
Anna Buianova 4cab190285
Hiding comments: an option to hide or keep children (#15178)
* 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>
2021-11-18 11:57:40 +03:00

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 */