This repository has been archived on 2023-03-18. You can view files and clone it, but cannot push or open issues or pull requests.
osr-discourse-src/plugins/chat/assets/javascripts/discourse/components/chat-message-actions-mobile.js
Martin Brennan 9704d9aed6
DEV: Glimmerize ChatMessageActionsDesktop/Mobile components (#20325)
These are fairly small components, so we can change to using
glimmer without too much trouble.
2023-02-16 11:24:29 +01:00

69 lines
1.5 KiB
JavaScript

import Component from "@glimmer/component";
import { getOwner } from "discourse-common/lib/get-owner";
import { tracked } from "@glimmer/tracking";
import discourseLater from "discourse-common/lib/later";
import { action } from "@ember/object";
import { isTesting } from "discourse-common/config/environment";
export default class ChatMessageActionsMobile extends Component {
@tracked hasExpandedReply = false;
@tracked showFadeIn = false;
messageActions = null;
get capabilities() {
return getOwner(this).lookup("capabilities:main");
}
@action
fadeAndVibrate() {
discourseLater(this.#addFadeIn.bind(this));
if (this.capabilities.canVibrate && !isTesting()) {
navigator.vibrate(5);
}
}
@action
expandReply(event) {
event.stopPropagation();
this.hasExpandedReply = true;
}
@action
collapseMenu(event) {
event.stopPropagation();
this.#onCloseMenu();
}
@action
actAndCloseMenu(fn) {
fn?.();
this.#onCloseMenu();
}
#onCloseMenu() {
this.#removeFadeIn();
// we don't want to remove the component right away as it's animating
// 200 is equal to the duration of the css animation
discourseLater(() => {
if (this.isDestroying || this.isDestroyed) {
return;
}
// by ensuring we are not hovering any message anymore
// we also ensure the menu is fully removed
this.args.onHoverMessage?.(null);
}, 200);
}
#addFadeIn() {
this.showFadeIn = true;
}
#removeFadeIn() {
this.showFadeIn = false;
}
}