204 lines
7.3 KiB
JavaScript
204 lines
7.3 KiB
JavaScript
"use strict";
|
|
|
|
exports.__esModule = true;
|
|
exports.default = void 0;
|
|
|
|
var _dom = _interopRequireDefault(require("../../utils/dom"));
|
|
|
|
var _utils = require("../../utils/utils");
|
|
|
|
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
|
|
|
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); }
|
|
|
|
var Cube = {
|
|
setTranslate: function setTranslate() {
|
|
var swiper = this;
|
|
var $el = swiper.$el,
|
|
$wrapperEl = swiper.$wrapperEl,
|
|
slides = swiper.slides,
|
|
swiperWidth = swiper.width,
|
|
swiperHeight = swiper.height,
|
|
rtl = swiper.rtlTranslate,
|
|
swiperSize = swiper.size,
|
|
browser = swiper.browser;
|
|
var params = swiper.params.cubeEffect;
|
|
var isHorizontal = swiper.isHorizontal();
|
|
var isVirtual = swiper.virtual && swiper.params.virtual.enabled;
|
|
var wrapperRotate = 0;
|
|
var $cubeShadowEl;
|
|
|
|
if (params.shadow) {
|
|
if (isHorizontal) {
|
|
$cubeShadowEl = $wrapperEl.find('.swiper-cube-shadow');
|
|
|
|
if ($cubeShadowEl.length === 0) {
|
|
$cubeShadowEl = (0, _dom.default)('<div class="swiper-cube-shadow"></div>');
|
|
$wrapperEl.append($cubeShadowEl);
|
|
}
|
|
|
|
$cubeShadowEl.css({
|
|
height: swiperWidth + "px"
|
|
});
|
|
} else {
|
|
$cubeShadowEl = $el.find('.swiper-cube-shadow');
|
|
|
|
if ($cubeShadowEl.length === 0) {
|
|
$cubeShadowEl = (0, _dom.default)('<div class="swiper-cube-shadow"></div>');
|
|
$el.append($cubeShadowEl);
|
|
}
|
|
}
|
|
}
|
|
|
|
for (var i = 0; i < slides.length; i += 1) {
|
|
var $slideEl = slides.eq(i);
|
|
var slideIndex = i;
|
|
|
|
if (isVirtual) {
|
|
slideIndex = parseInt($slideEl.attr('data-swiper-slide-index'), 10);
|
|
}
|
|
|
|
var slideAngle = slideIndex * 90;
|
|
var round = Math.floor(slideAngle / 360);
|
|
|
|
if (rtl) {
|
|
slideAngle = -slideAngle;
|
|
round = Math.floor(-slideAngle / 360);
|
|
}
|
|
|
|
var progress = Math.max(Math.min($slideEl[0].progress, 1), -1);
|
|
var tx = 0;
|
|
var ty = 0;
|
|
var tz = 0;
|
|
|
|
if (slideIndex % 4 === 0) {
|
|
tx = -round * 4 * swiperSize;
|
|
tz = 0;
|
|
} else if ((slideIndex - 1) % 4 === 0) {
|
|
tx = 0;
|
|
tz = -round * 4 * swiperSize;
|
|
} else if ((slideIndex - 2) % 4 === 0) {
|
|
tx = swiperSize + round * 4 * swiperSize;
|
|
tz = swiperSize;
|
|
} else if ((slideIndex - 3) % 4 === 0) {
|
|
tx = -swiperSize;
|
|
tz = 3 * swiperSize + swiperSize * 4 * round;
|
|
}
|
|
|
|
if (rtl) {
|
|
tx = -tx;
|
|
}
|
|
|
|
if (!isHorizontal) {
|
|
ty = tx;
|
|
tx = 0;
|
|
}
|
|
|
|
var transform = "rotateX(" + (isHorizontal ? 0 : -slideAngle) + "deg) rotateY(" + (isHorizontal ? slideAngle : 0) + "deg) translate3d(" + tx + "px, " + ty + "px, " + tz + "px)";
|
|
|
|
if (progress <= 1 && progress > -1) {
|
|
wrapperRotate = slideIndex * 90 + progress * 90;
|
|
if (rtl) wrapperRotate = -slideIndex * 90 - progress * 90;
|
|
}
|
|
|
|
$slideEl.transform(transform);
|
|
|
|
if (params.slideShadows) {
|
|
// Set shadows
|
|
var shadowBefore = isHorizontal ? $slideEl.find('.swiper-slide-shadow-left') : $slideEl.find('.swiper-slide-shadow-top');
|
|
var shadowAfter = isHorizontal ? $slideEl.find('.swiper-slide-shadow-right') : $slideEl.find('.swiper-slide-shadow-bottom');
|
|
|
|
if (shadowBefore.length === 0) {
|
|
shadowBefore = (0, _dom.default)("<div class=\"swiper-slide-shadow-" + (isHorizontal ? 'left' : 'top') + "\"></div>");
|
|
$slideEl.append(shadowBefore);
|
|
}
|
|
|
|
if (shadowAfter.length === 0) {
|
|
shadowAfter = (0, _dom.default)("<div class=\"swiper-slide-shadow-" + (isHorizontal ? 'right' : 'bottom') + "\"></div>");
|
|
$slideEl.append(shadowAfter);
|
|
}
|
|
|
|
if (shadowBefore.length) shadowBefore[0].style.opacity = Math.max(-progress, 0);
|
|
if (shadowAfter.length) shadowAfter[0].style.opacity = Math.max(progress, 0);
|
|
}
|
|
}
|
|
|
|
$wrapperEl.css({
|
|
'-webkit-transform-origin': "50% 50% -" + swiperSize / 2 + "px",
|
|
'-moz-transform-origin': "50% 50% -" + swiperSize / 2 + "px",
|
|
'-ms-transform-origin': "50% 50% -" + swiperSize / 2 + "px",
|
|
'transform-origin': "50% 50% -" + swiperSize / 2 + "px"
|
|
});
|
|
|
|
if (params.shadow) {
|
|
if (isHorizontal) {
|
|
$cubeShadowEl.transform("translate3d(0px, " + (swiperWidth / 2 + params.shadowOffset) + "px, " + -swiperWidth / 2 + "px) rotateX(90deg) rotateZ(0deg) scale(" + params.shadowScale + ")");
|
|
} else {
|
|
var shadowAngle = Math.abs(wrapperRotate) - Math.floor(Math.abs(wrapperRotate) / 90) * 90;
|
|
var multiplier = 1.5 - (Math.sin(shadowAngle * 2 * Math.PI / 360) / 2 + Math.cos(shadowAngle * 2 * Math.PI / 360) / 2);
|
|
var scale1 = params.shadowScale;
|
|
var scale2 = params.shadowScale / multiplier;
|
|
var offset = params.shadowOffset;
|
|
$cubeShadowEl.transform("scale3d(" + scale1 + ", 1, " + scale2 + ") translate3d(0px, " + (swiperHeight / 2 + offset) + "px, " + -swiperHeight / 2 / scale2 + "px) rotateX(-90deg)");
|
|
}
|
|
}
|
|
|
|
var zFactor = browser.isSafari || browser.isWebView ? -swiperSize / 2 : 0;
|
|
$wrapperEl.transform("translate3d(0px,0," + zFactor + "px) rotateX(" + (swiper.isHorizontal() ? 0 : wrapperRotate) + "deg) rotateY(" + (swiper.isHorizontal() ? -wrapperRotate : 0) + "deg)");
|
|
},
|
|
setTransition: function setTransition(duration) {
|
|
var swiper = this;
|
|
var $el = swiper.$el,
|
|
slides = swiper.slides;
|
|
slides.transition(duration).find('.swiper-slide-shadow-top, .swiper-slide-shadow-right, .swiper-slide-shadow-bottom, .swiper-slide-shadow-left').transition(duration);
|
|
|
|
if (swiper.params.cubeEffect.shadow && !swiper.isHorizontal()) {
|
|
$el.find('.swiper-cube-shadow').transition(duration);
|
|
}
|
|
}
|
|
};
|
|
var _default = {
|
|
name: 'effect-cube',
|
|
params: {
|
|
cubeEffect: {
|
|
slideShadows: true,
|
|
shadow: true,
|
|
shadowOffset: 20,
|
|
shadowScale: 0.94
|
|
}
|
|
},
|
|
create: function create() {
|
|
var swiper = this;
|
|
(0, _utils.bindModuleMethods)(swiper, {
|
|
cubeEffect: _extends({}, Cube)
|
|
});
|
|
},
|
|
on: {
|
|
beforeInit: function beforeInit(swiper) {
|
|
if (swiper.params.effect !== 'cube') return;
|
|
swiper.classNames.push(swiper.params.containerModifierClass + "cube");
|
|
swiper.classNames.push(swiper.params.containerModifierClass + "3d");
|
|
var overwriteParams = {
|
|
slidesPerView: 1,
|
|
slidesPerColumn: 1,
|
|
slidesPerGroup: 1,
|
|
watchSlidesProgress: true,
|
|
resistanceRatio: 0,
|
|
spaceBetween: 0,
|
|
centeredSlides: false,
|
|
virtualTranslate: true
|
|
};
|
|
(0, _utils.extend)(swiper.params, overwriteParams);
|
|
(0, _utils.extend)(swiper.originalParams, overwriteParams);
|
|
},
|
|
setTranslate: function setTranslate(swiper) {
|
|
if (swiper.params.effect !== 'cube') return;
|
|
swiper.cubeEffect.setTranslate();
|
|
},
|
|
setTransition: function setTransition(swiper, duration) {
|
|
if (swiper.params.effect !== 'cube') return;
|
|
swiper.cubeEffect.setTransition(duration);
|
|
}
|
|
}
|
|
};
|
|
exports.default = _default; |