gnezim
783 lines
38 KiB
JavaScript
783 lines
38 KiB
JavaScript
import { EventEmitter, Component, ChangeDetectionStrategy, ViewEncapsulation, ElementRef, ChangeDetectorRef, Input, ViewChild, Output, ContentChildren, NgModule } from '@angular/core';
|
|
import { CommonModule } from '@angular/common';
|
|
import { PrimeTemplate, SharedModule } from 'primeng/api';
|
|
import { UniqueComponentId } from 'primeng/utils';
|
|
import { DomHandler } from 'primeng/dom';
|
|
import { RippleModule } from 'primeng/ripple';
|
|
|
|
class Galleria {
|
|
constructor(element, cd) {
|
|
this.element = element;
|
|
this.cd = cd;
|
|
this.fullScreen = false;
|
|
this.numVisible = 3;
|
|
this.showItemNavigators = false;
|
|
this.showThumbnailNavigators = true;
|
|
this.showItemNavigatorsOnHover = false;
|
|
this.changeItemOnIndicatorHover = false;
|
|
this.circular = false;
|
|
this.autoPlay = false;
|
|
this.transitionInterval = 4000;
|
|
this.showThumbnails = true;
|
|
this.thumbnailsPosition = "bottom";
|
|
this.verticalThumbnailViewPortHeight = "300px";
|
|
this.showIndicators = false;
|
|
this.showIndicatorsOnItem = false;
|
|
this.indicatorsPosition = "bottom";
|
|
this.baseZIndex = 0;
|
|
this.activeIndexChange = new EventEmitter();
|
|
this.visibleChange = new EventEmitter();
|
|
this._visible = false;
|
|
this._activeIndex = 0;
|
|
}
|
|
get activeIndex() {
|
|
return this._activeIndex;
|
|
}
|
|
;
|
|
set activeIndex(activeIndex) {
|
|
this._activeIndex = activeIndex;
|
|
}
|
|
get visible() {
|
|
return this._visible;
|
|
}
|
|
;
|
|
set visible(visible) {
|
|
this._visible = visible;
|
|
}
|
|
ngAfterContentInit() {
|
|
this.templates.forEach((item) => {
|
|
switch (item.getType()) {
|
|
case 'header':
|
|
this.headerFacet = item.template;
|
|
break;
|
|
case 'footer':
|
|
this.footerFacet = item.template;
|
|
break;
|
|
case 'indicator':
|
|
this.indicatorFacet = item.template;
|
|
break;
|
|
case 'caption':
|
|
this.captionFacet = item.template;
|
|
break;
|
|
}
|
|
});
|
|
}
|
|
ngOnChanges(simpleChanges) {
|
|
if (this.fullScreen && simpleChanges.visible) {
|
|
if (simpleChanges.visible.currentValue) {
|
|
DomHandler.addClass(document.body, 'p-overflow-hidden');
|
|
this.zIndex = String(this.baseZIndex + ++DomHandler.zindex);
|
|
}
|
|
else {
|
|
DomHandler.removeClass(document.body, 'p-overflow-hidden');
|
|
}
|
|
}
|
|
}
|
|
onMaskHide() {
|
|
this.visible = false;
|
|
this.visibleChange.emit(false);
|
|
}
|
|
onActiveItemChange(index) {
|
|
if (this.activeIndex !== index) {
|
|
this.activeIndex = index;
|
|
this.activeIndexChange.emit(index);
|
|
}
|
|
}
|
|
ngOnDestroy() {
|
|
if (this.fullScreen) {
|
|
DomHandler.removeClass(document.body, 'p-overflow-hidden');
|
|
}
|
|
}
|
|
}
|
|
Galleria.decorators = [
|
|
{ type: Component, args: [{
|
|
selector: 'p-galleria',
|
|
template: `
|
|
<div *ngIf="fullScreen;else windowed">
|
|
<div *ngIf="visible" #mask [ngClass]="{'p-galleria-mask p-component-overlay':true, 'p-galleria-visible': this.visible}" [class]="maskClass" [ngStyle]="{'zIndex':zIndex}">
|
|
<p-galleriaContent [value]="value" [activeIndex]="activeIndex" (maskHide)="onMaskHide()" (activeItemChange)="onActiveItemChange($event)" [ngStyle]="containerStyle"></p-galleriaContent>
|
|
</div>
|
|
</div>
|
|
|
|
<ng-template #windowed>
|
|
<p-galleriaContent [value]="value" [activeIndex]="activeIndex" (activeItemChange)="onActiveItemChange($event)"></p-galleriaContent>
|
|
</ng-template>
|
|
`,
|
|
changeDetection: ChangeDetectionStrategy.OnPush,
|
|
encapsulation: ViewEncapsulation.None,
|
|
styles: [".p-galleria-content,.p-galleria-item-wrapper{-ms-flex-direction:column;display:-ms-flexbox;display:flex;flex-direction:column}.p-galleria-item-wrapper{position:relative}.p-galleria-item-container{display:-ms-flexbox;display:flex;height:100%;position:relative}.p-galleria-item-nav{-ms-flex-align:center;-ms-flex-pack:center;align-items:center;display:-ms-inline-flexbox;display:inline-flex;justify-content:center;margin-top:-.5rem;overflow:hidden;position:absolute;top:50%}.p-galleria-item-prev{border-bottom-left-radius:0;border-top-left-radius:0;left:0}.p-galleria-item-next{border-bottom-right-radius:0;border-top-right-radius:0;right:0}.p-galleria-item{-ms-flex-align:center;-ms-flex-pack:center;align-items:center;display:-ms-flexbox;display:flex;height:100%;justify-content:center;width:100%}.p-galleria-item-nav-onhover .p-galleria-item-nav{opacity:0;pointer-events:none;transition:opacity .2s ease-in-out}.p-galleria-item-nav-onhover .p-galleria-item-wrapper:hover .p-galleria-item-nav{opacity:1;pointer-events:all}.p-galleria-item-nav-onhover .p-galleria-item-wrapper:hover .p-galleria-item-nav.p-disabled{pointer-events:none}.p-galleria-caption{bottom:0;left:0;position:absolute;width:100%}.p-galleria-thumbnail-wrapper{-ms-flex-direction:column;-ms-flex-negative:0;display:-ms-flexbox;display:flex;flex-direction:column;flex-shrink:0;overflow:auto}.p-galleria-thumbnail-next,.p-galleria-thumbnail-prev{-ms-flex:0 0 auto;-ms-flex-item-align:center;align-self:center;flex:0 0 auto;overflow:hidden;position:relative}.p-galleria-thumbnail-next,.p-galleria-thumbnail-next span,.p-galleria-thumbnail-prev,.p-galleria-thumbnail-prev span{-ms-flex-align:center;-ms-flex-pack:center;align-items:center;display:-ms-flexbox;display:flex;justify-content:center}.p-galleria-thumbnail-container{-ms-flex-direction:row;display:-ms-flexbox;display:flex;flex-direction:row}.p-galleria-thumbnail-items-container{overflow:hidden}.p-galleria-thumbnail-item,.p-galleria-thumbnail-items{display:-ms-flexbox;display:flex}.p-galleria-thumbnail-item{-ms-flex-align:center;-ms-flex-pack:center;align-items:center;cursor:pointer;justify-content:center;opacity:.5;overflow:auto}.p-galleria-thumbnail-item:hover{opacity:1;transition:opacity .3s}.p-galleria-thumbnail-item-current{opacity:1}.p-galleria-thumbnails-left .p-galleria-content,.p-galleria-thumbnails-left .p-galleria-item-wrapper,.p-galleria-thumbnails-right .p-galleria-content,.p-galleria-thumbnails-right .p-galleria-item-wrapper{-ms-flex-direction:row;flex-direction:row}.p-galleria-thumbnails-left .p-galleria-item-wrapper,.p-galleria-thumbnails-top .p-galleria-item-wrapper{-ms-flex-order:2;order:2}.p-galleria-thumbnails-left .p-galleria-thumbnail-wrapper,.p-galleria-thumbnails-top .p-galleria-thumbnail-wrapper{-ms-flex-order:1;order:1}.p-galleria-thumbnails-left .p-galleria-thumbnail-container,.p-galleria-thumbnails-right .p-galleria-thumbnail-container{-ms-flex-direction:column;-ms-flex-positive:1;flex-direction:column;flex-grow:1}.p-galleria-thumbnails-left .p-galleria-thumbnail-items,.p-galleria-thumbnails-right .p-galleria-thumbnail-items{-ms-flex-direction:column;flex-direction:column;height:100%}.p-galleria-thumbnails-left .p-galleria-thumbnail-wrapper,.p-galleria-thumbnails-right .p-galleria-thumbnail-wrapper{height:100%}.p-galleria-indicators{-ms-flex-align:center;-ms-flex-pack:center;align-items:center;display:-ms-flexbox;display:flex;justify-content:center}.p-galleria-indicator>button{-ms-flex-align:center;align-items:center;display:-ms-inline-flexbox;display:inline-flex}.p-galleria-indicators-left .p-galleria-item-wrapper,.p-galleria-indicators-right .p-galleria-item-wrapper{-ms-flex-align:center;-ms-flex-direction:row;align-items:center;flex-direction:row}.p-galleria-indicators-left .p-galleria-item-container,.p-galleria-indicators-top .p-galleria-item-container{-ms-flex-order:2;order:2}.p-galleria-indicators-left .p-galleria-indicators,.p-galleria-indicators-top .p-galleria-indicators{-ms-flex-order:1;order:1}.p-galleria-indicators-left .p-galleria-indicators,.p-galleria-indicators-right .p-galleria-indicators{-ms-flex-direction:column;flex-direction:column}.p-galleria-indicator-onitem .p-galleria-indicators{display:-ms-flexbox;display:flex;position:absolute}.p-galleria-indicator-onitem.p-galleria-indicators-top .p-galleria-indicators{-ms-flex-align:start;align-items:flex-start;left:0;top:0;width:100%}.p-galleria-indicator-onitem.p-galleria-indicators-right .p-galleria-indicators{-ms-flex-align:end;align-items:flex-end;height:100%;right:0;top:0}.p-galleria-indicator-onitem.p-galleria-indicators-bottom .p-galleria-indicators{-ms-flex-align:end;align-items:flex-end;bottom:0;left:0;width:100%}.p-galleria-indicator-onitem.p-galleria-indicators-left .p-galleria-indicators{-ms-flex-align:start;align-items:flex-start;height:100%;left:0;top:0}.p-galleria-mask{background-color:rgba(0,0,0,0);height:100%;left:0;position:fixed;transition-property:background-color;width:100%}.p-galleria-close,.p-galleria-mask{-ms-flex-align:center;-ms-flex-pack:center;align-items:center;display:-ms-flexbox;display:flex;justify-content:center;top:0}.p-galleria-close{overflow:hidden;position:absolute;right:0}.p-galleria-mask .p-galleria-item-nav{margin-top:-.5rem;position:fixed;top:50%}.p-galleria-mask.p-galleria-mask-leave{background-color:rgba(0,0,0,0)}.p-items-hidden .p-galleria-thumbnail-item{visibility:hidden}.p-items-hidden .p-galleria-thumbnail-item.p-galleria-thumbnail-item-active{visibility:visible}"]
|
|
},] }
|
|
];
|
|
Galleria.ctorParameters = () => [
|
|
{ type: ElementRef },
|
|
{ type: ChangeDetectorRef }
|
|
];
|
|
Galleria.propDecorators = {
|
|
activeIndex: [{ type: Input }],
|
|
fullScreen: [{ type: Input }],
|
|
id: [{ type: Input }],
|
|
value: [{ type: Input }],
|
|
numVisible: [{ type: Input }],
|
|
responsiveOptions: [{ type: Input }],
|
|
showItemNavigators: [{ type: Input }],
|
|
showThumbnailNavigators: [{ type: Input }],
|
|
showItemNavigatorsOnHover: [{ type: Input }],
|
|
changeItemOnIndicatorHover: [{ type: Input }],
|
|
circular: [{ type: Input }],
|
|
autoPlay: [{ type: Input }],
|
|
transitionInterval: [{ type: Input }],
|
|
showThumbnails: [{ type: Input }],
|
|
thumbnailsPosition: [{ type: Input }],
|
|
verticalThumbnailViewPortHeight: [{ type: Input }],
|
|
showIndicators: [{ type: Input }],
|
|
showIndicatorsOnItem: [{ type: Input }],
|
|
indicatorsPosition: [{ type: Input }],
|
|
baseZIndex: [{ type: Input }],
|
|
maskClass: [{ type: Input }],
|
|
containerClass: [{ type: Input }],
|
|
containerStyle: [{ type: Input }],
|
|
mask: [{ type: ViewChild, args: ['mask', { static: false },] }],
|
|
visible: [{ type: Input }],
|
|
activeIndexChange: [{ type: Output }],
|
|
visibleChange: [{ type: Output }],
|
|
templates: [{ type: ContentChildren, args: [PrimeTemplate,] }]
|
|
};
|
|
class GalleriaContent {
|
|
constructor(galleria, cd) {
|
|
this.galleria = galleria;
|
|
this.cd = cd;
|
|
this.value = [];
|
|
this.maskHide = new EventEmitter();
|
|
this.activeItemChange = new EventEmitter();
|
|
this.id = this.galleria.id || UniqueComponentId();
|
|
this.slideShowActicve = false;
|
|
this._activeIndex = 0;
|
|
this.slideShowActive = true;
|
|
}
|
|
get activeIndex() {
|
|
return this._activeIndex;
|
|
}
|
|
;
|
|
set activeIndex(activeIndex) {
|
|
this._activeIndex = activeIndex;
|
|
}
|
|
galleriaClass() {
|
|
const thumbnailsPosClass = this.galleria.showThumbnails && this.getPositionClass('p-galleria-thumbnails', this.galleria.thumbnailsPosition);
|
|
const indicatorPosClass = this.galleria.showIndicators && this.getPositionClass('p-galleria-indicators', this.galleria.indicatorsPosition);
|
|
return (this.galleria.containerClass ? this.galleria.containerClass + " " : '') + (thumbnailsPosClass ? thumbnailsPosClass + " " : '') + (indicatorPosClass ? indicatorPosClass + " " : '');
|
|
}
|
|
startSlideShow() {
|
|
this.interval = setInterval(() => {
|
|
let activeIndex = (this.galleria.circular && (this.value.length - 1) === this.activeIndex) ? 0 : (this.activeIndex + 1);
|
|
this.onActiveIndexChange(activeIndex);
|
|
this.activeIndex = activeIndex;
|
|
}, this.galleria.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.galleria.thumbnailsPosition === 'left' || this.galleria.thumbnailsPosition === 'right';
|
|
}
|
|
onActiveIndexChange(index) {
|
|
if (this.activeIndex !== index) {
|
|
this.activeIndex = index;
|
|
this.activeItemChange.emit(this.activeIndex);
|
|
}
|
|
}
|
|
}
|
|
GalleriaContent.decorators = [
|
|
{ type: Component, args: [{
|
|
selector: 'p-galleriaContent',
|
|
template: `
|
|
<div [attr.id]="id" *ngIf="value && value.length > 0" [ngClass]="{'p-galleria p-component': true, 'p-galleria-fullscreen': this.galleria.fullScreen,
|
|
'p-galleria-indicator-onitem': this.galleria.showIndicatorsOnItem, 'p-galleria-item-nav-onhover': this.galleria.showItemNavigatorsOnHover && !this.galleria.fullScreen}"
|
|
[ngStyle]="!galleria.fullScreen ? galleria.containerStyle : {}" [class]="galleriaClass()">
|
|
<button *ngIf="galleria.fullScreen" type="button" class="p-galleria-close p-link" (click)="maskHide.emit()" pRipple>
|
|
<span class="p-galleria-close-icon pi pi-times"></span>
|
|
</button>
|
|
<div *ngIf="galleria.templates && galleria.headerFacet" class="p-galleria-header">
|
|
<p-galleriaItemSlot type="header" [templates]="galleria.templates"></p-galleriaItemSlot>
|
|
</div>
|
|
<div class="p-galleria-content">
|
|
<p-galleriaItem [value]="value" [activeIndex]="activeIndex" [circular]="galleria.circular" [templates]="galleria.templates" (onActiveIndexChange)="onActiveIndexChange($event)"
|
|
[showIndicators]="galleria.showIndicators" [changeItemOnIndicatorHover]="galleria.changeItemOnIndicatorHover" [indicatorFacet]="galleria.indicatorFacet"
|
|
[captionFacet]="galleria.captionFacet" [showItemNavigators]="galleria.showItemNavigators" [autoPlay]="galleria.autoPlay" [slideShowActive]="slideShowActive"
|
|
(startSlideShow)="startSlideShow()" (stopSlideShow)="stopSlideShow()"></p-galleriaItem>
|
|
|
|
<p-galleriaThumbnails *ngIf="galleria.showThumbnails" [containerId]="id" [value]="value" (onActiveIndexChange)="onActiveIndexChange($event)" [activeIndex]="activeIndex" [templates]="galleria.templates"
|
|
[numVisible]="galleria.numVisible" [responsiveOptions]="galleria.responsiveOptions" [circular]="galleria.circular"
|
|
[isVertical]="isVertical()" [contentHeight]="galleria.verticalThumbnailViewPortHeight" [showThumbnailNavigators]="galleria.showThumbnailNavigators"
|
|
[slideShowActive]="slideShowActive" (stopSlideShow)="stopSlideShow()"></p-galleriaThumbnails>
|
|
</div>
|
|
<div *ngIf="galleria.templates && galleria.footerFacet" class="p-galleria-footer">
|
|
<p-galleriaItemSlot type="footer" [templates]="galleria.templates"></p-galleriaItemSlot>
|
|
</div>
|
|
</div>
|
|
`,
|
|
changeDetection: ChangeDetectionStrategy.OnPush
|
|
},] }
|
|
];
|
|
GalleriaContent.ctorParameters = () => [
|
|
{ type: Galleria },
|
|
{ type: ChangeDetectorRef }
|
|
];
|
|
GalleriaContent.propDecorators = {
|
|
activeIndex: [{ type: Input }],
|
|
value: [{ type: Input }],
|
|
maskHide: [{ type: Output }],
|
|
activeItemChange: [{ type: Output }]
|
|
};
|
|
class GalleriaItemSlot {
|
|
get item() {
|
|
return this._item;
|
|
}
|
|
;
|
|
set item(item) {
|
|
this._item = item;
|
|
if (this.templates) {
|
|
this.templates.forEach((item) => {
|
|
if (item.getType() === this.type) {
|
|
switch (this.type) {
|
|
case 'item':
|
|
case 'caption':
|
|
case 'thumbnail':
|
|
this.context = { $implicit: this.item };
|
|
this.contentTemplate = item.template;
|
|
break;
|
|
}
|
|
}
|
|
});
|
|
}
|
|
}
|
|
ngAfterContentInit() {
|
|
this.templates.forEach((item) => {
|
|
if (item.getType() === this.type) {
|
|
switch (this.type) {
|
|
case 'item':
|
|
case 'caption':
|
|
case 'thumbnail':
|
|
this.context = { $implicit: this.item };
|
|
this.contentTemplate = item.template;
|
|
break;
|
|
case 'indicator':
|
|
this.context = { $implicit: this.index };
|
|
this.contentTemplate = item.template;
|
|
break;
|
|
default:
|
|
this.context = {};
|
|
this.contentTemplate = item.template;
|
|
break;
|
|
}
|
|
}
|
|
});
|
|
}
|
|
}
|
|
GalleriaItemSlot.decorators = [
|
|
{ type: Component, args: [{
|
|
selector: 'p-galleriaItemSlot',
|
|
template: `
|
|
<ng-container *ngIf="contentTemplate">
|
|
<ng-container *ngTemplateOutlet="contentTemplate; context: context"></ng-container>
|
|
</ng-container>
|
|
`,
|
|
changeDetection: ChangeDetectionStrategy.OnPush
|
|
},] }
|
|
];
|
|
GalleriaItemSlot.propDecorators = {
|
|
templates: [{ type: Input }],
|
|
index: [{ type: Input }],
|
|
item: [{ type: Input }],
|
|
type: [{ type: Input }]
|
|
};
|
|
class GalleriaItem {
|
|
constructor() {
|
|
this.circular = false;
|
|
this.showItemNavigators = false;
|
|
this.showIndicators = true;
|
|
this.slideShowActive = true;
|
|
this.changeItemOnIndicatorHover = true;
|
|
this.autoPlay = false;
|
|
this.startSlideShow = new EventEmitter();
|
|
this.stopSlideShow = new EventEmitter();
|
|
this.onActiveIndexChange = new EventEmitter();
|
|
this._activeIndex = 0;
|
|
}
|
|
get activeIndex() {
|
|
return this._activeIndex;
|
|
}
|
|
;
|
|
set activeIndex(activeIndex) {
|
|
this._activeIndex = activeIndex;
|
|
this.activeItem = this.value[this._activeIndex];
|
|
}
|
|
ngOnInit() {
|
|
if (this.autoPlay) {
|
|
this.startSlideShow.emit();
|
|
}
|
|
}
|
|
next() {
|
|
let nextItemIndex = this.activeIndex + 1;
|
|
let activeIndex = this.circular && this.value.length - 1 === this.activeIndex
|
|
? 0
|
|
: nextItemIndex;
|
|
this.onActiveIndexChange.emit(activeIndex);
|
|
}
|
|
prev() {
|
|
let prevItemIndex = this.activeIndex !== 0 ? this.activeIndex - 1 : 0;
|
|
let activeIndex = this.circular && this.activeIndex === 0
|
|
? this.value.length - 1
|
|
: prevItemIndex;
|
|
this.onActiveIndexChange.emit(activeIndex);
|
|
}
|
|
stopTheSlideShow() {
|
|
if (this.slideShowActive && this.stopSlideShow) {
|
|
this.stopSlideShow.emit();
|
|
}
|
|
}
|
|
navForward(e) {
|
|
this.stopTheSlideShow();
|
|
this.next();
|
|
if (e && e.cancelable) {
|
|
e.preventDefault();
|
|
}
|
|
}
|
|
navBackward(e) {
|
|
this.stopTheSlideShow();
|
|
this.prev();
|
|
if (e && e.cancelable) {
|
|
e.preventDefault();
|
|
}
|
|
}
|
|
onIndicatorClick(index) {
|
|
this.stopTheSlideShow();
|
|
this.onActiveIndexChange.emit(index);
|
|
}
|
|
onIndicatorMouseEnter(index) {
|
|
if (this.changeItemOnIndicatorHover) {
|
|
this.stopTheSlideShow();
|
|
this.onActiveIndexChange.emit(index);
|
|
}
|
|
}
|
|
onIndicatorKeyDown(index) {
|
|
this.stopTheSlideShow();
|
|
this.onActiveIndexChange.emit(index);
|
|
}
|
|
isNavForwardDisabled() {
|
|
return !this.circular && this.activeIndex === (this.value.length - 1);
|
|
}
|
|
isNavBackwardDisabled() {
|
|
return !this.circular && this.activeIndex === 0;
|
|
}
|
|
isIndicatorItemActive(index) {
|
|
return this.activeIndex === index;
|
|
}
|
|
}
|
|
GalleriaItem.decorators = [
|
|
{ type: Component, args: [{
|
|
selector: 'p-galleriaItem',
|
|
template: `
|
|
<div class="p-galleria-item-wrapper">
|
|
<div class="p-galleria-item-container">
|
|
<button *ngIf="showItemNavigators" type="button" [ngClass]="{'p-galleria-item-prev p-galleria-item-nav p-link': true, 'p-disabled': this.isNavBackwardDisabled()}" (click)="navBackward($event)" [disabled]="isNavBackwardDisabled()" pRipple>
|
|
<span class="p-galleria-item-prev-icon pi pi-chevron-left"></span>
|
|
</button>
|
|
<p-galleriaItemSlot type="item" [item]="activeItem" [templates]="templates" class="p-galleria-item"></p-galleriaItemSlot>
|
|
<button *ngIf="showItemNavigators" type="button" [ngClass]="{'p-galleria-item-next p-galleria-item-nav p-link': true,'p-disabled': this.isNavForwardDisabled()}" (click)="navForward($event)" [disabled]="isNavForwardDisabled()" pRipple>
|
|
<span class="p-galleria-item-next-icon pi pi-chevron-right"></span>
|
|
</button>
|
|
<div class="p-galleria-caption" *ngIf="captionFacet">
|
|
<p-galleriaItemSlot type="caption" [item]="activeItem" [templates]="templates"></p-galleriaItemSlot>
|
|
</div>
|
|
</div>
|
|
<ul *ngIf="showIndicators" class="p-galleria-indicators p-reset">
|
|
<li *ngFor="let item of value; let index = index;" tabindex="0"
|
|
(click)="onIndicatorClick(index)" (mouseenter)="onIndicatorMouseEnter(index)" (keydown.enter)="onIndicatorKeyDown(index)"
|
|
[ngClass]="{'p-galleria-indicator': true,'p-highlight': isIndicatorItemActive(index)}">
|
|
<button type="button" tabIndex="-1" class="p-link" *ngIf="!indicatorFacet">
|
|
</button>
|
|
<p-galleriaItemSlot type="indicator" [index]="index" [templates]="templates"></p-galleriaItemSlot>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
`,
|
|
changeDetection: ChangeDetectionStrategy.OnPush
|
|
},] }
|
|
];
|
|
GalleriaItem.propDecorators = {
|
|
circular: [{ type: Input }],
|
|
value: [{ type: Input }],
|
|
showItemNavigators: [{ type: Input }],
|
|
showIndicators: [{ type: Input }],
|
|
slideShowActive: [{ type: Input }],
|
|
changeItemOnIndicatorHover: [{ type: Input }],
|
|
autoPlay: [{ type: Input }],
|
|
templates: [{ type: Input }],
|
|
indicatorFacet: [{ type: Input }],
|
|
captionFacet: [{ type: Input }],
|
|
startSlideShow: [{ type: Output }],
|
|
stopSlideShow: [{ type: Output }],
|
|
onActiveIndexChange: [{ type: Output }],
|
|
activeIndex: [{ type: Input }]
|
|
};
|
|
class GalleriaThumbnails {
|
|
constructor() {
|
|
this.isVertical = false;
|
|
this.slideShowActive = false;
|
|
this.circular = false;
|
|
this.contentHeight = "300px";
|
|
this.showThumbnailNavigators = true;
|
|
this.onActiveIndexChange = new EventEmitter();
|
|
this.stopSlideShow = new EventEmitter();
|
|
this.startPos = null;
|
|
this.thumbnailsStyle = null;
|
|
this.sortedResponsiveOptions = null;
|
|
this.totalShiftedItems = 0;
|
|
this.page = 0;
|
|
this._numVisible = 0;
|
|
this.d_numVisible = 0;
|
|
this._oldNumVisible = 0;
|
|
this._activeIndex = 0;
|
|
this._oldactiveIndex = 0;
|
|
}
|
|
get numVisible() {
|
|
return this._numVisible;
|
|
}
|
|
;
|
|
set numVisible(numVisible) {
|
|
this._numVisible = numVisible;
|
|
this._oldNumVisible = this.d_numVisible;
|
|
this.d_numVisible = numVisible;
|
|
}
|
|
get activeIndex() {
|
|
return this._activeIndex;
|
|
}
|
|
;
|
|
set activeIndex(activeIndex) {
|
|
this._oldactiveIndex = this._activeIndex;
|
|
this._activeIndex = activeIndex;
|
|
}
|
|
ngOnInit() {
|
|
this.createStyle();
|
|
this.calculatePosition();
|
|
if (this.responsiveOptions) {
|
|
this.bindDocumentListeners();
|
|
}
|
|
}
|
|
ngAfterContentChecked() {
|
|
let totalShiftedItems = this.totalShiftedItems;
|
|
if ((this._oldNumVisible !== this.d_numVisible || this._oldactiveIndex !== this._activeIndex) && this.itemsContainer) {
|
|
if (this._activeIndex <= this.getMedianItemIndex()) {
|
|
totalShiftedItems = 0;
|
|
}
|
|
else if (this.value.length - this.d_numVisible + this.getMedianItemIndex() < this._activeIndex) {
|
|
totalShiftedItems = this.d_numVisible - this.value.length;
|
|
}
|
|
else if (this.value.length - this.d_numVisible < this._activeIndex && this.d_numVisible % 2 === 0) {
|
|
totalShiftedItems = (this._activeIndex * -1) + this.getMedianItemIndex() + 1;
|
|
}
|
|
else {
|
|
totalShiftedItems = (this._activeIndex * -1) + this.getMedianItemIndex();
|
|
}
|
|
if (totalShiftedItems !== this.totalShiftedItems) {
|
|
this.totalShiftedItems = totalShiftedItems;
|
|
}
|
|
if (this.itemsContainer && this.itemsContainer.nativeElement) {
|
|
this.itemsContainer.nativeElement.style.transform = this.isVertical ? `translate3d(0, ${totalShiftedItems * (100 / this.d_numVisible)}%, 0)` : `translate3d(${totalShiftedItems * (100 / this.d_numVisible)}%, 0, 0)`;
|
|
}
|
|
if (this._oldactiveIndex !== this._activeIndex) {
|
|
DomHandler.removeClass(this.itemsContainer.nativeElement, 'p-items-hidden');
|
|
this.itemsContainer.nativeElement.style.transition = 'transform 500ms ease 0s';
|
|
}
|
|
this._oldactiveIndex = this._activeIndex;
|
|
this._oldNumVisible = this.d_numVisible;
|
|
}
|
|
}
|
|
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.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;
|
|
}
|
|
}
|
|
}
|
|
getTabIndex(index) {
|
|
return this.isItemActive(index) ? 0 : null;
|
|
}
|
|
navForward(e) {
|
|
this.stopTheSlideShow();
|
|
let nextItemIndex = this._activeIndex + 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._activeIndex ? 0 : nextItemIndex;
|
|
this.onActiveIndexChange.emit(activeIndex);
|
|
if (e.cancelable) {
|
|
e.preventDefault();
|
|
}
|
|
}
|
|
navBackward(e) {
|
|
this.stopTheSlideShow();
|
|
let prevItemIndex = this._activeIndex !== 0 ? this._activeIndex - 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._activeIndex === 0 ? this.value.length - 1 : prevItemIndex;
|
|
this.onActiveIndexChange.emit(activeIndex);
|
|
if (e.cancelable) {
|
|
e.preventDefault();
|
|
}
|
|
}
|
|
onItemClick(index) {
|
|
this.stopTheSlideShow();
|
|
let selectedItemIndex = index;
|
|
if (selectedItemIndex !== this._activeIndex) {
|
|
const diff = selectedItemIndex + this.totalShiftedItems;
|
|
let dir = 0;
|
|
if (selectedItemIndex < this._activeIndex) {
|
|
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.activeIndex = selectedItemIndex;
|
|
this.onActiveIndexChange.emit(this.activeIndex);
|
|
}
|
|
}
|
|
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._activeIndex) {
|
|
totalShiftedItems = 0;
|
|
}
|
|
else if (dir > 0 && this._activeIndex === 0) {
|
|
totalShiftedItems = this.d_numVisible - this.value.length;
|
|
}
|
|
}
|
|
if (this.itemsContainer) {
|
|
DomHandler.removeClass(this.itemsContainer.nativeElement, 'p-items-hidden');
|
|
this.itemsContainer.nativeElement.style.transform = this.isVertical ? `translate3d(0, ${totalShiftedItems * (100 / this.d_numVisible)}%, 0)` : `translate3d(${totalShiftedItems * (100 / this.d_numVisible)}%, 0, 0)`;
|
|
this.itemsContainer.nativeElement.style.transition = 'transform 500ms ease 0s';
|
|
}
|
|
this.totalShiftedItems = totalShiftedItems;
|
|
}
|
|
stopTheSlideShow() {
|
|
if (this.slideShowActive && this.stopSlideShow) {
|
|
this.stopSlideShow.emit();
|
|
}
|
|
}
|
|
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;
|
|
}
|
|
getMedianItemIndex() {
|
|
let index = Math.floor(this.d_numVisible / 2);
|
|
return (this.d_numVisible % 2) ? index : index - 1;
|
|
}
|
|
onTransitionEnd() {
|
|
if (this.itemsContainer && this.itemsContainer.nativeElement) {
|
|
DomHandler.addClass(this.itemsContainer.nativeElement, 'p-items-hidden');
|
|
this.itemsContainer.nativeElement.style.transition = '';
|
|
}
|
|
}
|
|
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));
|
|
}
|
|
}
|
|
onTouchMove(e) {
|
|
if (e.cancelable) {
|
|
e.preventDefault();
|
|
}
|
|
}
|
|
onTouchStart(e) {
|
|
let touchobj = e.changedTouches[0];
|
|
this.startPos = {
|
|
x: touchobj.pageX,
|
|
y: touchobj.pageY
|
|
};
|
|
}
|
|
isNavBackwardDisabled() {
|
|
return (!this.circular && this._activeIndex === 0) || (this.value.length <= this.d_numVisible);
|
|
}
|
|
isNavForwardDisabled() {
|
|
return (!this.circular && this._activeIndex === (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;
|
|
}
|
|
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;
|
|
}
|
|
}
|
|
ngOnDestroy() {
|
|
if (this.responsiveOptions) {
|
|
this.unbindDocumentListeners();
|
|
}
|
|
if (this.thumbnailsStyle) {
|
|
this.thumbnailsStyle.parentNode.removeChild(this.thumbnailsStyle);
|
|
}
|
|
}
|
|
}
|
|
GalleriaThumbnails.decorators = [
|
|
{ type: Component, args: [{
|
|
selector: 'p-galleriaThumbnails',
|
|
template: `
|
|
<div class="p-galleria-thumbnail-wrapper">
|
|
<div class="p-galleria-thumbnail-container">
|
|
<button *ngIf="showThumbnailNavigators" type="button" [ngClass]="{'p-galleria-thumbnail-prev p-link': true, 'p-disabled': this.isNavBackwardDisabled()}" (click)="navBackward($event)" [disabled]="isNavBackwardDisabled()" pRipple>
|
|
<span [ngClass]="{'p-galleria-thumbnail-prev-icon pi': true, 'pi-chevron-left': !this.isVertical, 'pi-chevron-up': this.isVertical}"></span>
|
|
</button>
|
|
<div class="p-galleria-thumbnail-items-container" [ngStyle]="{'height': isVertical ? contentHeight : ''}">
|
|
<div #itemsContainer class="p-galleria-thumbnail-items" (transitionend)="onTransitionEnd()"
|
|
(touchstart)="onTouchStart($event)" (touchmove)="onTouchMove($event)" (touchend)="onTouchEnd($event)">
|
|
<div *ngFor="let item of value; let index = index;" [ngClass]="{'p-galleria-thumbnail-item': true, 'p-galleria-thumbnail-item-current': activeIndex === 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" [attr.tabindex]="getTabIndex(index)" (click)="onItemClick(index)" (keydown.enter)="onItemClick(index)">
|
|
<p-galleriaItemSlot type="thumbnail" [item]="item" [templates]="templates"></p-galleriaItemSlot>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<button *ngIf="showThumbnailNavigators" type="button" [ngClass]="{'p-galleria-thumbnail-next p-link': true, 'p-disabled': this.isNavForwardDisabled()}" (click)="navForward($event)" [disabled]="isNavForwardDisabled()" pRipple>
|
|
<span [ngClass]="{'p-galleria-thumbnail-next-icon pi': true, 'pi-chevron-right': !this.isVertical, 'pi-chevron-down': this.isVertical}"></span>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
`,
|
|
changeDetection: ChangeDetectionStrategy.OnPush
|
|
},] }
|
|
];
|
|
GalleriaThumbnails.propDecorators = {
|
|
containerId: [{ type: Input }],
|
|
value: [{ type: Input }],
|
|
isVertical: [{ type: Input }],
|
|
slideShowActive: [{ type: Input }],
|
|
circular: [{ type: Input }],
|
|
responsiveOptions: [{ type: Input }],
|
|
contentHeight: [{ type: Input }],
|
|
showThumbnailNavigators: [{ type: Input }],
|
|
templates: [{ type: Input }],
|
|
onActiveIndexChange: [{ type: Output }],
|
|
stopSlideShow: [{ type: Output }],
|
|
itemsContainer: [{ type: ViewChild, args: ['itemsContainer',] }],
|
|
numVisible: [{ type: Input }],
|
|
activeIndex: [{ type: Input }]
|
|
};
|
|
class GalleriaModule {
|
|
}
|
|
GalleriaModule.decorators = [
|
|
{ type: NgModule, args: [{
|
|
imports: [CommonModule, SharedModule, RippleModule],
|
|
exports: [CommonModule, Galleria, GalleriaContent, GalleriaItemSlot, GalleriaItem, GalleriaThumbnails, SharedModule],
|
|
declarations: [Galleria, GalleriaContent, GalleriaItemSlot, GalleriaItem, GalleriaThumbnails]
|
|
},] }
|
|
];
|
|
|
|
/**
|
|
* Generated bundle index. Do not edit.
|
|
*/
|
|
|
|
export { Galleria, GalleriaContent, GalleriaItem, GalleriaItemSlot, GalleriaModule, GalleriaThumbnails };
|
|
//# sourceMappingURL=primeng-galleria.js.map
|