Mizah/mizzkey
1
0
Fork 0
Code Issues Pull requests Actions Packages Projects Releases Wiki Activity

enhance(client): add new mfm function (position, fg, bg)

Browse source 
Resolve #9527
This commit is contained in:
syuilo 2023-01-14 08:52:32 +09:00
parent 4151087d3c
commit 367ccb9971
3 changed files with 30 additions and 11 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

1
CHANGELOG.md
View file

@ -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: add heatmap of daily active users to about page @syuilo
- Client: introduce fluent emoji @syuilo - Client: introduce fluent emoji @syuilo
- Client: add new theme @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 fireworks when visit user who today is birthday @syuilo
- Client: show bot warning on screen when logged in as bot account @syuilo - Client: show bot warning on screen when logged in as bot account @syuilo
- Client: improve overall performance of client @syuilo - Client: improve overall performance of client @syuilo

36
packages/frontend/src/components/mfm.ts
View file

@ -87,22 +87,22 @@ export default defineComponent({
let style; let style;
switch (token.props.name) { switch (token.props.name) {
case 'tada': { 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;` : ''); style = 'font-size: 150%;' + (this.$store.state.animatedMfm ? `animation: tada ${speed} linear infinite both;` : '');
break; break;
} }
case 'jelly': { 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;` : ''); style = (this.$store.state.animatedMfm ? `animation: mfm-rubberBand ${speed} linear infinite both;` : '');
break; break;
} }
case 'twitch': { 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;` : ''; style = this.$store.state.animatedMfm ? `animation: mfm-twitch ${speed} ease infinite;` : '';
break; break;
} }
case 'shake': { 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;` : ''; style = this.$store.state.animatedMfm ? `animation: mfm-shake ${speed} ease infinite;` : '';
break; break;
} }
@ -115,17 +115,17 @@ export default defineComponent({
token.props.args.x ? 'mfm-spinX' : token.props.args.x ? 'mfm-spinX' :
token.props.args.y ? 'mfm-spinY' : token.props.args.y ? 'mfm-spinY' :
'mfm-spin'; '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};` : ''; style = this.$store.state.animatedMfm ? `animation: ${anime} ${speed} linear infinite; animation-direction: ${direction};` : '';
break; break;
} }
case 'jump': { 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;` : ''; style = this.$store.state.animatedMfm ? `animation: mfm-jump ${speed} linear infinite;` : '';
break; break;
} }
case 'bounce': { 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;` : ''; style = this.$store.state.animatedMfm ? `animation: mfm-bounce ${speed} linear infinite; transform-origin: center bottom;` : '';
break; break;
} }
@ -170,7 +170,7 @@ export default defineComponent({
}, genEl(token.children)); }, genEl(token.children));
} }
case 'rainbow': { 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;` : ''; style = this.$store.state.animatedMfm ? `animation: mfm-rainbow ${speed} linear infinite;` : '';
break; break;
} }
@ -181,10 +181,28 @@ export default defineComponent({
return h(MkSparkle, {}, genEl(token.children)); return h(MkSparkle, {}, genEl(token.children));
} }
case 'rotate': { 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;`; style = `transform: rotate(${degrees}deg); transform-origin: center center;`;
break; 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) { if (style == null) {
return h('span', {}, ['$[', token.props.name, ' ', ...genEl(token.children), ']']); return h('span', {}, ['$[', token.props.name, ' ', ...genEl(token.children), ']']);

2
packages/frontend/src/scripts/mfm-tags.ts
View file

@ -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'];