mirror of
https://iceshrimp.dev/limepotato/jormungandr-bite.git
synced 2024-11-28 21:08:52 -07:00
Improve emojis
This commit is contained in:
parent
986c53a8d0
commit
e2c80be48f
5 changed files with 42 additions and 17 deletions
|
@ -96,6 +96,7 @@
|
||||||
"deepcopy": "0.6.3",
|
"deepcopy": "0.6.3",
|
||||||
"diskusage": "0.2.4",
|
"diskusage": "0.2.4",
|
||||||
"elasticsearch": "14.1.0",
|
"elasticsearch": "14.1.0",
|
||||||
|
"emojilib": "^2.2.12",
|
||||||
"escape-regexp": "0.0.1",
|
"escape-regexp": "0.0.1",
|
||||||
"eslint": "4.18.0",
|
"eslint": "4.18.0",
|
||||||
"eslint-plugin-vue": "4.2.2",
|
"eslint-plugin-vue": "4.2.2",
|
||||||
|
@ -137,7 +138,6 @@
|
||||||
"multer": "1.3.0",
|
"multer": "1.3.0",
|
||||||
"nprogress": "0.2.0",
|
"nprogress": "0.2.0",
|
||||||
"os-utils": "0.0.14",
|
"os-utils": "0.0.14",
|
||||||
"pictograph": "2.2.0",
|
|
||||||
"progress-bar-webpack-plugin": "^1.11.0",
|
"progress-bar-webpack-plugin": "^1.11.0",
|
||||||
"prominence": "0.2.0",
|
"prominence": "0.2.0",
|
||||||
"proxy-addr": "2.0.3",
|
"proxy-addr": "2.0.3",
|
||||||
|
|
|
@ -8,9 +8,10 @@
|
||||||
</li>
|
</li>
|
||||||
</ol>
|
</ol>
|
||||||
<ol class="emojis" ref="suggests" v-if="emojis.length > 0">
|
<ol class="emojis" ref="suggests" v-if="emojis.length > 0">
|
||||||
<li v-for="emoji in emojis" @click="complete(type, pictograph.dic[emoji])" @keydown="onKeydown" tabindex="-1">
|
<li v-for="emoji in emojis" @click="complete(type, emoji.emoji)" @keydown="onKeydown" tabindex="-1">
|
||||||
<span class="emoji">{{ pictograph.dic[emoji] }}</span>
|
<span class="emoji">{{ emoji.emoji }}</span>
|
||||||
<span class="name" v-html="emoji.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>
|
||||||
</li>
|
</li>
|
||||||
</ol>
|
</ol>
|
||||||
</div>
|
</div>
|
||||||
|
@ -18,9 +19,30 @@
|
||||||
|
|
||||||
<script lang="ts">
|
<script lang="ts">
|
||||||
import Vue from 'vue';
|
import Vue from 'vue';
|
||||||
import * as pictograph from 'pictograph';
|
import * as emojilib from 'emojilib';
|
||||||
import contains from '../../../common/scripts/contains';
|
import contains from '../../../common/scripts/contains';
|
||||||
|
|
||||||
|
const lib = Object.entries(emojilib.lib).filter((x: any) => {
|
||||||
|
return x[1].category != 'flags';
|
||||||
|
});
|
||||||
|
const emjdb = lib.map((x: any) => ({
|
||||||
|
emoji: x[1].char,
|
||||||
|
name: x[0],
|
||||||
|
alias: null
|
||||||
|
}));
|
||||||
|
lib.forEach((x: any) => {
|
||||||
|
if (x[1].keywords) {
|
||||||
|
x[1].keywords.forEach(k => {
|
||||||
|
emjdb.push({
|
||||||
|
emoji: x[1].char,
|
||||||
|
name: k,
|
||||||
|
alias: x[0]
|
||||||
|
});
|
||||||
|
});
|
||||||
|
}
|
||||||
|
});
|
||||||
|
emjdb.sort((a, b) => a.name.length - b.name.length);
|
||||||
|
|
||||||
export default Vue.extend({
|
export default Vue.extend({
|
||||||
props: ['type', 'q', 'textarea', 'complete', 'close', 'x', 'y'],
|
props: ['type', 'q', 'textarea', 'complete', 'close', 'x', 'y'],
|
||||||
data() {
|
data() {
|
||||||
|
@ -29,7 +51,7 @@ export default Vue.extend({
|
||||||
users: [],
|
users: [],
|
||||||
emojis: [],
|
emojis: [],
|
||||||
select: -1,
|
select: -1,
|
||||||
pictograph
|
emojilib
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
computed: {
|
computed: {
|
||||||
|
@ -74,9 +96,12 @@ export default Vue.extend({
|
||||||
this.fetching = false;
|
this.fetching = false;
|
||||||
});
|
});
|
||||||
} else if (this.type == 'emoji') {
|
} else if (this.type == 'emoji') {
|
||||||
const emojis = Object.keys(pictograph.dic).sort((a, b) => a.length - b.length);
|
const matched = [];
|
||||||
const matched = emojis.filter(e => e.indexOf(this.q) > -1);
|
emjdb.some(x => {
|
||||||
this.emojis = matched.filter((x, i) => i <= 30);
|
if (x.name.indexOf(this.q) > -1 && !matched.some(y => y.emoji == x.emoji)) matched.push(x);
|
||||||
|
return matched.length == 30;
|
||||||
|
});
|
||||||
|
this.emojis = matched;
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
beforeDestroy() {
|
beforeDestroy() {
|
||||||
|
@ -212,12 +237,9 @@ export default Vue.extend({
|
||||||
|
|
||||||
.name
|
.name
|
||||||
margin 0 8px 0 0
|
margin 0 8px 0 0
|
||||||
/*font-weight bold*/
|
|
||||||
font-weight normal
|
|
||||||
color rgba(0, 0, 0, 0.8)
|
color rgba(0, 0, 0, 0.8)
|
||||||
|
|
||||||
.username
|
.username
|
||||||
font-weight normal
|
|
||||||
color rgba(0, 0, 0, 0.3)
|
color rgba(0, 0, 0, 0.3)
|
||||||
|
|
||||||
> .emojis > li
|
> .emojis > li
|
||||||
|
@ -228,7 +250,10 @@ export default Vue.extend({
|
||||||
width 24px
|
width 24px
|
||||||
|
|
||||||
.name
|
.name
|
||||||
font-weight normal
|
|
||||||
color rgba(0, 0, 0, 0.8)
|
color rgba(0, 0, 0, 0.8)
|
||||||
|
|
||||||
|
.alias
|
||||||
|
margin 0 0 0 8px
|
||||||
|
color rgba(0, 0, 0, 0.3)
|
||||||
|
|
||||||
</style>
|
</style>
|
||||||
|
|
|
@ -1,5 +1,5 @@
|
||||||
import Vue from 'vue';
|
import Vue from 'vue';
|
||||||
import * as pictograph from 'pictograph';
|
import * as emojilib from 'emojilib';
|
||||||
import { url } from '../../../config';
|
import { url } from '../../../config';
|
||||||
import MkUrl from './url.vue';
|
import MkUrl from './url.vue';
|
||||||
|
|
||||||
|
@ -92,7 +92,7 @@ export default Vue.component('mk-post-html', {
|
||||||
return createElement('code', token.html);
|
return createElement('code', token.html);
|
||||||
|
|
||||||
case 'emoji':
|
case 'emoji':
|
||||||
return createElement('span', pictograph.dic[token.emoji] || token.content);
|
return createElement('span', emojilib.lib[token.emoji] || token.content);
|
||||||
}
|
}
|
||||||
}));
|
}));
|
||||||
|
|
||||||
|
|
|
@ -83,7 +83,7 @@ class Autocomplete {
|
||||||
|
|
||||||
if (emojiIndex != -1 && emojiIndex > mentionIndex) {
|
if (emojiIndex != -1 && emojiIndex > mentionIndex) {
|
||||||
const emoji = text.substr(emojiIndex + 1);
|
const emoji = text.substr(emojiIndex + 1);
|
||||||
if (!emoji.match(/^[\+\-a-z_]+$/)) return;
|
if (!emoji.match(/^[\+\-a-z0-9_]+$/)) return;
|
||||||
this.open('emoji', emoji);
|
this.open('emoji', emoji);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
@ -145,7 +145,7 @@ module.exports = Object.keys(langs).map(lang => {
|
||||||
output,
|
output,
|
||||||
resolve: {
|
resolve: {
|
||||||
extensions: [
|
extensions: [
|
||||||
'.js', '.ts'
|
'.js', '.ts', '.json'
|
||||||
]
|
]
|
||||||
},
|
},
|
||||||
resolveLoader: {
|
resolveLoader: {
|
||||||
|
|
Loading…
Reference in a new issue