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> <template>
<div v-if="fullScreen && (maskVisible || visible)" ref="mask" :class="maskContentClass"> <div v-if="fullScreen && containerVisible" :ref="maskRef" :class="maskContentClass">
<transition name="p-galleria" @enter="onEnter" @before-leave="onBeforeLeave" @after-leave="onAfterLeave" @appear="onAppear"> <transition name="p-galleria" @before-enter="onBeforeEnter" @enter="onEnter" @before-leave="onBeforeLeave" @after-leave="onAfterLeave" appear>
<GalleriaContent v-if="visible" v-bind="$props" @mask-hide="maskHide" :templates="$slots" @activeitem-change="onActiveItemChange" /> <GalleriaContent :ref="containerRef" v-if="visible" v-bind="$props" @mask-hide="maskHide" :templates="$slots" @activeitem-change="onActiveItemChange" />
</transition> </transition>
</div> </div>
@ -112,47 +112,41 @@ export default {
default: null default: null
} }
}, },
container: null,
mask: null,
data() { data() {
return { return {
maskVisible: this.visible containerVisible: this.visible
} }
}, },
updated() { updated() {
this.removeStylesFromMask(); if (this.fullScreen && this.visible) {
this.containerVisible = this.visible;
if (this.fullScreen && this.visible && !this.maskVisible) {
this.maskVisible = true;
} }
}, },
mounted() {
this.removeStylesFromMask();
},
beforeUnmount() { beforeUnmount() {
if (this.fullScreen) { if (this.fullScreen) {
DomHandler.removeClass(document.body, 'p-overflow-hidden'); DomHandler.removeClass(document.body, 'p-overflow-hidden');
} }
this.container = null;
this.mask = null;
}, },
methods: { methods: {
onBeforeEnter(el) {
el.style.zIndex = String(this.baseZIndex + DomHandler.generateZIndex());
},
onEnter() { 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'); DomHandler.addClass(document.body, 'p-overflow-hidden');
}, },
onBeforeLeave() { onBeforeLeave() {
DomHandler.addClass(this.$refs.mask, 'p-galleria-mask-leave'); DomHandler.addClass(this.mask, 'p-galleria-mask-leave');
}, },
onAfterLeave() { onAfterLeave() {
this.maskVisible = false; this.containerVisible = false;
DomHandler.removeClass(document.body, 'p-overflow-hidden'); 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) { onActiveItemChange(index) {
if (this.activeIndex !== index) { if (this.activeIndex !== index) {
this.$emit('update:activeIndex', index); this.$emit('update:activeIndex', index);
@ -161,27 +155,16 @@ export default {
maskHide() { maskHide() {
this.$emit('update:visible', false); this.$emit('update:visible', false);
}, },
removeStylesFromMask() { containerRef(el) {
if (this.$refs.mask) { this.container = el;
this.galleriaStyles = this.$vnode.data.style || this.$vnode.data.staticStyle; },
if (this.galleriaStyles) { maskRef(el) {
Object.keys(this.galleriaStyles).forEach((key) => { this.mask = el;
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');
}
}
} }
}, },
computed: { computed: {
maskContentClass() { maskContentClass() {
return ['p-galleria-mask', { return ['p-galleria-mask p-component-overlay', this.maskClass];
'p-galleria-visible': this.visible
}, this.maskClass];
} }
}, },
components: { components: {
@ -456,7 +439,7 @@ export default {
transition: all 150ms cubic-bezier(0.4, 0.0, 0.2, 1); transition: all 150ms cubic-bezier(0.4, 0.0, 0.2, 1);
} }
.p-galleria-enter, .p-galleria-enter-from,
.p-galleria-leave-to { .p-galleria-leave-to {
opacity: 0; opacity: 0;
transform: scale(0.7); 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> <span class="p-galleria-close-icon pi pi-times"></span>
</button> </button>
<div v-if="$attrs.templates && $attrs.templates['header']" class="p-galleria-header"> <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>
<div class="p-galleria-content"> <div class="p-galleria-content">
<GalleriaItem :value="$attrs.value" v-model:activeIndex="activeIndex" :circular="$attrs.circular" :templates="$attrs.templates" <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" /> v-model:slideShowActive="slideShowActive" @stop-slideshow="stopSlideShow" />
</div> </div>
<div v-if="$attrs.templates && $attrs.templates['footer']" class="p-galleria-footer"> <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>
</div> </div>
</template> </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> <span class="p-galleria-item-prev-icon pi pi-chevron-left"></span>
</button> </button>
<div class="p-galleria-item"> <div class="p-galleria-item">
<GalleriaItemSlot type="item" :item="activeItem" :templates="templates" /> <component :is="templates.item" :item="activeItem" v-if="templates.item" />
</div> </div>
<button v-if="showItemNavigators" type="button" :class="navForwardClass" @click="navForward($event)" :disabled="isNavForwardDisabled()" v-ripple> <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> <span class="p-galleria-item-next-icon pi pi-chevron-right"></span>
</button> </button>
<div class="p-galleria-caption" v-if="templates['caption']"> <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>
</div> </div>
<ul v-if="showIndicators" class="p-galleria-indicators p-reset"> <ul v-if="showIndicators" class="p-galleria-indicators p-reset">
@ -19,14 +19,13 @@
@click="onIndicatorClick(index)" @mouseenter="onIndicatorMouseEnter(index)" @keydown.enter="onIndicatorKeyDown(index)" @click="onIndicatorClick(index)" @mouseenter="onIndicatorMouseEnter(index)" @keydown.enter="onIndicatorKeyDown(index)"
:class="['p-galleria-indicator', {'p-highlight': isIndicatorItemActive(index)}]"> :class="['p-galleria-indicator', {'p-highlight': isIndicatorItemActive(index)}]">
<button type="button" tabindex="-1" class="p-link" v-if="!templates['indicator']"></button> <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> </li>
</ul> </ul>
</div> </div>
</template> </template>
<script> <script>
import GalleriaItemSlot from './GalleriaItemSlot';
import Ripple from '../ripple/Ripple'; import Ripple from '../ripple/Ripple';
export default { export default {
@ -152,9 +151,6 @@ export default {
}]; }];
} }
}, },
components: {
'GalleriaItemSlot': GalleriaItemSlot
},
directives: { directives: {
'ripple': Ripple '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-start': firstItemAciveIndex() === index,
'p-galleria-thumbnail-item-end': lastItemActiveIndex() === 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)"> <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> </div>
</div> </div>
@ -26,7 +26,6 @@
</template> </template>
<script> <script>
import GalleriaItemSlot from './GalleriaItemSlot';
import DomHandler from '../utils/DomHandler'; import DomHandler from '../utils/DomHandler';
import Ripple from '../ripple/Ripple'; import Ripple from '../ripple/Ripple';
@ -405,9 +404,6 @@ export default {
}]; }];
} }
}, },
components: {
'GalleriaItemSlot': GalleriaItemSlot
},
directives: { directives: {
'ripple': Ripple 'ripple': Ripple
} }

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

@ -9,7 +9,7 @@
<div class="content-section implementation"> <div class="content-section implementation">
<div class="card"> <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" :showThumbnails="showThumbnails" :showItemNavigators="true" :showItemNavigatorsOnHover="true"
:circular="true" :autoPlay="true" :transitionInterval="3000"> :circular="true" :autoPlay="true" :transitionInterval="3000">
<template #item="slotProps"> <template #item="slotProps">
@ -40,7 +40,7 @@
<TabPanel header="Source"> <TabPanel header="Source">
<pre v-code> <pre v-code>
<code><template v-pre> <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" :showThumbnails="showThumbnails" :showItemNavigators="true" :showItemNavigatorsOnHover="true"
:circular="true" :autoPlay="true" :transitionInterval="3000"&gt; :circular="true" :autoPlay="true" :transitionInterval="3000"&gt;
&lt;template #item="slotProps"&gt; &lt;template #item="slotProps"&gt;