These are fairly small components, so we can change to using glimmer without too much trouble.
52 lines
1.3 KiB
JavaScript
52 lines
1.3 KiB
JavaScript
import Component from "@glimmer/component";
|
|
import { action } from "@ember/object";
|
|
import { createPopper } from "@popperjs/core";
|
|
import { schedule } from "@ember/runloop";
|
|
import { inject as service } from "@ember/service";
|
|
|
|
const MSG_ACTIONS_VERTICAL_PADDING = -10;
|
|
|
|
export default class ChatMessageActionsDesktop extends Component {
|
|
@service chatStateManager;
|
|
|
|
popper = null;
|
|
|
|
@action
|
|
destroyPopper() {
|
|
this.popper?.destroy();
|
|
this.popper = null;
|
|
}
|
|
|
|
@action
|
|
attachPopper() {
|
|
this.destroyPopper();
|
|
|
|
schedule("afterRender", () => {
|
|
this.popper = createPopper(
|
|
document.querySelector(
|
|
`.chat-message-container[data-id="${this.args.message.id}"]`
|
|
),
|
|
document.querySelector(
|
|
`.chat-message-actions-container[data-id="${this.args.message.id}"] .chat-message-actions`
|
|
),
|
|
{
|
|
placement: "top-end",
|
|
modifiers: [
|
|
{ name: "hide", enabled: true },
|
|
{ name: "eventListeners", options: { scroll: false } },
|
|
{
|
|
name: "offset",
|
|
options: { offset: [-2, MSG_ACTIONS_VERTICAL_PADDING] },
|
|
},
|
|
],
|
|
}
|
|
);
|
|
});
|
|
}
|
|
|
|
@action
|
|
handleSecondaryButtons(id) {
|
|
this.args.messageActions?.[id]?.();
|
|
}
|
|
}
|