From 540e66a39b7ac9edc785110a843f20cff7a8f712 Mon Sep 17 00:00:00 2001
From: mwinter <mwinter@unboundedpress.org>
Date: Mon, 12 Jun 2023 18:00:37 +0200
Subject: [PATCH] modal implemented more efficiently now

---
 portfolio-nuxt/components/IconButton.vue  |  32 ++++++++--------------
 portfolio-nuxt/components/ImageSlider.vue |   9 +++---
 portfolio-nuxt/components/Modal/Modal.vue |   2 +-
 portfolio-nuxt/layouts/default.vue        |  12 +++++++-
 portfolio-nuxt/pages/index.vue            |  31 +++++++++++++++++----
 portfolio-nuxt/public/favicon.ico         | Bin 4286 -> 15406 bytes
 portfolio-nuxt/stores/ModalStore.js       |  15 ++++++++++
 7 files changed, 69 insertions(+), 32 deletions(-)
 create mode 100644 portfolio-nuxt/stores/ModalStore.js

diff --git a/portfolio-nuxt/components/IconButton.vue b/portfolio-nuxt/components/IconButton.vue
index c27d7d2..3581dea 100644
--- a/portfolio-nuxt/components/IconButton.vue
+++ b/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"
+  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>
\ No newline at end of file
diff --git a/portfolio-nuxt/components/ImageSlider.vue b/portfolio-nuxt/components/ImageSlider.vue
index 9d13ddc..0b81237 100644
--- a/portfolio-nuxt/components/ImageSlider.vue
+++ b/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>
\ No newline at end of file
diff --git a/portfolio-nuxt/components/Modal/Modal.vue b/portfolio-nuxt/components/Modal/Modal.vue
index 1f5342f..957bd45 100644
--- a/portfolio-nuxt/components/Modal/Modal.vue
+++ b/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 />
diff --git a/portfolio-nuxt/layouts/default.vue b/portfolio-nuxt/layouts/default.vue
index 241dc1b..37c7c9a 100644
--- a/portfolio-nuxt/layouts/default.vue
+++ b/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>
diff --git a/portfolio-nuxt/pages/index.vue b/portfolio-nuxt/pages/index.vue
index b591ab0..394308e 100644
--- a/portfolio-nuxt/pages/index.vue
+++ b/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')
diff --git a/portfolio-nuxt/public/favicon.ico b/portfolio-nuxt/public/favicon.ico
index 18993ad91cfd43e03b074dd0b5cc3f37ab38e49c..5c86bfb0d75aa14d03c7a5a3c41aee915615b014 100644
GIT binary patch
literal 15406
zcmeHNXJ}Mg5WXq4#Iix7SkSe_SkNFE3#boKQN)^9!;_$>v0=kPUJ?`(>@CHD2D_lx
z#RmGrm=JqG1+fHMV(-S-GH<@gp3Cmt!ds0=_IU@+o;K&qoY_<6&Wxt{X#twWqH%83
z;sP}-Qqwf6wWuB*qG{>e77=0V57V@)P)!SG93H|WirP7I35A7)Nt_DEOR$Ye{F$+e
z)US+HbCh=e`t@u2{Q0x6QBY7oFJHdYS<21Ll`^lBo;-P?x7(LDZrn(hFJG3v+qZAi
zs#U9Wyh)QLN%`#Av(&3sFTy+@K7627ty<BuXV0YXzl@KMkEcC*_RzU==O{frolc)V
zO>5Sy(Z{0>xOVLt&6_t*%Age&7e^mIex#(NB>MXGD<vi-(yUptq<`+*xxx?V$HvA|
zT3Q+nA3j|ASFBh;Q>ILz{rmUR)~#FV%9SfJCLtk#)~{bL<=wk?)5VJyWq!>4@Zm%H
z^y!oIVQsHoy^`|Vw{L|GD*5^O^ySMJY5(@^n~ar;5C5>7ix%_~Yv8d3oRW}xJKQ!V
z(dDJ!MI-JRE2qCW;eK)l%%4A}1g4wIsnA<~y~PI&1{}b6PJWycyq%-C@R^T)IOP@B
zeBRCjIdJ;zGIz&UY0`Gbli6-c;7^kP-uaxI9H(VNPdR$@s8c%{PMkPFj~+d8===Wt
zyXX_peT)DdA}cG)*evx<ojQsBVeC9|<Onrt)X3N@b?7?K73={#@jF9HmoBw$mU6px
z?WktWnxd~5JBy3{h!G=b+_-Vnym@n7HvuiI9qZ`Pqlf4|zk~jpH*d&dv50;Y5fR}a
z>#0+x(){`JY5Vr=G+@90BY7&0^{-pEj-sQZW$x9hSJRj=W26k-H#9U<_80WH8Z~Or
z)2B}zcmREjH^Sk=hpAq@dd6m{w`|!`_L}PK*s&uWI&?^?FJ8Q$>eZ`@PK-U$y?b|s
zMq|g0rDe;O>2(x9fAr|l4sEEUq@<9apC3Jb{MexnIwoX&>eMM|zjf=D)82}TilR-M
zHc{{1y=lvqE&BM(%uLbK?VnxHuUfS#9XN16$HUoc+O#P(Yt~HWfW8aBxP=QB%KD&#
z17^>jP1B}Lld}53*}*;pp9&9s7#|iEM(59;SE#an=;rO)w-=fnI&`2)l`2vH{{2OU
zGiJ=7kdP39j2kv=D723sKQ7}Ti#m1c=-(=8Qnc5uUE8Hx!T*E_6BH^ze$eZ|+x6?$
z<!-?@k3Bqp{#@jpk&z+#zUsp_7QPqk<*EAa+_^&-XN33f-_wm7H;m0@-IRbSfj>wB
zd}jcP3?`+pZl(?6Phu&MRwVHajPGyQ>+&EB)$zM>&|ttfFTT6|+}Q>Gly=xj*hH(v
za`I#+;ckuPW#RNU%P)&lJ_O12G6mp?0S3ElPO+R|Zq~Rhn9Hf0=X358z`Vi+m(0n+
z<zcqEPw=jowDFApAyc*aV4ltE@R@yMlrMPaROZgAkxzGZU*_H2n#^`n0;U8^378Tv
zC16URWF!DPAL0XG7xe_N<4>PHUE&fv;UQ*V!GZ-2u@(0CustK*0Jdd&8>l@F%7`(T
zJb5xHo2Ic})xj5R*+Yj8RZT8)*f%RytSB)KE)i^v{rdGI*s*h5_+EgrbLUR+XVkA>
zUu>lA=7RkfpNFv9!tUx0N|JxrW&8B$LqS17Vh2`nB}U$0_l2FfZr!?q>&{1naV5z=
z_<&s-F)T>1ng96l!^l3ZUAvYlSFTJ;mMkHw)vEhIoDfTpfAG0z(IT<oBgSU)=FP&R
z(U*ra(YbSHYTURn!DljL$PlVks}|k6ch433B_{uO@7~GY>C&Z(*!Az<zc2Fd+qbX7
z{)XQY{9^wDPM$m|=MJ$<u0FR)YX87@5gZ&$J9g|4zVLq_W(#+Rig|*s6!BLTDpb(@
zOE|l&Teqf|m>7Z#jG*`*IB=k`%b||@2lGM>p1|GxgLteaO`6c%yLa{B@Ug%rv~uN2
zIR`km*gJy<57u!|NKH+p1`Qgxyss4hZQHhW_#Yi6;L4mib0{DnK+cq_GpF#ocI`@S
z+O(ku4<4u{ksEx5@aG{WP66iW)~%cPKM{+E^Iff4H9C0kphA%xcQMXA)?oz2KYW;1
zuU<8FOCA3q{EfJe;SY7?3kM>6p}04C_Ux(0?4ccJ6>{FTZJW~`2CwiFVh@cPHHzTV
z#@l5Nm>2POEn2j28n5`r-WWfAyaQd#fjtQyB=#wIgAWzHOBH_y9GolM8}KK?H;TAF
zyt4r0SUc`=oLM8l?+c$MXk(2tXU^2eDqPHum_fXs%D<}m6#uvv@NNzoG>A5A*g(gQ
z9V7UP7cX8+;o;%>J_Q}D1-?eSrMMsV?%gXo0sedJ(+d|asOe=-;J=3--_^dun+E@J
zxpL)1KFZ&$PhczDym?dJ0-O!VRDt4u;>3wU3-5LL^5v;Yl`4_~0|N<fJ$%-PeZ(CA
zUp4-7$O}2{6@Pz!ij0huJ*fCZ4qXW6COaFZS7(51ckS9G`yPH=<x@6dg6EMVN6Os_
zolQYrUY?wnOP4N56KH}K{;%cBmy2vwe5M+M9P2>LCw$Dw$;q;I6|brAKofHT&(+<n
z@DS$!-!}Z{o&a~(zJ2@jyVVn}*=I_?lz=G#Qv#+0ObM70_`gYj^(jD+lJ0|xW8M+y
z=vm<_!|P)HGnl<-&V9~@ZR0tH^I%SCzO)AB74aJ>oa|#zqPTtr>)=$#<uV1}i2?g0
Tlk;Jm2O)mO1XBXPB7uJarjnKk

literal 4286
zcmeHLOKuuL5PjK%MHWVi6lD<!mRb4$mdFuu1m7S&L72}0%nh7nb{xS*IY7K-1~WG>
zOGiR<sv2rs-P1h`ut*jRDypfj@9U}_3E&NVhC}c-e)fS606r6u2w#X;ZXeov|87fL
z!TI})z`sQxSz?%$m}Cpw?WF=YNnu;Mk#t%h*=w(2a7>EbCw`xmFozJ^aNatJY>w+g
ze6a2@u~m#^BZm@8wco9#Crlli0uLb^3E$t2-WIc^#(?t)*@`UpuofJ(Uyh@F>b3Ph
z$D^m8Xq~pTkGJ4Q`Q2)te3mgkWYZ^Ijq|hkiP^9`De={bQQ%heZC$QU2UpP(-tbl8
zPWD2abEew;oat@w`uP3J^YpsgT%~jT(Dk%oU}sa$7|n6hBjDj`+I;RX(>)%<Y^V1u
zxpEJLVzZ2NFGX+1TXChn89VxczG?Ja<o=SJ8n{y5$ezyw`8sz3-<3{&C8oX)|94kh
z+0M_EV^O^m@tH21JEPN_ux%Gy1GUw?U~8Zr)3xvGXUSPO+3I<5aAh6uT<iYgm~_ug
ziEA0#JM$)SV%(oc@>lm_7N{+B7Mu%H?422lE%MBJH!!YTN2oT7xr>>N-8OF$C&qU^
z>vLsa{$0X%q1fjOe3P1mCv#lN{xQ4_*HCSAZjTb1`}mlc+9rl8$B3OP%VT@mch_~G
z7Y+4b{r>9e=M+7vSI;BgB?ryZDY4m>&w<W+!o=%S{hjU42>cHSn81VH1N~`0gvwH{
z8dv#hG|OK`>1;j7tM#B)Z7zDN?{6=dUal}$e<J#b(FPcAa6L9y8G}E@q!eIA^eYgE
GM1KL3x?{8e

diff --git a/portfolio-nuxt/stores/ModalStore.js b/portfolio-nuxt/stores/ModalStore.js
new file mode 100644
index 0000000..2abbf61
--- /dev/null
+++ b/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
+        }
+      }
+})
\ No newline at end of file