From b7c26dc29d96ea568ae9e629065bb5c701e0e8c5 Mon Sep 17 00:00:00 2001
From: YS <47836716+yszkst@users.noreply.github.com>
Date: Fri, 10 Mar 2023 14:15:49 +0900
Subject: [PATCH] =?UTF-8?q?=E7=B5=B5=E6=96=87=E5=AD=97=E3=83=94=E3=83=83?=
 =?UTF-8?q?=E3=82=AB=E3=83=BC=E3=81=AE=E3=81=99=E3=81=B9=E3=81=A6=E3=81=AE?=
 =?UTF-8?q?=E7=B5=B5=E6=96=87=E5=AD=97=E3=81=A7=E3=83=9E=E3=82=A6=E3=82=B9?=
 =?UTF-8?q?=E3=83=9B=E3=83=90=E3=83=BC=E6=99=82=E3=81=ABtitle=E8=A1=A8?=
 =?UTF-8?q?=E7=A4=BA=E3=81=95=E3=82=8C=E3=82=8B=E3=82=88=E3=81=86=E3=81=AB?=
 =?UTF-8?q?=20(#9765)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

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

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

* fix typo

---------

Co-authored-by: tamaina <tamaina@hotmail.co.jp>
---
 .../src/components/MkEmojiPicker.section.vue        | 11 +++++++++++
 packages/frontend/src/components/MkEmojiPicker.vue  | 13 ++++++++++++-
 2 files changed, 23 insertions(+), 1 deletion(-)

diff --git a/packages/frontend/src/components/MkEmojiPicker.section.vue b/packages/frontend/src/components/MkEmojiPicker.section.vue
index c418ac2c52..89abf1d946 100644
--- a/packages/frontend/src/components/MkEmojiPicker.section.vue
+++ b/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>
diff --git a/packages/frontend/src/components/MkEmojiPicker.vue b/packages/frontend/src/components/MkEmojiPicker.vue
index 7d280f2f4b..a5a39108d6 100644
--- a/packages/frontend/src/components/MkEmojiPicker.vue
+++ b/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) {