1 | import { EventEmitter, Component, ChangeDetectionStrategy, ViewEncapsulation, ElementRef, ChangeDetectorRef, Input, ViewChild, Output, ContentChildren, NgModule } from '@angular/core';
|
2 | import { CommonModule } from '@angular/common';
|
3 | import { PrimeTemplate, SharedModule } from 'primeng/api';
|
4 | import { UniqueComponentId } from 'primeng/utils';
|
5 | import { DomHandler } from 'primeng/dom';
|
6 | import { RippleModule } from 'primeng/ripple';
|
7 |
|
8 | class Galleria {
|
9 | constructor(element, cd) {
|
10 | this.element = element;
|
11 | this.cd = cd;
|
12 | this.fullScreen = false;
|
13 | this.numVisible = 3;
|
14 | this.showItemNavigators = false;
|
15 | this.showThumbnailNavigators = true;
|
16 | this.showItemNavigatorsOnHover = false;
|
17 | this.changeItemOnIndicatorHover = false;
|
18 | this.circular = false;
|
19 | this.autoPlay = false;
|
20 | this.transitionInterval = 4000;
|
21 | this.showThumbnails = true;
|
22 | this.thumbnailsPosition = "bottom";
|
23 | this.verticalThumbnailViewPortHeight = "300px";
|
24 | this.showIndicators = false;
|
25 | this.showIndicatorsOnItem = false;
|
26 | this.indicatorsPosition = "bottom";
|
27 | this.baseZIndex = 0;
|
28 | this.activeIndexChange = new EventEmitter();
|
29 | this.visibleChange = new EventEmitter();
|
30 | this._visible = false;
|
31 | this._activeIndex = 0;
|
32 | }
|
33 | get activeIndex() {
|
34 | return this._activeIndex;
|
35 | }
|
36 | ;
|
37 | set activeIndex(activeIndex) {
|
38 | this._activeIndex = activeIndex;
|
39 | }
|
40 | get visible() {
|
41 | return this._visible;
|
42 | }
|
43 | ;
|
44 | set visible(visible) {
|
45 | this._visible = visible;
|
46 | }
|
47 | ngAfterContentInit() {
|
48 | this.templates.forEach((item) => {
|
49 | switch (item.getType()) {
|
50 | case 'header':
|
51 | this.headerFacet = item.template;
|
52 | break;
|
53 | case 'footer':
|
54 | this.footerFacet = item.template;
|
55 | break;
|
56 | case 'indicator':
|
57 | this.indicatorFacet = item.template;
|
58 | break;
|
59 | case 'caption':
|
60 | this.captionFacet = item.template;
|
61 | break;
|
62 | }
|
63 | });
|
64 | }
|
65 | ngOnChanges(simpleChanges) {
|
66 | if (this.fullScreen && simpleChanges.visible) {
|
67 | if (simpleChanges.visible.currentValue) {
|
68 | DomHandler.addClass(document.body, 'p-overflow-hidden');
|
69 | this.zIndex = String(this.baseZIndex + ++DomHandler.zindex);
|
70 | }
|
71 | else {
|
72 | DomHandler.removeClass(document.body, 'p-overflow-hidden');
|
73 | }
|
74 | }
|
75 | }
|
76 | onMaskHide() {
|
77 | this.visible = false;
|
78 | this.visibleChange.emit(false);
|
79 | }
|
80 | onActiveItemChange(index) {
|
81 | if (this.activeIndex !== index) {
|
82 | this.activeIndex = index;
|
83 | this.activeIndexChange.emit(index);
|
84 | }
|
85 | }
|
86 | ngOnDestroy() {
|
87 | if (this.fullScreen) {
|
88 | DomHandler.removeClass(document.body, 'p-overflow-hidden');
|
89 | }
|
90 | }
|
91 | }
|
92 | Galleria.decorators = [
|
93 | { type: Component, args: [{
|
94 | selector: 'p-galleria',
|
95 | template: `
|
96 | <div *ngIf="fullScreen;else windowed">
|
97 | <div *ngIf="visible" #mask [ngClass]="{'p-galleria-mask p-component-overlay':true, 'p-galleria-visible': this.visible}" [class]="maskClass" [ngStyle]="{'zIndex':zIndex}">
|
98 | <p-galleriaContent [value]="value" [activeIndex]="activeIndex" (maskHide)="onMaskHide()" (activeItemChange)="onActiveItemChange($event)" [ngStyle]="containerStyle"></p-galleriaContent>
|
99 | </div>
|
100 | </div>
|
101 |
|
102 | <ng-template #windowed>
|
103 | <p-galleriaContent [value]="value" [activeIndex]="activeIndex" (activeItemChange)="onActiveItemChange($event)"></p-galleriaContent>
|
104 | </ng-template>
|
105 | `,
|
106 | changeDetection: ChangeDetectionStrategy.OnPush,
|
107 | encapsulation: ViewEncapsulation.None,
|
108 | 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}"]
|
109 | },] }
|
110 | ];
|
111 | Galleria.ctorParameters = () => [
|
112 | { type: ElementRef },
|
113 | { type: ChangeDetectorRef }
|
114 | ];
|
115 | Galleria.propDecorators = {
|
116 | activeIndex: [{ type: Input }],
|
117 | fullScreen: [{ type: Input }],
|
118 | id: [{ type: Input }],
|
119 | value: [{ type: Input }],
|
120 | numVisible: [{ type: Input }],
|
121 | responsiveOptions: [{ type: Input }],
|
122 | showItemNavigators: [{ type: Input }],
|
123 | showThumbnailNavigators: [{ type: Input }],
|
124 | showItemNavigatorsOnHover: [{ type: Input }],
|
125 | changeItemOnIndicatorHover: [{ type: Input }],
|
126 | circular: [{ type: Input }],
|
127 | autoPlay: [{ type: Input }],
|
128 | transitionInterval: [{ type: Input }],
|
129 | showThumbnails: [{ type: Input }],
|
130 | thumbnailsPosition: [{ type: Input }],
|
131 | verticalThumbnailViewPortHeight: [{ type: Input }],
|
132 | showIndicators: [{ type: Input }],
|
133 | showIndicatorsOnItem: [{ type: Input }],
|
134 | indicatorsPosition: [{ type: Input }],
|
135 | baseZIndex: [{ type: Input }],
|
136 | maskClass: [{ type: Input }],
|
137 | containerClass: [{ type: Input }],
|
138 | containerStyle: [{ type: Input }],
|
139 | mask: [{ type: ViewChild, args: ['mask', { static: false },] }],
|
140 | visible: [{ type: Input }],
|
141 | activeIndexChange: [{ type: Output }],
|
142 | visibleChange: [{ type: Output }],
|
143 | templates: [{ type: ContentChildren, args: [PrimeTemplate,] }]
|
144 | };
|
145 | class GalleriaContent {
|
146 | constructor(galleria, cd) {
|
147 | this.galleria = galleria;
|
148 | this.cd = cd;
|
149 | this.value = [];
|
150 | this.maskHide = new EventEmitter();
|
151 | this.activeItemChange = new EventEmitter();
|
152 | this.id = this.galleria.id || UniqueComponentId();
|
153 | this.slideShowActicve = false;
|
154 | this._activeIndex = 0;
|
155 | this.slideShowActive = true;
|
156 | }
|
157 | get activeIndex() {
|
158 | return this._activeIndex;
|
159 | }
|
160 | ;
|
161 | set activeIndex(activeIndex) {
|
162 | this._activeIndex = activeIndex;
|
163 | }
|
164 | galleriaClass() {
|
165 | const thumbnailsPosClass = this.galleria.showThumbnails && this.getPositionClass('p-galleria-thumbnails', this.galleria.thumbnailsPosition);
|
166 | const indicatorPosClass = this.galleria.showIndicators && this.getPositionClass('p-galleria-indicators', this.galleria.indicatorsPosition);
|
167 | return (this.galleria.containerClass ? this.galleria.containerClass + " " : '') + (thumbnailsPosClass ? thumbnailsPosClass + " " : '') + (indicatorPosClass ? indicatorPosClass + " " : '');
|
168 | }
|
169 | startSlideShow() {
|
170 | this.interval = setInterval(() => {
|
171 | let activeIndex = (this.galleria.circular && (this.value.length - 1) === this.activeIndex) ? 0 : (this.activeIndex + 1);
|
172 | this.onActiveIndexChange(activeIndex);
|
173 | this.activeIndex = activeIndex;
|
174 | }, this.galleria.transitionInterval);
|
175 | this.slideShowActive = true;
|
176 | }
|
177 | stopSlideShow() {
|
178 | if (this.interval) {
|
179 | clearInterval(this.interval);
|
180 | }
|
181 | this.slideShowActive = false;
|
182 | }
|
183 | getPositionClass(preClassName, position) {
|
184 | const positions = ['top', 'left', 'bottom', 'right'];
|
185 | const pos = positions.find(item => item === position);
|
186 | return pos ? `${preClassName}-${pos}` : '';
|
187 | }
|
188 | isVertical() {
|
189 | return this.galleria.thumbnailsPosition === 'left' || this.galleria.thumbnailsPosition === 'right';
|
190 | }
|
191 | onActiveIndexChange(index) {
|
192 | if (this.activeIndex !== index) {
|
193 | this.activeIndex = index;
|
194 | this.activeItemChange.emit(this.activeIndex);
|
195 | }
|
196 | }
|
197 | }
|
198 | GalleriaContent.decorators = [
|
199 | { type: Component, args: [{
|
200 | selector: 'p-galleriaContent',
|
201 | template: `
|
202 | <div [attr.id]="id" *ngIf="value && value.length > 0" [ngClass]="{'p-galleria p-component': true, 'p-galleria-fullscreen': this.galleria.fullScreen,
|
203 | 'p-galleria-indicator-onitem': this.galleria.showIndicatorsOnItem, 'p-galleria-item-nav-onhover': this.galleria.showItemNavigatorsOnHover && !this.galleria.fullScreen}"
|
204 | [ngStyle]="!galleria.fullScreen ? galleria.containerStyle : {}" [class]="galleriaClass()">
|
205 | <button *ngIf="galleria.fullScreen" type="button" class="p-galleria-close p-link" (click)="maskHide.emit()" pRipple>
|
206 | <span class="p-galleria-close-icon pi pi-times"></span>
|
207 | </button>
|
208 | <div *ngIf="galleria.templates && galleria.headerFacet" class="p-galleria-header">
|
209 | <p-galleriaItemSlot type="header" [templates]="galleria.templates"></p-galleriaItemSlot>
|
210 | </div>
|
211 | <div class="p-galleria-content">
|
212 | <p-galleriaItem [value]="value" [activeIndex]="activeIndex" [circular]="galleria.circular" [templates]="galleria.templates" (onActiveIndexChange)="onActiveIndexChange($event)"
|
213 | [showIndicators]="galleria.showIndicators" [changeItemOnIndicatorHover]="galleria.changeItemOnIndicatorHover" [indicatorFacet]="galleria.indicatorFacet"
|
214 | [captionFacet]="galleria.captionFacet" [showItemNavigators]="galleria.showItemNavigators" [autoPlay]="galleria.autoPlay" [slideShowActive]="slideShowActive"
|
215 | (startSlideShow)="startSlideShow()" (stopSlideShow)="stopSlideShow()"></p-galleriaItem>
|
216 |
|
217 | <p-galleriaThumbnails *ngIf="galleria.showThumbnails" [containerId]="id" [value]="value" (onActiveIndexChange)="onActiveIndexChange($event)" [activeIndex]="activeIndex" [templates]="galleria.templates"
|
218 | [numVisible]="galleria.numVisible" [responsiveOptions]="galleria.responsiveOptions" [circular]="galleria.circular"
|
219 | [isVertical]="isVertical()" [contentHeight]="galleria.verticalThumbnailViewPortHeight" [showThumbnailNavigators]="galleria.showThumbnailNavigators"
|
220 | [slideShowActive]="slideShowActive" (stopSlideShow)="stopSlideShow()"></p-galleriaThumbnails>
|
221 | </div>
|
222 | <div *ngIf="galleria.templates && galleria.footerFacet" class="p-galleria-footer">
|
223 | <p-galleriaItemSlot type="footer" [templates]="galleria.templates"></p-galleriaItemSlot>
|
224 | </div>
|
225 | </div>
|
226 | `,
|
227 | changeDetection: ChangeDetectionStrategy.OnPush
|
228 | },] }
|
229 | ];
|
230 | GalleriaContent.ctorParameters = () => [
|
231 | { type: Galleria },
|
232 | { type: ChangeDetectorRef }
|
233 | ];
|
234 | GalleriaContent.propDecorators = {
|
235 | activeIndex: [{ type: Input }],
|
236 | value: [{ type: Input }],
|
237 | maskHide: [{ type: Output }],
|
238 | activeItemChange: [{ type: Output }]
|
239 | };
|
240 | class GalleriaItemSlot {
|
241 | get item() {
|
242 | return this._item;
|
243 | }
|
244 | ;
|
245 | set item(item) {
|
246 | this._item = item;
|
247 | if (this.templates) {
|
248 | this.templates.forEach((item) => {
|
249 | if (item.getType() === this.type) {
|
250 | switch (this.type) {
|
251 | case 'item':
|
252 | case 'caption':
|
253 | case 'thumbnail':
|
254 | this.context = { $implicit: this.item };
|
255 | this.contentTemplate = item.template;
|
256 | break;
|
257 | }
|
258 | }
|
259 | });
|
260 | }
|
261 | }
|
262 | ngAfterContentInit() {
|
263 | this.templates.forEach((item) => {
|
264 | if (item.getType() === this.type) {
|
265 | switch (this.type) {
|
266 | case 'item':
|
267 | case 'caption':
|
268 | case 'thumbnail':
|
269 | this.context = { $implicit: this.item };
|
270 | this.contentTemplate = item.template;
|
271 | break;
|
272 | case 'indicator':
|
273 | this.context = { $implicit: this.index };
|
274 | this.contentTemplate = item.template;
|
275 | break;
|
276 | default:
|
277 | this.context = {};
|
278 | this.contentTemplate = item.template;
|
279 | break;
|
280 | }
|
281 | }
|
282 | });
|
283 | }
|
284 | }
|
285 | GalleriaItemSlot.decorators = [
|
286 | { type: Component, args: [{
|
287 | selector: 'p-galleriaItemSlot',
|
288 | template: `
|
289 | <ng-container *ngIf="contentTemplate">
|
290 | <ng-container *ngTemplateOutlet="contentTemplate; context: context"></ng-container>
|
291 | </ng-container>
|
292 | `,
|
293 | changeDetection: ChangeDetectionStrategy.OnPush
|
294 | },] }
|
295 | ];
|
296 | GalleriaItemSlot.propDecorators = {
|
297 | templates: [{ type: Input }],
|
298 | index: [{ type: Input }],
|
299 | item: [{ type: Input }],
|
300 | type: [{ type: Input }]
|
301 | };
|
302 | class GalleriaItem {
|
303 | constructor() {
|
304 | this.circular = false;
|
305 | this.showItemNavigators = false;
|
306 | this.showIndicators = true;
|
307 | this.slideShowActive = true;
|
308 | this.changeItemOnIndicatorHover = true;
|
309 | this.autoPlay = false;
|
310 | this.startSlideShow = new EventEmitter();
|
311 | this.stopSlideShow = new EventEmitter();
|
312 | this.onActiveIndexChange = new EventEmitter();
|
313 | this._activeIndex = 0;
|
314 | }
|
315 | get activeIndex() {
|
316 | return this._activeIndex;
|
317 | }
|
318 | ;
|
319 | set activeIndex(activeIndex) {
|
320 | this._activeIndex = activeIndex;
|
321 | this.activeItem = this.value[this._activeIndex];
|
322 | }
|
323 | ngOnInit() {
|
324 | if (this.autoPlay) {
|
325 | this.startSlideShow.emit();
|
326 | }
|
327 | }
|
328 | next() {
|
329 | let nextItemIndex = this.activeIndex + 1;
|
330 | let activeIndex = this.circular && this.value.length - 1 === this.activeIndex
|
331 | ? 0
|
332 | : nextItemIndex;
|
333 | this.onActiveIndexChange.emit(activeIndex);
|
334 | }
|
335 | prev() {
|
336 | let prevItemIndex = this.activeIndex !== 0 ? this.activeIndex - 1 : 0;
|
337 | let activeIndex = this.circular && this.activeIndex === 0
|
338 | ? this.value.length - 1
|
339 | : prevItemIndex;
|
340 | this.onActiveIndexChange.emit(activeIndex);
|
341 | }
|
342 | stopTheSlideShow() {
|
343 | if (this.slideShowActive && this.stopSlideShow) {
|
344 | this.stopSlideShow.emit();
|
345 | }
|
346 | }
|
347 | navForward(e) {
|
348 | this.stopTheSlideShow();
|
349 | this.next();
|
350 | if (e && e.cancelable) {
|
351 | e.preventDefault();
|
352 | }
|
353 | }
|
354 | navBackward(e) {
|
355 | this.stopTheSlideShow();
|
356 | this.prev();
|
357 | if (e && e.cancelable) {
|
358 | e.preventDefault();
|
359 | }
|
360 | }
|
361 | onIndicatorClick(index) {
|
362 | this.stopTheSlideShow();
|
363 | this.onActiveIndexChange.emit(index);
|
364 | }
|
365 | onIndicatorMouseEnter(index) {
|
366 | if (this.changeItemOnIndicatorHover) {
|
367 | this.stopTheSlideShow();
|
368 | this.onActiveIndexChange.emit(index);
|
369 | }
|
370 | }
|
371 | onIndicatorKeyDown(index) {
|
372 | this.stopTheSlideShow();
|
373 | this.onActiveIndexChange.emit(index);
|
374 | }
|
375 | isNavForwardDisabled() {
|
376 | return !this.circular && this.activeIndex === (this.value.length - 1);
|
377 | }
|
378 | isNavBackwardDisabled() {
|
379 | return !this.circular && this.activeIndex === 0;
|
380 | }
|
381 | isIndicatorItemActive(index) {
|
382 | return this.activeIndex === index;
|
383 | }
|
384 | }
|
385 | GalleriaItem.decorators = [
|
386 | { type: Component, args: [{
|
387 | selector: 'p-galleriaItem',
|
388 | template: `
|
389 | <div class="p-galleria-item-wrapper">
|
390 | <div class="p-galleria-item-container">
|
391 | <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>
|
392 | <span class="p-galleria-item-prev-icon pi pi-chevron-left"></span>
|
393 | </button>
|
394 | <p-galleriaItemSlot type="item" [item]="activeItem" [templates]="templates" class="p-galleria-item"></p-galleriaItemSlot>
|
395 | <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>
|
396 | <span class="p-galleria-item-next-icon pi pi-chevron-right"></span>
|
397 | </button>
|
398 | <div class="p-galleria-caption" *ngIf="captionFacet">
|
399 | <p-galleriaItemSlot type="caption" [item]="activeItem" [templates]="templates"></p-galleriaItemSlot>
|
400 | </div>
|
401 | </div>
|
402 | <ul *ngIf="showIndicators" class="p-galleria-indicators p-reset">
|
403 | <li *ngFor="let item of value; let index = index;" tabindex="0"
|
404 | (click)="onIndicatorClick(index)" (mouseenter)="onIndicatorMouseEnter(index)" (keydown.enter)="onIndicatorKeyDown(index)"
|
405 | [ngClass]="{'p-galleria-indicator': true,'p-highlight': isIndicatorItemActive(index)}">
|
406 | <button type="button" tabIndex="-1" class="p-link" *ngIf="!indicatorFacet">
|
407 | </button>
|
408 | <p-galleriaItemSlot type="indicator" [index]="index" [templates]="templates"></p-galleriaItemSlot>
|
409 | </li>
|
410 | </ul>
|
411 | </div>
|
412 | `,
|
413 | changeDetection: ChangeDetectionStrategy.OnPush
|
414 | },] }
|
415 | ];
|
416 | GalleriaItem.propDecorators = {
|
417 | circular: [{ type: Input }],
|
418 | value: [{ type: Input }],
|
419 | showItemNavigators: [{ type: Input }],
|
420 | showIndicators: [{ type: Input }],
|
421 | slideShowActive: [{ type: Input }],
|
422 | changeItemOnIndicatorHover: [{ type: Input }],
|
423 | autoPlay: [{ type: Input }],
|
424 | templates: [{ type: Input }],
|
425 | indicatorFacet: [{ type: Input }],
|
426 | captionFacet: [{ type: Input }],
|
427 | startSlideShow: [{ type: Output }],
|
428 | stopSlideShow: [{ type: Output }],
|
429 | onActiveIndexChange: [{ type: Output }],
|
430 | activeIndex: [{ type: Input }]
|
431 | };
|
432 | class GalleriaThumbnails {
|
433 | constructor() {
|
434 | this.isVertical = false;
|
435 | this.slideShowActive = false;
|
436 | this.circular = false;
|
437 | this.contentHeight = "300px";
|
438 | this.showThumbnailNavigators = true;
|
439 | this.onActiveIndexChange = new EventEmitter();
|
440 | this.stopSlideShow = new EventEmitter();
|
441 | this.startPos = null;
|
442 | this.thumbnailsStyle = null;
|
443 | this.sortedResponsiveOptions = null;
|
444 | this.totalShiftedItems = 0;
|
445 | this.page = 0;
|
446 | this._numVisible = 0;
|
447 | this.d_numVisible = 0;
|
448 | this._oldNumVisible = 0;
|
449 | this._activeIndex = 0;
|
450 | this._oldactiveIndex = 0;
|
451 | }
|
452 | get numVisible() {
|
453 | return this._numVisible;
|
454 | }
|
455 | ;
|
456 | set numVisible(numVisible) {
|
457 | this._numVisible = numVisible;
|
458 | this._oldNumVisible = this.d_numVisible;
|
459 | this.d_numVisible = numVisible;
|
460 | }
|
461 | get activeIndex() {
|
462 | return this._activeIndex;
|
463 | }
|
464 | ;
|
465 | set activeIndex(activeIndex) {
|
466 | this._oldactiveIndex = this._activeIndex;
|
467 | this._activeIndex = activeIndex;
|
468 | }
|
469 | ngOnInit() {
|
470 | this.createStyle();
|
471 | this.calculatePosition();
|
472 | if (this.responsiveOptions) {
|
473 | this.bindDocumentListeners();
|
474 | }
|
475 | }
|
476 | ngAfterContentChecked() {
|
477 | let totalShiftedItems = this.totalShiftedItems;
|
478 | if ((this._oldNumVisible !== this.d_numVisible || this._oldactiveIndex !== this._activeIndex) && this.itemsContainer) {
|
479 | if (this._activeIndex <= this.getMedianItemIndex()) {
|
480 | totalShiftedItems = 0;
|
481 | }
|
482 | else if (this.value.length - this.d_numVisible + this.getMedianItemIndex() < this._activeIndex) {
|
483 | totalShiftedItems = this.d_numVisible - this.value.length;
|
484 | }
|
485 | else if (this.value.length - this.d_numVisible < this._activeIndex && this.d_numVisible % 2 === 0) {
|
486 | totalShiftedItems = (this._activeIndex * -1) + this.getMedianItemIndex() + 1;
|
487 | }
|
488 | else {
|
489 | totalShiftedItems = (this._activeIndex * -1) + this.getMedianItemIndex();
|
490 | }
|
491 | if (totalShiftedItems !== this.totalShiftedItems) {
|
492 | this.totalShiftedItems = totalShiftedItems;
|
493 | }
|
494 | if (this.itemsContainer && this.itemsContainer.nativeElement) {
|
495 | this.itemsContainer.nativeElement.style.transform = this.isVertical ? `translate3d(0, ${totalShiftedItems * (100 / this.d_numVisible)}%, 0)` : `translate3d(${totalShiftedItems * (100 / this.d_numVisible)}%, 0, 0)`;
|
496 | }
|
497 | if (this._oldactiveIndex !== this._activeIndex) {
|
498 | DomHandler.removeClass(this.itemsContainer.nativeElement, 'p-items-hidden');
|
499 | this.itemsContainer.nativeElement.style.transition = 'transform 500ms ease 0s';
|
500 | }
|
501 | this._oldactiveIndex = this._activeIndex;
|
502 | this._oldNumVisible = this.d_numVisible;
|
503 | }
|
504 | }
|
505 | createStyle() {
|
506 | if (!this.thumbnailsStyle) {
|
507 | this.thumbnailsStyle = document.createElement('style');
|
508 | this.thumbnailsStyle.type = 'text/css';
|
509 | document.body.appendChild(this.thumbnailsStyle);
|
510 | }
|
511 | let innerHTML = `
|
512 | #${this.containerId} .p-galleria-thumbnail-item {
|
513 | flex: 1 0 ${(100 / this.d_numVisible)}%
|
514 | }
|
515 | `;
|
516 | if (this.responsiveOptions) {
|
517 | this.sortedResponsiveOptions = [...this.responsiveOptions];
|
518 | this.sortedResponsiveOptions.sort((data1, data2) => {
|
519 | const value1 = data1.breakpoint;
|
520 | const value2 = data2.breakpoint;
|
521 | let result = null;
|
522 | if (value1 == null && value2 != null)
|
523 | result = -1;
|
524 | else if (value1 != null && value2 == null)
|
525 | result = 1;
|
526 | else if (value1 == null && value2 == null)
|
527 | result = 0;
|
528 | else if (typeof value1 === 'string' && typeof value2 === 'string')
|
529 | result = value1.localeCompare(value2, undefined, { numeric: true });
|
530 | else
|
531 | result = (value1 < value2) ? -1 : (value1 > value2) ? 1 : 0;
|
532 | return -1 * result;
|
533 | });
|
534 | for (let i = 0; i < this.sortedResponsiveOptions.length; i++) {
|
535 | let res = this.sortedResponsiveOptions[i];
|
536 | innerHTML += `
|
537 | @media screen and (max-width: ${res.breakpoint}) {
|
538 | #${this.containerId} .p-galleria-thumbnail-item {
|
539 | flex: 1 0 ${(100 / res.numVisible)}%
|
540 | }
|
541 | }
|
542 | `;
|
543 | }
|
544 | }
|
545 | this.thumbnailsStyle.innerHTML = innerHTML;
|
546 | }
|
547 | calculatePosition() {
|
548 | if (this.itemsContainer && this.sortedResponsiveOptions) {
|
549 | let windowWidth = window.innerWidth;
|
550 | let matchedResponsiveData = {
|
551 | numVisible: this._numVisible
|
552 | };
|
553 | for (let i = 0; i < this.sortedResponsiveOptions.length; i++) {
|
554 | let res = this.sortedResponsiveOptions[i];
|
555 | if (parseInt(res.breakpoint, 10) >= windowWidth) {
|
556 | matchedResponsiveData = res;
|
557 | }
|
558 | }
|
559 | if (this.d_numVisible !== matchedResponsiveData.numVisible) {
|
560 | this.d_numVisible = matchedResponsiveData.numVisible;
|
561 | }
|
562 | }
|
563 | }
|
564 | getTabIndex(index) {
|
565 | return this.isItemActive(index) ? 0 : null;
|
566 | }
|
567 | navForward(e) {
|
568 | this.stopTheSlideShow();
|
569 | let nextItemIndex = this._activeIndex + 1;
|
570 | if (nextItemIndex + this.totalShiftedItems > this.getMedianItemIndex() && ((-1 * this.totalShiftedItems) < this.getTotalPageNumber() - 1 || this.circular)) {
|
571 | this.step(-1);
|
572 | }
|
573 | let activeIndex = this.circular && (this.value.length - 1) === this._activeIndex ? 0 : nextItemIndex;
|
574 | this.onActiveIndexChange.emit(activeIndex);
|
575 | if (e.cancelable) {
|
576 | e.preventDefault();
|
577 | }
|
578 | }
|
579 | navBackward(e) {
|
580 | this.stopTheSlideShow();
|
581 | let prevItemIndex = this._activeIndex !== 0 ? this._activeIndex - 1 : 0;
|
582 | let diff = prevItemIndex + this.totalShiftedItems;
|
583 | if ((this.d_numVisible - diff - 1) > this.getMedianItemIndex() && ((-1 * this.totalShiftedItems) !== 0 || this.circular)) {
|
584 | this.step(1);
|
585 | }
|
586 | let activeIndex = this.circular && this._activeIndex === 0 ? this.value.length - 1 : prevItemIndex;
|
587 | this.onActiveIndexChange.emit(activeIndex);
|
588 | if (e.cancelable) {
|
589 | e.preventDefault();
|
590 | }
|
591 | }
|
592 | onItemClick(index) {
|
593 | this.stopTheSlideShow();
|
594 | let selectedItemIndex = index;
|
595 | if (selectedItemIndex !== this._activeIndex) {
|
596 | const diff = selectedItemIndex + this.totalShiftedItems;
|
597 | let dir = 0;
|
598 | if (selectedItemIndex < this._activeIndex) {
|
599 | dir = (this.d_numVisible - diff - 1) - this.getMedianItemIndex();
|
600 | if (dir > 0 && (-1 * this.totalShiftedItems) !== 0) {
|
601 | this.step(dir);
|
602 | }
|
603 | }
|
604 | else {
|
605 | dir = this.getMedianItemIndex() - diff;
|
606 | if (dir < 0 && (-1 * this.totalShiftedItems) < this.getTotalPageNumber() - 1) {
|
607 | this.step(dir);
|
608 | }
|
609 | }
|
610 | this.activeIndex = selectedItemIndex;
|
611 | this.onActiveIndexChange.emit(this.activeIndex);
|
612 | }
|
613 | }
|
614 | step(dir) {
|
615 | let totalShiftedItems = this.totalShiftedItems + dir;
|
616 | if (dir < 0 && (-1 * totalShiftedItems) + this.d_numVisible > (this.value.length - 1)) {
|
617 | totalShiftedItems = this.d_numVisible - this.value.length;
|
618 | }
|
619 | else if (dir > 0 && totalShiftedItems > 0) {
|
620 | totalShiftedItems = 0;
|
621 | }
|
622 | if (this.circular) {
|
623 | if (dir < 0 && this.value.length - 1 === this._activeIndex) {
|
624 | totalShiftedItems = 0;
|
625 | }
|
626 | else if (dir > 0 && this._activeIndex === 0) {
|
627 | totalShiftedItems = this.d_numVisible - this.value.length;
|
628 | }
|
629 | }
|
630 | if (this.itemsContainer) {
|
631 | DomHandler.removeClass(this.itemsContainer.nativeElement, 'p-items-hidden');
|
632 | this.itemsContainer.nativeElement.style.transform = this.isVertical ? `translate3d(0, ${totalShiftedItems * (100 / this.d_numVisible)}%, 0)` : `translate3d(${totalShiftedItems * (100 / this.d_numVisible)}%, 0, 0)`;
|
633 | this.itemsContainer.nativeElement.style.transition = 'transform 500ms ease 0s';
|
634 | }
|
635 | this.totalShiftedItems = totalShiftedItems;
|
636 | }
|
637 | stopTheSlideShow() {
|
638 | if (this.slideShowActive && this.stopSlideShow) {
|
639 | this.stopSlideShow.emit();
|
640 | }
|
641 | }
|
642 | changePageOnTouch(e, diff) {
|
643 | if (diff < 0) { // left
|
644 | this.navForward(e);
|
645 | }
|
646 | else { // right
|
647 | this.navBackward(e);
|
648 | }
|
649 | }
|
650 | getTotalPageNumber() {
|
651 | return this.value.length > this.d_numVisible ? (this.value.length - this.d_numVisible) + 1 : 0;
|
652 | }
|
653 | getMedianItemIndex() {
|
654 | let index = Math.floor(this.d_numVisible / 2);
|
655 | return (this.d_numVisible % 2) ? index : index - 1;
|
656 | }
|
657 | onTransitionEnd() {
|
658 | if (this.itemsContainer && this.itemsContainer.nativeElement) {
|
659 | DomHandler.addClass(this.itemsContainer.nativeElement, 'p-items-hidden');
|
660 | this.itemsContainer.nativeElement.style.transition = '';
|
661 | }
|
662 | }
|
663 | onTouchEnd(e) {
|
664 | let touchobj = e.changedTouches[0];
|
665 | if (this.isVertical) {
|
666 | this.changePageOnTouch(e, (touchobj.pageY - this.startPos.y));
|
667 | }
|
668 | else {
|
669 | this.changePageOnTouch(e, (touchobj.pageX - this.startPos.x));
|
670 | }
|
671 | }
|
672 | onTouchMove(e) {
|
673 | if (e.cancelable) {
|
674 | e.preventDefault();
|
675 | }
|
676 | }
|
677 | onTouchStart(e) {
|
678 | let touchobj = e.changedTouches[0];
|
679 | this.startPos = {
|
680 | x: touchobj.pageX,
|
681 | y: touchobj.pageY
|
682 | };
|
683 | }
|
684 | isNavBackwardDisabled() {
|
685 | return (!this.circular && this._activeIndex === 0) || (this.value.length <= this.d_numVisible);
|
686 | }
|
687 | isNavForwardDisabled() {
|
688 | return (!this.circular && this._activeIndex === (this.value.length - 1)) || (this.value.length <= this.d_numVisible);
|
689 | }
|
690 | firstItemAciveIndex() {
|
691 | return this.totalShiftedItems * -1;
|
692 | }
|
693 | lastItemActiveIndex() {
|
694 | return this.firstItemAciveIndex() + this.d_numVisible - 1;
|
695 | }
|
696 | isItemActive(index) {
|
697 | return this.firstItemAciveIndex() <= index && this.lastItemActiveIndex() >= index;
|
698 | }
|
699 | bindDocumentListeners() {
|
700 | if (!this.documentResizeListener) {
|
701 | this.documentResizeListener = () => {
|
702 | this.calculatePosition();
|
703 | };
|
704 | window.addEventListener('resize', this.documentResizeListener);
|
705 | }
|
706 | }
|
707 | unbindDocumentListeners() {
|
708 | if (this.documentResizeListener) {
|
709 | window.removeEventListener('resize', this.documentResizeListener);
|
710 | this.documentResizeListener = null;
|
711 | }
|
712 | }
|
713 | ngOnDestroy() {
|
714 | if (this.responsiveOptions) {
|
715 | this.unbindDocumentListeners();
|
716 | }
|
717 | if (this.thumbnailsStyle) {
|
718 | this.thumbnailsStyle.parentNode.removeChild(this.thumbnailsStyle);
|
719 | }
|
720 | }
|
721 | }
|
722 | GalleriaThumbnails.decorators = [
|
723 | { type: Component, args: [{
|
724 | selector: 'p-galleriaThumbnails',
|
725 | template: `
|
726 | <div class="p-galleria-thumbnail-wrapper">
|
727 | <div class="p-galleria-thumbnail-container">
|
728 | <button *ngIf="showThumbnailNavigators" type="button" [ngClass]="{'p-galleria-thumbnail-prev p-link': true, 'p-disabled': this.isNavBackwardDisabled()}" (click)="navBackward($event)" [disabled]="isNavBackwardDisabled()" pRipple>
|
729 | <span [ngClass]="{'p-galleria-thumbnail-prev-icon pi': true, 'pi-chevron-left': !this.isVertical, 'pi-chevron-up': this.isVertical}"></span>
|
730 | </button>
|
731 | <div class="p-galleria-thumbnail-items-container" [ngStyle]="{'height': isVertical ? contentHeight : ''}">
|
732 | <div #itemsContainer class="p-galleria-thumbnail-items" (transitionend)="onTransitionEnd()"
|
733 | (touchstart)="onTouchStart($event)" (touchmove)="onTouchMove($event)" (touchend)="onTouchEnd($event)">
|
734 | <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),
|
735 | 'p-galleria-thumbnail-item-start': firstItemAciveIndex() === index, 'p-galleria-thumbnail-item-end': lastItemActiveIndex() === index }">
|
736 | <div class="p-galleria-thumbnail-item-content" [attr.tabindex]="getTabIndex(index)" (click)="onItemClick(index)" (keydown.enter)="onItemClick(index)">
|
737 | <p-galleriaItemSlot type="thumbnail" [item]="item" [templates]="templates"></p-galleriaItemSlot>
|
738 | </div>
|
739 | </div>
|
740 | </div>
|
741 | </div>
|
742 | <button *ngIf="showThumbnailNavigators" type="button" [ngClass]="{'p-galleria-thumbnail-next p-link': true, 'p-disabled': this.isNavForwardDisabled()}" (click)="navForward($event)" [disabled]="isNavForwardDisabled()" pRipple>
|
743 | <span [ngClass]="{'p-galleria-thumbnail-next-icon pi': true, 'pi-chevron-right': !this.isVertical, 'pi-chevron-down': this.isVertical}"></span>
|
744 | </button>
|
745 | </div>
|
746 | </div>
|
747 | `,
|
748 | changeDetection: ChangeDetectionStrategy.OnPush
|
749 | },] }
|
750 | ];
|
751 | GalleriaThumbnails.propDecorators = {
|
752 | containerId: [{ type: Input }],
|
753 | value: [{ type: Input }],
|
754 | isVertical: [{ type: Input }],
|
755 | slideShowActive: [{ type: Input }],
|
756 | circular: [{ type: Input }],
|
757 | responsiveOptions: [{ type: Input }],
|
758 | contentHeight: [{ type: Input }],
|
759 | showThumbnailNavigators: [{ type: Input }],
|
760 | templates: [{ type: Input }],
|
761 | onActiveIndexChange: [{ type: Output }],
|
762 | stopSlideShow: [{ type: Output }],
|
763 | itemsContainer: [{ type: ViewChild, args: ['itemsContainer',] }],
|
764 | numVisible: [{ type: Input }],
|
765 | activeIndex: [{ type: Input }]
|
766 | };
|
767 | class GalleriaModule {
|
768 | }
|
769 | GalleriaModule.decorators = [
|
770 | { type: NgModule, args: [{
|
771 | imports: [CommonModule, SharedModule, RippleModule],
|
772 | exports: [CommonModule, Galleria, GalleriaContent, GalleriaItemSlot, GalleriaItem, GalleriaThumbnails, SharedModule],
|
773 | declarations: [Galleria, GalleriaContent, GalleriaItemSlot, GalleriaItem, GalleriaThumbnails]
|
774 | },] }
|
775 | ];
|
776 |
|
777 | /**
|
778 | * Generated bundle index. Do not edit.
|
779 | */
|
780 |
|
781 | export { Galleria, GalleriaContent, GalleriaItem, GalleriaItemSlot, GalleriaModule, GalleriaThumbnails };
|
782 | //# sourceMappingURL=primeng-galleria.js.map
|
783 |
|
\ | No newline at end of file |