mirror of
https://github.com/discourse/discourse.git
synced 2025-01-17 05:42:44 +08:00
6740a340ca
The chat emoji picker is renamed emoji-picker, and the old emoji-picker is removed. This commit doesn't attempt to fully rework a new emoji-picker but instead tries to migrate everything to one picker (the chat one) and add small changes. Other notable changes: - all the favorite emojis code has been mixed into one service which is able to store one state per context, favorites emojis will be stored for all topics, and for each chat channel. Meaning that if you always use a specific emoji in a channel, it will only show as favorite emoji in this channel. - a lot of static code has been removed which should improve initial load perf of discourse. Initially this code was around to improve the performance of the emoji picker rendering. - the emojis are now stored, once the full list has been loaded, if you close and reopen the picker it won't have to load them again. List of components: - `<EmojiPicker />` will render a button which will open a dropdown - `<EmojiPickerContent />` represents the content of the dropdown alone, it's useful when you want to render a picker from an action which is not the default picker button - `<EmojiPickerDetached />` just a simple wrapper over `<EmojiPickerContent />` to make it easier to use it with `this.menu.show(...)` --------- Co-authored-by: Renato Atilio <renatoat@gmail.com>
125 lines
2.8 KiB
JavaScript
125 lines
2.8 KiB
JavaScript
import { tracked } from "@glimmer/tracking";
|
|
import { action } from "@ember/object";
|
|
import { guidFor } from "@ember/object/internals";
|
|
import { getOwner, setOwner } from "@ember/owner";
|
|
import { service } from "@ember/service";
|
|
import { MENU } from "float-kit/lib/constants";
|
|
import FloatKitInstance from "float-kit/lib/float-kit-instance";
|
|
|
|
export default class DMenuInstance extends FloatKitInstance {
|
|
@service menu;
|
|
@service site;
|
|
@service modal;
|
|
|
|
/**
|
|
* Indicates whether the menu is expanded or not.
|
|
* @property {boolean} expanded - Tracks the state of menu expansion, initially set to false.
|
|
*/
|
|
@tracked expanded = false;
|
|
|
|
/**
|
|
* Specifies whether the trigger for opening/closing the menu is detached from the menu itself.
|
|
* This is the case when a menu is trigger programmatically instead of through the <DMenu /> component.
|
|
* @property {boolean} detachedTrigger - Tracks whether the trigger is detached, initially set to false.
|
|
*/
|
|
@tracked detachedTrigger = false;
|
|
|
|
/**
|
|
* Configuration options for the DMenuInstance.
|
|
* @property {Object} options - Options object that configures the menu behavior and display.
|
|
*/
|
|
@tracked options;
|
|
|
|
@tracked _trigger;
|
|
|
|
constructor(owner, options = {}) {
|
|
super(...arguments);
|
|
|
|
setOwner(this, owner);
|
|
this.options = { ...MENU.options, ...options };
|
|
}
|
|
|
|
get portalOutletElement() {
|
|
return document.getElementById("d-menu-portals");
|
|
}
|
|
|
|
get trigger() {
|
|
return this._trigger;
|
|
}
|
|
|
|
set trigger(element) {
|
|
this._trigger = element;
|
|
this.id = element.id || guidFor(element);
|
|
this.setupListeners();
|
|
}
|
|
|
|
@action
|
|
async close(options = { focusTrigger: true }) {
|
|
if (getOwner(this).isDestroying) {
|
|
return;
|
|
}
|
|
|
|
await super.close(...arguments);
|
|
|
|
if (this.site.mobileView && this.options.modalForMobile) {
|
|
await this.modal.close();
|
|
}
|
|
|
|
await this.menu.close(this);
|
|
|
|
if (options.focusTrigger) {
|
|
this.trigger?.focus?.();
|
|
}
|
|
|
|
await this.options.onClose?.(this);
|
|
}
|
|
|
|
@action
|
|
async show() {
|
|
await super.show(...arguments);
|
|
await this.menu.show(this);
|
|
}
|
|
|
|
@action
|
|
async onMouseMove(event) {
|
|
if (this.expanded && this.trigger.contains(event.target)) {
|
|
return;
|
|
}
|
|
|
|
await this.onTrigger(event);
|
|
}
|
|
|
|
@action
|
|
async onClick(event) {
|
|
if (this.expanded && this.untriggers.includes("click")) {
|
|
return await this.onUntrigger(event);
|
|
}
|
|
|
|
await this.onTrigger(event);
|
|
}
|
|
|
|
@action
|
|
async onMouseLeave(event) {
|
|
if (this.untriggers.includes("hover")) {
|
|
await this.onUntrigger(event);
|
|
}
|
|
}
|
|
|
|
@action
|
|
async onTrigger() {
|
|
await this.options.beforeTrigger?.(this);
|
|
await this.show();
|
|
}
|
|
|
|
@action
|
|
async onUntrigger() {
|
|
await this.close();
|
|
}
|
|
|
|
@action
|
|
destroy() {
|
|
this.close();
|
|
this.tearDownListeners();
|
|
}
|
|
}
|