From 3ea351d8a2f50f68dc695317062ba7f471ad7542 Mon Sep 17 00:00:00 2001 From: futchitwo <74236683+futchitwo@users.noreply.github.com> Date: Thu, 5 May 2022 22:52:33 +0900 Subject: [PATCH] Enhance(MFM): Allow speed changes in all animated MFMs (#8551) * MFM: Allow speed changes in all animated MFMs * Feature(MFM): Add speed property to cheat sheet * Use template literal Oops! * Remove unnecessary template string Co-authored-by: Johann150 Co-authored-by: Johann150 --- packages/client/src/components/mfm.ts | 12 ++++++++---- packages/client/src/pages/mfm-cheat-sheet.vue | 16 ++++++++-------- 2 files changed, 16 insertions(+), 12 deletions(-) diff --git a/packages/client/src/components/mfm.ts b/packages/client/src/components/mfm.ts index 37076652fd..6ac410762d 100644 --- a/packages/client/src/components/mfm.ts +++ b/packages/client/src/components/mfm.ts @@ -91,7 +91,8 @@ export default defineComponent({ let style; switch (token.props.name) { case 'tada': { - style = `font-size: 150%;` + (this.$store.state.animatedMfm ? 'animation: tada 1s linear infinite both;' : ''); + const speed = validTime(token.props.args.speed) || '1s'; + style = 'font-size: 150%;' + (this.$store.state.animatedMfm ? `animation: tada ${speed} linear infinite both;` : ''); break; } case 'jelly': { @@ -123,11 +124,13 @@ export default defineComponent({ break; } case 'jump': { - style = this.$store.state.animatedMfm ? 'animation: mfm-jump 0.75s linear infinite;' : ''; + const speed = validTime(token.props.args.speed) || '0.75s'; + style = this.$store.state.animatedMfm ? `animation: mfm-jump ${speed} linear infinite;` : ''; break; } case 'bounce': { - style = this.$store.state.animatedMfm ? 'animation: mfm-bounce 0.75s linear infinite; transform-origin: center bottom;' : ''; + const speed = validTime(token.props.args.speed) || '0.75s'; + style = this.$store.state.animatedMfm ? `animation: mfm-bounce ${speed} linear infinite; transform-origin: center bottom;` : ''; break; } case 'flip': { @@ -168,7 +171,8 @@ export default defineComponent({ }, genEl(token.children)); } case 'rainbow': { - style = this.$store.state.animatedMfm ? 'animation: mfm-rainbow 1s linear infinite;' : ''; + const speed = validTime(token.props.args.speed) || '1s'; + style = this.$store.state.animatedMfm ? `animation: mfm-rainbow ${speed} linear infinite;` : ''; break; } case 'sparkle': { diff --git a/packages/client/src/pages/mfm-cheat-sheet.vue b/packages/client/src/pages/mfm-cheat-sheet.vue index 83ae5741c3..aa35ec2158 100644 --- a/packages/client/src/pages/mfm-cheat-sheet.vue +++ b/packages/client/src/pages/mfm-cheat-sheet.vue @@ -325,20 +325,20 @@ export default defineComponent({ preview_inlineMath: '\\(x= \\frac{-b\' \\pm \\sqrt{(b\')^2-ac}}{a}\\)', preview_quote: `> ${this.$ts._mfm.dummy}`, preview_search: `${this.$ts._mfm.dummy} ๆคœ็ดข`, - preview_jelly: `$[jelly ๐Ÿฎ]`, - preview_tada: `$[tada ๐Ÿฎ]`, - preview_jump: `$[jump ๐Ÿฎ]`, - preview_bounce: `$[bounce ๐Ÿฎ]`, - preview_shake: `$[shake ๐Ÿฎ]`, - preview_twitch: `$[twitch ๐Ÿฎ]`, - preview_spin: `$[spin ๐Ÿฎ] $[spin.left ๐Ÿฎ] $[spin.alternate ๐Ÿฎ]\n$[spin.x ๐Ÿฎ] $[spin.x,left ๐Ÿฎ] $[spin.x,alternate ๐Ÿฎ]\n$[spin.y ๐Ÿฎ] $[spin.y,left ๐Ÿฎ] $[spin.y,alternate ๐Ÿฎ]`, + preview_jelly: `$[jelly ๐Ÿฎ] $[jelly.speed=5s ๐Ÿฎ]`, + preview_tada: `$[tada ๐Ÿฎ] $[tada.speed=5s ๐Ÿฎ]`, + preview_jump: `$[jump ๐Ÿฎ] $[jump.speed=5s ๐Ÿฎ]`, + preview_bounce: `$[bounce ๐Ÿฎ] $[bounce.speed=5s ๐Ÿฎ]`, + preview_shake: `$[shake ๐Ÿฎ] $[shake.speed=5s ๐Ÿฎ]`, + preview_twitch: `$[twitch ๐Ÿฎ] $[twitch.speed=5s ๐Ÿฎ]`, + preview_spin: `$[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=5s ๐Ÿฎ]`, preview_flip: `$[flip ${this.$ts._mfm.dummy}]\n$[flip.v ${this.$ts._mfm.dummy}]\n$[flip.h,v ${this.$ts._mfm.dummy}]`, preview_font: `$[font.serif ${this.$ts._mfm.dummy}]\n$[font.monospace ${this.$ts._mfm.dummy}]\n$[font.cursive ${this.$ts._mfm.dummy}]\n$[font.fantasy ${this.$ts._mfm.dummy}]`, preview_x2: `$[x2 ๐Ÿฎ]`, preview_x3: `$[x3 ๐Ÿฎ]`, preview_x4: `$[x4 ๐Ÿฎ]`, preview_blur: `$[blur ${this.$ts._mfm.dummy}]`, - preview_rainbow: `$[rainbow ๐Ÿฎ]`, + preview_rainbow: `$[rainbow ๐Ÿฎ] $[rainbow.speed=5s ๐Ÿฎ]`, preview_sparkle: `$[sparkle ๐Ÿฎ]`, preview_rotate: `$[rotate ๐Ÿฎ]`, }