elk/components/status/StatusLink.vue

50 lines
1.2 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))
2023-03-19 20:55:19 +00:00
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()
const isCustomEmoji = el?.parentElement?.classList.contains('custom-emoji')
if ((!el && !text) || isCustomEmoji)
2023-03-19 20:55:19 +00:00
go(evt)
}
function go(evt: MouseEvent | KeyboardEvent) {
if (evt.metaKey || evt.ctrlKey) {
window.open(statusRoute.value.href)
2023-03-19 20:55:19 +00:00
}
else {
cacheStatus(props.status)
router.push(statusRoute.value)
2023-03-19 20:55:19 +00:00
}
}
</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"
2023-08-23 10:32:59 +00:00
focus:outline-none focus-visible:ring="2 primary inset"
2023-03-19 20:55:19 +00:00
aria-roledescription="status-card"
:lang="status.language ?? undefined"
@click="onclick"
@keydown.enter="onclick"
>
<slot />
</div>
</template>