primeng/bundles/primeng-galleria.umd.min.js

[](https://opensource.org/licenses/MIT) [](https://badge.fury.io/js/primeng) [![Build Status](https://travis-ci.org/primefaces/primeng.

!function(t,e){"object"==typeof exports&&"undefined"!=typeof module?e(exports,require("@angular/core"),require("@angular/common"),require("primeng/dom")):"function"==typeof define&&define.amd?define("primeng/galleria",["exports","@angular/core","@angular/common","primeng/dom"],e):e(((t=t||self).primeng=t.primeng||{},t.primeng.galleria={}),t.ng.core,t.ng.common,t.primeng.dom)}(this,(function(t,e,i,n){"use strict";var a=this&&this.__decorate||function(t,e,i,n){var a,s=arguments.length,r=s<3?e:null===n?n=Object.getOwnPropertyDescriptor(e,i):n;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)r=Reflect.decorate(t,e,i,n);else for(var l=t.length-1;l>=0;l--)(a=t[l])&&(r=(s<3?a(r):s>3?a(e,i,r):a(e,i))||r);return s>3&&r&&Object.defineProperty(e,i,r),r},s=function(){function t(t){this.el=t,this.panelWidth=600,this.panelHeight=400,this.frameWidth=60,this.frameHeight=40,this.activeIndex=0,this.showFilmstrip=!0,this.autoPlay=!0,this.transitionInterval=4e3,this.showCaption=!0,this.effectDuration=500,this.onImageClicked=new e.EventEmitter,this.onImageChange=new e.EventEmitter,this.stripLeft=0}return t.prototype.ngAfterViewChecked=function(){var t=this;this.imagesChanged&&(this.stopSlideshow(),Promise.resolve(null).then((function(){t.render(),t.imagesChanged=!1})))},Object.defineProperty(t.prototype,"images",{get:function(){return this._images},set:function(t){this._images=t,this.imagesChanged=!0,this.initialized&&(this.activeIndex=0)},enumerable:!0,configurable:!0}),t.prototype.ngAfterViewInit=function(){this.container=this.el.nativeElement.children[0],this.panelWrapper=n.DomHandler.findSingle(this.el.nativeElement,"ul.ui-galleria-panel-wrapper"),this.initialized=!0,this.showFilmstrip&&(this.stripWrapper=n.DomHandler.findSingle(this.container,"div.ui-galleria-filmstrip-wrapper"),this.strip=n.DomHandler.findSingle(this.stripWrapper,"ul.ui-galleria-filmstrip")),this.images&&this.images.length&&this.render()},t.prototype.render=function(){this.panels=n.DomHandler.find(this.panelWrapper,"li.ui-galleria-panel"),this.showFilmstrip&&(this.frames=n.DomHandler.find(this.strip,"li.ui-galleria-frame"),this.stripWrapper.style.width=n.DomHandler.width(this.panelWrapper)-50+"px",this.stripWrapper.style.height=this.frameHeight+"px"),this.showCaption&&(this.caption=n.DomHandler.findSingle(this.container,"div.ui-galleria-caption"),this.caption.style.bottom=this.showFilmstrip?n.DomHandler.getOuterHeight(this.stripWrapper,!0)+"px":"0px",this.caption.style.width=n.DomHandler.width(this.panelWrapper)+"px"),this.autoPlay&&this.startSlideshow(),this.container.style.visibility="visible"},t.prototype.startSlideshow=function(){var t=this;this.interval=setInterval((function(){t.next()}),this.transitionInterval),this.slideshowActive=!0},t.prototype.stopSlideshow=function(){this.interval&&clearInterval(this.interval),this.slideshowActive=!1},t.prototype.clickNavRight=function(){this.slideshowActive&&this.stopSlideshow(),this.next()},t.prototype.clickNavLeft=function(){this.slideshowActive&&this.stopSlideshow(),this.prev()},t.prototype.frameClick=function(t){this.slideshowActive&&this.stopSlideshow(),this.select(n.DomHandler.index(t),!1)},t.prototype.prev=function(){0!==this.activeIndex&&this.select(this.activeIndex-1,!0)},t.prototype.next=function(){this.activeIndex!==this.panels.length-1?this.select(this.activeIndex+1,!0):(this.select(0,!1),this.stripLeft=0)},t.prototype.select=function(t,e){if(t!==this.activeIndex){this.panels[this.activeIndex];var i=this.panels[t];if(n.DomHandler.fadeIn(i,this.effectDuration),this.showFilmstrip){this.frames[this.activeIndex];var a=this.frames[t];if(void 0===e||!0===e){var s=a.offsetLeft,r=this.frameWidth+parseInt(getComputedStyle(a)["margin-right"],10),l=s+this.strip.offsetLeft;l+this.frameWidth>n.DomHandler.width(this.stripWrapper)?this.stripLeft-=r:l<0&&(this.stripLeft+=r)}}this.activeIndex=t,this.onImageChange.emit({index:t})}},t.prototype.clickImage=function(t,e,i){this.onImageClicked.emit({originalEvent:t,image:e,index:i})},t.prototype.ngOnDestroy=function(){this.stopSlideshow()},t.ctorParameters=function(){return[{type:e.ElementRef}]},a([e.Input()],t.prototype,"style",void 0),a([e.Input()],t.prototype,"styleClass",void 0),a([e.Input()],t.prototype,"panelWidth",void 0),a([e.Input()],t.prototype,"panelHeight",void 0),a([e.Input()],t.prototype,"frameWidth",void 0),a([e.Input()],t.prototype,"frameHeight",void 0),a([e.Input()],t.prototype,"activeIndex",void 0),a([e.Input()],t.prototype,"showFilmstrip",void 0),a([e.Input()],t.prototype,"autoPlay",void 0),a([e.Input()],t.prototype,"transitionInterval",void 0),a([e.Input()],t.prototype,"showCaption",void 0),a([e.Input()],t.prototype,"effectDuration",void 0),a([e.Output()],t.prototype,"onImageClicked",void 0),a([e.Output()],t.prototype,"onImageChange",void 0),a([e.Input()],t.prototype,"images",null),t=a([e.Component({selector:"p-galleria",template:'\n        <div [ngClass]="{\'ui-galleria ui-widget ui-widget-content ui-corner-all\':true}" [ngStyle]="style" [class]="styleClass" [style.width.px]="panelWidth">\n            <ul class="ui-galleria-panel-wrapper" [style.width.px]="panelWidth" [style.height.px]="panelHeight">\n                <li *ngFor="let image of images;let i=index" class="ui-galleria-panel" [ngClass]="{\'ui-helper-hidden\':i!=activeIndex}"\n                    [style.width.px]="panelWidth" [style.height.px]="panelHeight" (click)="clickImage($event,image,i)">\n                    <img class="ui-panel-images" [src]="image.source" [alt]="image.alt" [title]="image.title"/>\n                </li>\n            </ul>\n            <div [ngClass]="{\'ui-galleria-filmstrip-wrapper\':true}" *ngIf="showFilmstrip">\n                <ul class="ui-galleria-filmstrip" style="transition:left 1s" [style.left.px]="stripLeft">\n                    <li #frame *ngFor="let image of images;let i=index" [ngClass]="{\'ui-galleria-frame-active\':i==activeIndex}" class="ui-galleria-frame" (click)="frameClick(frame)"\n                        [style.width.px]="frameWidth" [style.height.px]="frameHeight" [style.transition]="\'opacity 0.75s ease\'">\n                        <div class="ui-galleria-frame-content">\n                            <img [src]="image.source" [alt]="image.alt" [title]="image.title" class="ui-galleria-frame-image"\n                                [style.width.px]="frameWidth" [style.height.px]="frameHeight">\n                        </div>\n                    </li>\n                </ul>\n            </div>\n            <div class="ui-galleria-nav-prev pi pi-fw pi-chevron-left" (click)="clickNavLeft()" [style.bottom.px]="frameHeight/2" *ngIf="activeIndex !== 0"></div>\n            <div class="ui-galleria-nav-next pi pi-fw pi-chevron-right" (click)="clickNavRight()" [style.bottom.px]="frameHeight/2"></div>\n            <div class="ui-galleria-caption" *ngIf="showCaption&&images" style="display:block">\n                <h4>{{images[activeIndex]?.title}}</h4><p>{{images[activeIndex]?.alt}}</p>\n            </div>\n        </div>\n    ',changeDetection:e.ChangeDetectionStrategy.Default})],t)}(),r=function(){function t(){}return t=a([e.NgModule({imports:[i.CommonModule],exports:[s],declarations:[s]})],t)}();t.Galleria=s,t.GalleriaModule=r,Object.defineProperty(t,"__esModule",{value:!0})}));
//# sourceMappingURL=primeng-galleria.umd.min.js.map