From e0ba42df0acc2df792248e51394ac159e48c0932 Mon Sep 17 00:00:00 2001
From: syuilo <syuilotan@yahoo.co.jp>
Date: Sun, 13 Sep 2020 10:54:12 +0900
Subject: [PATCH] wip

---
 package.json                           |   2 +-
 src/client/components/emoji-picker.vue | 111 ++++++++++++-------------
 src/client/components/post-form.vue    |   7 +-
 3 files changed, 55 insertions(+), 65 deletions(-)

diff --git a/package.json b/package.json
index 6a3c70adb5..ba4d7427dd 100644
--- a/package.json
+++ b/package.json
@@ -262,7 +262,7 @@
 		"vuex": "4.0.0-beta.4",
 		"vuex-persistedstate": "3.1.0",
 		"web-push": "3.4.4",
-		"webpack": "5.0.0-beta.29",
+		"webpack": "5.0.0-beta.30",
 		"webpack-cli": "3.3.12",
 		"websocket": "1.0.31",
 		"ws": "7.3.1",
diff --git a/src/client/components/emoji-picker.vue b/src/client/components/emoji-picker.vue
index ad5beab762..78c23ebee7 100644
--- a/src/client/components/emoji-picker.vue
+++ b/src/client/components/emoji-picker.vue
@@ -1,65 +1,63 @@
 <template>
-<XModal :source="source" ref="popup" @closed="() => { $emit('closed'); destroyDom(); }">
-	<div class="omfetrab">
-		<header>
-			<button v-for="(category, i) in categories"
-				class="_button"
-				@click="go(category)"
-				:class="{ active: category.isActive }"
-				:key="i"
-			>
-				<fa :icon="category.icon" fixed-width/>
-			</button>
-		</header>
+<div class="omfetrab">
+	<header>
+		<button v-for="(category, i) in categories"
+			class="_button"
+			@click="go(category)"
+			:class="{ active: category.isActive }"
+			:key="i"
+		>
+			<fa :icon="category.icon" fixed-width/>
+		</button>
+	</header>
 
-		<div class="emojis">
-			<template v-if="categories[0].isActive">
-				<header class="category"><fa :icon="faHistory" fixed-width/> {{ $t('recentUsed') }}</header>
+	<div class="emojis">
+		<template v-if="categories[0].isActive">
+			<header class="category"><fa :icon="faHistory" fixed-width/> {{ $t('recentUsed') }}</header>
+			<div class="list">
+				<button v-for="(emoji, i) in ($store.state.device.recentEmojis || [])"
+					class="_button"
+					:title="emoji.name"
+					@click="chosen(emoji)"
+					:key="i"
+				>
+					<mk-emoji v-if="emoji.char != null" :emoji="emoji.char"/>
+					<img v-else :src="$store.state.device.disableShowingAnimatedImages ? getStaticImageUrl(emoji.url) : emoji.url"/>
+				</button>
+			</div>
+
+			<header class="category"><fa :icon="faAsterisk" fixed-width/> {{ $t('customEmojis') }}</header>
+		</template>
+
+		<template v-if="categories.find(x => x.isActive).name">
+			<div class="list">
+				<button v-for="emoji in emojilist.filter(e => e.category === categories.find(x => x.isActive).name)"
+					class="_button"
+					:title="emoji.name"
+					@click="chosen(emoji)"
+					:key="emoji.name"
+				>
+					<mk-emoji :emoji="emoji.char"/>
+				</button>
+			</div>
+		</template>
+		<template v-else>
+			<div v-for="(key, i) in Object.keys(customEmojis)" :key="i">
+				<header class="sub" v-if="key">{{ key }}</header>
 				<div class="list">
-					<button v-for="(emoji, i) in ($store.state.device.recentEmojis || [])"
-						class="_button"
-						:title="emoji.name"
-						@click="chosen(emoji)"
-						:key="i"
-					>
-						<mk-emoji v-if="emoji.char != null" :emoji="emoji.char"/>
-						<img v-else :src="$store.state.device.disableShowingAnimatedImages ? getStaticImageUrl(emoji.url) : emoji.url"/>
-					</button>
-				</div>
-
-				<header class="category"><fa :icon="faAsterisk" fixed-width/> {{ $t('customEmojis') }}</header>
-			</template>
-
-			<template v-if="categories.find(x => x.isActive).name">
-				<div class="list">
-					<button v-for="emoji in emojilist.filter(e => e.category === categories.find(x => x.isActive).name)"
+					<button v-for="emoji in customEmojis[key]"
 						class="_button"
 						:title="emoji.name"
 						@click="chosen(emoji)"
 						:key="emoji.name"
 					>
-						<mk-emoji :emoji="emoji.char"/>
+						<img :src="$store.state.device.disableShowingAnimatedImages ? getStaticImageUrl(emoji.url) : emoji.url"/>
 					</button>
 				</div>
-			</template>
-			<template v-else>
-				<div v-for="(key, i) in Object.keys(customEmojis)" :key="i">
-					<header class="sub" v-if="key">{{ key }}</header>
-					<div class="list">
-						<button v-for="emoji in customEmojis[key]"
-							class="_button"
-							:title="emoji.name"
-							@click="chosen(emoji)"
-							:key="emoji.name"
-						>
-							<img :src="$store.state.device.disableShowingAnimatedImages ? getStaticImageUrl(emoji.url) : emoji.url"/>
-						</button>
-					</div>
-				</div>
-			</template>
-		</div>
+			</div>
+		</template>
 	</div>
-</XModal>
+</div>
 </template>
 
 <script lang="ts">
@@ -69,13 +67,10 @@ import { getStaticImageUrl } from '@/scripts/get-static-image-url';
 import { faAsterisk, faLeaf, faUtensils, faFutbol, faCity, faDice, faGlobe, faHistory, faUser } from '@fortawesome/free-solid-svg-icons';
 import { faHeart, faFlag, faLaugh } from '@fortawesome/free-regular-svg-icons';
 import { groupByX } from '../../prelude/array';
-import XModal from './modal.vue';
 import * as os from '@/os';
 
 export default defineComponent({
-	components: {
-		XModal,
-	},
+	emits: ['done'],
 
 	props: {
 		source: {
@@ -163,12 +158,8 @@ export default defineComponent({
 			recents = recents.filter((e: any) => getKey(e) !== getKey(emoji));
 			recents.unshift(emoji)
 			this.$store.commit('device/set', { key: 'recentEmojis', value: recents.splice(0, 16) });
-			this.$emit('chosen', getKey(emoji));
+			this.$emit('done', getKey(emoji));
 		},
-
-		close() {
-			this.$refs.popup.close();
-		}
 	}
 });
 </script>
diff --git a/src/client/components/post-form.vue b/src/client/components/post-form.vue
index 35739082f0..e29b75ff20 100644
--- a/src/client/components/post-form.vue
+++ b/src/client/components/post-form.vue
@@ -606,11 +606,10 @@ export default defineComponent({
 		},
 
 		async insertEmoji(ev) {
-			const vm = os.modal(await import('./emoji-picker.vue'), {
-				source: ev.currentTarget || ev.target
-			}).$once('chosen', emoji => {
+			os.modal(defineAsyncComponent(() => import('@/components/emoji-picker.vue')), {}, emoji => {
 				insertTextAtCursor(this.$refs.text, emoji);
-				vm.close();
+			}, {
+				source: ev.currentTarget || ev.target
 			});
 		},