vertumnus
/
primevue-mirror
mirror of https://github.com/primefaces/primevue.git
1
0
Fork 0
Code Packages Releases Activity

Merge pull request #3813 from sezisfurkan/issue-3619 

Galleria: Play and Pause Feature
pull/3841/head
Tuğçe Küçükoğlu 2023-04-05 15:51:34 +03:00 committed by GitHub
parent 242454bafe 85b6c807c3
commit 3078624c3e
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 32 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
components/lib/galleria/GalleriaContent.vue
View File

@ -76,6 +76,9 @@ export default {
},
'$attrs.numVisible': function (newVal) {
this.numVisible = newVal;
},
'$attrs.autoPlay': function (newVal) {
newVal ? this.startSlideShow() : this.stopSlideShow();
}
},
updated() {

33
doc/galleria/AdvancedDoc.vue
View File

@ -14,7 +14,7 @@
:showItemNavigators="true"
:showItemNavigatorsOnHover="true"
:circular="true"
:autoPlay="true"
:autoPlay="isAutoPlay"
:transitionInterval="3000"
>
<template #item="slotProps">
@ -28,6 +28,7 @@
<template #footer>
<div class="custom-galleria-footer">
<Button icon="pi pi-list" @click="onThumbnailButtonClick" />
<Button :icon="slideButtonIcon" @click="toggleAutoSlide" />
<span v-if="images" class="title-container">
<span>{{ activeIndex + 1 }}/{{ images.length }}</span>
<span class="title">{{ images[activeIndex].title }}</span>
@ -52,10 +53,11 @@ export default {
showThumbnails: false,
isAutoPlayActive: true,
fullScreen: false,
isAutoPlay: true,
code: {
basic: `
<Galleria ref="galleria" v-model:activeIndex="activeIndex" :value="images" :numVisible="5" containerStyle="max-width: 640px" :containerClass="galleriaClass"
:showThumbnails="showThumbnails" :showItemNavigators="true" :showItemNavigatorsOnHover="true" :circular="true" :autoPlay="true" :transitionInterval="3000">
:showThumbnails="showThumbnails" :showItemNavigators="true" :showItemNavigatorsOnHover="true" :circular="true" :autoPlay="isAutoPlay" :transitionInterval="3000">
<template #item="slotProps">
<img :src="slotProps.item.itemImageSrc" :alt="slotProps.item.alt" :style="[{ width: !fullScreen ? '100%' : '', display: !fullScreen ? 'block' : '' }]" />
</template>
@ -67,6 +69,7 @@ export default {
<template #footer>
<div class="custom-galleria-footer">
<Button icon="pi pi-list" @click="onThumbnailButtonClick" />
<Button :icon="slideButtonIcon" @click="toggleAutoSlide" />
<span v-if="images" class="title-container">
<span>{{ activeIndex + 1 }}/{{ images.length }}</span>
<span class="title">{{ images[activeIndex].title }}</span>
@ -80,7 +83,7 @@ export default {
<template>
<div class="card flex justify-content-center galleria demo">
<Galleria ref="galleria" v-model:activeIndex="activeIndex" :value="images" :numVisible="5" containerStyle="max-width: 640px" :containerClass="galleriaClass"
:showThumbnails="showThumbnails" :showItemNavigators="true" :showItemNavigatorsOnHover="true" :circular="true" :autoPlay="true" :transitionInterval="3000">
:showThumbnails="showThumbnails" :showItemNavigators="true" :showItemNavigatorsOnHover="true" :circular="true" :autoPlay="isAutoPlay" :transitionInterval="3000">
<template #item="slotProps">
<img :src="slotProps.item.itemImageSrc" :alt="slotProps.item.alt" :style="[{ width: !fullScreen ? '100%' : '', display: !fullScreen ? 'block' : '' }]" />
</template>
@ -92,6 +95,7 @@ export default {
<template #footer>
<div class="custom-galleria-footer">
<Button icon="pi pi-list" @click="onThumbnailButtonClick" />
<Button :icon="slideButtonIcon" @click="toggleAutoSlide" />
<span v-if="images" class="title-container">
<span>{{ activeIndex + 1 }}/{{ images.length }}</span>
<span class="title">{{ images[activeIndex].title }}</span>
@ -114,6 +118,7 @@ export default {
activeIndex: 0,
showThumbnails: false,
fullScreen: false,
isAutoPlay: true,
};
},
mounted() {
@ -121,6 +126,9 @@ export default {
this.bindDocumentListeners();
},
methods: {
toggleAutoSlide() {
this.isAutoPlay = !this.isAutoPlay;
},
onThumbnailButtonClick() {
this.showThumbnails = !this.showThumbnails;
},
@ -175,6 +183,9 @@ export default {
}
},
computed: {
slideButtonIcon() {
return this.isAutoPlay ? 'pi pi-pause' : 'pi pi-play';
},
galleriaClass() {
return ['custom-galleria', { fullscreen: this.fullScreen }];
},
@ -251,7 +262,7 @@ export default {
<template>
<div class="card flex justify-content-center galleria demo">
<Galleria ref="galleria" v-model:activeIndex="activeIndex" :value="images" :numVisible="5" containerStyle="max-width: 640px" :containerClass="galleriaClass"
:showThumbnails="showThumbnails" :showItemNavigators="true" :showItemNavigatorsOnHover="true" :circular="true" :autoPlay="true" :transitionInterval="3000">
:showThumbnails="showThumbnails" :showItemNavigators="true" :showItemNavigatorsOnHover="true" :circular="true" :autoPlay="isAutoPlay" :transitionInterval="3000">
<template #item="slotProps">
<img :src="slotProps.item.itemImageSrc" :alt="slotProps.item.alt" :style="[{ width: !fullScreen ? '100%' : '', display: !fullScreen ? 'block' : '' }]" />
</template>
@ -263,6 +274,7 @@ export default {
<template #footer>
<div class="custom-galleria-footer">
<Button icon="pi pi-list" @click="onThumbnailButtonClick" />
<Button :icon="slideButtonIcon" @click="toggleAutoSlide" />
<span v-if="images" class="title-container">
<span>{{ activeIndex + 1 }}/{{ images.length }}</span>
<span class="title">{{ images[activeIndex].title }}</span>
@ -289,7 +301,11 @@ const images = ref();
const activeIndex = ref(0);
const showThumbnails = ref(false);
const fullScreen = ref(false);
const isAutoPlay = ref(true);
const toggleAutoSlide = () => {
isAutoPlay.value = !isAutoPlay.value ;
};
const onThumbnailButtonClick = () => {
showThumbnails.value = !showThumbnails.value ;
};
@ -351,6 +367,9 @@ const galleriaClass = computed(() => {
const fullScreenIcon = computed(() => {
return \`pi \${fullScreen.value ? 'pi-window-minimize' : 'pi-window-maximize'}\`;
});
const slideButtonIcon = computed(() => {
return \`pi \${isAutoPlay.value ? 'pi-pause' : 'pi-play'}\`;
});
<\/script>
<style lang="scss" scoped>
@ -433,6 +452,9 @@ const fullScreenIcon = computed(() => {
this.bindDocumentListeners();
},
methods: {
toggleAutoSlide() {
this.isAutoPlay = !this.isAutoPlay;
},
onThumbnailButtonClick() {
this.showThumbnails = !this.showThumbnails;
},
@ -487,6 +509,9 @@ const fullScreenIcon = computed(() => {
}
},
computed: {
slideButtonIcon() {
return this.isAutoPlay ? 'pi pi-pause' : 'pi pi-play';
},
galleriaClass() {
return ['custom-galleria', { fullscreen: this.fullScreen }];
},