feat(core): convert Virtual to functional module

Author: nolimits4web

src/modules/virtual/virtual.js

@@ -1,17 +1,51 @@
 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))
+      : $(
+          `<div class="${swiper.params.slideClass}" data-swiper-slide-index="${index}">${slide}</div>`,
+        );
+    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 {
       from: previousFrom,
       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,35 +142,19 @@ 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))
-      : $(
-          `<div class="${swiper.params.slideClass}" data-swiper-slide-index="${index}">${slide}</div>`,
-        );
-    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]);
       }
     } 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,
+  });
+}