angular-image-viewer/bundles/angular-image-viewer.umd.min.js

This project was generated with [Angular CLI](https://github.com/angular/angular-cli) version 1.6.3.

!function(e,i){"object"==typeof exports&&"undefined"!=typeof module?i(exports,require("@angular/core"),require("lodash"),require("@angular/platform-browser")):"function"==typeof define&&define.amd?define(["exports","@angular/core","lodash","@angular/platform-browser"],i):i(e["angular-image-viewer"]={},e.ng.core,e.lodash,e.ng.platformBrowser)}(this,function(e,i,t,a){"use strict";var n=function(){function e(){this.selectedIndex=0}return e.prototype.ngOnInit=function(){this.getWinSize(),this.imagesData=this.getImagesData(this.images),this.expanderBgColor||(this.expanderBgColor="#505558"),this.expanderTextColor||(this.expanderTextColor="#fff")},e.prototype.getImagesData=function(e){var i=[];return t.forEach(e,function(e){console.log(e),i.push({thumbnailUrl:e.thumbnailUrl,previewUrl:e.reviewUrl,expanderHeight:"0px",height:"220px"})}),i},e.prototype.openImageExpander=function(e){this.selectedIndex=e,t.forEach(this.imagesData,function(i,t){t===e?(i.height="860px",i.expanderHeight="640px"):(i.height="220px",i.expanderHeight="0px")})},e.prototype.closeImageExpander=function(e){this.selectedIndex=e,t.forEach(this.imagesData,function(i,t){t===e&&(i.height="220px",i.expanderHeight="0px")})},e.prototype.plusSlides=function(e){this.selectedIndex+=e,this.openImageExpander(this.selectedIndex)},e.prototype.showPrevButton=function(){return 0!==this.selectedIndex},e.prototype.showNextButton=function(){return this.selectedIndex!==this.images.length-1},e.prototype.getWinSize=function(){this.windowSize={width:window.screen.width,height:window.screen.height}},e}();n.decorators=[{type:i.Component,args:[{moduleId:module.id,selector:"app-image-viewer",template:'<div *ngIf="imagesData.length" id="image-grid" class="image-grid">\n  <div class="row no-gutters">\n    <div *ngFor="let image of imagesData; let i = index"\n         [ngClass]="{\'image-expanded\': image.height === \'860px\'}"\n         [ngStyle]="{\'height\': image.height, \'width\': \'320px\', \'outline\': \'none\'}"\n         tabindex="{{i}}">\n      <div class="col image-thumbnail">\n          <span class="helper"></span>\n          <a (keyup.enter)="openImageExpander(i)" (click)="openImageExpander(i)" ><img src="{{image.thumbnailUrl}}" alt="img02"/></a>\n      </div>\n      <div class="image-expander" [ngStyle]="{\'height\': image.expanderHeight, \'background-color\': expanderBgColor, \'color\': expanderTextColor}" >\n        <div class="image-expander-inner" [ngStyle]="{\'display\': \'flex\'}">\n          <span class="image-position" [ngStyle]="{\'color\': expanderTextColor}">{{i+1}}/{{imagesData.length}}</span>\n          <span class="image-close" [ngStyle]="{\'color\': expanderTextColor}" (click)="closeImageExpander(i)"></span>\n          <div class="image-fullimg">\n            <img src="{{image.previewUrl}}">\n          </div>\n          <div class="image-details" [ngStyle]="{\'color\': expanderTextColor}">\n            <ng-container *ngTemplateOutlet="parentTemplate; context: { $implicit: image }">\n            </ng-container>\n          </div>\n          <a class="prev" (click)="plusSlides(-1)" *ngIf="showPrevButton()">\n            <i class="fas fa-chevron-left"></i>\n          </a>\n          <a class="next" (click)="plusSlides(1)" *ngIf="showNextButton()">\n            <i class="fas fa-chevron-right"></i>\n          </a>\n        </div>\n      </div>\n    </div>\n  </div>\n</div>',styles:[".image-grid{list-style:none;padding:20px 0;margin:0 auto;width:100%}.image-grid div{display:inline-block;vertical-align:top;-webkit-transition:height 350ms ease;transition:height 350ms ease}.image-thumbnail{height:210px;max-width:310px;white-space:nowrap;text-align:center;display:inline-block;border:1px solid #eee;margin:5px;padding:0}.image-thumbnail:hover{-webkit-box-shadow:0 4px 8px 0 rgba(0,0,0,.2),0 6px 20px 0 rgba(0,0,0,.19);box-shadow:0 4px 8px 0 rgba(0,0,0,.2),0 6px 20px 0 rgba(0,0,0,.19);border:1px solid #ff8200;cursor:pointer}img{background:#3a6f9a;vertical-align:middle;max-height:200px;max-width:300px}.helper{display:inline-block;height:100%;vertical-align:middle}.image-grid div>a,.image-grid div>a img{border:none;outline:0}.image-grid .image-expanded .image-thumbnail>a::after{top:auto;border:15px solid transparent;content:\" \";height:0;width:0;display:block;position:absolute;pointer-events:none;border-bottom-color:#505558;left:50%;margin:-20px 0 0 -15px}.image-expander{position:absolute;top:auto;left:0;width:100%;text-align:left;height:0;overflow:hidden;-webkit-transition:height 350ms ease;transition:height 350ms ease}.image-expander-inner{padding:50px 30px;height:100%}.image-close{position:absolute;width:40px;height:40px;top:20px;right:20px;cursor:pointer}.image-position{position:absolute;width:40px;height:40px;top:20px;left:20px;cursor:pointer;font-size:24px;color:#fff}.image-close::after,.image-close::before{content:'';position:absolute;width:100%;top:50%;height:1px;background:#fff;-webkit-transform:rotate(45deg);transform:rotate(45deg)}.image-close::after{-webkit-transform:rotate(-45deg);transform:rotate(-45deg)}.image-close:hover::after,.image-close:hover::before{background:#ff8200}.image-details,.image-fullimg{width:50%;float:left;height:100%;overflow:hidden;position:relative;word-wrap:break-word}.image-details{padding:0 40px 0 20px;color:#fff}.image-fullimg{text-align:center}.image-fullimg img{display:inline-block;max-height:100%;max-width:100%}.image-details h3{font-weight:300;font-size:52px;padding:40px 0 10px;margin-bottom:10px}.image-details p{font-weight:400;font-size:16px;line-height:22px;color:#fff}.image-details a{font-weight:700;font-size:16px;color:#ff8200;text-transform:uppercase;letter-spacing:2px;padding:10px 20px;border:3px solid #333;display:inline-block;margin:30px 0 0;outline:0}.image-details a::before{content:'\\2192';display:inline-block;margin-right:10px}.image-details a:hover{border-color:#999;color:#fff}.prev{float:right;left:0;margin-left:16px;border-radius:3px 0 0 3px}.next{float:right;right:0;margin-right:16px;border-radius:0 3px 3px 0}.next,.prev{font-weight:700;font-size:24px;-webkit-transition:.6s ease;transition:.6s ease;background-color:#ff8200;color:#fff!important;cursor:pointer;position:absolute;top:40%;width:auto;padding:8px}.next:hover,.prev:hover{background-color:rgba(0,0,0,.8)}@media screen and (max-width:830px){.image-expander h3{font-size:32px}.image-expander p{font-size:13px}.image-expander a{font-size:12px}}@media screen and (max-width:650px){.image-fullimg{display:none!important}.image-details{float:none;width:100%!important}}"],encapsulation:i.ViewEncapsulation.Emulated}]}],n.ctorParameters=function(){return[]},n.propDecorators={images:[{type:i.Input}],expanderBgColor:[{type:i.Input}],expanderTextColor:[{type:i.Input}],parentTemplate:[{type:i.ContentChild,args:[i.TemplateRef]}]};var o=function(){return function(){}}();o.decorators=[{type:i.NgModule,args:[{declarations:[n],imports:[a.BrowserModule],exports:[n],providers:[]}]}],o.ctorParameters=function(){return[]},e.ImageViewerModule=o,e.ɵa=n,Object.defineProperty(e,"__esModule",{value:!0})});
//# sourceMappingURL=angular-image-viewer.umd.min.js.map