Fix CSS injection at MFM speed (#7051)
This commit is contained in:
parent
761071e1ce
commit
e74a47916d
1 changed files with 9 additions and 4 deletions
|
@ -48,6 +48,11 @@ export default defineComponent({
|
||||||
|
|
||||||
const ast = (this.plain ? parsePlain : parse)(this.text);
|
const ast = (this.plain ? parsePlain : parse)(this.text);
|
||||||
|
|
||||||
|
const validTime = (t: string | null | undefined) => {
|
||||||
|
if (t == null) return null;
|
||||||
|
return t.match(/^[0-9.]+s$/) ? t : null;
|
||||||
|
};
|
||||||
|
|
||||||
const genEl = (ast: MfmForest) => concat(ast.map((token): VNode[] => {
|
const genEl = (ast: MfmForest) => concat(ast.map((token): VNode[] => {
|
||||||
switch (token.node.type) {
|
switch (token.node.type) {
|
||||||
case 'text': {
|
case 'text': {
|
||||||
|
@ -86,17 +91,17 @@ export default defineComponent({
|
||||||
break;
|
break;
|
||||||
}
|
}
|
||||||
case 'jelly': {
|
case 'jelly': {
|
||||||
const speed = token.node.props.args.speed || '1s';
|
const speed = validTime(token.node.props.args.speed) || '1s';
|
||||||
style = (this.$store.state.animatedMfm ? `animation: mfm-rubberBand ${speed} linear infinite both;` : '');
|
style = (this.$store.state.animatedMfm ? `animation: mfm-rubberBand ${speed} linear infinite both;` : '');
|
||||||
break;
|
break;
|
||||||
}
|
}
|
||||||
case 'twitch': {
|
case 'twitch': {
|
||||||
const speed = token.node.props.args.speed || '0.5s';
|
const speed = validTime(token.node.props.args.speed) || '0.5s';
|
||||||
style = this.$store.state.animatedMfm ? `animation: mfm-twitch ${speed} ease infinite;` : '';
|
style = this.$store.state.animatedMfm ? `animation: mfm-twitch ${speed} ease infinite;` : '';
|
||||||
break;
|
break;
|
||||||
}
|
}
|
||||||
case 'shake': {
|
case 'shake': {
|
||||||
const speed = token.node.props.args.speed || '0.5s';
|
const speed = validTime(token.node.props.args.speed) || '0.5s';
|
||||||
style = this.$store.state.animatedMfm ? `animation: mfm-shake ${speed} ease infinite;` : '';
|
style = this.$store.state.animatedMfm ? `animation: mfm-shake ${speed} ease infinite;` : '';
|
||||||
break;
|
break;
|
||||||
}
|
}
|
||||||
|
@ -109,7 +114,7 @@ export default defineComponent({
|
||||||
token.node.props.args.x ? 'mfm-spinX' :
|
token.node.props.args.x ? 'mfm-spinX' :
|
||||||
token.node.props.args.y ? 'mfm-spinY' :
|
token.node.props.args.y ? 'mfm-spinY' :
|
||||||
'mfm-spin';
|
'mfm-spin';
|
||||||
const speed = token.node.props.args.speed || '1.5s';
|
const speed = validTime(token.node.props.args.speed) || '1.5s';
|
||||||
style = this.$store.state.animatedMfm ? `animation: ${anime} ${speed} linear infinite; animation-direction: ${direction};` : '';
|
style = this.$store.state.animatedMfm ? `animation: ${anime} ${speed} linear infinite; animation-direction: ${direction};` : '';
|
||||||
break;
|
break;
|
||||||
}
|
}
|
||||||
|
|
Loading…
Reference in a new issue