angular-image-viewer
Version:
This project was generated with [Angular CLI](https://github.com/angular/angular-cli) version 1.6.3.
115 lines (110 loc) • 9.16 kB
JavaScript
(function (global, factory) {
typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('/core'), require('lodash'), require('@angular/platform-browser')) :
typeof define === 'function' && define.amd ? define(['exports', '/core', 'lodash', '@angular/platform-browser'], factory) :
(factory((global['angular-image-viewer'] = {}),global.ng.core,global.lodash,global.ng.platformBrowser));
}(this, (function (exports,core,lodash,platformBrowser) { 'use strict';
var ImageViewerComponent = (function () {
function ImageViewerComponent() {
this.selectedIndex = 0;
}
ImageViewerComponent.prototype.ngOnInit = function () {
this.getWinSize();
this.imagesData = this.getImagesData(this.images);
if (!this.expanderBgColor) {
this.expanderBgColor = '#505558';
}
if (!this.expanderTextColor) {
this.expanderTextColor = '#fff';
}
};
ImageViewerComponent.prototype.getImagesData = function (images) {
var imagesArray = [];
lodash.forEach(images, function (image) {
console.log(image);
imagesArray.push({
thumbnailUrl: image.thumbnailUrl,
previewUrl: image.reviewUrl,
expanderHeight: '0px',
height: '220px'
});
});
return imagesArray;
};
ImageViewerComponent.prototype.openImageExpander = function (imagePosition) {
this.selectedIndex = imagePosition;
lodash.forEach(this.imagesData, function (image, index) {
if (index === imagePosition) {
image.height = '860px';
image.expanderHeight = '640px';
}
else {
image.height = '220px';
image.expanderHeight = '0px';
}
});
};
ImageViewerComponent.prototype.closeImageExpander = function (imagePosition) {
this.selectedIndex = imagePosition;
lodash.forEach(this.imagesData, function (image, index) {
if (index === imagePosition) {
image.height = '220px';
image.expanderHeight = '0px';
}
});
};
ImageViewerComponent.prototype.plusSlides = function (n) {
this.selectedIndex += n;
this.openImageExpander(this.selectedIndex);
};
ImageViewerComponent.prototype.showPrevButton = function () {
return this.selectedIndex !== 0;
};
ImageViewerComponent.prototype.showNextButton = function () {
return this.selectedIndex !== this.images.length - 1;
};
ImageViewerComponent.prototype.getWinSize = function () {
this.windowSize = { width: window.screen.width, height: window.screen.height };
};
return ImageViewerComponent;
}());
ImageViewerComponent.decorators = [
{ type: core.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: core.ViewEncapsulation.Emulated
},] },
];
ImageViewerComponent.ctorParameters = function () { return []; };
ImageViewerComponent.propDecorators = {
"images": [{ type: core.Input },],
"expanderBgColor": [{ type: core.Input },],
"expanderTextColor": [{ type: core.Input },],
"parentTemplate": [{ type: core.ContentChild, args: [core.TemplateRef,] },],
};
var ImageViewerModule = (function () {
function ImageViewerModule() {
}
return ImageViewerModule;
}());
ImageViewerModule.decorators = [
{ type: core.NgModule, args: [{
declarations: [
ImageViewerComponent,
],
imports: [
platformBrowser.BrowserModule
],
exports: [
ImageViewerComponent
],
providers: [],
},] },
];
ImageViewerModule.ctorParameters = function () { return []; };
exports.ImageViewerModule = ImageViewerModule;
exports.ɵa = ImageViewerComponent;
Object.defineProperty(exports, '__esModule', { value: true });
})));
//# sourceMappingURL=angular-image-viewer.umd.js.map