Skip to content

Commit aef2865

Browse files
vltanskynolimits4web
vltansky
and
nolimits4web
authored
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 <nolimits4web@gmail.com>
1 parent 4f37a61 commit aef2865

11 files changed

Lines changed: 187 additions & 66 deletions

File tree

‎cypress/integration/modules/core.js‎

Lines changed: 64 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -404,4 +404,68 @@ context('Core', () => {
404404
cy.swipeRight();
405405
cy.getSlide(0).expectToBeActiveSlide();
406406
});
407+
408+
it('should not work as createElements false', () => {
409+
cy.window().then((_window) => {
410+
_window.document.body.innerHTML = `
411+
<div class="swiper-container">
412+
<div class="swiper-slide">Slide 1</div>
413+
<div class="swiper-slide">Slide 2</div>
414+
<div class="swiper-slide">Slide 3</div>
415+
<div class="swiper-slide">Slide 4</div>
416+
<div class="swiper-slide">Slide 5</div>
417+
<div class="swiper-slide">Slide 6</div>
418+
<div class="swiper-slide">Slide 7</div>
419+
<div class="swiper-slide">Slide 8</div>
420+
<div class="swiper-slide">Slide 9</div>
421+
<div class="swiper-slide">Slide 10</div>
422+
</div>
423+
`;
424+
_window.swiperRef = new _window.Swiper('.swiper-container', {
425+
slidesPerView: 2,
426+
scrollbar: true,
427+
createElements: false,
428+
pagination: true,
429+
navigation: true,
430+
});
431+
return _window.swiperRef;
432+
});
433+
cy.get(`.swiper-button-next`).should('not.exist');
434+
cy.get(`.swiper-button-prev`).should('not.exist');
435+
cy.get(`.swiper-wrapper`).should('not.exist');
436+
cy.get(`.swiper-scrollbar`).should('not.exist');
437+
cy.get(`.swiper-pagination`).should('not.exist');
438+
});
439+
440+
it('should not work as createElements false', () => {
441+
cy.window().then((_window) => {
442+
_window.document.body.innerHTML = `
443+
<div class="swiper-container">
444+
<div class="swiper-slide">Slide 1</div>
445+
<div class="swiper-slide">Slide 2</div>
446+
<div class="swiper-slide">Slide 3</div>
447+
<div class="swiper-slide">Slide 4</div>
448+
<div class="swiper-slide">Slide 5</div>
449+
<div class="swiper-slide">Slide 6</div>
450+
<div class="swiper-slide">Slide 7</div>
451+
<div class="swiper-slide">Slide 8</div>
452+
<div class="swiper-slide">Slide 9</div>
453+
<div class="swiper-slide">Slide 10</div>
454+
</div>
455+
`;
456+
_window.swiperRef = new _window.Swiper('.swiper-container', {
457+
slidesPerView: 2,
458+
scrollbar: true,
459+
createElements: true,
460+
pagination: true,
461+
navigation: true,
462+
});
463+
return _window.swiperRef;
464+
});
465+
cy.get(`.swiper-wrapper`).should('exist');
466+
cy.get(`.swiper-button-next`).should('exist');
467+
cy.get(`.swiper-button-prev`).should('exist');
468+
cy.get(`.swiper-scrollbar`).should('exist');
469+
cy.get(`.swiper-pagination`).should('exist');
470+
});
407471
});

‎playground/core/index.html‎

Lines changed: 32 additions & 41 deletions
Original file line numberDiff line numberDiff line change
@@ -1,19 +1,14 @@
1-
<!doctype html>
1+
<!DOCTYPE html>
22
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8" />
5+
<title>Swiper Playground</title>
6+
<link rel="stylesheet" href="../../build/swiper-bundle.css" />
7+
<meta name="viewport" content="width=device-width" />
8+
</head>
39

4-
<head>
5-
<meta charset="UTF-8">
6-
<title>Swiper Playground</title>
7-
<link rel="stylesheet" href="../../build/swiper-bundle.css">
8-
<meta name="viewport" content="width=device-width">
9-
</head>
10-
11-
<body>
12-
<section class="swiper-container">
13-
<div class="swiper-scrollbar"></div>
14-
<button class="swiper-button-prev"></button>
15-
<button class="swiper-button-next"></button>
16-
<div class="swiper-wrapper">
10+
<body>
11+
<section class="swiper-container">
1712
<div class="swiper-slide">Slide 1</div>
1813
<div class="swiper-slide">Slide 2</div>
1914
<div class="swiper-slide">Slide 3</div>
@@ -24,33 +19,29 @@
2419
<div class="swiper-slide">Slide 8</div>
2520
<div class="swiper-slide">Slide 9</div>
2621
<div class="swiper-slide">Slide 10</div>
27-
</div>
28-
<div class="swiper-pagination"></div>
29-
</section>
30-
<style>
31-
body,
32-
html {
33-
padding: 0;
34-
margin: 0;
35-
position: relative;
36-
height: 100%;
37-
}
38-
39-
.swiper-container {
40-
width: 100%;
41-
height: 300px;
42-
margin: 50px auto;
43-
}
44-
45-
.swiper-slide {
46-
background: #f1f1f1;
47-
color: #000;
48-
text-align: center;
49-
line-height: 300px;
50-
}
51-
</style>
52-
<script type="module" src="./main.js"></script>
22+
</section>
23+
<style>
24+
body,
25+
html {
26+
padding: 0;
27+
margin: 0;
28+
position: relative;
29+
height: 100%;
30+
}
5331

54-
</body>
32+
.swiper-container {
33+
width: 100%;
34+
height: 300px;
35+
margin: 50px auto;
36+
}
5537

38+
.swiper-slide {
39+
background: #f1f1f1;
40+
color: #000;
41+
text-align: center;
42+
line-height: 300px;
43+
}
44+
</style>
45+
<script type="module" src="./main.js"></script>
46+
</body>
5647
</html>

‎playground/core/main.js‎

Lines changed: 4 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -13,22 +13,16 @@ window.swiper = new Swiper({
1313
centeredSlides: true,
1414
slideToClickedSlide: true,
1515
grabCursor: true,
16-
scrollbar: {
17-
el: '.swiper-scrollbar',
18-
},
16+
scrollbar: true,
17+
createElements: true,
1918
mousewheel: {
2019
enabled: true,
2120
},
2221
keyboard: {
2322
enabled: true,
2423
},
25-
pagination: {
26-
el: '.swiper-pagination',
27-
},
28-
navigation: {
29-
nextEl: '.swiper-button-next',
30-
prevEl: '.swiper-button-prev',
31-
},
24+
pagination: true,
25+
navigation: true,
3226
a11y: {
3327
containerMessage: 'Example content',
3428
containerRoleDescriptionMessage: 'carousel',

‎src/components/core/core-class.js‎

Lines changed: 26 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
11
/* eslint no-param-reassign: "off" */
2+
import { getDocument } from 'ssr-window';
23
import $ from '../../utils/dom';
34
import { extend, now, deleteProps } from '../../utils/utils';
45
import { getSupport } from '../../utils/get-support';
@@ -91,6 +92,12 @@ class Swiper {
9192
const moduleParamName = Object.keys(module.params)[0];
9293
const moduleParams = module.params[moduleParamName];
9394
if (typeof moduleParams !== 'object' || moduleParams === null) return;
95+
if (
96+
['navigation', 'pagination', 'scrollbar'].indexOf(moduleParamName) >= 0 &&
97+
params[moduleParamName] === true
98+
) {
99+
params[moduleParamName] = {};
100+
}
94101
if (!(moduleParamName in params && 'enabled' in moduleParams)) return;
95102
if (params[moduleParamName] === true) {
96103
params[moduleParamName] = { enabled: true };
@@ -442,14 +449,26 @@ class Swiper {
442449

443450
el.swiper = swiper;
444451

452+
const getWrapper = () => {
453+
if (el && el.shadowRoot && el.shadowRoot.querySelector) {
454+
const res = $(el.shadowRoot.querySelector(`.${swiper.params.wrapperClass}`));
455+
// Children needs to return slot items
456+
res.children = (options) => $el.children(options);
457+
return res;
458+
}
459+
return $el.children(`.${swiper.params.wrapperClass}`);
460+
};
445461
// Find Wrapper
446-
let $wrapperEl;
447-
if (el && el.shadowRoot && el.shadowRoot.querySelector) {
448-
$wrapperEl = $(el.shadowRoot.querySelector(`.${swiper.params.wrapperClass}`));
449-
// Children needs to return slot items
450-
$wrapperEl.children = (options) => $el.children(options);
451-
} else {
452-
$wrapperEl = $el.children(`.${swiper.params.wrapperClass}`);
462+
let $wrapperEl = getWrapper();
463+
if ($wrapperEl.length === 0 && swiper.params.createElements) {
464+
const document = getDocument();
465+
const wrapper = document.createElement('div');
466+
$wrapperEl = $(wrapper);
467+
wrapper.className = swiper.params.wrapperClass;
468+
$el.append(wrapper);
469+
$el.children(`.${swiper.params.slideClass}`).each((slideEl) => {
470+
$wrapperEl.append(slideEl);
471+
});
453472
}
454473

455474
extend(swiper, {

‎src/components/core/defaults.js‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,7 @@ export default {
88
updateOnWindowResize: true,
99
resizeObserver: false,
1010
nested: false,
11+
createElements: false,
1112
enabled: true,
1213

1314
// Overrides

‎src/components/navigation/navigation.js‎

Lines changed: 11 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import $ from '../../utils/dom';
2-
import { extend, bindModuleMethods } from '../../utils/utils';
2+
import { extend, bindModuleMethods, createElementIfNotDefined } from '../../utils/utils';
33

44
const Navigation = {
55
toggleEl($el, disabled) {
@@ -51,6 +51,16 @@ const Navigation = {
5151
init() {
5252
const swiper = this;
5353
const params = swiper.params.navigation;
54+
55+
swiper.params.navigation = createElementIfNotDefined(
56+
swiper.$el,
57+
swiper.params.navigation,
58+
swiper.params.createElements,
59+
{
60+
nextEl: 'swiper-button-next',
61+
prevEl: 'swiper-button-prev',
62+
},
63+
);
5464
if (!(params.nextEl || params.prevEl)) return;
5565

5666
let $nextEl;

‎src/components/pagination/pagination.js‎

Lines changed: 12 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,10 @@
11
import $ from '../../utils/dom';
2-
import { extend, bindModuleMethods, classesToSelector } from '../../utils/utils';
2+
import {
3+
extend,
4+
bindModuleMethods,
5+
classesToSelector,
6+
createElementIfNotDefined,
7+
} from '../../utils/utils';
38

49
const Pagination = {
510
update() {
@@ -248,6 +253,12 @@ const Pagination = {
248253
},
249254
init() {
250255
const swiper = this;
256+
swiper.params.pagination = createElementIfNotDefined(
257+
swiper.$el,
258+
swiper.params.pagination,
259+
swiper.params.createElements,
260+
{ el: 'swiper-pagination' },
261+
);
251262
const params = swiper.params.pagination;
252263
if (!params.el) return;
253264

‎src/components/scrollbar/scrollbar.js‎

Lines changed: 8 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import { getDocument } from 'ssr-window';
22
import $ from '../../utils/dom';
3-
import { extend, nextTick, bindModuleMethods } from '../../utils/utils';
3+
import { extend, nextTick, bindModuleMethods, createElementIfNotDefined } from '../../utils/utils';
44

55
const Scrollbar = {
66
setTranslate() {
@@ -282,9 +282,15 @@ const Scrollbar = {
282282
},
283283
init() {
284284
const swiper = this;
285-
if (!swiper.params.scrollbar.el) return;
286285
const { scrollbar, $el: $swiperEl } = swiper;
286+
swiper.params.scrollbar = createElementIfNotDefined(
287+
$swiperEl,
288+
swiper.params.scrollbar,
289+
swiper.params.createElements,
290+
{ el: 'swiper-scrollbar' },
291+
);
287292
const params = swiper.params.scrollbar;
293+
if (!params.el) return;
288294

289295
let $el = $(params.el);
290296
if (

‎src/types/swiper-class.d.ts‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -444,10 +444,10 @@ interface Swiper extends SwiperClass<SwiperEvents> {
444444
keyboard: KeyboardMethods;
445445
lazy: LazyMethods;
446446
mousewheel: MousewheelMethods;
447-
navigation: NavigationMethods;
448-
pagination: PaginationMethods;
447+
navigation: NavigationMethods | boolean;
448+
pagination: PaginationMethods | boolean;
449449
parallax: ParallaxMethods;
450-
scrollbar: ScrollbarMethods;
450+
scrollbar: ScrollbarMethods | boolean;
451451
thumbs: ThumbsMethods;
452452
virtual: VirtualMethods;
453453
zoom: ZoomMethods;

‎src/types/swiper-options.d.ts‎

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -130,6 +130,15 @@ export interface SwiperOptions {
130130
*/
131131
nested?: boolean;
132132

133+
/**
134+
* When enabled Swiper will automatically wrap slides with swiper-wrapper element,
135+
* and will create required elements for navigation, pagination and scrollbar
136+
* they are enabled (with their respective params object or with boolean `true`))
137+
*
138+
* @default false
139+
*/
140+
createElements?: boolean;
141+
133142
/**
134143
* If enabled (by default) and navigation elements' parameters passed as a string (like `".pagination"`)
135144
* then Swiper will look for such elements through child elements first.

0 commit comments

Comments
 (0)