package.modules.virtual.mjs Maven / Gradle / Ivy
Go to download
Show more of this group Show more artifacts with this name
Show all versions of swiper Show documentation
Show all versions of swiper Show documentation
Most modern mobile touch slider and framework with hardware accelerated transitions
import { g as getDocument } from '../shared/ssr-window.esm.mjs';
import { s as setCSSProperty, e as elementChildren, c as createElement } from '../shared/utils.mjs';
function Virtual(_ref) {
let {
swiper,
extendParams,
on,
emit
} = _ref;
extendParams({
virtual: {
enabled: false,
slides: [],
cache: true,
renderSlide: null,
renderExternal: null,
renderExternalUpdate: true,
addSlidesBefore: 0,
addSlidesAfter: 0
}
});
let cssModeTimeout;
const document = getDocument();
swiper.virtual = {
cache: {},
from: undefined,
to: undefined,
slides: [],
offset: 0,
slidesGrid: []
};
const tempDOM = document.createElement('div');
function renderSlide(slide, index) {
const params = swiper.params.virtual;
if (params.cache && swiper.virtual.cache[index]) {
return swiper.virtual.cache[index];
}
// eslint-disable-next-line
let 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 = createElement('swiper-slide');
} else {
slideEl = 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) {
const {
slidesPerView,
slidesPerGroup,
centeredSlides,
loop: isLoop,
initialSlide
} = swiper.params;
if (beforeInit && !isLoop && initialSlide > 0) {
return;
}
const {
addSlidesBefore,
addSlidesAfter
} = swiper.params.virtual;
const {
from: previousFrom,
to: previousTo,
slides,
slidesGrid: previousSlidesGrid,
offset: previousOffset
} = swiper.virtual;
if (!swiper.params.cssMode) {
swiper.updateActiveIndex();
}
const activeIndex = swiper.activeIndex || 0;
let offsetProp;
if (swiper.rtlTranslate) offsetProp = 'right';else offsetProp = swiper.isHorizontal() ? 'left' : 'top';
let slidesAfter;
let 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;
}
let from = activeIndex - slidesBefore;
let to = activeIndex + slidesAfter;
if (!isLoop) {
from = Math.max(from, 0);
to = Math.min(to, slides.length - 1);
}
let 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,
to,
offset,
slidesGrid: swiper.slidesGrid,
slidesBefore,
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(slideEl => {
slideEl.style[offsetProp] = `${offset - Math.abs(swiper.cssOverflowAdjustment())}px`;
});
}
swiper.updateProgress();
emit('virtualUpdate');
return;
}
if (swiper.params.virtual.renderExternal) {
swiper.params.virtual.renderExternal.call(swiper, {
offset,
from,
to,
slides: function getSlides() {
const slidesToRender = [];
for (let i = from; i <= to; i += 1) {
slidesToRender.push(slides[i]);
}
return slidesToRender;
}()
});
if (swiper.params.virtual.renderExternalUpdate) {
onRendered();
} else {
emit('virtualUpdate');
}
return;
}
const prependIndexes = [];
const appendIndexes = [];
const getSlideIndex = index => {
let 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(el => el.matches(`.${swiper.params.slideClass}, swiper-slide`)).forEach(slideEl => {
slideEl.remove();
});
} else {
for (let i = previousFrom; i <= previousTo; i += 1) {
if (i < from || i > to) {
const slideIndex = getSlideIndex(i);
swiper.slides.filter(el => el.matches(`.${swiper.params.slideClass}[data-swiper-slide-index="${slideIndex}"], swiper-slide[data-swiper-slide-index="${slideIndex}"]`)).forEach(slideEl => {
slideEl.remove();
});
}
}
}
const loopFrom = isLoop ? -slides.length : 0;
const loopTo = isLoop ? slides.length * 2 : slides.length;
for (let i = loopFrom; i < loopTo; i += 1) {
if (i >= from && i <= to) {
const 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(index => {
swiper.slidesEl.append(renderSlide(slides[index], index));
});
if (isLoop) {
for (let i = prependIndexes.length - 1; i >= 0; i -= 1) {
const index = prependIndexes[i];
swiper.slidesEl.prepend(renderSlide(slides[index], index));
}
} else {
prependIndexes.sort((a, b) => b - a);
prependIndexes.forEach(index => {
swiper.slidesEl.prepend(renderSlide(slides[index], index));
});
}
elementChildren(swiper.slidesEl, '.swiper-slide, swiper-slide').forEach(slideEl => {
slideEl.style[offsetProp] = `${offset - Math.abs(swiper.cssOverflowAdjustment())}px`;
});
onRendered();
}
function appendSlide(slides) {
if (typeof slides === 'object' && 'length' in slides) {
for (let i = 0; i < slides.length; i += 1) {
if (slides[i]) swiper.virtual.slides.push(slides[i]);
}
} else {
swiper.virtual.slides.push(slides);
}
update(true);
}
function prependSlide(slides) {
const activeIndex = swiper.activeIndex;
let newActiveIndex = activeIndex + 1;
let numberOfNewSlides = 1;
if (Array.isArray(slides)) {
for (let 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) {
const cache = swiper.virtual.cache;
const newCache = {};
Object.keys(cache).forEach(cachedIndex => {
const cachedEl = cache[cachedIndex];
const cachedElIndex = cachedEl.getAttribute('data-swiper-slide-index');
if (cachedElIndex) {
cachedEl.setAttribute('data-swiper-slide-index', parseInt(cachedElIndex, 10) + numberOfNewSlides);
}
newCache[parseInt(cachedIndex, 10) + numberOfNewSlides] = cachedEl;
});
swiper.virtual.cache = newCache;
}
update(true);
swiper.slideTo(newActiveIndex, 0);
}
function removeSlide(slidesIndexes) {
if (typeof slidesIndexes === 'undefined' || slidesIndexes === null) return;
let activeIndex = swiper.activeIndex;
if (Array.isArray(slidesIndexes)) {
for (let 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(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(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);
swiper.slideTo(activeIndex, 0);
}
function removeAllSlides() {
swiper.virtual.slides = [];
if (swiper.params.virtual.cache) {
swiper.virtual.cache = {};
}
update(true);
swiper.slideTo(0, 0);
}
on('beforeInit', () => {
if (!swiper.params.virtual.enabled) return;
let domSlidesAssigned;
if (typeof swiper.passedParams.virtual.slides === 'undefined') {
const slides = [...swiper.slidesEl.children].filter(el => el.matches(`.${swiper.params.slideClass}, swiper-slide`));
if (slides && slides.length) {
swiper.virtual.slides = [...slides];
domSlidesAssigned = true;
slides.forEach((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(`${swiper.params.containerModifierClass}virtual`);
swiper.params.watchSlidesProgress = true;
swiper.originalParams.watchSlidesProgress = true;
update(false, true);
});
on('setTranslate', () => {
if (!swiper.params.virtual.enabled) return;
if (swiper.params.cssMode && !swiper._immediateVirtual) {
clearTimeout(cssModeTimeout);
cssModeTimeout = setTimeout(() => {
update();
}, 100);
} else {
update();
}
});
on('init update resize', () => {
if (!swiper.params.virtual.enabled) return;
if (swiper.params.cssMode) {
setCSSProperty(swiper.wrapperEl, '--swiper-virtual-size', `${swiper.virtualSize}px`);
}
});
Object.assign(swiper.virtual, {
appendSlide,
prependSlide,
removeSlide,
removeAllSlides,
update
});
}
export { Virtual as default };