1 | import { template as _$template } from "solid-js/web";
|
2 | import { className as _$className } from "solid-js/web";
|
3 | import { effect as _$effect } from "solid-js/web";
|
4 | import { createComponent as _$createComponent } from "solid-js/web";
|
5 | import { insert as _$insert } from "solid-js/web";
|
6 | import { memo as _$memo } from "solid-js/web";
|
7 | import { spread as _$spread } from "solid-js/web";
|
8 |
|
9 | const _tmpl$ = _$template(`<div class="swiper-wrapper"></div>`, 2),
|
10 | _tmpl$2 = _$template(`<div class="swiper-button-prev"></div>`, 2),
|
11 | _tmpl$3 = _$template(`<div class="swiper-button-next"></div>`, 2),
|
12 | _tmpl$4 = _$template(`<div class="swiper-scrollbar"></div>`, 2),
|
13 | _tmpl$5 = _$template(`<div class="swiper-pagination"></div>`, 2),
|
14 | _tmpl$6 = _$template(`<div></div>`, 2);
|
15 |
|
16 | import { createEffect, createMemo, createSignal, onCleanup, onMount, Show, splitProps, children } from 'solid-js';
|
17 | import SwiperCore from 'swiper';
|
18 | import { SwiperContext } from './context.js';
|
19 | import { getChangedParams } from '../components-shared/get-changed-params.js';
|
20 | import { getChildren } from './get-children.js';
|
21 | import { getParams } from '../components-shared/get-params.js';
|
22 | import { calcLoopedSlides, renderLoop } from './loop.js';
|
23 | import { mountSwiper } from '../components-shared/mount-swiper.js';
|
24 | import { updateSwiper } from '../components-shared/update-swiper.js';
|
25 | import { extend, needsNavigation, needsPagination, needsScrollbar, uniqueClasses } from '../components-shared/utils.js';
|
26 | import { renderVirtual } from './virtual.js';
|
27 | import { updateOnVirtualData } from '../components-shared/update-on-virtual-data.js';
|
28 |
|
29 | const Swiper = props => {
|
30 | let eventsAssigned = false;
|
31 | const [containerClasses, setContainerClasses] = createSignal('swiper');
|
32 | const [virtualData, setVirtualData] = createSignal(null);
|
33 | const [, setBreakpointChanged] = createSignal(false);
|
34 |
|
35 | let initializedRef = false;
|
36 |
|
37 | let swiperElRef = null;
|
38 |
|
39 | let swiperRef = null;
|
40 |
|
41 | let oldPassedParamsRef = null;
|
42 |
|
43 | let oldSlides = null;
|
44 |
|
45 | let nextElRef = null;
|
46 |
|
47 | let prevElRef = null;
|
48 |
|
49 | let paginationElRef = null;
|
50 |
|
51 | let scrollbarElRef = null;
|
52 |
|
53 | const [local, rest] = splitProps(props, ['children', 'class', 'onSwiper', 'ref', 'tag', 'wrapperTag']);
|
54 | const params = createMemo(() => getParams(rest));
|
55 | const slidesSlots = children(() => getChildren(local.children));
|
56 |
|
57 | const onBeforeBreakpoint = () => {
|
58 | setBreakpointChanged(state => !state);
|
59 | };
|
60 |
|
61 | Object.assign(params().params.on, {
|
62 | _containerClasses(swiper, classes) {
|
63 | setContainerClasses(classes);
|
64 | }
|
65 |
|
66 | });
|
67 |
|
68 | const initSwiper = () => {
|
69 |
|
70 | Object.assign(params().params.on, params().events);
|
71 | eventsAssigned = true;
|
72 | swiperRef = new SwiperCore(params().params);
|
73 |
|
74 | swiperRef.loopCreate = () => {};
|
75 |
|
76 | swiperRef.loopDestroy = () => {};
|
77 |
|
78 | if (params().params.loop) {
|
79 | swiperRef.loopedSlides = calcLoopedSlides(slidesSlots().slides, params().params);
|
80 | }
|
81 |
|
82 | if (swiperRef.virtual && swiperRef.params.virtual.enabled) {
|
83 | swiperRef.virtual.slides = slidesSlots().slides;
|
84 | const extendWith = {
|
85 | cache: false,
|
86 | slides: slidesSlots().slides,
|
87 | renderExternal: data => {
|
88 | setVirtualData(data);
|
89 | },
|
90 | renderExternalUpdate: true
|
91 | };
|
92 | extend(swiperRef.params.virtual, extendWith);
|
93 | extend(swiperRef.originalParams.virtual, extendWith);
|
94 | }
|
95 | };
|
96 |
|
97 | if (!swiperElRef) {
|
98 | initSwiper();
|
99 | }
|
100 |
|
101 |
|
102 | if (swiperRef) {
|
103 | swiperRef.on('_beforeBreakpoint', onBeforeBreakpoint);
|
104 | }
|
105 |
|
106 | const attachEvents = () => {
|
107 | if (eventsAssigned || !params().events || !swiperRef) return;
|
108 | Object.keys(params().events).forEach(eventName => {
|
109 | swiperRef.on(eventName, params().events[eventName]);
|
110 | });
|
111 | };
|
112 |
|
113 | const detachEvents = () => {
|
114 | if (!params().events || !swiperRef) return;
|
115 | Object.keys(params().events).forEach(eventName => {
|
116 | swiperRef.off(eventName, params().events[eventName]);
|
117 | });
|
118 | };
|
119 |
|
120 | onCleanup(() => {
|
121 | if (swiperRef) swiperRef.off('_beforeBreakpoint', onBeforeBreakpoint);
|
122 | });
|
123 |
|
124 | createEffect(() => {
|
125 | if (!initializedRef && swiperRef) {
|
126 | swiperRef.emitSlidesClasses();
|
127 | initializedRef = true;
|
128 | }
|
129 | });
|
130 |
|
131 | onMount(() => {
|
132 | if (local.ref) {
|
133 | if (typeof local.ref === 'function') {
|
134 | local.ref(swiperElRef);
|
135 | } else {
|
136 | local.ref = swiperElRef;
|
137 | }
|
138 | }
|
139 |
|
140 | if (!swiperElRef) return;
|
141 |
|
142 | if (swiperRef.destroyed) {
|
143 | initSwiper();
|
144 | }
|
145 |
|
146 | mountSwiper({
|
147 | el: swiperElRef,
|
148 | nextEl: nextElRef,
|
149 | prevEl: prevElRef,
|
150 | paginationEl: paginationElRef,
|
151 | scrollbarEl: scrollbarElRef,
|
152 | swiper: swiperRef
|
153 | }, params().params);
|
154 | if (local.onSwiper) local.onSwiper(swiperRef);
|
155 | });
|
156 | onCleanup(() => {
|
157 | if (swiperRef && !swiperRef.destroyed) {
|
158 | swiperRef.destroy(true, false);
|
159 | }
|
160 | });
|
161 |
|
162 | createEffect(() => {
|
163 | attachEvents();
|
164 | const {
|
165 | passedParams
|
166 | } = params();
|
167 | const changedParams = getChangedParams(passedParams, oldPassedParamsRef, slidesSlots().slides, oldSlides, c => c.key);
|
168 | oldPassedParamsRef = passedParams;
|
169 | oldSlides = slidesSlots().slides;
|
170 |
|
171 | if (changedParams.length && swiperRef && !swiperRef.destroyed) {
|
172 | updateSwiper({
|
173 | swiper: swiperRef,
|
174 | slides: slidesSlots().slides,
|
175 | passedParams,
|
176 | changedParams,
|
177 | nextEl: nextElRef,
|
178 | prevEl: prevElRef,
|
179 | scrollbarEl: scrollbarElRef,
|
180 | paginationEl: paginationElRef
|
181 | });
|
182 | }
|
183 |
|
184 | onCleanup(detachEvents);
|
185 | });
|
186 |
|
187 | createEffect(() => {
|
188 | updateOnVirtualData(swiperRef);
|
189 | setTimeout(() => {
|
190 | updateOnVirtualData(swiperRef);
|
191 | });
|
192 | });
|
193 |
|
194 | function renderSlides() {
|
195 | if (params().params.virtual) {
|
196 | return renderVirtual(swiperRef, slidesSlots().slides, virtualData());
|
197 | }
|
198 |
|
199 | if (!params().params.loop || swiperRef && swiperRef.destroyed) {
|
200 | return slidesSlots().slides;
|
201 | }
|
202 |
|
203 | return renderLoop(swiperRef, slidesSlots().slides, params().params);
|
204 | }
|
205 |
|
206 |
|
207 |
|
208 |
|
209 |
|
210 | return (() => {
|
211 | const _el$ = _tmpl$6.cloneNode(true);
|
212 |
|
213 | const _ref$ = swiperElRef;
|
214 | typeof _ref$ === "function" ? _ref$(_el$) : swiperElRef = _el$;
|
215 |
|
216 | _$spread(_el$, () => params().rest, false, true);
|
217 |
|
218 | _$insert(_el$, _$createComponent(SwiperContext.Provider, {
|
219 | value: swiperRef,
|
220 |
|
221 | get children() {
|
222 | return [_$memo(() => slidesSlots().slots['container-start']), (() => {
|
223 | const _el$2 = _tmpl$.cloneNode(true);
|
224 |
|
225 | _$insert(_el$2, () => slidesSlots().slots['wrapper-start'], null);
|
226 |
|
227 | _$insert(_el$2, renderSlides, null);
|
228 |
|
229 | _$insert(_el$2, () => slidesSlots().slots['wrapper-end'], null);
|
230 |
|
231 | return _el$2;
|
232 | })(), _$createComponent(Show, {
|
233 | get when() {
|
234 | return needsNavigation(params().params);
|
235 | },
|
236 |
|
237 | get children() {
|
238 | return [(() => {
|
239 | const _el$3 = _tmpl$2.cloneNode(true);
|
240 |
|
241 | const _ref$2 = prevElRef;
|
242 | typeof _ref$2 === "function" ? _ref$2(_el$3) : prevElRef = _el$3;
|
243 | return _el$3;
|
244 | })(), (() => {
|
245 | const _el$4 = _tmpl$3.cloneNode(true);
|
246 |
|
247 | const _ref$3 = nextElRef;
|
248 | typeof _ref$3 === "function" ? _ref$3(_el$4) : nextElRef = _el$4;
|
249 | return _el$4;
|
250 | })()];
|
251 | }
|
252 |
|
253 | }), _$createComponent(Show, {
|
254 | get when() {
|
255 | return needsScrollbar(params().params);
|
256 | },
|
257 |
|
258 | get children() {
|
259 | const _el$5 = _tmpl$4.cloneNode(true);
|
260 |
|
261 | const _ref$4 = scrollbarElRef;
|
262 | typeof _ref$4 === "function" ? _ref$4(_el$5) : scrollbarElRef = _el$5;
|
263 | return _el$5;
|
264 | }
|
265 |
|
266 | }), _$createComponent(Show, {
|
267 | get when() {
|
268 | return needsPagination(params().params);
|
269 | },
|
270 |
|
271 | get children() {
|
272 | const _el$6 = _tmpl$5.cloneNode(true);
|
273 |
|
274 | const _ref$5 = paginationElRef;
|
275 | typeof _ref$5 === "function" ? _ref$5(_el$6) : paginationElRef = _el$6;
|
276 | return _el$6;
|
277 | }
|
278 |
|
279 | }), _$memo(() => slidesSlots().slots['container-end'])];
|
280 | }
|
281 |
|
282 | }));
|
283 |
|
284 | _$effect(() => _$className(_el$, uniqueClasses(`${containerClasses()}${local.class ? ` ${local.class}` : ''}`)));
|
285 |
|
286 | return _el$;
|
287 | })();
|
288 | };
|
289 |
|
290 | export { Swiper }; |
\ | No newline at end of file |