infinity-forge
Version:
378 lines • 15 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));
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.Virtual = Virtual;
var utils_1 = require("../shared/utils.js");
var document_1 = require("../ssr-window/document.js");
function Virtual(_a) {
var swiper = _a.swiper, extendParams = _a.extendParams, on = _a.on, emit = _a.emit;
extendParams({
virtual: {
enabled: false,
slides: [],
cache: true,
renderSlide: null,
renderExternal: null,
renderExternalUpdate: true,
addSlidesBefore: 0,
addSlidesAfter: 0,
},
});
var cssModeTimeout;
var document = (0, document_1.getDocument)();
swiper.virtual = {
cache: {},
from: undefined,
to: undefined,
slides: [],
offset: 0,
slidesGrid: [],
};
var tempDOM = document.createElement('div');
function renderSlide(slide, index) {
var params = swiper.params.virtual;
if (params.cache && swiper.virtual.cache[index]) {
return swiper.virtual.cache[index];
}
// eslint-disable-next-line
var slideEl;
if (params.renderSlide) {
slideEl = params.renderSlide.call(swiper, slide, index);
if (typeof slideEl === 'string') {
tempDOM.innerHTML = slideEl;
slideEl = tempDOM.children[0];
}
}
else if (swiper.isElement) {
slideEl = (0, utils_1.createElement)('swiper-slide');
}
else {
slideEl = (0, utils_1.createElement)('div', swiper.params.slideClass);
}
slideEl.setAttribute('data-swiper-slide-index', index);
if (!params.renderSlide) {
slideEl.innerHTML = slide;
}
if (params.cache) {
swiper.virtual.cache[index] = slideEl;
}
return slideEl;
}
function update(force, beforeInit) {
var _a = swiper.params, slidesPerView = _a.slidesPerView, slidesPerGroup = _a.slidesPerGroup, centeredSlides = _a.centeredSlides, isLoop = _a.loop, initialSlide = _a.initialSlide;
if (beforeInit && !isLoop && initialSlide > 0) {
return;
}
var _b = swiper.params.virtual, addSlidesBefore = _b.addSlidesBefore, addSlidesAfter = _b.addSlidesAfter;
var _c = swiper.virtual, previousFrom = _c.from, previousTo = _c.to, slides = _c.slides, previousSlidesGrid = _c.slidesGrid, previousOffset = _c.offset;
if (!swiper.params.cssMode) {
swiper.updateActiveIndex();
}
var activeIndex = swiper.activeIndex || 0;
var offsetProp;
if (swiper.rtlTranslate)
offsetProp = 'right';
else
offsetProp = swiper.isHorizontal() ? 'left' : 'top';
var slidesAfter;
var slidesBefore;
if (centeredSlides) {
slidesAfter = Math.floor(slidesPerView / 2) + slidesPerGroup + addSlidesAfter;
slidesBefore = Math.floor(slidesPerView / 2) + slidesPerGroup + addSlidesBefore;
}
else {
slidesAfter = slidesPerView + (slidesPerGroup - 1) + addSlidesAfter;
slidesBefore = (isLoop ? slidesPerView : slidesPerGroup) + addSlidesBefore;
}
var from = activeIndex - slidesBefore;
var to = activeIndex + slidesAfter;
if (!isLoop) {
from = Math.max(from, 0);
to = Math.min(to, slides.length - 1);
}
var offset = (swiper.slidesGrid[from] || 0) - (swiper.slidesGrid[0] || 0);
if (isLoop && activeIndex >= slidesBefore) {
from -= slidesBefore;
if (!centeredSlides)
offset += swiper.slidesGrid[0];
}
else if (isLoop && activeIndex < slidesBefore) {
from = -slidesBefore;
if (centeredSlides)
offset += swiper.slidesGrid[0];
}
Object.assign(swiper.virtual, {
from: from,
to: to,
offset: offset,
slidesGrid: swiper.slidesGrid,
slidesBefore: slidesBefore,
slidesAfter: slidesAfter,
});
function onRendered() {
swiper.updateSlides();
swiper.updateProgress();
swiper.updateSlidesClasses();
emit('virtualUpdate');
}
if (previousFrom === from && previousTo === to && !force) {
if (swiper.slidesGrid !== previousSlidesGrid && offset !== previousOffset) {
swiper.slides.forEach(function (slideEl) {
slideEl.style[offsetProp] = "".concat(offset - Math.abs(swiper.cssOverflowAdjustment()), "px");
});
}
swiper.updateProgress();
emit('virtualUpdate');
return;
}
if (swiper.params.virtual.renderExternal) {
swiper.params.virtual.renderExternal.call(swiper, {
offset: offset,
from: from,
to: to,
slides: (function getSlides() {
var slidesToRender = [];
for (var i = from; i <= to; i += 1) {
slidesToRender.push(slides[i]);
}
return slidesToRender;
})(),
});
if (swiper.params.virtual.renderExternalUpdate) {
onRendered();
}
else {
emit('virtualUpdate');
}
return;
}
var prependIndexes = [];
var appendIndexes = [];
var getSlideIndex = function (index) {
var slideIndex = index;
if (index < 0) {
slideIndex = slides.length + index;
}
else if (slideIndex >= slides.length) {
// eslint-disable-next-line
slideIndex = slideIndex - slides.length;
}
return slideIndex;
};
if (force) {
swiper.slides
.filter(function (el) { return el.matches(".".concat(swiper.params.slideClass, ", swiper-slide")); })
.forEach(function (slideEl) {
slideEl.remove();
});
}
else {
var _loop_1 = function (i) {
if (i < from || i > to) {
var slideIndex_1 = getSlideIndex(i);
swiper.slides
.filter(function (el) {
return el.matches(".".concat(swiper.params.slideClass, "[data-swiper-slide-index=\"").concat(slideIndex_1, "\"], swiper-slide[data-swiper-slide-index=\"").concat(slideIndex_1, "\"]"));
})
.forEach(function (slideEl) {
slideEl.remove();
});
}
};
for (var i = previousFrom; i <= previousTo; i += 1) {
_loop_1(i);
}
}
var loopFrom = isLoop ? -slides.length : 0;
var loopTo = isLoop ? slides.length * 2 : slides.length;
for (var i = loopFrom; i < loopTo; i += 1) {
if (i >= from && i <= to) {
var slideIndex = getSlideIndex(i);
if (typeof previousTo === 'undefined' || force) {
appendIndexes.push(slideIndex);
}
else {
if (i > previousTo)
appendIndexes.push(slideIndex);
if (i < previousFrom)
prependIndexes.push(slideIndex);
}
}
}
appendIndexes.forEach(function (index) {
swiper.slidesEl.append(renderSlide(slides[index], index));
});
if (isLoop) {
for (var i = prependIndexes.length - 1; i >= 0; i -= 1) {
var index = prependIndexes[i];
swiper.slidesEl.prepend(renderSlide(slides[index], index));
}
}
else {
prependIndexes.sort(function (a, b) { return b - a; });
prependIndexes.forEach(function (index) {
swiper.slidesEl.prepend(renderSlide(slides[index], index));
});
}
(0, utils_1.elementChildren)(swiper.slidesEl, '.swiper-slide, swiper-slide').forEach(function (slideEl) {
slideEl.style[offsetProp] = "".concat(offset - Math.abs(swiper.cssOverflowAdjustment()), "px");
});
onRendered();
}
function appendSlide(slides) {
if (typeof slides === 'object' && 'length' in slides) {
for (var i = 0; i < slides.length; i += 1) {
if (slides[i])
swiper.virtual.slides.push(slides[i]);
}
}
else {
swiper.virtual.slides.push(slides);
}
update(true, undefined);
}
function prependSlide(slides) {
var activeIndex = swiper.activeIndex;
var newActiveIndex = activeIndex + 1;
var numberOfNewSlides = 1;
if (Array.isArray(slides)) {
for (var i = 0; i < slides.length; i += 1) {
if (slides[i])
swiper.virtual.slides.unshift(slides[i]);
}
newActiveIndex = activeIndex + slides.length;
numberOfNewSlides = slides.length;
}
else {
swiper.virtual.slides.unshift(slides);
}
if (swiper.params.virtual.cache) {
var cache_1 = swiper.virtual.cache;
var newCache_1 = {};
Object.keys(cache_1).forEach(function (cachedIndex) {
var cachedEl = cache_1[cachedIndex];
var cachedElIndex = cachedEl.getAttribute('data-swiper-slide-index');
if (cachedElIndex) {
cachedEl.setAttribute('data-swiper-slide-index', parseInt(cachedElIndex, 10) + numberOfNewSlides);
}
newCache_1[parseInt(cachedIndex, 10) + numberOfNewSlides] = cachedEl;
});
swiper.virtual.cache = newCache_1;
}
update(true, undefined);
swiper.slideTo(newActiveIndex, 0);
}
function removeSlide(slidesIndexes) {
if (typeof slidesIndexes === 'undefined' || slidesIndexes === null)
return;
var activeIndex = swiper.activeIndex;
if (Array.isArray(slidesIndexes)) {
for (var i = slidesIndexes.length - 1; i >= 0; i -= 1) {
if (swiper.params.virtual.cache) {
delete swiper.virtual.cache[slidesIndexes[i]];
// shift cache indexes
Object.keys(swiper.virtual.cache).forEach(function (key) {
if (key > slidesIndexes) {
swiper.virtual.cache[key - 1] = swiper.virtual.cache[key];
swiper.virtual.cache[key - 1].setAttribute('data-swiper-slide-index', key - 1);
delete swiper.virtual.cache[key];
}
});
}
swiper.virtual.slides.splice(slidesIndexes[i], 1);
if (slidesIndexes[i] < activeIndex)
activeIndex -= 1;
activeIndex = Math.max(activeIndex, 0);
}
}
else {
if (swiper.params.virtual.cache) {
delete swiper.virtual.cache[slidesIndexes];
// shift cache indexes
Object.keys(swiper.virtual.cache).forEach(function (key) {
if (key > slidesIndexes) {
swiper.virtual.cache[key - 1] = swiper.virtual.cache[key];
swiper.virtual.cache[key - 1].setAttribute('data-swiper-slide-index', key - 1);
delete swiper.virtual.cache[key];
}
});
}
swiper.virtual.slides.splice(slidesIndexes, 1);
if (slidesIndexes < activeIndex)
activeIndex -= 1;
activeIndex = Math.max(activeIndex, 0);
}
update(true, undefined);
swiper.slideTo(activeIndex, 0);
}
function removeAllSlides() {
swiper.virtual.slides = [];
if (swiper.params.virtual.cache) {
swiper.virtual.cache = {};
}
update(true, undefined);
swiper.slideTo(0, 0);
}
on('beforeInit', function () {
if (!swiper.params.virtual.enabled)
return;
var domSlidesAssigned;
if (typeof swiper.passedParams.virtual.slides === 'undefined') {
var slides = __spreadArray([], swiper.slidesEl.children, true).filter(function (el) {
return el.matches(".".concat(swiper.params.slideClass, ", swiper-slide"));
});
if (slides && slides.length) {
swiper.virtual.slides = __spreadArray([], slides, true);
domSlidesAssigned = true;
slides.forEach(function (slideEl, slideIndex) {
slideEl.setAttribute('data-swiper-slide-index', slideIndex);
swiper.virtual.cache[slideIndex] = slideEl;
slideEl.remove();
});
}
}
if (!domSlidesAssigned) {
swiper.virtual.slides = swiper.params.virtual.slides;
}
swiper.classNames.push("".concat(swiper.params.containerModifierClass, "virtual"));
swiper.params.watchSlidesProgress = true;
swiper.originalParams.watchSlidesProgress = true;
update(false, true);
});
on('setTranslate', function () {
if (!swiper.params.virtual.enabled)
return;
if (swiper.params.cssMode && !swiper._immediateVirtual) {
clearTimeout(cssModeTimeout);
cssModeTimeout = setTimeout(function () {
update(undefined, undefined);
}, 100);
}
else {
update(undefined, undefined);
}
});
on('init update resize', function () {
if (!swiper.params.virtual.enabled)
return;
if (swiper.params.cssMode) {
(0, utils_1.setCSSProperty)(swiper.wrapperEl, '--swiper-virtual-size', "".concat(swiper.virtualSize, "px"));
}
});
Object.assign(swiper.virtual, {
appendSlide: appendSlide,
prependSlide: prependSlide,
removeSlide: removeSlide,
removeAllSlides: removeAllSlides,
update: update,
});
}
//# sourceMappingURL=virtual.js.map