tim/autonomous.contact
1
0
Fork 0
forked from andyburke/autonomous.contact
Code Pull requests Activity

feature: reactions

Browse source
This commit is contained in:
Andy Burke 2025-10-15 17:50:48 -07:00
parent b8467ec870
commit 7046bb0389
11 changed files with 371 additions and 133 deletions
Download patch file Download diff file Expand all files Collapse all files

134
public/js/eventactions.js Normal file
View file

@ -0,0 +1,134 @@
const event_actions_popup_width = 100;
const event_actions_popup_height = 260;
const event_actions_popup_styling = `
#eventactionspopup {
position: fixed;
max-width: 90%;
overflow-x: auto;
z-index: 100;
background: inherit;
overflow: hidden;
border: 1px solid var(--border-normal);
padding: 0.5rem;
}
#eventactionspopup .icon.close {
float: right;
margin: 0.1rem;
}
#eventactionspopup button.event-action {
display: block;
cursor: pointer;
width: 3rem;
height: 3rem;
vertical-align: top;
margin: 0.5rem;
}
#eventactionspopup button .action-name {
display: block;
margin-top: 0.33rem;
text-transform: uppercase;
font-size: xx-small;
}
`;
let event_actions_popup;
let event_actions_popup_form;
let event_actions_popup_search_input;
let event_actions_popup_parent_id_input;
let event_actions_popup_emojis_list;
let event_actions_popup_reaction_input;
function open_event_actions_popup(event) {
const event_id = event.target?.closest("[data-event_id]")?.dataset?.event_id;
const position = get_best_coords_for_popup({
target_element: event.target,
popup: {
width: event_actions_popup_width,
height: event_actions_popup_height,
},
offset: {
x: 4,
y: 4,
},
});
event_actions_popup.dataset.current_event_id = event_id;
event_actions_popup.style.left = position.x + "px";
event_actions_popup.style.top = position.y + "px";
event_actions_popup.style.visibility = "visible";
event_actions_popup.style.opacity = "1";
event_actions_popup.style.display = "block";
}
function clear_event_actions_popup() {
if (!event_actions_popup) {
return;
}
event_actions_popup.style.visibility = "hidden";
event_actions_popup.style.opacity = "0";
event_actions_popup.style.display = "none";
}
document.addEventListener("DOMContentLoaded", () => {
if (!document.getElementById("event-actions-styling")) {
const style = document.createElement("style");
style.id = "event-actions-styling";
style.innerHTML = event_actions_popup_styling;
document.head.appendChild(style);
}
event_actions_popup = document.createElement("div");
event_actions_popup.id = "eventactionspopup";
event_actions_popup.innerHTML = `
<div class="event-actions-container">
<button
class="event-action"
data-action="react"
data-reactions
data-smart
>
<i class="icon circle"></i><span class="action-name">React</span>
</button>
<button
class="event-action"
data-action="reply"
>
<i class="icon reply"></i><span class="action-name">Reply</span>
</button>
<button class="event-action mockup" data-action="forward_copy">
<i class="icon forward-copy"></i
><span class="action-name">Copy Link</span>
</button>
<button class="event-action mockup" data-action="delete">
<i class="icon trash"></i><span class="action-name">Delete</span>
</button>
</div>
`;
document.body.appendChild(event_actions_popup);
document.querySelector("body").addEventListener("click", (event) => {
const is_in_the_event_actions_popup = event?.target?.closest("#eventactionspopup");
if (is_in_the_event_actions_popup) {
return;
}
const is_an_event_actions_button =
event?.target?.matches("button[commandfor]") ||
event?.target?.closest("button[commandfor]");
if (!is_an_event_actions_button) {
clear_event_actions_popup();
return;
}
event.preventDefault();
open_event_actions_popup(event);
});
});