Refactoring
This commit is contained in:
		
							parent
							
								
									e5a3dcf868
								
							
						
					
					
						commit
						b4b9e76c8d
					
				
					 1 changed files with 45 additions and 29 deletions
				
			
		| 
						 | 
					@ -17,7 +17,7 @@
 | 
				
			||||||
			<span class="emoji" v-if="emoji.url"><img :src="emoji.url" :alt="emoji.emoji"/></span>
 | 
								<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="emoji" v-else>{{ emoji.emoji }}</span>
 | 
				
			||||||
			<span class="name" v-html="emoji.name.replace(q, `<b>${q}</b>`)"></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>
 | 
							</li>
 | 
				
			||||||
	</ol>
 | 
						</ol>
 | 
				
			||||||
</div>
 | 
					</div>
 | 
				
			||||||
| 
						 | 
					@ -28,14 +28,21 @@ import Vue from 'vue';
 | 
				
			||||||
import * as emojilib from 'emojilib';
 | 
					import * as emojilib from 'emojilib';
 | 
				
			||||||
import contains from '../../../common/scripts/contains';
 | 
					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) => {
 | 
					const lib = Object.entries(emojilib.lib).filter((x: any) => {
 | 
				
			||||||
	return x[1].category != 'flags';
 | 
						return x[1].category != 'flags';
 | 
				
			||||||
});
 | 
					});
 | 
				
			||||||
 | 
					
 | 
				
			||||||
const emjdb = lib.map((x: any) => ({
 | 
					const emjdb: EmojiDef[] = lib.map((x: any) => ({
 | 
				
			||||||
	emoji: x[1].char,
 | 
						emoji: x[1].char,
 | 
				
			||||||
	name: x[0],
 | 
						name: x[0],
 | 
				
			||||||
	alias: null
 | 
						aliasOf: null
 | 
				
			||||||
}));
 | 
					}));
 | 
				
			||||||
 | 
					
 | 
				
			||||||
lib.forEach((x: any) => {
 | 
					lib.forEach((x: any) => {
 | 
				
			||||||
| 
						 | 
					@ -44,7 +51,7 @@ lib.forEach((x: any) => {
 | 
				
			||||||
			emjdb.push({
 | 
								emjdb.push({
 | 
				
			||||||
				emoji: x[1].char,
 | 
									emoji: x[1].char,
 | 
				
			||||||
				name: k,
 | 
									name: k,
 | 
				
			||||||
				alias: x[0]
 | 
									aliasOf: x[0]
 | 
				
			||||||
			});
 | 
								});
 | 
				
			||||||
		});
 | 
							});
 | 
				
			||||||
	}
 | 
						}
 | 
				
			||||||
| 
						 | 
					@ -62,7 +69,8 @@ export default Vue.extend({
 | 
				
			||||||
			hashtags: [],
 | 
								hashtags: [],
 | 
				
			||||||
			emojis: [],
 | 
								emojis: [],
 | 
				
			||||||
			select: -1,
 | 
								select: -1,
 | 
				
			||||||
			emojilib
 | 
								emojilib,
 | 
				
			||||||
 | 
								emojiDb: [] as EmojiDef[]
 | 
				
			||||||
		}
 | 
							}
 | 
				
			||||||
	},
 | 
						},
 | 
				
			||||||
 | 
					
 | 
				
			||||||
| 
						 | 
					@ -91,6 +99,34 @@ export default Vue.extend({
 | 
				
			||||||
	},
 | 
						},
 | 
				
			||||||
 | 
					
 | 
				
			||||||
	mounted() {
 | 
						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);
 | 
							this.textarea.addEventListener('keydown', this.onKeydown);
 | 
				
			||||||
 | 
					
 | 
				
			||||||
		Array.from(document.querySelectorAll('body *')).forEach(el => {
 | 
							Array.from(document.querySelectorAll('body *')).forEach(el => {
 | 
				
			||||||
| 
						 | 
					@ -172,38 +208,18 @@ export default Vue.extend({
 | 
				
			||||||
				const matched = [];
 | 
									const matched = [];
 | 
				
			||||||
				const max = 30;
 | 
									const max = 30;
 | 
				
			||||||
 | 
					
 | 
				
			||||||
				const customEmojis = (this.os.getMetaSync() || { emojis: [] }).emojis || [];
 | 
									this.emojiDb.some(x => {
 | 
				
			||||||
				customEmojis.some(x => {
 | 
										if (x.name.startsWith(this.q) && !x.aliasOf && !matched.some(y => y.emoji == x.emoji)) matched.push(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);
 | 
					 | 
				
			||||||
					return matched.length == max;
 | 
										return matched.length == max;
 | 
				
			||||||
				});
 | 
									});
 | 
				
			||||||
				if (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);
 | 
											if (x.name.startsWith(this.q) && !matched.some(y => y.emoji == x.emoji)) matched.push(x);
 | 
				
			||||||
						return matched.length == max;
 | 
											return matched.length == max;
 | 
				
			||||||
					});
 | 
										});
 | 
				
			||||||
				}
 | 
									}
 | 
				
			||||||
				if (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);
 | 
											if (x.name.includes(this.q) && !matched.some(y => y.emoji == x.emoji)) matched.push(x);
 | 
				
			||||||
						return matched.length == max;
 | 
											return matched.length == max;
 | 
				
			||||||
					});
 | 
										});
 | 
				
			||||||
| 
						 | 
					
 | 
				
			||||||
		Loading…
	
	Add table
		Add a link
		
	
		Reference in a new issue