139 lines
3.2 KiB
JavaScript
139 lines
3.2 KiB
JavaScript
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;
|
|
visibility: hidden;
|
|
display: none;
|
|
opacity: 0;
|
|
}
|
|
|
|
#eventactionspopup[data-shown] {
|
|
visibility: visible;
|
|
display: block;
|
|
opacity: 1;
|
|
}
|
|
|
|
#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.dataset.shown = true;
|
|
}
|
|
|
|
function clear_event_actions_popup() {
|
|
if (!event_actions_popup) {
|
|
return;
|
|
}
|
|
|
|
delete event_actions_popup.dataset.shown;
|
|
}
|
|
|
|
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);
|
|
});
|
|
});
|