elk/components/modal/ModalMediaPreview.vue

82 lines
2.7 KiB
Vue
Raw Normal View History

2022-11-30 03:27:19 +00:00
<script setup lang="ts">
const emit = defineEmits(['close'])
2023-01-04 08:15:24 +00:00
const locked = useScrollLock(document.body)
2022-11-30 03:27:19 +00:00
2023-01-04 08:15:24 +00:00
// Use to avoid strange error when directlying assigning to v-model on ModelMediaPreviewCarousel
const index = mediaPreviewIndex
2023-01-01 19:59:31 +00:00
2023-01-04 08:15:24 +00:00
const current = computed(() => mediaPreviewList.value[mediaPreviewIndex.value])
const hasNext = computed(() => index.value < mediaPreviewList.value.length - 1)
const hasPrev = computed(() => index.value > 0)
2022-11-30 03:27:19 +00:00
const keys = useMagicKeys()
whenever(keys.arrowLeft, prev)
whenever(keys.arrowRight, next)
function next() {
if (hasNext.value)
2023-01-04 08:15:24 +00:00
index.value++
2022-11-30 03:27:19 +00:00
}
function prev() {
if (hasPrev.value)
2023-01-04 08:15:24 +00:00
index.value--
2022-11-30 03:27:19 +00:00
}
function onClick(e: MouseEvent) {
const path = e.composedPath() as HTMLElement[]
const el = path.find(el => ['A', 'BUTTON', 'IMG', 'VIDEO', 'P'].includes(el.tagName?.toUpperCase()))
2022-11-30 03:27:19 +00:00
if (!el)
emit('close')
}
2023-01-04 08:15:24 +00:00
onMounted(() => locked.value = true)
onUnmounted(() => locked.value = false)
2022-11-30 03:27:19 +00:00
</script>
<template>
2023-01-04 08:15:24 +00:00
<div relative h-full w-full flex pt-12 w-100vh @click="onClick">
<button
v-if="hasNext" pointer-events-auto btn-action-icon bg="black/20" :aria-label="$t('action.previous')"
hover:bg="black/40" dark:bg="white/30" dark-hover:bg="white/20" absolute top="1/2" right-1 z5
:title="$t('action.next')" @click="next"
>
<div i-ri:arrow-right-s-line text-white />
2022-11-30 03:27:19 +00:00
</button>
<button
v-if="hasPrev" pointer-events-auto btn-action-icon bg="black/20" aria-label="action.next"
hover:bg="black/40" dark:bg="white/30" dark:hover-bg="white/20" absolute top="1/2" left-1 z5
:title="$t('action.prev')" @click="prev"
>
<div i-ri:arrow-left-s-line text-white />
2022-11-30 03:27:19 +00:00
</button>
2023-01-04 08:15:24 +00:00
<div flex="~ col center" h-full w-full>
<ModalMediaPreviewCarousel v-model="index" :media="mediaPreviewList" @close="emit('close')" />
<div bg="black/30" dark:bg="white/10" mb-6 mt-4 text-white rounded-full flex="~ center shrink-0" overflow-hidden>
<div v-if="mediaPreviewList.length > 1" p="y-1 x-3" rounded-r-0 shrink-0>
{{ index + 1 }} / {{ mediaPreviewList.length }}
</div>
<p
v-if="current.description" bg="dark/30" dark:bg="white/10" p="y-1 x-3" rounded-ie-full line-clamp-1
ws-pre-wrap break-all :title="current.description" w-full
>
{{ current.description }}
</p>
</div>
2023-01-04 08:15:24 +00:00
</div>
<div absolute top-0 w-full flex justify-end>
<button
btn-action-icon bg="black/30" aria-label="action.close" hover:bg="black/40" dark:bg="white/30"
dark:hover-bg="white/20" pointer-events-auto shrink-0 @click="emit('close')"
>
2022-12-19 20:31:12 +00:00
<div i-ri:close-line text-white />
</button>
</div>
2022-11-30 03:27:19 +00:00
</div>
</template>