elk/components/status/StatusLink.vue

49 lines
1.1 KiB
Vue
Raw Permalink Normal View History

2023-03-19 20:55:19 +00:00
<script setup lang="ts">
import type { mastodon } from 'masto'
const props = defineProps<{
status: mastodon.v1.Status
hover?: boolean
}>()
const el = ref<HTMLElement>()
const router = useRouter()
const statusRoute = $computed(() => getStatusRoute(props.status))
function onclick(evt: MouseEvent | KeyboardEvent) {
const path = evt.composedPath() as HTMLElement[]
const el = path.find(el => ['A', 'BUTTON', 'IMG', 'VIDEO'].includes(el.tagName?.toUpperCase()))
const text = window.getSelection()?.toString()
if (!el && !text)
go(evt)
}
function go(evt: MouseEvent | KeyboardEvent) {
if (evt.metaKey || evt.ctrlKey) {
window.open(statusRoute.href)
}
else {
cacheStatus(props.status)
router.push(statusRoute)
}
}
</script>
<template>
<div
:id="`status-${status.id}`"
ref="el"
relative flex="~ col gap1"
p="b-2 is-3 ie-4"
:class="{ 'hover:bg-active': hover }"
tabindex="0"
focus:outline-none focus-visible:ring="2 primary"
aria-roledescription="status-card"
:lang="status.language ?? undefined"
@click="onclick"
@keydown.enter="onclick"
>
<slot />
</div>
</template>