angular-responsive-carousel
Version:
Carousel for Angular. A simple solution for horizontal scrolling images with lazy loading.
1,220 lines (1,215 loc) • 91.7 kB
JavaScript
(function (global, factory) {
typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('@angular/core'), require('@angular/common')) :
typeof define === 'function' && define.amd ? define('angular-responsive-carousel', ['exports', '@angular/core', '@angular/common'], factory) :
(global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global['angular-responsive-carousel'] = {}, global.ng.core, global.ng.common));
}(this, (function (exports, core, common) { 'use strict';
var Touches = /** @class */ (function () {
function Touches(properties) {
var _this = this;
this.eventType = undefined;
this.handlers = {};
this.startX = 0;
this.startY = 0;
this.lastTap = 0;
this.doubleTapMinTimeout = 300;
this.tapMinTimeout = 200;
this.touchstartTime = 0;
this.i = 0;
this.isMousedown = false;
this._touchListeners = {
"touchstart": "handleTouchstart",
"touchmove": "handleTouchmove",
"touchend": "handleTouchend"
};
this._mouseListeners = {
"mousedown": "handleMousedown",
"mousemove": "handleMousemove",
"mouseup": "handleMouseup",
"wheel": "handleWheel"
};
this._otherListeners = {
"resize": "handleResize"
};
/*
* Listeners
*/
/* Touchstart */
this.handleTouchstart = function (event) {
_this.elementPosition = _this.getElementPosition();
_this.touchstartTime = new Date().getTime();
if (_this.eventType === undefined) {
_this.getTouchstartPosition(event);
}
_this.runHandler("touchstart", event);
};
/* Touchmove */
this.handleTouchmove = function (event) {
var touches = event.touches;
// Pan
if (_this.detectPan(touches)) {
_this.runHandler("pan", event);
}
// Pinch
if (_this.detectPinch(event)) {
_this.runHandler("pinch", event);
}
// Linear swipe
switch (_this.detectLinearSwipe(event)) {
case "horizontal-swipe":
event.swipeType = "horizontal-swipe";
_this.runHandler("horizontal-swipe", event);
break;
case "vertical-swipe":
event.swipeType = "vertical-swipe";
_this.runHandler("vertical-swipe", event);
break;
}
// Linear swipe
if (_this.detectLinearSwipe(event) ||
_this.eventType === 'horizontal-swipe' ||
_this.eventType === 'vertical-swipe') {
_this.handleLinearSwipe(event);
}
};
/* Touchend */
this.handleTouchend = function (event) {
var touches = event.touches;
// Double Tap
if (_this.detectDoubleTap()) {
_this.runHandler("double-tap", event);
}
// Tap
_this.detectTap();
_this.runHandler("touchend", event);
_this.eventType = 'touchend';
if (touches && touches.length === 0) {
_this.eventType = undefined;
_this.i = 0;
}
};
/* Mousedown */
this.handleMousedown = function (event) {
_this.isMousedown = true;
_this.elementPosition = _this.getElementPosition();
_this.touchstartTime = new Date().getTime();
if (_this.eventType === undefined) {
_this.getMousedownPosition(event);
}
_this.runHandler("mousedown", event);
};
/* Mousemove */
this.handleMousemove = function (event) {
//event.preventDefault();
if (!_this.isMousedown) {
return;
}
// Pan
_this.runHandler("pan", event);
// Linear swipe
switch (_this.detectLinearSwipe(event)) {
case "horizontal-swipe":
event.swipeType = "horizontal-swipe";
_this.runHandler("horizontal-swipe", event);
break;
case "vertical-swipe":
event.swipeType = "vertical-swipe";
_this.runHandler("vertical-swipe", event);
break;
}
// Linear swipe
if (_this.detectLinearSwipe(event) ||
_this.eventType === 'horizontal-swipe' ||
_this.eventType === 'vertical-swipe') {
_this.handleLinearSwipe(event);
}
};
/* Mouseup */
this.handleMouseup = function (event) {
// Tap
_this.detectTap();
_this.isMousedown = false;
_this.runHandler("mouseup", event);
_this.eventType = undefined;
_this.i = 0;
};
/* Wheel */
this.handleWheel = function (event) {
_this.runHandler("wheel", event);
};
/* Resize */
this.handleResize = function (event) {
_this.runHandler("resize", event);
};
this.properties = properties;
this.element = this.properties.element;
this.elementPosition = this.getElementPosition();
this.toggleEventListeners('addEventListener');
}
Object.defineProperty(Touches.prototype, "touchListeners", {
get: function () {
return this.properties.touchListeners ? this.properties.touchListeners : this._touchListeners;
},
enumerable: false,
configurable: true
});
Object.defineProperty(Touches.prototype, "mouseListeners", {
get: function () {
return this.properties.mouseListeners ? this.properties.mouseListeners : this._mouseListeners;
},
enumerable: false,
configurable: true
});
Object.defineProperty(Touches.prototype, "otherListeners", {
get: function () {
return this.properties.otherListeners ? this.properties.otherListeners : this._otherListeners;
},
enumerable: false,
configurable: true
});
Touches.prototype.destroy = function () {
this.toggleEventListeners('removeEventListener');
};
Touches.prototype.toggleEventListeners = function (action) {
var listeners;
if (this.properties.listeners === 'mouse and touch') {
listeners = Object.assign(this.touchListeners, this.mouseListeners);
}
else {
listeners = this.detectTouchScreen() ? this.touchListeners : this.mouseListeners;
}
if (this.properties.resize) {
listeners = Object.assign(listeners, this.otherListeners);
}
for (var listener in listeners) {
var handler = listeners[listener];
// Window
if (listener === "resize") {
if (action === 'addEventListener') {
window.addEventListener(listener, this[handler], false);
}
if (action === 'removeEventListener') {
window.removeEventListener(listener, this[handler], false);
}
// Document
}
else if (listener === 'mouseup' || listener === "mousemove") {
if (action === 'addEventListener') {
document.addEventListener(listener, this[handler], { passive: false });
}
if (action === 'removeEventListener') {
document.removeEventListener(listener, this[handler], false);
}
// Element
}
else {
if (action === 'addEventListener') {
this.element.addEventListener(listener, this[handler], false);
}
if (action === 'removeEventListener') {
this.element.removeEventListener(listener, this[handler], false);
}
}
}
};
Touches.prototype.addEventListeners = function (listener) {
var handler = this._mouseListeners[listener];
window.addEventListener(listener, this[handler], false);
};
Touches.prototype.removeEventListeners = function (listener) {
var handler = this._mouseListeners[listener];
window.removeEventListener(listener, this[handler], false);
};
Touches.prototype.handleLinearSwipe = function (event) {
//event.preventDefault();
this.i++;
if (this.i > 3) {
this.eventType = this.getLinearSwipeType(event);
}
if (this.eventType === 'horizontal-swipe') {
this.runHandler('horizontal-swipe', event);
}
if (this.eventType === 'vertical-swipe') {
this.runHandler('vertical-swipe', event);
}
};
Touches.prototype.runHandler = function (eventName, response) {
if (this.handlers[eventName]) {
this.handlers[eventName](response);
}
};
/*
* Detection
*/
Touches.prototype.detectPan = function (touches) {
return touches.length === 1 && !this.eventType || this.eventType === 'pan';
};
Touches.prototype.detectDoubleTap = function () {
var _this = this;
if (this.eventType != undefined) {
return;
}
var currentTime = new Date().getTime();
var tapLength = currentTime - this.lastTap;
clearTimeout(this.doubleTapTimeout);
if (tapLength < this.doubleTapMinTimeout && tapLength > 0) {
return true;
}
else {
this.doubleTapTimeout = setTimeout(function () {
clearTimeout(_this.doubleTapTimeout);
}, this.doubleTapMinTimeout);
}
this.lastTap = currentTime;
return undefined;
};
Touches.prototype.detectTap = function () {
if (this.eventType != undefined) {
return;
}
var currentTime = new Date().getTime();
var tapLength = currentTime - this.touchstartTime;
if (tapLength > 0) {
if (tapLength < this.tapMinTimeout) {
this.runHandler("tap", event);
}
else {
this.runHandler("longtap", event);
}
}
};
Touches.prototype.detectPinch = function (event) {
var touches = event.touches;
return (touches.length === 2 && this.eventType === undefined) || this.eventType === 'pinch';
};
Touches.prototype.detectLinearSwipe = function (event) {
var touches = event.touches;
if (touches) {
if (touches.length === 1 && !this.eventType || this.eventType === 'horizontal-swipe' || this.eventType === 'vertical-swipe') {
return this.getLinearSwipeType(event);
}
}
else {
if (!this.eventType || this.eventType === 'horizontal-swipe' || this.eventType === 'vertical-swipe') {
return this.getLinearSwipeType(event);
}
}
return undefined;
};
Touches.prototype.getLinearSwipeType = function (event) {
if (this.eventType !== 'horizontal-swipe' && this.eventType !== 'vertical-swipe') {
var movementX = Math.abs(this.moveLeft(0, event) - this.startX);
var movementY = Math.abs(this.moveTop(0, event) - this.startY);
if ((movementY * 3) > movementX) {
return 'vertical-swipe';
}
else {
return 'horizontal-swipe';
}
}
else {
return this.eventType;
}
};
Touches.prototype.getElementPosition = function () {
return this.element.getBoundingClientRect();
};
Touches.prototype.getTouchstartPosition = function (event) {
this.startX = event.touches[0].clientX - this.elementPosition.left;
this.startY = event.touches[0].clientY - this.elementPosition.top;
};
Touches.prototype.getMousedownPosition = function (event) {
this.startX = event.clientX - this.elementPosition.left;
this.startY = event.clientY - this.elementPosition.top;
};
Touches.prototype.moveLeft = function (index, event) {
var touches = event.touches;
if (touches) {
return touches[index].clientX - this.elementPosition.left;
}
else {
return event.clientX - this.elementPosition.left;
}
};
Touches.prototype.moveTop = function (index, event) {
var touches = event.touches;
if (touches) {
return touches[index].clientY - this.elementPosition.top;
}
else {
return event.clientY - this.elementPosition.top;
}
};
Touches.prototype.detectTouchScreen = function () {
var prefixes = ' -webkit- -moz- -o- -ms- '.split(' ');
var mq = function (query) {
return window.matchMedia(query).matches;
};
if (('ontouchstart' in window)) {
return true;
}
// include the 'heartz' as a way to have a non matching MQ to help terminate the join
// https://git.io/vznFH
var query = ['(', prefixes.join('touch-enabled),('), 'heartz', ')'].join('');
return mq(query);
};
/* Public properties and methods */
Touches.prototype.on = function (event, handler) {
if (event) {
this.handlers[event] = handler;
}
};
return Touches;
}());
var Carousel = /** @class */ (function () {
function Carousel(properties, utils, cells, container, slide) {
var _this = this;
this.properties = properties;
this.utils = utils;
this.cells = cells;
this.container = container;
this.slide = slide;
/* The slide length has been limited by the limitSlideLength() method */
this.isSlideLengthLimited = false;
this.isContentImages = true;
this.isLazyLoad = true;
this.isContainerLocked = true;
this.alignCells = "left";
this.initialContainerPosition = 0;
this.containerPullLimit = 100;
this.handleTouchstart = function (event) {
_this.container.handleTouchstart();
_this.slide.handleTouchstart(event);
};
this.handleHorizontalSwipe = function (event) {
_this.container.handleHorizontalSwipe();
};
this.handleTouchend = function (event) {
if (_this.properties.freeScroll) {
_this.container.handleTouchend();
}
else {
_this.container.handleTouchend(true);
_this.slide.handleTouchend(event);
}
};
this.isNextArrowDisabled = function () {
return _this.slide.isNextArrowDisabled();
};
this.isPrevArrowDisabled = function () {
return _this.slide.isPrevArrowDisabled();
};
this.init();
}
Object.defineProperty(Carousel.prototype, "cellLength", {
get: function () {
return this.cells.cellLength;
},
enumerable: false,
configurable: true
});
Object.defineProperty(Carousel.prototype, "cellLengthInLightDOMMode", {
get: function () {
if (this.images) {
var cellLength = this.numberOfVisibleCells + this.overflowCellsLimit * 2;
if (cellLength > this.images.length) {
cellLength = this.images.length;
}
return cellLength;
}
else {
return this.cellLength;
}
},
enumerable: false,
configurable: true
});
Object.defineProperty(Carousel.prototype, "lastCellIndex", {
get: function () {
return this.images.length ? (this.images.length - 1) : (this.cells.cellLength - 1);
},
enumerable: false,
configurable: true
});
Object.defineProperty(Carousel.prototype, "overflowCellsLimit", {
get: function () {
return this.utils.overflowCellsLimit;
},
enumerable: false,
configurable: true
});
Object.defineProperty(Carousel.prototype, "cellLimit", {
get: function () {
if (this.isLightDOM) {
var cellLimit = this.numberOfVisibleCells + this.overflowCellsLimit * 2;
if (cellLimit < this.numberOfVisibleCells) {
cellLimit = this.numberOfVisibleCells;
}
return cellLimit;
}
else {
return this.properties.images.length;
}
},
enumerable: false,
configurable: true
});
Object.defineProperty(Carousel.prototype, "isLightDOM", {
get: function () {
return this.properties.lightDOM || this.properties.loop;
},
enumerable: false,
configurable: true
});
Object.defineProperty(Carousel.prototype, "images", {
get: function () {
return this.properties.images;
},
enumerable: false,
configurable: true
});
Object.defineProperty(Carousel.prototype, "margin", {
get: function () {
return this.properties.margin;
},
enumerable: false,
configurable: true
});
Object.defineProperty(Carousel.prototype, "minSwipeDistance", {
get: function () {
return this.properties.minSwipeDistance;
},
enumerable: false,
configurable: true
});
Object.defineProperty(Carousel.prototype, "transitionDuration", {
get: function () {
return this.properties.transitionDuration;
},
enumerable: false,
configurable: true
});
Object.defineProperty(Carousel.prototype, "transitionTimingFunction", {
get: function () {
return this.properties.transitionTimingFunction;
},
enumerable: false,
configurable: true
});
Object.defineProperty(Carousel.prototype, "fullCellWidth", {
get: function () {
return this.properties.cellWidth + this.margin;
},
enumerable: false,
configurable: true
});
Object.defineProperty(Carousel.prototype, "numberOfVisibleCells", {
get: function () {
return this.utils.numberOfVisibleCells;
},
enumerable: false,
configurable: true
});
Object.defineProperty(Carousel.prototype, "lapCounter", {
get: function () {
return Math.floor(this.slide.counter / this.cellLengthInLightDOMMode);
},
enumerable: false,
configurable: true
});
Object.defineProperty(Carousel.prototype, "slideCounter", {
get: function () {
return this.slide.counter;
},
enumerable: false,
configurable: true
});
Carousel.prototype.updateProperties = function (properties) {
this.properties = properties;
};
Carousel.prototype.init = function () {
this.cellsElement = this.properties.cellsElement;
this.visibleWidth = this.properties.visibleWidth || this.cellsElement.parentElement.clientWidth;
};
Carousel.prototype.destroy = function () {
clearInterval(this.autoplayId);
};
Carousel.prototype.lineUpCells = function () {
this.cells.lineUp();
};
Carousel.prototype.handleTransitionend = function () {
this.slide.handleTransitionend();
};
Carousel.prototype.getImage = function (index) {
return this.cells.getImage(index);
};
Carousel.prototype.next = function (length) {
if (length === void 0) { length = 1; }
if (!this.isNextArrowDisabled()) {
this.slide.next(length);
}
};
Carousel.prototype.prev = function (length) {
if (length === void 0) { length = 1; }
this.slide.prev(length);
};
Carousel.prototype.autoplay = function () {
var _this = this;
this.autoplayId = setInterval(function () {
_this.next();
}, this.properties.autoplayInterval);
};
Carousel.prototype.stopAutoplay = function () {
if (this.autoplayId) {
clearInterval(this.autoplayId);
}
};
return Carousel;
}());
var Container = /** @class */ (function () {
function Container(carouselProperties, utils, cells) {
this.carouselProperties = carouselProperties;
this.utils = utils;
this.cells = cells;
/* The index of the new position relative to
* the active index, for example -1 or +1
*/
this.newPositionIndex = 0;
this.isPositionCorrection = false;
this.initialPositionX = 0;
this.initialElementPositionX = 0;
this.isLocked = true;
this.pullLimit = 100;
this.startTime = 0;
this.startX = 0;
this.moveX = 0;
this.isSwipeInProgress = false;
this.init();
}
Object.defineProperty(Container.prototype, "visibleWidth", {
get: function () {
return this.utils.visibleWidth;
},
enumerable: false,
configurable: true
});
Object.defineProperty(Container.prototype, "overflowCellsLimit", {
get: function () {
return this.utils.overflowCellsLimit;
},
enumerable: false,
configurable: true
});
Object.defineProperty(Container.prototype, "images", {
get: function () {
return this.carouselProperties.images;
},
enumerable: false,
configurable: true
});
Object.defineProperty(Container.prototype, "element", {
get: function () {
return this.carouselProperties.cellsElement;
},
enumerable: false,
configurable: true
});
Object.defineProperty(Container.prototype, "freeScroll", {
get: function () {
return this.carouselProperties.freeScroll;
},
enumerable: false,
configurable: true
});
Object.defineProperty(Container.prototype, "fullCellWidth", {
get: function () {
return this.carouselProperties.cellWidth + this.carouselProperties.margin;
},
enumerable: false,
configurable: true
});
Object.defineProperty(Container.prototype, "numberOfVisibleCells", {
get: function () {
return this.utils.numberOfVisibleCells;
},
enumerable: false,
configurable: true
});
Object.defineProperty(Container.prototype, "transitionDuration", {
get: function () {
return this.carouselProperties.transitionDuration;
},
enumerable: false,
configurable: true
});
Object.defineProperty(Container.prototype, "transitionTimingFunction", {
get: function () {
return this.carouselProperties.transitionTimingFunction;
},
enumerable: false,
configurable: true
});
Object.defineProperty(Container.prototype, "cellLength", {
get: function () {
if (this.images) {
return this.images.length;
}
else {
return this.cells.cellLength;
}
},
enumerable: false,
configurable: true
});
Object.defineProperty(Container.prototype, "cellLengthInLightDOMMode", {
get: function () {
if (this.images) {
var cellLength = this.numberOfVisibleCells + this.overflowCellsLimit * 2;
if (cellLength > this.images.length) {
cellLength = this.images.length;
}
return cellLength;
}
else {
return this.cellLength;
}
},
enumerable: false,
configurable: true
});
Object.defineProperty(Container.prototype, "tooFewCells", {
get: function () {
return this.numberOfVisibleCells > this.cellLength;
},
enumerable: false,
configurable: true
});
Object.defineProperty(Container.prototype, "disabled", {
get: function () {
return this.tooFewCells;
},
enumerable: false,
configurable: true
});
Object.defineProperty(Container.prototype, "margin", {
get: function () {
return this.carouselProperties.margin;
},
enumerable: false,
configurable: true
});
Object.defineProperty(Container.prototype, "isLightDOM", {
get: function () {
return this.carouselProperties.lightDOM || this.carouselProperties.loop;
},
enumerable: false,
configurable: true
});
Container.prototype.updateProperties = function (carouselProperties) {
this.carouselProperties = carouselProperties;
};
Container.prototype.init = function () {
this.setWidth();
};
Container.prototype.handleTouchstart = function () {
this.startX = this.utils.getStartX(event);
this.startTime = new Date().getTime();
this.initialElementPositionX = this.getInitialElementPositionX();
};
Container.prototype.handleHorizontalSwipe = function () {
if (this.disabled) {
return;
}
if (!this.isSwipeInProgress) {
this.startX = this.utils.getStartX(event);
this.startTime = new Date().getTime();
this.initialElementPositionX = this.getInitialElementPositionX();
}
this.isSwipeInProgress = true;
this.moveX = this.utils.getMoveX(event);
this.move();
};
Container.prototype.handleTouchend = function (simpleProcessing) {
if (simpleProcessing === void 0) { simpleProcessing = false; }
if (this.disabled) {
return;
}
/* If touchend was passed to the Slide class */
if (simpleProcessing) {
this.isSwipeInProgress = false;
return;
}
this.isSwipeInProgress = false;
this.finishMoving();
this.clearInitialValues();
};
Container.prototype.move = function () {
var positionX = this.getMovePositionX();
var isPulled = this.detectPulled();
var direction = this.getDirection();
if (isPulled) {
if (isPulled.edge === "left" && direction === "right" ||
isPulled.edge === "right" && direction === "left") {
positionX = this.slowdownOnPull(positionX);
}
}
this.transformPositionX(positionX, 0);
if (this.freeScroll) {
this.initialPositionX = positionX;
}
if (isPulled) {
if (isPulled.edge === 'left' && isPulled.overflowX > this.pullLimit) {
this.initialPositionX = 0;
}
if (isPulled.edge === 'right' && isPulled.overflowX > this.pullLimit) {
this.initialPositionX = positionX;
}
}
};
Container.prototype.getMovePositionX = function () {
var distance = this.getDistance();
return this.initialElementPositionX - distance;
};
Container.prototype.getDistance = function () {
return this.startX - this.moveX;
};
/* If the container is pulled out of the left or right border */
Container.prototype.detectPulled = function () {
var currentPositionX = this.getCurrentPositionX();
if (currentPositionX > 0) {
return {
edge: 'left',
positionX: currentPositionX,
overflowX: Math.abs(currentPositionX)
};
}
if (currentPositionX < this.getEndPosition()) {
return {
edge: 'right',
positionX: currentPositionX,
overflowX: Math.abs(currentPositionX - this.getEndPosition())
};
}
return undefined;
};
Container.prototype.slowdownOnPull = function (_positionX) {
var distance = Math.abs(this.getDistance());
var endPosition = this.getEndPosition();
var isPulled = this.detectPulled();
if (!isPulled) {
return 0;
}
var decelerationRatio = 3 + isPulled.overflowX / 50;
var positionX = 0;
if (isPulled.edge === 'left') {
if (this.initialElementPositionX < 0) {
distance = distance - Math.abs(this.initialElementPositionX);
}
var rubberPositionX = distance / decelerationRatio;
positionX = rubberPositionX;
if (this.initialElementPositionX > 0) {
positionX = this.initialElementPositionX + rubberPositionX;
}
if (positionX > this.pullLimit) {
positionX = this.pullLimit;
}
}
if (isPulled.edge === 'right') {
var rubberPositionX = endPosition + (((this.initialElementPositionX - distance) - endPosition) / decelerationRatio);
var containerWidth = this.getWidth();
positionX = rubberPositionX;
if (this.initialElementPositionX < -(containerWidth - this.visibleWidth)) {
positionX = ((containerWidth - this.visibleWidth) + this.initialElementPositionX) + rubberPositionX;
}
if (positionX < endPosition - this.pullLimit) {
positionX = endPosition - this.pullLimit;
}
}
return positionX;
};
Container.prototype.finishMoving = function () {
var positionX = this.getMovePositionX();
var newPositionX = 0;
if (this.freeScroll) {
newPositionX = this.getInertia();
}
/* Align container while pulling */
newPositionX = this.getAlignedPositionOnPull(newPositionX);
this.transformPositionX(newPositionX);
this.setInitialPosition(positionX);
};
/* Returns the new position of the container with inertia */
Container.prototype.getInertia = function () {
var distance = this.getDistance();
var currentTime = new Date().getTime();
var tapLength = currentTime - this.startTime;
var inertia = (distance / tapLength) * 100;
return this.initialPositionX - inertia;
};
Container.prototype.getAlignedPositionOnPull = function (newPositionX) {
var direction = this.getDirection();
if (direction === 'left') {
var endPosition = this.getEndPosition();
if (newPositionX < endPosition) {
return endPosition;
}
}
if (direction === 'right') {
if (newPositionX > 0) {
return 0;
}
}
return newPositionX;
};
Container.prototype.getCurrentPositionX = function () {
var parentPosition = this.element.parentElement.getBoundingClientRect();
var position = this.element.getBoundingClientRect();
return position.left - parentPosition.left;
};
Container.prototype.getEndPosition = function () {
if (this.isLightDOM) {
var imagesInContainer = this.cells.imageUtils.getImages();
return -(imagesInContainer.length * this.fullCellWidth - this.visibleWidth - this.margin);
}
else {
var width = this.getWidth();
var visibleWidth = this.element.parentElement.clientWidth;
return visibleWidth - width;
}
};
Container.prototype.transformPositionX = function (value, duration) {
if (duration === void 0) { duration = this.transitionDuration; }
if (value === undefined) {
return;
}
this.element.style.transition = 'transform ' + duration + 'ms ' + this.transitionTimingFunction;
this.element.style.transform = 'translateX(' + value + 'px)';
};
Container.prototype.getWidth = function () {
var width = this.cellLengthInLightDOMMode * this.fullCellWidth;
var totalImageWidth = this.cellLength * this.fullCellWidth;
if (totalImageWidth < width) {
width = totalImageWidth;
}
return this.isLightDOM ? width : totalImageWidth;
};
Container.prototype.setWidth = function () {
var width = this.getWidth();
this.element.style.width = width + "px";
};
Container.prototype.setInitialPosition = function (position) {
this.initialPositionX = position;
};
Container.prototype.getElementPosition = function () {
return this.element.getBoundingClientRect();
};
Container.prototype.getInitialElementPositionX = function () {
var carouselElementPosition = this.utils.getCarouselElementPosition()['left'];
return this.getElementPosition()['left'] - carouselElementPosition;
};
Container.prototype.clearInitialValues = function () {
this.startX = this.moveX = 0;
};
Container.prototype.getDirection = function () {
var direction = Math.sign(this.startX - this.moveX);
if (direction === -1) {
return 'right';
}
if (direction === 1) {
return 'left';
}
return undefined;
};
return Container;
}());
var ImageUtils = /** @class */ (function () {
function ImageUtils(element) {
this.cellStack = [];
this.element = element;
}
ImageUtils.prototype.getImages = function () {
return this.cellStack.filter(this.filter);
};
ImageUtils.prototype.filter = function (cell) {
return cell.img !== undefined;
};
return ImageUtils;
}());
var Cells = /** @class */ (function () {
function Cells(carouselProperties, utils) {
this.carouselProperties = carouselProperties;
this.utils = utils;
this.counter = 0;
this.imageUtils = new ImageUtils(this.element);
this.init(carouselProperties);
}
Object.defineProperty(Cells.prototype, "images", {
get: function () {
return this.carouselProperties.images;
},
enumerable: false,
configurable: true
});
Object.defineProperty(Cells.prototype, "cellLength", {
get: function () {
return this.cells ? this.cells.length : 0;
},
enumerable: false,
configurable: true
});
Object.defineProperty(Cells.prototype, "fullCellWidth", {
get: function () {
return this.carouselProperties.cellWidth + this.carouselProperties.margin;
},
enumerable: false,
configurable: true
});
Object.defineProperty(Cells.prototype, "cellLengthInLightDOMMode", {
get: function () {
if (this.images) {
var cellLength = this.numberOfVisibleCells + this.overflowCellsLimit * 2;
if (cellLength > this.images.length) {
cellLength = this.images.length;
}
return cellLength;
}
else {
return this.cellLength;
}
},
enumerable: false,
configurable: true
});
Object.defineProperty(Cells.prototype, "numberOfVisibleCells", {
get: function () {
return this.utils.numberOfVisibleCells;
},
enumerable: false,
configurable: true
});
Object.defineProperty(Cells.prototype, "overflowCellsLimit", {
get: function () {
return this.utils.overflowCellsLimit;
},
enumerable: false,
configurable: true
});
Object.defineProperty(Cells.prototype, "isLightDOM", {
get: function () {
return this.carouselProperties.lightDOM || this.carouselProperties.loop;
},
enumerable: false,
configurable: true
});
Cells.prototype.updateProperties = function (carouselProperties) {
this.carouselProperties = carouselProperties;
};
Cells.prototype.lineUp = function () {
var cells = this.element ? this.element.children : [];
this.imageUtils.cellStack = [];
for (var i = 0; i < cells.length; i++) {
var cell = cells[i];
var positionX = this.getCellPositionInContainer(i);
cell.style.transform = 'translateX(' + positionX + 'px)';
cell.style.width = this.carouselProperties.cellWidth + 'px';
if (this.getImage(i)) {
this.imageUtils.cellStack.push({
index: i,
positionX: positionX,
img: this.getImage(i)['image']
});
}
}
;
};
Cells.prototype.ifSequenceOfCellsIsChanged = function () {
var cells = this.element.children;
return cells[0]['style'].transform !== 'translateX(0px)';
};
Cells.prototype.getCellPositionInContainer = function (cellIndexInDOMTree) {
var positionIndex = this.getCellIndexInContainer(cellIndexInDOMTree);
return positionIndex * this.fullCellWidth;
};
Cells.prototype.getCellIndexInContainer = function (cellIndexInDOMTree) {
var positionIndex;
if (!this.isLightDOM) {
return cellIndexInDOMTree;
}
var cellLength = this.cellLengthInLightDOMMode;
var counter = this.counter - this.overflowCellsLimit;
if (counter > cellLength) {
counter = counter % cellLength;
}
if (counter < 0) {
return cellIndexInDOMTree;
}
else {
positionIndex = cellIndexInDOMTree - counter;
if (positionIndex < 0) {
positionIndex = cellLength + positionIndex;
}
}
return positionIndex;
};
Cells.prototype.getImage = function (cellIndex) {
if (!this.images) {
return;
}
var imageIndex = this.getImageIndex(cellIndex);
var file = this.images[imageIndex];
if (file && !file.type) {
file.type = 'image';
}
return {
image: this.images[imageIndex],
imageIndex: imageIndex
};
};
Cells.prototype.getImageIndex = function (cellIndexInDOMTree) {
var positionIndex = this.getCellIndexInContainer(cellIndexInDOMTree);
var imageIndex;
if (this.counter > this.overflowCellsLimit) {
var cellLimitOverflow = this.counter - this.overflowCellsLimit;
imageIndex = positionIndex + cellLimitOverflow;
if (this.images && this.carouselProperties.loop) {
imageIndex = imageIndex % this.images.length;
}
}
else {
imageIndex = cellIndexInDOMTree;
}
return imageIndex;
};
Cells.prototype.setCounter = function (value) {
this.counter = value;
};
Cells.prototype.init = function (carouselProperties) {
this.element = this.carouselProperties.cellsElement;
this.cells = this.element.children;
this.visibleWidth = this.carouselProperties.visibleWidth || this.element.parentElement.clientWidth;
};
return Cells;
}());
var Slide = /** @class */ (function () {
function Slide(carouselProperties, utils, cells, container) {
this.carouselProperties = carouselProperties;
this.utils = utils;
this.cells = cells;
this.container = container;
this.slideLength = 0;
this.isSlideInProgress = false;
this.counter = 0;
this._counter = 0;
this.distance = 0;
this.distanceAbs = 0;
this.isNotClickOnArrow = false;
this.initialPositionX = 0;
this.currentPositionX = 0;
/* The slide length has been limited by the limitSlideLength() method */
this.isSlideLengthLimited = false;
this.init();
}
Object.defineProperty(Slide.prototype, "fullCellWidth", {
get: function () {
return this.carouselProperties.cellWidth + this.carouselProperties.margin;
},
enumerable: false,
configurable: true
});
Object.defineProperty(Slide.prototype, "margin", {
get: function () {
return this.carouselProperties.margin;
},
enumerable: false,
configurable: true
});
Object.defineProperty(Slide.prototype, "minSwipeDistance", {
get: function () {
return this.carouselProperties.minSwipeDistance;
},
enumerable: false,
configurable: true
});
Object.defineProperty(Slide.prototype, "numberOfVisibleCells", {
get: function () {
return this.utils.numberOfVisibleCells;
},
enumerable: false,
configurable: true
});
Object.defineProperty(Slide.prototype, "visibleCellsOverflowContainer", {
get: function () {
return this.utils.visibleCellsOverflowContainer;
},
enumerable: false,
configurable: true
});
Object.defineProperty(Slide.prototype, "fixedContainerPosition", {
/* The position to which the container returns after each slide
* in the light DUM tree mode.
*/
get: function () {
return -(this.overflowCellsLimit * this.fullCellWidth);
},
enumerable: false,
configurable: true
});
Object.defineProperty(Slide.prototype, "overflowCellsLimit", {
get: function () {
return this.utils.overflowCellsLimit;
},
enumerable: false,
configurable: true
});
Object.defineProperty(Slide.prototype, "images", {
get: function () {
return this.carouselProperties.images;
},
enumerable: false,
configurable: true
});
Object.defineProperty(Slide.prototype, "cellLength", {
/* Number of cell elements in the DUM tree */
get: function () {
if (this.isLightDOM) {
return this.cells.cellLengthInLightDOMMode;
}
else {
if (this.images) {
return this.images.length;
}
else {
return this.cells.cellLength;
}
}
},
enumerable: false,
configurable: true
});
Object.defineProperty(Slide.prototype, "isLightDOM", {
get: function () {
return this.carouselProperties.lightDOM || this.carouselProperties.loop;
},
enumerable: false,
configurable: true
});
Slide.prototype.updateProperties = function (carouselProperties) {
this.carouselProperties = carouselProperties;
this.setVisibleWidth();
};
Slide.prototype.init = function () {
this.visibleWidth = this.carouselProperties.visibleWidth || this.carouselProperties.hostElement.clientWidth;
};
Slide.prototype.handleTouchstart = function () {
/* Touchstart event is not called for arrow */
this.isNotClickOnArrow = true;
this.isSlideLengthLimited = false;
if (!this.isSlideInProgress) {
this.initialPositionX = this.container.getCurrentPositionX();
}
};
Slide.prototype.handleTouchend = function () {
if (!this.isNotClickOnArrow) {
return;
}
this.currentPositionX = this.container.getCurrentPositionX();
this.dist