v12 (#5712)

Co-authored-by: MeiMei <30769358+mei23@users.noreply.github.com> Co-authored-by: Satsuki Yanagi <17376330+u1-liquid@users.noreply.github.com>
2020-01-30 04:37:25 +09:00
parent a5955c1123
commit f6154dc0af
871 changed files with 26140 additions and 71950 deletions
--- a/src/client/components/emoji.vue
+++ b/src/client/components/emoji.vue
@@ -0,0 +1,132 @@
+<template>
+<img v-if="customEmoji" class="mk-emoji custom" :class="{ normal, noStyle }" :src="url" :alt="alt" :title="alt"/>
+<img v-else-if="char && !useOsDefaultEmojis" class="mk-emoji" :src="url" :alt="alt" :title="alt"/>
+<span v-else-if="char && useOsDefaultEmojis">{{ char }}</span>
+<span v-else>:{{ name }}:</span>
+</template>
+
+<script lang="ts">
+import Vue from 'vue';
+import { getStaticImageUrl } from '../scripts/get-static-image-url';
+import { twemojiSvgBase } from '../../misc/twemoji-base';
+
+export default Vue.extend({
+	props: {
+		name: {
+			type: String,
+			required: false
+		},
+		emoji: {
+			type: String,
+			required: false
+		},
+		normal: {
+			type: Boolean,
+			required: false,
+			default: false
+		},
+		noStyle: {
+			type: Boolean,
+			required: false,
+			default: false
+		},
+		customEmojis: {
+			required: false,
+			default: () => []
+		},
+		isReaction: {
+			type: Boolean,
+			default: false
+		},
+	},
+
+	data() {
+		return {
+			url: null,
+			char: null,
+			customEmoji: null
+		}
+	},
+
+	computed: {
+		alt(): string {
+			return this.customEmoji ? `:${this.customEmoji.name}:` : this.char;
+		},
+
+		useOsDefaultEmojis(): boolean {
+			return this.$store.state.device.useOsDefaultEmojis && !this.isReaction;
+		}
+	},
+
+	watch: {
+		customEmojis() {
+			if (this.name) {
+				const customEmoji = this.customEmojis.find(x => x.name == this.name);
+				if (customEmoji) {
+					this.customEmoji = customEmoji;
+					this.url = this.$store.state.device.disableShowingAnimatedImages
+						? getStaticImageUrl(customEmoji.url)
+						: customEmoji.url;
+				}
+			}
+		},
+	},
+
+	created() {
+		if (this.name) {
+			const customEmoji = this.customEmojis.find(x => x.name == this.name);
+			if (customEmoji) {
+				this.customEmoji = customEmoji;
+				this.url = this.$store.state.device.disableShowingAnimatedImages
+					? getStaticImageUrl(customEmoji.url)
+					: customEmoji.url;
+			} else {
+				//const emoji = lib[this.name];
+				//if (emoji) {
+				//	this.char = emoji.char;
+				//}
+			}
+		} else {
+			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>
+
+<style lang="scss" scoped>
+.mk-emoji {
+	height: 1.25em;
+	vertical-align: -0.25em;
+
+	&.custom {
+		height: 2.5em;
+		vertical-align: middle;
+		transition: transform 0.2s ease;
+
+		&:hover {
+			transform: scale(1.2);
+		}
+
+		&.normal {
+			height: 1.25em;
+			vertical-align: -0.25em;
+
+			&:hover {
+				transform: none;
+			}
+		}
+	}
+
+	&.noStyle {
+		height: auto !important;
+	}
+}
+</style>