first commit
This commit is contained in:
@@ -0,0 +1,390 @@
|
||||
"use strict";
|
||||
|
||||
exports.__esModule = true;
|
||||
exports.default = void 0;
|
||||
|
||||
var _dom = _interopRequireDefault(require("../../utils/dom"));
|
||||
|
||||
var _utils = require("../../utils/utils");
|
||||
|
||||
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
||||
|
||||
function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
|
||||
|
||||
var Pagination = {
|
||||
update: function update() {
|
||||
// Render || Update Pagination bullets/items
|
||||
var swiper = this;
|
||||
var rtl = swiper.rtl;
|
||||
var params = swiper.params.pagination;
|
||||
if (!params.el || !swiper.pagination.el || !swiper.pagination.$el || swiper.pagination.$el.length === 0) return;
|
||||
var slidesLength = swiper.virtual && swiper.params.virtual.enabled ? swiper.virtual.slides.length : swiper.slides.length;
|
||||
var $el = swiper.pagination.$el; // Current/Total
|
||||
|
||||
var current;
|
||||
var total = swiper.params.loop ? Math.ceil((slidesLength - swiper.loopedSlides * 2) / swiper.params.slidesPerGroup) : swiper.snapGrid.length;
|
||||
|
||||
if (swiper.params.loop) {
|
||||
current = Math.ceil((swiper.activeIndex - swiper.loopedSlides) / swiper.params.slidesPerGroup);
|
||||
|
||||
if (current > slidesLength - 1 - swiper.loopedSlides * 2) {
|
||||
current -= slidesLength - swiper.loopedSlides * 2;
|
||||
}
|
||||
|
||||
if (current > total - 1) current -= total;
|
||||
if (current < 0 && swiper.params.paginationType !== 'bullets') current = total + current;
|
||||
} else if (typeof swiper.snapIndex !== 'undefined') {
|
||||
current = swiper.snapIndex;
|
||||
} else {
|
||||
current = swiper.activeIndex || 0;
|
||||
} // Types
|
||||
|
||||
|
||||
if (params.type === 'bullets' && swiper.pagination.bullets && swiper.pagination.bullets.length > 0) {
|
||||
var bullets = swiper.pagination.bullets;
|
||||
var firstIndex;
|
||||
var lastIndex;
|
||||
var midIndex;
|
||||
|
||||
if (params.dynamicBullets) {
|
||||
swiper.pagination.bulletSize = bullets.eq(0)[swiper.isHorizontal() ? 'outerWidth' : 'outerHeight'](true);
|
||||
$el.css(swiper.isHorizontal() ? 'width' : 'height', swiper.pagination.bulletSize * (params.dynamicMainBullets + 4) + "px");
|
||||
|
||||
if (params.dynamicMainBullets > 1 && swiper.previousIndex !== undefined) {
|
||||
swiper.pagination.dynamicBulletIndex += current - swiper.previousIndex;
|
||||
|
||||
if (swiper.pagination.dynamicBulletIndex > params.dynamicMainBullets - 1) {
|
||||
swiper.pagination.dynamicBulletIndex = params.dynamicMainBullets - 1;
|
||||
} else if (swiper.pagination.dynamicBulletIndex < 0) {
|
||||
swiper.pagination.dynamicBulletIndex = 0;
|
||||
}
|
||||
}
|
||||
|
||||
firstIndex = current - swiper.pagination.dynamicBulletIndex;
|
||||
lastIndex = firstIndex + (Math.min(bullets.length, params.dynamicMainBullets) - 1);
|
||||
midIndex = (lastIndex + firstIndex) / 2;
|
||||
}
|
||||
|
||||
bullets.removeClass(params.bulletActiveClass + " " + params.bulletActiveClass + "-next " + params.bulletActiveClass + "-next-next " + params.bulletActiveClass + "-prev " + params.bulletActiveClass + "-prev-prev " + params.bulletActiveClass + "-main");
|
||||
|
||||
if ($el.length > 1) {
|
||||
bullets.each(function (bullet) {
|
||||
var $bullet = (0, _dom.default)(bullet);
|
||||
var bulletIndex = $bullet.index();
|
||||
|
||||
if (bulletIndex === current) {
|
||||
$bullet.addClass(params.bulletActiveClass);
|
||||
}
|
||||
|
||||
if (params.dynamicBullets) {
|
||||
if (bulletIndex >= firstIndex && bulletIndex <= lastIndex) {
|
||||
$bullet.addClass(params.bulletActiveClass + "-main");
|
||||
}
|
||||
|
||||
if (bulletIndex === firstIndex) {
|
||||
$bullet.prev().addClass(params.bulletActiveClass + "-prev").prev().addClass(params.bulletActiveClass + "-prev-prev");
|
||||
}
|
||||
|
||||
if (bulletIndex === lastIndex) {
|
||||
$bullet.next().addClass(params.bulletActiveClass + "-next").next().addClass(params.bulletActiveClass + "-next-next");
|
||||
}
|
||||
}
|
||||
});
|
||||
} else {
|
||||
var $bullet = bullets.eq(current);
|
||||
var bulletIndex = $bullet.index();
|
||||
$bullet.addClass(params.bulletActiveClass);
|
||||
|
||||
if (params.dynamicBullets) {
|
||||
var $firstDisplayedBullet = bullets.eq(firstIndex);
|
||||
var $lastDisplayedBullet = bullets.eq(lastIndex);
|
||||
|
||||
for (var i = firstIndex; i <= lastIndex; i += 1) {
|
||||
bullets.eq(i).addClass(params.bulletActiveClass + "-main");
|
||||
}
|
||||
|
||||
if (swiper.params.loop) {
|
||||
if (bulletIndex >= bullets.length - params.dynamicMainBullets) {
|
||||
for (var _i = params.dynamicMainBullets; _i >= 0; _i -= 1) {
|
||||
bullets.eq(bullets.length - _i).addClass(params.bulletActiveClass + "-main");
|
||||
}
|
||||
|
||||
bullets.eq(bullets.length - params.dynamicMainBullets - 1).addClass(params.bulletActiveClass + "-prev");
|
||||
} else {
|
||||
$firstDisplayedBullet.prev().addClass(params.bulletActiveClass + "-prev").prev().addClass(params.bulletActiveClass + "-prev-prev");
|
||||
$lastDisplayedBullet.next().addClass(params.bulletActiveClass + "-next").next().addClass(params.bulletActiveClass + "-next-next");
|
||||
}
|
||||
} else {
|
||||
$firstDisplayedBullet.prev().addClass(params.bulletActiveClass + "-prev").prev().addClass(params.bulletActiveClass + "-prev-prev");
|
||||
$lastDisplayedBullet.next().addClass(params.bulletActiveClass + "-next").next().addClass(params.bulletActiveClass + "-next-next");
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
if (params.dynamicBullets) {
|
||||
var dynamicBulletsLength = Math.min(bullets.length, params.dynamicMainBullets + 4);
|
||||
var bulletsOffset = (swiper.pagination.bulletSize * dynamicBulletsLength - swiper.pagination.bulletSize) / 2 - midIndex * swiper.pagination.bulletSize;
|
||||
var offsetProp = rtl ? 'right' : 'left';
|
||||
bullets.css(swiper.isHorizontal() ? offsetProp : 'top', bulletsOffset + "px");
|
||||
}
|
||||
}
|
||||
|
||||
if (params.type === 'fraction') {
|
||||
$el.find((0, _utils.classesToSelector)(params.currentClass)).text(params.formatFractionCurrent(current + 1));
|
||||
$el.find((0, _utils.classesToSelector)(params.totalClass)).text(params.formatFractionTotal(total));
|
||||
}
|
||||
|
||||
if (params.type === 'progressbar') {
|
||||
var progressbarDirection;
|
||||
|
||||
if (params.progressbarOpposite) {
|
||||
progressbarDirection = swiper.isHorizontal() ? 'vertical' : 'horizontal';
|
||||
} else {
|
||||
progressbarDirection = swiper.isHorizontal() ? 'horizontal' : 'vertical';
|
||||
}
|
||||
|
||||
var scale = (current + 1) / total;
|
||||
var scaleX = 1;
|
||||
var scaleY = 1;
|
||||
|
||||
if (progressbarDirection === 'horizontal') {
|
||||
scaleX = scale;
|
||||
} else {
|
||||
scaleY = scale;
|
||||
}
|
||||
|
||||
$el.find((0, _utils.classesToSelector)(params.progressbarFillClass)).transform("translate3d(0,0,0) scaleX(" + scaleX + ") scaleY(" + scaleY + ")").transition(swiper.params.speed);
|
||||
}
|
||||
|
||||
if (params.type === 'custom' && params.renderCustom) {
|
||||
$el.html(params.renderCustom(swiper, current + 1, total));
|
||||
swiper.emit('paginationRender', $el[0]);
|
||||
} else {
|
||||
swiper.emit('paginationUpdate', $el[0]);
|
||||
}
|
||||
|
||||
if (swiper.params.watchOverflow && swiper.enabled) {
|
||||
$el[swiper.isLocked ? 'addClass' : 'removeClass'](params.lockClass);
|
||||
}
|
||||
},
|
||||
render: function render() {
|
||||
// Render Container
|
||||
var swiper = this;
|
||||
var params = swiper.params.pagination;
|
||||
if (!params.el || !swiper.pagination.el || !swiper.pagination.$el || swiper.pagination.$el.length === 0) return;
|
||||
var slidesLength = swiper.virtual && swiper.params.virtual.enabled ? swiper.virtual.slides.length : swiper.slides.length;
|
||||
var $el = swiper.pagination.$el;
|
||||
var paginationHTML = '';
|
||||
|
||||
if (params.type === 'bullets') {
|
||||
var numberOfBullets = swiper.params.loop ? Math.ceil((slidesLength - swiper.loopedSlides * 2) / swiper.params.slidesPerGroup) : swiper.snapGrid.length;
|
||||
|
||||
if (swiper.params.freeMode && !swiper.params.loop && numberOfBullets > slidesLength) {
|
||||
numberOfBullets = slidesLength;
|
||||
}
|
||||
|
||||
for (var i = 0; i < numberOfBullets; i += 1) {
|
||||
if (params.renderBullet) {
|
||||
paginationHTML += params.renderBullet.call(swiper, i, params.bulletClass);
|
||||
} else {
|
||||
paginationHTML += "<" + params.bulletElement + " class=\"" + params.bulletClass + "\"></" + params.bulletElement + ">";
|
||||
}
|
||||
}
|
||||
|
||||
$el.html(paginationHTML);
|
||||
swiper.pagination.bullets = $el.find((0, _utils.classesToSelector)(params.bulletClass));
|
||||
}
|
||||
|
||||
if (params.type === 'fraction') {
|
||||
if (params.renderFraction) {
|
||||
paginationHTML = params.renderFraction.call(swiper, params.currentClass, params.totalClass);
|
||||
} else {
|
||||
paginationHTML = "<span class=\"" + params.currentClass + "\"></span>" + ' / ' + ("<span class=\"" + params.totalClass + "\"></span>");
|
||||
}
|
||||
|
||||
$el.html(paginationHTML);
|
||||
}
|
||||
|
||||
if (params.type === 'progressbar') {
|
||||
if (params.renderProgressbar) {
|
||||
paginationHTML = params.renderProgressbar.call(swiper, params.progressbarFillClass);
|
||||
} else {
|
||||
paginationHTML = "<span class=\"" + params.progressbarFillClass + "\"></span>";
|
||||
}
|
||||
|
||||
$el.html(paginationHTML);
|
||||
}
|
||||
|
||||
if (params.type !== 'custom') {
|
||||
swiper.emit('paginationRender', swiper.pagination.$el[0]);
|
||||
}
|
||||
},
|
||||
init: function init() {
|
||||
var swiper = this;
|
||||
swiper.params.pagination = (0, _utils.createElementIfNotDefined)(swiper.$el, swiper.params.pagination, swiper.params.createElements, {
|
||||
el: 'swiper-pagination'
|
||||
});
|
||||
var params = swiper.params.pagination;
|
||||
if (!params.el) return;
|
||||
var $el = (0, _dom.default)(params.el);
|
||||
if ($el.length === 0) return;
|
||||
|
||||
if (swiper.params.uniqueNavElements && typeof params.el === 'string' && $el.length > 1) {
|
||||
$el = swiper.$el.find(params.el);
|
||||
}
|
||||
|
||||
if (params.type === 'bullets' && params.clickable) {
|
||||
$el.addClass(params.clickableClass);
|
||||
}
|
||||
|
||||
$el.addClass(params.modifierClass + params.type);
|
||||
|
||||
if (params.type === 'bullets' && params.dynamicBullets) {
|
||||
$el.addClass("" + params.modifierClass + params.type + "-dynamic");
|
||||
swiper.pagination.dynamicBulletIndex = 0;
|
||||
|
||||
if (params.dynamicMainBullets < 1) {
|
||||
params.dynamicMainBullets = 1;
|
||||
}
|
||||
}
|
||||
|
||||
if (params.type === 'progressbar' && params.progressbarOpposite) {
|
||||
$el.addClass(params.progressbarOppositeClass);
|
||||
}
|
||||
|
||||
if (params.clickable) {
|
||||
$el.on('click', (0, _utils.classesToSelector)(params.bulletClass), function onClick(e) {
|
||||
e.preventDefault();
|
||||
var index = (0, _dom.default)(this).index() * swiper.params.slidesPerGroup;
|
||||
if (swiper.params.loop) index += swiper.loopedSlides;
|
||||
swiper.slideTo(index);
|
||||
});
|
||||
}
|
||||
|
||||
(0, _utils.extend)(swiper.pagination, {
|
||||
$el: $el,
|
||||
el: $el[0]
|
||||
});
|
||||
|
||||
if (!swiper.enabled) {
|
||||
$el.addClass(params.lockClass);
|
||||
}
|
||||
},
|
||||
destroy: function destroy() {
|
||||
var swiper = this;
|
||||
var params = swiper.params.pagination;
|
||||
if (!params.el || !swiper.pagination.el || !swiper.pagination.$el || swiper.pagination.$el.length === 0) return;
|
||||
var $el = swiper.pagination.$el;
|
||||
$el.removeClass(params.hiddenClass);
|
||||
$el.removeClass(params.modifierClass + params.type);
|
||||
if (swiper.pagination.bullets) swiper.pagination.bullets.removeClass(params.bulletActiveClass);
|
||||
|
||||
if (params.clickable) {
|
||||
$el.off('click', (0, _utils.classesToSelector)(params.bulletClass));
|
||||
}
|
||||
}
|
||||
};
|
||||
var _default = {
|
||||
name: 'pagination',
|
||||
params: {
|
||||
pagination: {
|
||||
el: null,
|
||||
bulletElement: 'span',
|
||||
clickable: false,
|
||||
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 formatFractionCurrent(number) {
|
||||
return number;
|
||||
},
|
||||
formatFractionTotal: function formatFractionTotal(number) {
|
||||
return number;
|
||||
},
|
||||
bulletClass: 'swiper-pagination-bullet',
|
||||
bulletActiveClass: 'swiper-pagination-bullet-active',
|
||||
modifierClass: 'swiper-pagination-',
|
||||
// NEW
|
||||
currentClass: 'swiper-pagination-current',
|
||||
totalClass: 'swiper-pagination-total',
|
||||
hiddenClass: 'swiper-pagination-hidden',
|
||||
progressbarFillClass: 'swiper-pagination-progressbar-fill',
|
||||
progressbarOppositeClass: 'swiper-pagination-progressbar-opposite',
|
||||
clickableClass: 'swiper-pagination-clickable',
|
||||
// NEW
|
||||
lockClass: 'swiper-pagination-lock'
|
||||
}
|
||||
},
|
||||
create: function create() {
|
||||
var swiper = this;
|
||||
(0, _utils.bindModuleMethods)(swiper, {
|
||||
pagination: _extends({
|
||||
dynamicBulletIndex: 0
|
||||
}, Pagination)
|
||||
});
|
||||
},
|
||||
on: {
|
||||
init: function init(swiper) {
|
||||
swiper.pagination.init();
|
||||
swiper.pagination.render();
|
||||
swiper.pagination.update();
|
||||
},
|
||||
activeIndexChange: function activeIndexChange(swiper) {
|
||||
if (swiper.params.loop) {
|
||||
swiper.pagination.update();
|
||||
} else if (typeof swiper.snapIndex === 'undefined') {
|
||||
swiper.pagination.update();
|
||||
}
|
||||
},
|
||||
snapIndexChange: function snapIndexChange(swiper) {
|
||||
if (!swiper.params.loop) {
|
||||
swiper.pagination.update();
|
||||
}
|
||||
},
|
||||
slidesLengthChange: function slidesLengthChange(swiper) {
|
||||
if (swiper.params.loop) {
|
||||
swiper.pagination.render();
|
||||
swiper.pagination.update();
|
||||
}
|
||||
},
|
||||
snapGridLengthChange: function snapGridLengthChange(swiper) {
|
||||
if (!swiper.params.loop) {
|
||||
swiper.pagination.render();
|
||||
swiper.pagination.update();
|
||||
}
|
||||
},
|
||||
destroy: function destroy(swiper) {
|
||||
swiper.pagination.destroy();
|
||||
},
|
||||
'enable disable': function enableDisable(swiper) {
|
||||
var $el = swiper.pagination.$el;
|
||||
|
||||
if ($el) {
|
||||
$el[swiper.enabled ? 'removeClass' : 'addClass'](swiper.params.pagination.lockClass);
|
||||
}
|
||||
},
|
||||
click: function click(swiper, e) {
|
||||
var targetEl = e.target;
|
||||
|
||||
if (swiper.params.pagination.el && swiper.params.pagination.hideOnClick && swiper.pagination.$el.length > 0 && !(0, _dom.default)(targetEl).hasClass(swiper.params.pagination.bulletClass)) {
|
||||
if (swiper.navigation && (swiper.navigation.nextEl && targetEl === swiper.navigation.nextEl || swiper.navigation.prevEl && targetEl === swiper.navigation.prevEl)) return;
|
||||
var isHidden = swiper.pagination.$el.hasClass(swiper.params.pagination.hiddenClass);
|
||||
|
||||
if (isHidden === true) {
|
||||
swiper.emit('paginationShow');
|
||||
} else {
|
||||
swiper.emit('paginationHide');
|
||||
}
|
||||
|
||||
swiper.pagination.$el.toggleClass(swiper.params.pagination.hiddenClass);
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
exports.default = _default;
|
||||
Reference in New Issue
Block a user