modal implemented more efficiently now

portfolio-nuxt/components/IconButton.vue

@@ -1,8 +1,12 @@
 <template>
     <div class="p-1">
-        <div v-show="visible" class="inline-flex bg-black rounded-full text-xs" >
+        <div v-show="visible" class="bg-black rounded-full text-xs" >
 
-            <NuxtLink v-if="type === 'document'" class="inline-flex p-1" :to="'/scores/' + work.score">
+            <NuxtLink v-if="type === 'score'" class="inline-flex p-1" :to="'/' + bucket + '/' + work.score">
+                <Icon name="ion:book-outline" color="white" />
+            </NuxtLink>
+
+            <NuxtLink v-else-if="type === 'pub'" class="inline-flex p-1">
                 <Icon name="ion:book-outline" color="white" />
             </NuxtLink>
 
@@ -10,26 +14,12 @@
                 <Icon name="wpf:speaker" color="white" />
             </button>
 
-            <button @click="isOpen = true" v-else-if="type === 'video'" class="inline-flex p-1">
+            <button @click="modalStore.setModalProps('video', 'aspect-video', true, '', '', work.vimeo_trackid)" v-else-if="type === 'video'" class="inline-flex p-1">
                 <Icon name="fluent:video-48-filled" color="white" />
-
-                <Modal v-model="isOpen">
-                    <ModalBody class="aspect-video">
-                        <iframe :src="'https://player.vimeo.com/video/' + work.vimeo_trackid" width="100%" height="100%" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>
-                    </ModalBody>
-                </Modal>
-                
             </button>
 
-            <button @click="isOpen = true" v-else="type === 'image'" class="inline-flex p-1">
+            <button @click="modalStore.setModalProps('image', 'aspect-auto', true, 'images', work.image_ids, '')" v-else="type === 'image'" class="inline-flex p-1">
                 <Icon name="mdi:camera" color="white" />
-
-                <Modal v-model="isOpen">
-                    <ModalBody>
-                        <ImageSlider :image_ids="work.image_ids"></ImageSlider>
-                    </ModalBody>
-                </Modal>
-
             </button>
 
         </div>
@@ -38,13 +28,15 @@
 
 <script setup>
   import { useAudioPlayerStore } from "@/stores/AudioPlayerStore"
-  const audioPlayerStore = useAudioPlayerStore()
+  import { useModalStore } from "@/stores/ModalStore"
+
+  const audioPlayerStore = useAudioPlayerStore()
+  const modalStore = useModalStore()
 
-  const isOpen = ref(false)
 </script>
 
 <script>
     export default {
-        props: ['type', 'work', 'visible']
+        props: ['type', 'work', 'bucket', 'visible']
     }
 </script>

portfolio-nuxt/components/ImageSlider.vue

@@ -1,9 +1,10 @@
 <template>
     <Swiper
+      :autoHeight="true"
       :spaceBetween="30"
       :centeredSlides="true"
       :autoplay="{
-        delay: 7000,
+        delay: 4000,
         disableOnInteraction: false,
       }"
       :pagination="{
@@ -14,16 +15,14 @@
     >
 
       <SwiperSlide v-for="image_id in image_ids">
-        <div>
-          <nuxt-img :src="'https://unboundedpress.org/api/images.files/' + image_id + '/binary'" 
+          <nuxt-img :src="'https://unboundedpress.org/api/' + bucket + '.files/' + image_id + '/binary'" 
           quality="50"/>
-        </div>
       </SwiperSlide>
     </Swiper>
   </template>
 
 <script>
 export default {
-    props: ['image_ids']
+    props: ['image_ids', 'bucket']
 }
 </script>

portfolio-nuxt/components/Modal/Modal.vue

@@ -96,7 +96,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-[85%] rounded-lg': !fullscreen,
+                  'max-w-[85vw] rounded-lg': !fullscreen,
                 }"
               >
                 <slot />

portfolio-nuxt/layouts/default.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="font-thin sticky top-0 bg-white p-2">
-    <div class="text-5xl p-2">michael winter</div>
+    <div class="text-5xl p-2"> <NuxtLink to='/'>michael winter</NuxtLink></div>
     <div class="text-2xl px-8">
       works
       events
@@ -13,10 +13,20 @@
     <iframe width="400rem" height="20" scrolling="no" frameborder="no" allow="autoplay" 
     :src="'https://w.soundcloud.com/player/?url=https%3A//api.soundcloud.com/tracks/' + audioPlayerStore.soundcloud_trackid + '&inverse=false&auto_play=true&show_user=false'"></iframe>
   </div>
+
+  <Modal v-model="modalStore.isOpen">
+      <ModalBody :class="modalStore.aspect">
+          <ImageSlider v-if="modalStore.type === 'image'" :bucket="modalStore.bucket" :image_ids="modalStore.image_ids"></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>
+      </ModalBody>
+  </Modal>
 </template>
 
 <script setup>
   import { useAudioPlayerStore } from "@/stores/AudioPlayerStore"
+  import { useModalStore } from "@/stores/ModalStore"
+
   const audioPlayerStore = useAudioPlayerStore()
+  const modalStore = useModalStore()
 
 </script>

portfolio-nuxt/pages/index.vue

@@ -7,9 +7,9 @@
         <div class="leading-tight py-1 ml-3" v-for="work in item.works">
           <div class="grid grid-cols-[70%,30%] gap-1 font-thin">
             <p class="italic text-sm">{{ work.title }}</p>
-             <div class="grid grid-cols-4">
+             <div class="grid grid-cols-[28px_28px_28px_28px]">
 
-              <IconButton :visible="work.score" type="document" :work="work"></IconButton>
+              <IconButton :visible="work.score" type="score" bucket="scores" :work="work"></IconButton>
  
               <IconButton :visible="work.soundcloud_trackid" type="audio" :work="work"></IconButton>
 
@@ -27,7 +27,23 @@
       <p class="text-lg">writings</p>
 
       <div class="leading-tight py-2 ml-3 text-sm" v-for="item in pubs">
-        {{ item.entryTags.title }}
+        <div class="grid grid-cols-[95%,5%] gap-1">
+          <div>
+            {{ item.entryTags.title }}
+            <div class="ml-4 text-[#7F7F7F]">
+              {{ item.entryTags.author }}
+              <span v-if=item.entryTags.booktitle>{{ item.entryTags.booktitle}}.&nbsp;</span>
+              <span v-if=item.entryTags.journal>{{item.entryTags.journal}}.&nbsp;</span>
+              <span v-if=item.entryTags.editor>editors {{item.entryTags.editor}}&nbsp;</span>
+              <span v-if=item.entryTags.volume>volume {{item.entryTags.volume}}.</span>
+              <span v-if=item.entryTags.publisher>{{item.entryTags.publisher}}.</span>
+              {{ item.entryTags.year }}.
+            </div>
+          </div>
+          <div>
+            <IconButton :visible=true type="pub" class="inline-flex p-1"></IconButton>
+          </div>
+        </div>
       </div>
     </div>
 
@@ -35,8 +51,10 @@
       <p class="text-lg">releases</p>
       <div class="leading-tight py-4 ml-3 text-sm" v-for="item in releases">
         <p class="text-center leading-tight py-2">{{ item.title }}</p>
-        <nuxt-img :src="'https://unboundedpress.org/api/album_art.files/' + item.album_art_id + '/binary'" 
-        quality="50"/>
+        <button @click="modalStore.setModalProps('image', 'aspect-auto', true, 'album_art', [item.album_art_id], '')">
+          <nuxt-img :src="'https://unboundedpress.org/api/album_art.files/' + item.album_art_id + '/binary'" 
+          quality="50"/>
+        </button>
       </div>
     </div>
   </div>
@@ -44,6 +62,9 @@
 
 <script setup>
 
+  import { useModalStore } from "@/stores/ModalStore"
+  const modalStore = useModalStore()
+
   const groupBy = (x,f)=>x.reduce((a,b,i)=>((a[f(b,i,x)]||=[]).push(b),a),{});
 
   const { data: images } = await useFetch('https://unboundedpress.org/api/images.files?pagesize=200')

portfolio-nuxt/stores/ModalStore.js

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