refactor(client):

This commit is contained in:
syuilo 2021-12-05 16:57:49 +09:00
parent bed982e705
commit bcf7530eef
2 changed files with 29 additions and 57 deletions

View file

@ -6,9 +6,11 @@
</template> </template>
<script lang="ts"> <script lang="ts">
import { defineComponent } from 'vue'; import { computed, defineComponent, ref, watch } from 'vue';
import { getStaticImageUrl } from '@/scripts/get-static-image-url'; import { getStaticImageUrl } from '@/scripts/get-static-image-url';
import { twemojiSvgBase } from '@/scripts/twemoji-base'; import { twemojiSvgBase } from '@/scripts/twemoji-base';
import { defaultStore } from '@/store';
import { instance } from '@/instance';
export default defineComponent({ export default defineComponent({
props: { props: {
@ -35,61 +37,33 @@ export default defineComponent({
}, },
}, },
data() { setup(props) {
const isCustom = computed(() => props.emoji.startsWith(':'));
const char = computed(() => isCustom.value ? null : props.emoji);
const useOsNativeEmojis = computed(() => defaultStore.state.useOsNativeEmojis && !props.isReaction);
const ce = computed(() => props.customEmojis || instance.emojis || []);
const customEmoji = computed(() => isCustom.value ? ce.value.find(x => x.name === props.emoji.substr(1, props.emoji.length - 2)) : null);
const url = computed(() => {
if (char.value) {
let codes = Array.from(char.value).map(x => x.codePointAt(0).toString(16));
if (!codes.includes('200d')) codes = codes.filter(x => x != 'fe0f');
codes = codes.filter(x => x && x.length);
return `${twemojiSvgBase}/${codes.join('-')}.svg`;
} else {
return defaultStore.state.disableShowingAnimatedImages
? getStaticImageUrl(customEmoji.value.url)
: customEmoji.value.url;
}
});
const alt = computed(() => customEmoji.value ? `:${customEmoji.value.name}:` : char.value);
return { return {
url: null, url,
char: null, char,
customEmoji: null alt,
} customEmoji,
}, useOsNativeEmojis,
};
computed: {
isCustom(): boolean {
return this.emoji.startsWith(':');
},
alt(): string {
return this.customEmoji ? `:${this.customEmoji.name}:` : this.char;
},
useOsNativeEmojis(): boolean {
return this.$store.state.useOsNativeEmojis && !this.isReaction;
},
ce() {
return this.customEmojis || this.$instance?.emojis || [];
}
},
watch: {
ce: {
handler() {
if (this.isCustom) {
const customEmoji = this.ce.find(x => x.name === this.emoji.substr(1, this.emoji.length - 2));
if (customEmoji) {
this.customEmoji = customEmoji;
this.url = this.$store.state.disableShowingAnimatedImages
? getStaticImageUrl(customEmoji.url)
: customEmoji.url;
}
}
},
immediate: true
},
},
created() {
if (!this.isCustom) {
this.char = this.emoji;
}
if (this.char) {
let codes = Array.from(this.char).map(x => x.codePointAt(0).toString(16));
if (!codes.includes('200d')) codes = codes.filter(x => x != 'fe0f');
codes = codes.filter(x => x && x.length);
this.url = `${twemojiSvgBase}/${codes.join('-')}.svg`;
}
}, },
}); });
</script> </script>

View file

@ -172,7 +172,6 @@ export async function popup(component: Component | typeof import('*.vue') | Prom
const id = ++popupIdCount; const id = ++popupIdCount;
const dispose = () => { const dispose = () => {
if (_DEV_) console.log('os:popup close', id, component, props, events);
// このsetTimeoutが無いと挙動がおかしくなる(autocompleteが閉じなくなる)。Vueのバグ // このsetTimeoutが無いと挙動がおかしくなる(autocompleteが閉じなくなる)。Vueのバグ
setTimeout(() => { setTimeout(() => {
popups.value = popups.value.filter(popup => popup.id !== id); popups.value = popups.value.filter(popup => popup.id !== id);
@ -188,7 +187,6 @@ export async function popup(component: Component | typeof import('*.vue') | Prom
id, id,
}; };
if (_DEV_) console.log('os:popup open', id, component, props, events);
popups.value.push(state); popups.value.push(state);
return { return {