ng-image-video-gallery
Version:
Angular Image slider with lightbox. An Angular responsive image slider with lightbox popup. Also support youtube url, image base64 string and mp4 video urls and base64 string.
1,103 lines • 189 kB
JavaScript
/**
* @fileoverview added by tsickle
* Generated from: lib/ng-image-slider.component.ts
* @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
import { __assign, __read, __spread } from "tslib";
import { ChangeDetectorRef, Component, Input, Output, EventEmitter, ViewEncapsulation, ViewChild, HostListener, PLATFORM_ID, Inject, ElementRef } from '@angular/core';
import { isPlatformBrowser } from '@angular/common';
import { NgImageSliderService } from './ng-image-slider.service';
/** @type {?} */
var NEXT_ARROW_CLICK_MESSAGE = 'next';
/** @type {?} */
var PREV_ARROW_CLICK_MESSAGE = 'previous';
var NgImageSliderComponent = /** @class */ (function () {
function NgImageSliderComponent(cdRef, platformId, imageSliderService, elRef) {
this.cdRef = cdRef;
this.platformId = platformId;
this.imageSliderService = imageSliderService;
this.elRef = elRef;
// for slider
this.sliderMainDivWidth = 0;
this.thumbnailSliderMainDivWidth = 0;
this.imageParentDivWidth = 0;
this.thumbnailParentDivWidth = 0;
this.imageObj = [];
this.ligthboxImageObj = [];
this.totalImages = 0;
this.leftPos = 0;
this.thumbnailLeftPos = 0;
this.effectStyle = 'all 1s ease-in-out';
this.speed = 1; // default speed in second
// default speed in second
this.sliderPrevDisable = false;
this.sliderThumbnailPrevDisable = false;
this.sliderNextDisable = false;
this.sliderThumbnailNextDisable = false;
this.slideImageCount = 1;
this.slideThumbnailCount = 1;
this.sliderImageWidth = 205;
this.sliderThumbnailWidth = 205;
this.sliderImageReceivedWidth = 205;
this.sliderThumbnailReceivedWidth = 205;
this.sliderImageHeight = 200;
this.sliderHeight = '205px';
this.sliderImageReceivedHeight = 205;
this.sliderThumbnailReceivedHeight = 205;
this.sliderImageSizeWithPadding = 211;
this.sliderThumbnailSizeWithPadding = 211;
this.autoSlideCount = 0;
this.stopSlideOnHover = true;
this.showArrowButton = true;
this.textDirection = 'ltr';
this.imageMargin = 3;
this.thumbnailMargin = 3;
this.sliderOrderType = 'ASC';
this.thumbnailImages = [];
this.thmbnailImageIndex = 0;
this.thumbnailLastIndex = 0;
this.sliderLastIndex = 0;
this.sliderIndex = 0;
this.thumbnailIndex = 0;
//for infinite scroll
this.infiniteSliderThumbnail = [];
this.infiniteThumbnailImageIndex = 1;
this.leftPosition = 0;
this.closeLightbox = false;
// for lightbox
this.ligthboxShow = false;
this.activeImageIndex = -1;
this.visiableImageIndex = 0;
this.visiableThumbnailIndex = 0;
// @inputs
this.isShowThumbnailImage = false;
this.isThumbnailbSlider = false;
this.infinite = false;
this.imagePopup = true;
this.images = [];
this.videoAutoPlay = false;
this.paginationShow = false;
this.arrowKeyMove = true;
this.manageImageRatio = false;
this.showVideoControls = true;
this.lazyLoading = false;
// @Outputs
this.imageClick = new EventEmitter();
this.arrowClick = new EventEmitter();
this.thumbnailArrowClick = new EventEmitter();
this.lightboxArrowClick = new EventEmitter();
this.lightboxClose = new EventEmitter();
}
Object.defineProperty(NgImageSliderComponent.prototype, "imageSize", {
set: /**
* @param {?} data
* @return {?}
*/
function (data) {
if (data
&& typeof (data) === 'object') {
if (data.hasOwnProperty('space') && typeof (data['space']) === 'number' && data['space'] > -1) {
this.imageMargin = data['space'];
}
if (data.hasOwnProperty('width') && (typeof (data['width']) === 'number' || typeof (data['width']) === 'string')) {
this.sliderImageReceivedWidth = data['width'];
// this.sliderImageSizeWithPadding = data['width'] + (this.imageMargin * 2); // addeing padding with image width
}
if (data.hasOwnProperty('height') && (typeof (data['height']) === 'number' || typeof (data['height']) === 'string')) {
this.sliderImageReceivedHeight = data['height'];
}
if (data.hasOwnProperty('sliderHeight') && (typeof (data['sliderHeight']) === 'number' || typeof (data['sliderHeight']) === 'string')) {
this.sliderHeight = data['sliderHeight'];
}
}
},
enumerable: true,
configurable: true
});
Object.defineProperty(NgImageSliderComponent.prototype, "thumbnailSize", {
set: /**
* @param {?} data
* @return {?}
*/
function (data) {
if (data
&& typeof (data) === 'object') {
if (data.hasOwnProperty('space') && typeof (data['space']) === 'number' && data['space'] > -1) {
this.thumbnailMargin = data['space'];
}
if (data.hasOwnProperty('width') && (typeof (data['width']) === 'number' || typeof (data['width']) === 'string')) {
this.sliderThumbnailReceivedWidth = data['width'];
}
if (data.hasOwnProperty('height') && (typeof (data['height']) === 'number' || typeof (data['height']) === 'string')) {
this.sliderThumbnailReceivedHeight = data['height'];
}
}
},
enumerable: true,
configurable: true
});
Object.defineProperty(NgImageSliderComponent.prototype, "direction", {
set: /**
* @param {?} dir
* @return {?}
*/
function (dir) {
if (dir) {
this.textDirection = dir;
}
},
enumerable: true,
configurable: true
});
Object.defineProperty(NgImageSliderComponent.prototype, "animationSpeed", {
set: /**
* @param {?} data
* @return {?}
*/
function (data) {
if (data
&& typeof (data) === 'number'
&& data >= 0.1
&& data <= 5) {
this.speed = data;
this.effectStyle = "all " + this.speed + "s ease-in-out";
}
},
enumerable: true,
configurable: true
});
Object.defineProperty(NgImageSliderComponent.prototype, "slideImage", {
set: /**
* @param {?} count
* @return {?}
*/
function (count) {
if (count && typeof count === 'number') {
this.slideImageCount = Math.round(count);
}
},
enumerable: true,
configurable: true
});
Object.defineProperty(NgImageSliderComponent.prototype, "autoSlide", {
set: /**
* @param {?} count
* @return {?}
*/
function (count) {
if (count && (typeof count === 'number'
|| typeof count === 'boolean'
|| typeof count === 'object')) {
if (typeof count === 'number' && count >= 1 && count <= 5) {
count = Math.round(count);
}
else if (typeof count === 'boolean') {
count = 1;
}
else if (typeof count === 'object'
&& count.hasOwnProperty('interval')
&& Math.round(count['interval'])
&& Math.round(count['interval']) >= 1
&& Math.round(count['interval']) <= 5) {
this.stopSlideOnHover = count.hasOwnProperty('stopOnHover') ? count['stopOnHover'] : true;
count = Math.round(count['interval']);
}
this.autoSlideCount = count * 1000;
}
},
enumerable: true,
configurable: true
});
Object.defineProperty(NgImageSliderComponent.prototype, "showArrow", {
set: /**
* @param {?} flag
* @return {?}
*/
function (flag) {
if (flag !== undefined && typeof flag === 'boolean') {
this.showArrowButton = flag;
}
},
enumerable: true,
configurable: true
});
Object.defineProperty(NgImageSliderComponent.prototype, "orderType", {
set: /**
* @param {?} data
* @return {?}
*/
function (data) {
if (data !== undefined && typeof data === 'string') {
this.sliderOrderType = data.toUpperCase();
}
},
enumerable: true,
configurable: true
});
Object.defineProperty(NgImageSliderComponent.prototype, "defaultActiveImage", {
set: /**
* @param {?} activeIndex
* @return {?}
*/
function (activeIndex) {
if (typeof activeIndex === 'number' && activeIndex > -1) {
this.activeImageIndex = activeIndex;
}
},
enumerable: true,
configurable: true
});
/**
* @param {?} event
* @return {?}
*/
NgImageSliderComponent.prototype.onResize = /**
* @param {?} event
* @return {?}
*/
function (event) {
this.setSliderWidth();
};
/**
* @param {?} event
* @return {?}
*/
NgImageSliderComponent.prototype.handleKeyboardEvent = /**
* @param {?} event
* @return {?}
*/
function (event) {
if (event && event.key) {
if (event.key.toLowerCase() === 'arrowright' && !this.ligthboxShow && this.arrowKeyMove) {
this.next();
}
if (event.key.toLowerCase() === 'arrowleft' && !this.ligthboxShow && this.arrowKeyMove) {
this.prev();
}
if (event.key.toLowerCase() === 'escape' && this.ligthboxShow) {
this.close();
}
}
};
/**
* @return {?}
*/
NgImageSliderComponent.prototype.ngOnInit = /**
* @return {?}
*/
function () {
// @TODO: for future use
// console.log(this._elementRef)
var _a;
// for slider
if (this.infinite) {
this.effectStyle = 'none';
this.leftPos = -1 * this.sliderImageSizeWithPadding * this.slideImageCount;
this.thumbnailLeftPos = -1 * this.sliderThumbnailSizeWithPadding * this.slideThumbnailCount;
(_a = this.infiniteSliderThumbnail).push.apply(_a, __spread(this.images));
// for (let i = 1; i <= this.slideImageCount; i++) {
// this.imageObj.unshift(this.imageObj[this.imageObj.length - 1]);
// this.thumbnailImages.unshift(this.imageObj[this.imageObj.length - i]);
// }
}
this.thumbnailImages = this.imageObj;
};
// for slider
// for slider
/**
* @return {?}
*/
NgImageSliderComponent.prototype.ngAfterViewInit =
// for slider
/**
* @return {?}
*/
function () {
this.setSliderWidth();
this.setThumbnailSliderWidth();
this.cdRef.detectChanges();
if (isPlatformBrowser(this.platformId)) {
this.imageAutoSlide();
}
};
/**
* @return {?}
*/
NgImageSliderComponent.prototype.ngOnDestroy = /**
* @return {?}
*/
function () {
if (this.autoSlideInterval) {
clearInterval(this.autoSlideInterval);
}
if (this.ligthboxShow === true) {
this.close();
}
};
/**
* @param {?} changes
* @return {?}
*/
NgImageSliderComponent.prototype.ngOnChanges = /**
* @param {?} changes
* @return {?}
*/
function (changes) {
if (changes.images
&& changes.images.hasOwnProperty('previousValue')
&& changes.images.hasOwnProperty('currentValue')
&& changes.images.previousValue != changes.images.currentValue) {
this.setSliderImages(changes.images.currentValue);
}
if (changes && changes.imageSize) {
/** @type {?} */
var size = changes.imageSize;
if (size
&& size.previousValue
&& size.currentValue
&& size.previousValue.width && size.previousValue.height
&& size.currentValue.width && size.currentValue.height
&& (size.previousValue.width !== size.currentValue.width
|| size.previousValue.height !== size.currentValue.height)) {
this.setSliderWidth();
this.setThumbnailSliderWidth();
}
}
};
/**
* @return {?}
*/
NgImageSliderComponent.prototype.ngDoCheck = /**
* @return {?}
*/
function () {
if (this.images
&& this.ligthboxImageObj
&& this.images.length !== this.ligthboxImageObj.length) {
this.setSliderImages(this.images);
}
};
/**
* @param {?} imgObj
* @return {?}
*/
NgImageSliderComponent.prototype.setSliderImages = /**
* @param {?} imgObj
* @return {?}
*/
function (imgObj) {
if (imgObj && imgObj instanceof Array && imgObj.length) {
/** @type {?} */
var sliderOrderEnable = imgObj.find((/**
* @param {?} img
* @return {?}
*/
function (img) {
if (img.hasOwnProperty('order')) {
return true;
}
}));
if (sliderOrderEnable) {
imgObj = this.imageSliderService.orderArray(imgObj, this.sliderOrderType.toUpperCase());
}
this.imageObj = imgObj.map((/**
* @param {?} img
* @param {?} index
* @return {?}
*/
function (img, index) {
img['index'] = index;
return img;
}));
this.thumbnailImages = this.imageObj;
this.ligthboxImageObj = __spread(this.imageObj);
this.totalImages = this.imageObj.length;
// this.imageParentDivWidth = imgObj.length * this.sliderImageSizeWithPadding;
this.setSliderWidth();
}
};
/**
* @return {?}
*/
NgImageSliderComponent.prototype.setSliderWidth = /**
* @return {?}
*/
function () {
if (this.sliderMain
&& this.sliderMain.nativeElement
&& this.sliderMain.nativeElement.offsetWidth) {
this.sliderMainDivWidth = this.sliderMain.nativeElement.offsetWidth;
}
if (this.sliderMainDivWidth
&& this.sliderImageReceivedWidth) {
if (typeof this.sliderImageReceivedWidth === 'number') {
this.sliderImageWidth = this.sliderImageReceivedWidth;
}
else if (typeof this.sliderImageReceivedWidth === 'string') {
if (this.sliderImageReceivedWidth.indexOf('px') >= 0) {
this.sliderImageWidth = parseFloat(this.sliderImageReceivedWidth);
}
else if (this.sliderImageReceivedWidth.indexOf('%') >= 0) {
this.sliderImageWidth = +((this.sliderMainDivWidth * parseFloat(this.sliderImageReceivedWidth)) / 100).toFixed(2);
}
else if (parseFloat(this.sliderImageReceivedWidth)) {
this.sliderImageWidth = parseFloat(this.sliderImageReceivedWidth);
}
}
}
if (window && window.innerHeight
&& this.sliderImageReceivedHeight) {
if (typeof this.sliderImageReceivedHeight === 'number') {
this.sliderImageHeight = this.sliderImageReceivedHeight;
}
else if (typeof this.sliderImageReceivedHeight === 'string') {
if (this.sliderImageReceivedHeight.indexOf('px') >= 0) {
this.sliderImageHeight = parseFloat(this.sliderImageReceivedHeight);
}
else if (this.sliderImageReceivedHeight.indexOf('%') >= 0) {
this.sliderImageHeight = +((window.innerHeight * parseFloat(this.sliderImageReceivedHeight)) / 100).toFixed(2);
}
else if (parseFloat(this.sliderImageReceivedHeight)) {
this.sliderImageHeight = parseFloat(this.sliderImageReceivedHeight);
}
}
}
this.sliderImageSizeWithPadding = this.sliderImageWidth + (this.imageMargin * 2);
this.imageParentDivWidth = this.imageObj.length * this.sliderImageSizeWithPadding;
if (this.imageDiv && this.imageDiv.nativeElement && this.imageDiv.nativeElement.offsetWidth) {
this.leftPos = this.infinite ? -1 * this.sliderImageSizeWithPadding * this.slideImageCount : 0;
this.leftPosition = -1 * this.sliderImageSizeWithPadding * this.slideImageCount;
}
this.nextPrevSliderButtonDisable();
};
/**
* @return {?}
*/
NgImageSliderComponent.prototype.setThumbnailSliderWidth = /**
* @return {?}
*/
function () {
if (this.thumnailSliderMain
&& this.thumnailSliderMain.nativeElement
&& this.thumnailSliderMain.nativeElement.offsetWidth) {
this.thumbnailSliderMainDivWidth = this.thumnailSliderMain.nativeElement.offsetWidth;
}
if (this.thumbnailSliderMainDivWidth
&& this.sliderThumbnailReceivedWidth) {
if (typeof this.sliderThumbnailReceivedWidth === 'number') {
this.sliderThumbnailWidth = this.sliderThumbnailReceivedWidth;
}
else if (typeof this.sliderThumbnailReceivedWidth === 'string') {
if (this.sliderThumbnailReceivedWidth.indexOf('px') >= 0) {
this.sliderThumbnailWidth = parseFloat(this.sliderThumbnailReceivedWidth);
}
else if (this.sliderThumbnailReceivedWidth.indexOf('%') >= 0) {
this.sliderThumbnailWidth = +((this.thumbnailSliderMainDivWidth * parseFloat(this.sliderThumbnailReceivedWidth)) / 100).toFixed(2);
}
else if (parseFloat(this.sliderThumbnailReceivedWidth)) {
this.sliderThumbnailWidth = parseFloat(this.sliderThumbnailReceivedWidth);
}
}
}
if (window && window.innerHeight
&& this.sliderThumbnailReceivedHeight) {
if (typeof this.sliderThumbnailReceivedHeight === 'number') {
this.sliderImageHeight = this.sliderThumbnailReceivedHeight;
}
else if (typeof this.sliderThumbnailReceivedHeight === 'string') {
if (this.sliderThumbnailReceivedHeight.indexOf('px') >= 0) {
this.sliderImageHeight = parseFloat(this.sliderThumbnailReceivedHeight);
}
else if (this.sliderThumbnailReceivedHeight.indexOf('%') >= 0) {
this.sliderImageHeight = +((window.innerHeight * parseFloat(this.sliderThumbnailReceivedHeight)) / 100).toFixed(2);
}
else if (parseFloat(this.sliderThumbnailReceivedHeight)) {
this.sliderImageHeight = parseFloat(this.sliderThumbnailReceivedHeight);
}
}
}
this.sliderThumbnailSizeWithPadding = this.sliderThumbnailWidth + (this.imageMargin * 2);
this.thumbnailParentDivWidth = this.imageObj.length * this.sliderThumbnailSizeWithPadding;
if (this.imageDiv && this.imageDiv.nativeElement && this.imageDiv.nativeElement.offsetWidth) {
this.thumbnailLeftPos = this.infinite ? 0 : 0;
}
this.nextPrevThumnailSliderButtonDisable();
};
/**
* @param {?} index
* @return {?}
*/
NgImageSliderComponent.prototype.imageOnClick = /**
* @param {?} index
* @return {?}
*/
function (index) {
this.activeImageIndex = index;
if (this.imagePopup) {
this.showLightbox();
}
this.imageClick.emit(index);
};
/**
* @return {?}
*/
NgImageSliderComponent.prototype.imageAutoSlide = /**
* @return {?}
*/
function () {
var _this = this;
if (this.infinite && this.autoSlideCount && !this.ligthboxShow) {
this.autoSlideInterval = setInterval((/**
* @return {?}
*/
function () {
_this.next();
_this.nextThumbnail();
}), this.autoSlideCount);
}
};
/**
* @param {?} event
* @return {?}
*/
NgImageSliderComponent.prototype.closeLightBox = /**
* @param {?} event
* @return {?}
*/
function (event) {
this.ligthboxImageObj = event;
};
/**
* @return {?}
*/
NgImageSliderComponent.prototype.imageMouseEnterHandler = /**
* @return {?}
*/
function () {
if (this.infinite && this.autoSlideCount && this.autoSlideInterval) {
clearInterval(this.autoSlideInterval);
}
};
/**
* @return {?}
*/
NgImageSliderComponent.prototype.prev = /**
* @return {?}
*/
function () {
if (!this.sliderPrevDisable) {
if (this.infinite) {
this.infinitePrevImg();
}
else {
this.prevImg();
}
//this.arrowClick.emit(PREV_ARROW_CLICK_MESSAGE);
this.sliderArrowDisableTeam(PREV_ARROW_CLICK_MESSAGE);
this.getVisiableIndex();
this.getVisiableThumbnailIndex();
}
};
/**
* @return {?}
*/
NgImageSliderComponent.prototype.prevThumbnail = /**
* @return {?}
*/
function () {
if (!this.sliderThumbnailPrevDisable) {
if (this.infinite) {
this.infinitePrevThumbnailImg();
}
else {
this.prevThumbnailImg();
}
//this.arrowClick.emit(PREV_ARROW_CLICK_MESSAGE);
this.sliderThumbnailArrowDisableTeam(PREV_ARROW_CLICK_MESSAGE);
this.getVisiableThumbnailIndex();
}
};
/**
* @return {?}
*/
NgImageSliderComponent.prototype.next = /**
* @return {?}
*/
function () {
if (!this.sliderNextDisable) {
if (this.infinite) {
this.infiniteNextImg();
}
else {
this.nextImg();
}
//this.arrowClick.emit(NEXT_ARROW_CLICK_MESSAGE);
this.sliderArrowDisableTeam(NEXT_ARROW_CLICK_MESSAGE);
this.getVisiableIndex();
this.getVisiableThumbnailIndex();
}
};
/**
* @return {?}
*/
NgImageSliderComponent.prototype.nextThumbnail = /**
* @return {?}
*/
function () {
if (!this.sliderThumbnailNextDisable) {
if (this.infinite) {
this.infiniteNextThumbnailImg();
}
else {
this.nextThumbnailImg();
}
//this.arrowClick.emit(NEXT_ARROW_CLICK_MESSAGE);
this.sliderThumbnailArrowDisableTeam(NEXT_ARROW_CLICK_MESSAGE);
this.getVisiableThumbnailIndex();
}
};
/**
* @return {?}
*/
NgImageSliderComponent.prototype.prevImg = /**
* @return {?}
*/
function () {
if (0 >= this.leftPos + (this.sliderImageSizeWithPadding * this.slideImageCount)) {
this.leftPos += this.sliderImageSizeWithPadding * this.slideImageCount;
(this.sliderIndex === this.thumbnailIndex) ? this.thumbnailLeftPos = (this.thumbnailLeftPos + this.thumbnailSliderMainDivWidth) : '';
}
else {
this.leftPos = 0;
this.thumbnailLeftPos = 0;
}
};
/**
* @return {?}
*/
NgImageSliderComponent.prototype.prevThumbnailImg = /**
* @return {?}
*/
function () {
if (0 >= this.thumbnailLeftPos + (this.sliderThumbnailSizeWithPadding * this.slideThumbnailCount)) {
this.thumbnailLeftPos += this.thumbnailSliderMainDivWidth;
}
else {
this.thumbnailLeftPos = 0;
}
};
/**
* @return {?}
*/
NgImageSliderComponent.prototype.infinitePrevThumbnailImg = /**
* @return {?}
*/
function () {
this.effectStyle = "all " + this.speed + "s ease-in-out";
if (0 >= this.thumbnailLeftPos + (this.sliderThumbnailSizeWithPadding * this.slideThumbnailCount)) {
this.thumbnailLeftPos += this.thumbnailSliderMainDivWidth;
}
else {
this.thumbnailLeftPos = 0;
}
};
/**
* @return {?}
*/
NgImageSliderComponent.prototype.nextImg = /**
* @return {?}
*/
function () {
if ((this.imageParentDivWidth + this.leftPos) - this.sliderMainDivWidth > this.sliderImageSizeWithPadding * this.slideImageCount) {
this.leftPos -= this.sliderImageSizeWithPadding * this.slideImageCount;
(this.sliderLastIndex >= this.thumbnailLastIndex && this.thumbnailLastIndex) ? this.thumbnailLeftPos = -this.sliderThumbnailSizeWithPadding * this.thumbnailLastIndex : '';
}
else if ((this.imageParentDivWidth + this.leftPos) - this.sliderMainDivWidth > 0) {
this.leftPos -= (this.imageParentDivWidth + this.leftPos) - this.sliderMainDivWidth;
this.sliderLastIndex >= this.thumbnailLastIndex && this.thumbnailLastIndex ? this.thumbnailLeftPos -= (this.thumbnailParentDivWidth + this.thumbnailLeftPos) - this.thumbnailSliderMainDivWidth : '';
}
};
/**
* @return {?}
*/
NgImageSliderComponent.prototype.nextThumbnailImg = /**
* @return {?}
*/
function () {
if ((this.thumbnailParentDivWidth + this.thumbnailLeftPos) - this.thumbnailSliderMainDivWidth > this.sliderThumbnailSizeWithPadding * this.slideThumbnailCount) {
this.thumbnailLeftPos -= this.thumbnailSliderMainDivWidth;
}
else if ((this.thumbnailParentDivWidth + this.thumbnailLeftPos) - this.thumbnailSliderMainDivWidth > 0) {
this.thumbnailLeftPos -= this.thumbnailSliderMainDivWidth;
}
};
/**
* @return {?}
*/
NgImageSliderComponent.prototype.infiniteNextThumbnailImg = /**
* @return {?}
*/
function () {
this.effectStyle = "all " + this.speed + "s ease-in-out";
if ((this.thumbnailParentDivWidth + this.thumbnailLeftPos) - this.thumbnailSliderMainDivWidth > this.sliderThumbnailSizeWithPadding * this.slideThumbnailCount) {
this.thumbnailLeftPos -= this.thumbnailSliderMainDivWidth;
}
else if ((this.thumbnailParentDivWidth + this.thumbnailLeftPos) - this.thumbnailSliderMainDivWidth > 0) {
this.thumbnailLeftPos -= this.thumbnailSliderMainDivWidth;
}
};
/**
* @return {?}
*/
NgImageSliderComponent.prototype.infinitePrevImg = /**
* @return {?}
*/
function () {
var _this = this;
this.effectStyle = "all " + this.speed + "s ease-in-out";
if (0 > this.leftPosition + (this.sliderImageSizeWithPadding * this.slideImageCount)) {
this.leftPosition += this.sliderImageSizeWithPadding * this.slideImageCount;
(this.sliderIndex === this.thumbnailIndex) ? this.thumbnailLeftPos = (this.thumbnailLeftPos + this.thumbnailSliderMainDivWidth) : '';
}
else if (this.infiniteThumbnailImageIndex === 0) {
/** @type {?} */
var totalDivForThumbnail = Math.ceil(this.thumbnailParentDivWidth / this.sliderImageSizeWithPadding);
/** @type {?} */
var lastPositionOfThumbnail = (totalDivForThumbnail - 1) * this.sliderImageSizeWithPadding;
this.thumbnailLeftPos -= lastPositionOfThumbnail;
this.leftPosition -= (this.imageObj.length - 1) * this.sliderImageSizeWithPadding;
}
else {
this.leftPosition += this.sliderImageSizeWithPadding;
}
this.leftPos += this.sliderImageSizeWithPadding;
setTimeout((/**
* @return {?}
*/
function () {
_this.effectStyle = 'none';
_this.leftPos -= _this.sliderImageSizeWithPadding;
for (var i = 0; i < _this.slideImageCount; i++) {
_this.imageObj.unshift(_this.imageObj[_this.imageObj.length - 1]);
_this.imageObj.pop();
}
}), this.speed * 1000);
};
/**
* @return {?}
*/
NgImageSliderComponent.prototype.infiniteNextImg = /**
* @return {?}
*/
function () {
var _this = this;
this.effectStyle = "all " + this.speed + "s ease-in-out";
if ((this.imageParentDivWidth + this.leftPosition) - this.sliderMainDivWidth > this.sliderImageSizeWithPadding * this.slideImageCount) {
(this.sliderLastIndex >= this.thumbnailLastIndex && this.thumbnailLastIndex) ? this.thumbnailLeftPos = -this.sliderThumbnailSizeWithPadding * this.thumbnailLastIndex : '';
this.leftPosition -= this.sliderImageSizeWithPadding;
}
else {
this.thumbnailLeftPos = 0;
this.leftPosition = 0;
}
this.leftPos -= this.sliderImageSizeWithPadding;
setTimeout((/**
* @return {?}
*/
function () {
_this.effectStyle = 'none';
for (var i = 0; i < _this.slideImageCount; i++) {
_this.imageObj.push(_this.imageObj[0]);
_this.imageObj.shift();
}
_this.leftPos += _this.sliderImageSizeWithPadding;
}), this.speed * 1000);
};
/**
* @return {?}
*/
NgImageSliderComponent.prototype.getVisiableIndex = /**
* @return {?}
*/
function () {
if (!this.infinite) {
/** @type {?} */
var currentIndex = Math.round((Math.abs(this.leftPos) + this.sliderImageWidth) / this.sliderImageWidth);
/** @type {?} */
var currentLastIndex = Math.round((Math.abs(this.leftPos) + this.sliderMainDivWidth) / this.sliderImageWidth);
if (this.imageObj[currentIndex - 1] && this.imageObj[currentIndex - 1]['index'] !== undefined) {
this.visiableImageIndex = this.imageObj[currentIndex - 1]['index'];
}
this.thmbnailImageIndex = currentIndex - 1;
this.sliderLastIndex = currentLastIndex;
this.sliderIndex = currentIndex;
}
else {
/** @type {?} */
var infiniteCurrentIndex = Math.round((Math.abs(this.leftPosition) + this.sliderImageWidth) / this.sliderImageWidth);
/** @type {?} */
var infiniteCurrentLastIndex = Math.round((Math.abs(this.leftPosition) + this.sliderMainDivWidth) / this.sliderImageWidth);
if (this.imageObj[infiniteCurrentIndex - 1] && this.imageObj[infiniteCurrentIndex - 1]['index'] !== undefined) {
this.visiableImageIndex = this.imageObj[infiniteCurrentIndex - 1]['index'];
}
this.infiniteThumbnailImageIndex = infiniteCurrentIndex - 1;
this.sliderLastIndex = infiniteCurrentLastIndex;
this.sliderIndex = infiniteCurrentIndex;
}
};
/**
* @return {?}
*/
NgImageSliderComponent.prototype.getVisiableThumbnailIndex = /**
* @return {?}
*/
function () {
/** @type {?} */
var currentIndex = Math.round((Math.abs(this.thumbnailLeftPos) + this.sliderThumbnailWidth) / this.sliderThumbnailWidth);
/** @type {?} */
var currentLastIndex = Math.round((Math.abs(this.thumbnailLeftPos) + this.thumbnailSliderMainDivWidth) / this.sliderThumbnailWidth);
if (this.thumbnailImages[currentIndex - 1] && this.thumbnailImages[currentIndex - 1]['index'] !== undefined) {
this.visiableThumbnailIndex = this.thumbnailImages[currentIndex - 1]['index'];
}
this.thumbnailLastIndex = currentLastIndex;
this.thumbnailIndex = currentIndex;
};
/**
* Disable slider left/right arrow when image moving
*/
/**
* Disable slider left/right arrow when image moving
* @param {?} msg
* @return {?}
*/
NgImageSliderComponent.prototype.sliderArrowDisableTeam = /**
* Disable slider left/right arrow when image moving
* @param {?} msg
* @return {?}
*/
function (msg) {
var _this = this;
this.sliderNextDisable = true;
this.sliderPrevDisable = true;
this.sliderThumbnailNextDisable = true;
this.sliderThumbnailPrevDisable = true;
setTimeout((/**
* @return {?}
*/
function () {
_this.nextPrevSliderButtonDisable(msg);
}), this.speed * 1000);
};
/**
* @param {?} msg
* @return {?}
*/
NgImageSliderComponent.prototype.sliderThumbnailArrowDisableTeam = /**
* @param {?} msg
* @return {?}
*/
function (msg) {
var _this = this;
this.sliderThumbnailNextDisable = true;
this.sliderThumbnailPrevDisable = true;
setTimeout((/**
* @return {?}
*/
function () {
_this.nextPrevThumnailSliderButtonDisable(msg);
}), this.speed * 1000);
};
/**
* @param {?=} msg
* @return {?}
*/
NgImageSliderComponent.prototype.nextPrevSliderButtonDisable = /**
* @param {?=} msg
* @return {?}
*/
function (msg) {
this.sliderNextDisable = false;
this.sliderPrevDisable = false;
this.sliderThumbnailNextDisable = false;
this.sliderThumbnailPrevDisable = false;
/** @type {?} */
var actionMsg = {};
if (!this.infinite) {
if (this.imageParentDivWidth + this.leftPos <= this.sliderMainDivWidth) {
this.sliderNextDisable = true;
this.sliderThumbnailNextDisable = true;
}
if (this.leftPos >= 0) {
this.sliderPrevDisable = true;
}
actionMsg['prevDisable'] = this.sliderPrevDisable;
actionMsg['nextDisable'] = this.sliderNextDisable;
}
if (msg) {
this.arrowClick.emit(__assign({ action: msg }, actionMsg));
}
};
/**
* @param {?=} msg
* @return {?}
*/
NgImageSliderComponent.prototype.nextPrevThumnailSliderButtonDisable = /**
* @param {?=} msg
* @return {?}
*/
function (msg) {
this.sliderThumbnailNextDisable = false;
this.sliderThumbnailPrevDisable = false;
/** @type {?} */
var actionMsg = {};
if (!this.infinite) {
if (this.thumbnailParentDivWidth + this.thumbnailLeftPos <= this.thumbnailSliderMainDivWidth) {
this.sliderThumbnailNextDisable = true;
}
if (this.thumbnailLeftPos >= 0) {
this.sliderThumbnailPrevDisable = true;
}
actionMsg['prevDisable'] = this.sliderThumbnailPrevDisable;
actionMsg['nextDisable'] = this.sliderThumbnailNextDisable;
}
if (msg) {
this.thumbnailArrowClick.emit(__assign({ action: msg }, actionMsg));
}
};
// for lightbox
// for lightbox
/**
* @return {?}
*/
NgImageSliderComponent.prototype.showLightbox =
// for lightbox
/**
* @return {?}
*/
function () {
if (this.imageObj.length) {
this.imageMouseEnterHandler();
this.ligthboxShow = true;
this.elRef.nativeElement.ownerDocument.body.style.overflow = 'hidden';
}
};
/**
* @return {?}
*/
NgImageSliderComponent.prototype.close = /**
* @return {?}
*/
function () {
this.ligthboxShow = false;
this.elRef.nativeElement.ownerDocument.body.style.overflow = '';
this.lightboxClose.emit();
this.imageAutoSlide();
};
/**
* @param {?} event
* @return {?}
*/
NgImageSliderComponent.prototype.lightboxArrowClickHandler = /**
* @param {?} event
* @return {?}
*/
function (event) {
this.lightboxArrowClick.emit(event);
};
/**
* Swipe event handler
* Reference from https://stackoverflow.com/a/44511007/2067646
*/
/**
* Swipe event handler
* Reference from https://stackoverflow.com/a/44511007/2067646
* @param {?} e
* @param {?} when
* @return {?}
*/
NgImageSliderComponent.prototype.swipe = /**
* Swipe event handler
* Reference from https://stackoverflow.com/a/44511007/2067646
* @param {?} e
* @param {?} when
* @return {?}
*/
function (e, when) {
/** @type {?} */
var coord = [e.changedTouches[0].pageX, e.changedTouches[0].pageY];
/** @type {?} */
var time = new Date().getTime();
if (when === 'start') {
this.swipeCoord = coord;
this.swipeTime = time;
}
else if (when === 'end') {
/** @type {?} */
var direction = [coord[0] - this.swipeCoord[0], coord[1] - this.swipeCoord[1]];
/** @type {?} */
var duration = time - this.swipeTime;
if (duration < 1000 //
&& Math.abs(direction[0]) > 30 // Long enough
&& Math.abs(direction[0]) > Math.abs(direction[1] * 3)) { // Horizontal enough
if (direction[0] < 0) {
this.next();
}
else {
this.prev();
}
}
}
};
/**
* @param {?} event
* @return {?}
*/
NgImageSliderComponent.prototype.getThumbnailImages = /**
* @param {?} event
* @return {?}
*/
function (event) {
var _a, _b;
for (var i = 0; i < ((_a = this.thumbnailImages) === null || _a === void 0 ? void 0 : _a.length); i++) {
if ((event === null || event === void 0 ? void 0 : event.index) === i) {
this.thumbnailImages[i]['thumbnail-image'] = (_b = event === null || event === void 0 ? void 0 : event.image) === null || _b === void 0 ? void 0 : _b.changingThisBreaksApplicationSecurity;
break;
}
}
};
/**
* @param {?} index
* @return {?}
*/
NgImageSliderComponent.prototype.clickOnThumbnail = /**
* @param {?} index
* @return {?}
*/
function (index) {
/** @type {?} */
var infiniteImageIndex = this.imageObj.indexOf(this.infiniteSliderThumbnail[index]);
if (this.infinite) {
this.effectStyle = "all " + this.speed + "s ease-in-out";
this.leftPos = -this.sliderImageSizeWithPadding * (infiniteImageIndex);
this.leftPosition = -this.sliderImageSizeWithPadding * (index);
this.sliderIndex = index + 1;
this.infiniteThumbnailImageIndex = index;
this.getVisiableThumbnailIndex();
this.getVisiableIndex();
}
else {
this.thmbnailImageIndex = index;
this.sliderIndex = index + 1;
this.leftPos = -this.sliderImageSizeWithPadding * (index);
}
if (index !== 0 || index !== this.imageObj.length - 1) {
this.sliderNextDisable = false;
this.sliderPrevDisable = false;
}
};
NgImageSliderComponent.decorators = [
{ type: Component, args: [{
selector: 'ng-image-slider',
template: "<div class=\"ng-image-slider img-slider\" [ngStyle]=\"{'height':sliderHeight}\">\r\n <div class=\"ng-image-slider-container\">\r\n <div class=\"main\"\r\n #sliderMain>\r\n <div class=\"main-inner\"\r\n *ngIf=\"imageObj.length\"\r\n [ngClass]=\"{'with-ng-main-pagination': paginationShow}\"\r\n [ngStyle]=\"{'margin-left':leftPos+'px', 'width':imageParentDivWidth+'px', 'transition': effectStyle}\"\r\n (touchstart)=\"swipe($event, 'start')\"\r\n (touchend)=\"swipe($event, 'end')\">\r\n <ng-container *ngFor=\"let img of imageObj; let i = index\">\r\n <div \r\n [ngStyle]=\"{'width':sliderImageWidth+'px', 'margin-left':imageMargin+'px', 'margin-right':imageMargin+'px'}\" class=\"img-div\">\r\n <div [ngStyle]=\"{'height':sliderImageHeight+'px'}\" class=\"img-dev-bg\"\r\n [ngClass]=\"{'image-popup': imagePopup, 'selected-image': activeImageIndex == i}\"\r\n (click)=\"imageOnClick(img.index)\"\r\n (mouseenter)=\"stopSlideOnHover && imageMouseEnterHandler()\"\r\n (mouseleave)=\"stopSlideOnHover && imageAutoSlide()\"\r\n #imageDiv>\r\n <custom-img (getThumbnail)=\"getThumbnailImages($event)\"[imageUrl]=\"img?.thumbImage || img?.posterImage || img?.video ||img?.image\"\r\n [isVideo]=\"!!(img?.posterImage || img?.video)\"\r\n [alt]=\"img?.alt || img?.title || ''\"\r\n [title]=\"img?.title || img?.alt || ''\"\r\n [direction]=\"textDirection\"\r\n [ratio]=\"manageImageRatio\"\r\n [lazy]=\"lazyLoading\"\r\n [imgHeight]=\"sliderImageHeight+'px'\"\r\n [imgData]='img'\r\n [imagePositionInSlider]=\"img['index']\">\r\n </custom-img>\r\n </div>\r\n <div [dir]=\"textDirection\" class=\"caption image-dev-container\" *ngIf=\"img?.imageTitle || img?.imageDescription\">\r\n <p *ngIf=\"img?.imageTitle\" class=\"image-title\">{{ img?.imageTitle }}</p>\r\n <p *ngIf=\"img?.imageDescription\" class=\"image-description\">{{ img?.imageDescription }}</p>\r\n </div>\r\n </div>\r\n </ng-container>\r\n </div>\r\n <div class=\"ng-image-slider-error\"\r\n *ngIf=\"!imageObj.length\">\r\n <span class=\"ng-image-slider-loader\"></span>\r\n </div>\r\n <a *ngIf=\"showArrowButton && imageObj.length > 1\"\r\n [ngClass]=\"{'disable': sliderPrevDisable}\"\r\n class=\"prev icons prev-icon\"\r\n (click)=\"prev()\"\r\n (mouseenter)=\"stopSlideOnHover && imageMouseEnterHandler()\"\r\n (mouseleave)=\"stopSlideOnHover && imageAutoSlide()\">‹</a>\r\n <a *ngIf=\"showArrowButton && imageObj.length > 1\"\r\n [ngClass]=\"{'disable': sliderNextDisable}\"\r\n class=\"next icons next-icon\"\r\n (click)=\"next()\"\r\n (mouseenter)=\"imageMouseEnterHandler()\"\r\n (mouseleave)=\"imageAutoSlide()\">›</a>\r\n </div>\r\n <div *ngIf=\"imageObj.length && paginationShow\" class=\"ng-main-pagination\">{{visiableImageIndex + 1}} of {{totalImages}}</div>\r\n </div>\r\n</div>\r\n<div *ngIf=\"ligthboxShow\">\r\n <slider-lightbox\r\n [paginationShow]=\"paginationShow\"\r\n [showVideoControls]=\"showVideoControls\"\r\n [arrowKeyMove]=\"arrowKeyMove\"\r\n [images]=\"ligthboxImageObj\"\r\n [infinite]=\"infinite\"\r\n [animationSpeed]=\"speed\"\r\n [imageIndex]=\"activeImageIndex\"\r\n [show]=\"ligthboxShow\"\r\n [direction]=\"textDirection\"\r\n [videoAutoPlay]=\"videoAutoPlay\"\r\n (prevImage)=\"lightboxArrowClickHandler($event)\"\r\n (nextImage)=\"lightboxArrowClickHandler($event)\"\r\n (close)=\"close()\"\r\n (closeLightBox)='closeLightBox($event)'>\r\n </slider-lightbox>\r\n</div>\r\n\r\n<div class=\"ng-image-slider thubnail-slider\" [ngStyle]=\"{'height':sliderThumbnailReceivedHeight}\" *ngIf=\"isShowThumbnailImage\">\r\n <div class=\"ng-image-slider-container\">\r\n <div class=\"main\"\r\n #thumnailSliderMain>\r\n <div class=\"main-inner\"\r\n *ngIf=\"imageObj.length\"\r\n [ngClass]=\"{'with-ng-main-pagination': paginationShow}\"\r\n [ngStyle]=\"{'margin-left':thumbnailLeftPos+'px', 'width':thumbnailParentDivWidth+'px', 'transition': effectStyle}\"\r\n (touchstart)=\"swipe($event, 'start')\"\r\n (touchend)=\"swipe($event, 'end')\">\r\n <div class=\"thumbnail-section\">\r\n <ng-container *ngIf=\"!infinite;else infiniteThumbnail\">\r\n <ng-container *ngFor=\"let img of thumbnailImages; let i = index\">\r\n <a (click)=\"clickOnThumbnail(i)\" class=\"thumbnail-section-image cursor-pointer\" [ngClass]=\"i===thmbnailImageIndex ? 'active' : ''\" [ngStyle]=\"{'max-width':sliderThumbnailReceivedWidth}\">\r\n <img [src]=\"img?.image ? img?.image : img['thumbnail-image']\" class=\"thumbnail-image\" [ngStyle]=\"{'height':sliderThumbnailReceivedHeight}\">\r\n </a>\r\n </ng-container>\r\n </ng-container>\r\n <ng-template #infiniteThumbnail>\r\n <ng-container *ngFor=\"let img of infiniteSliderThumbnail; let i = index\">\r\n <a [attr.data-infocolindex]=\"i\" (click)=\"clickOnThumbnail(i)\" class=\"thumbnail-section-image cursor-pointer\" [ngClass]=\"i===infiniteThumbnailImageIndex ? 'active' : ''\" [ngStyle]=\"{'max-width':sliderThumbnailReceivedWidth}\">\r\n <img [src]=\"img?.image ? img?.image : img['thumbnail-image']\" class=\"thumbnail-image\" [ngStyle]=\"{'height':sliderThumbnailReceivedHeight}\">\r\n </a>\r\n </ng-container>\r\n </ng-template>\r\n </div>\r\n </div>\r\n <ng-container *ngIf=\"isThumbnailbSlider\">\r\n <a *ngIf=\"showArrowButton && thumbnailImages.length > 0\"\r\n [ngClass]=\"{'disable': sliderThumbnailPrevDisable}\"\r\n class=\"thubnail-prev prev icons prev-icon\"\r\n (click)=\"prevThumbnail()\"\r\n (mouseenter)=\"stopSlideOnHover && imageMouseEnterHandler()\"\r\n (mouseleave)=\"stopSlideOnHover && imageAutoSlide()\">‹</a>\r\n <a *ngIf=\"showArrowButton && thumbnailImages.length > 0\"\r\n [ngClass]=\"{'disable': sliderThumbnailNextDisable}\"\r\n class=\"thubnail-next next icons next-icon\"\r\n (click)=\"nextThumbnail()\"\r\n (mouseenter)=\"imageMouseEnterHandler()\"\r\n (mouseleave)=\"imageAutoSlide()\">›</a>\r\n </ng-container>\r\n </div>\r\n </div>\r\n</div>",
encapsulation: ViewEncapsulation.None,
styles: [".ng-image-slider{display:inline-block;position:relative;width:100%}.ng-image-slider .ng-image-slider-container .main{overflow:hidden;position:absolute;height:100%;width:100%}.ng-image-slider .ng-image-slider-container .main .main-inner{width:1760px;padding:0;height:100%}.ng-image-slider .ng-image-slider-container .main .main-inner.with-ng-main-pagination{height:calc(100% - 30px)}.ng-image-slider .ng-image-slider-container .main .main-inner .full-screen{background:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAwCAYAAABXAvmHAAAABmJLR0QA/wD/AP+gvaeTAAAF+klEQVRoge2Yz28UyRXHv6+q50d7ftqDl42wrU1QFIXVkuAZD5pEzoYrihIhuERw2D8gl1UOKFeiaBfBIZGQIkVKGHGIQHsmspQoillgBfE4vpgQy4pFTIAdPB6Pe365u7peDsx4Z8z0/GDtS3Y+Uh+66vWr963u11X1gCFDhgz5qiEymYy5X86oW2c6nU4w8zcAxJhZaa2tZh8zK8MwLK11XAgRdF3360KIdxYWFn7VzWcqlfoJM38C4B8ASgC2WrpNZg4CgBCCAPiYeZOIfrOwsPC3Tv4Mr4GOHz8ecl13JRQKfS6ldJVSkpnJcZwQABARGYZRJiImIg4Gg/VCoTABo