Goldenwere/mackenzii
Goldenwere/mackenzii
1
0
Fork 0
Code Activity Actions

update gallery-view with the data changes

Browse source
This commit is contained in:
lightling 2024-10-17 02:46:40 -04:00
parent 04adf08b5c
commit aa884930bc
2 changed files with 15 additions and 17 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

6
libs/types/src/content/templates/gallery-list.d.ts vendored
View file

@ -39,10 +39,10 @@ export type GalleryEntryWithoutVariants = {
*/
export type GalleryEntryWithVariants = {
/**
* The id of the entry from the {@link GalleryEntry variants} collection to display when the page first loads.
* The index of the entry from the {@link GalleryEntry variants} collection to display when the page first loads.
* If this is not defined, the first entry will be chosen instead.
*/
defaultVariant?: string
defaultVariant?: number
/**
* Variants are a collection of alternate media to display for the entry.
* This changes based on the {@link GalleryEntryFormat format} of the entry:
@ -51,7 +51,7 @@ export type GalleryEntryWithVariants = {
* - For all other media, this is put into a carousel,
* where the {@link GalleryEntry.defaultVariant default} or selected variant is displayed in the main viewer
*/
variants: Record<string, GalleryEntryWithoutVariants>
variants: GalleryEntryWithoutVariants[]
} & GalleryEntrySharedProperties
/**

26
projects/frontend/src/views/gallery/gallery-view.vue
View file

@ -31,24 +31,25 @@ const routeSubConfig = routeStore._routes[currentRoute.path]
const description = computed(() => marked.parse(resolved.value.description || '') as string)
const title = computed(() => marked.parse(resolved.value.title || currentRoute.query.id!.toString()) as string)
const url = computed(() => (resolved.value as GalleryEntryWithoutVariants).url)
const hasVariants = computed(() => !!(resolved.value as GalleryEntryWithVariants).variants)
const fields = computed(() => {
const toReturn = {} as Record<string, any>
if (!!resolved.value.date) {
toReturn.date = resolved.value.date
}
if (!!resolved.value.warnings) {
toReturn.warning = resolved.value.warnings
toReturn.warnings = resolved.value.warnings
}
return toReturn
})
const variants = computed(() => (resolved.value as GalleryEntryWithVariants).variants)
const variantsCount = computed(() => Object.keys((resolved.value as GalleryEntryWithVariants).variants).length)
const currentSelection = defineModel('currentSelection', { type: String, default: '' })
const currentUrl = computed(() => hasVariants ? (resolved.value as GalleryEntryWithVariants).variants[currentSelection.value].url : url)
const currentSelection = defineModel('currentSelection', { type: Number, default: 0 })
const currentUrl = computed(() => (resolved.value as GalleryEntryWithVariants).variants[currentSelection.value].url)
const currentAlt = computed(() => (resolved.value as GalleryEntryWithVariants).variants[currentSelection.value].alternativeText)
const currentCaption = computed(() => (resolved.value as GalleryEntryWithVariants).variants[currentSelection.value].caption)
const carousel = ref(null! as HTMLElement)
const onVariantSelected = (event: Event, id: string) => {
const onVariantSelected = (event: Event, id: number) => {
currentSelection.value = id
}
@ -78,11 +79,7 @@ onMounted(async () => {
window.routeConfig = {...routeConfig}
window.routeSubConfig = {...routeSubConfig}
window.routeContentConfig = {...resolved.value}
if (hasVariants) {
currentSelection.value = (resolved.value as GalleryEntryWithVariants).defaultVariant || Object.keys((resolved.value as GalleryEntryWithVariants).variants)[0]
}
currentSelection.value = (resolved.value as GalleryEntryWithVariants).defaultVariant || 0
ready.value = true
emits('loaded')
})
@ -97,10 +94,10 @@ onMounted(async () => {
.view-outlet
img(
:src='currentUrl'
:title='currentCaption || currentAlt || description'
:alt='currentAlt || currentCaption || description'
)
.view-carousel(
v-if='hasVariants'
)
.view-carousel
button.left(
@click='onButtonClicked($event, -1)'
)
@ -112,8 +109,9 @@ onMounted(async () => {
img(
v-for='(variant, id) in variants'
:class='{ active: id === currentSelection }'
:alt='variant.alternativeText || variant.caption || description'
:src='variant.thumbnailUrl || variant.url'
:title='variant.title || id'
:title='variant.caption || id'
@click='onVariantSelected($event, id)'
)
button.right(