infinity-forge
Version:
513 lines • 22.3 kB
JavaScript
;
var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
if (ar || !(i in from)) {
if (!ar) ar = Array.prototype.slice.call(from, 0, i);
ar[i] = from[i];
}
}
return to.concat(ar || Array.prototype.slice.call(from));
};
var __importDefault = (this && this.__importDefault) || function (mod) {
return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.Pagination = Pagination;
var classes_to_selector_1 = __importDefault(require("../shared/classes-to-selector.js"));
var create_element_if_not_defined_1 = __importDefault(require("../shared/create-element-if-not-defined.js"));
var utils_1 = require("../shared/utils.js");
function Pagination(_a) {
var swiper = _a.swiper, extendParams = _a.extendParams, on = _a.on, emit = _a.emit;
var pfx = 'swiper-pagination';
extendParams({
pagination: {
el: null,
bulletElement: 'span',
clickable: true,
hideOnClick: false,
renderBullet: null,
renderProgressbar: null,
renderFraction: null,
renderCustom: null,
progressbarOpposite: false,
type: 'bullets', // 'bullets' or 'progressbar' or 'fraction' or 'custom'
dynamicBullets: false,
dynamicMainBullets: 1,
formatFractionCurrent: function (number) { return number; },
formatFractionTotal: function (number) { return number; },
bulletClass: "".concat(pfx, "-bullet"),
bulletActiveClass: "".concat(pfx, "-bullet-active"),
modifierClass: "".concat(pfx, "-"),
currentClass: "".concat(pfx, "-current"),
totalClass: "".concat(pfx, "-total"),
hiddenClass: "".concat(pfx, "-hidden"),
progressbarFillClass: "".concat(pfx, "-progressbar-fill"),
progressbarOppositeClass: "".concat(pfx, "-progressbar-opposite"),
clickableClass: "".concat(pfx, "-clickable"),
lockClass: "".concat(pfx, "-lock"),
horizontalClass: "".concat(pfx, "-horizontal"),
verticalClass: "".concat(pfx, "-vertical"),
paginationDisabledClass: "".concat(pfx, "-disabled"),
},
});
swiper.pagination = {
el: null,
bullets: [],
};
var bulletSize;
var dynamicBulletIndex = 0;
function isPaginationDisabled() {
return (!swiper.params.pagination.el ||
!swiper.pagination.el ||
(Array.isArray(swiper.pagination.el) && swiper.pagination.el.length === 0));
}
function setSideBullets(bulletEl, position) {
var bulletActiveClass = swiper.params.pagination.bulletActiveClass;
if (!bulletEl)
return;
bulletEl = bulletEl["".concat(position === 'prev' ? 'previous' : 'next', "ElementSibling")];
if (bulletEl) {
bulletEl.classList.add("".concat(bulletActiveClass, "-").concat(position));
bulletEl = bulletEl["".concat(position === 'prev' ? 'previous' : 'next', "ElementSibling")];
if (bulletEl) {
bulletEl.classList.add("".concat(bulletActiveClass, "-").concat(position, "-").concat(position));
}
}
}
function onBulletClick(e) {
var bulletEl = e.target.closest((0, classes_to_selector_1.default)(swiper.params.pagination.bulletClass));
if (!bulletEl) {
return;
}
e.preventDefault();
var index = (0, utils_1.elementIndex)(bulletEl) * swiper.params.slidesPerGroup;
if (swiper.params.loop) {
if (swiper.realIndex === index)
return;
swiper.slideToLoop(index);
}
else {
swiper.slideTo(index);
}
}
function update() {
var _a, _b;
// Render || Update Pagination bullets/items
var rtl = swiper.rtl;
var params = swiper.params.pagination;
if (isPaginationDisabled())
return;
var el = swiper.pagination.el;
el = (0, utils_1.makeElementsArray)(el);
// Current/Total
var current;
var previousIndex;
var slidesLength = swiper.virtual && swiper.params.virtual.enabled
? swiper.virtual.slides.length
: swiper.slides.length;
var total = swiper.params.loop
? Math.ceil(slidesLength / swiper.params.slidesPerGroup)
: swiper.snapGrid.length;
if (swiper.params.loop) {
previousIndex = swiper.previousRealIndex || 0;
current =
swiper.params.slidesPerGroup > 1
? Math.floor(swiper.realIndex / swiper.params.slidesPerGroup)
: swiper.realIndex;
}
else if (typeof swiper.snapIndex !== 'undefined') {
current = swiper.snapIndex;
previousIndex = swiper.previousSnapIndex;
}
else {
previousIndex = swiper.previousIndex || 0;
current = swiper.activeIndex || 0;
}
// Types
if (params.type === 'bullets' &&
swiper.pagination.bullets &&
swiper.pagination.bullets.length > 0) {
var bullets = swiper.pagination.bullets;
var firstIndex_1;
var lastIndex_1;
var midIndex = void 0;
if (params.dynamicBullets) {
bulletSize = (0, utils_1.elementOuterSize)(bullets[0], swiper.isHorizontal() ? 'width' : 'height', true);
el.forEach(function (subEl) {
subEl.style[swiper.isHorizontal() ? 'width' : 'height'] = "".concat(bulletSize * (params.dynamicMainBullets + 4), "px");
});
if (params.dynamicMainBullets > 1 && previousIndex !== undefined) {
dynamicBulletIndex += current - (previousIndex || 0);
if (dynamicBulletIndex > params.dynamicMainBullets - 1) {
dynamicBulletIndex = params.dynamicMainBullets - 1;
}
else if (dynamicBulletIndex < 0) {
dynamicBulletIndex = 0;
}
}
firstIndex_1 = Math.max(current - dynamicBulletIndex, 0);
lastIndex_1 = firstIndex_1 + (Math.min(bullets.length, params.dynamicMainBullets) - 1);
midIndex = (lastIndex_1 + firstIndex_1) / 2;
}
bullets.forEach(function (bulletEl) {
var _a;
var classesToRemove = __spreadArray([], ['', '-next', '-next-next', '-prev', '-prev-prev', '-main'].map(function (suffix) { return "".concat(params.bulletActiveClass).concat(suffix); }), true).map(function (s) { return (typeof s === 'string' && s.includes(' ') ? s.split(' ') : s); })
.flat();
(_a = bulletEl.classList).remove.apply(_a, classesToRemove);
});
if (el.length > 1) {
bullets.forEach(function (bullet) {
var _a, _b;
var bulletIndex = (0, utils_1.elementIndex)(bullet);
if (bulletIndex === current) {
(_a = bullet.classList).add.apply(_a, params.bulletActiveClass.split(' '));
}
else if (swiper.isElement) {
bullet.setAttribute('part', 'bullet');
}
if (params.dynamicBullets) {
if (bulletIndex >= firstIndex_1 && bulletIndex <= lastIndex_1) {
(_b = bullet.classList).add.apply(_b, "".concat(params.bulletActiveClass, "-main").split(' '));
}
if (bulletIndex === firstIndex_1) {
setSideBullets(bullet, 'prev');
}
if (bulletIndex === lastIndex_1) {
setSideBullets(bullet, 'next');
}
}
});
}
else {
var bullet = bullets[current];
if (bullet) {
(_a = bullet.classList).add.apply(_a, params.bulletActiveClass.split(' '));
}
if (swiper.isElement) {
bullets.forEach(function (bulletEl, bulletIndex) {
bulletEl.setAttribute('part', bulletIndex === current ? 'bullet-active' : 'bullet');
});
}
if (params.dynamicBullets) {
var firstDisplayedBullet = bullets[firstIndex_1];
var lastDisplayedBullet = bullets[lastIndex_1];
for (var i = firstIndex_1; i <= lastIndex_1; i += 1) {
if (bullets[i]) {
(_b = bullets[i].classList).add.apply(_b, "".concat(params.bulletActiveClass, "-main").split(' '));
}
}
setSideBullets(firstDisplayedBullet, 'prev');
setSideBullets(lastDisplayedBullet, 'next');
}
}
if (params.dynamicBullets) {
var dynamicBulletsLength = Math.min(bullets.length, params.dynamicMainBullets + 4);
var bulletsOffset_1 = (bulletSize * dynamicBulletsLength - bulletSize) / 2 - midIndex * bulletSize;
var offsetProp_1 = rtl ? 'right' : 'left';
bullets.forEach(function (bullet) {
bullet.style[swiper.isHorizontal() ? offsetProp_1 : 'top'] = "".concat(bulletsOffset_1, "px");
});
}
}
el.forEach(function (subEl, subElIndex) {
if (params.type === 'fraction') {
subEl.querySelectorAll((0, classes_to_selector_1.default)(params.currentClass)).forEach(function (fractionEl) {
fractionEl.textContent = params.formatFractionCurrent(current + 1);
});
subEl.querySelectorAll((0, classes_to_selector_1.default)(params.totalClass)).forEach(function (totalEl) {
totalEl.textContent = params.formatFractionTotal(total);
});
}
if (params.type === 'progressbar') {
var progressbarDirection = void 0;
if (params.progressbarOpposite) {
progressbarDirection = swiper.isHorizontal() ? 'vertical' : 'horizontal';
}
else {
progressbarDirection = swiper.isHorizontal() ? 'horizontal' : 'vertical';
}
var scale = (current + 1) / total;
var scaleX_1 = 1;
var scaleY_1 = 1;
if (progressbarDirection === 'horizontal') {
scaleX_1 = scale;
}
else {
scaleY_1 = scale;
}
subEl
.querySelectorAll((0, classes_to_selector_1.default)(params.progressbarFillClass))
.forEach(function (progressEl) {
progressEl.style.transform = "translate3d(0,0,0) scaleX(".concat(scaleX_1, ") scaleY(").concat(scaleY_1, ")");
progressEl.style.transitionDuration = "".concat(swiper.params.speed, "ms");
});
}
if (params.type === 'custom' && params.renderCustom) {
subEl.innerHTML = params.renderCustom(swiper, current + 1, total);
if (subElIndex === 0)
emit('paginationRender', subEl);
}
else {
if (subElIndex === 0)
emit('paginationRender', subEl);
emit('paginationUpdate', subEl);
}
if (swiper.params.watchOverflow && swiper.enabled) {
subEl.classList[swiper.isLocked ? 'add' : 'remove'](params.lockClass);
}
});
}
function render() {
// Render Container
var params = swiper.params.pagination;
if (isPaginationDisabled())
return;
var slidesLength = swiper.virtual && swiper.params.virtual.enabled
? swiper.virtual.slides.length
: swiper.grid && swiper.params.grid.rows > 1
? swiper.slides.length / Math.ceil(swiper.params.grid.rows)
: swiper.slides.length;
var el = swiper.pagination.el;
el = (0, utils_1.makeElementsArray)(el);
var paginationHTML = '';
if (params.type === 'bullets') {
var numberOfBullets = swiper.params.loop
? Math.ceil(slidesLength / swiper.params.slidesPerGroup)
: swiper.snapGrid.length;
if (swiper.params.freeMode &&
swiper.params.freeMode.enabled &&
numberOfBullets > slidesLength) {
numberOfBullets = slidesLength;
}
for (var i = 0; i < numberOfBullets; i += 1) {
if (params.renderBullet) {
paginationHTML += params.renderBullet.call(swiper, i, params.bulletClass);
}
else {
// prettier-ignore
paginationHTML += "<".concat(params.bulletElement, " ").concat(swiper.isElement ? 'part="bullet"' : '', " class=\"").concat(params.bulletClass, "\"></").concat(params.bulletElement, ">");
}
}
}
if (params.type === 'fraction') {
if (params.renderFraction) {
paginationHTML = params.renderFraction.call(swiper, params.currentClass, params.totalClass);
}
else {
paginationHTML =
"<span class=\"".concat(params.currentClass, "\"></span>") +
' / ' +
"<span class=\"".concat(params.totalClass, "\"></span>");
}
}
if (params.type === 'progressbar') {
if (params.renderProgressbar) {
paginationHTML = params.renderProgressbar.call(swiper, params.progressbarFillClass);
}
else {
paginationHTML = "<span class=\"".concat(params.progressbarFillClass, "\"></span>");
}
}
swiper.pagination.bullets = [];
el.forEach(function (subEl) {
var _a;
if (params.type !== 'custom') {
subEl.innerHTML = paginationHTML || '';
}
if (params.type === 'bullets') {
(_a = swiper.pagination.bullets).push.apply(_a, subEl.querySelectorAll((0, classes_to_selector_1.default)(params.bulletClass)));
}
});
if (params.type !== 'custom') {
emit('paginationRender', el[0]);
}
}
function init() {
swiper.params.pagination = (0, create_element_if_not_defined_1.default)(swiper, swiper.originalParams.pagination, swiper.params.pagination, { el: 'swiper-pagination' });
var params = swiper.params.pagination;
if (!params.el)
return;
var el;
if (typeof params.el === 'string' && swiper.isElement) {
el = swiper.el.querySelector(params.el);
}
if (!el && typeof params.el === 'string') {
el = __spreadArray([], document.querySelectorAll(params.el), true);
}
if (!el) {
el = params.el;
}
if (!el || el.length === 0)
return;
if (swiper.params.uniqueNavElements &&
typeof params.el === 'string' &&
Array.isArray(el) &&
el.length > 1) {
el = __spreadArray([], swiper.el.querySelectorAll(params.el), true);
// check if it belongs to another nested Swiper
if (el.length > 1) {
el = el.filter(function (subEl) {
if ((0, utils_1.elementParents)(subEl, '.swiper')[0] !== swiper.el)
return false;
return true;
})[0];
}
}
if (Array.isArray(el) && el.length === 1)
el = el[0];
Object.assign(swiper.pagination, {
el: el,
});
el = (0, utils_1.makeElementsArray)(el);
el.forEach(function (subEl) {
var _a;
if (params.type === 'bullets' && params.clickable) {
(_a = subEl.classList).add.apply(_a, (params.clickableClass || '').split(' '));
}
subEl.classList.add(params.modifierClass + params.type);
subEl.classList.add(swiper.isHorizontal() ? params.horizontalClass : params.verticalClass);
if (params.type === 'bullets' && params.dynamicBullets) {
subEl.classList.add("".concat(params.modifierClass).concat(params.type, "-dynamic"));
dynamicBulletIndex = 0;
if (params.dynamicMainBullets < 1) {
params.dynamicMainBullets = 1;
}
}
if (params.type === 'progressbar' && params.progressbarOpposite) {
subEl.classList.add(params.progressbarOppositeClass);
}
if (params.clickable) {
subEl.addEventListener('click', onBulletClick);
}
if (!swiper.enabled) {
subEl.classList.add(params.lockClass);
}
});
}
function destroy() {
var params = swiper.params.pagination;
if (isPaginationDisabled())
return;
var el = swiper.pagination.el;
if (el) {
el = (0, utils_1.makeElementsArray)(el);
el.forEach(function (subEl) {
var _a;
subEl.classList.remove(params.hiddenClass);
subEl.classList.remove(params.modifierClass + params.type);
subEl.classList.remove(swiper.isHorizontal() ? params.horizontalClass : params.verticalClass);
if (params.clickable) {
(_a = subEl.classList).remove.apply(_a, (params.clickableClass || '').split(' '));
subEl.removeEventListener('click', onBulletClick);
}
});
}
if (swiper.pagination.bullets)
swiper.pagination.bullets.forEach(function (subEl) {
var _a;
return (_a = subEl.classList).remove.apply(_a, params.bulletActiveClass.split(' '));
});
}
on('changeDirection', function () {
if (!swiper.pagination || !swiper.pagination.el)
return;
var params = swiper.params.pagination;
var el = swiper.pagination.el;
el = (0, utils_1.makeElementsArray)(el);
el.forEach(function (subEl) {
subEl.classList.remove(params.horizontalClass, params.verticalClass);
subEl.classList.add(swiper.isHorizontal() ? params.horizontalClass : params.verticalClass);
});
});
on('init', function () {
if (swiper.params.pagination.enabled === false) {
// eslint-disable-next-line
disable();
}
else {
init();
render();
update();
}
});
on('activeIndexChange', function () {
if (typeof swiper.snapIndex === 'undefined') {
update();
}
});
on('snapIndexChange', function () {
update();
});
on('snapGridLengthChange', function () {
render();
update();
});
on('destroy', function () {
destroy();
});
on('enable disable', function () {
var el = swiper.pagination.el;
if (el) {
el = (0, utils_1.makeElementsArray)(el);
el.forEach(function (subEl) {
return subEl.classList[swiper.enabled ? 'remove' : 'add'](swiper.params.pagination.lockClass);
});
}
});
on('lock unlock', function () {
update();
});
on('click', function (_s, e) {
var targetEl = e.target;
var el = (0, utils_1.makeElementsArray)(swiper.pagination.el);
if (swiper.params.pagination.el &&
swiper.params.pagination.hideOnClick &&
el &&
el.length > 0 &&
!targetEl.classList.contains(swiper.params.pagination.bulletClass)) {
if (swiper.navigation &&
((swiper.navigation.nextEl && targetEl === swiper.navigation.nextEl) ||
(swiper.navigation.prevEl && targetEl === swiper.navigation.prevEl)))
return;
var isHidden = el[0].classList.contains(swiper.params.pagination.hiddenClass);
if (isHidden === true) {
emit('paginationShow');
}
else {
emit('paginationHide');
}
el.forEach(function (subEl) { return subEl.classList.toggle(swiper.params.pagination.hiddenClass); });
}
});
var enable = function () {
swiper.el.classList.remove(swiper.params.pagination.paginationDisabledClass);
var el = swiper.pagination.el;
if (el) {
el = (0, utils_1.makeElementsArray)(el);
el.forEach(function (subEl) {
return subEl.classList.remove(swiper.params.pagination.paginationDisabledClass);
});
}
init();
render();
update();
};
var disable = function () {
swiper.el.classList.add(swiper.params.pagination.paginationDisabledClass);
var el = swiper.pagination.el;
if (el) {
el = (0, utils_1.makeElementsArray)(el);
el.forEach(function (subEl) { return subEl.classList.add(swiper.params.pagination.paginationDisabledClass); });
}
destroy();
};
Object.assign(swiper.pagination, {
enable: enable,
disable: disable,
render: render,
update: update,
init: init,
destroy: destroy,
});
}
//# sourceMappingURL=pagination.js.map