Fixed #212 - New Component: Galleria
mertsincan
parent
1654bbf28b
commit
cf70b083a7
|
|
@ -0,0 +1,36 @@
|
|||
import Vue, {VNode} from 'vue';
|
||||
|
||||
export declare class Galleria extends Vue {
|
||||
id?: string;
|
||||
value?: any;
|
||||
activeItemIndex?: number;
|
||||
fullScreen?: boolean;
|
||||
visible?: boolean;
|
||||
numVisible?: number;
|
||||
responsiveOptions?: any[];
|
||||
showPreviewNavButtons?: boolean;
|
||||
showThumbnailNavButtons?: boolean;
|
||||
showNavButtonsOnPreviewHover?: boolean;
|
||||
changePreviewOnIndicatorHover?: boolean;
|
||||
circular?: boolean;
|
||||
autoPlay?: boolean;
|
||||
transitionInterval?: number;
|
||||
showThumbnails?: boolean;
|
||||
thumbnailsPosition?: string;
|
||||
verticalThumbnailViewPortHeight?: string;
|
||||
showIndicators?: boolean;
|
||||
showIndicatorsOnPreview?: boolean;
|
||||
indicatorsPosition?: string;
|
||||
baseZIndex?: number;
|
||||
maskClass?: string;
|
||||
galleriaStyle?: string;
|
||||
galleriaClass?: string;
|
||||
$slots: {
|
||||
header: VNode[];
|
||||
footer: VNode[];
|
||||
previewItem: VNode[];
|
||||
previewCaption: VNode[];
|
||||
indicator: VNode[];
|
||||
thumbnailItem: VNode[];
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,425 @@
|
|||
<template>
|
||||
<div v-if="fullScreen && visible" ref="mask" :class="maskContentClass">
|
||||
<GalleriaContent v-bind="$props" @maskHide="maskHide" :templates="$scopedSlots" @activeItemChange="onActiveItemChange" />
|
||||
</div>
|
||||
|
||||
<GalleriaContent v-else-if="!fullScreen" v-bind="$props" :templates="$scopedSlots" @activeItemChange="onActiveItemChange" />
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import GalleriaContent from './GalleriaContent';
|
||||
import DomHandler from '../utils/DomHandler';
|
||||
|
||||
export default {
|
||||
inheritAttrs: false,
|
||||
props: {
|
||||
id: {
|
||||
type: String,
|
||||
default: null
|
||||
},
|
||||
value: {
|
||||
type: Array,
|
||||
default: null
|
||||
},
|
||||
activeItemIndex: {
|
||||
type: Number,
|
||||
default: 0
|
||||
},
|
||||
fullScreen: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
visible: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
numVisible: {
|
||||
type: Number,
|
||||
default: 3
|
||||
},
|
||||
responsiveOptions: {
|
||||
type: Array,
|
||||
default: null
|
||||
},
|
||||
showPreviewNavButtons: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
showThumbnailNavButtons: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
},
|
||||
showNavButtonsOnPreviewHover: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
changePreviewOnIndicatorHover: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
circular: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
autoPlay: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
transitionInterval: {
|
||||
type: Number,
|
||||
default: 4000
|
||||
},
|
||||
showThumbnails: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
},
|
||||
thumbnailsPosition: {
|
||||
type: String,
|
||||
default: "bottom"
|
||||
},
|
||||
verticalThumbnailViewPortHeight: {
|
||||
type: String,
|
||||
default: "300px"
|
||||
},
|
||||
showIndicators: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
showIndicatorsOnPreview: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
indicatorsPosition: {
|
||||
type: String,
|
||||
default: "bottom"
|
||||
},
|
||||
baseZIndex: {
|
||||
type: Number,
|
||||
default: 0
|
||||
},
|
||||
maskClass: {
|
||||
type: String,
|
||||
default: null
|
||||
},
|
||||
galleriaStyle: {
|
||||
type: String,
|
||||
default: null
|
||||
},
|
||||
galleriaClass: {
|
||||
type: String,
|
||||
default: null
|
||||
}
|
||||
},
|
||||
updated() {
|
||||
this.removeStylesFromMask();
|
||||
|
||||
if (this.fullScreen) {
|
||||
if (this.visible) {
|
||||
DomHandler.addClass(document.body, 'p-overflow-hidden');
|
||||
|
||||
if (this.$refs.mask) {
|
||||
this.$refs.mask.style.zIndex = String(this.baseZIndex + DomHandler.generateZIndex());
|
||||
}
|
||||
}
|
||||
else {
|
||||
DomHandler.removeClass(document.body, 'p-overflow-hidden');
|
||||
}
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.removeStylesFromMask();
|
||||
},
|
||||
beforeDestroy() {
|
||||
if (this.fullScreen) {
|
||||
DomHandler.removeClass(document.body, 'p-overflow-hidden');
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
onActiveItemChange(index) {
|
||||
if (this.activeItemIndex !== index) {
|
||||
this.$emit('update:activeItemIndex', index);
|
||||
}
|
||||
},
|
||||
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 p-component-overlay' + (this.visible && ' p-galleria-visible');
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
maskContentClass() {
|
||||
return ['p-galleria-mask p-component-overlay', {
|
||||
'p-galleria-visible': this.visible
|
||||
}, this.maskClass];
|
||||
}
|
||||
},
|
||||
components: {
|
||||
'GalleriaContent': GalleriaContent
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.p-galleria-content {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
/* Preview */
|
||||
.p-galleria-preview-content {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
position: relative;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
.p-galleria-preview-container {
|
||||
position: relative;
|
||||
display: flex;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
.p-galleria-preview-container .p-galleria-preview-nav-button {
|
||||
height: 3em;
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
margin-top: -1.5em;
|
||||
z-index: 1;
|
||||
}
|
||||
.p-galleria-preview-prev {
|
||||
left: .5em;
|
||||
}
|
||||
.p-galleria-preview-next {
|
||||
right: .5em;
|
||||
}
|
||||
.p-galleria-preview-prev span,
|
||||
.p-galleria-preview-next span {
|
||||
font-size: 2em;
|
||||
}
|
||||
.p-galleria-preview-items-content {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
}
|
||||
.p-galleria-preview-nav-onhover .p-galleria-preview-content .p-galleria-preview-nav-button {
|
||||
pointer-events: none;
|
||||
opacity: 0;
|
||||
transition: opacity .2s ease-in-out;
|
||||
}
|
||||
.p-galleria-preview-nav-onhover .p-galleria-preview-content:hover .p-galleria-preview-nav-button {
|
||||
pointer-events: all;
|
||||
opacity: 1;
|
||||
}
|
||||
.p-galleria-preview-nav-onhover .p-galleria-preview-content:hover .p-galleria-preview-nav-button.p-disabled {
|
||||
pointer-events: none;
|
||||
opacity: .5;
|
||||
}
|
||||
.p-galleria-preview-caption {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
padding: 1em;
|
||||
width: 100%;
|
||||
}
|
||||
.p-galleria .p-galleria-indicator-container {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: .2em;
|
||||
}
|
||||
|
||||
/* Thumbnails */
|
||||
.p-galleria-thumbnail-content {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
flex-wrap: nowrap;
|
||||
overflow: auto;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
.p-galleria-thumbnail-prev,
|
||||
.p-galleria-thumbnail-next {
|
||||
align-self: center;
|
||||
text-align: center;
|
||||
flex-grow: 0;
|
||||
flex-shrink: 0;
|
||||
width: 2.5em;
|
||||
height: 2.5em;
|
||||
}
|
||||
.p-galleria-thumbnail-prev span,
|
||||
.p-galleria-thumbnail-next span {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
.p-galleria-thumbnail-container {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
padding: 0 .1em;
|
||||
}
|
||||
.p-galleria-thumbnail-items-content {
|
||||
overflow: hidden;
|
||||
width: 100%;
|
||||
}
|
||||
.p-galleria-thumbnail-items-container {
|
||||
display: flex;
|
||||
flex-wrap: nowrap;
|
||||
flex-direction: row;
|
||||
}
|
||||
.p-galleria-thumbnail-items-container .p-galleria-thumbnail-item {
|
||||
width: 100%;
|
||||
box-sizing: border-box;
|
||||
overflow: auto;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
.p-galleria-thumbnail-item .p-galleria-thumbnail-item-content {
|
||||
margin: .3em;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
/* Indicators */
|
||||
.p-galleria-indicator-onpreview .p-galleria-indicator-container {
|
||||
position: absolute;
|
||||
z-index: 1;
|
||||
}
|
||||
.p-galleria-indicator-onpreview.p-galleria-indicators-top .p-galleria-indicator-container {
|
||||
top: 1em;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
}
|
||||
.p-galleria-indicator-onpreview.p-galleria-indicators-right .p-galleria-indicator-container {
|
||||
right: 1em;
|
||||
top: 0;
|
||||
height: 100%;
|
||||
}
|
||||
.p-galleria-indicator-onpreview.p-galleria-indicators-bottom .p-galleria-indicator-container {
|
||||
bottom: 1em;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
}
|
||||
.p-galleria-indicator-onpreview.p-galleria-indicators-left .p-galleria-indicator-container {
|
||||
left: 1em;
|
||||
top: 0;
|
||||
height: 100%;
|
||||
}
|
||||
.p-galleria-indicator-onpreview.p-galleria-indicators-left .p-galleria-preview-caption,
|
||||
.p-galleria-indicator-onpreview.p-galleria-indicators-right .p-galleria-preview-caption {
|
||||
width: calc(100% - 4em);
|
||||
}
|
||||
.p-galleria-indicator-onpreview.p-galleria-indicators-right .p-galleria-preview-caption,
|
||||
.p-galleria-indicator-onpreview.p-galleria-indicators-right .p-galleria-preview-next {
|
||||
right: 4em;
|
||||
}
|
||||
.p-galleria-indicator-onpreview.p-galleria-indicators-left .p-galleria-preview-caption,
|
||||
.p-galleria-indicator-onpreview.p-galleria-indicators-left .p-galleria-preview-prev {
|
||||
left: 4em;
|
||||
}
|
||||
|
||||
/* Positions */
|
||||
/* Thumbnails */
|
||||
.p-galleria-thumbnails-left .p-galleria-content,
|
||||
.p-galleria-thumbnails-right .p-galleria-content {
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
}
|
||||
.p-galleria-thumbnails-left .p-galleria-content .p-galleria-preview-content,
|
||||
.p-galleria-thumbnails-right .p-galleria-content .p-galleria-preview-content {
|
||||
flex-direction: row;
|
||||
}
|
||||
.p-galleria-thumbnails-left .p-galleria-content .p-galleria-preview-content,
|
||||
.p-galleria-thumbnails-top .p-galleria-content .p-galleria-preview-content {
|
||||
order: 2;
|
||||
}
|
||||
.p-galleria-thumbnails-left .p-galleria-content .p-galleria-thumbnail-content,
|
||||
.p-galleria-thumbnails-top .p-galleria-content .p-galleria-thumbnail-content {
|
||||
order: 1;
|
||||
}
|
||||
.p-galleria-thumbnails-left .p-galleria-content .p-galleria-thumbnail-container,
|
||||
.p-galleria-thumbnails-right .p-galleria-content .p-galleria-thumbnail-container {
|
||||
flex-direction: column;
|
||||
}
|
||||
.p-galleria-thumbnails-left .p-galleria-content .p-galleria-thumbnail-items-container,
|
||||
.p-galleria-thumbnails-right .p-galleria-content .p-galleria-thumbnail-items-container {
|
||||
flex-direction: column;
|
||||
height: 100%;
|
||||
}
|
||||
/* Indicators */
|
||||
.p-galleria-indicators-left .p-galleria-preview-content,
|
||||
.p-galleria-indicators-right .p-galleria-preview-content {
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
}
|
||||
.p-galleria-indicators-left .p-galleria-preview-content .p-galleria-preview-container,
|
||||
.p-galleria-indicators-top .p-galleria-preview-content .p-galleria-preview-container {
|
||||
order: 2;
|
||||
}
|
||||
.p-galleria-indicators-left .p-galleria-preview-content .p-galleria-indicator-container,
|
||||
.p-galleria-indicators-top .p-galleria-preview-content .p-galleria-indicator-container {
|
||||
order: 1;
|
||||
}
|
||||
.p-galleria-indicators-left .p-galleria-preview-content .p-galleria-indicator-container,
|
||||
.p-galleria-indicators-right .p-galleria-preview-content .p-galleria-indicator-container {
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
/* FullScreen */
|
||||
.p-galleria-mask {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
position: fixed;
|
||||
}
|
||||
.p-galleria-mask .p-galleria {
|
||||
max-height: 90%;
|
||||
max-width: calc(90% - 8em);
|
||||
}
|
||||
.p-galleria-close {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
margin: .5em;
|
||||
}
|
||||
.p-galleria-close span {
|
||||
font-size: 3em;
|
||||
}
|
||||
.p-galleria-mask .p-galleria .p-galleria-preview-nav-button {
|
||||
position: fixed;
|
||||
top: 50%;
|
||||
height: 20em;
|
||||
width: 4em;
|
||||
margin-top: -10em;
|
||||
}
|
||||
.p-galleria-mask .p-galleria .p-galleria-preview-prev {
|
||||
left: 0;
|
||||
}
|
||||
.p-galleria-mask .p-galleria .p-galleria-preview-next {
|
||||
right: 0;
|
||||
}
|
||||
|
||||
/* Keyboard Support */
|
||||
.p-items-hidden .p-galleria-thumbnail-item {
|
||||
visibility: hidden;
|
||||
}
|
||||
|
||||
.p-items-hidden .p-galleria-thumbnail-item.p-galleria-thumbnail-item-active {
|
||||
visibility: visible;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,102 @@
|
|||
<template>
|
||||
<div :id="id" v-if="$attrs.value && $attrs.value.length > 0" :class="galleriaClass" :style="$attrs.galleriaStyle">
|
||||
<button v-if="$attrs.fullScreen" type="button" class="p-galleria-close p-link" @click="$emit('maskHide')">
|
||||
<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"/>
|
||||
</div>
|
||||
<div class="p-galleria-content">
|
||||
<GalleriaPreview :value="$attrs.value" :activeItemIndex.sync="activeItemIndex" :circular="$attrs.circular" :templates="$attrs.templates"
|
||||
:showIndicators="$attrs.showIndicators" :changePreviewOnIndicatorHover="$attrs.changePreviewOnIndicatorHover"
|
||||
:showPreviewNavButtons="$attrs.showPreviewNavButtons" :autoPlay="$attrs.autoPlay" :slideShowActive.sync="slideShowActive"
|
||||
@startSlideShow="startSlideShow" @stopSlideShow="stopSlideShow" />
|
||||
|
||||
<GalleriaThumbnails v-if="$attrs.showThumbnails" :containerId="id" :value="$attrs.value" :activeItemIndex.sync="activeItemIndex" :templates="$attrs.templates"
|
||||
:numVisible="$attrs.numVisible" :responsiveOptions="$attrs.responsiveOptions" :circular="$attrs.circular"
|
||||
:isVertical="isVertical()" :contentHeight="$attrs.verticalThumbnailViewPortHeight" :showThumbnailNavButtons="$attrs.showThumbnailNavButtons"
|
||||
:slideShowActive.sync="slideShowActive" @stopSlideShow="stopSlideShow" />
|
||||
</div>
|
||||
<div v-if="$attrs.templates && $attrs.templates['footer']" class="p-galleria-footer">
|
||||
<GalleriaItemSlot type="footer" :templates="$attrs.templates"/>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import UniqueComponentId from '../utils/UniqueComponentId';
|
||||
import GalleriaPreview from './GalleriaPreview';
|
||||
import GalleriaThumbnails from './GalleriaThumbnails';
|
||||
import GalleriaItemSlot from './GalleriaItemSlot';
|
||||
|
||||
export default {
|
||||
inheritAttrs: false,
|
||||
interval: null,
|
||||
data() {
|
||||
return {
|
||||
id: this.$attrs.id || UniqueComponentId(),
|
||||
activeItemIndex: this.$attrs.activeItemIndex,
|
||||
slideShowActive: false
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
'$attrs.activeItemIndex': function(newVal) {
|
||||
this.activeItemIndex = newVal;
|
||||
}
|
||||
},
|
||||
updated() {
|
||||
this.$emit('activeItemChange', this.activeItemIndex);
|
||||
},
|
||||
beforeDestroy() {
|
||||
if (this.slideShowActive) {
|
||||
this.stopSlideShow();
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
isAutoPlayActive() {
|
||||
return this.slideShowActive;
|
||||
},
|
||||
startSlideShow() {
|
||||
this.interval = setInterval(() => {
|
||||
let activeIndex = (this.$attrs.circular && (this.$attrs.value.length - 1) === this.activeItemIndex) ? 0 : (this.activeItemIndex + 1);
|
||||
this.activeItemIndex = activeIndex;
|
||||
}, this.$attrs.transitionInterval);
|
||||
|
||||
this.slideShowActive = true;
|
||||
},
|
||||
stopSlideShow() {
|
||||
if (this.interval) {
|
||||
clearInterval(this.interval);
|
||||
}
|
||||
|
||||
this.slideShowActive = false;
|
||||
},
|
||||
getPositionClass(preClassName, position) {
|
||||
const positions = ['top', 'left', 'bottom', 'right'];
|
||||
const pos = positions.find(item => item === position);
|
||||
|
||||
return pos ? `${preClassName}-${pos}` : '';
|
||||
},
|
||||
isVertical() {
|
||||
return this.$attrs.thumbnailsPosition === 'left' || this.$attrs.thumbnailsPosition === 'right';
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
galleriaClass() {
|
||||
const thumbnailsPosClass = this.$attrs.showThumbnails && this.getPositionClass('p-galleria-thumbnails', this.$attrs.thumbnailsPosition);
|
||||
const indicatorPosClass = this.$attrs.showIndicators && this.getPositionClass('p-galleria-indicators', this.$attrs.indicatorsPosition);
|
||||
|
||||
return ['p-galleria p-component', {
|
||||
'p-galleria-fullscreen': this.$attrs.fullScreen,
|
||||
'p-galleria-indicator-onpreview': this.$attrs.showIndicatorsOnPreview,
|
||||
'p-galleria-preview-nav-onhover': this.$attrs.showNavButtonsOnPreviewHover && !this.$attrs.fullScreen
|
||||
}, thumbnailsPosClass, indicatorPosClass, this.$attrs.galleriaClass]
|
||||
}
|
||||
},
|
||||
components: {
|
||||
'GalleriaPreview': GalleriaPreview,
|
||||
'GalleriaThumbnails': GalleriaThumbnails,
|
||||
'GalleriaItemSlot': GalleriaItemSlot
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
|
@ -0,0 +1,52 @@
|
|||
<script>
|
||||
export default {
|
||||
functional: true,
|
||||
props: {
|
||||
item: {
|
||||
type: null,
|
||||
default: null
|
||||
},
|
||||
index: {
|
||||
type: Number,
|
||||
default: 0
|
||||
},
|
||||
templates: {
|
||||
type: null,
|
||||
default: null
|
||||
},
|
||||
type: {
|
||||
type: String,
|
||||
default: null
|
||||
}
|
||||
},
|
||||
render(createElement, context) {
|
||||
const { item, index, templates, type } = context.props;
|
||||
const template = templates && templates[type];
|
||||
|
||||
if (template) {
|
||||
let content;
|
||||
switch(type) {
|
||||
case 'previewItem':
|
||||
case 'previewCaption':
|
||||
case 'thumbnailItem':
|
||||
content = template({
|
||||
item
|
||||
});
|
||||
break;
|
||||
case 'indicator':
|
||||
content = template({
|
||||
index
|
||||
});
|
||||
break;
|
||||
default:
|
||||
content = template({});
|
||||
break;
|
||||
}
|
||||
|
||||
return content ? [content] : null;
|
||||
}
|
||||
|
||||
return null;
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
|
@ -0,0 +1,162 @@
|
|||
<template>
|
||||
<div class="p-galleria-preview-content">
|
||||
<div class="p-galleria-preview-container">
|
||||
<button v-if="showPreviewNavButtons" type="button" :class="navBackwardClass" @click="navBackward($event)" :disabled="isNavBackwardDisabled()">
|
||||
<span class="p-galleria-preview-prev-icon pi pi-chevron-left"></span>
|
||||
</button>
|
||||
<div class="p-galleria-preview-items-content">
|
||||
<GalleriaItemSlot type="previewItem" :item="activeItem" :templates="templates" />
|
||||
</div>
|
||||
<button v-if="showPreviewNavButtons" type="button" :class="navForwardClass" @click="navForward($event)" :disabled="isNavForwardDisabled()">
|
||||
<span class="p-galleria-preview-next-icon pi pi-chevron-right"></span>
|
||||
</button>
|
||||
<div class="p-galleria-preview-caption">
|
||||
<GalleriaItemSlot type="previewCaption" :item="activeItem" :templates="templates" />
|
||||
</div>
|
||||
</div>
|
||||
<ul v-if="showIndicators" class="p-galleria-indicator-container p-reset">
|
||||
<li v-for="(item, index) of value" :key="`p-galleria-indicator-${index}`" tabindex="0"
|
||||
@click="onIndicatorClick(index)" @mouseenter="onIndicatorMouseEnter(index)" @keydown.enter="onIndicatorKeyDown(index)"
|
||||
:class="['p-galleria-indicator-item', {'p-highlight': isIndicatorItemActive(index)}]">
|
||||
<button type="button" tabIndex="-1" class="p-link" v-if="!templates['indicator']">
|
||||
<span :class="['p-galleria-indicator-icon pi', {
|
||||
'pi-circle-on': isIndicatorItemActive(index),
|
||||
'pi-circle-off': !isIndicatorItemActive(index)}]" />
|
||||
</button>
|
||||
<GalleriaItemSlot type="indicator" :index="index" :templates="templates" />
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import GalleriaItemSlot from './GalleriaItemSlot';
|
||||
|
||||
export default {
|
||||
props: {
|
||||
circular: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
activeItemIndex: {
|
||||
type: Number,
|
||||
default: 0
|
||||
},
|
||||
value: {
|
||||
type: Array,
|
||||
default: null
|
||||
},
|
||||
showPreviewNavButtons: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
},
|
||||
showIndicators: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
},
|
||||
slideShowActive: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
},
|
||||
changePreviewOnIndicatorHover: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
},
|
||||
autoPlay: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
templates: {
|
||||
type: null,
|
||||
default: null
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
if (this.autoPlay) {
|
||||
this.$emit('startSlideShow');
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
next() {
|
||||
let nextItemIndex = this.activeItemIndex + 1;
|
||||
let activeIndex = this.circular && this.value.length - 1 === this.activeItemIndex
|
||||
? 0
|
||||
: nextItemIndex;
|
||||
|
||||
this.$emit('update:activeItemIndex', activeIndex);
|
||||
},
|
||||
prev() {
|
||||
let prevItemIndex = this.activeItemIndex !== 0 ? this.activeItemIndex - 1 : 0;
|
||||
let activeIndex = this.circular && this.activeItemIndex === 0
|
||||
? this.value.length - 1
|
||||
: prevItemIndex
|
||||
|
||||
this.$emit('update:activeItemIndex', activeIndex);
|
||||
},
|
||||
stopSlideShow() {
|
||||
if (this.slideShowActive && this.stopSlideShow) {
|
||||
this.$emit('stopSlideShow');
|
||||
}
|
||||
},
|
||||
navBackward(e) {
|
||||
this.stopSlideShow();
|
||||
this.prev();
|
||||
|
||||
if (e && e.cancelable) {
|
||||
e.preventDefault();
|
||||
}
|
||||
},
|
||||
navForward(e) {
|
||||
this.stopSlideShow();
|
||||
this.next();
|
||||
|
||||
if (e && e.cancelable) {
|
||||
e.preventDefault();
|
||||
}
|
||||
},
|
||||
onIndicatorClick(index) {
|
||||
this.stopSlideShow();
|
||||
this.$emit('update:activeItemIndex', index);
|
||||
},
|
||||
onIndicatorMouseEnter(index) {
|
||||
if (this.changePreviewOnIndicatorHover) {
|
||||
this.stopSlideShow();
|
||||
|
||||
this.$emit('update:activeItemIndex', index);
|
||||
}
|
||||
},
|
||||
onIndicatorKeyDown(index) {
|
||||
this.stopSlideShow();
|
||||
|
||||
this.$emit('update:activeItemIndex', index);
|
||||
},
|
||||
isIndicatorItemActive(index) {
|
||||
return this.activeItemIndex === index;
|
||||
},
|
||||
isNavBackwardDisabled() {
|
||||
return !this.circular && this.activeItemIndex === 0;
|
||||
},
|
||||
isNavForwardDisabled() {
|
||||
return !this.circular && this.activeItemIndex === (this.value.length - 1);
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
activeItem() {
|
||||
return this.value[this.activeItemIndex];
|
||||
},
|
||||
navBackwardClass() {
|
||||
return ['p-galleria-preview-prev p-galleria-preview-nav-button p-button', {
|
||||
'p-disabled': this.isNavBackwardDisabled()
|
||||
}];
|
||||
},
|
||||
navForwardClass() {
|
||||
return ['p-galleria-preview-next p-galleria-preview-nav-button p-button', {
|
||||
'p-disabled': this.isNavForwardDisabled()
|
||||
}];
|
||||
}
|
||||
},
|
||||
components: {
|
||||
'GalleriaItemSlot': GalleriaItemSlot
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
|
@ -0,0 +1,411 @@
|
|||
<template>
|
||||
<div class="p-galleria-thumbnail-content">
|
||||
<div class="p-galleria-thumbnail-container">
|
||||
<button v-if="showThumbnailNavButtons" :class="navBackwardClass" @click="navBackward($event)" :disabled="isNavBackwardDisabled()">
|
||||
<span :class="navBackwardIconClass"></span>
|
||||
</button>
|
||||
<div class="p-galleria-thumbnail-items-content" :style="{'height': isVertical ? contentHeight : ''}">
|
||||
<div ref="itemsContainer" class="p-galleria-thumbnail-items-container" @transitionend="onTransitionEnd"
|
||||
@touchstart="onTouchStart($event)" @touchmove="onTouchMove($event)" @touchend="onTouchEnd($event)">
|
||||
<div v-for="(item, index) of value" :key="`p-galleria-thumbnail-item-${index}`" :class="['p-galleria-thumbnail-item', {
|
||||
'p-galleria-thumbnail-item-current': activeItemIndex === index,
|
||||
'p-galleria-thumbnail-item-active': isItemActive(index),
|
||||
'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="thumbnailItem" :item="item" :templates="templates" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<button v-if="showThumbnailNavButtons" :class="navForwardClass" @click="navForward($event)" :disabled="isNavForwardDisabled()">
|
||||
<span :class="navForwardIconClass"></span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import GalleriaItemSlot from './GalleriaItemSlot';
|
||||
import DomHandler from '../utils/DomHandler';
|
||||
|
||||
export default {
|
||||
props: {
|
||||
containerId: {
|
||||
type: String,
|
||||
default: null,
|
||||
},
|
||||
value: {
|
||||
type: Array,
|
||||
default: null
|
||||
},
|
||||
numVisible: {
|
||||
type: Number,
|
||||
default: 3
|
||||
},
|
||||
activeItemIndex: {
|
||||
type: Number,
|
||||
default: 0
|
||||
},
|
||||
isVertical: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
slideShowActive: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
circular: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
responsiveOptions: {
|
||||
type: Array,
|
||||
default: null
|
||||
},
|
||||
contentHeight: {
|
||||
type: String,
|
||||
default: "300px"
|
||||
},
|
||||
showThumbnailNavButtons: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
},
|
||||
templates: {
|
||||
type: null,
|
||||
default: null
|
||||
}
|
||||
},
|
||||
startPos: null,
|
||||
thumbnailsStyle: null,
|
||||
sortedResponsiveOptions: null,
|
||||
data() {
|
||||
return {
|
||||
d_numVisible: this.numVisible,
|
||||
d_oldNumVisible: this.numVisible,
|
||||
d_activeItemIndex: this.activeItemIndex,
|
||||
d_oldActiveItemIndex: this.activeItemIndex,
|
||||
totalShiftedItems: 0,
|
||||
page: 0
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
numVisible(newValue, oldValue) {
|
||||
this.d_numVisible = newValue;
|
||||
this.d_oldNumVisible = oldValue;
|
||||
},
|
||||
activeItemIndex(newValue, oldValue) {
|
||||
this.d_activeItemIndex = newValue;
|
||||
this.d_oldActiveItemIndex = oldValue;
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.createStyle();
|
||||
this.calculatePosition();
|
||||
|
||||
if (this.responsiveOptions) {
|
||||
this.bindDocumentListeners();
|
||||
}
|
||||
},
|
||||
updated() {
|
||||
let totalShiftedItems = this.totalShiftedItems;
|
||||
|
||||
if (this.d_oldNumVisible !== this.d_numVisible || this.d_oldActiveItemIndex !== this.d_activeItemIndex) {
|
||||
if (this.d_activeItemIndex <= this.getMedianItemIndex()) {
|
||||
totalShiftedItems = 0;
|
||||
}
|
||||
else if (this.value.length - this.d_numVisible + this.getMedianItemIndex() < this.d_activeItemIndex) {
|
||||
totalShiftedItems = this.d_numVisible - this.value.length;
|
||||
}
|
||||
else if (this.value.length - this.d_numVisible < this.d_activeItemIndex && this.d_numVisible % 2 === 0) {
|
||||
totalShiftedItems = (this.d_activeItemIndex * -1) + this.getMedianItemIndex() + 1;
|
||||
}
|
||||
else {
|
||||
totalShiftedItems = (this.d_activeItemIndex * -1) + this.getMedianItemIndex();
|
||||
}
|
||||
|
||||
if (totalShiftedItems !== this.totalShiftedItems) {
|
||||
this.totalShiftedItems = totalShiftedItems;
|
||||
}
|
||||
|
||||
this.$refs.itemsContainer.style.transform = this.isVertical ? `translate3d(0, ${totalShiftedItems * (100/ this.d_numVisible)}%, 0)` : `translate3d(${totalShiftedItems * (100/ this.d_numVisible)}%, 0, 0)`;
|
||||
|
||||
if (this.d_oldActiveItemIndex !== this.d_activeItemIndex) {
|
||||
DomHandler.removeClass(this.$refs.itemsContainer, 'p-items-hidden');
|
||||
this.$refs.itemsContainer.style.transition = 'transform 500ms ease 0s';
|
||||
}
|
||||
|
||||
this.d_oldActiveItemIndex = this.d_activeItemIndex;
|
||||
this.d_oldNumVisible = this.d_numVisible;
|
||||
}
|
||||
},
|
||||
beforeDestroy() {
|
||||
if (this.responsiveOptions) {
|
||||
this.unbindDocumentListeners();
|
||||
}
|
||||
|
||||
if (this.thumbnailsStyle) {
|
||||
this.thumbnailsStyle.parentNode.removeChild(this.thumbnailsStyle);
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
step(dir) {
|
||||
let totalShiftedItems = this.totalShiftedItems + dir;
|
||||
|
||||
if (dir < 0 && (-1 * totalShiftedItems) + this.d_numVisible > (this.value.length - 1)) {
|
||||
totalShiftedItems = this.d_numVisible - this.value.length;
|
||||
}
|
||||
else if (dir > 0 && totalShiftedItems > 0) {
|
||||
totalShiftedItems = 0;
|
||||
}
|
||||
|
||||
if (this.circular) {
|
||||
if (dir < 0 && this.value.length - 1 === this.d_activeItemIndex) {
|
||||
totalShiftedItems = 0;
|
||||
}
|
||||
else if (dir > 0 && this.d_activeItemIndex === 0) {
|
||||
totalShiftedItems = this.d_numVisible - this.value.length;
|
||||
}
|
||||
}
|
||||
|
||||
if (this.$refs.itemsContainer) {
|
||||
DomHandler.removeClass(this.$refs.itemsContainer, 'p-items-hidden');
|
||||
this.$refs.itemsContainer.style.transform = this.isVertical ? `translate3d(0, ${totalShiftedItems * (100/ this.d_numVisible)}%, 0)` : `translate3d(${totalShiftedItems * (100/ this.d_numVisible)}%, 0, 0)`;
|
||||
this.$refs.itemsContainer.style.transition = 'transform 500ms ease 0s';
|
||||
}
|
||||
|
||||
this.totalShiftedItems = totalShiftedItems;
|
||||
},
|
||||
stopSlideShow() {
|
||||
if (this.slideShowActive && this.stopSlideShow) {
|
||||
this.$emit('stopSlideShow');
|
||||
}
|
||||
},
|
||||
getMedianItemIndex() {
|
||||
let index = Math.floor(this.d_numVisible / 2);
|
||||
|
||||
return (this.d_numVisible % 2) ? index : index - 1;
|
||||
},
|
||||
navBackward(e) {
|
||||
this.stopSlideShow();
|
||||
|
||||
let prevItemIndex = this.d_activeItemIndex !== 0 ? this.d_activeItemIndex - 1 : 0;
|
||||
let diff = prevItemIndex + this.totalShiftedItems;
|
||||
if ((this.d_numVisible - diff - 1) > this.getMedianItemIndex() && ((-1 * this.totalShiftedItems) !== 0 || this.circular)) {
|
||||
this.step(1);
|
||||
}
|
||||
|
||||
let activeIndex = this.circular && this.d_activeItemIndex === 0 ? this.value.length - 1 : prevItemIndex;
|
||||
this.$emit('update:activeItemIndex', activeIndex);
|
||||
|
||||
if (e.cancelable) {
|
||||
e.preventDefault();
|
||||
}
|
||||
},
|
||||
navForward(e) {
|
||||
this.stopSlideShow();
|
||||
|
||||
let nextItemIndex = this.d_activeItemIndex + 1;
|
||||
if (nextItemIndex + this.totalShiftedItems > this.getMedianItemIndex() && ((-1 * this.totalShiftedItems) < this.getTotalPageNumber() - 1 || this.circular)) {
|
||||
this.step(-1);
|
||||
}
|
||||
|
||||
let activeIndex = this.circular && (this.value.length - 1) === this.d_activeItemIndex ? 0 : nextItemIndex;
|
||||
this.$emit('update:activeItemIndex', activeIndex);
|
||||
|
||||
if (e.cancelable) {
|
||||
e.preventDefault();
|
||||
}
|
||||
},
|
||||
onItemClick(index) {
|
||||
this.stopSlideShow();
|
||||
|
||||
let selectedItemIndex = index;
|
||||
if (selectedItemIndex !== this.d_activeItemIndex) {
|
||||
const diff = selectedItemIndex + this.totalShiftedItems;
|
||||
let dir = 0;
|
||||
if (selectedItemIndex < this.d_activeItemIndex) {
|
||||
dir = (this.d_numVisible - diff - 1) - this.getMedianItemIndex();
|
||||
if (dir > 0 && (-1 * this.totalShiftedItems) !== 0) {
|
||||
this.step(dir);
|
||||
}
|
||||
}
|
||||
else {
|
||||
dir = this.getMedianItemIndex() - diff;
|
||||
if (dir < 0 && (-1 * this.totalShiftedItems) < this.getTotalPageNumber() - 1) {
|
||||
this.step(dir);
|
||||
}
|
||||
}
|
||||
|
||||
this.$emit('update:activeItemIndex', selectedItemIndex);
|
||||
}
|
||||
},
|
||||
onTransitionEnd() {
|
||||
if (this.$refs.itemsContainer) {
|
||||
DomHandler.addClass(this.$refs.itemsContainer, 'p-items-hidden');
|
||||
this.$refs.itemsContainer.style.transition = '';
|
||||
}
|
||||
},
|
||||
onTouchStart(e) {
|
||||
let touchobj = e.changedTouches[0];
|
||||
|
||||
this.startPos = {
|
||||
x: touchobj.pageX,
|
||||
y: touchobj.pageY
|
||||
};
|
||||
},
|
||||
onTouchMove(e) {
|
||||
if (e.cancelable) {
|
||||
e.preventDefault();
|
||||
}
|
||||
},
|
||||
onTouchEnd(e) {
|
||||
let touchobj = e.changedTouches[0];
|
||||
|
||||
if (this.isVertical) {
|
||||
this.changePageOnTouch(e, (touchobj.pageY - this.startPos.y));
|
||||
}
|
||||
else {
|
||||
this.changePageOnTouch(e, (touchobj.pageX - this.startPos.x));
|
||||
}
|
||||
},
|
||||
changePageOnTouch(e, diff) {
|
||||
if (diff < 0) { // left
|
||||
this.navForward(e);
|
||||
}
|
||||
else { // right
|
||||
this.navBackward(e);
|
||||
}
|
||||
},
|
||||
getTotalPageNumber() {
|
||||
return this.value.length > this.d_numVisible ? (this.value.length - this.d_numVisible) + 1 : 0;
|
||||
},
|
||||
createStyle() {
|
||||
if (!this.thumbnailsStyle) {
|
||||
this.thumbnailsStyle = document.createElement('style');
|
||||
this.thumbnailsStyle.type = 'text/css';
|
||||
document.body.appendChild(this.thumbnailsStyle);
|
||||
}
|
||||
|
||||
let innerHTML = `
|
||||
#${this.containerId} .p-galleria-thumbnail-item {
|
||||
flex: 1 0 ${ (100/ this.d_numVisible) }%
|
||||
}
|
||||
`;
|
||||
|
||||
if (this.responsiveOptions) {
|
||||
this.sortedResponsiveOptions = [...this.responsiveOptions];
|
||||
this.sortedResponsiveOptions.sort((data1, data2) => {
|
||||
const value1 = data1.breakpoint;
|
||||
const value2 = data2.breakpoint;
|
||||
let result = null;
|
||||
|
||||
if (value1 == null && value2 != null)
|
||||
result = -1;
|
||||
else if (value1 != null && value2 == null)
|
||||
result = 1;
|
||||
else if (value1 == null && value2 == null)
|
||||
result = 0;
|
||||
else if (typeof value1 === 'string' && typeof value2 === 'string')
|
||||
result = value1.localeCompare(value2, undefined, { numeric: true });
|
||||
else
|
||||
result = (value1 < value2) ? -1 : (value1 > value2) ? 1 : 0;
|
||||
|
||||
return -1 * result;
|
||||
});
|
||||
|
||||
for (let i = 0; i < this.sortedResponsiveOptions.length; i++) {
|
||||
let res = this.sortedResponsiveOptions[i];
|
||||
|
||||
innerHTML += `
|
||||
@media screen and (max-width: ${res.breakpoint}) {
|
||||
#${this.containerId} .p-galleria-thumbnail-item {
|
||||
flex: 1 0 ${ (100/ res.numVisible) }%
|
||||
}
|
||||
}
|
||||
`
|
||||
}
|
||||
}
|
||||
|
||||
this.thumbnailsStyle.innerHTML = innerHTML;
|
||||
},
|
||||
calculatePosition() {
|
||||
if (this.$refs.itemsContainer && this.sortedResponsiveOptions) {
|
||||
let windowWidth = window.innerWidth;
|
||||
let matchedResponsiveData = {
|
||||
numVisible: this.numVisible
|
||||
};
|
||||
|
||||
for (let i = 0; i < this.sortedResponsiveOptions.length; i++) {
|
||||
let res = this.sortedResponsiveOptions[i];
|
||||
|
||||
if (parseInt(res.breakpoint, 10) >= windowWidth) {
|
||||
matchedResponsiveData = res;
|
||||
}
|
||||
}
|
||||
|
||||
if (this.d_numVisible !== matchedResponsiveData.numVisible) {
|
||||
this.d_numVisible = matchedResponsiveData.numVisible;
|
||||
}
|
||||
}
|
||||
},
|
||||
bindDocumentListeners() {
|
||||
if (!this.documentResizeListener) {
|
||||
this.documentResizeListener = () => {
|
||||
this.calculatePosition();
|
||||
};
|
||||
|
||||
window.addEventListener('resize', this.documentResizeListener);
|
||||
}
|
||||
},
|
||||
unbindDocumentListeners() {
|
||||
if(this.documentResizeListener) {
|
||||
window.removeEventListener('resize', this.documentResizeListener);
|
||||
this.documentResizeListener = null;
|
||||
}
|
||||
},
|
||||
isNavBackwardDisabled() {
|
||||
return (!this.circular && this.d_activeItemIndex === 0) || (this.value.length <= this.d_numVisible);
|
||||
},
|
||||
isNavForwardDisabled() {
|
||||
return (!this.circular && this.d_activeItemIndex === (this.value.length - 1)) || (this.value.length <= this.d_numVisible);
|
||||
},
|
||||
firstItemAciveIndex() {
|
||||
return this.totalShiftedItems * -1;
|
||||
},
|
||||
lastItemActiveIndex() {
|
||||
return this.firstItemAciveIndex() + this.d_numVisible - 1;
|
||||
},
|
||||
isItemActive(index) {
|
||||
return this.firstItemAciveIndex() <= index && this.lastItemActiveIndex() >= index;
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
navBackwardClass() {
|
||||
return ['p-galleria-thumbnail-prev p-button', {
|
||||
'p-disabled': this.isNavBackwardDisabled()
|
||||
}];
|
||||
},
|
||||
navForwardClass() {
|
||||
return ['p-galleria-thumbnail-next p-button', {
|
||||
'p-disabled': this.isNavForwardDisabled()
|
||||
}];
|
||||
},
|
||||
navBackwardIconClass() {
|
||||
return ['p-galleria-thumbnail-prev-icon pi', {
|
||||
'pi-chevron-left': !this.isVertical,
|
||||
'pi-chevron-up': this.isVertical
|
||||
}];
|
||||
},
|
||||
navForwardIconClass() {
|
||||
return ['p-galleria-thumbnail-next-icon pi', {
|
||||
'pi-chevron-right': !this.isVertical,
|
||||
'pi-chevron-down': this.isVertical
|
||||
}];
|
||||
}
|
||||
},
|
||||
components: {
|
||||
'GalleriaItemSlot': GalleriaItemSlot
|
||||
}
|
||||
}
|
||||
</script>
|
||||
Loading…
Reference in New Issue