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.
922 lines • 182 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 { 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 {?} */
const NEXT_ARROW_CLICK_MESSAGE = 'next';
/** @type {?} */
const PREV_ARROW_CLICK_MESSAGE = 'previous';
export class NgImageSliderComponent {
/**
* @param {?} cdRef
* @param {?} platformId
* @param {?} imageSliderService
* @param {?} elRef
*/
constructor(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();
}
/**
* @param {?} data
* @return {?}
*/
set imageSize(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'];
}
}
}
/**
* @param {?} data
* @return {?}
*/
set thumbnailSize(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'];
}
}
}
/**
* @param {?} dir
* @return {?}
*/
set direction(dir) {
if (dir) {
this.textDirection = dir;
}
}
/**
* @param {?} data
* @return {?}
*/
set animationSpeed(data) {
if (data
&& typeof (data) === 'number'
&& data >= 0.1
&& data <= 5) {
this.speed = data;
this.effectStyle = `all ${this.speed}s ease-in-out`;
}
}
/**
* @param {?} count
* @return {?}
*/
set slideImage(count) {
if (count && typeof count === 'number') {
this.slideImageCount = Math.round(count);
}
}
/**
* @param {?} count
* @return {?}
*/
set autoSlide(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;
}
}
/**
* @param {?} flag
* @return {?}
*/
set showArrow(flag) {
if (flag !== undefined && typeof flag === 'boolean') {
this.showArrowButton = flag;
}
}
/**
* @param {?} data
* @return {?}
*/
set orderType(data) {
if (data !== undefined && typeof data === 'string') {
this.sliderOrderType = data.toUpperCase();
}
}
/**
* @param {?} activeIndex
* @return {?}
*/
set defaultActiveImage(activeIndex) {
if (typeof activeIndex === 'number' && activeIndex > -1) {
this.activeImageIndex = activeIndex;
}
}
/**
* @param {?} event
* @return {?}
*/
onResize(event) {
this.setSliderWidth();
}
/**
* @param {?} event
* @return {?}
*/
handleKeyboardEvent(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 {?}
*/
ngOnInit() {
// @TODO: for future use
// console.log(this._elementRef)
// for slider
if (this.infinite) {
this.effectStyle = 'none';
this.leftPos = -1 * this.sliderImageSizeWithPadding * this.slideImageCount;
this.thumbnailLeftPos = -1 * this.sliderThumbnailSizeWithPadding * this.slideThumbnailCount;
this.infiniteSliderThumbnail.push(...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
/**
* @return {?}
*/
ngAfterViewInit() {
this.setSliderWidth();
this.setThumbnailSliderWidth();
this.cdRef.detectChanges();
if (isPlatformBrowser(this.platformId)) {
this.imageAutoSlide();
}
}
/**
* @return {?}
*/
ngOnDestroy() {
if (this.autoSlideInterval) {
clearInterval(this.autoSlideInterval);
}
if (this.ligthboxShow === true) {
this.close();
}
}
/**
* @param {?} changes
* @return {?}
*/
ngOnChanges(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 {?} */
const 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 {?}
*/
ngDoCheck() {
if (this.images
&& this.ligthboxImageObj
&& this.images.length !== this.ligthboxImageObj.length) {
this.setSliderImages(this.images);
}
}
/**
* @param {?} imgObj
* @return {?}
*/
setSliderImages(imgObj) {
if (imgObj && imgObj instanceof Array && imgObj.length) {
/** @type {?} */
const sliderOrderEnable = imgObj.find((/**
* @param {?} img
* @return {?}
*/
(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 {?}
*/
(img, index) => {
img['index'] = index;
return img;
}));
this.thumbnailImages = this.imageObj;
this.ligthboxImageObj = [...this.imageObj];
this.totalImages = this.imageObj.length;
// this.imageParentDivWidth = imgObj.length * this.sliderImageSizeWithPadding;
this.setSliderWidth();
}
}
/**
* @return {?}
*/
setSliderWidth() {
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 {?}
*/
setThumbnailSliderWidth() {
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 {?}
*/
imageOnClick(index) {
this.activeImageIndex = index;
if (this.imagePopup) {
this.showLightbox();
}
this.imageClick.emit(index);
}
/**
* @return {?}
*/
imageAutoSlide() {
if (this.infinite && this.autoSlideCount && !this.ligthboxShow) {
this.autoSlideInterval = setInterval((/**
* @return {?}
*/
() => {
this.next();
this.nextThumbnail();
}), this.autoSlideCount);
}
}
/**
* @param {?} event
* @return {?}
*/
closeLightBox(event) {
this.ligthboxImageObj = event;
}
/**
* @return {?}
*/
imageMouseEnterHandler() {
if (this.infinite && this.autoSlideCount && this.autoSlideInterval) {
clearInterval(this.autoSlideInterval);
}
}
/**
* @return {?}
*/
prev() {
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 {?}
*/
prevThumbnail() {
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 {?}
*/
next() {
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 {?}
*/
nextThumbnail() {
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 {?}
*/
prevImg() {
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 {?}
*/
prevThumbnailImg() {
if (0 >= this.thumbnailLeftPos + (this.sliderThumbnailSizeWithPadding * this.slideThumbnailCount)) {
this.thumbnailLeftPos += this.thumbnailSliderMainDivWidth;
}
else {
this.thumbnailLeftPos = 0;
}
}
/**
* @return {?}
*/
infinitePrevThumbnailImg() {
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 {?}
*/
nextImg() {
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 {?}
*/
nextThumbnailImg() {
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 {?}
*/
infiniteNextThumbnailImg() {
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 {?}
*/
infinitePrevImg() {
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 {?} */
let totalDivForThumbnail = Math.ceil(this.thumbnailParentDivWidth / this.sliderImageSizeWithPadding);
/** @type {?} */
let 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 {?}
*/
() => {
this.effectStyle = 'none';
this.leftPos -= this.sliderImageSizeWithPadding;
for (let i = 0; i < this.slideImageCount; i++) {
this.imageObj.unshift(this.imageObj[this.imageObj.length - 1]);
this.imageObj.pop();
}
}), this.speed * 1000);
}
/**
* @return {?}
*/
infiniteNextImg() {
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 {?}
*/
() => {
this.effectStyle = 'none';
for (let i = 0; i < this.slideImageCount; i++) {
this.imageObj.push(this.imageObj[0]);
this.imageObj.shift();
}
this.leftPos += this.sliderImageSizeWithPadding;
}), this.speed * 1000);
}
/**
* @return {?}
*/
getVisiableIndex() {
if (!this.infinite) {
/** @type {?} */
const currentIndex = Math.round((Math.abs(this.leftPos) + this.sliderImageWidth) / this.sliderImageWidth);
/** @type {?} */
const 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 {?} */
const infiniteCurrentIndex = Math.round((Math.abs(this.leftPosition) + this.sliderImageWidth) / this.sliderImageWidth);
/** @type {?} */
const 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 {?}
*/
getVisiableThumbnailIndex() {
/** @type {?} */
const currentIndex = Math.round((Math.abs(this.thumbnailLeftPos) + this.sliderThumbnailWidth) / this.sliderThumbnailWidth);
/** @type {?} */
const 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
* @param {?} msg
* @return {?}
*/
sliderArrowDisableTeam(msg) {
this.sliderNextDisable = true;
this.sliderPrevDisable = true;
this.sliderThumbnailNextDisable = true;
this.sliderThumbnailPrevDisable = true;
setTimeout((/**
* @return {?}
*/
() => {
this.nextPrevSliderButtonDisable(msg);
}), this.speed * 1000);
}
/**
* @param {?} msg
* @return {?}
*/
sliderThumbnailArrowDisableTeam(msg) {
this.sliderThumbnailNextDisable = true;
this.sliderThumbnailPrevDisable = true;
setTimeout((/**
* @return {?}
*/
() => {
this.nextPrevThumnailSliderButtonDisable(msg);
}), this.speed * 1000);
}
/**
* @param {?=} msg
* @return {?}
*/
nextPrevSliderButtonDisable(msg) {
this.sliderNextDisable = false;
this.sliderPrevDisable = false;
this.sliderThumbnailNextDisable = false;
this.sliderThumbnailPrevDisable = false;
/** @type {?} */
const 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(Object.assign({ action: msg }, actionMsg));
}
}
/**
* @param {?=} msg
* @return {?}
*/
nextPrevThumnailSliderButtonDisable(msg) {
this.sliderThumbnailNextDisable = false;
this.sliderThumbnailPrevDisable = false;
/** @type {?} */
const 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(Object.assign({ action: msg }, actionMsg));
}
}
// for lightbox
/**
* @return {?}
*/
showLightbox() {
if (this.imageObj.length) {
this.imageMouseEnterHandler();
this.ligthboxShow = true;
this.elRef.nativeElement.ownerDocument.body.style.overflow = 'hidden';
}
}
/**
* @return {?}
*/
close() {
this.ligthboxShow = false;
this.elRef.nativeElement.ownerDocument.body.style.overflow = '';
this.lightboxClose.emit();
this.imageAutoSlide();
}
/**
* @param {?} event
* @return {?}
*/
lightboxArrowClickHandler(event) {
this.lightboxArrowClick.emit(event);
}
/**
* Swipe event handler
* Reference from https://stackoverflow.com/a/44511007/2067646
* @param {?} e
* @param {?} when
* @return {?}
*/
swipe(e, when) {
/** @type {?} */
const coord = [e.changedTouches[0].pageX, e.changedTouches[0].pageY];
/** @type {?} */
const time = new Date().getTime();
if (when === 'start') {
this.swipeCoord = coord;
this.swipeTime = time;
}
else if (when === 'end') {
/** @type {?} */
const direction = [coord[0] - this.swipeCoord[0], coord[1] - this.swipeCoord[1]];
/** @type {?} */
const 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 {?}
*/
getThumbnailImages(event) {
var _a, _b;
for (let 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 {?}
*/
clickOnThumbnail(index) {
/** @type {?} */
let 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,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) 0 0/40px 40px no-repeat;position:absolute;z-index:8;display:block;height:40px;width:40px;top:4px;right:8px;opacity:.4;transition:.5s ease-in-out;cursor:pointer}.ng-image-slider .ng-image-slider-container .main .main-inner .img-dev-bg{box-shadow:inset 0 0 1px rgba(0,0,0,.24),0 0 2px rgba(0,0,0,.12)}.ng-image-slider .ng-image-slider-container .main .main-inner .img-div{width:205px;height:100%;margin-right:3px;margin-left:3px;position:relative;border-radius:5px;display:inline-block}.ng-image-slider .ng-image-slider-container .main .main-inner .img-div.image-popup{cursor:pointer}.ng-image-slider .ng-image-slider-container .main .main-inner .img-div img,.ng-image-slider .ng-image-slider-container .main .main-inner .img-div video{position:absolute;margin:auto;height:100%;width:100%;left:0;right:0;border-radius:5px}.ng-image-slider .ng-image-slider-container .main .main-inner .img-div img.ratio,.ng-image-slider .ng-image-slider-container .main .main-inner .img-div video.ratio{width:auto;height:auto;max-width:100%;max-height:100%}.ng-image-slider .ng-image-slider-container .main .main-inner .img-div .youtube-icon{background:url(data:image/png;base64,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