223 lines
8.5 KiB
JavaScript
223 lines
8.5 KiB
JavaScript
"use strict";
|
|
|
|
exports.__esModule = true;
|
|
exports.default = void 0;
|
|
|
|
var _utils = require("../../utils/utils");
|
|
|
|
var _dom = _interopRequireDefault(require("../../utils/dom"));
|
|
|
|
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 Thumbs = {
|
|
init: function init() {
|
|
var swiper = this;
|
|
var thumbsParams = swiper.params.thumbs;
|
|
if (swiper.thumbs.initialized) return false;
|
|
swiper.thumbs.initialized = true;
|
|
var SwiperClass = swiper.constructor;
|
|
|
|
if (thumbsParams.swiper instanceof SwiperClass) {
|
|
swiper.thumbs.swiper = thumbsParams.swiper;
|
|
(0, _utils.extend)(swiper.thumbs.swiper.originalParams, {
|
|
watchSlidesProgress: true,
|
|
slideToClickedSlide: false
|
|
});
|
|
(0, _utils.extend)(swiper.thumbs.swiper.params, {
|
|
watchSlidesProgress: true,
|
|
slideToClickedSlide: false
|
|
});
|
|
} else if ((0, _utils.isObject)(thumbsParams.swiper)) {
|
|
swiper.thumbs.swiper = new SwiperClass((0, _utils.extend)({}, thumbsParams.swiper, {
|
|
watchSlidesVisibility: true,
|
|
watchSlidesProgress: true,
|
|
slideToClickedSlide: false
|
|
}));
|
|
swiper.thumbs.swiperCreated = true;
|
|
}
|
|
|
|
swiper.thumbs.swiper.$el.addClass(swiper.params.thumbs.thumbsContainerClass);
|
|
swiper.thumbs.swiper.on('tap', swiper.thumbs.onThumbClick);
|
|
return true;
|
|
},
|
|
onThumbClick: function onThumbClick() {
|
|
var swiper = this;
|
|
var thumbsSwiper = swiper.thumbs.swiper;
|
|
if (!thumbsSwiper) return;
|
|
var clickedIndex = thumbsSwiper.clickedIndex;
|
|
var clickedSlide = thumbsSwiper.clickedSlide;
|
|
if (clickedSlide && (0, _dom.default)(clickedSlide).hasClass(swiper.params.thumbs.slideThumbActiveClass)) return;
|
|
if (typeof clickedIndex === 'undefined' || clickedIndex === null) return;
|
|
var slideToIndex;
|
|
|
|
if (thumbsSwiper.params.loop) {
|
|
slideToIndex = parseInt((0, _dom.default)(thumbsSwiper.clickedSlide).attr('data-swiper-slide-index'), 10);
|
|
} else {
|
|
slideToIndex = clickedIndex;
|
|
}
|
|
|
|
if (swiper.params.loop) {
|
|
var currentIndex = swiper.activeIndex;
|
|
|
|
if (swiper.slides.eq(currentIndex).hasClass(swiper.params.slideDuplicateClass)) {
|
|
swiper.loopFix(); // eslint-disable-next-line
|
|
|
|
swiper._clientLeft = swiper.$wrapperEl[0].clientLeft;
|
|
currentIndex = swiper.activeIndex;
|
|
}
|
|
|
|
var prevIndex = swiper.slides.eq(currentIndex).prevAll("[data-swiper-slide-index=\"" + slideToIndex + "\"]").eq(0).index();
|
|
var nextIndex = swiper.slides.eq(currentIndex).nextAll("[data-swiper-slide-index=\"" + slideToIndex + "\"]").eq(0).index();
|
|
if (typeof prevIndex === 'undefined') slideToIndex = nextIndex;else if (typeof nextIndex === 'undefined') slideToIndex = prevIndex;else if (nextIndex - currentIndex < currentIndex - prevIndex) slideToIndex = nextIndex;else slideToIndex = prevIndex;
|
|
}
|
|
|
|
swiper.slideTo(slideToIndex);
|
|
},
|
|
update: function update(initial) {
|
|
var swiper = this;
|
|
var thumbsSwiper = swiper.thumbs.swiper;
|
|
if (!thumbsSwiper) return;
|
|
var slidesPerView = thumbsSwiper.params.slidesPerView === 'auto' ? thumbsSwiper.slidesPerViewDynamic() : thumbsSwiper.params.slidesPerView;
|
|
var autoScrollOffset = swiper.params.thumbs.autoScrollOffset;
|
|
var useOffset = autoScrollOffset && !thumbsSwiper.params.loop;
|
|
|
|
if (swiper.realIndex !== thumbsSwiper.realIndex || useOffset) {
|
|
var currentThumbsIndex = thumbsSwiper.activeIndex;
|
|
var newThumbsIndex;
|
|
var direction;
|
|
|
|
if (thumbsSwiper.params.loop) {
|
|
if (thumbsSwiper.slides.eq(currentThumbsIndex).hasClass(thumbsSwiper.params.slideDuplicateClass)) {
|
|
thumbsSwiper.loopFix(); // eslint-disable-next-line
|
|
|
|
thumbsSwiper._clientLeft = thumbsSwiper.$wrapperEl[0].clientLeft;
|
|
currentThumbsIndex = thumbsSwiper.activeIndex;
|
|
} // Find actual thumbs index to slide to
|
|
|
|
|
|
var prevThumbsIndex = thumbsSwiper.slides.eq(currentThumbsIndex).prevAll("[data-swiper-slide-index=\"" + swiper.realIndex + "\"]").eq(0).index();
|
|
var nextThumbsIndex = thumbsSwiper.slides.eq(currentThumbsIndex).nextAll("[data-swiper-slide-index=\"" + swiper.realIndex + "\"]").eq(0).index();
|
|
|
|
if (typeof prevThumbsIndex === 'undefined') {
|
|
newThumbsIndex = nextThumbsIndex;
|
|
} else if (typeof nextThumbsIndex === 'undefined') {
|
|
newThumbsIndex = prevThumbsIndex;
|
|
} else if (nextThumbsIndex - currentThumbsIndex === currentThumbsIndex - prevThumbsIndex) {
|
|
newThumbsIndex = thumbsSwiper.params.slidesPerGroup > 1 ? nextThumbsIndex : currentThumbsIndex;
|
|
} else if (nextThumbsIndex - currentThumbsIndex < currentThumbsIndex - prevThumbsIndex) {
|
|
newThumbsIndex = nextThumbsIndex;
|
|
} else {
|
|
newThumbsIndex = prevThumbsIndex;
|
|
}
|
|
|
|
direction = swiper.activeIndex > swiper.previousIndex ? 'next' : 'prev';
|
|
} else {
|
|
newThumbsIndex = swiper.realIndex;
|
|
direction = newThumbsIndex > swiper.previousIndex ? 'next' : 'prev';
|
|
}
|
|
|
|
if (useOffset) {
|
|
newThumbsIndex += direction === 'next' ? autoScrollOffset : -1 * autoScrollOffset;
|
|
}
|
|
|
|
if (thumbsSwiper.visibleSlidesIndexes && thumbsSwiper.visibleSlidesIndexes.indexOf(newThumbsIndex) < 0) {
|
|
if (thumbsSwiper.params.centeredSlides) {
|
|
if (newThumbsIndex > currentThumbsIndex) {
|
|
newThumbsIndex = newThumbsIndex - Math.floor(slidesPerView / 2) + 1;
|
|
} else {
|
|
newThumbsIndex = newThumbsIndex + Math.floor(slidesPerView / 2) - 1;
|
|
}
|
|
} else if (newThumbsIndex > currentThumbsIndex && thumbsSwiper.params.slidesPerGroup === 1) {// newThumbsIndex = newThumbsIndex - slidesPerView + 1;
|
|
}
|
|
|
|
thumbsSwiper.slideTo(newThumbsIndex, initial ? 0 : undefined);
|
|
}
|
|
} // Activate thumbs
|
|
|
|
|
|
var thumbsToActivate = 1;
|
|
var thumbActiveClass = swiper.params.thumbs.slideThumbActiveClass;
|
|
|
|
if (swiper.params.slidesPerView > 1 && !swiper.params.centeredSlides) {
|
|
thumbsToActivate = swiper.params.slidesPerView;
|
|
}
|
|
|
|
if (!swiper.params.thumbs.multipleActiveThumbs) {
|
|
thumbsToActivate = 1;
|
|
}
|
|
|
|
thumbsToActivate = Math.floor(thumbsToActivate);
|
|
thumbsSwiper.slides.removeClass(thumbActiveClass);
|
|
|
|
if (thumbsSwiper.params.loop || thumbsSwiper.params.virtual && thumbsSwiper.params.virtual.enabled) {
|
|
for (var i = 0; i < thumbsToActivate; i += 1) {
|
|
thumbsSwiper.$wrapperEl.children("[data-swiper-slide-index=\"" + (swiper.realIndex + i) + "\"]").addClass(thumbActiveClass);
|
|
}
|
|
} else {
|
|
for (var _i = 0; _i < thumbsToActivate; _i += 1) {
|
|
thumbsSwiper.slides.eq(swiper.realIndex + _i).addClass(thumbActiveClass);
|
|
}
|
|
}
|
|
}
|
|
};
|
|
var _default = {
|
|
name: 'thumbs',
|
|
params: {
|
|
thumbs: {
|
|
swiper: null,
|
|
multipleActiveThumbs: true,
|
|
autoScrollOffset: 0,
|
|
slideThumbActiveClass: 'swiper-slide-thumb-active',
|
|
thumbsContainerClass: 'swiper-container-thumbs'
|
|
}
|
|
},
|
|
create: function create() {
|
|
var swiper = this;
|
|
(0, _utils.bindModuleMethods)(swiper, {
|
|
thumbs: _extends({
|
|
swiper: null,
|
|
initialized: false
|
|
}, Thumbs)
|
|
});
|
|
},
|
|
on: {
|
|
beforeInit: function beforeInit(swiper) {
|
|
var thumbs = swiper.params.thumbs;
|
|
if (!thumbs || !thumbs.swiper) return;
|
|
swiper.thumbs.init();
|
|
swiper.thumbs.update(true);
|
|
},
|
|
slideChange: function slideChange(swiper) {
|
|
if (!swiper.thumbs.swiper) return;
|
|
swiper.thumbs.update();
|
|
},
|
|
update: function update(swiper) {
|
|
if (!swiper.thumbs.swiper) return;
|
|
swiper.thumbs.update();
|
|
},
|
|
resize: function resize(swiper) {
|
|
if (!swiper.thumbs.swiper) return;
|
|
swiper.thumbs.update();
|
|
},
|
|
observerUpdate: function observerUpdate(swiper) {
|
|
if (!swiper.thumbs.swiper) return;
|
|
swiper.thumbs.update();
|
|
},
|
|
setTransition: function setTransition(swiper, duration) {
|
|
var thumbsSwiper = swiper.thumbs.swiper;
|
|
if (!thumbsSwiper) return;
|
|
thumbsSwiper.setTransition(duration);
|
|
},
|
|
beforeDestroy: function beforeDestroy(swiper) {
|
|
var thumbsSwiper = swiper.thumbs.swiper;
|
|
if (!thumbsSwiper) return;
|
|
|
|
if (swiper.thumbs.swiperCreated && thumbsSwiper) {
|
|
thumbsSwiper.destroy();
|
|
}
|
|
}
|
|
}
|
|
};
|
|
exports.default = _default; |