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

Refactor on advanced galleria demo

pull/345/head
mertsincan 2020-05-21 03:43:17 +03:00
parent eba832d958
commit 3aabaac995
1 changed files with 189 additions and 80 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

269
src/views/galleria/GalleriaAdvancedDemo.vue
View File

@ -12,7 +12,7 @@
:showThumbnails="showThumbnails" :showItemNavigators="true" :showItemNavigatorsOnHover="true" :showThumbnails="showThumbnails" :showItemNavigators="true" :showItemNavigatorsOnHover="true"
:circular="true" :autoPlay="true" :transitionInterval="3000"> :circular="true" :autoPlay="true" :transitionInterval="3000">
<template #item="slotProps"> <template #item="slotProps">
<img :src="slotProps.item.previewImageSrc" :alt="slotProps.item.alt" :style="[{'width': !isPreviewFullScreen ? '100%' : '', 'display': !isPreviewFullScreen ? 'block' : ''}]" /> <img :src="slotProps.item.previewImageSrc" :alt="slotProps.item.alt" :style="[{'width': !fullScreen ? '100%' : '', 'display': !fullScreen ? 'block' : ''}]" />
</template> </template>
<template #thumbnail="slotProps"> <template #thumbnail="slotProps">
<div class="p-grid p-nogutter p-justify-center"> <div class="p-grid p-nogutter p-justify-center">
@ -22,16 +22,147 @@
<template #footer> <template #footer>
<div class="custom-galleria-footer"> <div class="custom-galleria-footer">
<Button icon="pi pi-list" @click="onThumbnailButtonClick" /> <Button icon="pi pi-list" @click="onThumbnailButtonClick" />
<span v-if="images"> <span v-if="images" class="title-container">
<span>{{activeIndex + 1}}/{{images.length}}</span> <span>{{activeIndex + 1}}/{{images.length}}</span>
<span class="title">{{images[activeIndex].title}}</span> <span class="title">{{images[activeIndex].title}}</span>
<span>{{images[activeIndex].alt}}</span> <span>{{images[activeIndex].alt}}</span>
</span> </span>
<Button :icon="fullScreenIcon" @click="toggleFullScreen" /> <Button :icon="fullScreenIcon" @click="toggleFullScreen" class="fullscreen-button" />
</div> </div>
</template> </template>
</Galleria> </Galleria>
</div> </div>
<div class="content-section documentation">
<TabView>
<TabPanel header="Source">
<CodeHighlight>
<template v-pre>
&lt;Galleria ref="galleria" :value="images" :activeIndex.sync="activeIndex" :numVisible="5" style="max-width: 640px;" :class="galleriaClass"
:showThumbnails="showThumbnails" :showItemNavigators="true" :showItemNavigatorsOnHover="true"
:circular="true" :autoPlay="true" :transitionInterval="3000"&gt;
&lt;template #item="slotProps"&gt;
&lt;img :src="slotProps.item.previewImageSrc" :alt="slotProps.item.alt" :style="[{'width': !fullScreen ? '100%' : '', 'display': !fullScreen ? 'block' : ''}]" /&gt;
&lt;/template&gt;
&lt;template #thumbnail="slotProps"&gt;
&lt;div class="p-grid p-nogutter p-justify-center"&gt;
&lt;img :src="slotProps.item.thumbnailImageSrc" :alt="slotProps.item.alt" style="display: block;" /&gt;
&lt;/div&gt;
&lt;/template&gt;
&lt;template #footer&gt;
&lt;div class="custom-galleria-footer"&gt;
&lt;Button icon="pi pi-list" @click="onThumbnailButtonClick" /&gt;
&lt;span v-if="images" class="title-container"&gt;
&lt;span&gt;{{activeIndex + 1}}/{{images.length}}&lt;/span&gt;
&lt;span class="title"&gt;{{images[activeIndex].title}}&lt;/span&gt;
&lt;span&gt;{{images[activeIndex].alt}}&lt;/span&gt;
&lt;/span&gt;
&lt;Button :icon="fullScreenIcon" @click="toggleFullScreen" class="fullscreen-button" /&gt;
&lt;/div&gt;
&lt;/template&gt;
&lt;/Galleria&gt;
</template>
</CodeHighlight>
<CodeHighlight lang="javascript">
import PhotoService from '../../service/PhotoService';
export default {
data() {
return {
images: null,
responsiveOptions: [
{
breakpoint: '1024px',
numVisible: 5
},
{
breakpoint: '768px',
numVisible: 3
},
{
breakpoint: '560px',
numVisible: 1
}
]
}
},
galleriaService: null,
created() {
this.galleriaService = new PhotoService();
},
mounted() {
this.galleriaService.getImages().then(data => this.images = data);
}
}
</CodeHighlight>
<CodeHighlight lang="css">
::v-deep {
.custom-galleria {
&.fullscreen {
display: flex;
flex-direction: column;
.p-galleria-content {
flex-grow: 1;
justify-content: center;
}
}
.p-galleria-content {
position: relative;
}
.p-galleria-thumbnail-wrapper {
position: absolute;
bottom: 0;
left: 0;
width: 100%;
}
.p-galleria-thumbnail-items-container {
width: 100%;
}
.custom-galleria-footer {
display: flex;
align-items: center;
background-color: rgba(0, 0, 0, .9);
color: #ffffff;
> button {
background-color: transparent;
border: 0 none;
border-radius: 0;
margin: .2rem 0;
&.fullscreen-button {
margin-left: auto;
}
&:hover {
background-color: rgba(255, 255, 255, 0.1);
}
}
}
.title-container {
> span {
font-size: .9rem;
padding-left: .829rem;
&.title {
font-weight: bold;
}
}
}
}
}
</CodeHighlight>
</TabPanel>
</TabView>
</div>
</div> </div>
</template> </template>
@ -45,7 +176,7 @@ export default {
images: null, images: null,
activeIndex: 0, activeIndex: 0,
showThumbnails: false, showThumbnails: false,
isPreviewFullScreen: false fullScreen: false
} }
}, },
galleriaService: null, galleriaService: null,
@ -61,17 +192,17 @@ export default {
this.showThumbnails = !this.showThumbnails; this.showThumbnails = !this.showThumbnails;
}, },
toggleFullScreen() { toggleFullScreen() {
if (this.isPreviewFullScreen) { if (this.fullScreen) {
this.closePreviewFullScreen(); this.closeFullScreen();
} }
else { else {
this.openPreviewFullScreen(); this.openFullScreen();
} }
}, },
onFullScreenChange() { onFullScreenChange() {
this.isPreviewFullScreen = !this.isPreviewFullScreen; this.fullScreen = !this.fullScreen;
}, },
openPreviewFullScreen() { openFullScreen() {
let elem = this.$refs.galleria.$el; let elem = this.$refs.galleria.$el;
if (elem.requestFullscreen) { if (elem.requestFullscreen) {
elem.requestFullscreen(); elem.requestFullscreen();
@ -86,7 +217,7 @@ export default {
elem.msRequestFullscreen(); elem.msRequestFullscreen();
} }
}, },
closePreviewFullScreen() { closeFullScreen() {
if (document.exitFullscreen) { if (document.exitFullscreen) {
document.exitFullscreen(); document.exitFullscreen();
} }
@ -115,10 +246,10 @@ export default {
}, },
computed: { computed: {
galleriaClass() { galleriaClass() {
return ['custom-galleria', {'preview-fullscreen': this.isPreviewFullScreen}]; return ['custom-galleria', {'fullscreen': this.fullScreen}];
}, },
fullScreenIcon() { fullScreenIcon() {
return `pi ${this.isPreviewFullScreen ? 'pi-window-minimize' : 'pi-window-maximize'}`; return `pi ${this.fullScreen ? 'pi-window-minimize' : 'pi-window-maximize'}`;
} }
} }
} }
@ -127,82 +258,60 @@ export default {
<style lang="scss" scoped> <style lang="scss" scoped>
::v-deep { ::v-deep {
.custom-galleria { .custom-galleria {
&.p-galleria { &.fullscreen {
display: flex;
flex-direction: column;
.p-galleria-content { .p-galleria-content {
height: 95%; flex-grow: 1;
overflow: hidden; justify-content: center;
position: relative; }
}
.p-galleria-thumbnail-content { .p-galleria-content {
position: absolute; position: relative;
width: 100%; }
bottom: 0;
background-image: linear-gradient(180deg, rgba(0,0,0,0.00) 0%, rgba(0,0,0,0.50) 70%);
.p-galleria-thumbnail-container { .p-galleria-thumbnail-wrapper {
.p-galleria-thumbnail-items-content { position: absolute;
.p-galleria-thumbnail-items-container { bottom: 0;
.p-galleria-thumbnail-item { left: 0;
opacity: .6; width: 100%;
}
&.p-galleria-thumbnail-item-current { .p-galleria-thumbnail-items-container {
opacity: 1; width: 100%;
} }
}
} .custom-galleria-footer {
} display: flex;
} align-items: center;
background-color: rgba(0, 0, 0, .9);
color: #ffffff;
> button {
background-color: transparent;
border: 0 none;
border-radius: 0;
margin: .2rem 0;
&.fullscreen-button {
margin-left: auto;
}
&:hover {
background-color: rgba(255, 255, 255, 0.1);
} }
} }
}
.p-galleria-footer { .title-container {
padding: 0; > span {
background-color: rgba(0, 0, 0, .9); font-size: .9rem;
border: rgba(0, 0, 0, .9); padding-left: .829rem;
.custom-galleria-footer { &.title {
width: 100%; font-weight: bold;
display: flex;
align-items: center;
justify-content: stretch;
color: #ffffff;
> button {
background-color: transparent;
padding: .3rem;
margin: .2rem;
border: 0 none;
border-radius: 0;
color: #ffffff;
&:hover {
background-color: transparent;
}
}
> span {
flex-grow: 1;
> span {
font-size: .9rem;
padding-left: .829rem;
&.title {
font-weight: bold;
}
}
}
}
}
&.preview-fullscreen {
.p-galleria-preview-container {
.p-galleria-preview-nav-button {
top: 50%;
height: 20rem;
width: 4rem;
margin-top: -10rem;
}
} }
} }
} }