HoovesSocial/hippofish
2
0
Fork 0
Code Issues 3 Pull requests 1 Projects Releases Packages Wiki Activity Actions

Merge pull request '[PR]: Add delay to MFM' (#10248) from Freeplay/calckey:mfm into develop

Browse source 
Reviewed-on: https://codeberg.org/calckey/calckey/pulls/10248
This commit is contained in:
Kainoa Kanter 2023-06-05 22:38:33 +00:00
commit 5b73351e80
1 changed files with 25 additions and 9 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

34
packages/client/src/components/mfm.ts
View file

@ -57,6 +57,12 @@ export default defineComponent({
if (t == null) return null;
return t.match(/^[0-9.]+s$/) ? t : null;
};
// const validEase = (e: string | null | undefined) => {
// if (e == null) return null;
// return e.match(/(steps)?\(-?[0-9.]+,-?[0-9.]+,-?[0-9.]+,-?[0-9.]+\)/)
// ? (e.startsWith("steps") ? e : "cubic-bezier" + e)
// : null
// }
const genEl = (ast: mfm.MfmNode[]) =>
concat(
@ -102,22 +108,27 @@ export default defineComponent({
switch (token.props.name) {
case "tada": {
const speed = validTime(token.props.args.speed) || "1s";
style = `font-size: 150%; animation: tada ${speed} linear infinite both;`;
const delay = validTime(token.props.args.delay) || "0s";
// const ease = validEase(token.props.args.ease) || "linear";
style = `font-size: 150%; animation: tada ${speed} ${delay} linear infinite both;`;
break;
}
case "jelly": {
const speed = validTime(token.props.args.speed) || "1s";
style = `animation: mfm-rubberBand ${speed} linear infinite both;`;
const delay = validTime(token.props.args.delay) || "0s";
style = `animation: mfm-rubberBand ${speed} ${delay} linear infinite both;`;
break;
}
case "twitch": {
const speed = validTime(token.props.args.speed) || "0.5s";
style = `animation: mfm-twitch ${speed} ease infinite;`;
const delay = validTime(token.props.args.delay) || "0s";
style = `animation: mfm-twitch ${speed} ${delay} ease infinite;`;
break;
}
case "shake": {
const speed = validTime(token.props.args.speed) || "0.5s";
style = `animation: mfm-shake ${speed} ease infinite;`;
const delay = validTime(token.props.args.delay) || "0s";
style = `animation: mfm-shake ${speed} ${delay} ease infinite;`;
break;
}
case "spin": {
@ -132,22 +143,26 @@ export default defineComponent({
? "mfm-spinY"
: "mfm-spin";
const speed = validTime(token.props.args.speed) || "1.5s";
style = `animation: ${anime} ${speed} linear infinite; animation-direction: ${direction};`;
const delay = validTime(token.props.args.delay) || "0s";
style = `animation: ${anime} ${speed} ${delay} linear infinite; animation-direction: ${direction};`;
break;
}
case "jump": {
const speed = validTime(token.props.args.speed) || "0.75s";
style = `animation: mfm-jump ${speed} linear infinite;`;
const delay = validTime(token.props.args.delay) || "0s";
style = `animation: mfm-jump ${speed} ${delay} linear infinite;`;
break;
}
case "bounce": {
const speed = validTime(token.props.args.speed) || "0.75s";
style = `animation: mfm-bounce ${speed} linear infinite; transform-origin: center bottom;`;
const delay = validTime(token.props.args.delay) || "0s";
style = `animation: mfm-bounce ${speed} ${delay} linear infinite; transform-origin: center bottom;`;
break;
}
case "rainbow": {
const speed = validTime(token.props.args.speed) || "1s";
style = `animation: mfm-rainbow ${speed} linear infinite;`;
const delay = validTime(token.props.args.delay) || "0s";
style = `animation: mfm-rainbow ${speed} ${delay} linear infinite;`;
break;
}
case "sparkle": {
@ -161,7 +176,8 @@ export default defineComponent({
? "alternate-reverse"
: "alternate";
const speed = validTime(token.props.args.speed) || "1.5s";
style = `animation: mfm-fade ${speed} linear infinite; animation-direction: ${direction};`;
const delay = validTime(token.props.args.delay) || "0s";
style = `animation: mfm-fade ${speed} ${delay} linear infinite; animation-direction: ${direction};`;
break;
}
case "flip": {