Browse code

Refactor and rewrite as contao bundle

Benjamin Roth authored on04/11/2022 22:32:32
Showing1 changed files
1 1
new file mode 100644
... ...
@@ -0,0 +1,182 @@
1
+function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
2
+
3
+function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
4
+
5
+import React, { useRef, useState, useEffect, forwardRef } from 'react';
6
+import { getParams } from './get-params';
7
+import { initSwiper, mountSwiper } from './init-swiper';
8
+import { needsScrollbar, needsNavigation, needsPagination, uniqueClasses, extend } from './utils';
9
+import { renderLoop, calcLoopedSlides } from './loop';
10
+import { getChangedParams } from './get-changed-params';
11
+import { getChildren } from './get-children';
12
+import { updateSwiper } from './update-swiper';
13
+import { renderVirtual, updateOnVirtualData } from './virtual';
14
+import { useIsomorphicLayoutEffect } from './use-isomorphic-layout-effect';
15
+var Swiper = /*#__PURE__*/forwardRef(function (_temp, externalElRef) {
16
+  var _ref = _temp === void 0 ? {} : _temp,
17
+      className = _ref.className,
18
+      _ref$tag = _ref.tag,
19
+      Tag = _ref$tag === void 0 ? 'div' : _ref$tag,
20
+      _ref$wrapperTag = _ref.wrapperTag,
21
+      WrapperTag = _ref$wrapperTag === void 0 ? 'div' : _ref$wrapperTag,
22
+      children = _ref.children,
23
+      onSwiper = _ref.onSwiper,
24
+      rest = _objectWithoutPropertiesLoose(_ref, ["className", "tag", "wrapperTag", "children", "onSwiper"]);
25
+
26
+  var _useState = useState('swiper-container'),
27
+      containerClasses = _useState[0],
28
+      setContainerClasses = _useState[1];
29
+
30
+  var _useState2 = useState(null),
31
+      virtualData = _useState2[0],
32
+      setVirtualData = _useState2[1];
33
+
34
+  var _useState3 = useState(false),
35
+      breakpointChanged = _useState3[0],
36
+      setBreakpointChanged = _useState3[1];
37
+
38
+  var initializedRef = useRef(false);
39
+  var swiperElRef = useRef(null);
40
+  var swiperRef = useRef(null);
41
+  var oldPassedParamsRef = useRef(null);
42
+  var oldSlides = useRef(null);
43
+  var nextElRef = useRef(null);
44
+  var prevElRef = useRef(null);
45
+  var paginationElRef = useRef(null);
46
+  var scrollbarElRef = useRef(null);
47
+
48
+  var _getParams = getParams(rest),
49
+      swiperParams = _getParams.params,
50
+      passedParams = _getParams.passedParams,
51
+      restProps = _getParams.rest;
52
+
53
+  var _getChildren = getChildren(children),
54
+      slides = _getChildren.slides,
55
+      slots = _getChildren.slots;
56
+
57
+  var changedParams = getChangedParams(passedParams, oldPassedParamsRef.current, slides, oldSlides.current);
58
+  oldPassedParamsRef.current = passedParams;
59
+  oldSlides.current = slides;
60
+
61
+  var onBeforeBreakpoint = function onBeforeBreakpoint() {
62
+    setBreakpointChanged(!breakpointChanged);
63
+  };
64
+
65
+  Object.assign(swiperParams.on, {
66
+    _containerClasses: function _containerClasses(swiper, classes) {
67
+      setContainerClasses(classes);
68
+    }
69
+  });
70
+
71
+  if (!swiperElRef.current) {
72
+    // init swiper
73
+    swiperRef.current = initSwiper(swiperParams);
74
+
75
+    swiperRef.current.loopCreate = function () {};
76
+
77
+    swiperRef.current.loopDestroy = function () {};
78
+
79
+    if (swiperParams.loop) {
80
+      swiperRef.current.loopedSlides = calcLoopedSlides(slides, swiperParams);
81
+    }
82
+
83
+    if (swiperRef.current.virtual && swiperRef.current.params.virtual.enabled) {
84
+      swiperRef.current.virtual.slides = slides;
85
+      var extendWith = {
86
+        cache: false,
87
+        renderExternal: setVirtualData,
88
+        renderExternalUpdate: false
89
+      };
90
+      extend(swiperRef.current.params.virtual, extendWith);
91
+      extend(swiperRef.current.originalParams.virtual, extendWith);
92
+    }
93
+  } // Listen for breakpoints change
94
+
95
+
96
+  if (swiperRef.current) {
97
+    swiperRef.current.on('_beforeBreakpoint', onBeforeBreakpoint);
98
+  }
99
+
100
+  useEffect(function () {
101
+    return function () {
102
+      if (swiperRef.current) swiperRef.current.off('_beforeBreakpoint', onBeforeBreakpoint);
103
+    };
104
+  }); // set initialized flag
105
+
106
+  useEffect(function () {
107
+    if (!initializedRef.current && swiperRef.current) {
108
+      swiperRef.current.emitSlidesClasses();
109
+      initializedRef.current = true;
110
+    }
111
+  }); // mount swiper
112
+
113
+  useIsomorphicLayoutEffect(function () {
114
+    if (externalElRef) {
115
+      externalElRef.current = swiperElRef.current;
116
+    }
117
+
118
+    if (!swiperElRef.current) return;
119
+    mountSwiper({
120
+      el: swiperElRef.current,
121
+      nextEl: nextElRef.current,
122
+      prevEl: prevElRef.current,
123
+      paginationEl: paginationElRef.current,
124
+      scrollbarEl: scrollbarElRef.current,
125
+      swiper: swiperRef.current
126
+    }, swiperParams);
127
+    if (onSwiper) onSwiper(swiperRef.current); // eslint-disable-next-line
128
+
129
+    return function () {
130
+      if (swiperRef.current && !swiperRef.current.destroyed) {
131
+        swiperRef.current.destroy(true, false);
132
+      }
133
+    };
134
+  }, []); // watch for params change
135
+
136
+  useIsomorphicLayoutEffect(function () {
137
+    if (changedParams.length && swiperRef.current && !swiperRef.current.destroyed) {
138
+      updateSwiper(swiperRef.current, slides, passedParams, changedParams);
139
+    }
140
+  }); // update on virtual update
141
+
142
+  useIsomorphicLayoutEffect(function () {
143
+    updateOnVirtualData(swiperRef.current);
144
+  }, [virtualData]); // bypass swiper instance to slides
145
+
146
+  function renderSlides() {
147
+    if (swiperParams.virtual) {
148
+      return renderVirtual(swiperRef.current, slides, virtualData);
149
+    }
150
+
151
+    if (!swiperParams.loop || swiperRef.current && swiperRef.current.destroyed) {
152
+      return slides.map(function (child) {
153
+        return /*#__PURE__*/React.cloneElement(child, {
154
+          swiper: swiperRef.current
155
+        });
156
+      });
157
+    }
158
+
159
+    return renderLoop(swiperRef.current, slides, swiperParams);
160
+  }
161
+
162
+  return /*#__PURE__*/React.createElement(Tag, _extends({
163
+    ref: swiperElRef,
164
+    className: uniqueClasses("" + containerClasses + (className ? " " + className : ''))
165
+  }, restProps), slots['container-start'], needsNavigation(swiperParams) && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
166
+    ref: prevElRef,
167
+    className: "swiper-button-prev"
168
+  }), /*#__PURE__*/React.createElement("div", {
169
+    ref: nextElRef,
170
+    className: "swiper-button-next"
171
+  })), needsScrollbar(swiperParams) && /*#__PURE__*/React.createElement("div", {
172
+    ref: scrollbarElRef,
173
+    className: "swiper-scrollbar"
174
+  }), needsPagination(swiperParams) && /*#__PURE__*/React.createElement("div", {
175
+    ref: paginationElRef,
176
+    className: "swiper-pagination"
177
+  }), /*#__PURE__*/React.createElement(WrapperTag, {
178
+    className: "swiper-wrapper"
179
+  }, slots['wrapper-start'], renderSlides(), slots['wrapper-end']), slots['container-end']);
180
+});
181
+Swiper.displayName = 'Swiper';
182
+export { Swiper };
0 183
\ No newline at end of file