|
// retoor <retoor@molodetz.nl>
|
|
|
|
import { OptimisticAction } from "./OptimisticAction.js";
|
|
|
|
export class ReactionBar extends OptimisticAction {
|
|
constructor() {
|
|
super();
|
|
document.addEventListener("click", (event) => this.onClick(event));
|
|
}
|
|
|
|
async onClick(event) {
|
|
const addButton = event.target.closest(".reaction-add-btn");
|
|
if (addButton) {
|
|
event.preventDefault();
|
|
this.togglePalette(addButton);
|
|
return;
|
|
}
|
|
const trigger = event.target.closest("[data-reaction-emoji]");
|
|
if (trigger && !trigger.disabled) {
|
|
event.preventDefault();
|
|
await this.react(trigger);
|
|
return;
|
|
}
|
|
this.closeAllPalettes();
|
|
}
|
|
|
|
togglePalette(addButton) {
|
|
const palette = addButton.parentElement.querySelector(".reaction-palette");
|
|
const isOpen = palette.hidden === false;
|
|
this.closeAllPalettes();
|
|
palette.hidden = isOpen;
|
|
if (!palette.hidden) {
|
|
this.clampToViewport(palette);
|
|
this.ensureInView(palette);
|
|
}
|
|
}
|
|
|
|
clampToViewport(palette) {
|
|
const margin = 8;
|
|
palette.style.left = "";
|
|
const rect = palette.getBoundingClientRect();
|
|
const overflowRight = rect.right - (window.innerWidth - margin);
|
|
if (overflowRight > 0) {
|
|
palette.style.left = `${-overflowRight}px`;
|
|
}
|
|
const adjusted = palette.getBoundingClientRect();
|
|
if (adjusted.left < margin) {
|
|
const current = parseFloat(palette.style.left || "0");
|
|
palette.style.left = `${current + (margin - adjusted.left)}px`;
|
|
}
|
|
}
|
|
|
|
ensureInView(palette) {
|
|
const margin = 8;
|
|
const rect = palette.getBoundingClientRect();
|
|
const extra = rect.height * 0.3;
|
|
if (rect.top < margin) {
|
|
window.scrollBy({ top: rect.top - margin - extra, behavior: "smooth" });
|
|
} else if (rect.bottom > window.innerHeight - margin) {
|
|
window.scrollBy({ top: rect.bottom - (window.innerHeight - margin) + extra, behavior: "smooth" });
|
|
}
|
|
}
|
|
|
|
closeAllPalettes() {
|
|
document.querySelectorAll(".reaction-palette").forEach((palette) => {
|
|
palette.hidden = true;
|
|
});
|
|
}
|
|
|
|
async react(trigger) {
|
|
const bar = trigger.closest(".reaction-bar");
|
|
if (!bar) {
|
|
return;
|
|
}
|
|
const type = bar.dataset.reactionType;
|
|
const uid = bar.dataset.reactionUid;
|
|
const emoji = trigger.dataset.reactionEmoji;
|
|
await this.submit(`/reactions/${type}/${uid}`, { emoji }, null, (result) => this.render(bar, result));
|
|
this.closeAllPalettes();
|
|
}
|
|
|
|
render(bar, result) {
|
|
const counts = result.counts || {};
|
|
const mine = new Set(result.mine || []);
|
|
bar.querySelectorAll(".reaction-list .reaction-chip").forEach((chip) => {
|
|
const emoji = chip.dataset.reactionEmoji;
|
|
const count = counts[emoji] || 0;
|
|
chip.querySelector(".reaction-count").textContent = count;
|
|
chip.hidden = count === 0 && !mine.has(emoji);
|
|
chip.classList.toggle("reacted", mine.has(emoji));
|
|
});
|
|
}
|
|
}
|