Refactoring & 設定でTwemojiを使うかどうか切り替えられるように

This commit is contained in:
syuilo 2018-11-05 19:20:35 +09:00
parent 54e9147782
commit 65961bc15b
No known key found for this signature in database
GPG Key ID: BDC4C49D06AB9D69
13 changed files with 95 additions and 58 deletions

View File

@ -131,6 +131,7 @@ common:
show-full-acct: "ユーザー名のホストを省略しない" show-full-acct: "ユーザー名のホストを省略しない"
reduce-motion: "UIの動きを減らす" reduce-motion: "UIの動きを減らす"
this-setting-is-this-device-only: "このデバイスのみ" this-setting-is-this-device-only: "このデバイスのみ"
use-os-default-emojis: "OS標準の絵文字を使用"
do-not-use-in-production: 'これは開発ビルドです。本番環境で使用しないでください。' do-not-use-in-production: 'これは開発ビルドです。本番環境で使用しないでください。'

View File

@ -14,7 +14,8 @@
</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, emoji.emoji)" @keydown="onKeydown" tabindex="-1"> <li v-for="emoji in emojis" @click="complete(type, emoji.emoji)" @keydown="onKeydown" tabindex="-1">
<span class="emoji" v-if="emoji.url"><img :src="emoji.url" :alt="emoji.emoji"/></span> <span class="emoji" v-if="emoji.isCustomEmoji"><img :src="emoji.url" :alt="emoji.emoji"/></span>
<span class="emoji" v-else-if="!useOsDefaultEmojis"><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.aliasOf">({{ emoji.aliasOf }})</span> <span class="alias" v-if="emoji.aliasOf">({{ emoji.aliasOf }})</span>
@ -33,6 +34,7 @@ type EmojiDef = {
name: string; name: string;
aliasOf?: string; aliasOf?: string;
url?: string; url?: string;
isCustomEmoji?: boolean;
}; };
const lib = Object.entries(emojilib.lib).filter((x: any) => { const lib = Object.entries(emojilib.lib).filter((x: any) => {
@ -40,7 +42,7 @@ const lib = Object.entries(emojilib.lib).filter((x: any) => {
}); });
const emjdb: EmojiDef[] = lib.map((x: any) => ({ const emjdb: EmojiDef[] = lib.map((x: any) => ({
emoji: `:${x[0]}:`, emoji: x[1].char,
name: x[0], name: x[0],
aliasOf: null, aliasOf: null,
url: `https://twemoji.maxcdn.com/2/svg/${x[1].char.codePointAt(0).toString(16)}.svg` url: `https://twemoji.maxcdn.com/2/svg/${x[1].char.codePointAt(0).toString(16)}.svg`
@ -50,7 +52,7 @@ lib.forEach((x: any) => {
if (x[1].keywords) { if (x[1].keywords) {
x[1].keywords.forEach(k => { x[1].keywords.forEach(k => {
emjdb.push({ emjdb.push({
emoji: `:${x[0]}:`, emoji: x[1].char,
name: k, name: k,
aliasOf: x[0], aliasOf: x[0],
url: `https://twemoji.maxcdn.com/2/svg/${x[1].char.codePointAt(0).toString(16)}.svg` url: `https://twemoji.maxcdn.com/2/svg/${x[1].char.codePointAt(0).toString(16)}.svg`
@ -79,6 +81,10 @@ export default Vue.extend({
computed: { computed: {
items(): HTMLCollection { items(): HTMLCollection {
return (this.$refs.suggests as Element).children; return (this.$refs.suggests as Element).children;
},
useOsDefaultEmojis(): boolean {
return this.$store.state.device.useOsDefaultEmojis;
} }
}, },
@ -109,7 +115,8 @@ export default Vue.extend({
emojiDefinitions.push({ emojiDefinitions.push({
name: x.name, name: x.name,
emoji: `:${x.name}:`, emoji: `:${x.name}:`,
url: x.url url: x.url,
isCustomEmoji: true
}); });
if (x.aliases) { if (x.aliases) {
@ -118,7 +125,8 @@ export default Vue.extend({
name: alias, name: alias,
aliasOf: x.name, aliasOf: x.name,
emoji: `:${x.name}:`, emoji: `:${x.name}:`,
url: x.url url: x.url,
isCustomEmoji: true
}); });
}); });
} }

View File

@ -1,59 +1,77 @@
<template> <template>
<img class="mk-emoji" :src="url" :alt="alt || name" :title="name"> <img v-if="customEmoji" class="fvgwvorwhxigeolkkrcderjzcawqrscl custom" :src="url" :alt="alt" :title="alt"/>
<img v-else-if="char && !useOsDefaultEmojis" class="fvgwvorwhxigeolkkrcderjzcawqrscl" :src="url" :alt="alt" :title="alt"/>
<span v-else-if="char && useOsDefaultEmojis">{{ char }}</span>
<span v-else>:{{ name }}:</span>
</template> </template>
<script lang="ts"> <script lang="ts">
import Vue from 'vue'; import Vue from 'vue';
import { lib } from 'emojilib'; import { lib } from 'emojilib';
const findCustomEmoji = (x, emoji) =>
x.name === emoji ||
x.aliases && x.aliases.includes(emoji);
export default Vue.extend({ export default Vue.extend({
props: { props: {
name: {
type: String,
required: false
},
emoji: { emoji: {
type: String, type: String,
required: false required: false
}, },
raw: {
type: String,
required: false
},
customEmojis: { customEmojis: {
required: false required: false,
default: []
} }
}, },
data() { data() {
return { return {
url: null, url: null,
alt: null, char: null,
name: null customEmoji: null
} }
}, },
mounted() {
this.$nextTick(() => this.exec()); computed: {
alt(): string {
return this.customEmoji ? this.customEmoji.name : this.char;
},
useOsDefaultEmojis(): boolean {
return this.$store.state.device.useOsDefaultEmojis;
}
}, },
methods: {
exec() { created() {
const { emoji, raw, customEmojis } = this; if (this.name) {
this.name = emoji ? `:${emoji}:` : raw; const customEmoji = this.customEmojis.find(x => x.name == this.name);
if (!raw && customEmojis && customEmojis.length) { if (customEmoji) {
this.url = customEmojis.find(x => findCustomEmoji(x, emoji)).url; this.customEmoji = customEmoji;
} else { // *MEM: `customEmojis` always has a emoji named `emoji` this.url = customEmoji.url;
const char = raw || lib[emoji] && lib[emoji].char; } else {
if (char) { const emoji = lib[this.name];
this.url = `https://twemoji.maxcdn.com/2/svg/${char.codePointAt(0).toString(16)}.svg`; if (emoji) {
this.alt = char; this.char = emoji.char;
} }
} }
} else {
this.char = this.emoji;
}
if (this.char) {
this.url = `https://twemoji.maxcdn.com/2/svg/${this.char.codePointAt(0).toString(16)}.svg`;
} }
} }
}); });
</script> </script>
<style lang="stylus" scoped> <style lang="stylus" scoped>
.mk-emoji .fvgwvorwhxigeolkkrcderjzcawqrscl
height 2.5em height 1em
vertical-align middle
&.custom
height 2.5em
vertical-align middle
</style> </style>

View File

@ -187,10 +187,10 @@ export default Vue.component('misskey-flavored-markdown', {
} }
case 'emoji': { case 'emoji': {
const { emoji, raw } = token; const { emoji, name } = token;
const { customEmojis } = this; const { customEmojis } = this;
return [createElement('mk-emoji', { return [createElement('mk-emoji', {
attrs: { emoji, raw }, attrs: { emoji, name },
props: { customEmojis } props: { customEmojis }
})]; })];
} }

View File

@ -145,6 +145,7 @@ class Autocomplete {
} else { } else {
// サジェスト要素作成 // サジェスト要素作成
this.suggestion = new MkAutocomplete({ this.suggestion = new MkAutocomplete({
parent: this.vm,
propsData: { propsData: {
textarea: this.textarea, textarea: this.textarea,
complete: this.complete, complete: this.complete,

View File

@ -115,6 +115,7 @@
<ui-switch v-model="reduceMotion">%i18n:common.reduce-motion%</ui-switch> <ui-switch v-model="reduceMotion">%i18n:common.reduce-motion%</ui-switch>
<ui-switch v-model="contrastedAcct">%i18n:@contrasted-acct%</ui-switch> <ui-switch v-model="contrastedAcct">%i18n:@contrasted-acct%</ui-switch>
<ui-switch v-model="showFullAcct">%i18n:common.show-full-acct%</ui-switch> <ui-switch v-model="showFullAcct">%i18n:common.show-full-acct%</ui-switch>
<ui-switch v-model="useOsDefaultEmojis">%i18n:common.use-os-default-emojis%</ui-switch>
<ui-switch v-model="iLikeSushi">%i18n:common.i-like-sushi%</ui-switch> <ui-switch v-model="iLikeSushi">%i18n:common.i-like-sushi%</ui-switch>
</section> </section>
<section> <section>
@ -324,6 +325,11 @@ export default Vue.extend({
}; };
}, },
computed: { computed: {
useOsDefaultEmojis: {
get() { return this.$store.state.device.useOsDefaultEmojis; },
set(value) { this.$store.commit('device/set', { key: 'useOsDefaultEmojis', value }); }
},
reduceMotion: { reduceMotion: {
get() { return this.$store.state.device.reduceMotion; }, get() { return this.$store.state.device.reduceMotion; },
set(value) { this.$store.commit('device/set', { key: 'reduceMotion', value }); } set(value) { this.$store.commit('device/set', { key: 'reduceMotion', value }); }

View File

@ -23,6 +23,7 @@
<ui-switch v-model="reduceMotion">%i18n:common.reduce-motion% (%i18n:common.this-setting-is-this-device-only%)</ui-switch> <ui-switch v-model="reduceMotion">%i18n:common.reduce-motion% (%i18n:common.this-setting-is-this-device-only%)</ui-switch>
<ui-switch v-model="contrastedAcct">%i18n:@contrasted-acct%</ui-switch> <ui-switch v-model="contrastedAcct">%i18n:@contrasted-acct%</ui-switch>
<ui-switch v-model="showFullAcct">%i18n:common.show-full-acct%</ui-switch> <ui-switch v-model="showFullAcct">%i18n:common.show-full-acct%</ui-switch>
<ui-switch v-model="useOsDefaultEmojis">%i18n:common.use-os-default-emojis%</ui-switch>
<ui-switch v-model="iLikeSushi">%i18n:common.i-like-sushi%</ui-switch> <ui-switch v-model="iLikeSushi">%i18n:common.i-like-sushi%</ui-switch>
<ui-switch v-model="disableAnimatedMfm">%i18n:common.disable-animated-mfm%</ui-switch> <ui-switch v-model="disableAnimatedMfm">%i18n:common.disable-animated-mfm%</ui-switch>
<ui-switch v-model="alwaysShowNsfw">%i18n:common.always-show-nsfw% (%i18n:common.this-setting-is-this-device-only%)</ui-switch> <ui-switch v-model="alwaysShowNsfw">%i18n:common.always-show-nsfw% (%i18n:common.this-setting-is-this-device-only%)</ui-switch>
@ -199,6 +200,11 @@ export default Vue.extend({
set(value) { this.$store.commit('device/set', { key: 'darkmode', value }); } set(value) { this.$store.commit('device/set', { key: 'darkmode', value }); }
}, },
useOsDefaultEmojis: {
get() { return this.$store.state.device.useOsDefaultEmojis; },
set(value) { this.$store.commit('device/set', { key: 'useOsDefaultEmojis', value }); }
},
reduceMotion: { reduceMotion: {
get() { return this.$store.state.device.reduceMotion; }, get() { return this.$store.state.device.reduceMotion; },
set(value) { this.$store.commit('device/set', { key: 'reduceMotion', value }); } set(value) { this.$store.commit('device/set', { key: 'reduceMotion', value }); }

View File

@ -62,7 +62,8 @@ const defaultDeviceSettings = {
deckColumnAlign: 'center', deckColumnAlign: 'center',
mobileNotificationPosition: 'bottom', mobileNotificationPosition: 'bottom',
deckTemporaryColumn: null, deckTemporaryColumn: null,
deckDefault: false deckDefault: false,
useOsDefaultEmojis: false
}; };
export default (os: MiOS) => new Vuex.Store({ export default (os: MiOS) => new Vuex.Store({

View File

@ -8,27 +8,26 @@ export type TextElementEmoji = {
type: 'emoji'; type: 'emoji';
content: string; content: string;
emoji?: string; emoji?: string;
raw?: string; name?: string;
}; };
export default function(text: string) { export default function(text: string) {
const name = text.match(/^:([a-zA-Z0-9+_-]+):/); const name = text.match(/^:([a-zA-Z0-9+_-]+):/);
if (name) { if (name) {
const [content, emoji] = name; return {
type: 'emoji',
content: name[0],
name: name[1]
} as TextElementEmoji;
}
const unicode = text.match(emojiRegex);
if (unicode) {
const [content, emoji] = unicode;
return { return {
type: 'emoji', type: 'emoji',
content, content,
emoji emoji
} as TextElementEmoji; } as TextElementEmoji;
} }
const unicode = text.match(emojiRegex);
if (unicode) {
const [content, raw] = unicode;
return {
type: 'emoji',
content,
raw
} as TextElementEmoji;
}
return null; return null;
} }

View File

@ -2,5 +2,5 @@ import parse from '../../../mfm/parse';
export default function(text: string) { export default function(text: string) {
if (!text) return []; if (!text) return [];
return parse(text).filter(t => t.type === 'emoji').map(t => (t as any).emoji); return parse(text).filter(t => t.type === 'emoji' && t.name).map(t => (t as any).name);
} }

View File

@ -8,9 +8,7 @@ import Note, { INote } from '../../../models/note';
import User from '../../../models/user'; import User from '../../../models/user';
import toHtml from '../misc/get-note-html'; import toHtml from '../misc/get-note-html';
import parseMfm from '../../../mfm/parse'; import parseMfm from '../../../mfm/parse';
import getEmojiNames from '../misc/get-emoji-names';
import Emoji, { IEmoji } from '../../../models/emoji'; import Emoji, { IEmoji } from '../../../models/emoji';
import { unique } from '../../../prelude/array';
export default async function renderNote(note: INote, dive = true): Promise<any> { export default async function renderNote(note: INote, dive = true): Promise<any> {
const promisedFiles: Promise<IDriveFile[]> = note.fileIds const promisedFiles: Promise<IDriveFile[]> = note.fileIds
@ -110,8 +108,7 @@ export default async function renderNote(note: INote, dive = true): Promise<any>
const content = toHtml(Object.assign({}, note, { text })); const content = toHtml(Object.assign({}, note, { text }));
const emojiNames = unique(getEmojiNames(content)); const emojis = await getEmojis(note.emojis);
const emojis = await getEmojis(emojiNames);
const apemojis = emojis.map(emoji => renderEmoji(emoji)); const apemojis = emojis.map(emoji => renderEmoji(emoji));
const tag = [ const tag = [

View File

@ -456,8 +456,8 @@ function extractHashtags(tokens: ReturnType<typeof parse>): string[] {
function extractEmojis(tokens: ReturnType<typeof parse>): string[] { function extractEmojis(tokens: ReturnType<typeof parse>): string[] {
// Extract emojis // Extract emojis
const emojis = tokens const emojis = tokens
.filter(t => t.type == 'emoji') .filter(t => t.type == 'emoji' && t.name)
.map(t => (t as TextElementEmoji).emoji) .map(t => (t as TextElementEmoji).name)
.filter(emoji => emoji.length <= 100); .filter(emoji => emoji.length <= 100);
return unique(emojis); return unique(emojis);

View File

@ -182,14 +182,14 @@ describe('Text', () => {
it('emoji', () => { it('emoji', () => {
const tokens1 = analyze(':cat:'); const tokens1 = analyze(':cat:');
assert.deepEqual([ assert.deepEqual([
{ type: 'emoji', content: ':cat:', emoji: 'cat'} { type: 'emoji', content: ':cat:', name: 'cat'}
], tokens1); ], tokens1);
const tokens2 = analyze(':cat::cat::cat:'); const tokens2 = analyze(':cat::cat::cat:');
assert.deepEqual([ assert.deepEqual([
{ type: 'emoji', content: ':cat:', emoji: 'cat'}, { type: 'emoji', content: ':cat:', name: 'cat'},
{ type: 'emoji', content: ':cat:', emoji: 'cat'}, { type: 'emoji', content: ':cat:', name: 'cat'},
{ type: 'emoji', content: ':cat:', emoji: 'cat'} { type: 'emoji', content: ':cat:', name: 'cat'}
], tokens2); ], tokens2);
}); });