primevue-mirror/doc/galleria/AdvancedDoc.vue

500 lines
20 KiB
Vue
Raw Normal View History

2023-02-28 08:29:30 +00:00
<template>
<DocSectionText v-bind="$attrs">
<p>Advanced Galleria implementation with a custom UI.</p>
</DocSectionText>
2024-02-21 07:31:43 +00:00
<DeferredDemo @load="loadDemoData">
<div class="card">
<Galleria
ref="galleria"
v-model:activeIndex="activeIndex"
:value="images"
:numVisible="5"
containerStyle="max-width: 640px"
:showThumbnails="showThumbnails"
:showItemNavigators="true"
:showItemNavigatorsOnHover="true"
:circular="true"
:autoPlay="isAutoPlay"
:transitionInterval="3000"
:responsiveOptions="responsiveOptions"
:pt="{
root: {
2024-05-20 12:14:38 +00:00
class: [{ 'flex flex-col': fullScreen }]
2024-02-21 07:31:43 +00:00
},
content: {
2024-05-20 12:14:38 +00:00
class: ['relative', { 'flex-1 justify-center': fullScreen }]
2024-02-21 07:31:43 +00:00
},
thumbnailwrapper: 'absolute w-full left-0 bottom-0'
}"
>
<template #item="slotProps">
<img :src="slotProps.item.itemImageSrc" :alt="slotProps.item.alt" :style="[{ width: !fullScreen ? '100%' : '', display: !fullScreen ? 'block' : '' }]" />
</template>
<template #thumbnail="slotProps">
2024-06-03 09:41:47 +00:00
<div class="grid gap-4 justify-center">
2024-02-21 07:31:43 +00:00
<img :src="slotProps.item.thumbnailImageSrc" :alt="slotProps.item.alt" style="display: block" />
</div>
</template>
<template #footer>
2024-05-20 12:14:38 +00:00
<div class="flex items-center bg-black/90 text-white">
<Button icon="pi pi-list" @click="onThumbnailButtonClick" :pt="{ root: { class: 'border-none rounded-none hover:bg-white/10 text-white', style: 'background: transparent' } }" />
<Button :icon="slideButtonIcon" @click="toggleAutoSlide" :pt="{ root: { class: 'border-none rounded-none hover:bg-white/10 text-white', style: 'background: transparent' } }" />
2024-02-21 07:31:43 +00:00
<span v-if="images" class="title-container">
2024-05-20 12:14:38 +00:00
<span class="text-sm p-4">{{ activeIndex + 1 }}/{{ images.length }}</span>
<span class="font-bold text-sm p-4">{{ images[activeIndex].title }}</span>
<span class="text-sm p-4">{{ images[activeIndex].alt }}</span>
2024-02-21 07:31:43 +00:00
</span>
2024-05-20 12:14:38 +00:00
<Button :icon="fullScreenIcon" @click="toggleFullScreen" :pt="{ root: { class: 'border-none rounded-none ml-auto hover:bg-white/10 text-white', style: 'background: transparent' } }" />
2024-02-21 07:31:43 +00:00
</div>
</template>
</Galleria>
</div>
</DeferredDemo>
2023-02-28 08:29:30 +00:00
<DocSectionCode :code="code" :service="['PhotoService']" :dependencies="{ sass: '1.45.0', 'sass-loader': '8.0.2' }" />
</template>
<script>
import { PhotoService } from '@/service/PhotoService';
export default {
data() {
return {
images: null,
activeIndex: 0,
showThumbnails: false,
isAutoPlayActive: true,
fullScreen: false,
2023-04-03 23:25:13 +00:00
isAutoPlay: true,
2023-10-26 18:39:49 +00:00
responsiveOptions: [
{
breakpoint: '1300px',
numVisible: 4
},
{
breakpoint: '575px',
numVisible: 1
}
],
2023-02-28 08:29:30 +00:00
code: {
2023-09-22 12:54:14 +00:00
basic: `
2023-10-24 09:40:46 +00:00
<Galleria
ref="galleria"
v-model:activeIndex="activeIndex"
:value="images"
:numVisible="5"
containerStyle="max-width: 640px"
:showThumbnails="showThumbnails"
:showItemNavigators="true"
:showItemNavigatorsOnHover="true"
:circular="true"
:autoPlay="isAutoPlay"
:transitionInterval="3000"
2023-10-26 18:39:49 +00:00
:responsiveOptions="responsiveOptions"
2023-10-24 09:40:46 +00:00
:pt="{
root: {
2024-05-20 12:14:38 +00:00
class: [{ 'flex flex-col': fullScreen }]
2023-10-24 09:40:46 +00:00
},
content: {
2024-05-20 12:14:38 +00:00
class: ['relative', { 'flex-1 justify-center': fullScreen }]
2023-10-24 09:40:46 +00:00
},
thumbnailwrapper: 'absolute w-full left-0 bottom-0'
}"
>
2023-02-28 08:29:30 +00:00
<template #item="slotProps">
<img :src="slotProps.item.itemImageSrc" :alt="slotProps.item.alt" :style="[{ width: !fullScreen ? '100%' : '', display: !fullScreen ? 'block' : '' }]" />
</template>
<template #thumbnail="slotProps">
2024-06-03 09:41:47 +00:00
<div class="grid gap-4 justify-center">
2023-02-28 08:29:30 +00:00
<img :src="slotProps.item.thumbnailImageSrc" :alt="slotProps.item.alt" style="display: block" />
</div>
</template>
<template #footer>
2024-05-20 12:14:38 +00:00
<div class="flex items-center bg-black/90 text-white">
<Button icon="pi pi-list" @click="onThumbnailButtonClick" :pt="{ root: { class: 'border-none rounded-none hover:bg-white/10 text-white', style: 'background: transparent' } }" />
<Button :icon="slideButtonIcon" @click="toggleAutoSlide" :pt="{ root: { class: 'border-none rounded-none hover:bg-white/10 text-white', style: 'background: transparent' } }" />
2023-02-28 08:29:30 +00:00
<span v-if="images" class="title-container">
2024-05-20 12:14:38 +00:00
<span class="text-sm p-4">{{ activeIndex + 1 }}/{{ images.length }}</span>
<span class="font-bold text-sm p-4">{{ images[activeIndex].title }}</span>
<span class="text-sm p-4">{{ images[activeIndex].alt }}</span>
2023-02-28 08:29:30 +00:00
</span>
2024-05-20 12:14:38 +00:00
<Button :icon="fullScreenIcon" @click="toggleFullScreen" :pt="{ root: { class: 'border-none rounded-none ml-auto hover:bg-white/10 text-white', style: 'background: transparent' } }" />
2023-02-28 08:29:30 +00:00
</div>
</template>
2023-10-15 09:38:39 +00:00
</Galleria>
`,
2023-09-22 12:54:14 +00:00
options: `
<template>
2023-10-04 09:32:01 +00:00
<div class="card">
2023-10-24 09:40:46 +00:00
<Galleria
ref="galleria"
v-model:activeIndex="activeIndex"
:value="images"
:numVisible="5"
containerStyle="max-width: 640px"
:showThumbnails="showThumbnails"
:showItemNavigators="true"
:showItemNavigatorsOnHover="true"
:circular="true"
:autoPlay="isAutoPlay"
:transitionInterval="3000"
2023-10-26 18:39:49 +00:00
:responsiveOptions="responsiveOptions"
2023-10-24 09:40:46 +00:00
:pt="{
root: {
2024-05-20 12:14:38 +00:00
class: [{ 'flex flex-col': fullScreen }]
2023-10-24 09:40:46 +00:00
},
content: {
2024-05-20 12:14:38 +00:00
class: ['relative', { 'flex-1 justify-center': fullScreen }]
2023-10-24 09:40:46 +00:00
},
thumbnailwrapper: 'absolute w-full left-0 bottom-0'
}"
>
2023-02-28 08:29:30 +00:00
<template #item="slotProps">
<img :src="slotProps.item.itemImageSrc" :alt="slotProps.item.alt" :style="[{ width: !fullScreen ? '100%' : '', display: !fullScreen ? 'block' : '' }]" />
</template>
<template #thumbnail="slotProps">
2024-06-03 09:41:47 +00:00
<div class="grid gap-4 justify-center">
2023-02-28 08:29:30 +00:00
<img :src="slotProps.item.thumbnailImageSrc" :alt="slotProps.item.alt" style="display: block" />
</div>
</template>
<template #footer>
2024-05-20 12:14:38 +00:00
<div class="flex items-center bg-black/90 text-white">
<Button icon="pi pi-list" @click="onThumbnailButtonClick" :pt="{ root: { class: 'border-none rounded-none hover:bg-white/10 text-white', style: 'background: transparent' } }" />
<Button :icon="slideButtonIcon" @click="toggleAutoSlide" :pt="{ root: { class: 'border-none rounded-none hover:bg-white/10 text-white', style: 'background: transparent' } }" />
2023-02-28 08:29:30 +00:00
<span v-if="images" class="title-container">
2024-05-20 12:14:38 +00:00
<span class="text-sm p-4">{{ activeIndex + 1 }}/{{ images.length }}</span>
<span class="font-bold text-sm p-4">{{ images[activeIndex].title }}</span>
<span class="text-sm p-4">{{ images[activeIndex].alt }}</span>
2023-02-28 08:29:30 +00:00
</span>
2024-05-20 12:14:38 +00:00
<Button :icon="fullScreenIcon" @click="toggleFullScreen" :pt="{ root: { class: 'border-none rounded-none ml-auto hover:bg-white/10 text-white', style: 'background: transparent' } }" />
2023-02-28 08:29:30 +00:00
</div>
</template>
</Galleria>
</div>
</template>
<script>
import { PhotoService } from '@/service/PhotoService';
export default {
data() {
return {
images: null,
activeIndex: 0,
showThumbnails: false,
fullScreen: false,
2023-04-03 23:25:13 +00:00
isAutoPlay: true,
2023-10-26 18:39:49 +00:00
responsiveOptions: [
{
breakpoint: '1300px',
numVisible: 4
},
{
breakpoint: '575px',
numVisible: 1
}
]
2023-02-28 08:29:30 +00:00
};
},
mounted() {
PhotoService.getImages().then((data) => (this.images = data));
this.bindDocumentListeners();
},
methods: {
2023-03-28 14:00:36 +00:00
toggleAutoSlide() {
2023-04-03 23:25:13 +00:00
this.isAutoPlay = !this.isAutoPlay;
2023-03-28 14:00:36 +00:00
},
2023-02-28 08:29:30 +00:00
onThumbnailButtonClick() {
this.showThumbnails = !this.showThumbnails;
},
toggleFullScreen() {
if (this.fullScreen) {
this.closeFullScreen();
} else {
this.openFullScreen();
}
},
onFullScreenChange() {
this.fullScreen = !this.fullScreen;
},
openFullScreen() {
let elem = this.$refs.galleria.$el;
if (elem.requestFullscreen) {
elem.requestFullscreen();
} else if (elem.mozRequestFullScreen) {
/* Firefox */
elem.mozRequestFullScreen();
} else if (elem.webkitRequestFullscreen) {
/* Chrome, Safari & Opera */
elem.webkitRequestFullscreen();
} else if (elem.msRequestFullscreen) {
/* IE/Edge */
elem.msRequestFullscreen();
}
},
closeFullScreen() {
if (document.exitFullscreen) {
document.exitFullscreen();
} else if (document.mozCancelFullScreen) {
document.mozCancelFullScreen();
} else if (document.webkitExitFullscreen) {
document.webkitExitFullscreen();
} else if (document.msExitFullscreen) {
document.msExitFullscreen();
}
},
bindDocumentListeners() {
document.addEventListener('fullscreenchange', this.onFullScreenChange);
document.addEventListener('mozfullscreenchange', this.onFullScreenChange);
document.addEventListener('webkitfullscreenchange', this.onFullScreenChange);
document.addEventListener('msfullscreenchange', this.onFullScreenChange);
},
unbindDocumentListeners() {
document.removeEventListener('fullscreenchange', this.onFullScreenChange);
document.removeEventListener('mozfullscreenchange', this.onFullScreenChange);
document.removeEventListener('webkitfullscreenchange', this.onFullScreenChange);
document.removeEventListener('msfullscreenchange', this.onFullScreenChange);
}
},
computed: {
2023-03-28 14:00:36 +00:00
slideButtonIcon() {
2023-04-03 23:25:13 +00:00
return this.isAutoPlay ? 'pi pi-pause' : 'pi pi-play';
2023-03-28 14:00:36 +00:00
},
2023-02-28 08:29:30 +00:00
fullScreenIcon() {
return \`pi ${this.fullScreen ? 'pi-window-minimize' : 'pi-window-maximize'}\`;
}
}
};
<\/script>
2023-10-15 09:38:39 +00:00
`,
2023-09-22 12:54:14 +00:00
composition: `
<template>
2023-10-04 09:32:01 +00:00
<div class="card">
2023-10-24 09:40:46 +00:00
<Galleria
ref="galleria"
v-model:activeIndex="activeIndex"
:value="images"
:numVisible="5"
containerStyle="max-width: 640px"
:showThumbnails="showThumbnails"
:showItemNavigators="true"
:showItemNavigatorsOnHover="true"
:circular="true"
:autoPlay="isAutoPlay"
:transitionInterval="3000"
2023-10-26 18:39:49 +00:00
:responsiveOptions="responsiveOptions"
2023-10-24 09:40:46 +00:00
:pt="{
root: {
2024-05-20 12:14:38 +00:00
class: [{ 'flex flex-col': fullScreen }]
2023-10-24 09:40:46 +00:00
},
content: {
2024-05-20 12:14:38 +00:00
class: ['relative', { 'flex-1 justify-center': fullScreen }]
2023-10-24 09:40:46 +00:00
},
thumbnailwrapper: 'absolute w-full left-0 bottom-0'
}"
>
2023-02-28 08:29:30 +00:00
<template #item="slotProps">
<img :src="slotProps.item.itemImageSrc" :alt="slotProps.item.alt" :style="[{ width: !fullScreen ? '100%' : '', display: !fullScreen ? 'block' : '' }]" />
</template>
<template #thumbnail="slotProps">
2024-06-03 09:41:47 +00:00
<div class="grid gap-4 justify-center">
2023-02-28 08:29:30 +00:00
<img :src="slotProps.item.thumbnailImageSrc" :alt="slotProps.item.alt" style="display: block" />
</div>
</template>
<template #footer>
2024-05-20 12:14:38 +00:00
<div class="flex items-center bg-black/90 text-white">
<Button icon="pi pi-list" @click="onThumbnailButtonClick" :pt="{ root: { class: 'border-none rounded-none hover:bg-white/10 text-white', style: 'background: transparent' } }" />
<Button :icon="slideButtonIcon" @click="toggleAutoSlide" :pt="{ root: { class: 'border-none rounded-none hover:bg-white/10 text-white', style: 'background: transparent' } }" />
2023-02-28 08:29:30 +00:00
<span v-if="images" class="title-container">
2024-05-20 12:14:38 +00:00
<span class="text-sm p-4">{{ activeIndex + 1 }}/{{ images.length }}</span>
<span class="font-bold text-sm p-4">{{ images[activeIndex].title }}</span>
<span class="text-sm p-4">{{ images[activeIndex].alt }}</span>
2023-02-28 08:29:30 +00:00
</span>
2024-05-20 12:14:38 +00:00
<Button :icon="fullScreenIcon" @click="toggleFullScreen" :pt="{ root: { class: 'border-none rounded-none ml-auto hover:bg-white/10 text-white', style: 'background: transparent' } }" />
2023-02-28 08:29:30 +00:00
</div>
</template>
</Galleria>
</div>
</template>
<script setup>
import { ref, computed, onMounted } from "vue";
import { PhotoService } from '@/service/PhotoService';
onMounted(() => {
PhotoService.getImages().then((data) => (images.value = data));
bindDocumentListeners();
});
const galleria = ref();
const images = ref();
const activeIndex = ref(0);
const showThumbnails = ref(false);
const fullScreen = ref(false);
2023-04-03 23:25:13 +00:00
const isAutoPlay = ref(true);
2023-02-28 08:29:30 +00:00
2023-03-28 14:00:36 +00:00
const toggleAutoSlide = () => {
2023-04-03 23:25:13 +00:00
isAutoPlay.value = !isAutoPlay.value ;
2023-03-28 14:00:36 +00:00
};
2023-02-28 08:29:30 +00:00
const onThumbnailButtonClick = () => {
showThumbnails.value = !showThumbnails.value ;
};
2023-10-26 18:39:49 +00:00
const responsiveOptions = ref([
{
breakpoint: '1300px',
numVisible: 4
},
{
breakpoint: '575px',
numVisible: 1
}
]);
2023-02-28 08:29:30 +00:00
const toggleFullScreen = () => {
if (fullScreen.value ) {
closeFullScreen();
} else {
openFullScreen();
}
};
const onFullScreenChange = () => {
fullScreen.value = !fullScreen.value ;
};
const openFullScreen = () =>{
let elem = galleria.value.$el;
if (elem.requestFullscreen) {
elem.requestFullscreen();
} else if (elem.mozRequestFullScreen) {
/* Firefox */
elem.mozRequestFullScreen();
} else if (elem.webkitRequestFullscreen) {
/* Chrome, Safari & Opera */
elem.webkitRequestFullscreen();
} else if (elem.msRequestFullscreen) {
/* IE/Edge */
elem.msRequestFullscreen();
}
};
const closeFullScreen = () => {
if (document.exitFullscreen) {
document.exitFullscreen();
} else if (document.mozCancelFullScreen) {
document.mozCancelFullScreen();
} else if (document.webkitExitFullscreen) {
document.webkitExitFullscreen();
} else if (document.msExitFullscreen) {
document.msExitFullscreen();
}
};
const bindDocumentListeners = () => {
document.addEventListener('fullscreenchange', onFullScreenChange);
document.addEventListener('mozfullscreenchange', onFullScreenChange);
document.addEventListener('webkitfullscreenchange', onFullScreenChange);
document.addEventListener('msfullscreenchange', onFullScreenChange);
};
const unbindDocumentListeners = () => {
document.removeEventListener('fullscreenchange', onFullScreenChange);
document.removeEventListener('mozfullscreenchange', onFullScreenChange);
document.removeEventListener('webkitfullscreenchange', onFullScreenChange);
document.removeEventListener('msfullscreenchange', onFullScreenChange);
};
const fullScreenIcon = computed(() => {
return \`pi \${fullScreen.value ? 'pi-window-minimize' : 'pi-window-maximize'}\`;
});
2023-03-28 14:00:36 +00:00
const slideButtonIcon = computed(() => {
2023-04-03 23:25:13 +00:00
return \`pi \${isAutoPlay.value ? 'pi-pause' : 'pi-play'}\`;
2023-03-28 14:00:36 +00:00
});
2023-02-28 08:29:30 +00:00
<\/script>
2023-10-24 09:40:46 +00:00
`,
2023-02-28 08:29:30 +00:00
data: `
/* PhotoService */
{
itemImageSrc: 'https://primefaces.org/cdn/primevue/images/galleria/galleria1.jpg',
thumbnailImageSrc: 'https://primefaces.org/cdn/primevue/images/galleria/galleria1s.jpg',
alt: 'Description for Image 1',
title: 'Title 1'
},
...
`
}
};
},
methods: {
2024-02-21 07:31:43 +00:00
loadDemoData() {
PhotoService.getImages().then((data) => (this.images = data));
this.bindDocumentListeners();
},
2023-03-28 14:00:36 +00:00
toggleAutoSlide() {
2023-04-03 23:25:13 +00:00
this.isAutoPlay = !this.isAutoPlay;
2023-03-28 14:00:36 +00:00
},
2023-02-28 08:29:30 +00:00
onThumbnailButtonClick() {
this.showThumbnails = !this.showThumbnails;
},
toggleFullScreen() {
if (this.fullScreen) {
this.closeFullScreen();
} else {
this.openFullScreen();
}
},
onFullScreenChange() {
this.fullScreen = !this.fullScreen;
},
openFullScreen() {
let elem = this.$refs.galleria.$el;
if (elem.requestFullscreen) {
elem.requestFullscreen();
} else if (elem.mozRequestFullScreen) {
/* Firefox */
elem.mozRequestFullScreen();
} else if (elem.webkitRequestFullscreen) {
/* Chrome, Safari & Opera */
elem.webkitRequestFullscreen();
} else if (elem.msRequestFullscreen) {
/* IE/Edge */
elem.msRequestFullscreen();
}
},
closeFullScreen() {
if (document.exitFullscreen) {
document.exitFullscreen();
} else if (document.mozCancelFullScreen) {
document.mozCancelFullScreen();
} else if (document.webkitExitFullscreen) {
document.webkitExitFullscreen();
} else if (document.msExitFullscreen) {
document.msExitFullscreen();
}
},
bindDocumentListeners() {
document.addEventListener('fullscreenchange', this.onFullScreenChange);
document.addEventListener('mozfullscreenchange', this.onFullScreenChange);
document.addEventListener('webkitfullscreenchange', this.onFullScreenChange);
document.addEventListener('msfullscreenchange', this.onFullScreenChange);
},
unbindDocumentListeners() {
document.removeEventListener('fullscreenchange', this.onFullScreenChange);
document.removeEventListener('mozfullscreenchange', this.onFullScreenChange);
document.removeEventListener('webkitfullscreenchange', this.onFullScreenChange);
document.removeEventListener('msfullscreenchange', this.onFullScreenChange);
}
},
computed: {
2023-03-28 14:00:36 +00:00
slideButtonIcon() {
2023-04-03 23:25:13 +00:00
return this.isAutoPlay ? 'pi pi-pause' : 'pi pi-play';
2023-03-28 14:00:36 +00:00
},
2023-02-28 08:29:30 +00:00
fullScreenIcon() {
return `pi ${this.fullScreen ? 'pi-window-minimize' : 'pi-window-maximize'}`;
}
}
};
</script>