feat: make starter html layout optional (#4507)

* feat: make starter html layout optional * feat: wrapper layout * chore: size limit * feat: createElements * feat: wrapper createElements * tests: createElements * feat: createElements * feat: createElements * feat: createElements * feat: createElements correctly copy slides cc @vltansky * feat: createElements - extend module params in core-class - use Object instead of array for better readability cc @vltansky * feat: createElements fix typings cc @vltansky Co-authored-by: Vladimir Kharlampidi <[email protected]>
nolimits4web · May 24, 2021 · aef2865 · aef2865
1 parent 4f37a61
commit aef2865
Show file tree

Hide file tree

Showing 11 changed files with 187 additions and 66 deletions.
diff --git a/cypress/integration/modules/core.js b/cypress/integration/modules/core.js
@@ -404,4 +404,68 @@ context('Core', () => {
     cy.swipeRight();
     cy.getSlide(0).expectToBeActiveSlide();
   });
+
+  it('should not work as createElements false', () => {
+    cy.window().then((_window) => {
+      _window.document.body.innerHTML = `
+      <div class="swiper-container">
+        <div class="swiper-slide">Slide 1</div>
+        <div class="swiper-slide">Slide 2</div>
+        <div class="swiper-slide">Slide 3</div>
+        <div class="swiper-slide">Slide 4</div>
+        <div class="swiper-slide">Slide 5</div>
+        <div class="swiper-slide">Slide 6</div>
+        <div class="swiper-slide">Slide 7</div>
+        <div class="swiper-slide">Slide 8</div>
+        <div class="swiper-slide">Slide 9</div>
+        <div class="swiper-slide">Slide 10</div>
+      </div>
+      `;
+      _window.swiperRef = new _window.Swiper('.swiper-container', {
+        slidesPerView: 2,
+        scrollbar: true,
+        createElements: false,
+        pagination: true,
+        navigation: true,
+      });
+      return _window.swiperRef;
+    });
+    cy.get(`.swiper-button-next`).should('not.exist');
+    cy.get(`.swiper-button-prev`).should('not.exist');
+    cy.get(`.swiper-wrapper`).should('not.exist');
+    cy.get(`.swiper-scrollbar`).should('not.exist');
+    cy.get(`.swiper-pagination`).should('not.exist');
+  });
+
+  it('should not work as createElements false', () => {
+    cy.window().then((_window) => {
+      _window.document.body.innerHTML = `
+      <div class="swiper-container">
+        <div class="swiper-slide">Slide 1</div>
+        <div class="swiper-slide">Slide 2</div>
+        <div class="swiper-slide">Slide 3</div>
+        <div class="swiper-slide">Slide 4</div>
+        <div class="swiper-slide">Slide 5</div>
+        <div class="swiper-slide">Slide 6</div>
+        <div class="swiper-slide">Slide 7</div>
+        <div class="swiper-slide">Slide 8</div>
+        <div class="swiper-slide">Slide 9</div>
+        <div class="swiper-slide">Slide 10</div>
+      </div>
+      `;
+      _window.swiperRef = new _window.Swiper('.swiper-container', {
+        slidesPerView: 2,
+        scrollbar: true,
+        createElements: true,
+        pagination: true,
+        navigation: true,
+      });
+      return _window.swiperRef;
+    });
+    cy.get(`.swiper-wrapper`).should('exist');
+    cy.get(`.swiper-button-next`).should('exist');
+    cy.get(`.swiper-button-prev`).should('exist');
+    cy.get(`.swiper-scrollbar`).should('exist');
+    cy.get(`.swiper-pagination`).should('exist');
+  });
 });
diff --git a/playground/core/index.html b/playground/core/index.html
@@ -1,19 +1,14 @@
-<!doctype html>
+<!DOCTYPE html>
 <html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <title>Swiper Playground</title>
+    <link rel="stylesheet" href="../../build/swiper-bundle.css" />
+    <meta name="viewport" content="width=device-width" />
+  </head>
 
-<head>
-  <meta charset="UTF-8">
-  <title>Swiper Playground</title>
-  <link rel="stylesheet" href="../../build/swiper-bundle.css">
-  <meta name="viewport" content="width=device-width">
-</head>
-
-<body>
-  <section class="swiper-container">
-    <div class="swiper-scrollbar"></div>
-    <button class="swiper-button-prev"></button>
-    <button class="swiper-button-next"></button>
-    <div class="swiper-wrapper">
+  <body>
+    <section class="swiper-container">
       <div class="swiper-slide">Slide 1</div>
       <div class="swiper-slide">Slide 2</div>
       <div class="swiper-slide">Slide 3</div>
@@ -24,33 +19,29 @@
       <div class="swiper-slide">Slide 8</div>
       <div class="swiper-slide">Slide 9</div>
       <div class="swiper-slide">Slide 10</div>
-    </div>
-    <div class="swiper-pagination"></div>
-  </section>
-  <style>
-    body,
-    html {
-      padding: 0;
-      margin: 0;
-      position: relative;
-      height: 100%;
-    }
-
-    .swiper-container {
-      width: 100%;
-      height: 300px;
-      margin: 50px auto;
-    }
-
-    .swiper-slide {
-      background: #f1f1f1;
-      color: #000;
-      text-align: center;
-      line-height: 300px;
-    }
-  </style>
-  <script type="module" src="./main.js"></script>
+    </section>
+    <style>
+      body,
+      html {
+        padding: 0;
+        margin: 0;
+        position: relative;
+        height: 100%;
+      }
 
-</body>
+      .swiper-container {
+        width: 100%;
+        height: 300px;
+        margin: 50px auto;
+      }
 
+      .swiper-slide {
+        background: #f1f1f1;
+        color: #000;
+        text-align: center;
+        line-height: 300px;
+      }
+    </style>
+    <script type="module" src="./main.js"></script>
+  </body>
 </html>
diff --git a/playground/core/main.js b/playground/core/main.js
@@ -13,22 +13,16 @@ window.swiper = new Swiper({
   centeredSlides: true,
   slideToClickedSlide: true,
   grabCursor: true,
-  scrollbar: {
-    el: '.swiper-scrollbar',
-  },
+  scrollbar: true,
+  createElements: true,
   mousewheel: {
     enabled: true,
   },
   keyboard: {
     enabled: true,
   },
-  pagination: {
-    el: '.swiper-pagination',
-  },
-  navigation: {
-    nextEl: '.swiper-button-next',
-    prevEl: '.swiper-button-prev',
-  },
+  pagination: true,
+  navigation: true,
   a11y: {
     containerMessage: 'Example content',
     containerRoleDescriptionMessage: 'carousel',

diff --git a/src/components/core/core-class.js b/src/components/core/core-class.js
@@ -1,4 +1,5 @@
 /* eslint no-param-reassign: "off" */
+import { getDocument } from 'ssr-window';
 import $ from '../../utils/dom';
 import { extend, now, deleteProps } from '../../utils/utils';
 import { getSupport } from '../../utils/get-support';
@@ -91,6 +92,12 @@ class Swiper {
         const moduleParamName = Object.keys(module.params)[0];
         const moduleParams = module.params[moduleParamName];
         if (typeof moduleParams !== 'object' || moduleParams === null) return;
+        if (
+          ['navigation', 'pagination', 'scrollbar'].indexOf(moduleParamName) >= 0 &&
+          params[moduleParamName] === true
+        ) {
+          params[moduleParamName] = {};
+        }
         if (!(moduleParamName in params && 'enabled' in moduleParams)) return;
         if (params[moduleParamName] === true) {
           params[moduleParamName] = { enabled: true };
@@ -442,14 +449,26 @@ class Swiper {
 
     el.swiper = swiper;
 
+    const getWrapper = () => {
+      if (el && el.shadowRoot && el.shadowRoot.querySelector) {
+        const res = $(el.shadowRoot.querySelector(`.${swiper.params.wrapperClass}`));
+        // Children needs to return slot items
+        res.children = (options) => $el.children(options);
+        return res;
+      }
+      return $el.children(`.${swiper.params.wrapperClass}`);
+    };
     // Find Wrapper
-    let $wrapperEl;
-    if (el && el.shadowRoot && el.shadowRoot.querySelector) {
-      $wrapperEl = $(el.shadowRoot.querySelector(`.${swiper.params.wrapperClass}`));
-      // Children needs to return slot items
-      $wrapperEl.children = (options) => $el.children(options);
-    } else {
-      $wrapperEl = $el.children(`.${swiper.params.wrapperClass}`);
+    let $wrapperEl = getWrapper();
+    if ($wrapperEl.length === 0 && swiper.params.createElements) {
+      const document = getDocument();
+      const wrapper = document.createElement('div');
+      $wrapperEl = $(wrapper);
+      wrapper.className = swiper.params.wrapperClass;
+      $el.append(wrapper);
+      $el.children(`.${swiper.params.slideClass}`).each((slideEl) => {
+        $wrapperEl.append(slideEl);
+      });
     }
 
     extend(swiper, {

diff --git a/src/components/core/defaults.js b/src/components/core/defaults.js
@@ -8,6 +8,7 @@ export default {
   updateOnWindowResize: true,
   resizeObserver: false,
   nested: false,
+  createElements: false,
   enabled: true,
 
   // Overrides

diff --git a/src/components/navigation/navigation.js b/src/components/navigation/navigation.js
@@ -1,5 +1,5 @@
 import $ from '../../utils/dom';
-import { extend, bindModuleMethods } from '../../utils/utils';
+import { extend, bindModuleMethods, createElementIfNotDefined } from '../../utils/utils';
 
 const Navigation = {
   toggleEl($el, disabled) {
@@ -51,6 +51,16 @@ const Navigation = {
   init() {
     const swiper = this;
     const params = swiper.params.navigation;
+
+    swiper.params.navigation = createElementIfNotDefined(
+      swiper.$el,
+      swiper.params.navigation,
+      swiper.params.createElements,
+      {
+        nextEl: 'swiper-button-next',
+        prevEl: 'swiper-button-prev',
+      },
+    );
     if (!(params.nextEl || params.prevEl)) return;
 
     let $nextEl;

diff --git a/src/components/pagination/pagination.js b/src/components/pagination/pagination.js
@@ -1,5 +1,10 @@
 import $ from '../../utils/dom';
-import { extend, bindModuleMethods, classesToSelector } from '../../utils/utils';
+import {
+  extend,
+  bindModuleMethods,
+  classesToSelector,
+  createElementIfNotDefined,
+} from '../../utils/utils';
 
 const Pagination = {
   update() {
@@ -248,6 +253,12 @@ const Pagination = {
   },
   init() {
     const swiper = this;
+    swiper.params.pagination = createElementIfNotDefined(
+      swiper.$el,
+      swiper.params.pagination,
+      swiper.params.createElements,
+      { el: 'swiper-pagination' },
+    );
     const params = swiper.params.pagination;
     if (!params.el) return;
 

diff --git a/src/components/scrollbar/scrollbar.js b/src/components/scrollbar/scrollbar.js
@@ -1,6 +1,6 @@
 import { getDocument } from 'ssr-window';
 import $ from '../../utils/dom';
-import { extend, nextTick, bindModuleMethods } from '../../utils/utils';
+import { extend, nextTick, bindModuleMethods, createElementIfNotDefined } from '../../utils/utils';
 
 const Scrollbar = {
   setTranslate() {
@@ -282,9 +282,15 @@ const Scrollbar = {
   },
   init() {
     const swiper = this;
-    if (!swiper.params.scrollbar.el) return;
     const { scrollbar, $el: $swiperEl } = swiper;
+    swiper.params.scrollbar = createElementIfNotDefined(
+      $swiperEl,
+      swiper.params.scrollbar,
+      swiper.params.createElements,
+      { el: 'swiper-scrollbar' },
+    );
     const params = swiper.params.scrollbar;
+    if (!params.el) return;
 
     let $el = $(params.el);
     if (

diff --git a/src/types/swiper-class.d.ts b/src/types/swiper-class.d.ts
@@ -444,10 +444,10 @@ interface Swiper extends SwiperClass<SwiperEvents> {
   keyboard: KeyboardMethods;
   lazy: LazyMethods;
   mousewheel: MousewheelMethods;
-  navigation: NavigationMethods;
-  pagination: PaginationMethods;
+  navigation: NavigationMethods | boolean;
+  pagination: PaginationMethods | boolean;
   parallax: ParallaxMethods;
-  scrollbar: ScrollbarMethods;
+  scrollbar: ScrollbarMethods | boolean;
   thumbs: ThumbsMethods;
   virtual: VirtualMethods;
   zoom: ZoomMethods;

diff --git a/src/types/swiper-options.d.ts b/src/types/swiper-options.d.ts
@@ -130,6 +130,15 @@ export interface SwiperOptions {
    */
   nested?: boolean;
 
+  /**
+   * When enabled Swiper will automatically wrap slides with swiper-wrapper element,
+   * and will create required elements for navigation, pagination and scrollbar
+   * they are enabled (with their respective params object or with boolean `true`))
+   *
+   * @default false
+   */
+  createElements?: boolean;
+
   /**
    * If enabled (by default) and navigation elements' parameters passed as a string (like `".pagination"`)
    * then Swiper will look for such elements through child elements first.

diff --git a/src/utils/utils.js b/src/utils/utils.js
@@ -1,4 +1,4 @@
-import { getWindow } from 'ssr-window';
+import { getDocument, getWindow } from 'ssr-window';
 
 function deleteProps(obj) {
   const object = obj;
@@ -146,6 +146,21 @@ function classesToSelector(classes = '') {
     .replace(/ /g, '.')}`;
 }
 
+function createElementIfNotDefined($container, params, createElements, checkProps) {
+  const document = getDocument();
+  if (createElements) {
+    Object.keys(checkProps).forEach((key) => {
+      if (!params[key]) {
+        const element = document.createElement('div');
+        element.className = checkProps[key];
+        $container.append(element);
+        params[key] = element;
+      }
+    });
+  }
+  return params;
+}
+
 export {
   deleteProps,
   nextTick,
@@ -156,4 +171,5 @@ export {
   bindModuleMethods,
   getComputedStyle,
   classesToSelector,
+  createElementIfNotDefined,
 };