1 | import $ from '../../shared/dom.js';
|
2 | import effectInit from '../../shared/effect-init.js';
|
3 | export default function EffectCube(_ref) {
|
4 | let {
|
5 | swiper,
|
6 | extendParams,
|
7 | on
|
8 | } = _ref;
|
9 | extendParams({
|
10 | cubeEffect: {
|
11 | slideShadows: true,
|
12 | shadow: true,
|
13 | shadowOffset: 20,
|
14 | shadowScale: 0.94
|
15 | }
|
16 | });
|
17 |
|
18 | const createSlideShadows = ($slideEl, progress, isHorizontal) => {
|
19 | let shadowBefore = isHorizontal ? $slideEl.find('.swiper-slide-shadow-left') : $slideEl.find('.swiper-slide-shadow-top');
|
20 | let shadowAfter = isHorizontal ? $slideEl.find('.swiper-slide-shadow-right') : $slideEl.find('.swiper-slide-shadow-bottom');
|
21 |
|
22 | if (shadowBefore.length === 0) {
|
23 | shadowBefore = $(`<div class="swiper-slide-shadow-${isHorizontal ? 'left' : 'top'}"></div>`);
|
24 | $slideEl.append(shadowBefore);
|
25 | }
|
26 |
|
27 | if (shadowAfter.length === 0) {
|
28 | shadowAfter = $(`<div class="swiper-slide-shadow-${isHorizontal ? 'right' : 'bottom'}"></div>`);
|
29 | $slideEl.append(shadowAfter);
|
30 | }
|
31 |
|
32 | if (shadowBefore.length) shadowBefore[0].style.opacity = Math.max(-progress, 0);
|
33 | if (shadowAfter.length) shadowAfter[0].style.opacity = Math.max(progress, 0);
|
34 | };
|
35 |
|
36 | const recreateShadows = () => {
|
37 |
|
38 | const isHorizontal = swiper.isHorizontal();
|
39 | swiper.slides.each(slideEl => {
|
40 | const progress = Math.max(Math.min(slideEl.progress, 1), -1);
|
41 | createSlideShadows($(slideEl), progress, isHorizontal);
|
42 | });
|
43 | };
|
44 |
|
45 | const setTranslate = () => {
|
46 | const {
|
47 | $el,
|
48 | $wrapperEl,
|
49 | slides,
|
50 | width: swiperWidth,
|
51 | height: swiperHeight,
|
52 | rtlTranslate: rtl,
|
53 | size: swiperSize,
|
54 | browser
|
55 | } = swiper;
|
56 | const params = swiper.params.cubeEffect;
|
57 | const isHorizontal = swiper.isHorizontal();
|
58 | const isVirtual = swiper.virtual && swiper.params.virtual.enabled;
|
59 | let wrapperRotate = 0;
|
60 | let $cubeShadowEl;
|
61 |
|
62 | if (params.shadow) {
|
63 | if (isHorizontal) {
|
64 | $cubeShadowEl = $wrapperEl.find('.swiper-cube-shadow');
|
65 |
|
66 | if ($cubeShadowEl.length === 0) {
|
67 | $cubeShadowEl = $('<div class="swiper-cube-shadow"></div>');
|
68 | $wrapperEl.append($cubeShadowEl);
|
69 | }
|
70 |
|
71 | $cubeShadowEl.css({
|
72 | height: `${swiperWidth}px`
|
73 | });
|
74 | } else {
|
75 | $cubeShadowEl = $el.find('.swiper-cube-shadow');
|
76 |
|
77 | if ($cubeShadowEl.length === 0) {
|
78 | $cubeShadowEl = $('<div class="swiper-cube-shadow"></div>');
|
79 | $el.append($cubeShadowEl);
|
80 | }
|
81 | }
|
82 | }
|
83 |
|
84 | for (let i = 0; i < slides.length; i += 1) {
|
85 | const $slideEl = slides.eq(i);
|
86 | let slideIndex = i;
|
87 |
|
88 | if (isVirtual) {
|
89 | slideIndex = parseInt($slideEl.attr('data-swiper-slide-index'), 10);
|
90 | }
|
91 |
|
92 | let slideAngle = slideIndex * 90;
|
93 | let round = Math.floor(slideAngle / 360);
|
94 |
|
95 | if (rtl) {
|
96 | slideAngle = -slideAngle;
|
97 | round = Math.floor(-slideAngle / 360);
|
98 | }
|
99 |
|
100 | const progress = Math.max(Math.min($slideEl[0].progress, 1), -1);
|
101 | let tx = 0;
|
102 | let ty = 0;
|
103 | let tz = 0;
|
104 |
|
105 | if (slideIndex % 4 === 0) {
|
106 | tx = -round * 4 * swiperSize;
|
107 | tz = 0;
|
108 | } else if ((slideIndex - 1) % 4 === 0) {
|
109 | tx = 0;
|
110 | tz = -round * 4 * swiperSize;
|
111 | } else if ((slideIndex - 2) % 4 === 0) {
|
112 | tx = swiperSize + round * 4 * swiperSize;
|
113 | tz = swiperSize;
|
114 | } else if ((slideIndex - 3) % 4 === 0) {
|
115 | tx = -swiperSize;
|
116 | tz = 3 * swiperSize + swiperSize * 4 * round;
|
117 | }
|
118 |
|
119 | if (rtl) {
|
120 | tx = -tx;
|
121 | }
|
122 |
|
123 | if (!isHorizontal) {
|
124 | ty = tx;
|
125 | tx = 0;
|
126 | }
|
127 |
|
128 | const transform = `rotateX(${isHorizontal ? 0 : -slideAngle}deg) rotateY(${isHorizontal ? slideAngle : 0}deg) translate3d(${tx}px, ${ty}px, ${tz}px)`;
|
129 |
|
130 | if (progress <= 1 && progress > -1) {
|
131 | wrapperRotate = slideIndex * 90 + progress * 90;
|
132 | if (rtl) wrapperRotate = -slideIndex * 90 - progress * 90;
|
133 | }
|
134 |
|
135 | $slideEl.transform(transform);
|
136 |
|
137 | if (params.slideShadows) {
|
138 | createSlideShadows($slideEl, progress, isHorizontal);
|
139 | }
|
140 | }
|
141 |
|
142 | $wrapperEl.css({
|
143 | '-webkit-transform-origin': `50% 50% -${swiperSize / 2}px`,
|
144 | 'transform-origin': `50% 50% -${swiperSize / 2}px`
|
145 | });
|
146 |
|
147 | if (params.shadow) {
|
148 | if (isHorizontal) {
|
149 | $cubeShadowEl.transform(`translate3d(0px, ${swiperWidth / 2 + params.shadowOffset}px, ${-swiperWidth / 2}px) rotateX(90deg) rotateZ(0deg) scale(${params.shadowScale})`);
|
150 | } else {
|
151 | const shadowAngle = Math.abs(wrapperRotate) - Math.floor(Math.abs(wrapperRotate) / 90) * 90;
|
152 | const multiplier = 1.5 - (Math.sin(shadowAngle * 2 * Math.PI / 360) / 2 + Math.cos(shadowAngle * 2 * Math.PI / 360) / 2);
|
153 | const scale1 = params.shadowScale;
|
154 | const scale2 = params.shadowScale / multiplier;
|
155 | const offset = params.shadowOffset;
|
156 | $cubeShadowEl.transform(`scale3d(${scale1}, 1, ${scale2}) translate3d(0px, ${swiperHeight / 2 + offset}px, ${-swiperHeight / 2 / scale2}px) rotateX(-90deg)`);
|
157 | }
|
158 | }
|
159 |
|
160 | const zFactor = browser.isSafari || browser.isWebView ? -swiperSize / 2 : 0;
|
161 | $wrapperEl.transform(`translate3d(0px,0,${zFactor}px) rotateX(${swiper.isHorizontal() ? 0 : wrapperRotate}deg) rotateY(${swiper.isHorizontal() ? -wrapperRotate : 0}deg)`);
|
162 | $wrapperEl[0].style.setProperty('--swiper-cube-translate-z', `${zFactor}px`);
|
163 | };
|
164 |
|
165 | const setTransition = duration => {
|
166 | const {
|
167 | $el,
|
168 | slides
|
169 | } = swiper;
|
170 | slides.transition(duration).find('.swiper-slide-shadow-top, .swiper-slide-shadow-right, .swiper-slide-shadow-bottom, .swiper-slide-shadow-left').transition(duration);
|
171 |
|
172 | if (swiper.params.cubeEffect.shadow && !swiper.isHorizontal()) {
|
173 | $el.find('.swiper-cube-shadow').transition(duration);
|
174 | }
|
175 | };
|
176 |
|
177 | effectInit({
|
178 | effect: 'cube',
|
179 | swiper,
|
180 | on,
|
181 | setTranslate,
|
182 | setTransition,
|
183 | recreateShadows,
|
184 | getEffectParams: () => swiper.params.cubeEffect,
|
185 | perspective: () => true,
|
186 | overwriteParams: () => ({
|
187 | slidesPerView: 1,
|
188 | slidesPerGroup: 1,
|
189 | watchSlidesProgress: true,
|
190 | resistanceRatio: 0,
|
191 | spaceBetween: 0,
|
192 | centeredSlides: false,
|
193 | virtualTranslate: true
|
194 | })
|
195 | });
|
196 | } |
\ | No newline at end of file |