Merge branch 'develop' into future

This commit is contained in:
dakkar 2024-05-31 11:24:00 +01:00
commit 4ddee7b01e
23 changed files with 557 additions and 84 deletions

View file

@ -6,6 +6,7 @@
import { VNode, h, defineAsyncComponent, SetupContext, provide } from 'vue';
import * as mfm from '@transfem-org/sfm-js';
import * as Misskey from 'misskey-js';
import CkFollowMouse from '../CkFollowMouse.vue';
import MkUrl from '@/components/global/MkUrl.vue';
import MkTime from '@/components/global/MkTime.vue';
import MkLink from '@/components/MkLink.vue';
@ -230,11 +231,49 @@ export default function (props: MfmProps, { emit }: { emit: SetupContext<MfmEven
}
return h(MkSparkle, {}, genEl(token.children, scale));
}
case 'fade': {
// Dont run with reduced motion on
if (!defaultStore.state.animation) {
style = '';
break;
}
const direction = token.props.args.out
? 'alternate-reverse'
: 'alternate';
const speed = validTime(token.props.args.speed) ?? '1.5s';
const delay = validTime(token.props.args.delay) ?? '0s';
const loop = safeParseFloat(token.props.args.loop) ?? 'infinite';
style = `animation: mfm-fade ${speed} ${delay} linear ${loop}; animation-direction: ${direction};`;
break;
}
case 'rotate': {
const degrees = safeParseFloat(token.props.args.deg) ?? 90;
style = `transform: rotate(${degrees}deg); transform-origin: center center;`;
break;
}
case 'followmouse': {
// Make sure advanced MFM is on and that reduced motion is off
if (!useAnim) {
style = '';
break;
}
let x = (!!token.props.args.x);
let y = (!!token.props.args.y);
if (!x && !y) {
x = true;
y = true;
}
return h(CkFollowMouse, {
x: x,
y: y,
speed: validTime(token.props.args.speed) ?? '0.1s',
rotateByVelocity: !!token.props.args.rotateByVelocity,
}, genEl(token.children, scale));
}
case 'position': {
if (!defaultStore.state.advancedMfm) break;
const x = safeParseFloat(token.props.args.x) ?? 0;
@ -242,6 +281,22 @@ export default function (props: MfmProps, { emit }: { emit: SetupContext<MfmEven
style = `transform: translateX(${x}em) translateY(${y}em);`;
break;
}
case 'crop': {
const top = Number.parseFloat(
(token.props.args.top ?? '0').toString(),
);
const right = Number.parseFloat(
(token.props.args.right ?? '0').toString(),
);
const bottom = Number.parseFloat(
(token.props.args.bottom ?? '0').toString(),
);
const left = Number.parseFloat(
(token.props.args.left ?? '0').toString(),
);
style = `clip-path: inset(${top}% ${right}% ${bottom}% ${left}%);`;
break;
}
case 'scale': {
if (!defaultStore.state.advancedMfm) {
style = '';