modal implemented more efficiently now

main
mwinter 1 year ago
parent e432d9ac7e
commit 540e66a39b

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

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

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

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

@ -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">
<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>
<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')

Binary file not shown.

Before

Width:  |  Height:  |  Size: 4.2 KiB

After

Width:  |  Height:  |  Size: 15 KiB

@ -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
}
}
})
Loading…
Cancel
Save