Add internal page iframe modal, fix video scaling, and update max-width
This commit is contained in:
parent
af0dc19861
commit
57014401ff
|
|
@ -6,11 +6,11 @@
|
|||
<Icon name="ion:book-sharp" style="color: white" />
|
||||
</button>
|
||||
|
||||
<a v-else-if="type === 'document'" :href="isExternalLink ? link : undefined" :target="isExternalLink ? '_blank' : undefined" :rel="isExternalLink ? 'noopener noreferrer' : undefined" @click="!isExternalLink && openDocument()" class="inline-flex p-1">
|
||||
<a v-else-if="type === 'document'" :href="isExternalLink ? link : undefined" :target="isExternalLink ? '_blank' : undefined" :rel="isExternalLink ? 'noopener noreferrer' : undefined" @click="(isExternalLink || isInternalPage) && openDocument()" class="inline-flex p-1 cursor-pointer">
|
||||
<Icon name="ion:book-sharp" style="color: white" />
|
||||
</a>
|
||||
|
||||
<a v-else-if="type === 'buy'" :href="link" :target="newTab ? '_blank' : undefined" :rel="newTab ? 'noopener noreferrer' : undefined" class="inline-flex p-1">
|
||||
<a v-else-if="type === 'buy'" :href="link" :target="newTab ? '_blank' : undefined" :rel="newTab ? 'noopener noreferrer' : undefined" class="inline-flex p-1 cursor-pointer">
|
||||
<Icon name="bxs:purchase-tag" style="color: white" />
|
||||
</a>
|
||||
|
||||
|
|
@ -18,7 +18,7 @@
|
|||
<Icon name="ic:baseline-email" style="color: white" />
|
||||
</NuxtLink>
|
||||
|
||||
<a v-else-if="type === 'discogs'" :href="link" :target="newTab ? '_blank' : undefined" :rel="newTab ? 'noopener noreferrer' : undefined" class="inline-flex p-1">
|
||||
<a v-else-if="type === 'discogs'" :href="link" :target="newTab ? '_blank' : undefined" :rel="newTab ? 'noopener noreferrer' : undefined" class="inline-flex p-1 cursor-pointer">
|
||||
<Icon name="simple-icons:discogs" style="color: white" />
|
||||
</a>
|
||||
|
||||
|
|
@ -49,12 +49,18 @@
|
|||
const modalStore = useModalStore()
|
||||
|
||||
const isExternalLink = computed(() => {
|
||||
return props.link && !props.link.endsWith('.pdf')
|
||||
return props.link && !props.link.endsWith('.pdf') && !props.link.startsWith('/')
|
||||
})
|
||||
|
||||
const isInternalPage = computed(() => {
|
||||
return props.link && props.link.startsWith('/') && !props.link.endsWith('.pdf')
|
||||
})
|
||||
|
||||
const openDocument = () => {
|
||||
if (props.link?.endsWith('.pdf')) {
|
||||
modalStore.setModalProps('pdf', 'aspect-[1/1.414]', true, '', '', '', props.link)
|
||||
} else if (props.link?.startsWith('/')) {
|
||||
modalStore.setModalProps('document', 'aspect-[1/1.414]', true, '', '', '', '', '', props.link)
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
<template>
|
||||
<Swiper
|
||||
:autoHeight="false"
|
||||
:autoHeight="true"
|
||||
:loop="true"
|
||||
:spaceBetween="30"
|
||||
:centeredSlides="true"
|
||||
|
|
@ -16,16 +16,17 @@
|
|||
:style="{
|
||||
'--swiper-navigation-color': 'rgb(71 85 105)',
|
||||
'--swiper-pagination-color': 'rgb(71 85 105)',
|
||||
'--swiper-pagination-top': '0',
|
||||
'--swiper-navigation-top-offset': '4rem'
|
||||
'--swiper-pagination-bottom': 'auto',
|
||||
'--swiper-pagination-top': '1rem',
|
||||
'--swiper-navigation-top-offset': '5rem'
|
||||
}"
|
||||
:modules="[SwiperAutoplay, SwiperPagination, SwiperNavigation]"
|
||||
class="h-full w-full px-12 pt-16"
|
||||
class="h-full flex items-center justify-center"
|
||||
>
|
||||
|
||||
<SwiperSlide v-for="(image, index) in gallery" :key="image.id || index" class="!flex !items-start !justify-center !py-8 !bg-zinc-100">
|
||||
<SwiperSlide v-for="image in gallery" class="!flex !items-center !justify-center !h-auto !py-10 !bg-zinc-100">
|
||||
<img :src="'/' + bucket + '/' + image.image"
|
||||
style="max-width: calc(100% - 80px); max-height: calc(85vh - 160px); object-fit: contain;"/>
|
||||
style="max-width: calc(100% - 80px); max-height: 70vh; object-fit: contain;"/>
|
||||
</SwiperSlide>
|
||||
</Swiper>
|
||||
</template>
|
||||
|
|
|
|||
|
|
@ -98,7 +98,7 @@ provide('modal', api)
|
|||
class="w-full transform overflow-hidden bg-white text-left align-middle shadow-xl transition-all"
|
||||
:class="{
|
||||
'h-screen': fullscreen,
|
||||
'max-w-[85vw] rounded-lg': !fullscreen,
|
||||
'max-w-[min(85vw,1200px)] rounded-lg': !fullscreen,
|
||||
}"
|
||||
:style="!fullscreen ? { maxHeight } : {}"
|
||||
>
|
||||
|
|
|
|||
|
|
@ -39,8 +39,11 @@
|
|||
<div v-if="modalStore.type === 'image' && modalStore.soundcloudUrl" class="flex justify-center mt-2">
|
||||
<iframe :src="modalStore.soundcloudUrl" width="400rem" height="20px" scrolling="no" frameborder="no" allow="autoplay"></iframe>
|
||||
</div>
|
||||
<div v-if="modalStore.type === 'video'" class="w-full" :class="modalStore.aspect">
|
||||
<iframe :src="'https://player.vimeo.com/video/' + modalStore.vimeo_trackid" width="100%" height="100%" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>
|
||||
<div v-if="modalStore.type === 'video'" :class="modalStore.aspect" class="w-full h-full flex items-center justify-center p-4">
|
||||
<iframe :src="'https://player.vimeo.com/video/' + modalStore.vimeo_trackid" width="100%" height="100%" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen class="max-w-full max-h-full"></iframe>
|
||||
</div>
|
||||
<div v-if="modalStore.type === 'document'" class="w-full h-full">
|
||||
<iframe :src="modalStore.iframeUrl" width="100%" height="100%" frameborder="0"></iframe>
|
||||
</div>
|
||||
<div v-if="modalStore.type === 'pdf'" class="flex flex-col h-full">
|
||||
<iframe :src="modalStore.pdfUrl + '#toolbar=1&navpanes=0'" width="100%" height="100%" frameborder="0" :class="[modalStore.soundcloudUrl ? 'max-h-[calc(85vh-60px)]' : 'max-h-[calc(85vh-2rem)]', 'flex-grow']"></iframe>
|
||||
|
|
@ -48,8 +51,8 @@
|
|||
<iframe :src="modalStore.soundcloudUrl" width="400rem" height="20px" scrolling="no" frameborder="no" allow="autoplay"></iframe>
|
||||
</div>
|
||||
</div>
|
||||
<div v-if="modalStore.type === 'pdf' || modalStore.type === 'image'" class="absolute bottom-2 right-2 z-10">
|
||||
<a :href="modalStore.type === 'pdf' ? modalStore.pdfUrl : '/' + modalStore.bucket + '/' + modalStore.gallery[0]?.image" target="_blank" rel="noopener noreferrer" class="p-2 bg-gray-600 rounded-lg inline-flex items-center justify-center">
|
||||
<div v-if="modalStore.type === 'pdf' || modalStore.type === 'image' || modalStore.type === 'document'" class="absolute bottom-2 right-2 z-10">
|
||||
<a :href="modalStore.type === 'pdf' ? modalStore.pdfUrl : modalStore.type === 'image' ? '/' + modalStore.bucket + '/' + modalStore.gallery[0]?.image : modalStore.type === 'document' ? modalStore.iframeUrl : undefined" target="_blank" rel="noopener noreferrer" class="p-2 bg-gray-600 rounded-lg inline-flex items-center justify-center pointer-events-auto">
|
||||
<Icon name="mdi:open-in-new" class="w-5 h-5 text-white" />
|
||||
</a>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -1,9 +1,9 @@
|
|||
import {defineStore} from "pinia";
|
||||
|
||||
export const useModalStore = defineStore("ModalStore", {
|
||||
state: () => ({"type": "", "aspect":"", "isOpen":false, "bucket":"", "gallery":"", "vimeo_trackid": "", "pdfUrl": "", "soundcloudUrl": ""}),
|
||||
state: () => ({"type": "", "aspect":"", "isOpen":false, "bucket":"", "gallery":"", "vimeo_trackid": "", "pdfUrl": "", "soundcloudUrl": "", "iframeUrl": ""}),
|
||||
actions: {
|
||||
setModalProps(type, aspect, isOpen, bucket, gallery, vimeo_trackid, pdfUrl, soundcloudUrl) {
|
||||
setModalProps(type, aspect, isOpen, bucket, gallery, vimeo_trackid, pdfUrl, soundcloudUrl, iframeUrl) {
|
||||
this.type = type
|
||||
this.aspect = aspect
|
||||
this.isOpen = isOpen
|
||||
|
|
@ -12,6 +12,7 @@ export const useModalStore = defineStore("ModalStore", {
|
|||
this.vimeo_trackid = vimeo_trackid
|
||||
this.pdfUrl = pdfUrl
|
||||
this.soundcloudUrl = soundcloudUrl
|
||||
this.iframeUrl = iframeUrl
|
||||
}
|
||||
}
|
||||
})
|
||||
Loading…
Reference in a new issue