109 lines
3.5 KiB
Vue
109 lines
3.5 KiB
Vue
<script setup>
|
|
import { ref } from 'vue'
|
|
import { EyeOff, Info } from 'lucide-vue-next'
|
|
|
|
defineProps(['post'])
|
|
const section = ref(null)
|
|
|
|
let postDataVisible = ref(true)
|
|
const postData = ref(null)
|
|
const postDataTitle = ref(null)
|
|
const postDataDescription = ref(null)
|
|
const postActionBtn = ref(null)
|
|
|
|
function postDataToggle() {
|
|
if (postDataVisible.value) {
|
|
for (const data of postData.value) {
|
|
data.classList.remove('backdrop-blur-sm')
|
|
data.classList.remove('bg-gray-400/10')
|
|
data.classList.add('bg-gray-400/0')
|
|
}
|
|
for (const title of postDataTitle.value) {
|
|
title.classList.add('opacity-0')
|
|
}
|
|
for (const desc of postDataDescription.value) {
|
|
desc.classList.add('opacity-0')
|
|
desc.classList.remove('scrollable-element')
|
|
}
|
|
for (const btn of postActionBtn.value) {
|
|
btn.classList.remove('top-0')
|
|
btn.classList.remove('right-0')
|
|
btn.classList.add('left-0')
|
|
btn.classList.add('bottom-0')
|
|
}
|
|
postDataVisible.value = false
|
|
} else {
|
|
for (const data of postData.value) {
|
|
data.classList.add('backdrop-blur-sm')
|
|
data.classList.add('bg-gray-400/10')
|
|
data.classList.remove('bg-gray-400/0')
|
|
}
|
|
for (const title of postDataTitle.value) {
|
|
title.classList.remove('opacity-0')
|
|
}
|
|
for (const desc of postDataDescription.value) {
|
|
desc.classList.remove('opacity-0')
|
|
desc.classList.add('scrollable-element')
|
|
}
|
|
for (const btn of postActionBtn.value) {
|
|
btn.classList.add('top-0')
|
|
btn.classList.add('right-0')
|
|
btn.classList.remove('left-0')
|
|
btn.classList.remove('bottom-0')
|
|
}
|
|
postDataVisible.value = true
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<template>
|
|
<div class="section relative overflow-hidden" ref="section" :data-anchor="'post-' + post.id">
|
|
<div class="slide relative overflow-hidden" v-for="asset in post.assets" :key="asset.id">
|
|
<img
|
|
class="absolute top-0 left-0 w-full h-full object-cover -z-10"
|
|
:data-src="asset.presignedUrl"
|
|
v-if="asset.contentType.startsWith('image/')"
|
|
/>
|
|
<video
|
|
class="absolute top-0 left-0 w-full h-full object-cover -z-10"
|
|
loop
|
|
muted="true"
|
|
playsinline
|
|
data-autoplay
|
|
v-else
|
|
>
|
|
<source :src="asset.presignedUrl" :type="asset.contentType" />
|
|
</video>
|
|
<div
|
|
class="grid grid-cols-3 grid-rows-5 absolute w-full h-full top-0 left-0 pointer-events-none"
|
|
>
|
|
<div
|
|
ref="postData"
|
|
class="col-start-1 col-span-3 lg:col-span-1 row-start-4 row-span-2 self-end place-self-stretch m-6 p-2 bg-gray-400/10 backdrop-blur-sm rounded-lg pointer-events-auto transition-colors duration-500"
|
|
>
|
|
<div
|
|
class="absolute top-0 right-0 m-2 p-2 backdrop-blur-sm rounded-sm bg-black/10 hover:bg-black/20 cursor-pointer transition-colors duration-200 opacity-100"
|
|
ref="postActionBtn"
|
|
@click="postDataToggle"
|
|
>
|
|
<EyeOff v-if="postDataVisible" :size="20" />
|
|
<Info :size="20" v-else />
|
|
</div>
|
|
<h2
|
|
ref="postDataTitle"
|
|
class="mx-2 scroll-m-20 pb-2 text-3xl font-semibold tracking-tight transition-opacity duration-500 mt-1"
|
|
>
|
|
{{ post.city }}, {{ post.country }}
|
|
</h2>
|
|
<div
|
|
ref="postDataDescription"
|
|
class="m-2 scrollable-element max-h-48 overflow-y-scroll transition-opacity duration-500"
|
|
v-html="post.formatedDescription"
|
|
></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<style scoped></style>
|