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

Migrated Galleria to V3

pull/496/head
Cagatay Civici 2020-09-24 17:47:01 +03:00
parent bfa9f99dc6
commit f2bddfa111
5 changed files with 32 additions and 57 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

65
src/components/galleria/Galleria.vue
View File

@ -1,7 +1,7 @@
<template>
<div v-if="fullScreen && (maskVisible || visible)" ref="mask" :class="maskContentClass">
<transition name="p-galleria" @enter="onEnter" @before-leave="onBeforeLeave" @after-leave="onAfterLeave" @appear="onAppear">
<GalleriaContent v-if="visible" v-bind="$props" @mask-hide="maskHide" :templates="$slots" @activeitem-change="onActiveItemChange" />
<div v-if="fullScreen && containerVisible" :ref="maskRef" :class="maskContentClass">
<transition name="p-galleria" @before-enter="onBeforeEnter" @enter="onEnter" @before-leave="onBeforeLeave" @after-leave="onAfterLeave" appear>
<GalleriaContent :ref="containerRef" v-if="visible" v-bind="$props" @mask-hide="maskHide" :templates="$slots" @activeitem-change="onActiveItemChange" />
</transition>
</div>
@ -112,47 +112,41 @@ export default {
default: null
}
},
container: null,
mask: null,
data() {
return {
maskVisible: this.visible
containerVisible: this.visible
}
},
updated() {
this.removeStylesFromMask();
if (this.fullScreen && this.visible && !this.maskVisible) {
this.maskVisible = true;
if (this.fullScreen && this.visible) {
this.containerVisible = this.visible;
}
},
mounted() {
this.removeStylesFromMask();
},
beforeUnmount() {
if (this.fullScreen) {
DomHandler.removeClass(document.body, 'p-overflow-hidden');
}
this.container = null;
this.mask = null;
},
methods: {
onBeforeEnter(el) {
el.style.zIndex = String(this.baseZIndex + DomHandler.generateZIndex());
},
onEnter() {
this.$refs.mask.style.zIndex = String(this.baseZIndex + DomHandler.generateZIndex());
this.mask.style.zIndex = String(this.baseZIndex + DomHandler.generateZIndex());
DomHandler.addClass(document.body, 'p-overflow-hidden');
},
onBeforeLeave() {
DomHandler.addClass(this.$refs.mask, 'p-galleria-mask-leave');
DomHandler.addClass(this.mask, 'p-galleria-mask-leave');
},
onAfterLeave() {
this.maskVisible = false;
this.containerVisible = false;
DomHandler.removeClass(document.body, 'p-overflow-hidden');
},
onAppear() {
if (this.visible) {
this.onEnter();
setTimeout(() => {
DomHandler.addClass(this.$refs.mask, 'p-component-overlay');
}, 1);
}
},
onActiveItemChange(index) {
if (this.activeIndex !== index) {
this.$emit('update:activeIndex', index);
@ -161,27 +155,16 @@ export default {
maskHide() {
this.$emit('update:visible', false);
},
removeStylesFromMask() {
if (this.$refs.mask) {
this.galleriaStyles = this.$vnode.data.style || this.$vnode.data.staticStyle;
if (this.galleriaStyles) {
Object.keys(this.galleriaStyles).forEach((key) => {
this.$refs.mask.style[key] = '';
});
}
this.galleriaClasses = this.$vnode.data.class || this.$vnode.data.staticClass;
if (this.galleriaClasses) {
this.$refs.mask.classList = 'p-galleria-mask' + (this.visible && ' p-galleria-visible');
}
}
containerRef(el) {
this.container = el;
},
maskRef(el) {
this.mask = el;
}
},
computed: {
maskContentClass() {
return ['p-galleria-mask', {
'p-galleria-visible': this.visible
}, this.maskClass];
return ['p-galleria-mask p-component-overlay', this.maskClass];
}
},
components: {
@ -456,7 +439,7 @@ export default {
transition: all 150ms cubic-bezier(0.4, 0.0, 0.2, 1);
}
.p-galleria-enter,
.p-galleria-enter-from,
.p-galleria-leave-to {
opacity: 0;
transform: scale(0.7);

4
src/components/galleria/GalleriaContent.vue
View File

@ -4,7 +4,7 @@
<span class="p-galleria-close-icon pi pi-times"></span>
</button>
<div v-if="$attrs.templates && $attrs.templates['header']" class="p-galleria-header">
<GalleriaItemSlot type="header" :templates="$attrs.templates"/>
<component :is="$attrs.templates['header']" />
</div>
<div class="p-galleria-content">
<GalleriaItem :value="$attrs.value" v-model:activeIndex="activeIndex" :circular="$attrs.circular" :templates="$attrs.templates"
@ -18,7 +18,7 @@
v-model:slideShowActive="slideShowActive" @stop-slideshow="stopSlideShow" />
</div>
<div v-if="$attrs.templates && $attrs.templates['footer']" class="p-galleria-footer">
<GalleriaItemSlot type="footer" :templates="$attrs.templates"/>
<component :is="$attrs.templates['footer']" />
</div>
</div>
</template>

10
src/components/galleria/GalleriaItem.vue
View File

@ -5,13 +5,13 @@
<span class="p-galleria-item-prev-icon pi pi-chevron-left"></span>
</button>
<div class="p-galleria-item">
<GalleriaItemSlot type="item" :item="activeItem" :templates="templates" />
<component :is="templates.item" :item="activeItem" v-if="templates.item" />
</div>
<button v-if="showItemNavigators" type="button" :class="navForwardClass" @click="navForward($event)" :disabled="isNavForwardDisabled()" v-ripple>
<span class="p-galleria-item-next-icon pi pi-chevron-right"></span>
</button>
<div class="p-galleria-caption" v-if="templates['caption']">
<GalleriaItemSlot type="caption" :item="activeItem" :templates="templates" />
<component :is="templates.caption" :item="activeItem" v-if="templates.caption" />
</div>
</div>
<ul v-if="showIndicators" class="p-galleria-indicators p-reset">
@ -19,14 +19,13 @@
@click="onIndicatorClick(index)" @mouseenter="onIndicatorMouseEnter(index)" @keydown.enter="onIndicatorKeyDown(index)"
:class="['p-galleria-indicator', {'p-highlight': isIndicatorItemActive(index)}]">
<button type="button" tabindex="-1" class="p-link" v-if="!templates['indicator']"></button>
<GalleriaItemSlot type="indicator" :index="index" :templates="templates" />
<component :is="templates.indicator" :index="index" v-if="templates.indicator" />
</li>
</ul>
</div>
</template>
<script>
import GalleriaItemSlot from './GalleriaItemSlot';
import Ripple from '../ripple/Ripple';
export default {
@ -152,9 +151,6 @@ export default {
}];
}
},
components: {
'GalleriaItemSlot': GalleriaItemSlot
},
directives: {
'ripple': Ripple
}

6
src/components/galleria/GalleriaThumbnails.vue
View File

@ -13,7 +13,7 @@
'p-galleria-thumbnail-item-start': firstItemAciveIndex() === index,
'p-galleria-thumbnail-item-end': lastItemActiveIndex() === index }]">
<div class="p-galleria-thumbnail-item-content" :tabindex="isItemActive(index) ? 0 : null" @click="onItemClick(index)" @keydown.enter="onItemClick(index)">
<GalleriaItemSlot type="thumbnail" :item="item" :templates="templates" />
<component :is="templates.thumbnail" :item="item" v-if="templates.thumbnail" />
</div>
</div>
</div>
@ -26,7 +26,6 @@
</template>
<script>
import GalleriaItemSlot from './GalleriaItemSlot';
import DomHandler from '../utils/DomHandler';
import Ripple from '../ripple/Ripple';
@ -405,9 +404,6 @@ export default {
}];
}
},
components: {
'GalleriaItemSlot': GalleriaItemSlot
},
directives: {
'ripple': Ripple
}

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

@ -9,7 +9,7 @@
<div class="content-section implementation">
<div class="card">
<Galleria ref="galleria" :value="images" v-model:activeIndex="activeIndex" :numVisible="5" style="max-width: 640px;" :class="galleriaClass"
<Galleria ref="galleria" :value="images" v-model:activeIndex="activeIndex" :numVisible="5" style="max-width: 640px;" :containerClass="galleriaClass"
:showThumbnails="showThumbnails" :showItemNavigators="true" :showItemNavigatorsOnHover="true"
:circular="true" :autoPlay="true" :transitionInterval="3000">
<template #item="slotProps">
@ -40,7 +40,7 @@
<TabPanel header="Source">
<pre v-code>
<code><template v-pre>
&lt;Galleria ref="galleria" :value="images" v-model:activeIndex="activeIndex" :numVisible="5" style="max-width: 640px;" :class="galleriaClass"
&lt;Galleria ref="galleria" :value="images" v-model:activeIndex="activeIndex" :numVisible="5" style="max-width: 640px;" :containerClass="galleriaClass"
:showThumbnails="showThumbnails" :showItemNavigators="true" :showItemNavigatorsOnHover="true"
:circular="true" :autoPlay="true" :transitionInterval="3000"&gt;
&lt;template #item="slotProps"&gt;