diff --git a/src/modules/virtual/virtual.js b/src/modules/virtual/virtual.js index 6eacd9431..cb1b1120a 100644 --- a/src/modules/virtual/virtual.js +++ b/src/modules/virtual/virtual.js @@ -1,9 +1,44 @@ import $ from '../../shared/dom.js'; -import { extend, bindModuleMethods } from '../../shared/utils.js'; -const Virtual = { - update(force) { - const swiper = this; +export default function Virtual({ swiper, extendParams, on }) { + extendParams({ + virtual: { + enabled: false, + slides: [], + cache: true, + renderSlide: null, + renderExternal: null, + renderExternalUpdate: true, + addSlidesBefore: 0, + addSlidesAfter: 0, + }, + }); + + swiper.virtual = { + cache: {}, + from: null, + to: null, + slides: [], + offset: 0, + slidesGrid: [], + }; + + function renderSlide(slide, index) { + const params = swiper.params.virtual; + if (params.cache && swiper.virtual.cache[index]) { + return swiper.virtual.cache[index]; + } + const $slideEl = params.renderSlide + ? $(params.renderSlide.call(swiper, slide, index)) + : $( + `
`, + ); + if (!$slideEl.attr('data-swiper-slide-index')) $slideEl.attr('data-swiper-slide-index', index); + if (params.cache) swiper.virtual.cache[index] = $slideEl; + return $slideEl; + } + + function update(force) { const { slidesPerView, slidesPerGroup, centeredSlides } = swiper.params; const { addSlidesBefore, addSlidesAfter } = swiper.params.virtual; const { @@ -11,7 +46,6 @@ const Virtual = { to: previousTo, slides, slidesGrid: previousSlidesGrid, - renderSlide, offset: previousOffset, } = swiper.virtual; swiper.updateActiveIndex(); @@ -34,7 +68,7 @@ const Virtual = { const to = Math.min((activeIndex || 0) + slidesAfter, slides.length - 1); const offset = (swiper.slidesGrid[from] || 0) - (swiper.slidesGrid[0] || 0); - extend(swiper.virtual, { + Object.assign(swiper.virtual, { from, to, offset, @@ -108,24 +142,9 @@ const Virtual = { }); swiper.$wrapperEl.children('.swiper-slide').css(offsetProp, `${offset}px`); onRendered(); - }, - renderSlide(slide, index) { - const swiper = this; - const params = swiper.params.virtual; - if (params.cache && swiper.virtual.cache[index]) { - return swiper.virtual.cache[index]; - } - const $slideEl = params.renderSlide - ? $(params.renderSlide.call(swiper, slide, index)) - : $( - ` `, - ); - if (!$slideEl.attr('data-swiper-slide-index')) $slideEl.attr('data-swiper-slide-index', index); - if (params.cache) swiper.virtual.cache[index] = $slideEl; - return $slideEl; - }, - appendSlide(slides) { - const swiper = this; + } + + 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]); @@ -133,10 +152,9 @@ const Virtual = { } else { swiper.virtual.slides.push(slides); } - swiper.virtual.update(true); - }, - prependSlide(slides) { - const swiper = this; + update(true); + } + function prependSlide(slides) { const activeIndex = swiper.activeIndex; let newActiveIndex = activeIndex + 1; let numberOfNewSlides = 1; @@ -163,11 +181,10 @@ const Virtual = { }); swiper.virtual.cache = newCache; } - swiper.virtual.update(true); + update(true); swiper.slideTo(newActiveIndex, 0); - }, - removeSlide(slidesIndexes) { - const swiper = this; + } + function removeSlide(slidesIndexes) { if (typeof slidesIndexes === 'undefined' || slidesIndexes === null) return; let activeIndex = swiper.activeIndex; if (Array.isArray(slidesIndexes)) { @@ -187,61 +204,40 @@ const Virtual = { if (slidesIndexes < activeIndex) activeIndex -= 1; activeIndex = Math.max(activeIndex, 0); } - swiper.virtual.update(true); + update(true); swiper.slideTo(activeIndex, 0); - }, - removeAllSlides() { - const swiper = this; + } + function removeAllSlides() { swiper.virtual.slides = []; if (swiper.params.virtual.cache) { swiper.virtual.cache = {}; } - swiper.virtual.update(true); + update(true); swiper.slideTo(0, 0); - }, -}; + } -export default { - name: 'virtual', - params: { - virtual: { - enabled: false, - slides: [], - cache: true, - renderSlide: null, - renderExternal: null, - renderExternalUpdate: true, - addSlidesBefore: 0, - addSlidesAfter: 0, - }, - }, - create() { - const swiper = this; - bindModuleMethods(swiper, { - virtual: { - ...Virtual, - slides: swiper.params.virtual.slides, - cache: {}, - }, - }); - }, - on: { - beforeInit(swiper) { - if (!swiper.params.virtual.enabled) return; - swiper.classNames.push(`${swiper.params.containerModifierClass}virtual`); - const overwriteParams = { - watchSlidesProgress: true, - }; - extend(swiper.params, overwriteParams); - extend(swiper.originalParams, overwriteParams); + on('beforeInit', () => { + if (!swiper.params.virtual.enabled) return; + swiper.virtual.slides = swiper.params.virtual.slides; + swiper.classNames.push(`${swiper.params.containerModifierClass}virtual`); - if (!swiper.params.initialSlide) { - swiper.virtual.update(); - } - }, - setTranslate(swiper) { - if (!swiper.params.virtual.enabled) return; - swiper.virtual.update(); - }, - }, -}; + swiper.params.watchSlidesProgress = true; + swiper.originalParams.watchSlidesProgress = true; + + if (!swiper.params.initialSlide) { + update(); + } + }); + on('setTranslate', () => { + if (!swiper.params.virtual.enabled) return; + update(); + }); + + Object.assign(swiper.virtual, { + appendSlide, + prependSlide, + removeSlide, + removeAllSlides, + update, + }); +}