website/web/static/js/likes.js
Noah Petherbridge 1c013aa8d8 Alert/Confirm Modals + Auto Revoke Certification Photo
* If a Certified member deletes the final picture from their gallery page, their
  Certification Photo will be automatically rejected and they are instructed to
  begin the process again from the beginning.
* Add nice Alert and Confirm modals around the website in place of the standard
  browser feature. Note: the inline confirm on submit buttons are still using
  the standard feature for now, as intercepting submit buttons named "intent"
  causes problems in getting the final form to submit.
2024-12-23 14:58:39 -08:00

64 lines
2.1 KiB
JavaScript

// Like button handler.
document.addEventListener('DOMContentLoaded', () => {
const red = "has-text-danger";
let busy = false;
// Bind to the like buttons.
(document.querySelectorAll(".nonshy-like-button") || []).forEach(node => {
node.addEventListener("click", (e) => {
e.preventDefault();
if (busy) return;
let $icon = node.querySelector(".icon"),
$label = node.querySelector(".nonshy-likes"),
tableName = node.dataset.tableName,
tableID = node.dataset.tableId,
liking = false;
// Toggle the color of the heart.
if ($icon.classList.contains(red)) {
$icon.classList.remove(red);
} else {
liking = true;
$icon.classList.add(red);
}
// Ajax request to backend.
busy = true;
return fetch("/v1/likes", {
method: "POST",
mode: "same-origin",
cache: "no-cache",
credentials: "same-origin",
headers: {
"Content-Type": "application/json",
},
body: JSON.stringify({
"name": tableName, // TODO
"id": ""+tableID,
"unlike": !liking,
"page": window.location.pathname + window.location.search + window.location.hash,
}),
})
.then((response) => response.json())
.then((data) => {
if (data.StatusCode !== 200) {
modalAlert({message: data.data.error});
return;
}
let likes = data.data.likes;
if (likes === 0) {
$label.innerHTML = "Like";
} else {
$label.innerHTML = `Like (${likes})`;
}
}).catch(resp => {
console.error("Like:", resp);
}).finally(() => {
busy = false;
})
});
});
});