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

feat: ✨ delay function in animated MFM

This commit is contained in:
ThatOneCalculator 2023-06-09 11:46:55 -07:00
parent 3f3d777e6e
commit 3cc8f60ee9
No known key found for this signature in database
GPG Key ID: 8703CACD01000000
2 changed files with 32 additions and 17 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

33
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 validNumber = (n: string | null | undefined) => {
if (n == null) return null;
const parsed = parseFloat(n);
return !isNaN(parsed) && isFinite(parsed) && parsed > 0;
};
// const validEase = (e: string | null | undefined) => { // const validEase = (e: string | null | undefined) => {
// if (e == null) return null; // if (e == null) return null;
// return e.match(/(steps)?\(-?[0-9.]+,-?[0-9.]+,-?[0-9.]+,-?[0-9.]+\)/) // return e.match(/(steps)?\(-?[0-9.]+,-?[0-9.]+,-?[0-9.]+,-?[0-9.]+\)/)
@ -109,26 +115,30 @@ export default defineComponent({
case "tada": { case "tada": {
const speed = validTime(token.props.args.speed) || "1s"; const speed = validTime(token.props.args.speed) || "1s";
const delay = validTime(token.props.args.delay) || "0s"; const delay = validTime(token.props.args.delay) || "0s";
const loop = validNumber(token.props.args.loop) || "infinite";
// const ease = validEase(token.props.args.ease) || "linear"; // const ease = validEase(token.props.args.ease) || "linear";
style = `font-size: 150%; animation: tada ${speed} ${delay} linear infinite both;`; style = `font-size: 150%; animation: tada ${speed} ${delay} linear ${loop} both;`;
break; break;
} }
case "jelly": { case "jelly": {
const speed = validTime(token.props.args.speed) || "1s"; const speed = validTime(token.props.args.speed) || "1s";
const delay = validTime(token.props.args.delay) || "0s"; const delay = validTime(token.props.args.delay) || "0s";
style = `animation: mfm-rubberBand ${speed} ${delay} linear infinite both;`; const loop = validNumber(token.props.args.loop) || "infinite";
style = `animation: mfm-rubberBand ${speed} ${delay} linear ${loop} 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";
const delay = validTime(token.props.args.delay) || "0s"; const delay = validTime(token.props.args.delay) || "0s";
style = `animation: mfm-twitch ${speed} ${delay} ease infinite;`; const loop = validNumber(token.props.args.loop) || "infinite";
style = `animation: mfm-twitch ${speed} ${delay} ease ${loop};`;
break; break;
} }
case "shake": { case "shake": {
const speed = validTime(token.props.args.speed) || "0.5s"; const speed = validTime(token.props.args.speed) || "0.5s";
const delay = validTime(token.props.args.delay) || "0s"; const delay = validTime(token.props.args.delay) || "0s";
style = `animation: mfm-shake ${speed} ${delay} ease infinite;`; const loop = validNumber(token.props.args.loop) || "infinite";
style = `animation: mfm-shake ${speed} ${delay} ease ${loop};`;
break; break;
} }
case "spin": { case "spin": {
@ -144,25 +154,29 @@ export default defineComponent({
: "mfm-spin"; : "mfm-spin";
const speed = validTime(token.props.args.speed) || "1.5s"; const speed = validTime(token.props.args.speed) || "1.5s";
const delay = validTime(token.props.args.delay) || "0s"; const delay = validTime(token.props.args.delay) || "0s";
style = `animation: ${anime} ${speed} ${delay} linear infinite; animation-direction: ${direction};`; const loop = validNumber(token.props.args.loop) || "infinite";
style = `animation: ${anime} ${speed} ${delay} linear ${loop}; 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";
const delay = validTime(token.props.args.delay) || "0s"; const delay = validTime(token.props.args.delay) || "0s";
style = `animation: mfm-jump ${speed} ${delay} linear infinite;`; const loop = validNumber(token.props.args.loop) || "infinite";
style = `animation: mfm-jump ${speed} ${delay} linear ${loop};`;
break; break;
} }
case "bounce": { case "bounce": {
const speed = validTime(token.props.args.speed) || "0.75s"; const speed = validTime(token.props.args.speed) || "0.75s";
const delay = validTime(token.props.args.delay) || "0s"; const delay = validTime(token.props.args.delay) || "0s";
style = `animation: mfm-bounce ${speed} ${delay} linear infinite; transform-origin: center bottom;`; const loop = validNumber(token.props.args.loop) || "infinite";
style = `animation: mfm-bounce ${speed} ${delay} linear ${loop}; 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";
const delay = validTime(token.props.args.delay) || "0s"; const delay = validTime(token.props.args.delay) || "0s";
style = `animation: mfm-rainbow ${speed} ${delay} linear infinite;`; const loop = validNumber(token.props.args.loop) || "infinite";
style = `animation: mfm-rainbow ${speed} ${delay} linear ${loop};`;
break; break;
} }
case "sparkle": { case "sparkle": {
@ -177,7 +191,8 @@ export default defineComponent({
: "alternate"; : "alternate";
const speed = validTime(token.props.args.speed) || "1.5s"; const speed = validTime(token.props.args.speed) || "1.5s";
const delay = validTime(token.props.args.delay) || "0s"; const delay = validTime(token.props.args.delay) || "0s";
style = `animation: mfm-fade ${speed} ${delay} linear infinite; animation-direction: ${direction};`; const loop = validNumber(token.props.args.loop) || "infinite";
style = `animation: mfm-fade ${speed} ${delay} linear ${loop}; animation-direction: ${direction};`;
break; break;
} }
case "flip": { case "flip": {

16
packages/client/src/pages/mfm-cheat-sheet.vue
View File

@ -472,14 +472,14 @@ let preview_quote = $ref(`> ${i18n.ts._mfm.dummy}`);
let preview_search = $ref( let preview_search = $ref(
`${i18n.ts._mfm.dummy} [search]\n${i18n.ts._mfm.dummy} [検索]\n${i18n.ts._mfm.dummy} 検索` `${i18n.ts._mfm.dummy} [search]\n${i18n.ts._mfm.dummy} [検索]\n${i18n.ts._mfm.dummy} 検索`
); );
let preview_jelly = $ref("$[jelly 🍮] $[jelly.speed=3s 🍮] $[jelly.delay=3s 🍮]"); let preview_jelly = $ref("$[jelly 🍮] $[jelly.speed=3s 🍮] $[jelly.delay=3s 🍮] $[jelly.loop=3 🍮]");
let preview_tada = $ref("$[tada 🍮] $[tada.speed=3s 🍮] $[tada.delay=3s 🍮]"); let preview_tada = $ref("$[tada 🍮] $[tada.speed=3s 🍮] $[tada.delay=3s 🍮] $[tada.loop=3 🍮]");
let preview_jump = $ref("$[jump 🍮] $[jump.speed=3s 🍮] $[jump.delay=3s 🍮]"); let preview_jump = $ref("$[jump 🍮] $[jump.speed=3s 🍮] $[jump.delay=3s 🍮] $[jump.loop=3 🍮]");
let preview_bounce = $ref("$[bounce 🍮] $[bounce.speed=3s 🍮] $[bounce.delay=3s 🍮]"); let preview_bounce = $ref("$[bounce 🍮] $[bounce.speed=3s 🍮] $[bounce.delay=3s 🍮] $[bounce.loop=3 🍮]");
let preview_shake = $ref("$[shake 🍮] $[shake.speed=3s 🍮] $[shake.delay=3s 🍮]"); let preview_shake = $ref("$[shake 🍮] $[shake.speed=3s 🍮] $[shake.delay=3s 🍮] $[shake.loop=3 🍮]");
let preview_twitch = $ref("$[twitch 🍮] $[twitch.speed=3s 🍮] $[twitch.delay=3s 🍮]"); let preview_twitch = $ref("$[twitch 🍮] $[twitch.speed=3s 🍮] $[twitch.delay=3s 🍮] $[twitch.loop=3 🍮]");
let preview_spin = $ref( let preview_spin = $ref(
"$[spin 🍮] $[spin.left 🍮] $[spin.alternate 🍮]\n$[spin.x 🍮] $[spin.x,left 🍮] $[spin.x,alternate 🍮]\n$[spin.y 🍮] $[spin.y,left 🍮] $[spin.y,alternate 🍮]\n\n$[spin.speed=3s 🍮] $[spin.delay=3s 🍮]" "$[spin 🍮] $[spin.left 🍮] $[spin.alternate 🍮]\n$[spin.x 🍮] $[spin.x,left 🍮] $[spin.x,alternate 🍮]\n$[spin.y 🍮] $[spin.y,left 🍮] $[spin.y,alternate 🍮]\n\n$[spin.speed=3s 🍮] $[spin.delay=3s 🍮] $[spin.loop=3 🍮]"
); );
let preview_flip = $ref( let preview_flip = $ref(
`$[flip ${i18n.ts._mfm.dummy}]\n$[flip.v ${i18n.ts._mfm.dummy}]\n$[flip.h,v ${i18n.ts._mfm.dummy}]` `$[flip ${i18n.ts._mfm.dummy}]\n$[flip.v ${i18n.ts._mfm.dummy}]\n$[flip.h,v ${i18n.ts._mfm.dummy}]`
@ -491,7 +491,7 @@ let preview_x2 = $ref("$[x2 🍮]");
let preview_x3 = $ref("$[x3 🍮]"); let preview_x3 = $ref("$[x3 🍮]");
let preview_x4 = $ref("$[x4 🍮]"); let preview_x4 = $ref("$[x4 🍮]");
let preview_blur = $ref(`$[blur ${i18n.ts._mfm.dummy}]`); let preview_blur = $ref(`$[blur ${i18n.ts._mfm.dummy}]`);
let preview_rainbow = $ref("$[rainbow 🍮] $[rainbow.speed=3s 🍮] $[rainbow.delay=3s 🍮]"); let preview_rainbow = $ref("$[rainbow 🍮] $[rainbow.speed=3s 🍮] $[rainbow.delay=3s 🍮] $[rainbow.loop=3 🍮]");
let preview_sparkle = $ref("$[sparkle 🍮]"); let preview_sparkle = $ref("$[sparkle 🍮]");
let preview_rotate = $ref( let preview_rotate = $ref(
"$[rotate 🍮]\n$[rotate.deg=45 🍮]\n$[rotate.x,deg=45 Hello, world!]" "$[rotate 🍮]\n$[rotate.deg=45 🍮]\n$[rotate.x,deg=45 Hello, world!]"