Open PDFs in modal iframe instead of new tab

components/IconButton.vue

@@ -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>
+            </button>
-
-            <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>
 
             <NuxtLink v-else-if="type === 'buy'" class="inline-flex p-1" :to="link">
                 <Icon name="bxs:purchase-tag" style="color: white" />

components/Modal/Modal.vue

@@ -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,

layouts/default.vue

@@ -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>

pages/about.vue

@@ -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>

pages/index.vue

@@ -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>

stores/ModalStore.js

@@ -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
         }
       }
 })