Add galleria demo files
mertsincan
parent
5fcffe678a
commit
71d3a8e5db
|
|
@ -0,0 +1,178 @@
|
||||||
|
<template>
|
||||||
|
<div>
|
||||||
|
<GalleriaSubMenu />
|
||||||
|
|
||||||
|
<div class="content-section introduction">
|
||||||
|
<div class="feature-intro">
|
||||||
|
<h1 style="margin-bottom: 0px;">Galleria - Basic</h1>
|
||||||
|
<p></p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="content-section implementation">
|
||||||
|
<h3 class="first">Default</h3>
|
||||||
|
<Galleria :value="images" :responsiveOptions="responsiveOptions" :numVisible="5" style="max-width: 520px">
|
||||||
|
<template #previewItem="slotProps">
|
||||||
|
<img :src="slotProps.item.previewImageSrc" :alt="slotProps.item.alt" style="width: 100%" />
|
||||||
|
</template>
|
||||||
|
<template #thumbnailItem="slotProps">
|
||||||
|
<div class="p-grid p-nogutter p-justify-center">
|
||||||
|
<img :src="slotProps.item.thumbnailImageSrc" :alt="slotProps.item.alt" />
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
</Galleria>
|
||||||
|
|
||||||
|
<h3>Programmatic</h3>
|
||||||
|
<div style="padding: .5em 0">
|
||||||
|
<Button icon="pi pi-minus" @click="activeIndex--" class="p-button-secondary" />
|
||||||
|
<Button icon="pi pi-plus" @click="activeIndex++" class="p-button-secondary" style="margin-left: .5em" />
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<Galleria :value="images" :activeItemIndex.sync="activeIndex" :responsiveOptions="responsiveOptions" :numVisible="5" style="max-width: 520px">
|
||||||
|
<template #previewItem="slotProps">
|
||||||
|
<img :src="slotProps.item.previewImageSrc" :alt="slotProps.item.alt" style="width: 100%" />
|
||||||
|
</template>
|
||||||
|
<template #thumbnailItem="slotProps">
|
||||||
|
<div class="p-grid p-nogutter p-justify-center">
|
||||||
|
<img :src="slotProps.item.thumbnailImageSrc" :alt="slotProps.item.alt" />
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
</Galleria>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="content-section documentation">
|
||||||
|
<TabView>
|
||||||
|
<TabPanel header="Source">
|
||||||
|
<CodeHighlight>
|
||||||
|
<template v-pre>
|
||||||
|
<h3 class="first">Default</h3>
|
||||||
|
<Galleria :value="images" :responsiveOptions="responsiveOptions" :numVisible="5" style="max-width: 520px">
|
||||||
|
<template #previewItem="slotProps">
|
||||||
|
<img :src="slotProps.item.previewImageSrc" :alt="slotProps.item.alt" style="width: 100%" />
|
||||||
|
</template>
|
||||||
|
<template #thumbnailItem="slotProps">
|
||||||
|
<div class="p-grid p-nogutter p-justify-center">
|
||||||
|
<img :src="slotProps.item.thumbnailImageSrc" :alt="slotProps.item.alt" />
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
</Galleria>
|
||||||
|
|
||||||
|
<h3>Programmatic</h3>
|
||||||
|
<div style="padding: .5em 0">
|
||||||
|
<Button icon="pi pi-minus" @click="activeIndex--" class="p-button-secondary" />
|
||||||
|
<Button icon="pi pi-plus" @click="activeIndex++" class="p-button-secondary" style="margin-left: .5em" />
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<Galleria :value="images" :activeItemIndex.sync="activeIndex" :responsiveOptions="responsiveOptions" :numVisible="5" style="max-width: 520px">
|
||||||
|
<template #previewItem="slotProps">
|
||||||
|
<img :src="slotProps.item.previewImageSrc" :alt="slotProps.item.alt" style="width: 100%" />
|
||||||
|
</template>
|
||||||
|
<template #thumbnailItem="slotProps">
|
||||||
|
<div class="p-grid p-nogutter p-justify-center">
|
||||||
|
<img :src="slotProps.item.thumbnailImageSrc" :alt="slotProps.item.alt" />
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
</Galleria>
|
||||||
|
</template>
|
||||||
|
</CodeHighlight>
|
||||||
|
|
||||||
|
<CodeHighlight lang="javascript">
|
||||||
|
import GalleriaService from '../../service/GalleriaService';
|
||||||
|
|
||||||
|
export default {
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
images: null,
|
||||||
|
activeItemIndex: 2,
|
||||||
|
responsiveOptions: [
|
||||||
|
{
|
||||||
|
breakpoint: '1024px',
|
||||||
|
numVisible: 5
|
||||||
|
},
|
||||||
|
{
|
||||||
|
breakpoint: '768px',
|
||||||
|
numVisible: 3
|
||||||
|
},
|
||||||
|
{
|
||||||
|
breakpoint: '560px',
|
||||||
|
numVisible: 1
|
||||||
|
}
|
||||||
|
]
|
||||||
|
}
|
||||||
|
},
|
||||||
|
galleriaService: null,
|
||||||
|
created() {
|
||||||
|
this.galleriaService = new GalleriaService();
|
||||||
|
},
|
||||||
|
mounted() {
|
||||||
|
this.galleriaService.getImages().then(data => this.images = data);
|
||||||
|
},
|
||||||
|
computed: {
|
||||||
|
activeIndex: {
|
||||||
|
get: function() {
|
||||||
|
return this.activeItemIndex;
|
||||||
|
},
|
||||||
|
set: function(newValue) {
|
||||||
|
if (this.images && 0 <= newValue && newValue <= (this.images.length - 1)) {
|
||||||
|
this.activeItemIndex = newValue;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</CodeHighlight>
|
||||||
|
</TabPanel>
|
||||||
|
</TabView>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import GalleriaService from '../../service/GalleriaService';
|
||||||
|
import GalleriaSubMenu from './GalleriaSubMenu';
|
||||||
|
|
||||||
|
export default {
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
images: null,
|
||||||
|
activeItemIndex: 2,
|
||||||
|
responsiveOptions: [
|
||||||
|
{
|
||||||
|
breakpoint: '1024px',
|
||||||
|
numVisible: 5
|
||||||
|
},
|
||||||
|
{
|
||||||
|
breakpoint: '768px',
|
||||||
|
numVisible: 3
|
||||||
|
},
|
||||||
|
{
|
||||||
|
breakpoint: '560px',
|
||||||
|
numVisible: 1
|
||||||
|
}
|
||||||
|
]
|
||||||
|
}
|
||||||
|
},
|
||||||
|
galleriaService: null,
|
||||||
|
created() {
|
||||||
|
this.galleriaService = new GalleriaService();
|
||||||
|
},
|
||||||
|
mounted() {
|
||||||
|
this.galleriaService.getImages().then(data => this.images = data);
|
||||||
|
},
|
||||||
|
computed: {
|
||||||
|
activeIndex: {
|
||||||
|
get: function() {
|
||||||
|
return this.activeItemIndex;
|
||||||
|
},
|
||||||
|
set: function(newValue) {
|
||||||
|
if (this.images && 0 <= newValue && newValue <= (this.images.length - 1)) {
|
||||||
|
this.activeItemIndex = newValue;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
components: {
|
||||||
|
'GalleriaSubMenu': GalleriaSubMenu
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
@ -0,0 +1,124 @@
|
||||||
|
<template>
|
||||||
|
<div>
|
||||||
|
<GalleriaSubMenu />
|
||||||
|
|
||||||
|
<div class="content-section introduction">
|
||||||
|
<div class="feature-intro">
|
||||||
|
<h1 style="margin-bottom: 0px;">Galleria - Caption</h1>
|
||||||
|
<p></p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="content-section implementation">
|
||||||
|
<Galleria :value="images" :responsiveOptions="responsiveOptions" :numVisible="5" style="max-width: 520px">
|
||||||
|
<template #previewItem="{item}">
|
||||||
|
<img :src="item.previewImageSrc" :alt="item.alt" style="width: 100%; display: block;" />
|
||||||
|
</template>
|
||||||
|
<template #thumbnailItem="{item}">
|
||||||
|
<div class="p-grid p-nogutter p-justify-center">
|
||||||
|
<img :src="item.thumbnailImageSrc" :alt="item.alt" style="display: block;" />
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
<template #previewCaption="{item}">
|
||||||
|
<h4 style="margin-bottom: .5em;">{{item.title}}</h4>
|
||||||
|
<p>{{item.alt}}</p>
|
||||||
|
</template>
|
||||||
|
</Galleria>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="content-section documentation">
|
||||||
|
<TabView>
|
||||||
|
<TabPanel header="Source">
|
||||||
|
<CodeHighlight>
|
||||||
|
<template v-pre>
|
||||||
|
<Galleria :value="images" :responsiveOptions="responsiveOptions" :numVisible="5" style="max-width: 520px">
|
||||||
|
<template #previewItem="{item}">
|
||||||
|
<img :src="item.previewImageSrc" :alt="item.alt" style="width: 100%; display: block;" />
|
||||||
|
</template>
|
||||||
|
<template #thumbnailItem="{item}">
|
||||||
|
<div class="p-grid p-nogutter p-justify-center">
|
||||||
|
<img :src="item.thumbnailImageSrc" :alt="item.alt" style="display: block;" />
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
<template #previewCaption="{item}">
|
||||||
|
<h4 style="margin-bottom: .5em;">{{item.title}}</h4>
|
||||||
|
<p>{{item.alt}}</p>
|
||||||
|
</template>
|
||||||
|
</Galleria>
|
||||||
|
</template>
|
||||||
|
</CodeHighlight>
|
||||||
|
|
||||||
|
<CodeHighlight lang="javascript">
|
||||||
|
import GalleriaService from '../../service/GalleriaService';
|
||||||
|
|
||||||
|
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 GalleriaService();
|
||||||
|
},
|
||||||
|
mounted() {
|
||||||
|
this.galleriaService.getImages().then(data => this.images = data);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</CodeHighlight>
|
||||||
|
</TabPanel>
|
||||||
|
</TabView>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import GalleriaService from '../../service/GalleriaService';
|
||||||
|
import GalleriaSubMenu from './GalleriaSubMenu';
|
||||||
|
|
||||||
|
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 GalleriaService();
|
||||||
|
},
|
||||||
|
mounted() {
|
||||||
|
this.galleriaService.getImages().then(data => this.images = data);
|
||||||
|
},
|
||||||
|
components: {
|
||||||
|
'GalleriaSubMenu': GalleriaSubMenu
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
@ -0,0 +1,144 @@
|
||||||
|
<template>
|
||||||
|
<div>
|
||||||
|
<GalleriaSubMenu />
|
||||||
|
|
||||||
|
<div class="content-section introduction">
|
||||||
|
<div class="feature-intro">
|
||||||
|
<h1 style="margin-bottom: 0px;">Galleria - Circular</h1>
|
||||||
|
<p></p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="content-section implementation">
|
||||||
|
<h3 class="first">Basic</h3>
|
||||||
|
<Galleria :value="images" :responsiveOptions="responsiveOptions" :numVisible="5" :circular="true" style="max-width: 520px">
|
||||||
|
<template #previewItem="slotProps">
|
||||||
|
<img :src="slotProps.item.previewImageSrc" :alt="slotProps.item.alt" style="width: 100%; display: block;" />
|
||||||
|
</template>
|
||||||
|
<template #thumbnailItem="slotProps">
|
||||||
|
<div class="p-grid p-nogutter p-justify-center">
|
||||||
|
<img :src="slotProps.item.thumbnailImageSrc" :alt="slotProps.item.alt" style="display: block;" />
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
</Galleria>
|
||||||
|
|
||||||
|
<h3>AutoPlay</h3>
|
||||||
|
<Galleria :value="images" :responsiveOptions="responsiveOptions" :numVisible="5" style="max-width: 520px"
|
||||||
|
:circular="true" :autoPlay="true" :transitionInterval="2000">
|
||||||
|
<template #previewItem="slotProps">
|
||||||
|
<img :src="slotProps.item.previewImageSrc" :alt="slotProps.item.alt" style="width: 100%; display: block;" />
|
||||||
|
</template>
|
||||||
|
<template #thumbnailItem="slotProps">
|
||||||
|
<div class="p-grid p-nogutter p-justify-center">
|
||||||
|
<img :src="slotProps.item.thumbnailImageSrc" :alt="slotProps.item.alt" style="display: block;" />
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
</Galleria>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="content-section documentation">
|
||||||
|
<TabView>
|
||||||
|
<TabPanel header="Source">
|
||||||
|
<CodeHighlight>
|
||||||
|
<template v-pre>
|
||||||
|
<h3 class="first">Basic</h3>
|
||||||
|
<Galleria :value="images" :responsiveOptions="responsiveOptions" :numVisible="5" :circular="true" style="max-width: 520px">
|
||||||
|
<template #previewItem="slotProps">
|
||||||
|
<img :src="slotProps.item.previewImageSrc" :alt="slotProps.item.alt" style="width: 100%; display: block;" />
|
||||||
|
</template>
|
||||||
|
<template #thumbnailItem="slotProps">
|
||||||
|
<div class="p-grid p-nogutter p-justify-center">
|
||||||
|
<img :src="slotProps.item.thumbnailImageSrc" :alt="slotProps.item.alt" style="display: block;" />
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
</Galleria>
|
||||||
|
|
||||||
|
<h3>AutoPlay</h3>
|
||||||
|
<Galleria :value="images" :responsiveOptions="responsiveOptions" :numVisible="5" style="max-width: 520px"
|
||||||
|
:circular="true" :autoPlay="true" :transitionInterval="2000">
|
||||||
|
<template #previewItem="slotProps">
|
||||||
|
<img :src="slotProps.item.previewImageSrc" :alt="slotProps.item.alt" style="width: 100%; display: block;" />
|
||||||
|
</template>
|
||||||
|
<template #thumbnailItem="slotProps">
|
||||||
|
<div class="p-grid p-nogutter p-justify-center">
|
||||||
|
<img :src="slotProps.item.thumbnailImageSrc" :alt="slotProps.item.alt" style="display: block;" />
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
</Galleria>
|
||||||
|
</template>
|
||||||
|
</CodeHighlight>
|
||||||
|
|
||||||
|
<CodeHighlight lang="javascript">
|
||||||
|
import GalleriaService from '../../service/GalleriaService';
|
||||||
|
|
||||||
|
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 GalleriaService();
|
||||||
|
},
|
||||||
|
mounted() {
|
||||||
|
this.galleriaService.getImages().then(data => this.images = data);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</CodeHighlight>
|
||||||
|
</TabPanel>
|
||||||
|
</TabView>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import GalleriaService from '../../service/GalleriaService';
|
||||||
|
import GalleriaSubMenu from './GalleriaSubMenu';
|
||||||
|
|
||||||
|
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 GalleriaService();
|
||||||
|
},
|
||||||
|
mounted() {
|
||||||
|
this.galleriaService.getImages().then(data => this.images = data);
|
||||||
|
},
|
||||||
|
components: {
|
||||||
|
'GalleriaSubMenu': GalleriaSubMenu
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
@ -0,0 +1,231 @@
|
||||||
|
<template>
|
||||||
|
<div class="galleria-demo">
|
||||||
|
<GalleriaSubMenu />
|
||||||
|
|
||||||
|
<div class="content-section introduction">
|
||||||
|
<div class="feature-intro">
|
||||||
|
<h1>Galleria</h1>
|
||||||
|
<p>Galleria is a content gallery component.</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="content-section implementation">
|
||||||
|
<Galleria ref="galleria" :value="images" :activeItemIndex.sync="activeItemIndex" :numVisible="5" style="max-width: 520px;" :class="galleriaClass"
|
||||||
|
:showThumbnails="showThumbnails" :showPreviewNavButtons="true" :showNavButtonsOnPreviewHover="true"
|
||||||
|
:circular="true" :autoPlay="true" :transitionInterval="3000">
|
||||||
|
<template #previewItem="slotProps">
|
||||||
|
<img :src="slotProps.item.previewImageSrc" :alt="slotProps.item.alt" :style="[{'width': !isPreviewFullScreen ? '100%' : '', 'display': !isPreviewFullScreen ? 'block' : ''}]" />
|
||||||
|
</template>
|
||||||
|
<template #thumbnailItem="slotProps">
|
||||||
|
<div class="p-grid p-nogutter p-justify-center">
|
||||||
|
<img :src="slotProps.item.thumbnailImageSrc" :alt="slotProps.item.alt" style="display: block;" />
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
<template #footer>
|
||||||
|
<div class="custom-galleria-footer">
|
||||||
|
<Button icon="pi pi-list" @click="onThumbnailButtonClick" />
|
||||||
|
<span v-if="images">
|
||||||
|
<span>{{activeItemIndex + 1}}/{{images.length}}</span>
|
||||||
|
<span class="title">{{images[activeItemIndex].title}}</span>
|
||||||
|
<span>{{images[activeItemIndex].alt}}</span>
|
||||||
|
</span>
|
||||||
|
<Button :icon="fullScreenIcon" @click="toggleFullScreen" />
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
</Galleria>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<GalleriaDoc />
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import GalleriaService from '../../service/GalleriaService';
|
||||||
|
import GalleriaSubMenu from './GalleriaSubMenu';
|
||||||
|
import GalleriaDoc from './GalleriaDoc';
|
||||||
|
|
||||||
|
export default {
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
images: null,
|
||||||
|
activeItemIndex: 0,
|
||||||
|
showThumbnails: false,
|
||||||
|
isPreviewFullScreen: false
|
||||||
|
}
|
||||||
|
},
|
||||||
|
galleriaService: null,
|
||||||
|
created() {
|
||||||
|
this.galleriaService = new GalleriaService();
|
||||||
|
},
|
||||||
|
mounted() {
|
||||||
|
this.galleriaService.getImages().then(data => this.images = data);
|
||||||
|
this.bindDocumentListeners();
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
onThumbnailButtonClick() {
|
||||||
|
this.showThumbnails = !this.showThumbnails;
|
||||||
|
},
|
||||||
|
toggleFullScreen() {
|
||||||
|
if (this.isPreviewFullScreen) {
|
||||||
|
this.closePreviewFullScreen();
|
||||||
|
}
|
||||||
|
else {
|
||||||
|
this.openPreviewFullScreen();
|
||||||
|
}
|
||||||
|
},
|
||||||
|
onFullScreenChange() {
|
||||||
|
this.isPreviewFullScreen = !this.isPreviewFullScreen;
|
||||||
|
},
|
||||||
|
openPreviewFullScreen() {
|
||||||
|
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();
|
||||||
|
}
|
||||||
|
},
|
||||||
|
closePreviewFullScreen() {
|
||||||
|
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: {
|
||||||
|
galleriaClass() {
|
||||||
|
return ['custom-galleria', {'preview-fullscreen': this.isPreviewFullScreen}];
|
||||||
|
},
|
||||||
|
fullScreenIcon() {
|
||||||
|
return `pi ${this.isPreviewFullScreen ? 'pi-window-minimize' : 'pi-window-maximize'}`;
|
||||||
|
}
|
||||||
|
},
|
||||||
|
components: {
|
||||||
|
'GalleriaSubMenu': GalleriaSubMenu,
|
||||||
|
'GalleriaDoc': GalleriaDoc
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
::v-deep {
|
||||||
|
.custom-galleria {
|
||||||
|
&.p-galleria {
|
||||||
|
.p-galleria-content {
|
||||||
|
height: 95%;
|
||||||
|
overflow: hidden;
|
||||||
|
position: relative;
|
||||||
|
|
||||||
|
.p-galleria-thumbnail-content {
|
||||||
|
position: absolute;
|
||||||
|
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-prev,
|
||||||
|
.p-galleria-thumbnail-next {
|
||||||
|
background-color: transparent !important;
|
||||||
|
color: #ffffff;
|
||||||
|
border: 0 none;
|
||||||
|
font-size: 1.2em;
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
color: var(--primaryColor);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.p-galleria-thumbnail-items-content {
|
||||||
|
.p-galleria-thumbnail-items-container {
|
||||||
|
.p-galleria-thumbnail-item {
|
||||||
|
opacity: .6;
|
||||||
|
|
||||||
|
&.p-galleria-thumbnail-item-current {
|
||||||
|
opacity: 1;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.p-galleria-footer {
|
||||||
|
padding: 0;
|
||||||
|
background-color: rgba(0, 0, 0, .9);
|
||||||
|
border: rgba(0, 0, 0, .9);
|
||||||
|
|
||||||
|
.custom-galleria-footer {
|
||||||
|
width: 100%;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: stretch;
|
||||||
|
color: #ffffff;
|
||||||
|
|
||||||
|
> button {
|
||||||
|
background-color: transparent;
|
||||||
|
padding: .1em .4em;
|
||||||
|
border: 0 none;
|
||||||
|
border-radius: 0;
|
||||||
|
color: #ffffff;
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
background-color: transparent;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
> span {
|
||||||
|
flex-grow: 1;
|
||||||
|
|
||||||
|
> span {
|
||||||
|
font-size: .9em;
|
||||||
|
padding-left: .829em;
|
||||||
|
|
||||||
|
&.title {
|
||||||
|
font-weight: bold;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&.preview-fullscreen {
|
||||||
|
.p-galleria-preview-container {
|
||||||
|
.p-galleria-preview-nav-button {
|
||||||
|
top: 50%;
|
||||||
|
height: 20em;
|
||||||
|
width: 4em;
|
||||||
|
margin-top: -10em;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
Loading…
Reference in New Issue