feat(core): move slides manipulation methods to Manipulation module

Author: nolimits4web

scripts/build-config.js

@@ -21,5 +21,6 @@ module.exports = {
     'thumbs',
     'free-mode',
     'grid',
+    'manipulation',
   ],
 };

src/core/core.js

@@ -17,7 +17,6 @@ import transition from './transition/index.js';
 import slide from './slide/index.js';
 import loop from './loop/index.js';
 import grabCursor from './grab-cursor/index.js';
-import manipulation from './manipulation/index.js';
 import events from './events/index.js';
 import breakpoints from './breakpoints/index.js';
 import classes from './classes/index.js';
@@ -35,7 +34,6 @@ const prototypes = {
   slide,
   loop,
   grabCursor,
-  manipulation,
   events,
   breakpoints,
   checkOverflow,

src/core/manipulation/index.js

@@ -0,0 +1,15 @@
+import appendSlide from './methods/appendSlide.js';
+import prependSlide from './methods/prependSlide.js';
+import addSlide from './methods/addSlide.js';
+import removeSlide from './methods/removeSlide.js';
+import removeAllSlides from './methods/removeAllSlides.js';
+
+export default function Manipulation({ swiper }) {
+  Object.assign(swiper, {
+    appendSlide: appendSlide.bind(swiper),
+    prependSlide: prependSlide.bind(swiper),
+    addSlide: addSlide.bind(swiper),
+    removeSlide: removeSlide.bind(swiper),
+    removeAllSlides: removeAllSlides.bind(swiper),
+  });
+}

src/modules/manipulation/manipulation.js

@@ -0,0 +1,70 @@
+export interface ManipulationMethods {
+  /**
+   * Add new slides to the end. slides could be
+   * HTMLElement or HTML string with new slide or
+   * array with such slides, for example:
+   *
+   * @example
+   * ```js
+   * appendSlide('<div class="swiper-slide">Slide 10"</div>')
+   *
+   * appendSlide([
+   *  '<div class="swiper-slide">Slide 10"</div>',
+   *  '<div class="swiper-slide">Slide 11"</div>'
+   * ]);
+   * ```
+   */
+  appendSlide(slides: HTMLElement | string | string[] | HTMLElement[]): void;
+
+  /**
+   * Add new slides to the beginning. slides could be
+   * HTMLElement or HTML string with new slide or array with such slides, for example:
+   *
+   * @example
+   * ```js
+   * prependSlide('<div class="swiper-slide">Slide 0"</div>')
+   *
+   * prependSlide([
+   *  '<div class="swiper-slide">Slide 1"</div>',
+   *  '<div class="swiper-slide">Slide 2"</div>'
+   * ]);
+   * ```
+   */
+  prependSlide(slides: HTMLElement | string | string[] | HTMLElement[]): void;
+
+  /**
+   * Add new slides to the required index. slides could be HTMLElement or HTML string with new slide or array with such slides, for example:
+   *
+   * @example
+   * ```js
+   * addSlide(1, '<div class="swiper-slide">Slide 10"</div>')
+   *
+   * addSlide(1, [
+   *  '<div class="swiper-slide">Slide 10"</div>',
+   *  '<div class="swiper-slide">Slide 11"</div>'
+   * ]);
+   * ```
+   */
+  addSlide(index: number, slides: HTMLElement | string | string[] | HTMLElement[]): void;
+
+  /**
+   * Remove selected slides. slideIndex could be a number with slide index to remove or array with indexes.
+   *
+   * @example
+   * ```js
+   * removeSlide(0); // remove first slide
+   * removeSlide([0, 1]); // remove first and second slides
+   * removeAllSlides();    // Remove all slides
+   * ```
+   */
+  removeSlide(slideIndex: number | number[]): void;
+
+  /**
+   * Remove all slides
+   */
+  removeAllSlides(): void;
+}
+
+export interface ManipulationEvents {}
+
+export interface ManipulationOptions {}

src/modules/manipulation/manipulation.less

@@ -19,3 +19,4 @@ export * from './virtual';
 export * from './zoom';
 export * from './free-mode';
 export * from './grid';
+export * from './manipulation';

src/modules/manipulation/manipulation.scss

@@ -23,6 +23,7 @@ import { ThumbsMethods } from './modules/thumbs';
 import { VirtualMethods } from './modules/virtual';
 import { ZoomMethods } from './modules/zoom';
 import { FreeModeMethods } from './modules/free-mode';
+import { ManipulationMethods } from './modules/manipulation';
 
 interface SwiperClass<Events> {
   /** Add event handler */
@@ -315,71 +316,6 @@ interface Swiper extends SwiperClass<SwiperEvents> {
    */
   destroy(deleteInstance?: boolean, cleanStyles?: boolean): void;
 
-  /**
-   * Add new slides to the end. slides could be
-   * HTMLElement or HTML string with new slide or
-   * array with such slides, for example:
-   *
-   * @example
-   * ```js
-   * appendSlide('<div class="swiper-slide">Slide 10"</div>')
-   *
-   * appendSlide([
-   *  '<div class="swiper-slide">Slide 10"</div>',
-   *  '<div class="swiper-slide">Slide 11"</div>'
-   * ]);
-   * ```
-   */
-  appendSlide(slides: HTMLElement | string | string[] | HTMLElement[]): void;
-
-  /**
-   * Add new slides to the beginning. slides could be
-   * HTMLElement or HTML string with new slide or array with such slides, for example:
-   *
-   * @example
-   * ```js
-   * prependSlide('<div class="swiper-slide">Slide 0"</div>')
-   *
-   * prependSlide([
-   *  '<div class="swiper-slide">Slide 1"</div>',
-   *  '<div class="swiper-slide">Slide 2"</div>'
-   * ]);
-   * ```
-   */
-  prependSlide(slides: HTMLElement | string | string[] | HTMLElement[]): void;
-
-  /**
-   * Add new slides to the required index. slides could be HTMLElement or HTML string with new slide or array with such slides, for example:
-   *
-   * @example
-   * ```js
-   * addSlide(1, '<div class="swiper-slide">Slide 10"</div>')
-   *
-   * addSlide(1, [
-   *  '<div class="swiper-slide">Slide 10"</div>',
-   *  '<div class="swiper-slide">Slide 11"</div>'
-   * ]);
-   * ```
-   */
-  addSlide(index: number, slides: HTMLElement | string | string[] | HTMLElement[]): void;
-
-  /**
-   * Remove selected slides. slideIndex could be a number with slide index to remove or array with indexes.
-   *
-   * @example
-   * ```js
-   * removeSlide(0); // remove first slide
-   * removeSlide([0, 1]); // remove first and second slides
-   * removeAllSlides();    // Remove all slides
-   * ```
-   */
-  removeSlide(slideIndex: number | number[]): void;
-
-  /**
-   * Remove all slides
-   */
-  removeAllSlides(): void;
-
   /**
    * Set custom css3 transform's translate value for swiper wrapper
    */
@@ -454,7 +390,7 @@ interface Swiper extends SwiperClass<SwiperEvents> {
   /**
    * !INTERNAL
    */
-  modules: Array<any>; //TODO: add typing
+  modules: Array<SwiperModule>;
 
   a11y: A11yMethods;
   autoplay: AutoplayMethods;