refactor(frontend): provide linkNavigationBehavior

This commit is contained in:
syuilo 2024-05-06 20:37:04 +09:00
parent 2b21c19362
commit fc77ad9355
6 changed files with 16 additions and 20 deletions

View File

@ -20,7 +20,7 @@ SPDX-License-Identifier: AGPL-3.0-only
</div>
<div class="detail">
<div>
<Mfm :text="report.comment" :linkBehavior="'window'"/>
<Mfm :text="report.comment" :linkNavigationBehavior="'window'"/>
</div>
<hr/>
<div>{{ i18n.ts.reporter }}: <MkA :to="`/admin/user/${report.reporter.id}`" class="_link" :behavior="'window'">@{{ report.reporter.username }}</MkA></div>

View File

@ -6,7 +6,7 @@ SPDX-License-Identifier: AGPL-3.0-only
<template>
<component
:is="self ? 'MkA' : 'a'" ref="el" style="word-break: break-all;" class="_link" :[attr]="self ? url.substring(local.length) : url" :rel="rel ?? 'nofollow noopener'" :target="target"
:behavior="props.behavior"
:behavior="props.navigationBehavior"
:title="url"
>
<slot></slot>
@ -25,7 +25,7 @@ import { MkABehavior } from '@/components/global/MkA.vue';
const props = withDefaults(defineProps<{
url: string;
rel?: null | string;
behavior?: MkABehavior;
navigationBehavior?: MkABehavior;
}>(), {
});

View File

@ -4,7 +4,7 @@ SPDX-License-Identifier: AGPL-3.0-only
-->
<template>
<MkA v-user-preview="canonical" :class="[$style.root, { [$style.isMe]: isMe }]" :to="url" :style="{ background: bgCss }" :behavior="behavior">
<MkA v-user-preview="canonical" :class="[$style.root, { [$style.isMe]: isMe }]" :to="url" :style="{ background: bgCss }" :behavior="navigationBehavior">
<img :class="$style.icon" :src="avatarUrl" alt="">
<span>
<span>@{{ username }}</span>
@ -26,7 +26,7 @@ import { MkABehavior } from '@/components/global/MkA.vue';
const props = defineProps<{
username: string;
host: string;
behavior?: MkABehavior;
navigationBehavior?: MkABehavior;
}>();
const canonical = props.host === localHost ? `@${props.username}` : `@${props.username}@${toUnicode(props.host)}`;

View File

@ -14,7 +14,7 @@ export type MkABehavior = 'window' | 'browser' | null;
</script>
<script lang="ts" setup>
import { computed, shallowRef } from 'vue';
import { computed, inject, shallowRef } from 'vue';
import * as os from '@/os.js';
import copyToClipboard from '@/scripts/copy-to-clipboard.js';
import { url } from '@/config.js';
@ -30,7 +30,7 @@ const props = withDefaults(defineProps<{
behavior: null,
});
const linkBehaviour = props.behavior;
const behavior = props.behavior ?? inject<MkABehavior>('linkNavigationBehavior', null);
const el = shallowRef<HTMLElement>();
@ -86,15 +86,13 @@ function openWindow() {
}
function nav(ev: MouseEvent) {
if (props.behavior === 'browser') {
if (behavior === 'browser') {
location.href = props.to;
return;
}
if (props.behavior) {
if (props.behavior === 'window') {
return openWindow();
}
if (behavior === 'window') {
return openWindow();
}
if (ev.shiftKey) {

View File

@ -3,7 +3,7 @@
* SPDX-License-Identifier: AGPL-3.0-only
*/
import { VNode, h, SetupContext } from 'vue';
import { VNode, h, SetupContext, provide } from 'vue';
import * as mfm from 'mfm-js';
import * as Misskey from 'misskey-js';
import MkUrl from '@/components/global/MkUrl.vue';
@ -43,7 +43,7 @@ type MfmProps = {
parsedNodes?: mfm.MfmNode[] | null;
enableEmojiMenu?: boolean;
enableEmojiMenuReaction?: boolean;
linkBehavior?: MkABehavior;
linkNavigationBehavior?: MkABehavior;
};
type MfmEvents = {
@ -52,6 +52,8 @@ type MfmEvents = {
// eslint-disable-next-line import/no-default-export
export default function (props: MfmProps, { emit }: { emit: SetupContext<MfmEvents>['emit'] }) {
provide('linkNavigationBehavior', props.linkNavigationBehavior);
const isNote = props.isNote ?? true;
const shouldNyaize = props.nyaize ? props.nyaize === 'respect' ? props.author?.isCat : false : false;
@ -343,7 +345,6 @@ export default function (props: MfmProps, { emit }: { emit: SetupContext<MfmEven
key: Math.random(),
url: token.props.url,
rel: 'nofollow noopener',
behavior: props.linkBehavior,
})];
}
@ -352,7 +353,6 @@ export default function (props: MfmProps, { emit }: { emit: SetupContext<MfmEven
key: Math.random(),
url: token.props.url,
rel: 'nofollow noopener',
behavior: props.linkBehavior,
}, genEl(token.children, scale, true))];
}
@ -361,7 +361,6 @@ export default function (props: MfmProps, { emit }: { emit: SetupContext<MfmEven
key: Math.random(),
host: (token.props.host == null && props.author && props.author.host != null ? props.author.host : token.props.host) ?? host,
username: token.props.username,
behavior: props.linkBehavior,
})];
}
@ -370,7 +369,6 @@ export default function (props: MfmProps, { emit }: { emit: SetupContext<MfmEven
key: Math.random(),
to: isNote ? `/tags/${encodeURIComponent(token.props.hashtag)}` : `/user-tags/${encodeURIComponent(token.props.hashtag)}`,
style: 'color:var(--hashtag);',
behavior: props.linkBehavior,
}, `#${token.props.hashtag}`)];
}

View File

@ -6,7 +6,7 @@ SPDX-License-Identifier: AGPL-3.0-only
<template>
<component
:is="self ? 'MkA' : 'a'" ref="el" :class="$style.root" class="_link" :[attr]="self ? props.url.substring(local.length) : props.url" :rel="rel ?? 'nofollow noopener'" :target="target"
:behavior = "props.behavior"
:behavior="props.navigationBehavior"
@contextmenu.stop="() => {}"
>
<template v-if="!self">
@ -38,7 +38,7 @@ const props = withDefaults(defineProps<{
url: string;
rel?: string;
showUrlPreview?: boolean;
behavior?: MkABehavior;
navigationBehavior?: MkABehavior;
}>(), {
showUrlPreview: true,
});