cione-comp-lib
Version:
`$ yarn add cione-comp-lib` 或者 `$ npm i cione-comp-lib -S`
328 lines (327 loc) • 13.8 kB
JavaScript
import "../../utils/dom.mjs";
import { bindModuleMethods, extend } from "../../utils/utils.mjs";
import $ from "../../../../dom7/dom7.esm.mjs";
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() {
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;
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;
}
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 !== void 0) {
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 $bullet2 = $(bullet);
var bulletIndex2 = $bullet2.index();
if (bulletIndex2 === current) {
$bullet2.addClass(params.bulletActiveClass);
}
if (params.dynamicBullets) {
if (bulletIndex2 >= firstIndex && bulletIndex2 <= lastIndex) {
$bullet2.addClass(params.bulletActiveClass + "-main");
}
if (bulletIndex2 === firstIndex) {
$bullet2.prev().addClass(params.bulletActiveClass + "-prev").prev().addClass(params.bulletActiveClass + "-prev-prev");
}
if (bulletIndex2 === lastIndex) {
$bullet2.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("." + params.currentClass).text(params.formatFractionCurrent(current + 1));
$el.find("." + 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("." + 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]);
}
$el[swiper.params.watchOverflow && swiper.isLocked ? "addClass" : "removeClass"](params.lockClass);
},
render: function render() {
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;
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("." + 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;
var params = swiper.params.pagination;
if (!params.el)
return;
var $el = $(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", "." + params.bulletClass, function onClick(e) {
e.preventDefault();
var index = $(this).index() * swiper.params.slidesPerGroup;
if (swiper.params.loop)
index += swiper.loopedSlides;
swiper.slideTo(index);
});
}
extend(swiper.pagination, {
$el,
el: $el[0]
});
},
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", "." + params.bulletClass);
}
}
};
var Pagination$1 = {
name: "pagination",
params: {
pagination: {
el: null,
bulletElement: "span",
clickable: false,
hideOnClick: false,
renderBullet: null,
renderProgressbar: null,
renderFraction: null,
renderCustom: null,
progressbarOpposite: false,
type: "bullets",
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-",
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",
lockClass: "swiper-pagination-lock"
}
},
create: function create() {
var swiper = this;
bindModuleMethods(swiper, {
pagination: _extends({
dynamicBulletIndex: 0
}, Pagination)
});
},
on: {
init: function init2(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 destroy2(swiper) {
swiper.pagination.destroy();
},
click: function click(swiper, e) {
if (swiper.params.pagination.el && swiper.params.pagination.hideOnClick && swiper.pagination.$el.length > 0 && !$(e.target).hasClass(swiper.params.pagination.bulletClass)) {
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);
}
}
}
};
export { Pagination$1 as default };