From b4b9e76c8de7c5268e14c47fa709f1f1179891b5 Mon Sep 17 00:00:00 2001
From: syuilo <syuilotan@yahoo.co.jp>
Date: Thu, 1 Nov 2018 21:28:39 +0900
Subject: [PATCH] Refactoring
---
.../common/views/components/autocomplete.vue | 74 +++++++++++--------
1 file changed, 45 insertions(+), 29 deletions(-)
diff --git a/src/client/app/common/views/components/autocomplete.vue b/src/client/app/common/views/components/autocomplete.vue
index a68b429353..3f3cd171e5 100644
--- a/src/client/app/common/views/components/autocomplete.vue
+++ b/src/client/app/common/views/components/autocomplete.vue
@@ -17,7 +17,7 @@
<span class="emoji" v-if="emoji.url"><img :src="emoji.url" :alt="emoji.emoji"/></span>
<span class="emoji" v-else>{{ emoji.emoji }}</span>
<span class="name" v-html="emoji.name.replace(q, `<b>${q}</b>`)"></span>
- <span class="alias" v-if="emoji.alias">({{ emoji.alias }})</span>
+ <span class="alias" v-if="emoji.aliasOf">({{ emoji.aliasOf }})</span>
</li>
</ol>
</div>
@@ -28,14 +28,21 @@ import Vue from 'vue';
import * as emojilib from 'emojilib';
import contains from '../../../common/scripts/contains';
+type EmojiDef = {
+ emoji: string;
+ name: string;
+ aliasOf?: string;
+ url?: string;
+};
+
const lib = Object.entries(emojilib.lib).filter((x: any) => {
return x[1].category != 'flags';
});
-const emjdb = lib.map((x: any) => ({
+const emjdb: EmojiDef[] = lib.map((x: any) => ({
emoji: x[1].char,
name: x[0],
- alias: null
+ aliasOf: null
}));
lib.forEach((x: any) => {
@@ -44,7 +51,7 @@ lib.forEach((x: any) => {
emjdb.push({
emoji: x[1].char,
name: k,
- alias: x[0]
+ aliasOf: x[0]
});
});
}
@@ -62,7 +69,8 @@ export default Vue.extend({
hashtags: [],
emojis: [],
select: -1,
- emojilib
+ emojilib,
+ emojiDb: [] as EmojiDef[]
}
},
@@ -91,6 +99,34 @@ export default Vue.extend({
},
mounted() {
+ //#region Construct Emoji DB
+ const customEmojis = (this.os.getMetaSync() || { emojis: [] }).emojis || [];
+ const emojiDefinitions: EmojiDef[] = [];
+
+ customEmojis.forEach(x => {
+ emojiDefinitions.push({
+ name: x.name,
+ emoji: `:${x.name}:`,
+ url: x.url
+ });
+
+ if (x.aliases) {
+ x.aliases.forEach(alias => {
+ emojiDefinitions.push({
+ name: alias,
+ aliasOf: x.name,
+ emoji: `:${x.name}:`,
+ url: x.url
+ });
+ });
+ }
+ });
+
+ emojiDefinitions.sort((a, b) => a.name.length - b.name.length);
+
+ this.emojiDb = emojiDefinitions.concat(emjdb);
+ //#endregion
+
this.textarea.addEventListener('keydown', this.onKeydown);
Array.from(document.querySelectorAll('body *')).forEach(el => {
@@ -172,38 +208,18 @@ export default Vue.extend({
const matched = [];
const max = 30;
- const customEmojis = (this.os.getMetaSync() || { emojis: [] }).emojis || [];
- customEmojis.some(x => {
- if (x.name.startsWith(this.q)) matched.push({
- name: x.name,
- emoji: `:${x.name}:`,
- url: x.url
- });
- return matched.length == max;
- });
- customEmojis.some(x => {
- const alias = (x.aliases || []).find(a => a.startsWith(this.q));
- if (alias) matched.push({
- alias: x.name,
- name: alias,
- emoji: `:${x.name}:`,
- url: x.url
- });
- return matched.length == max;
- });
-
- emjdb.some(x => {
- if (x.name.startsWith(this.q) && !x.alias && !matched.some(y => y.emoji == x.emoji)) matched.push(x);
+ this.emojiDb.some(x => {
+ if (x.name.startsWith(this.q) && !x.aliasOf && !matched.some(y => y.emoji == x.emoji)) matched.push(x);
return matched.length == max;
});
if (matched.length < max) {
- emjdb.some(x => {
+ this.emojiDb.some(x => {
if (x.name.startsWith(this.q) && !matched.some(y => y.emoji == x.emoji)) matched.push(x);
return matched.length == max;
});
}
if (matched.length < max) {
- emjdb.some(x => {
+ this.emojiDb.some(x => {
if (x.name.includes(this.q) && !matched.some(y => y.emoji == x.emoji)) matched.push(x);
return matched.length == max;
});