絵文字ピッカーのすべての絵文字でマウスホバー時にtitle表示されるように (#9765)

* 絵文字ピッカーの絵文字アイコン選択のコンポーネント化とすべてでtitle表示

* コンポーネント化を取り消し、イベントとデータ属性で行う

* fix typo

---------

Co-authored-by: tamaina <tamaina@hotmail.co.jp>

packages/frontend/src/components/MkEmojiPicker.section.vue

@@ -8,7 +8,9 @@
 		<button
 			v-for="emoji in emojis"
 			:key="emoji"
+			:data-emoji="emoji"
 			class="_button item"
+			@pointerenter="computeButtonTitle"
 			@click="emit('chosen', emoji, $event)"
 		>
 			<MkCustomEmoji v-if="emoji[0] === ':'" class="emoji" :name="emoji" :normal="true"/>
@@ -20,6 +22,7 @@
 
 <script lang="ts" setup>
 import { ref, computed, Ref } from 'vue';
+import { getEmojiName } from '@/scripts/emojilist';
 
 const props = defineProps<{
 	emojis: string[] | Ref<string[]>;
@@ -33,4 +36,12 @@ const emit = defineEmits<{
 const emojis = computed(() => Array.isArray(props.emojis) ? props.emojis : props.emojis.value);
 
 const shown = ref(!!props.initialShown);
+
+/** @see MkEmojiPicker.vue */
+function computeButtonTitle(ev: MouseEvent): void {
+	const elm = ev.target as HTMLElement;
+	const emoji = elm.dataset.emoji as string;
+	elm.title = getEmojiName(emoji) ?? emoji;
+}
+
 </script>

packages/frontend/src/components/MkEmojiPicker.vue

@@ -35,8 +35,10 @@
 					<button
 						v-for="emoji in pinned"
 						:key="emoji"
+						:data-emoji="emoji"
 						class="_button item"
 						tabindex="0"
+						@pointerenter="computeButtonTitle"
 						@click="chosen(emoji, $event)"
 					>
 						<MkCustomEmoji v-if="emoji[0] === ':'" class="emoji" :name="emoji" :normal="true"/>
@@ -52,6 +54,8 @@
 						v-for="emoji in recentlyUsedEmojis"
 						:key="emoji"
 						class="_button item"
+						:data-emoji="emoji"
+						@pointerenter="computeButtonTitle"
 						@click="chosen(emoji, $event)"
 					>
 						<MkCustomEmoji v-if="emoji[0] === ':'" class="emoji" :name="emoji" :normal="true"/>
@@ -90,7 +94,7 @@
 import { ref, shallowRef, computed, watch, onMounted } from 'vue';
 import * as Misskey from 'misskey-js';
 import XSection from '@/components/MkEmojiPicker.section.vue';
-import { emojilist, emojiCharByCategory, UnicodeEmojiDef, unicodeEmojiCategories as categories } from '@/scripts/emojilist';
+import { emojilist, emojiCharByCategory, UnicodeEmojiDef, unicodeEmojiCategories as categories, getEmojiName } from '@/scripts/emojilist';
 import MkRippleEffect from '@/components/MkRippleEffect.vue';
 import * as os from '@/os';
 import { isTouchUsing } from '@/scripts/touch';
@@ -291,6 +295,13 @@ function getKey(emoji: string | Misskey.entities.CustomEmoji | UnicodeEmojiDef):
 	return typeof emoji === 'string' ? emoji : 'char' in emoji ? emoji.char : `:${emoji.name}:`;
 }
 
+/** @see MkEmojiPicker.section.vue */
+function computeButtonTitle(ev: MouseEvent): void {
+	const elm = ev.target as HTMLElement;
+	const emoji = elm.dataset.emoji as string;
+	elm.title = getEmojiName(emoji) ?? emoji;
+}
+
 function chosen(emoji: any, ev?: MouseEvent) {
 	const el = ev && (ev.currentTarget ?? ev.target) as HTMLElement | null | undefined;
 	if (el) {