124 lines
3.3 KiB
JavaScript
124 lines
3.3 KiB
JavaScript
function applyReactedClass(category) {
|
|
const upVote = document.querySelector("[data-category='thumbsup']");
|
|
const downVote = document.querySelector("[data-category='thumbsdown']");
|
|
const vomitVote = document.querySelector("[data-category='vomit']");
|
|
|
|
if (category === 'thumbsup') {
|
|
downVote.classList.remove('reacted');
|
|
vomitVote.classList.remove('reacted');
|
|
} else {
|
|
upVote.classList.remove('reacted');
|
|
}
|
|
}
|
|
|
|
async function updateMainReactions(reactableType, category, reactableId) {
|
|
const clickedBtn = document.querySelector(`[data-category="${category}"]`);
|
|
try {
|
|
const response = await fetch('/reactions', {
|
|
method: 'POST',
|
|
headers: {
|
|
Accept: 'application/json',
|
|
'X-CSRF-Token': window.csrfToken,
|
|
'Content-Type': 'application/json',
|
|
},
|
|
credentials: 'same-origin',
|
|
body: JSON.stringify({
|
|
reactable_type: reactableType,
|
|
category,
|
|
reactable_id: reactableId,
|
|
}),
|
|
});
|
|
|
|
const outcome = await response.json();
|
|
|
|
if (outcome.result === 'create') {
|
|
clickedBtn.classList.add('reacted');
|
|
} else if (outcome.result === 'destroy') {
|
|
clickedBtn.classList.remove('reacted');
|
|
} else {
|
|
// eslint-disable-next-line no-alert
|
|
alert(`Error: ${outcome.error}`);
|
|
// eslint-disable-next-line no-console
|
|
console.error(`Error: ${outcome.error}`);
|
|
}
|
|
} catch (error) {
|
|
// eslint-disable-next-line no-alert
|
|
alert(`Error: ${error}`);
|
|
}
|
|
}
|
|
|
|
// Experience-Level JS
|
|
function clearExpLevels() {
|
|
Array.from(
|
|
document.getElementsByClassName('level-rating-button selected'),
|
|
).forEach((el) => {
|
|
el.classList.remove('selected');
|
|
});
|
|
}
|
|
|
|
async function updateExperienceLevel(currentUserId, articleId, rating, group) {
|
|
try {
|
|
const response = await fetch('/rating_votes', {
|
|
method: 'POST',
|
|
headers: {
|
|
Accept: 'application/json',
|
|
'X-CSRF-Token': window.csrfToken,
|
|
'Content-Type': 'application/json',
|
|
},
|
|
credentials: 'same-origin',
|
|
body: JSON.stringify({
|
|
user_id: currentUserId,
|
|
article_id: articleId,
|
|
rating,
|
|
group,
|
|
}),
|
|
});
|
|
|
|
const outcome = await response.json();
|
|
|
|
if (outcome.result === 'Success') {
|
|
clearExpLevels();
|
|
document
|
|
.getElementById(`js__rating__vote__${rating}`)
|
|
.classList.add('selected');
|
|
} else {
|
|
// eslint-disable-next-line no-alert
|
|
alert(outcome.error);
|
|
}
|
|
} catch (error) {
|
|
// eslint-disable-next-line no-alert
|
|
alert(error);
|
|
}
|
|
}
|
|
|
|
document.querySelectorAll('.level-rating-button').forEach((btn) => {
|
|
btn.addEventListener('click', () => {
|
|
updateExperienceLevel(
|
|
btn.dataset.userId,
|
|
btn.dataset.articleId,
|
|
btn.value,
|
|
btn.dataset.group,
|
|
);
|
|
});
|
|
});
|
|
|
|
document
|
|
.querySelectorAll('.reaction-button, .reaction-vomit-button')
|
|
.forEach((btn) => {
|
|
btn.addEventListener('click', () => {
|
|
applyReactedClass(btn.dataset.category);
|
|
updateMainReactions(
|
|
btn.dataset.reactableType,
|
|
btn.dataset.category,
|
|
btn.dataset.reactableId,
|
|
);
|
|
});
|
|
});
|
|
|
|
const form = document.getElementsByClassName('button_to')[0];
|
|
form.addEventListener('submit', (e) => {
|
|
e.preventDefault();
|
|
if (confirm('Are you SURE you want to delete this comment?')) {
|
|
form.submit();
|
|
}
|
|
});
|