From 367ccb99716ec559527241d6477d00d0c7c3dfe6 Mon Sep 17 00:00:00 2001 From: syuilo Date: Sat, 14 Jan 2023 08:52:32 +0900 Subject: [PATCH] enhance(client): add new mfm function (position, fg, bg) Resolve #9527 --- CHANGELOG.md | 1 + packages/frontend/src/components/mfm.ts | 38 +++++++++++++++++------ packages/frontend/src/scripts/mfm-tags.ts | 2 +- 3 files changed, 30 insertions(+), 11 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 75148a8892..c25b98d27a 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -111,6 +111,7 @@ You should also include the user name that made the change. - Client: add heatmap of daily active users to about page @syuilo - Client: introduce fluent emoji @syuilo - Client: add new theme @syuilo +- Client: add new mfm function (position, fg, bg) @syuilo - Client: show fireworks when visit user who today is birthday @syuilo - Client: show bot warning on screen when logged in as bot account @syuilo - Client: improve overall performance of client @syuilo diff --git a/packages/frontend/src/components/mfm.ts b/packages/frontend/src/components/mfm.ts index 0d5b45461a..32b009bdaa 100644 --- a/packages/frontend/src/components/mfm.ts +++ b/packages/frontend/src/components/mfm.ts @@ -87,22 +87,22 @@ export default defineComponent({ let style; switch (token.props.name) { case 'tada': { - const speed = validTime(token.props.args.speed) || '1s'; + const speed = validTime(token.props.args.speed) ?? '1s'; style = 'font-size: 150%;' + (this.$store.state.animatedMfm ? `animation: tada ${speed} linear infinite both;` : ''); break; } case 'jelly': { - const speed = validTime(token.props.args.speed) || '1s'; + const speed = validTime(token.props.args.speed) ?? '1s'; style = (this.$store.state.animatedMfm ? `animation: mfm-rubberBand ${speed} linear infinite both;` : ''); break; } case 'twitch': { - const speed = validTime(token.props.args.speed) || '0.5s'; + const speed = validTime(token.props.args.speed) ?? '0.5s'; style = this.$store.state.animatedMfm ? `animation: mfm-twitch ${speed} ease infinite;` : ''; break; } case 'shake': { - const speed = validTime(token.props.args.speed) || '0.5s'; + const speed = validTime(token.props.args.speed) ?? '0.5s'; style = this.$store.state.animatedMfm ? `animation: mfm-shake ${speed} ease infinite;` : ''; break; } @@ -115,17 +115,17 @@ export default defineComponent({ token.props.args.x ? 'mfm-spinX' : token.props.args.y ? 'mfm-spinY' : 'mfm-spin'; - const speed = validTime(token.props.args.speed) || '1.5s'; + const speed = validTime(token.props.args.speed) ?? '1.5s'; style = this.$store.state.animatedMfm ? `animation: ${anime} ${speed} linear infinite; animation-direction: ${direction};` : ''; break; } case 'jump': { - const speed = validTime(token.props.args.speed) || '0.75s'; + const speed = validTime(token.props.args.speed) ?? '0.75s'; style = this.$store.state.animatedMfm ? `animation: mfm-jump ${speed} linear infinite;` : ''; break; } case 'bounce': { - const speed = validTime(token.props.args.speed) || '0.75s'; + const speed = validTime(token.props.args.speed) ?? '0.75s'; style = this.$store.state.animatedMfm ? `animation: mfm-bounce ${speed} linear infinite; transform-origin: center bottom;` : ''; break; } @@ -170,7 +170,7 @@ export default defineComponent({ }, genEl(token.children)); } case 'rainbow': { - const speed = validTime(token.props.args.speed) || '1s'; + const speed = validTime(token.props.args.speed) ?? '1s'; style = this.$store.state.animatedMfm ? `animation: mfm-rainbow ${speed} linear infinite;` : ''; break; } @@ -181,16 +181,34 @@ export default defineComponent({ return h(MkSparkle, {}, genEl(token.children)); } case 'rotate': { - const degrees = parseInt(token.props.args.deg) || '90'; + const degrees = parseInt(token.props.args.deg) ?? '90'; style = `transform: rotate(${degrees}deg); transform-origin: center center;`; break; } + case 'position': { + const x = parseInt(token.props.args.x ?? '0'); + const y = parseInt(token.props.args.y ?? '0'); + style = `transform: translateX(${x}em) translateY(${y}em);`; + break; + } + case 'fg': { + let color = token.props.args.color; + if (!/^[0-9a-f]{3,6}$/i.test(color)) color = 'f00'; + style = `color: #${color};`; + break; + } + case 'bg': { + let color = token.props.args.color; + if (!/^[0-9a-f]{3,6}$/i.test(color)) color = 'f00'; + style = `background-color: #${color};`; + break; + } } if (style == null) { return h('span', {}, ['$[', token.props.name, ' ', ...genEl(token.children), ']']); } else { return h('span', { - style: 'display: inline-block;' + style, + style: 'display: inline-block; ' + style, }, genEl(token.children)); } } diff --git a/packages/frontend/src/scripts/mfm-tags.ts b/packages/frontend/src/scripts/mfm-tags.ts index 18e8d7038a..be944a7139 100644 --- a/packages/frontend/src/scripts/mfm-tags.ts +++ b/packages/frontend/src/scripts/mfm-tags.ts @@ -1 +1 @@ -export const MFM_TAGS = ['tada', 'jelly', 'twitch', 'shake', 'spin', 'jump', 'bounce', 'flip', 'x2', 'x3', 'x4', 'font', 'blur', 'rainbow', 'sparkle', 'rotate']; +export const MFM_TAGS = ['tada', 'jelly', 'twitch', 'shake', 'spin', 'jump', 'bounce', 'flip', 'x2', 'x3', 'x4', 'position', 'fg', 'bg', 'font', 'blur', 'rainbow', 'sparkle', 'rotate'];