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