sendnrw/misskey
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

一部のMFM構文をopt-inに

Browse Source 
あとMFMチートシートはMisskey Hubに移動
This commit is contained in:
syuilo
2023-02-11 11:31:18 +09:00
parent 6b6b767199
commit b0616b52ea
8 changed files with 31 additions and 462 deletions
Download Patch File Download Diff File Expand all files Collapse all files

31
packages/frontend/src/components/mfm.ts
View File

@@ -65,6 +65,8 @@ export default defineComponent({
return t.match(/^[0-9.]+s$/) ? t : null;
};
const useAnim = defaultStore.state.advancedMfm && defaultStore.state.animatedMfm;
const genEl = (ast: mfm.MfmNode[]) => ast.map((token): VNode | string | (VNode | string)[] => {
switch (token.type) {
case 'text': {
@@ -103,22 +105,22 @@ export default defineComponent({
switch (token.props.name) {
case 'tada': {
const speed = validTime(token.props.args.speed) ?? '1s';
style = 'font-size: 150%;' + (defaultStore.state.animatedMfm ? `animation: tada ${speed} linear infinite both;` : '');
style = 'font-size: 150%;' + (useAnim ? `animation: tada ${speed} linear infinite both;` : '');
break;
}
case 'jelly': {
const speed = validTime(token.props.args.speed) ?? '1s';
style = (defaultStore.state.animatedMfm ? `animation: mfm-rubberBand ${speed} linear infinite both;` : '');
style = (useAnim ? `animation: mfm-rubberBand ${speed} linear infinite both;` : '');
break;
}
case 'twitch': {
const speed = validTime(token.props.args.speed) ?? '0.5s';
style = defaultStore.state.animatedMfm ? `animation: mfm-twitch ${speed} ease infinite;` : '';
style = useAnim ? `animation: mfm-twitch ${speed} ease infinite;` : '';
break;
}
case 'shake': {
const speed = validTime(token.props.args.speed) ?? '0.5s';
style = defaultStore.state.animatedMfm ? `animation: mfm-shake ${speed} ease infinite;` : '';
style = useAnim ? `animation: mfm-shake ${speed} ease infinite;` : '';
break;
}
case 'spin': {
@@ -131,17 +133,17 @@ export default defineComponent({
token.props.args.y ? 'mfm-spinY' :
'mfm-spin';
const speed = validTime(token.props.args.speed) ?? '1.5s';
style = defaultStore.state.animatedMfm ? `animation: ${anime} ${speed} linear infinite; animation-direction: ${direction};` : '';
style = useAnim ? `animation: ${anime} ${speed} linear infinite; animation-direction: ${direction};` : '';
break;
}
case 'jump': {
const speed = validTime(token.props.args.speed) ?? '0.75s';
style = defaultStore.state.animatedMfm ? `animation: mfm-jump ${speed} linear infinite;` : '';
style = useAnim ? `animation: mfm-jump ${speed} linear infinite;` : '';
break;
}
case 'bounce': {
const speed = validTime(token.props.args.speed) ?? '0.75s';
style = defaultStore.state.animatedMfm ? `animation: mfm-bounce ${speed} linear infinite; transform-origin: center bottom;` : '';
style = useAnim ? `animation: mfm-bounce ${speed} linear infinite; transform-origin: center bottom;` : '';
break;
}
case 'flip': {
@@ -154,17 +156,17 @@ export default defineComponent({
}
case 'x2': {
return h('span', {
class: 'mfm-x2',
class: defaultStore.state.advancedMfm ? 'mfm-x2' : '',
}, genEl(token.children));
}
case 'x3': {
return h('span', {
class: 'mfm-x3',
class: defaultStore.state.advancedMfm ? 'mfm-x3' : '',
}, genEl(token.children));
}
case 'x4': {
return h('span', {
class: 'mfm-x4',
class: defaultStore.state.advancedMfm ? 'mfm-x4' : '',
}, genEl(token.children));
}
case 'font': {
@@ -186,11 +188,11 @@ export default defineComponent({
}
case 'rainbow': {
const speed = validTime(token.props.args.speed) ?? '1s';
style = defaultStore.state.animatedMfm ? `animation: mfm-rainbow ${speed} linear infinite;` : '';
style = useAnim ? `animation: mfm-rainbow ${speed} linear infinite;` : '';
break;
}
case 'sparkle': {
if (!defaultStore.state.animatedMfm) {
if (!useAnim) {
return genEl(token.children);
}
return h(MkSparkle, {}, genEl(token.children));
@@ -201,12 +203,17 @@ export default defineComponent({
break;
}
case 'position': {
if (!defaultStore.state.advancedMfm) break;
const x = parseFloat(token.props.args.x ?? '0');
const y = parseFloat(token.props.args.y ?? '0');
style = `transform: translateX(${x}em) translateY(${y}em);`;
break;
}
case 'scale': {
if (!defaultStore.state.advancedMfm) {
style = '';
break;
}
const x = Math.min(parseFloat(token.props.args.x ?? '1'), 5);
const y = Math.min(parseFloat(token.props.args.y ?? '1'), 5);
style = `transform: scale(${x}, ${y});`;