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

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

Reviewed-on: https://codeberg.org/calckey/calckey/pulls/10248
This commit is contained in:
Kainoa Kanter 2023-06-05 22:38:33 +00:00
parent c664d7da08 9382afeb5e
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; 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(/(steps)?\(-?[0-9.]+,-?[0-9.]+,-?[0-9.]+,-?[0-9.]+\)/)
// ? (e.startsWith("steps") ? e : "cubic-bezier" + e)
// : null
// }
const genEl = (ast: mfm.MfmNode[]) => const genEl = (ast: mfm.MfmNode[]) =>
concat( concat(
@ -102,22 +108,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) || "linear";
style = `font-size: 150%; animation: tada ${speed} ${delay} 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 = `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 +143,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 +176,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": {