var iconSmallThread = `Edit Delete I\'ve read the code of conduct '
}
}
function handleCommentSubmit(event) {
event.preventDefault();
var form = event.target;
form.classList.add('submitting');
var textarea = form.getElementsByClassName('comment-textarea')[0];
if (textarea) {
textarea.style.height = null;
textarea.blur();
}
var parentComment = document.getElementById("comment-node-" + event.target.dataset.commentId);
// as there can be multiple forms rendered in the comments, we need to use querySelector to find descendants
var commentParentId = form.querySelector("#comment_parent_id");
var body = JSON.stringify({
comment: {
body_markdown: form.getElementsByTagName("textarea")[0].value,
commentable_id: form.querySelector("#comment_commentable_id").value,
commentable_type: form.querySelector("#comment_commentable_type").value,
parent_id: commentParentId ? commentParentId.value : null,
}
});
getCsrfToken()
.then(sendFetch('comment-creation', body))
.then(function (response) {
if (response.status === 200) {
response.json().then(function (newComment) {
var newNode = document.createElement('div');
newNode.innerHTML = buildCommentHTML(newComment);
var docBody = document.body
var userData = JSON.parse(docBody.getAttribute('data-user'))
userData.checked_code_of_conduct = true;
docBody.dataset.user = JSON.stringify(userData);
var checkbox = form.getElementsByClassName('code-of-conduct')[0]
if (checkbox) {
checkbox.innerHTML = ""
}
var mainCommentsForm = document.getElementById("new_comment");
if (parentComment) {
handleFormClose(event);
if (newComment.depth > 3) {
var replyTrigger = parentComment.getElementsByClassName("toggle-reply-form")[0];
var threadIndicator = `${ iconSmallThread }Thread `;
replyTrigger.classList.replace("inline-flex", "hidden");
replyTrigger.parentNode.innerHTML += threadIndicator;
}
var actionsNode = parentComment.getElementsByClassName("comment__inner")[0];
actionsNode.parentNode.insertBefore(newNode, actionsNode.nextSibling);
}
else if (mainCommentsForm) {
var mainCommentsForm = document.getElementById("new_comment");
mainCommentsForm.classList.remove("submitting");
mainCommentsForm.classList.remove('preview-open');
const commentInputs = [...form.getElementsByClassName("comment-textarea")]
commentInputs[0].closest('.comment-form').classList.remove('comment-form--initiated');
// Clearing out all comment textboxes and resetting their height because
// there is an additional one generated by the comment
// mention auto-complete component
commentInputs.forEach(input => {
input.value = newComment.comment_template || "";
input.style.height = null;
});
const preview = document.getElementById("preview-div");
const togglePreview = document.querySelector('.preview-toggle');
preview.innerHTML = "";
togglePreview.innerHTML = "Preview";
const container = document.getElementById("comment-trees-container");
container.insertBefore(newNode, container.firstChild);
}
else if (document.getElementById("notifications-container")) {
var newDiv = document.createElement("span")
newDiv.innerHTML = ''
form.replaceWith(newDiv);
}
else {
window.location.replace(newComment.url)
}
updateCommentsCount();
initializeCommentsPage();
initializeCommentDate();
activateRunkitTags();
})
} else {
form.classList.remove('submitting');
showModalAfterError({
response,
element: 'comment',
action_ing: 'posting',
action_past: 'posted',
});
return false;
}
return false;
});
return false;
}
function handleFocus(event) {
handleButtonsActivation(event);
var userStatus = document.body.getAttribute('data-user-status');
var area = event.target;
if (userStatus == 'logged-out') {
event.preventDefault();
showLoginModal({ referring_source: 'comments', trigger: 'new_comment'});
area.blur();
} else {
var form = event.target.closest(".comment-form");
if (form) {
form.classList.add("comment-form--initiated");
}
handleSizeChange(event);
window.Forem.initializeEnhancedCommentTextArea(area);
}
}
function handleKeyUp(event) {
handleSizeChange(event);
handleButtonsActivation(event);
}
// Handler for when Ctrl+Enter OR Command+Enter is pressed
function handleSubmit(event) {
// Get user details and extract code of conduct & comment count
var user = userData();
if (!user) {
return;
}
var codeOfConduct = user.checked_code_of_conduct;
if (codeOfConduct && event.target.value.trim() !== '') {
event.target.closest('form').querySelector('button[type="submit"]').click();
}
}
var ENTER_KEY_CODE = 13;
function handleKeyDown(event) {
if (window.Forem.Runtime.hasOSSpecificModifier(event) && event.keyCode === ENTER_KEY_CODE) {
event.preventDefault();
handleSubmit(event);
}
}
function handleFormClose(event) {
event.target.closest('.inner-comment').classList.remove("replying");
event.target.closest('.comment-form').remove();
initializeCommentsPage();
}
function handleSizeChange(event) {
var textarea = event.target;
var oldHeight = parseInt(textarea.style.height.replace('px',''));
textarea.style.height = textarea.scrollHeight + (textarea.scrollHeight > oldHeight ? 15 : 0) + "px";
}
function handleButtonsActivation(event) {
var textarea = event.target;
var commentForm = textarea.closest('.comment-form');
if (commentForm) {
var buttons = textarea.closest('.comment-form').getElementsByClassName('js-btn-enable');
Array.from(buttons).forEach(function(button) {
button.disabled = textarea.value.length === 0;
});
};
}
function validateField(event) {
// We only need to validate the textarea that is not the comment mention auto-complete component
const textArea = event.target.form.querySelector('.comment-textarea:not([role=combobox])');
if (textArea.value === '') {
event.preventDefault();
return;
}
}
function handleChange(event) {
handleButtonsActivation(event);
}
function generateUploadFormdata(image) {
var token = document.querySelector("meta[name='csrf-token']").content;
var formData = new FormData();
formData.append('authenticity_token', token);
formData.append('image', image[0]);
return formData;
}
function updateItemSummaryHtml(item) {
var itemSummaryContent = item.getElementsByClassName("js-collapse-comment-content")[0];
var usernames = item.getElementsByClassName("js-comment-username");
var number = "";
if (usernames.length > 1) {
number = " + " + (usernames.length - 1) + " replies"
}
var itemUsername = usernames[0].textContent + number
if (item.open) {
itemSummaryContent.textContent = "";
} else {
itemSummaryContent.textContent = itemUsername;
}
}
function listenForDetailsToggle() {
var detailItems = document.querySelectorAll(".js-comment-wrapper");
for (var i = 0; i < detailItems.length; i++) {
detailItems[i].addEventListener("toggle", event => {
var item = event.target;
updateItemSummaryHtml(item);
});
}
}
/**
* Increment comment, stored in `.js-comments-count`, count by one.
*/
function updateCommentsCount() {
const commentsCountDiv = document.querySelector(".js-comments-count");
// if there's nowhere to put the count return early.
if(!commentsCountDiv) return;
const commentsCountData = parseInt(commentsCountDiv.dataset.commentsCount, 10) + 1;
commentsCountDiv.dataset.commentsCount = commentsCountData;
commentsCountDiv.innerHTML = `(${commentsCountData})`
const commentsSidebarCountDiv = document.getElementById("reaction-number-comment");
if (!commentsSidebarCountDiv) return;
commentsSidebarCountDiv.innerHTML = `${commentsCountData}`;
}
function initializeCommentDate() {
const commentsDates = document.querySelectorAll('.comment-date time');
if (commentsDates) {
addLocalizedDateTimeToElementsTitles(commentsDates, 'datetime');
}
}
function handleHiddenComments(commentableType){
const currentUser = userData();
const commentableAuthorIds = [];
let coAuthorIds = '';
if(commentableType === "Article"){
const articleContainer = document.querySelector('#article-show-container');
if(articleContainer){
if (articleContainer.dataset) {
commentableAuthorIds.push(articleContainer.dataset.authorId);
coAuthorIds = articleContainer.dataset.coAuthorIds;
if(coAuthorIds){
coAuthorIds.split(',').forEach(coAuthorId => {
commentableAuthorIds.push(coAuthorId);
});
}
}
}
else {
const commentsContainer = document.querySelector('#comments-container');
if(commentsContainer){
if(commentsContainer.dataset) {
commentableAuthorIds.push(commentsContainer.dataset.commentableAuthorId);
coAuthorIds = commentsContainer.dataset.commentableCoAuthorIds;
if(coAuthorIds){
coAuthorIds.split(',').forEach(coAuthorId => {
commentableAuthorIds.push(coAuthorId);
});
}
}
}
}
} else if(commentableType === "PodcastEpisode"){
const podCastEpisodeContainer = document.querySelector('.podcast-episode-container');
if(podCastEpisodeContainer){
commentableAuthorIds.push(podCastEpisodeContainer.dataset.creatorId);
}
}
if(currentUser && commentableAuthorIds.includes(currentUser.id.toString())){
collapseCommentsHiddenByCommentableUser();
}
else {
document.querySelectorAll('.element-hidden-by-commentable-user').forEach(element => {
element.classList.add('hidden');
})
document.querySelectorAll('.comment-hidden-by-author-text').forEach(element => {
element.classList.remove('hidden');
})
}
}
function collapseCommentsHiddenByCommentableUser() {
document.querySelectorAll(".js-comment-wrapper.details-comment-hidden-by-commentable-user").forEach(item => {
if (item.querySelectorAll('.comment-form').length === 0){
item.open = false;
updateItemSummaryHtml(item);
}
})
}