natty
/
calckey
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Add delay & start adding cubic-bezier to mfm

This commit is contained in:
Freeplay 2023-06-02 14:44:41 -04:00
parent caa6408e03
commit 1efb167f8f
1 changed files with 23 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

32
packages/client/src/components/mfm.ts
View File

@ -57,6 +57,10 @@ export default defineComponent({
if (t == null) return null; if (t == null) return null;
return t.match(/^[0-9.]+s$/) ? t : null; return t.match(/^[0-9.]+s$/) ? t : null;
}; };
const validEase = (e: string | null | undefined) => {
if (e == null) return null;
return e.match(/\(-?[0-9.]+,-?[0-9.]+,-?[0-9.]+,-?[0-9.]+\)/) ? e : null;
}
const genEl = (ast: mfm.MfmNode[]) => const genEl = (ast: mfm.MfmNode[]) =>
concat( concat(
@ -102,22 +106,27 @@ export default defineComponent({
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%; animation: tada ${speed} linear infinite both;`; const delay = validTime(token.props.args.delay) || "0s";
const ease = validEase(token.props.args.ease) ?? "(0,0,1,1)";
style = `font-size: 150%; animation: tada ${speed} ${delay} cubic-bezier${ease} 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 = `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; break;
} }
case "twitch": { case "twitch": {
const speed = validTime(token.props.args.speed) || "0.5s"; 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; break;
} }
case "shake": { case "shake": {
const speed = validTime(token.props.args.speed) || "0.5s"; 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; break;
} }
case "spin": { case "spin": {
@ -132,22 +141,26 @@ export default defineComponent({
? "mfm-spinY" ? "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 = `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; break;
} }
case "jump": { case "jump": {
const speed = validTime(token.props.args.speed) || "0.75s"; 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; break;
} }
case "bounce": { case "bounce": {
const speed = validTime(token.props.args.speed) || "0.75s"; 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; break;
} }
case "rainbow": { case "rainbow": {
const speed = validTime(token.props.args.speed) || "1s"; 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; break;
} }
case "sparkle": { case "sparkle": {
@ -161,7 +174,8 @@ export default defineComponent({
? "alternate-reverse" ? "alternate-reverse"
: "alternate"; : "alternate";
const speed = validTime(token.props.args.speed) || "1.5s"; 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; break;
} }
case "flip": { case "flip": {