mwinter/portfolio
1
0
Fork 0
Code Issues Pull requests Actions Packages Projects Releases Wiki Activity

Open PDFs in modal iframe instead of new tab

Browse source
This commit is contained in:
Michael Winter 2026-02-19 01:09:17 +01:00
parent 58c10d98c3
commit 2ed382c741
6 changed files with 13 additions and 19 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

16
components/IconButton.vue
View file

@ -2,21 +2,13 @@
<div class="inline-flex p-1 min-w-[25px]">
<div v-show="visible" class="bg-black rounded-full text-xs inline-flex" >
<NuxtLink v-if="type === 'score' && !newTab" :to="link" class="inline-flex p-1">
<button v-if="type === 'score'" @click="modalStore.setModalProps('pdf', 'aspect-[1/1.414]', true, '', '', '', link)" class="inline-flex p-1">
<Icon name="ion:book-sharp" style="color: white" />
</NuxtLink>
</button>
<a v-else-if="type === 'score' && newTab" :href="link" class="inline-flex p-1" target="_blank" rel="noopener noreferrer">
<button v-else-if="type === 'document'" @click="modalStore.setModalProps('pdf', 'aspect-[1/1.414]', true, '', '', '', link)" class="inline-flex p-1">
<Icon name="ion:book-sharp" style="color: white" />
</a>
<NuxtLink v-else-if="type === 'document' && !newTab" class="inline-flex p-1" :to="link">
<Icon name="ion:book-sharp" style="color: white" />
</NuxtLink>
<a v-else-if="type === 'document' && newTab" :href="link" class="inline-flex p-1" target="_blank" rel="noopener noreferrer">
<Icon name="ion:book-sharp" style="color: white" />
</a>
</button>
<NuxtLink v-else-if="type === 'buy'" class="inline-flex p-1" :to="link">
<Icon name="bxs:purchase-tag" style="color: white" />

2
components/Modal/Modal.vue
View file

@ -93,7 +93,7 @@ provide('modal', api)
leave-to="opacity-0 scale-95"
>
<DialogPanel
class="w-full transform overflow-hidden bg-white text-left align-middle shadow-xl transition-all"
class="w-full transform overflow-hidden bg-white text-left align-middle shadow-xl transition-all max-h-[85vh] pb-4"
:class="{
'h-screen': fullscreen,
'max-w-[85vw] rounded-lg': !fullscreen,

1
layouts/default.vue
View file

@ -37,6 +37,7 @@
<ModalBody :class="modalStore.aspect">
<ImageSlider v-if="modalStore.type === 'image'" :bucket="modalStore.bucket" :gallery="modalStore.gallery"></ImageSlider>
<iframe v-if="modalStore.type === 'video'" :src="'https://player.vimeo.com/video/' + modalStore.vimeo_trackid" width="100%" height="100%" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>
<iframe v-if="modalStore.type === 'pdf'" :src="modalStore.pdfUrl + '#toolbar=1&navpanes=0'" width="100%" height="100%" frameborder="0" class="max-h-[calc(85vh-2rem)]"></iframe>
</ModalBody>
</Modal>
</template>

4
pages/about.vue
View file

@ -40,14 +40,14 @@
<div class="inline-flex place-items-center p-2">
CV
<div>
<IconButton :visible="true" type="document" work="placeholder" link="/cv" :newTab="true"></IconButton>
<IconButton :visible="true" type="document" work="placeholder" link="/cv"></IconButton>
</div>
</div>
<br>
<div class="inline-flex place-items-center p-2">
Works List with Presentation History
<div>
<IconButton :visible="true" type="document" work="placeholder" link="/works_list" :newTab="true"></IconButton>
<IconButton :visible="true" type="document" work="placeholder" link="/works_list"></IconButton>
</div>
</div>
<br>

4
pages/index.vue
View file

@ -12,7 +12,7 @@
<div class="inline-flex">
<div>
<IconButton :visible="work.score" type="score" :work="work" :link="work.score" :newTab="true" class="inline-flex p-1"></IconButton>
<IconButton :visible="work.score" type="score" :work="work" :link="work.score" class="inline-flex p-1"></IconButton>
</div>
<div>
@ -51,7 +51,7 @@
</div>
</div>
<div>
<IconButton :visible=item.entryTags.howpublished type="document" :link="item.entryTags.howpublished" :newTab="true" class="inline-flex p-1"></IconButton>
<IconButton :visible=item.entryTags.howpublished type="document" :link="item.entryTags.howpublished" class="inline-flex p-1"></IconButton>
</div>
</div>
</div>

5
stores/ModalStore.js
View file

@ -1,15 +1,16 @@
import {defineStore} from "pinia";
export const useModalStore = defineStore("ModalStore", {
state: () => ({"type": "", "aspect":"", "isOpen":false, "bucket":"", "gallery":"", "vimeo_trackid":""}),
state: () => ({"type": "", "aspect":"", "isOpen":false, "bucket":"", "gallery":"", "vimeo_trackid": "", "pdfUrl": ""}),
actions: {
setModalProps(type, aspect, isOpen, bucket, gallery, vimeo_trackid) {
setModalProps(type, aspect, isOpen, bucket, gallery, vimeo_trackid, pdfUrl) {
this.type = type
this.aspect = aspect
this.isOpen = isOpen
this.bucket = bucket
this.gallery = gallery
this.vimeo_trackid = vimeo_trackid
this.pdfUrl = pdfUrl
}
}
})