1/5/1404
This commit is contained in:
+377
@@ -0,0 +1,377 @@
|
||||
import { g as getDocument } from '../shared/ssr-window.esm.mjs';
|
||||
import { c as classesToSelector } from '../shared/classes-to-selector.mjs';
|
||||
import { c as createElement, i as elementIndex, m as makeElementsArray, s as setInnerHTML } from '../shared/utils.mjs';
|
||||
|
||||
function A11y(_ref) {
|
||||
let {
|
||||
swiper,
|
||||
extendParams,
|
||||
on
|
||||
} = _ref;
|
||||
extendParams({
|
||||
a11y: {
|
||||
enabled: true,
|
||||
notificationClass: 'swiper-notification',
|
||||
prevSlideMessage: 'Previous slide',
|
||||
nextSlideMessage: 'Next slide',
|
||||
firstSlideMessage: 'This is the first slide',
|
||||
lastSlideMessage: 'This is the last slide',
|
||||
paginationBulletMessage: 'Go to slide {{index}}',
|
||||
slideLabelMessage: '{{index}} / {{slidesLength}}',
|
||||
containerMessage: null,
|
||||
containerRoleDescriptionMessage: null,
|
||||
containerRole: null,
|
||||
itemRoleDescriptionMessage: null,
|
||||
slideRole: 'group',
|
||||
id: null,
|
||||
scrollOnFocus: true
|
||||
}
|
||||
});
|
||||
swiper.a11y = {
|
||||
clicked: false
|
||||
};
|
||||
let liveRegion = null;
|
||||
let preventFocusHandler;
|
||||
let focusTargetSlideEl;
|
||||
let visibilityChangedTimestamp = new Date().getTime();
|
||||
function notify(message) {
|
||||
const notification = liveRegion;
|
||||
if (notification.length === 0) return;
|
||||
setInnerHTML(notification, message);
|
||||
}
|
||||
function getRandomNumber(size) {
|
||||
if (size === void 0) {
|
||||
size = 16;
|
||||
}
|
||||
const randomChar = () => Math.round(16 * Math.random()).toString(16);
|
||||
return 'x'.repeat(size).replace(/x/g, randomChar);
|
||||
}
|
||||
function makeElFocusable(el) {
|
||||
el = makeElementsArray(el);
|
||||
el.forEach(subEl => {
|
||||
subEl.setAttribute('tabIndex', '0');
|
||||
});
|
||||
}
|
||||
function makeElNotFocusable(el) {
|
||||
el = makeElementsArray(el);
|
||||
el.forEach(subEl => {
|
||||
subEl.setAttribute('tabIndex', '-1');
|
||||
});
|
||||
}
|
||||
function addElRole(el, role) {
|
||||
el = makeElementsArray(el);
|
||||
el.forEach(subEl => {
|
||||
subEl.setAttribute('role', role);
|
||||
});
|
||||
}
|
||||
function addElRoleDescription(el, description) {
|
||||
el = makeElementsArray(el);
|
||||
el.forEach(subEl => {
|
||||
subEl.setAttribute('aria-roledescription', description);
|
||||
});
|
||||
}
|
||||
function addElControls(el, controls) {
|
||||
el = makeElementsArray(el);
|
||||
el.forEach(subEl => {
|
||||
subEl.setAttribute('aria-controls', controls);
|
||||
});
|
||||
}
|
||||
function addElLabel(el, label) {
|
||||
el = makeElementsArray(el);
|
||||
el.forEach(subEl => {
|
||||
subEl.setAttribute('aria-label', label);
|
||||
});
|
||||
}
|
||||
function addElId(el, id) {
|
||||
el = makeElementsArray(el);
|
||||
el.forEach(subEl => {
|
||||
subEl.setAttribute('id', id);
|
||||
});
|
||||
}
|
||||
function addElLive(el, live) {
|
||||
el = makeElementsArray(el);
|
||||
el.forEach(subEl => {
|
||||
subEl.setAttribute('aria-live', live);
|
||||
});
|
||||
}
|
||||
function disableEl(el) {
|
||||
el = makeElementsArray(el);
|
||||
el.forEach(subEl => {
|
||||
subEl.setAttribute('aria-disabled', true);
|
||||
});
|
||||
}
|
||||
function enableEl(el) {
|
||||
el = makeElementsArray(el);
|
||||
el.forEach(subEl => {
|
||||
subEl.setAttribute('aria-disabled', false);
|
||||
});
|
||||
}
|
||||
function onEnterOrSpaceKey(e) {
|
||||
if (e.keyCode !== 13 && e.keyCode !== 32) return;
|
||||
const params = swiper.params.a11y;
|
||||
const targetEl = e.target;
|
||||
if (swiper.pagination && swiper.pagination.el && (targetEl === swiper.pagination.el || swiper.pagination.el.contains(e.target))) {
|
||||
if (!e.target.matches(classesToSelector(swiper.params.pagination.bulletClass))) return;
|
||||
}
|
||||
if (swiper.navigation && swiper.navigation.prevEl && swiper.navigation.nextEl) {
|
||||
const prevEls = makeElementsArray(swiper.navigation.prevEl);
|
||||
const nextEls = makeElementsArray(swiper.navigation.nextEl);
|
||||
if (nextEls.includes(targetEl)) {
|
||||
if (!(swiper.isEnd && !swiper.params.loop)) {
|
||||
swiper.slideNext();
|
||||
}
|
||||
if (swiper.isEnd) {
|
||||
notify(params.lastSlideMessage);
|
||||
} else {
|
||||
notify(params.nextSlideMessage);
|
||||
}
|
||||
}
|
||||
if (prevEls.includes(targetEl)) {
|
||||
if (!(swiper.isBeginning && !swiper.params.loop)) {
|
||||
swiper.slidePrev();
|
||||
}
|
||||
if (swiper.isBeginning) {
|
||||
notify(params.firstSlideMessage);
|
||||
} else {
|
||||
notify(params.prevSlideMessage);
|
||||
}
|
||||
}
|
||||
}
|
||||
if (swiper.pagination && targetEl.matches(classesToSelector(swiper.params.pagination.bulletClass))) {
|
||||
targetEl.click();
|
||||
}
|
||||
}
|
||||
function updateNavigation() {
|
||||
if (swiper.params.loop || swiper.params.rewind || !swiper.navigation) return;
|
||||
const {
|
||||
nextEl,
|
||||
prevEl
|
||||
} = swiper.navigation;
|
||||
if (prevEl) {
|
||||
if (swiper.isBeginning) {
|
||||
disableEl(prevEl);
|
||||
makeElNotFocusable(prevEl);
|
||||
} else {
|
||||
enableEl(prevEl);
|
||||
makeElFocusable(prevEl);
|
||||
}
|
||||
}
|
||||
if (nextEl) {
|
||||
if (swiper.isEnd) {
|
||||
disableEl(nextEl);
|
||||
makeElNotFocusable(nextEl);
|
||||
} else {
|
||||
enableEl(nextEl);
|
||||
makeElFocusable(nextEl);
|
||||
}
|
||||
}
|
||||
}
|
||||
function hasPagination() {
|
||||
return swiper.pagination && swiper.pagination.bullets && swiper.pagination.bullets.length;
|
||||
}
|
||||
function hasClickablePagination() {
|
||||
return hasPagination() && swiper.params.pagination.clickable;
|
||||
}
|
||||
function updatePagination() {
|
||||
const params = swiper.params.a11y;
|
||||
if (!hasPagination()) return;
|
||||
swiper.pagination.bullets.forEach(bulletEl => {
|
||||
if (swiper.params.pagination.clickable) {
|
||||
makeElFocusable(bulletEl);
|
||||
if (!swiper.params.pagination.renderBullet) {
|
||||
addElRole(bulletEl, 'button');
|
||||
addElLabel(bulletEl, params.paginationBulletMessage.replace(/\{\{index\}\}/, elementIndex(bulletEl) + 1));
|
||||
}
|
||||
}
|
||||
if (bulletEl.matches(classesToSelector(swiper.params.pagination.bulletActiveClass))) {
|
||||
bulletEl.setAttribute('aria-current', 'true');
|
||||
} else {
|
||||
bulletEl.removeAttribute('aria-current');
|
||||
}
|
||||
});
|
||||
}
|
||||
const initNavEl = (el, wrapperId, message) => {
|
||||
makeElFocusable(el);
|
||||
if (el.tagName !== 'BUTTON') {
|
||||
addElRole(el, 'button');
|
||||
el.addEventListener('keydown', onEnterOrSpaceKey);
|
||||
}
|
||||
addElLabel(el, message);
|
||||
addElControls(el, wrapperId);
|
||||
};
|
||||
const handlePointerDown = e => {
|
||||
if (focusTargetSlideEl && focusTargetSlideEl !== e.target && !focusTargetSlideEl.contains(e.target)) {
|
||||
preventFocusHandler = true;
|
||||
}
|
||||
swiper.a11y.clicked = true;
|
||||
};
|
||||
const handlePointerUp = () => {
|
||||
preventFocusHandler = false;
|
||||
requestAnimationFrame(() => {
|
||||
requestAnimationFrame(() => {
|
||||
if (!swiper.destroyed) {
|
||||
swiper.a11y.clicked = false;
|
||||
}
|
||||
});
|
||||
});
|
||||
};
|
||||
const onVisibilityChange = e => {
|
||||
visibilityChangedTimestamp = new Date().getTime();
|
||||
};
|
||||
const handleFocus = e => {
|
||||
if (swiper.a11y.clicked || !swiper.params.a11y.scrollOnFocus) return;
|
||||
if (new Date().getTime() - visibilityChangedTimestamp < 100) return;
|
||||
const slideEl = e.target.closest(`.${swiper.params.slideClass}, swiper-slide`);
|
||||
if (!slideEl || !swiper.slides.includes(slideEl)) return;
|
||||
focusTargetSlideEl = slideEl;
|
||||
const isActive = swiper.slides.indexOf(slideEl) === swiper.activeIndex;
|
||||
const isVisible = swiper.params.watchSlidesProgress && swiper.visibleSlides && swiper.visibleSlides.includes(slideEl);
|
||||
if (isActive || isVisible) return;
|
||||
if (e.sourceCapabilities && e.sourceCapabilities.firesTouchEvents) return;
|
||||
if (swiper.isHorizontal()) {
|
||||
swiper.el.scrollLeft = 0;
|
||||
} else {
|
||||
swiper.el.scrollTop = 0;
|
||||
}
|
||||
requestAnimationFrame(() => {
|
||||
if (preventFocusHandler) return;
|
||||
if (swiper.params.loop) {
|
||||
swiper.slideToLoop(parseInt(slideEl.getAttribute('data-swiper-slide-index')), 0);
|
||||
} else {
|
||||
swiper.slideTo(swiper.slides.indexOf(slideEl), 0);
|
||||
}
|
||||
preventFocusHandler = false;
|
||||
});
|
||||
};
|
||||
const initSlides = () => {
|
||||
const params = swiper.params.a11y;
|
||||
if (params.itemRoleDescriptionMessage) {
|
||||
addElRoleDescription(swiper.slides, params.itemRoleDescriptionMessage);
|
||||
}
|
||||
if (params.slideRole) {
|
||||
addElRole(swiper.slides, params.slideRole);
|
||||
}
|
||||
const slidesLength = swiper.slides.length;
|
||||
if (params.slideLabelMessage) {
|
||||
swiper.slides.forEach((slideEl, index) => {
|
||||
const slideIndex = swiper.params.loop ? parseInt(slideEl.getAttribute('data-swiper-slide-index'), 10) : index;
|
||||
const ariaLabelMessage = params.slideLabelMessage.replace(/\{\{index\}\}/, slideIndex + 1).replace(/\{\{slidesLength\}\}/, slidesLength);
|
||||
addElLabel(slideEl, ariaLabelMessage);
|
||||
});
|
||||
}
|
||||
};
|
||||
const init = () => {
|
||||
const params = swiper.params.a11y;
|
||||
swiper.el.append(liveRegion);
|
||||
|
||||
// Container
|
||||
const containerEl = swiper.el;
|
||||
if (params.containerRoleDescriptionMessage) {
|
||||
addElRoleDescription(containerEl, params.containerRoleDescriptionMessage);
|
||||
}
|
||||
if (params.containerMessage) {
|
||||
addElLabel(containerEl, params.containerMessage);
|
||||
}
|
||||
if (params.containerRole) {
|
||||
addElRole(containerEl, params.containerRole);
|
||||
}
|
||||
|
||||
// Wrapper
|
||||
const wrapperEl = swiper.wrapperEl;
|
||||
const wrapperId = params.id || wrapperEl.getAttribute('id') || `swiper-wrapper-${getRandomNumber(16)}`;
|
||||
const live = swiper.params.autoplay && swiper.params.autoplay.enabled ? 'off' : 'polite';
|
||||
addElId(wrapperEl, wrapperId);
|
||||
addElLive(wrapperEl, live);
|
||||
|
||||
// Slide
|
||||
initSlides();
|
||||
|
||||
// Navigation
|
||||
let {
|
||||
nextEl,
|
||||
prevEl
|
||||
} = swiper.navigation ? swiper.navigation : {};
|
||||
nextEl = makeElementsArray(nextEl);
|
||||
prevEl = makeElementsArray(prevEl);
|
||||
if (nextEl) {
|
||||
nextEl.forEach(el => initNavEl(el, wrapperId, params.nextSlideMessage));
|
||||
}
|
||||
if (prevEl) {
|
||||
prevEl.forEach(el => initNavEl(el, wrapperId, params.prevSlideMessage));
|
||||
}
|
||||
|
||||
// Pagination
|
||||
if (hasClickablePagination()) {
|
||||
const paginationEl = makeElementsArray(swiper.pagination.el);
|
||||
paginationEl.forEach(el => {
|
||||
el.addEventListener('keydown', onEnterOrSpaceKey);
|
||||
});
|
||||
}
|
||||
|
||||
// Tab focus
|
||||
const document = getDocument();
|
||||
document.addEventListener('visibilitychange', onVisibilityChange);
|
||||
swiper.el.addEventListener('focus', handleFocus, true);
|
||||
swiper.el.addEventListener('focus', handleFocus, true);
|
||||
swiper.el.addEventListener('pointerdown', handlePointerDown, true);
|
||||
swiper.el.addEventListener('pointerup', handlePointerUp, true);
|
||||
};
|
||||
function destroy() {
|
||||
if (liveRegion) liveRegion.remove();
|
||||
let {
|
||||
nextEl,
|
||||
prevEl
|
||||
} = swiper.navigation ? swiper.navigation : {};
|
||||
nextEl = makeElementsArray(nextEl);
|
||||
prevEl = makeElementsArray(prevEl);
|
||||
if (nextEl) {
|
||||
nextEl.forEach(el => el.removeEventListener('keydown', onEnterOrSpaceKey));
|
||||
}
|
||||
if (prevEl) {
|
||||
prevEl.forEach(el => el.removeEventListener('keydown', onEnterOrSpaceKey));
|
||||
}
|
||||
|
||||
// Pagination
|
||||
if (hasClickablePagination()) {
|
||||
const paginationEl = makeElementsArray(swiper.pagination.el);
|
||||
paginationEl.forEach(el => {
|
||||
el.removeEventListener('keydown', onEnterOrSpaceKey);
|
||||
});
|
||||
}
|
||||
const document = getDocument();
|
||||
document.removeEventListener('visibilitychange', onVisibilityChange);
|
||||
// Tab focus
|
||||
if (swiper.el && typeof swiper.el !== 'string') {
|
||||
swiper.el.removeEventListener('focus', handleFocus, true);
|
||||
swiper.el.removeEventListener('pointerdown', handlePointerDown, true);
|
||||
swiper.el.removeEventListener('pointerup', handlePointerUp, true);
|
||||
}
|
||||
}
|
||||
on('beforeInit', () => {
|
||||
liveRegion = createElement('span', swiper.params.a11y.notificationClass);
|
||||
liveRegion.setAttribute('aria-live', 'assertive');
|
||||
liveRegion.setAttribute('aria-atomic', 'true');
|
||||
});
|
||||
on('afterInit', () => {
|
||||
if (!swiper.params.a11y.enabled) return;
|
||||
init();
|
||||
});
|
||||
on('slidesLengthChange snapGridLengthChange slidesGridLengthChange', () => {
|
||||
if (!swiper.params.a11y.enabled) return;
|
||||
initSlides();
|
||||
});
|
||||
on('fromEdge toEdge afterInit lock unlock', () => {
|
||||
if (!swiper.params.a11y.enabled) return;
|
||||
updateNavigation();
|
||||
});
|
||||
on('paginationUpdate', () => {
|
||||
if (!swiper.params.a11y.enabled) return;
|
||||
updatePagination();
|
||||
});
|
||||
on('destroy', () => {
|
||||
if (!swiper.params.a11y.enabled) return;
|
||||
destroy();
|
||||
});
|
||||
}
|
||||
|
||||
export { A11y as default };
|
||||
+304
@@ -0,0 +1,304 @@
|
||||
import { g as getDocument } from '../shared/ssr-window.esm.mjs';
|
||||
|
||||
/* eslint no-underscore-dangle: "off" */
|
||||
/* eslint no-use-before-define: "off" */
|
||||
function Autoplay(_ref) {
|
||||
let {
|
||||
swiper,
|
||||
extendParams,
|
||||
on,
|
||||
emit,
|
||||
params
|
||||
} = _ref;
|
||||
swiper.autoplay = {
|
||||
running: false,
|
||||
paused: false,
|
||||
timeLeft: 0
|
||||
};
|
||||
extendParams({
|
||||
autoplay: {
|
||||
enabled: false,
|
||||
delay: 3000,
|
||||
waitForTransition: true,
|
||||
disableOnInteraction: false,
|
||||
stopOnLastSlide: false,
|
||||
reverseDirection: false,
|
||||
pauseOnMouseEnter: false
|
||||
}
|
||||
});
|
||||
let timeout;
|
||||
let raf;
|
||||
let autoplayDelayTotal = params && params.autoplay ? params.autoplay.delay : 3000;
|
||||
let autoplayDelayCurrent = params && params.autoplay ? params.autoplay.delay : 3000;
|
||||
let autoplayTimeLeft;
|
||||
let autoplayStartTime = new Date().getTime();
|
||||
let wasPaused;
|
||||
let isTouched;
|
||||
let pausedByTouch;
|
||||
let touchStartTimeout;
|
||||
let slideChanged;
|
||||
let pausedByInteraction;
|
||||
let pausedByPointerEnter;
|
||||
function onTransitionEnd(e) {
|
||||
if (!swiper || swiper.destroyed || !swiper.wrapperEl) return;
|
||||
if (e.target !== swiper.wrapperEl) return;
|
||||
swiper.wrapperEl.removeEventListener('transitionend', onTransitionEnd);
|
||||
if (pausedByPointerEnter || e.detail && e.detail.bySwiperTouchMove) {
|
||||
return;
|
||||
}
|
||||
resume();
|
||||
}
|
||||
const calcTimeLeft = () => {
|
||||
if (swiper.destroyed || !swiper.autoplay.running) return;
|
||||
if (swiper.autoplay.paused) {
|
||||
wasPaused = true;
|
||||
} else if (wasPaused) {
|
||||
autoplayDelayCurrent = autoplayTimeLeft;
|
||||
wasPaused = false;
|
||||
}
|
||||
const timeLeft = swiper.autoplay.paused ? autoplayTimeLeft : autoplayStartTime + autoplayDelayCurrent - new Date().getTime();
|
||||
swiper.autoplay.timeLeft = timeLeft;
|
||||
emit('autoplayTimeLeft', timeLeft, timeLeft / autoplayDelayTotal);
|
||||
raf = requestAnimationFrame(() => {
|
||||
calcTimeLeft();
|
||||
});
|
||||
};
|
||||
const getSlideDelay = () => {
|
||||
let activeSlideEl;
|
||||
if (swiper.virtual && swiper.params.virtual.enabled) {
|
||||
activeSlideEl = swiper.slides.find(slideEl => slideEl.classList.contains('swiper-slide-active'));
|
||||
} else {
|
||||
activeSlideEl = swiper.slides[swiper.activeIndex];
|
||||
}
|
||||
if (!activeSlideEl) return undefined;
|
||||
const currentSlideDelay = parseInt(activeSlideEl.getAttribute('data-swiper-autoplay'), 10);
|
||||
return currentSlideDelay;
|
||||
};
|
||||
const run = delayForce => {
|
||||
if (swiper.destroyed || !swiper.autoplay.running) return;
|
||||
cancelAnimationFrame(raf);
|
||||
calcTimeLeft();
|
||||
let delay = typeof delayForce === 'undefined' ? swiper.params.autoplay.delay : delayForce;
|
||||
autoplayDelayTotal = swiper.params.autoplay.delay;
|
||||
autoplayDelayCurrent = swiper.params.autoplay.delay;
|
||||
const currentSlideDelay = getSlideDelay();
|
||||
if (!Number.isNaN(currentSlideDelay) && currentSlideDelay > 0 && typeof delayForce === 'undefined') {
|
||||
delay = currentSlideDelay;
|
||||
autoplayDelayTotal = currentSlideDelay;
|
||||
autoplayDelayCurrent = currentSlideDelay;
|
||||
}
|
||||
autoplayTimeLeft = delay;
|
||||
const speed = swiper.params.speed;
|
||||
const proceed = () => {
|
||||
if (!swiper || swiper.destroyed) return;
|
||||
if (swiper.params.autoplay.reverseDirection) {
|
||||
if (!swiper.isBeginning || swiper.params.loop || swiper.params.rewind) {
|
||||
swiper.slidePrev(speed, true, true);
|
||||
emit('autoplay');
|
||||
} else if (!swiper.params.autoplay.stopOnLastSlide) {
|
||||
swiper.slideTo(swiper.slides.length - 1, speed, true, true);
|
||||
emit('autoplay');
|
||||
}
|
||||
} else {
|
||||
if (!swiper.isEnd || swiper.params.loop || swiper.params.rewind) {
|
||||
swiper.slideNext(speed, true, true);
|
||||
emit('autoplay');
|
||||
} else if (!swiper.params.autoplay.stopOnLastSlide) {
|
||||
swiper.slideTo(0, speed, true, true);
|
||||
emit('autoplay');
|
||||
}
|
||||
}
|
||||
if (swiper.params.cssMode) {
|
||||
autoplayStartTime = new Date().getTime();
|
||||
requestAnimationFrame(() => {
|
||||
run();
|
||||
});
|
||||
}
|
||||
};
|
||||
if (delay > 0) {
|
||||
clearTimeout(timeout);
|
||||
timeout = setTimeout(() => {
|
||||
proceed();
|
||||
}, delay);
|
||||
} else {
|
||||
requestAnimationFrame(() => {
|
||||
proceed();
|
||||
});
|
||||
}
|
||||
|
||||
// eslint-disable-next-line
|
||||
return delay;
|
||||
};
|
||||
const start = () => {
|
||||
autoplayStartTime = new Date().getTime();
|
||||
swiper.autoplay.running = true;
|
||||
run();
|
||||
emit('autoplayStart');
|
||||
};
|
||||
const stop = () => {
|
||||
swiper.autoplay.running = false;
|
||||
clearTimeout(timeout);
|
||||
cancelAnimationFrame(raf);
|
||||
emit('autoplayStop');
|
||||
};
|
||||
const pause = (internal, reset) => {
|
||||
if (swiper.destroyed || !swiper.autoplay.running) return;
|
||||
clearTimeout(timeout);
|
||||
if (!internal) {
|
||||
pausedByInteraction = true;
|
||||
}
|
||||
const proceed = () => {
|
||||
emit('autoplayPause');
|
||||
if (swiper.params.autoplay.waitForTransition) {
|
||||
swiper.wrapperEl.addEventListener('transitionend', onTransitionEnd);
|
||||
} else {
|
||||
resume();
|
||||
}
|
||||
};
|
||||
swiper.autoplay.paused = true;
|
||||
if (reset) {
|
||||
if (slideChanged) {
|
||||
autoplayTimeLeft = swiper.params.autoplay.delay;
|
||||
}
|
||||
slideChanged = false;
|
||||
proceed();
|
||||
return;
|
||||
}
|
||||
const delay = autoplayTimeLeft || swiper.params.autoplay.delay;
|
||||
autoplayTimeLeft = delay - (new Date().getTime() - autoplayStartTime);
|
||||
if (swiper.isEnd && autoplayTimeLeft < 0 && !swiper.params.loop) return;
|
||||
if (autoplayTimeLeft < 0) autoplayTimeLeft = 0;
|
||||
proceed();
|
||||
};
|
||||
const resume = () => {
|
||||
if (swiper.isEnd && autoplayTimeLeft < 0 && !swiper.params.loop || swiper.destroyed || !swiper.autoplay.running) return;
|
||||
autoplayStartTime = new Date().getTime();
|
||||
if (pausedByInteraction) {
|
||||
pausedByInteraction = false;
|
||||
run(autoplayTimeLeft);
|
||||
} else {
|
||||
run();
|
||||
}
|
||||
swiper.autoplay.paused = false;
|
||||
emit('autoplayResume');
|
||||
};
|
||||
const onVisibilityChange = () => {
|
||||
if (swiper.destroyed || !swiper.autoplay.running) return;
|
||||
const document = getDocument();
|
||||
if (document.visibilityState === 'hidden') {
|
||||
pausedByInteraction = true;
|
||||
pause(true);
|
||||
}
|
||||
if (document.visibilityState === 'visible') {
|
||||
resume();
|
||||
}
|
||||
};
|
||||
const onPointerEnter = e => {
|
||||
if (e.pointerType !== 'mouse') return;
|
||||
pausedByInteraction = true;
|
||||
pausedByPointerEnter = true;
|
||||
if (swiper.animating || swiper.autoplay.paused) return;
|
||||
pause(true);
|
||||
};
|
||||
const onPointerLeave = e => {
|
||||
if (e.pointerType !== 'mouse') return;
|
||||
pausedByPointerEnter = false;
|
||||
if (swiper.autoplay.paused) {
|
||||
resume();
|
||||
}
|
||||
};
|
||||
const attachMouseEvents = () => {
|
||||
if (swiper.params.autoplay.pauseOnMouseEnter) {
|
||||
swiper.el.addEventListener('pointerenter', onPointerEnter);
|
||||
swiper.el.addEventListener('pointerleave', onPointerLeave);
|
||||
}
|
||||
};
|
||||
const detachMouseEvents = () => {
|
||||
if (swiper.el && typeof swiper.el !== 'string') {
|
||||
swiper.el.removeEventListener('pointerenter', onPointerEnter);
|
||||
swiper.el.removeEventListener('pointerleave', onPointerLeave);
|
||||
}
|
||||
};
|
||||
const attachDocumentEvents = () => {
|
||||
const document = getDocument();
|
||||
document.addEventListener('visibilitychange', onVisibilityChange);
|
||||
};
|
||||
const detachDocumentEvents = () => {
|
||||
const document = getDocument();
|
||||
document.removeEventListener('visibilitychange', onVisibilityChange);
|
||||
};
|
||||
on('init', () => {
|
||||
if (swiper.params.autoplay.enabled) {
|
||||
attachMouseEvents();
|
||||
attachDocumentEvents();
|
||||
start();
|
||||
}
|
||||
});
|
||||
on('destroy', () => {
|
||||
detachMouseEvents();
|
||||
detachDocumentEvents();
|
||||
if (swiper.autoplay.running) {
|
||||
stop();
|
||||
}
|
||||
});
|
||||
on('_freeModeStaticRelease', () => {
|
||||
if (pausedByTouch || pausedByInteraction) {
|
||||
resume();
|
||||
}
|
||||
});
|
||||
on('_freeModeNoMomentumRelease', () => {
|
||||
if (!swiper.params.autoplay.disableOnInteraction) {
|
||||
pause(true, true);
|
||||
} else {
|
||||
stop();
|
||||
}
|
||||
});
|
||||
on('beforeTransitionStart', (_s, speed, internal) => {
|
||||
if (swiper.destroyed || !swiper.autoplay.running) return;
|
||||
if (internal || !swiper.params.autoplay.disableOnInteraction) {
|
||||
pause(true, true);
|
||||
} else {
|
||||
stop();
|
||||
}
|
||||
});
|
||||
on('sliderFirstMove', () => {
|
||||
if (swiper.destroyed || !swiper.autoplay.running) return;
|
||||
if (swiper.params.autoplay.disableOnInteraction) {
|
||||
stop();
|
||||
return;
|
||||
}
|
||||
isTouched = true;
|
||||
pausedByTouch = false;
|
||||
pausedByInteraction = false;
|
||||
touchStartTimeout = setTimeout(() => {
|
||||
pausedByInteraction = true;
|
||||
pausedByTouch = true;
|
||||
pause(true);
|
||||
}, 200);
|
||||
});
|
||||
on('touchEnd', () => {
|
||||
if (swiper.destroyed || !swiper.autoplay.running || !isTouched) return;
|
||||
clearTimeout(touchStartTimeout);
|
||||
clearTimeout(timeout);
|
||||
if (swiper.params.autoplay.disableOnInteraction) {
|
||||
pausedByTouch = false;
|
||||
isTouched = false;
|
||||
return;
|
||||
}
|
||||
if (pausedByTouch && swiper.params.cssMode) resume();
|
||||
pausedByTouch = false;
|
||||
isTouched = false;
|
||||
});
|
||||
on('slideChange', () => {
|
||||
if (swiper.destroyed || !swiper.autoplay.running) return;
|
||||
slideChanged = true;
|
||||
});
|
||||
Object.assign(swiper.autoplay, {
|
||||
start,
|
||||
stop,
|
||||
pause,
|
||||
resume
|
||||
});
|
||||
}
|
||||
|
||||
export { Autoplay as default };
|
||||
+191
@@ -0,0 +1,191 @@
|
||||
import { n as nextTick, l as elementTransitionEnd } from '../shared/utils.mjs';
|
||||
|
||||
/* eslint no-bitwise: ["error", { "allow": [">>"] }] */
|
||||
function Controller(_ref) {
|
||||
let {
|
||||
swiper,
|
||||
extendParams,
|
||||
on
|
||||
} = _ref;
|
||||
extendParams({
|
||||
controller: {
|
||||
control: undefined,
|
||||
inverse: false,
|
||||
by: 'slide' // or 'container'
|
||||
}
|
||||
});
|
||||
|
||||
swiper.controller = {
|
||||
control: undefined
|
||||
};
|
||||
function LinearSpline(x, y) {
|
||||
const binarySearch = function search() {
|
||||
let maxIndex;
|
||||
let minIndex;
|
||||
let guess;
|
||||
return (array, val) => {
|
||||
minIndex = -1;
|
||||
maxIndex = array.length;
|
||||
while (maxIndex - minIndex > 1) {
|
||||
guess = maxIndex + minIndex >> 1;
|
||||
if (array[guess] <= val) {
|
||||
minIndex = guess;
|
||||
} else {
|
||||
maxIndex = guess;
|
||||
}
|
||||
}
|
||||
return maxIndex;
|
||||
};
|
||||
}();
|
||||
this.x = x;
|
||||
this.y = y;
|
||||
this.lastIndex = x.length - 1;
|
||||
// Given an x value (x2), return the expected y2 value:
|
||||
// (x1,y1) is the known point before given value,
|
||||
// (x3,y3) is the known point after given value.
|
||||
let i1;
|
||||
let i3;
|
||||
this.interpolate = function interpolate(x2) {
|
||||
if (!x2) return 0;
|
||||
|
||||
// Get the indexes of x1 and x3 (the array indexes before and after given x2):
|
||||
i3 = binarySearch(this.x, x2);
|
||||
i1 = i3 - 1;
|
||||
|
||||
// We have our indexes i1 & i3, so we can calculate already:
|
||||
// y2 := ((x2−x1) × (y3−y1)) ÷ (x3−x1) + y1
|
||||
return (x2 - this.x[i1]) * (this.y[i3] - this.y[i1]) / (this.x[i3] - this.x[i1]) + this.y[i1];
|
||||
};
|
||||
return this;
|
||||
}
|
||||
function getInterpolateFunction(c) {
|
||||
swiper.controller.spline = swiper.params.loop ? new LinearSpline(swiper.slidesGrid, c.slidesGrid) : new LinearSpline(swiper.snapGrid, c.snapGrid);
|
||||
}
|
||||
function setTranslate(_t, byController) {
|
||||
const controlled = swiper.controller.control;
|
||||
let multiplier;
|
||||
let controlledTranslate;
|
||||
const Swiper = swiper.constructor;
|
||||
function setControlledTranslate(c) {
|
||||
if (c.destroyed) return;
|
||||
|
||||
// this will create an Interpolate function based on the snapGrids
|
||||
// x is the Grid of the scrolled scroller and y will be the controlled scroller
|
||||
// it makes sense to create this only once and recall it for the interpolation
|
||||
// the function does a lot of value caching for performance
|
||||
const translate = swiper.rtlTranslate ? -swiper.translate : swiper.translate;
|
||||
if (swiper.params.controller.by === 'slide') {
|
||||
getInterpolateFunction(c);
|
||||
// i am not sure why the values have to be multiplicated this way, tried to invert the snapGrid
|
||||
// but it did not work out
|
||||
controlledTranslate = -swiper.controller.spline.interpolate(-translate);
|
||||
}
|
||||
if (!controlledTranslate || swiper.params.controller.by === 'container') {
|
||||
multiplier = (c.maxTranslate() - c.minTranslate()) / (swiper.maxTranslate() - swiper.minTranslate());
|
||||
if (Number.isNaN(multiplier) || !Number.isFinite(multiplier)) {
|
||||
multiplier = 1;
|
||||
}
|
||||
controlledTranslate = (translate - swiper.minTranslate()) * multiplier + c.minTranslate();
|
||||
}
|
||||
if (swiper.params.controller.inverse) {
|
||||
controlledTranslate = c.maxTranslate() - controlledTranslate;
|
||||
}
|
||||
c.updateProgress(controlledTranslate);
|
||||
c.setTranslate(controlledTranslate, swiper);
|
||||
c.updateActiveIndex();
|
||||
c.updateSlidesClasses();
|
||||
}
|
||||
if (Array.isArray(controlled)) {
|
||||
for (let i = 0; i < controlled.length; i += 1) {
|
||||
if (controlled[i] !== byController && controlled[i] instanceof Swiper) {
|
||||
setControlledTranslate(controlled[i]);
|
||||
}
|
||||
}
|
||||
} else if (controlled instanceof Swiper && byController !== controlled) {
|
||||
setControlledTranslate(controlled);
|
||||
}
|
||||
}
|
||||
function setTransition(duration, byController) {
|
||||
const Swiper = swiper.constructor;
|
||||
const controlled = swiper.controller.control;
|
||||
let i;
|
||||
function setControlledTransition(c) {
|
||||
if (c.destroyed) return;
|
||||
c.setTransition(duration, swiper);
|
||||
if (duration !== 0) {
|
||||
c.transitionStart();
|
||||
if (c.params.autoHeight) {
|
||||
nextTick(() => {
|
||||
c.updateAutoHeight();
|
||||
});
|
||||
}
|
||||
elementTransitionEnd(c.wrapperEl, () => {
|
||||
if (!controlled) return;
|
||||
c.transitionEnd();
|
||||
});
|
||||
}
|
||||
}
|
||||
if (Array.isArray(controlled)) {
|
||||
for (i = 0; i < controlled.length; i += 1) {
|
||||
if (controlled[i] !== byController && controlled[i] instanceof Swiper) {
|
||||
setControlledTransition(controlled[i]);
|
||||
}
|
||||
}
|
||||
} else if (controlled instanceof Swiper && byController !== controlled) {
|
||||
setControlledTransition(controlled);
|
||||
}
|
||||
}
|
||||
function removeSpline() {
|
||||
if (!swiper.controller.control) return;
|
||||
if (swiper.controller.spline) {
|
||||
swiper.controller.spline = undefined;
|
||||
delete swiper.controller.spline;
|
||||
}
|
||||
}
|
||||
on('beforeInit', () => {
|
||||
if (typeof window !== 'undefined' && (
|
||||
// eslint-disable-line
|
||||
typeof swiper.params.controller.control === 'string' || swiper.params.controller.control instanceof HTMLElement)) {
|
||||
const controlElements = typeof swiper.params.controller.control === 'string' ? [...document.querySelectorAll(swiper.params.controller.control)] : [swiper.params.controller.control];
|
||||
controlElements.forEach(controlElement => {
|
||||
if (!swiper.controller.control) swiper.controller.control = [];
|
||||
if (controlElement && controlElement.swiper) {
|
||||
swiper.controller.control.push(controlElement.swiper);
|
||||
} else if (controlElement) {
|
||||
const eventName = `${swiper.params.eventsPrefix}init`;
|
||||
const onControllerSwiper = e => {
|
||||
swiper.controller.control.push(e.detail[0]);
|
||||
swiper.update();
|
||||
controlElement.removeEventListener(eventName, onControllerSwiper);
|
||||
};
|
||||
controlElement.addEventListener(eventName, onControllerSwiper);
|
||||
}
|
||||
});
|
||||
return;
|
||||
}
|
||||
swiper.controller.control = swiper.params.controller.control;
|
||||
});
|
||||
on('update', () => {
|
||||
removeSpline();
|
||||
});
|
||||
on('resize', () => {
|
||||
removeSpline();
|
||||
});
|
||||
on('observerUpdate', () => {
|
||||
removeSpline();
|
||||
});
|
||||
on('setTranslate', (_s, translate, byController) => {
|
||||
if (!swiper.controller.control || swiper.controller.control.destroyed) return;
|
||||
swiper.controller.setTranslate(translate, byController);
|
||||
});
|
||||
on('setTransition', (_s, duration, byController) => {
|
||||
if (!swiper.controller.control || swiper.controller.control.destroyed) return;
|
||||
swiper.controller.setTransition(duration, byController);
|
||||
});
|
||||
Object.assign(swiper.controller, {
|
||||
setTranslate,
|
||||
setTransition
|
||||
});
|
||||
}
|
||||
|
||||
export { Controller as default };
|
||||
+128
@@ -0,0 +1,128 @@
|
||||
import { c as createShadow } from '../shared/create-shadow.mjs';
|
||||
import { e as effectInit } from '../shared/effect-init.mjs';
|
||||
import { e as effectTarget } from '../shared/effect-target.mjs';
|
||||
import { e as effectVirtualTransitionEnd } from '../shared/effect-virtual-transition-end.mjs';
|
||||
import { g as getSlideTransformEl } from '../shared/utils.mjs';
|
||||
|
||||
function EffectCards(_ref) {
|
||||
let {
|
||||
swiper,
|
||||
extendParams,
|
||||
on
|
||||
} = _ref;
|
||||
extendParams({
|
||||
cardsEffect: {
|
||||
slideShadows: true,
|
||||
rotate: true,
|
||||
perSlideRotate: 2,
|
||||
perSlideOffset: 8
|
||||
}
|
||||
});
|
||||
const setTranslate = () => {
|
||||
const {
|
||||
slides,
|
||||
activeIndex,
|
||||
rtlTranslate: rtl
|
||||
} = swiper;
|
||||
const params = swiper.params.cardsEffect;
|
||||
const {
|
||||
startTranslate,
|
||||
isTouched
|
||||
} = swiper.touchEventsData;
|
||||
const currentTranslate = rtl ? -swiper.translate : swiper.translate;
|
||||
for (let i = 0; i < slides.length; i += 1) {
|
||||
const slideEl = slides[i];
|
||||
const slideProgress = slideEl.progress;
|
||||
const progress = Math.min(Math.max(slideProgress, -4), 4);
|
||||
let offset = slideEl.swiperSlideOffset;
|
||||
if (swiper.params.centeredSlides && !swiper.params.cssMode) {
|
||||
swiper.wrapperEl.style.transform = `translateX(${swiper.minTranslate()}px)`;
|
||||
}
|
||||
if (swiper.params.centeredSlides && swiper.params.cssMode) {
|
||||
offset -= slides[0].swiperSlideOffset;
|
||||
}
|
||||
let tX = swiper.params.cssMode ? -offset - swiper.translate : -offset;
|
||||
let tY = 0;
|
||||
const tZ = -100 * Math.abs(progress);
|
||||
let scale = 1;
|
||||
let rotate = -params.perSlideRotate * progress;
|
||||
let tXAdd = params.perSlideOffset - Math.abs(progress) * 0.75;
|
||||
const slideIndex = swiper.virtual && swiper.params.virtual.enabled ? swiper.virtual.from + i : i;
|
||||
const isSwipeToNext = (slideIndex === activeIndex || slideIndex === activeIndex - 1) && progress > 0 && progress < 1 && (isTouched || swiper.params.cssMode) && currentTranslate < startTranslate;
|
||||
const isSwipeToPrev = (slideIndex === activeIndex || slideIndex === activeIndex + 1) && progress < 0 && progress > -1 && (isTouched || swiper.params.cssMode) && currentTranslate > startTranslate;
|
||||
if (isSwipeToNext || isSwipeToPrev) {
|
||||
const subProgress = (1 - Math.abs((Math.abs(progress) - 0.5) / 0.5)) ** 0.5;
|
||||
rotate += -28 * progress * subProgress;
|
||||
scale += -0.5 * subProgress;
|
||||
tXAdd += 96 * subProgress;
|
||||
tY = `${-25 * subProgress * Math.abs(progress)}%`;
|
||||
}
|
||||
if (progress < 0) {
|
||||
// next
|
||||
tX = `calc(${tX}px ${rtl ? '-' : '+'} (${tXAdd * Math.abs(progress)}%))`;
|
||||
} else if (progress > 0) {
|
||||
// prev
|
||||
tX = `calc(${tX}px ${rtl ? '-' : '+'} (-${tXAdd * Math.abs(progress)}%))`;
|
||||
} else {
|
||||
tX = `${tX}px`;
|
||||
}
|
||||
if (!swiper.isHorizontal()) {
|
||||
const prevY = tY;
|
||||
tY = tX;
|
||||
tX = prevY;
|
||||
}
|
||||
const scaleString = progress < 0 ? `${1 + (1 - scale) * progress}` : `${1 - (1 - scale) * progress}`;
|
||||
|
||||
/* eslint-disable */
|
||||
const transform = `
|
||||
translate3d(${tX}, ${tY}, ${tZ}px)
|
||||
rotateZ(${params.rotate ? rtl ? -rotate : rotate : 0}deg)
|
||||
scale(${scaleString})
|
||||
`;
|
||||
/* eslint-enable */
|
||||
|
||||
if (params.slideShadows) {
|
||||
// Set shadows
|
||||
let shadowEl = slideEl.querySelector('.swiper-slide-shadow');
|
||||
if (!shadowEl) {
|
||||
shadowEl = createShadow('cards', slideEl);
|
||||
}
|
||||
if (shadowEl) shadowEl.style.opacity = Math.min(Math.max((Math.abs(progress) - 0.5) / 0.5, 0), 1);
|
||||
}
|
||||
slideEl.style.zIndex = -Math.abs(Math.round(slideProgress)) + slides.length;
|
||||
const targetEl = effectTarget(params, slideEl);
|
||||
targetEl.style.transform = transform;
|
||||
}
|
||||
};
|
||||
const setTransition = duration => {
|
||||
const transformElements = swiper.slides.map(slideEl => getSlideTransformEl(slideEl));
|
||||
transformElements.forEach(el => {
|
||||
el.style.transitionDuration = `${duration}ms`;
|
||||
el.querySelectorAll('.swiper-slide-shadow').forEach(shadowEl => {
|
||||
shadowEl.style.transitionDuration = `${duration}ms`;
|
||||
});
|
||||
});
|
||||
effectVirtualTransitionEnd({
|
||||
swiper,
|
||||
duration,
|
||||
transformElements
|
||||
});
|
||||
};
|
||||
effectInit({
|
||||
effect: 'cards',
|
||||
swiper,
|
||||
on,
|
||||
setTranslate,
|
||||
setTransition,
|
||||
perspective: () => true,
|
||||
overwriteParams: () => ({
|
||||
_loopSwapReset: false,
|
||||
watchSlidesProgress: true,
|
||||
loopAdditionalSlides: swiper.params.cardsEffect.rotate ? 3 : 2,
|
||||
centeredSlides: true,
|
||||
virtualTranslate: !swiper.params.cssMode
|
||||
})
|
||||
});
|
||||
}
|
||||
|
||||
export { EffectCards as default };
|
||||
+104
@@ -0,0 +1,104 @@
|
||||
import { c as createShadow } from '../shared/create-shadow.mjs';
|
||||
import { e as effectInit } from '../shared/effect-init.mjs';
|
||||
import { e as effectTarget } from '../shared/effect-target.mjs';
|
||||
import { g as getSlideTransformEl, p as getRotateFix } from '../shared/utils.mjs';
|
||||
|
||||
function EffectCoverflow(_ref) {
|
||||
let {
|
||||
swiper,
|
||||
extendParams,
|
||||
on
|
||||
} = _ref;
|
||||
extendParams({
|
||||
coverflowEffect: {
|
||||
rotate: 50,
|
||||
stretch: 0,
|
||||
depth: 100,
|
||||
scale: 1,
|
||||
modifier: 1,
|
||||
slideShadows: true
|
||||
}
|
||||
});
|
||||
const setTranslate = () => {
|
||||
const {
|
||||
width: swiperWidth,
|
||||
height: swiperHeight,
|
||||
slides,
|
||||
slidesSizesGrid
|
||||
} = swiper;
|
||||
const params = swiper.params.coverflowEffect;
|
||||
const isHorizontal = swiper.isHorizontal();
|
||||
const transform = swiper.translate;
|
||||
const center = isHorizontal ? -transform + swiperWidth / 2 : -transform + swiperHeight / 2;
|
||||
const rotate = isHorizontal ? params.rotate : -params.rotate;
|
||||
const translate = params.depth;
|
||||
const r = getRotateFix(swiper);
|
||||
// Each slide offset from center
|
||||
for (let i = 0, length = slides.length; i < length; i += 1) {
|
||||
const slideEl = slides[i];
|
||||
const slideSize = slidesSizesGrid[i];
|
||||
const slideOffset = slideEl.swiperSlideOffset;
|
||||
const centerOffset = (center - slideOffset - slideSize / 2) / slideSize;
|
||||
const offsetMultiplier = typeof params.modifier === 'function' ? params.modifier(centerOffset) : centerOffset * params.modifier;
|
||||
let rotateY = isHorizontal ? rotate * offsetMultiplier : 0;
|
||||
let rotateX = isHorizontal ? 0 : rotate * offsetMultiplier;
|
||||
// var rotateZ = 0
|
||||
let translateZ = -translate * Math.abs(offsetMultiplier);
|
||||
let stretch = params.stretch;
|
||||
// Allow percentage to make a relative stretch for responsive sliders
|
||||
if (typeof stretch === 'string' && stretch.indexOf('%') !== -1) {
|
||||
stretch = parseFloat(params.stretch) / 100 * slideSize;
|
||||
}
|
||||
let translateY = isHorizontal ? 0 : stretch * offsetMultiplier;
|
||||
let translateX = isHorizontal ? stretch * offsetMultiplier : 0;
|
||||
let scale = 1 - (1 - params.scale) * Math.abs(offsetMultiplier);
|
||||
|
||||
// Fix for ultra small values
|
||||
if (Math.abs(translateX) < 0.001) translateX = 0;
|
||||
if (Math.abs(translateY) < 0.001) translateY = 0;
|
||||
if (Math.abs(translateZ) < 0.001) translateZ = 0;
|
||||
if (Math.abs(rotateY) < 0.001) rotateY = 0;
|
||||
if (Math.abs(rotateX) < 0.001) rotateX = 0;
|
||||
if (Math.abs(scale) < 0.001) scale = 0;
|
||||
const slideTransform = `translate3d(${translateX}px,${translateY}px,${translateZ}px) rotateX(${r(rotateX)}deg) rotateY(${r(rotateY)}deg) scale(${scale})`;
|
||||
const targetEl = effectTarget(params, slideEl);
|
||||
targetEl.style.transform = slideTransform;
|
||||
slideEl.style.zIndex = -Math.abs(Math.round(offsetMultiplier)) + 1;
|
||||
if (params.slideShadows) {
|
||||
// Set shadows
|
||||
let shadowBeforeEl = isHorizontal ? slideEl.querySelector('.swiper-slide-shadow-left') : slideEl.querySelector('.swiper-slide-shadow-top');
|
||||
let shadowAfterEl = isHorizontal ? slideEl.querySelector('.swiper-slide-shadow-right') : slideEl.querySelector('.swiper-slide-shadow-bottom');
|
||||
if (!shadowBeforeEl) {
|
||||
shadowBeforeEl = createShadow('coverflow', slideEl, isHorizontal ? 'left' : 'top');
|
||||
}
|
||||
if (!shadowAfterEl) {
|
||||
shadowAfterEl = createShadow('coverflow', slideEl, isHorizontal ? 'right' : 'bottom');
|
||||
}
|
||||
if (shadowBeforeEl) shadowBeforeEl.style.opacity = offsetMultiplier > 0 ? offsetMultiplier : 0;
|
||||
if (shadowAfterEl) shadowAfterEl.style.opacity = -offsetMultiplier > 0 ? -offsetMultiplier : 0;
|
||||
}
|
||||
}
|
||||
};
|
||||
const setTransition = duration => {
|
||||
const transformElements = swiper.slides.map(slideEl => getSlideTransformEl(slideEl));
|
||||
transformElements.forEach(el => {
|
||||
el.style.transitionDuration = `${duration}ms`;
|
||||
el.querySelectorAll('.swiper-slide-shadow-top, .swiper-slide-shadow-right, .swiper-slide-shadow-bottom, .swiper-slide-shadow-left').forEach(shadowEl => {
|
||||
shadowEl.style.transitionDuration = `${duration}ms`;
|
||||
});
|
||||
});
|
||||
};
|
||||
effectInit({
|
||||
effect: 'coverflow',
|
||||
swiper,
|
||||
on,
|
||||
setTranslate,
|
||||
setTransition,
|
||||
perspective: () => true,
|
||||
overwriteParams: () => ({
|
||||
watchSlidesProgress: true
|
||||
})
|
||||
});
|
||||
}
|
||||
|
||||
export { EffectCoverflow as default };
|
||||
+146
@@ -0,0 +1,146 @@
|
||||
import { c as createShadow } from '../shared/create-shadow.mjs';
|
||||
import { e as effectInit } from '../shared/effect-init.mjs';
|
||||
import { e as effectTarget } from '../shared/effect-target.mjs';
|
||||
import { e as effectVirtualTransitionEnd } from '../shared/effect-virtual-transition-end.mjs';
|
||||
import { g as getSlideTransformEl, p as getRotateFix } from '../shared/utils.mjs';
|
||||
|
||||
function EffectCreative(_ref) {
|
||||
let {
|
||||
swiper,
|
||||
extendParams,
|
||||
on
|
||||
} = _ref;
|
||||
extendParams({
|
||||
creativeEffect: {
|
||||
limitProgress: 1,
|
||||
shadowPerProgress: false,
|
||||
progressMultiplier: 1,
|
||||
perspective: true,
|
||||
prev: {
|
||||
translate: [0, 0, 0],
|
||||
rotate: [0, 0, 0],
|
||||
opacity: 1,
|
||||
scale: 1
|
||||
},
|
||||
next: {
|
||||
translate: [0, 0, 0],
|
||||
rotate: [0, 0, 0],
|
||||
opacity: 1,
|
||||
scale: 1
|
||||
}
|
||||
}
|
||||
});
|
||||
const getTranslateValue = value => {
|
||||
if (typeof value === 'string') return value;
|
||||
return `${value}px`;
|
||||
};
|
||||
const setTranslate = () => {
|
||||
const {
|
||||
slides,
|
||||
wrapperEl,
|
||||
slidesSizesGrid
|
||||
} = swiper;
|
||||
const params = swiper.params.creativeEffect;
|
||||
const {
|
||||
progressMultiplier: multiplier
|
||||
} = params;
|
||||
const isCenteredSlides = swiper.params.centeredSlides;
|
||||
const rotateFix = getRotateFix(swiper);
|
||||
if (isCenteredSlides) {
|
||||
const margin = slidesSizesGrid[0] / 2 - swiper.params.slidesOffsetBefore || 0;
|
||||
wrapperEl.style.transform = `translateX(calc(50% - ${margin}px))`;
|
||||
}
|
||||
for (let i = 0; i < slides.length; i += 1) {
|
||||
const slideEl = slides[i];
|
||||
const slideProgress = slideEl.progress;
|
||||
const progress = Math.min(Math.max(slideEl.progress, -params.limitProgress), params.limitProgress);
|
||||
let originalProgress = progress;
|
||||
if (!isCenteredSlides) {
|
||||
originalProgress = Math.min(Math.max(slideEl.originalProgress, -params.limitProgress), params.limitProgress);
|
||||
}
|
||||
const offset = slideEl.swiperSlideOffset;
|
||||
const t = [swiper.params.cssMode ? -offset - swiper.translate : -offset, 0, 0];
|
||||
const r = [0, 0, 0];
|
||||
let custom = false;
|
||||
if (!swiper.isHorizontal()) {
|
||||
t[1] = t[0];
|
||||
t[0] = 0;
|
||||
}
|
||||
let data = {
|
||||
translate: [0, 0, 0],
|
||||
rotate: [0, 0, 0],
|
||||
scale: 1,
|
||||
opacity: 1
|
||||
};
|
||||
if (progress < 0) {
|
||||
data = params.next;
|
||||
custom = true;
|
||||
} else if (progress > 0) {
|
||||
data = params.prev;
|
||||
custom = true;
|
||||
}
|
||||
// set translate
|
||||
t.forEach((value, index) => {
|
||||
t[index] = `calc(${value}px + (${getTranslateValue(data.translate[index])} * ${Math.abs(progress * multiplier)}))`;
|
||||
});
|
||||
// set rotates
|
||||
r.forEach((value, index) => {
|
||||
let val = data.rotate[index] * Math.abs(progress * multiplier);
|
||||
r[index] = val;
|
||||
});
|
||||
slideEl.style.zIndex = -Math.abs(Math.round(slideProgress)) + slides.length;
|
||||
const translateString = t.join(', ');
|
||||
const rotateString = `rotateX(${rotateFix(r[0])}deg) rotateY(${rotateFix(r[1])}deg) rotateZ(${rotateFix(r[2])}deg)`;
|
||||
const scaleString = originalProgress < 0 ? `scale(${1 + (1 - data.scale) * originalProgress * multiplier})` : `scale(${1 - (1 - data.scale) * originalProgress * multiplier})`;
|
||||
const opacityString = originalProgress < 0 ? 1 + (1 - data.opacity) * originalProgress * multiplier : 1 - (1 - data.opacity) * originalProgress * multiplier;
|
||||
const transform = `translate3d(${translateString}) ${rotateString} ${scaleString}`;
|
||||
|
||||
// Set shadows
|
||||
if (custom && data.shadow || !custom) {
|
||||
let shadowEl = slideEl.querySelector('.swiper-slide-shadow');
|
||||
if (!shadowEl && data.shadow) {
|
||||
shadowEl = createShadow('creative', slideEl);
|
||||
}
|
||||
if (shadowEl) {
|
||||
const shadowOpacity = params.shadowPerProgress ? progress * (1 / params.limitProgress) : progress;
|
||||
shadowEl.style.opacity = Math.min(Math.max(Math.abs(shadowOpacity), 0), 1);
|
||||
}
|
||||
}
|
||||
const targetEl = effectTarget(params, slideEl);
|
||||
targetEl.style.transform = transform;
|
||||
targetEl.style.opacity = opacityString;
|
||||
if (data.origin) {
|
||||
targetEl.style.transformOrigin = data.origin;
|
||||
}
|
||||
}
|
||||
};
|
||||
const setTransition = duration => {
|
||||
const transformElements = swiper.slides.map(slideEl => getSlideTransformEl(slideEl));
|
||||
transformElements.forEach(el => {
|
||||
el.style.transitionDuration = `${duration}ms`;
|
||||
el.querySelectorAll('.swiper-slide-shadow').forEach(shadowEl => {
|
||||
shadowEl.style.transitionDuration = `${duration}ms`;
|
||||
});
|
||||
});
|
||||
effectVirtualTransitionEnd({
|
||||
swiper,
|
||||
duration,
|
||||
transformElements,
|
||||
allSlides: true
|
||||
});
|
||||
};
|
||||
effectInit({
|
||||
effect: 'creative',
|
||||
swiper,
|
||||
on,
|
||||
setTranslate,
|
||||
setTransition,
|
||||
perspective: () => swiper.params.creativeEffect.perspective,
|
||||
overwriteParams: () => ({
|
||||
watchSlidesProgress: true,
|
||||
virtualTranslate: !swiper.params.cssMode
|
||||
})
|
||||
});
|
||||
}
|
||||
|
||||
export { EffectCreative as default };
|
||||
+174
@@ -0,0 +1,174 @@
|
||||
import { e as effectInit } from '../shared/effect-init.mjs';
|
||||
import { c as createElement, p as getRotateFix } from '../shared/utils.mjs';
|
||||
|
||||
function EffectCube(_ref) {
|
||||
let {
|
||||
swiper,
|
||||
extendParams,
|
||||
on
|
||||
} = _ref;
|
||||
extendParams({
|
||||
cubeEffect: {
|
||||
slideShadows: true,
|
||||
shadow: true,
|
||||
shadowOffset: 20,
|
||||
shadowScale: 0.94
|
||||
}
|
||||
});
|
||||
const createSlideShadows = (slideEl, progress, isHorizontal) => {
|
||||
let shadowBefore = isHorizontal ? slideEl.querySelector('.swiper-slide-shadow-left') : slideEl.querySelector('.swiper-slide-shadow-top');
|
||||
let shadowAfter = isHorizontal ? slideEl.querySelector('.swiper-slide-shadow-right') : slideEl.querySelector('.swiper-slide-shadow-bottom');
|
||||
if (!shadowBefore) {
|
||||
shadowBefore = createElement('div', `swiper-slide-shadow-cube swiper-slide-shadow-${isHorizontal ? 'left' : 'top'}`.split(' '));
|
||||
slideEl.append(shadowBefore);
|
||||
}
|
||||
if (!shadowAfter) {
|
||||
shadowAfter = createElement('div', `swiper-slide-shadow-cube swiper-slide-shadow-${isHorizontal ? 'right' : 'bottom'}`.split(' '));
|
||||
slideEl.append(shadowAfter);
|
||||
}
|
||||
if (shadowBefore) shadowBefore.style.opacity = Math.max(-progress, 0);
|
||||
if (shadowAfter) shadowAfter.style.opacity = Math.max(progress, 0);
|
||||
};
|
||||
const recreateShadows = () => {
|
||||
// create new ones
|
||||
const isHorizontal = swiper.isHorizontal();
|
||||
swiper.slides.forEach(slideEl => {
|
||||
const progress = Math.max(Math.min(slideEl.progress, 1), -1);
|
||||
createSlideShadows(slideEl, progress, isHorizontal);
|
||||
});
|
||||
};
|
||||
const setTranslate = () => {
|
||||
const {
|
||||
el,
|
||||
wrapperEl,
|
||||
slides,
|
||||
width: swiperWidth,
|
||||
height: swiperHeight,
|
||||
rtlTranslate: rtl,
|
||||
size: swiperSize,
|
||||
browser
|
||||
} = swiper;
|
||||
const r = getRotateFix(swiper);
|
||||
const params = swiper.params.cubeEffect;
|
||||
const isHorizontal = swiper.isHorizontal();
|
||||
const isVirtual = swiper.virtual && swiper.params.virtual.enabled;
|
||||
let wrapperRotate = 0;
|
||||
let cubeShadowEl;
|
||||
if (params.shadow) {
|
||||
if (isHorizontal) {
|
||||
cubeShadowEl = swiper.wrapperEl.querySelector('.swiper-cube-shadow');
|
||||
if (!cubeShadowEl) {
|
||||
cubeShadowEl = createElement('div', 'swiper-cube-shadow');
|
||||
swiper.wrapperEl.append(cubeShadowEl);
|
||||
}
|
||||
cubeShadowEl.style.height = `${swiperWidth}px`;
|
||||
} else {
|
||||
cubeShadowEl = el.querySelector('.swiper-cube-shadow');
|
||||
if (!cubeShadowEl) {
|
||||
cubeShadowEl = createElement('div', 'swiper-cube-shadow');
|
||||
el.append(cubeShadowEl);
|
||||
}
|
||||
}
|
||||
}
|
||||
for (let i = 0; i < slides.length; i += 1) {
|
||||
const slideEl = slides[i];
|
||||
let slideIndex = i;
|
||||
if (isVirtual) {
|
||||
slideIndex = parseInt(slideEl.getAttribute('data-swiper-slide-index'), 10);
|
||||
}
|
||||
let slideAngle = slideIndex * 90;
|
||||
let round = Math.floor(slideAngle / 360);
|
||||
if (rtl) {
|
||||
slideAngle = -slideAngle;
|
||||
round = Math.floor(-slideAngle / 360);
|
||||
}
|
||||
const progress = Math.max(Math.min(slideEl.progress, 1), -1);
|
||||
let tx = 0;
|
||||
let ty = 0;
|
||||
let 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;
|
||||
}
|
||||
const transform = `rotateX(${r(isHorizontal ? 0 : -slideAngle)}deg) rotateY(${r(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.style.transform = transform;
|
||||
if (params.slideShadows) {
|
||||
createSlideShadows(slideEl, progress, isHorizontal);
|
||||
}
|
||||
}
|
||||
wrapperEl.style.transformOrigin = `50% 50% -${swiperSize / 2}px`;
|
||||
wrapperEl.style['-webkit-transform-origin'] = `50% 50% -${swiperSize / 2}px`;
|
||||
if (params.shadow) {
|
||||
if (isHorizontal) {
|
||||
cubeShadowEl.style.transform = `translate3d(0px, ${swiperWidth / 2 + params.shadowOffset}px, ${-swiperWidth / 2}px) rotateX(89.99deg) rotateZ(0deg) scale(${params.shadowScale})`;
|
||||
} else {
|
||||
const shadowAngle = Math.abs(wrapperRotate) - Math.floor(Math.abs(wrapperRotate) / 90) * 90;
|
||||
const multiplier = 1.5 - (Math.sin(shadowAngle * 2 * Math.PI / 360) / 2 + Math.cos(shadowAngle * 2 * Math.PI / 360) / 2);
|
||||
const scale1 = params.shadowScale;
|
||||
const scale2 = params.shadowScale / multiplier;
|
||||
const offset = params.shadowOffset;
|
||||
cubeShadowEl.style.transform = `scale3d(${scale1}, 1, ${scale2}) translate3d(0px, ${swiperHeight / 2 + offset}px, ${-swiperHeight / 2 / scale2}px) rotateX(-89.99deg)`;
|
||||
}
|
||||
}
|
||||
const zFactor = (browser.isSafari || browser.isWebView) && browser.needPerspectiveFix ? -swiperSize / 2 : 0;
|
||||
wrapperEl.style.transform = `translate3d(0px,0,${zFactor}px) rotateX(${r(swiper.isHorizontal() ? 0 : wrapperRotate)}deg) rotateY(${r(swiper.isHorizontal() ? -wrapperRotate : 0)}deg)`;
|
||||
wrapperEl.style.setProperty('--swiper-cube-translate-z', `${zFactor}px`);
|
||||
};
|
||||
const setTransition = duration => {
|
||||
const {
|
||||
el,
|
||||
slides
|
||||
} = swiper;
|
||||
slides.forEach(slideEl => {
|
||||
slideEl.style.transitionDuration = `${duration}ms`;
|
||||
slideEl.querySelectorAll('.swiper-slide-shadow-top, .swiper-slide-shadow-right, .swiper-slide-shadow-bottom, .swiper-slide-shadow-left').forEach(subEl => {
|
||||
subEl.style.transitionDuration = `${duration}ms`;
|
||||
});
|
||||
});
|
||||
if (swiper.params.cubeEffect.shadow && !swiper.isHorizontal()) {
|
||||
const shadowEl = el.querySelector('.swiper-cube-shadow');
|
||||
if (shadowEl) shadowEl.style.transitionDuration = `${duration}ms`;
|
||||
}
|
||||
};
|
||||
effectInit({
|
||||
effect: 'cube',
|
||||
swiper,
|
||||
on,
|
||||
setTranslate,
|
||||
setTransition,
|
||||
recreateShadows,
|
||||
getEffectParams: () => swiper.params.cubeEffect,
|
||||
perspective: () => true,
|
||||
overwriteParams: () => ({
|
||||
slidesPerView: 1,
|
||||
slidesPerGroup: 1,
|
||||
watchSlidesProgress: true,
|
||||
resistanceRatio: 0,
|
||||
spaceBetween: 0,
|
||||
centeredSlides: false,
|
||||
virtualTranslate: true
|
||||
})
|
||||
});
|
||||
}
|
||||
|
||||
export { EffectCube as default };
|
||||
+66
@@ -0,0 +1,66 @@
|
||||
import { e as effectInit } from '../shared/effect-init.mjs';
|
||||
import { e as effectTarget } from '../shared/effect-target.mjs';
|
||||
import { e as effectVirtualTransitionEnd } from '../shared/effect-virtual-transition-end.mjs';
|
||||
import { g as getSlideTransformEl } from '../shared/utils.mjs';
|
||||
|
||||
function EffectFade(_ref) {
|
||||
let {
|
||||
swiper,
|
||||
extendParams,
|
||||
on
|
||||
} = _ref;
|
||||
extendParams({
|
||||
fadeEffect: {
|
||||
crossFade: false
|
||||
}
|
||||
});
|
||||
const setTranslate = () => {
|
||||
const {
|
||||
slides
|
||||
} = swiper;
|
||||
const params = swiper.params.fadeEffect;
|
||||
for (let i = 0; i < slides.length; i += 1) {
|
||||
const slideEl = swiper.slides[i];
|
||||
const offset = slideEl.swiperSlideOffset;
|
||||
let tx = -offset;
|
||||
if (!swiper.params.virtualTranslate) tx -= swiper.translate;
|
||||
let ty = 0;
|
||||
if (!swiper.isHorizontal()) {
|
||||
ty = tx;
|
||||
tx = 0;
|
||||
}
|
||||
const slideOpacity = swiper.params.fadeEffect.crossFade ? Math.max(1 - Math.abs(slideEl.progress), 0) : 1 + Math.min(Math.max(slideEl.progress, -1), 0);
|
||||
const targetEl = effectTarget(params, slideEl);
|
||||
targetEl.style.opacity = slideOpacity;
|
||||
targetEl.style.transform = `translate3d(${tx}px, ${ty}px, 0px)`;
|
||||
}
|
||||
};
|
||||
const setTransition = duration => {
|
||||
const transformElements = swiper.slides.map(slideEl => getSlideTransformEl(slideEl));
|
||||
transformElements.forEach(el => {
|
||||
el.style.transitionDuration = `${duration}ms`;
|
||||
});
|
||||
effectVirtualTransitionEnd({
|
||||
swiper,
|
||||
duration,
|
||||
transformElements,
|
||||
allSlides: true
|
||||
});
|
||||
};
|
||||
effectInit({
|
||||
effect: 'fade',
|
||||
swiper,
|
||||
on,
|
||||
setTranslate,
|
||||
setTransition,
|
||||
overwriteParams: () => ({
|
||||
slidesPerView: 1,
|
||||
slidesPerGroup: 1,
|
||||
watchSlidesProgress: true,
|
||||
spaceBetween: 0,
|
||||
virtualTranslate: !swiper.params.cssMode
|
||||
})
|
||||
});
|
||||
}
|
||||
|
||||
export { EffectFade as default };
|
||||
+111
@@ -0,0 +1,111 @@
|
||||
import { c as createShadow } from '../shared/create-shadow.mjs';
|
||||
import { e as effectInit } from '../shared/effect-init.mjs';
|
||||
import { e as effectTarget } from '../shared/effect-target.mjs';
|
||||
import { e as effectVirtualTransitionEnd } from '../shared/effect-virtual-transition-end.mjs';
|
||||
import { g as getSlideTransformEl, p as getRotateFix } from '../shared/utils.mjs';
|
||||
|
||||
function EffectFlip(_ref) {
|
||||
let {
|
||||
swiper,
|
||||
extendParams,
|
||||
on
|
||||
} = _ref;
|
||||
extendParams({
|
||||
flipEffect: {
|
||||
slideShadows: true,
|
||||
limitRotation: true
|
||||
}
|
||||
});
|
||||
const createSlideShadows = (slideEl, progress) => {
|
||||
let shadowBefore = swiper.isHorizontal() ? slideEl.querySelector('.swiper-slide-shadow-left') : slideEl.querySelector('.swiper-slide-shadow-top');
|
||||
let shadowAfter = swiper.isHorizontal() ? slideEl.querySelector('.swiper-slide-shadow-right') : slideEl.querySelector('.swiper-slide-shadow-bottom');
|
||||
if (!shadowBefore) {
|
||||
shadowBefore = createShadow('flip', slideEl, swiper.isHorizontal() ? 'left' : 'top');
|
||||
}
|
||||
if (!shadowAfter) {
|
||||
shadowAfter = createShadow('flip', slideEl, swiper.isHorizontal() ? 'right' : 'bottom');
|
||||
}
|
||||
if (shadowBefore) shadowBefore.style.opacity = Math.max(-progress, 0);
|
||||
if (shadowAfter) shadowAfter.style.opacity = Math.max(progress, 0);
|
||||
};
|
||||
const recreateShadows = () => {
|
||||
// Set shadows
|
||||
swiper.params.flipEffect;
|
||||
swiper.slides.forEach(slideEl => {
|
||||
let progress = slideEl.progress;
|
||||
if (swiper.params.flipEffect.limitRotation) {
|
||||
progress = Math.max(Math.min(slideEl.progress, 1), -1);
|
||||
}
|
||||
createSlideShadows(slideEl, progress);
|
||||
});
|
||||
};
|
||||
const setTranslate = () => {
|
||||
const {
|
||||
slides,
|
||||
rtlTranslate: rtl
|
||||
} = swiper;
|
||||
const params = swiper.params.flipEffect;
|
||||
const rotateFix = getRotateFix(swiper);
|
||||
for (let i = 0; i < slides.length; i += 1) {
|
||||
const slideEl = slides[i];
|
||||
let progress = slideEl.progress;
|
||||
if (swiper.params.flipEffect.limitRotation) {
|
||||
progress = Math.max(Math.min(slideEl.progress, 1), -1);
|
||||
}
|
||||
const offset = slideEl.swiperSlideOffset;
|
||||
const rotate = -180 * progress;
|
||||
let rotateY = rotate;
|
||||
let rotateX = 0;
|
||||
let tx = swiper.params.cssMode ? -offset - swiper.translate : -offset;
|
||||
let ty = 0;
|
||||
if (!swiper.isHorizontal()) {
|
||||
ty = tx;
|
||||
tx = 0;
|
||||
rotateX = -rotateY;
|
||||
rotateY = 0;
|
||||
} else if (rtl) {
|
||||
rotateY = -rotateY;
|
||||
}
|
||||
slideEl.style.zIndex = -Math.abs(Math.round(progress)) + slides.length;
|
||||
if (params.slideShadows) {
|
||||
createSlideShadows(slideEl, progress);
|
||||
}
|
||||
const transform = `translate3d(${tx}px, ${ty}px, 0px) rotateX(${rotateFix(rotateX)}deg) rotateY(${rotateFix(rotateY)}deg)`;
|
||||
const targetEl = effectTarget(params, slideEl);
|
||||
targetEl.style.transform = transform;
|
||||
}
|
||||
};
|
||||
const setTransition = duration => {
|
||||
const transformElements = swiper.slides.map(slideEl => getSlideTransformEl(slideEl));
|
||||
transformElements.forEach(el => {
|
||||
el.style.transitionDuration = `${duration}ms`;
|
||||
el.querySelectorAll('.swiper-slide-shadow-top, .swiper-slide-shadow-right, .swiper-slide-shadow-bottom, .swiper-slide-shadow-left').forEach(shadowEl => {
|
||||
shadowEl.style.transitionDuration = `${duration}ms`;
|
||||
});
|
||||
});
|
||||
effectVirtualTransitionEnd({
|
||||
swiper,
|
||||
duration,
|
||||
transformElements
|
||||
});
|
||||
};
|
||||
effectInit({
|
||||
effect: 'flip',
|
||||
swiper,
|
||||
on,
|
||||
setTranslate,
|
||||
setTransition,
|
||||
recreateShadows,
|
||||
getEffectParams: () => swiper.params.flipEffect,
|
||||
perspective: () => true,
|
||||
overwriteParams: () => ({
|
||||
slidesPerView: 1,
|
||||
slidesPerGroup: 1,
|
||||
watchSlidesProgress: true,
|
||||
spaceBetween: 0,
|
||||
virtualTranslate: !swiper.params.cssMode
|
||||
})
|
||||
});
|
||||
}
|
||||
|
||||
export { EffectFlip as default };
|
||||
+237
@@ -0,0 +1,237 @@
|
||||
import { f as now, l as elementTransitionEnd } from '../shared/utils.mjs';
|
||||
|
||||
function freeMode(_ref) {
|
||||
let {
|
||||
swiper,
|
||||
extendParams,
|
||||
emit,
|
||||
once
|
||||
} = _ref;
|
||||
extendParams({
|
||||
freeMode: {
|
||||
enabled: false,
|
||||
momentum: true,
|
||||
momentumRatio: 1,
|
||||
momentumBounce: true,
|
||||
momentumBounceRatio: 1,
|
||||
momentumVelocityRatio: 1,
|
||||
sticky: false,
|
||||
minimumVelocity: 0.02
|
||||
}
|
||||
});
|
||||
function onTouchStart() {
|
||||
if (swiper.params.cssMode) return;
|
||||
const translate = swiper.getTranslate();
|
||||
swiper.setTranslate(translate);
|
||||
swiper.setTransition(0);
|
||||
swiper.touchEventsData.velocities.length = 0;
|
||||
swiper.freeMode.onTouchEnd({
|
||||
currentPos: swiper.rtl ? swiper.translate : -swiper.translate
|
||||
});
|
||||
}
|
||||
function onTouchMove() {
|
||||
if (swiper.params.cssMode) return;
|
||||
const {
|
||||
touchEventsData: data,
|
||||
touches
|
||||
} = swiper;
|
||||
// Velocity
|
||||
if (data.velocities.length === 0) {
|
||||
data.velocities.push({
|
||||
position: touches[swiper.isHorizontal() ? 'startX' : 'startY'],
|
||||
time: data.touchStartTime
|
||||
});
|
||||
}
|
||||
data.velocities.push({
|
||||
position: touches[swiper.isHorizontal() ? 'currentX' : 'currentY'],
|
||||
time: now()
|
||||
});
|
||||
}
|
||||
function onTouchEnd(_ref2) {
|
||||
let {
|
||||
currentPos
|
||||
} = _ref2;
|
||||
if (swiper.params.cssMode) return;
|
||||
const {
|
||||
params,
|
||||
wrapperEl,
|
||||
rtlTranslate: rtl,
|
||||
snapGrid,
|
||||
touchEventsData: data
|
||||
} = swiper;
|
||||
// Time diff
|
||||
const touchEndTime = now();
|
||||
const timeDiff = touchEndTime - data.touchStartTime;
|
||||
if (currentPos < -swiper.minTranslate()) {
|
||||
swiper.slideTo(swiper.activeIndex);
|
||||
return;
|
||||
}
|
||||
if (currentPos > -swiper.maxTranslate()) {
|
||||
if (swiper.slides.length < snapGrid.length) {
|
||||
swiper.slideTo(snapGrid.length - 1);
|
||||
} else {
|
||||
swiper.slideTo(swiper.slides.length - 1);
|
||||
}
|
||||
return;
|
||||
}
|
||||
if (params.freeMode.momentum) {
|
||||
if (data.velocities.length > 1) {
|
||||
const lastMoveEvent = data.velocities.pop();
|
||||
const velocityEvent = data.velocities.pop();
|
||||
const distance = lastMoveEvent.position - velocityEvent.position;
|
||||
const time = lastMoveEvent.time - velocityEvent.time;
|
||||
swiper.velocity = distance / time;
|
||||
swiper.velocity /= 2;
|
||||
if (Math.abs(swiper.velocity) < params.freeMode.minimumVelocity) {
|
||||
swiper.velocity = 0;
|
||||
}
|
||||
// this implies that the user stopped moving a finger then released.
|
||||
// There would be no events with distance zero, so the last event is stale.
|
||||
if (time > 150 || now() - lastMoveEvent.time > 300) {
|
||||
swiper.velocity = 0;
|
||||
}
|
||||
} else {
|
||||
swiper.velocity = 0;
|
||||
}
|
||||
swiper.velocity *= params.freeMode.momentumVelocityRatio;
|
||||
data.velocities.length = 0;
|
||||
let momentumDuration = 1000 * params.freeMode.momentumRatio;
|
||||
const momentumDistance = swiper.velocity * momentumDuration;
|
||||
let newPosition = swiper.translate + momentumDistance;
|
||||
if (rtl) newPosition = -newPosition;
|
||||
let doBounce = false;
|
||||
let afterBouncePosition;
|
||||
const bounceAmount = Math.abs(swiper.velocity) * 20 * params.freeMode.momentumBounceRatio;
|
||||
let needsLoopFix;
|
||||
if (newPosition < swiper.maxTranslate()) {
|
||||
if (params.freeMode.momentumBounce) {
|
||||
if (newPosition + swiper.maxTranslate() < -bounceAmount) {
|
||||
newPosition = swiper.maxTranslate() - bounceAmount;
|
||||
}
|
||||
afterBouncePosition = swiper.maxTranslate();
|
||||
doBounce = true;
|
||||
data.allowMomentumBounce = true;
|
||||
} else {
|
||||
newPosition = swiper.maxTranslate();
|
||||
}
|
||||
if (params.loop && params.centeredSlides) needsLoopFix = true;
|
||||
} else if (newPosition > swiper.minTranslate()) {
|
||||
if (params.freeMode.momentumBounce) {
|
||||
if (newPosition - swiper.minTranslate() > bounceAmount) {
|
||||
newPosition = swiper.minTranslate() + bounceAmount;
|
||||
}
|
||||
afterBouncePosition = swiper.minTranslate();
|
||||
doBounce = true;
|
||||
data.allowMomentumBounce = true;
|
||||
} else {
|
||||
newPosition = swiper.minTranslate();
|
||||
}
|
||||
if (params.loop && params.centeredSlides) needsLoopFix = true;
|
||||
} else if (params.freeMode.sticky) {
|
||||
let nextSlide;
|
||||
for (let j = 0; j < snapGrid.length; j += 1) {
|
||||
if (snapGrid[j] > -newPosition) {
|
||||
nextSlide = j;
|
||||
break;
|
||||
}
|
||||
}
|
||||
if (Math.abs(snapGrid[nextSlide] - newPosition) < Math.abs(snapGrid[nextSlide - 1] - newPosition) || swiper.swipeDirection === 'next') {
|
||||
newPosition = snapGrid[nextSlide];
|
||||
} else {
|
||||
newPosition = snapGrid[nextSlide - 1];
|
||||
}
|
||||
newPosition = -newPosition;
|
||||
}
|
||||
if (needsLoopFix) {
|
||||
once('transitionEnd', () => {
|
||||
swiper.loopFix();
|
||||
});
|
||||
}
|
||||
// Fix duration
|
||||
if (swiper.velocity !== 0) {
|
||||
if (rtl) {
|
||||
momentumDuration = Math.abs((-newPosition - swiper.translate) / swiper.velocity);
|
||||
} else {
|
||||
momentumDuration = Math.abs((newPosition - swiper.translate) / swiper.velocity);
|
||||
}
|
||||
if (params.freeMode.sticky) {
|
||||
// If freeMode.sticky is active and the user ends a swipe with a slow-velocity
|
||||
// event, then durations can be 20+ seconds to slide one (or zero!) slides.
|
||||
// It's easy to see this when simulating touch with mouse events. To fix this,
|
||||
// limit single-slide swipes to the default slide duration. This also has the
|
||||
// nice side effect of matching slide speed if the user stopped moving before
|
||||
// lifting finger or mouse vs. moving slowly before lifting the finger/mouse.
|
||||
// For faster swipes, also apply limits (albeit higher ones).
|
||||
const moveDistance = Math.abs((rtl ? -newPosition : newPosition) - swiper.translate);
|
||||
const currentSlideSize = swiper.slidesSizesGrid[swiper.activeIndex];
|
||||
if (moveDistance < currentSlideSize) {
|
||||
momentumDuration = params.speed;
|
||||
} else if (moveDistance < 2 * currentSlideSize) {
|
||||
momentumDuration = params.speed * 1.5;
|
||||
} else {
|
||||
momentumDuration = params.speed * 2.5;
|
||||
}
|
||||
}
|
||||
} else if (params.freeMode.sticky) {
|
||||
swiper.slideToClosest();
|
||||
return;
|
||||
}
|
||||
if (params.freeMode.momentumBounce && doBounce) {
|
||||
swiper.updateProgress(afterBouncePosition);
|
||||
swiper.setTransition(momentumDuration);
|
||||
swiper.setTranslate(newPosition);
|
||||
swiper.transitionStart(true, swiper.swipeDirection);
|
||||
swiper.animating = true;
|
||||
elementTransitionEnd(wrapperEl, () => {
|
||||
if (!swiper || swiper.destroyed || !data.allowMomentumBounce) return;
|
||||
emit('momentumBounce');
|
||||
swiper.setTransition(params.speed);
|
||||
setTimeout(() => {
|
||||
swiper.setTranslate(afterBouncePosition);
|
||||
elementTransitionEnd(wrapperEl, () => {
|
||||
if (!swiper || swiper.destroyed) return;
|
||||
swiper.transitionEnd();
|
||||
});
|
||||
}, 0);
|
||||
});
|
||||
} else if (swiper.velocity) {
|
||||
emit('_freeModeNoMomentumRelease');
|
||||
swiper.updateProgress(newPosition);
|
||||
swiper.setTransition(momentumDuration);
|
||||
swiper.setTranslate(newPosition);
|
||||
swiper.transitionStart(true, swiper.swipeDirection);
|
||||
if (!swiper.animating) {
|
||||
swiper.animating = true;
|
||||
elementTransitionEnd(wrapperEl, () => {
|
||||
if (!swiper || swiper.destroyed) return;
|
||||
swiper.transitionEnd();
|
||||
});
|
||||
}
|
||||
} else {
|
||||
swiper.updateProgress(newPosition);
|
||||
}
|
||||
swiper.updateActiveIndex();
|
||||
swiper.updateSlidesClasses();
|
||||
} else if (params.freeMode.sticky) {
|
||||
swiper.slideToClosest();
|
||||
return;
|
||||
} else if (params.freeMode) {
|
||||
emit('_freeModeNoMomentumRelease');
|
||||
}
|
||||
if (!params.freeMode.momentum || timeDiff >= params.longSwipesMs) {
|
||||
emit('_freeModeStaticRelease');
|
||||
swiper.updateProgress();
|
||||
swiper.updateActiveIndex();
|
||||
swiper.updateSlidesClasses();
|
||||
}
|
||||
}
|
||||
Object.assign(swiper, {
|
||||
freeMode: {
|
||||
onTouchStart,
|
||||
onTouchMove,
|
||||
onTouchEnd
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
export { freeMode as default };
|
||||
+155
@@ -0,0 +1,155 @@
|
||||
function Grid(_ref) {
|
||||
let {
|
||||
swiper,
|
||||
extendParams,
|
||||
on
|
||||
} = _ref;
|
||||
extendParams({
|
||||
grid: {
|
||||
rows: 1,
|
||||
fill: 'column'
|
||||
}
|
||||
});
|
||||
let slidesNumberEvenToRows;
|
||||
let slidesPerRow;
|
||||
let numFullColumns;
|
||||
let wasMultiRow;
|
||||
const getSpaceBetween = () => {
|
||||
let spaceBetween = swiper.params.spaceBetween;
|
||||
if (typeof spaceBetween === 'string' && spaceBetween.indexOf('%') >= 0) {
|
||||
spaceBetween = parseFloat(spaceBetween.replace('%', '')) / 100 * swiper.size;
|
||||
} else if (typeof spaceBetween === 'string') {
|
||||
spaceBetween = parseFloat(spaceBetween);
|
||||
}
|
||||
return spaceBetween;
|
||||
};
|
||||
const initSlides = slides => {
|
||||
const {
|
||||
slidesPerView
|
||||
} = swiper.params;
|
||||
const {
|
||||
rows,
|
||||
fill
|
||||
} = swiper.params.grid;
|
||||
const slidesLength = swiper.virtual && swiper.params.virtual.enabled ? swiper.virtual.slides.length : slides.length;
|
||||
numFullColumns = Math.floor(slidesLength / rows);
|
||||
if (Math.floor(slidesLength / rows) === slidesLength / rows) {
|
||||
slidesNumberEvenToRows = slidesLength;
|
||||
} else {
|
||||
slidesNumberEvenToRows = Math.ceil(slidesLength / rows) * rows;
|
||||
}
|
||||
if (slidesPerView !== 'auto' && fill === 'row') {
|
||||
slidesNumberEvenToRows = Math.max(slidesNumberEvenToRows, slidesPerView * rows);
|
||||
}
|
||||
slidesPerRow = slidesNumberEvenToRows / rows;
|
||||
};
|
||||
const unsetSlides = () => {
|
||||
if (swiper.slides) {
|
||||
swiper.slides.forEach(slide => {
|
||||
if (slide.swiperSlideGridSet) {
|
||||
slide.style.height = '';
|
||||
slide.style[swiper.getDirectionLabel('margin-top')] = '';
|
||||
}
|
||||
});
|
||||
}
|
||||
};
|
||||
const updateSlide = (i, slide, slides) => {
|
||||
const {
|
||||
slidesPerGroup
|
||||
} = swiper.params;
|
||||
const spaceBetween = getSpaceBetween();
|
||||
const {
|
||||
rows,
|
||||
fill
|
||||
} = swiper.params.grid;
|
||||
const slidesLength = swiper.virtual && swiper.params.virtual.enabled ? swiper.virtual.slides.length : slides.length;
|
||||
// Set slides order
|
||||
let newSlideOrderIndex;
|
||||
let column;
|
||||
let row;
|
||||
if (fill === 'row' && slidesPerGroup > 1) {
|
||||
const groupIndex = Math.floor(i / (slidesPerGroup * rows));
|
||||
const slideIndexInGroup = i - rows * slidesPerGroup * groupIndex;
|
||||
const columnsInGroup = groupIndex === 0 ? slidesPerGroup : Math.min(Math.ceil((slidesLength - groupIndex * rows * slidesPerGroup) / rows), slidesPerGroup);
|
||||
row = Math.floor(slideIndexInGroup / columnsInGroup);
|
||||
column = slideIndexInGroup - row * columnsInGroup + groupIndex * slidesPerGroup;
|
||||
newSlideOrderIndex = column + row * slidesNumberEvenToRows / rows;
|
||||
slide.style.order = newSlideOrderIndex;
|
||||
} else if (fill === 'column') {
|
||||
column = Math.floor(i / rows);
|
||||
row = i - column * rows;
|
||||
if (column > numFullColumns || column === numFullColumns && row === rows - 1) {
|
||||
row += 1;
|
||||
if (row >= rows) {
|
||||
row = 0;
|
||||
column += 1;
|
||||
}
|
||||
}
|
||||
} else {
|
||||
row = Math.floor(i / slidesPerRow);
|
||||
column = i - row * slidesPerRow;
|
||||
}
|
||||
slide.row = row;
|
||||
slide.column = column;
|
||||
slide.style.height = `calc((100% - ${(rows - 1) * spaceBetween}px) / ${rows})`;
|
||||
slide.style[swiper.getDirectionLabel('margin-top')] = row !== 0 ? spaceBetween && `${spaceBetween}px` : '';
|
||||
slide.swiperSlideGridSet = true;
|
||||
};
|
||||
const updateWrapperSize = (slideSize, snapGrid) => {
|
||||
const {
|
||||
centeredSlides,
|
||||
roundLengths
|
||||
} = swiper.params;
|
||||
const spaceBetween = getSpaceBetween();
|
||||
const {
|
||||
rows
|
||||
} = swiper.params.grid;
|
||||
swiper.virtualSize = (slideSize + spaceBetween) * slidesNumberEvenToRows;
|
||||
swiper.virtualSize = Math.ceil(swiper.virtualSize / rows) - spaceBetween;
|
||||
if (!swiper.params.cssMode) {
|
||||
swiper.wrapperEl.style[swiper.getDirectionLabel('width')] = `${swiper.virtualSize + spaceBetween}px`;
|
||||
}
|
||||
if (centeredSlides) {
|
||||
const newSlidesGrid = [];
|
||||
for (let i = 0; i < snapGrid.length; i += 1) {
|
||||
let slidesGridItem = snapGrid[i];
|
||||
if (roundLengths) slidesGridItem = Math.floor(slidesGridItem);
|
||||
if (snapGrid[i] < swiper.virtualSize + snapGrid[0]) newSlidesGrid.push(slidesGridItem);
|
||||
}
|
||||
snapGrid.splice(0, snapGrid.length);
|
||||
snapGrid.push(...newSlidesGrid);
|
||||
}
|
||||
};
|
||||
const onInit = () => {
|
||||
wasMultiRow = swiper.params.grid && swiper.params.grid.rows > 1;
|
||||
};
|
||||
const onUpdate = () => {
|
||||
const {
|
||||
params,
|
||||
el
|
||||
} = swiper;
|
||||
const isMultiRow = params.grid && params.grid.rows > 1;
|
||||
if (wasMultiRow && !isMultiRow) {
|
||||
el.classList.remove(`${params.containerModifierClass}grid`, `${params.containerModifierClass}grid-column`);
|
||||
numFullColumns = 1;
|
||||
swiper.emitContainerClasses();
|
||||
} else if (!wasMultiRow && isMultiRow) {
|
||||
el.classList.add(`${params.containerModifierClass}grid`);
|
||||
if (params.grid.fill === 'column') {
|
||||
el.classList.add(`${params.containerModifierClass}grid-column`);
|
||||
}
|
||||
swiper.emitContainerClasses();
|
||||
}
|
||||
wasMultiRow = isMultiRow;
|
||||
};
|
||||
on('init', onInit);
|
||||
on('update', onUpdate);
|
||||
swiper.grid = {
|
||||
initSlides,
|
||||
unsetSlides,
|
||||
updateSlide,
|
||||
updateWrapperSize
|
||||
};
|
||||
}
|
||||
|
||||
export { Grid as default };
|
||||
+93
@@ -0,0 +1,93 @@
|
||||
import { g as getDocument, a as getWindow } from '../shared/ssr-window.esm.mjs';
|
||||
import { e as elementChildren } from '../shared/utils.mjs';
|
||||
|
||||
function HashNavigation(_ref) {
|
||||
let {
|
||||
swiper,
|
||||
extendParams,
|
||||
emit,
|
||||
on
|
||||
} = _ref;
|
||||
let initialized = false;
|
||||
const document = getDocument();
|
||||
const window = getWindow();
|
||||
extendParams({
|
||||
hashNavigation: {
|
||||
enabled: false,
|
||||
replaceState: false,
|
||||
watchState: false,
|
||||
getSlideIndex(_s, hash) {
|
||||
if (swiper.virtual && swiper.params.virtual.enabled) {
|
||||
const slideWithHash = swiper.slides.find(slideEl => slideEl.getAttribute('data-hash') === hash);
|
||||
if (!slideWithHash) return 0;
|
||||
const index = parseInt(slideWithHash.getAttribute('data-swiper-slide-index'), 10);
|
||||
return index;
|
||||
}
|
||||
return swiper.getSlideIndex(elementChildren(swiper.slidesEl, `.${swiper.params.slideClass}[data-hash="${hash}"], swiper-slide[data-hash="${hash}"]`)[0]);
|
||||
}
|
||||
}
|
||||
});
|
||||
const onHashChange = () => {
|
||||
emit('hashChange');
|
||||
const newHash = document.location.hash.replace('#', '');
|
||||
const activeSlideEl = swiper.virtual && swiper.params.virtual.enabled ? swiper.slidesEl.querySelector(`[data-swiper-slide-index="${swiper.activeIndex}"]`) : swiper.slides[swiper.activeIndex];
|
||||
const activeSlideHash = activeSlideEl ? activeSlideEl.getAttribute('data-hash') : '';
|
||||
if (newHash !== activeSlideHash) {
|
||||
const newIndex = swiper.params.hashNavigation.getSlideIndex(swiper, newHash);
|
||||
if (typeof newIndex === 'undefined' || Number.isNaN(newIndex)) return;
|
||||
swiper.slideTo(newIndex);
|
||||
}
|
||||
};
|
||||
const setHash = () => {
|
||||
if (!initialized || !swiper.params.hashNavigation.enabled) return;
|
||||
const activeSlideEl = swiper.virtual && swiper.params.virtual.enabled ? swiper.slidesEl.querySelector(`[data-swiper-slide-index="${swiper.activeIndex}"]`) : swiper.slides[swiper.activeIndex];
|
||||
const activeSlideHash = activeSlideEl ? activeSlideEl.getAttribute('data-hash') || activeSlideEl.getAttribute('data-history') : '';
|
||||
if (swiper.params.hashNavigation.replaceState && window.history && window.history.replaceState) {
|
||||
window.history.replaceState(null, null, `#${activeSlideHash}` || '');
|
||||
emit('hashSet');
|
||||
} else {
|
||||
document.location.hash = activeSlideHash || '';
|
||||
emit('hashSet');
|
||||
}
|
||||
};
|
||||
const init = () => {
|
||||
if (!swiper.params.hashNavigation.enabled || swiper.params.history && swiper.params.history.enabled) return;
|
||||
initialized = true;
|
||||
const hash = document.location.hash.replace('#', '');
|
||||
if (hash) {
|
||||
const speed = 0;
|
||||
const index = swiper.params.hashNavigation.getSlideIndex(swiper, hash);
|
||||
swiper.slideTo(index || 0, speed, swiper.params.runCallbacksOnInit, true);
|
||||
}
|
||||
if (swiper.params.hashNavigation.watchState) {
|
||||
window.addEventListener('hashchange', onHashChange);
|
||||
}
|
||||
};
|
||||
const destroy = () => {
|
||||
if (swiper.params.hashNavigation.watchState) {
|
||||
window.removeEventListener('hashchange', onHashChange);
|
||||
}
|
||||
};
|
||||
on('init', () => {
|
||||
if (swiper.params.hashNavigation.enabled) {
|
||||
init();
|
||||
}
|
||||
});
|
||||
on('destroy', () => {
|
||||
if (swiper.params.hashNavigation.enabled) {
|
||||
destroy();
|
||||
}
|
||||
});
|
||||
on('transitionEnd _freeModeNoMomentumRelease', () => {
|
||||
if (initialized) {
|
||||
setHash();
|
||||
}
|
||||
});
|
||||
on('slideChange', () => {
|
||||
if (initialized && swiper.params.cssMode) {
|
||||
setHash();
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
export { HashNavigation as default };
|
||||
+142
@@ -0,0 +1,142 @@
|
||||
import { a as getWindow } from '../shared/ssr-window.esm.mjs';
|
||||
|
||||
function History(_ref) {
|
||||
let {
|
||||
swiper,
|
||||
extendParams,
|
||||
on
|
||||
} = _ref;
|
||||
extendParams({
|
||||
history: {
|
||||
enabled: false,
|
||||
root: '',
|
||||
replaceState: false,
|
||||
key: 'slides',
|
||||
keepQuery: false
|
||||
}
|
||||
});
|
||||
let initialized = false;
|
||||
let paths = {};
|
||||
const slugify = text => {
|
||||
return text.toString().replace(/\s+/g, '-').replace(/[^\w-]+/g, '').replace(/--+/g, '-').replace(/^-+/, '').replace(/-+$/, '');
|
||||
};
|
||||
const getPathValues = urlOverride => {
|
||||
const window = getWindow();
|
||||
let location;
|
||||
if (urlOverride) {
|
||||
location = new URL(urlOverride);
|
||||
} else {
|
||||
location = window.location;
|
||||
}
|
||||
const pathArray = location.pathname.slice(1).split('/').filter(part => part !== '');
|
||||
const total = pathArray.length;
|
||||
const key = pathArray[total - 2];
|
||||
const value = pathArray[total - 1];
|
||||
return {
|
||||
key,
|
||||
value
|
||||
};
|
||||
};
|
||||
const setHistory = (key, index) => {
|
||||
const window = getWindow();
|
||||
if (!initialized || !swiper.params.history.enabled) return;
|
||||
let location;
|
||||
if (swiper.params.url) {
|
||||
location = new URL(swiper.params.url);
|
||||
} else {
|
||||
location = window.location;
|
||||
}
|
||||
const slide = swiper.virtual && swiper.params.virtual.enabled ? swiper.slidesEl.querySelector(`[data-swiper-slide-index="${index}"]`) : swiper.slides[index];
|
||||
let value = slugify(slide.getAttribute('data-history'));
|
||||
if (swiper.params.history.root.length > 0) {
|
||||
let root = swiper.params.history.root;
|
||||
if (root[root.length - 1] === '/') root = root.slice(0, root.length - 1);
|
||||
value = `${root}/${key ? `${key}/` : ''}${value}`;
|
||||
} else if (!location.pathname.includes(key)) {
|
||||
value = `${key ? `${key}/` : ''}${value}`;
|
||||
}
|
||||
if (swiper.params.history.keepQuery) {
|
||||
value += location.search;
|
||||
}
|
||||
const currentState = window.history.state;
|
||||
if (currentState && currentState.value === value) {
|
||||
return;
|
||||
}
|
||||
if (swiper.params.history.replaceState) {
|
||||
window.history.replaceState({
|
||||
value
|
||||
}, null, value);
|
||||
} else {
|
||||
window.history.pushState({
|
||||
value
|
||||
}, null, value);
|
||||
}
|
||||
};
|
||||
const scrollToSlide = (speed, value, runCallbacks) => {
|
||||
if (value) {
|
||||
for (let i = 0, length = swiper.slides.length; i < length; i += 1) {
|
||||
const slide = swiper.slides[i];
|
||||
const slideHistory = slugify(slide.getAttribute('data-history'));
|
||||
if (slideHistory === value) {
|
||||
const index = swiper.getSlideIndex(slide);
|
||||
swiper.slideTo(index, speed, runCallbacks);
|
||||
}
|
||||
}
|
||||
} else {
|
||||
swiper.slideTo(0, speed, runCallbacks);
|
||||
}
|
||||
};
|
||||
const setHistoryPopState = () => {
|
||||
paths = getPathValues(swiper.params.url);
|
||||
scrollToSlide(swiper.params.speed, paths.value, false);
|
||||
};
|
||||
const init = () => {
|
||||
const window = getWindow();
|
||||
if (!swiper.params.history) return;
|
||||
if (!window.history || !window.history.pushState) {
|
||||
swiper.params.history.enabled = false;
|
||||
swiper.params.hashNavigation.enabled = true;
|
||||
return;
|
||||
}
|
||||
initialized = true;
|
||||
paths = getPathValues(swiper.params.url);
|
||||
if (!paths.key && !paths.value) {
|
||||
if (!swiper.params.history.replaceState) {
|
||||
window.addEventListener('popstate', setHistoryPopState);
|
||||
}
|
||||
return;
|
||||
}
|
||||
scrollToSlide(0, paths.value, swiper.params.runCallbacksOnInit);
|
||||
if (!swiper.params.history.replaceState) {
|
||||
window.addEventListener('popstate', setHistoryPopState);
|
||||
}
|
||||
};
|
||||
const destroy = () => {
|
||||
const window = getWindow();
|
||||
if (!swiper.params.history.replaceState) {
|
||||
window.removeEventListener('popstate', setHistoryPopState);
|
||||
}
|
||||
};
|
||||
on('init', () => {
|
||||
if (swiper.params.history.enabled) {
|
||||
init();
|
||||
}
|
||||
});
|
||||
on('destroy', () => {
|
||||
if (swiper.params.history.enabled) {
|
||||
destroy();
|
||||
}
|
||||
});
|
||||
on('transitionEnd _freeModeNoMomentumRelease', () => {
|
||||
if (initialized) {
|
||||
setHistory(swiper.params.history.key, swiper.activeIndex);
|
||||
}
|
||||
});
|
||||
on('slideChange', () => {
|
||||
if (initialized && swiper.params.cssMode) {
|
||||
setHistory(swiper.params.history.key, swiper.activeIndex);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
export { History as default };
|
||||
+23
@@ -0,0 +1,23 @@
|
||||
export {default as Virtual} from './virtual.mjs';
|
||||
export {default as Keyboard} from './keyboard.mjs';
|
||||
export {default as Mousewheel} from './mousewheel.mjs';
|
||||
export {default as Navigation} from './navigation.mjs';
|
||||
export {default as Pagination} from './pagination.mjs';
|
||||
export {default as Scrollbar} from './scrollbar.mjs';
|
||||
export {default as Parallax} from './parallax.mjs';
|
||||
export {default as Zoom} from './zoom.mjs';
|
||||
export {default as Controller} from './controller.mjs';
|
||||
export {default as A11y} from './a11y.mjs';
|
||||
export {default as History} from './history.mjs';
|
||||
export {default as HashNavigation} from './hash-navigation.mjs';
|
||||
export {default as Autoplay} from './autoplay.mjs';
|
||||
export {default as Thumbs} from './thumbs.mjs';
|
||||
export {default as FreeMode} from './free-mode.mjs';
|
||||
export {default as Grid} from './grid.mjs';
|
||||
export {default as Manipulation} from './manipulation.mjs';
|
||||
export {default as EffectFade} from './effect-fade.mjs';
|
||||
export {default as EffectCube} from './effect-cube.mjs';
|
||||
export {default as EffectFlip} from './effect-flip.mjs';
|
||||
export {default as EffectCoverflow} from './effect-coverflow.mjs';
|
||||
export {default as EffectCreative} from './effect-creative.mjs';
|
||||
export {default as EffectCards} from './effect-cards.mjs';
|
||||
+117
@@ -0,0 +1,117 @@
|
||||
import { g as getDocument, a as getWindow } from '../shared/ssr-window.esm.mjs';
|
||||
import { b as elementParents, d as elementOffset } from '../shared/utils.mjs';
|
||||
|
||||
/* eslint-disable consistent-return */
|
||||
function Keyboard(_ref) {
|
||||
let {
|
||||
swiper,
|
||||
extendParams,
|
||||
on,
|
||||
emit
|
||||
} = _ref;
|
||||
const document = getDocument();
|
||||
const window = getWindow();
|
||||
swiper.keyboard = {
|
||||
enabled: false
|
||||
};
|
||||
extendParams({
|
||||
keyboard: {
|
||||
enabled: false,
|
||||
onlyInViewport: true,
|
||||
pageUpDown: true
|
||||
}
|
||||
});
|
||||
function handle(event) {
|
||||
if (!swiper.enabled) return;
|
||||
const {
|
||||
rtlTranslate: rtl
|
||||
} = swiper;
|
||||
let e = event;
|
||||
if (e.originalEvent) e = e.originalEvent; // jquery fix
|
||||
const kc = e.keyCode || e.charCode;
|
||||
const pageUpDown = swiper.params.keyboard.pageUpDown;
|
||||
const isPageUp = pageUpDown && kc === 33;
|
||||
const isPageDown = pageUpDown && kc === 34;
|
||||
const isArrowLeft = kc === 37;
|
||||
const isArrowRight = kc === 39;
|
||||
const isArrowUp = kc === 38;
|
||||
const isArrowDown = kc === 40;
|
||||
// Directions locks
|
||||
if (!swiper.allowSlideNext && (swiper.isHorizontal() && isArrowRight || swiper.isVertical() && isArrowDown || isPageDown)) {
|
||||
return false;
|
||||
}
|
||||
if (!swiper.allowSlidePrev && (swiper.isHorizontal() && isArrowLeft || swiper.isVertical() && isArrowUp || isPageUp)) {
|
||||
return false;
|
||||
}
|
||||
if (e.shiftKey || e.altKey || e.ctrlKey || e.metaKey) {
|
||||
return undefined;
|
||||
}
|
||||
if (document.activeElement && document.activeElement.nodeName && (document.activeElement.nodeName.toLowerCase() === 'input' || document.activeElement.nodeName.toLowerCase() === 'textarea')) {
|
||||
return undefined;
|
||||
}
|
||||
if (swiper.params.keyboard.onlyInViewport && (isPageUp || isPageDown || isArrowLeft || isArrowRight || isArrowUp || isArrowDown)) {
|
||||
let inView = false;
|
||||
// Check that swiper should be inside of visible area of window
|
||||
if (elementParents(swiper.el, `.${swiper.params.slideClass}, swiper-slide`).length > 0 && elementParents(swiper.el, `.${swiper.params.slideActiveClass}`).length === 0) {
|
||||
return undefined;
|
||||
}
|
||||
const el = swiper.el;
|
||||
const swiperWidth = el.clientWidth;
|
||||
const swiperHeight = el.clientHeight;
|
||||
const windowWidth = window.innerWidth;
|
||||
const windowHeight = window.innerHeight;
|
||||
const swiperOffset = elementOffset(el);
|
||||
if (rtl) swiperOffset.left -= el.scrollLeft;
|
||||
const swiperCoord = [[swiperOffset.left, swiperOffset.top], [swiperOffset.left + swiperWidth, swiperOffset.top], [swiperOffset.left, swiperOffset.top + swiperHeight], [swiperOffset.left + swiperWidth, swiperOffset.top + swiperHeight]];
|
||||
for (let i = 0; i < swiperCoord.length; i += 1) {
|
||||
const point = swiperCoord[i];
|
||||
if (point[0] >= 0 && point[0] <= windowWidth && point[1] >= 0 && point[1] <= windowHeight) {
|
||||
if (point[0] === 0 && point[1] === 0) continue; // eslint-disable-line
|
||||
inView = true;
|
||||
}
|
||||
}
|
||||
if (!inView) return undefined;
|
||||
}
|
||||
if (swiper.isHorizontal()) {
|
||||
if (isPageUp || isPageDown || isArrowLeft || isArrowRight) {
|
||||
if (e.preventDefault) e.preventDefault();else e.returnValue = false;
|
||||
}
|
||||
if ((isPageDown || isArrowRight) && !rtl || (isPageUp || isArrowLeft) && rtl) swiper.slideNext();
|
||||
if ((isPageUp || isArrowLeft) && !rtl || (isPageDown || isArrowRight) && rtl) swiper.slidePrev();
|
||||
} else {
|
||||
if (isPageUp || isPageDown || isArrowUp || isArrowDown) {
|
||||
if (e.preventDefault) e.preventDefault();else e.returnValue = false;
|
||||
}
|
||||
if (isPageDown || isArrowDown) swiper.slideNext();
|
||||
if (isPageUp || isArrowUp) swiper.slidePrev();
|
||||
}
|
||||
emit('keyPress', kc);
|
||||
return undefined;
|
||||
}
|
||||
function enable() {
|
||||
if (swiper.keyboard.enabled) return;
|
||||
document.addEventListener('keydown', handle);
|
||||
swiper.keyboard.enabled = true;
|
||||
}
|
||||
function disable() {
|
||||
if (!swiper.keyboard.enabled) return;
|
||||
document.removeEventListener('keydown', handle);
|
||||
swiper.keyboard.enabled = false;
|
||||
}
|
||||
on('init', () => {
|
||||
if (swiper.params.keyboard.enabled) {
|
||||
enable();
|
||||
}
|
||||
});
|
||||
on('destroy', () => {
|
||||
if (swiper.keyboard.enabled) {
|
||||
disable();
|
||||
}
|
||||
});
|
||||
Object.assign(swiper.keyboard, {
|
||||
enable,
|
||||
disable
|
||||
});
|
||||
}
|
||||
|
||||
export { Keyboard as default };
|
||||
+193
@@ -0,0 +1,193 @@
|
||||
import { s as setInnerHTML } from '../shared/utils.mjs';
|
||||
|
||||
function appendSlide(slides) {
|
||||
const swiper = this;
|
||||
const {
|
||||
params,
|
||||
slidesEl
|
||||
} = swiper;
|
||||
if (params.loop) {
|
||||
swiper.loopDestroy();
|
||||
}
|
||||
const appendElement = slideEl => {
|
||||
if (typeof slideEl === 'string') {
|
||||
const tempDOM = document.createElement('div');
|
||||
setInnerHTML(tempDOM, slideEl);
|
||||
slidesEl.append(tempDOM.children[0]);
|
||||
setInnerHTML(tempDOM, '');
|
||||
} else {
|
||||
slidesEl.append(slideEl);
|
||||
}
|
||||
};
|
||||
if (typeof slides === 'object' && 'length' in slides) {
|
||||
for (let i = 0; i < slides.length; i += 1) {
|
||||
if (slides[i]) appendElement(slides[i]);
|
||||
}
|
||||
} else {
|
||||
appendElement(slides);
|
||||
}
|
||||
swiper.recalcSlides();
|
||||
if (params.loop) {
|
||||
swiper.loopCreate();
|
||||
}
|
||||
if (!params.observer || swiper.isElement) {
|
||||
swiper.update();
|
||||
}
|
||||
}
|
||||
|
||||
function prependSlide(slides) {
|
||||
const swiper = this;
|
||||
const {
|
||||
params,
|
||||
activeIndex,
|
||||
slidesEl
|
||||
} = swiper;
|
||||
if (params.loop) {
|
||||
swiper.loopDestroy();
|
||||
}
|
||||
let newActiveIndex = activeIndex + 1;
|
||||
const prependElement = slideEl => {
|
||||
if (typeof slideEl === 'string') {
|
||||
const tempDOM = document.createElement('div');
|
||||
setInnerHTML(tempDOM, slideEl);
|
||||
slidesEl.prepend(tempDOM.children[0]);
|
||||
setInnerHTML(tempDOM, '');
|
||||
} else {
|
||||
slidesEl.prepend(slideEl);
|
||||
}
|
||||
};
|
||||
if (typeof slides === 'object' && 'length' in slides) {
|
||||
for (let i = 0; i < slides.length; i += 1) {
|
||||
if (slides[i]) prependElement(slides[i]);
|
||||
}
|
||||
newActiveIndex = activeIndex + slides.length;
|
||||
} else {
|
||||
prependElement(slides);
|
||||
}
|
||||
swiper.recalcSlides();
|
||||
if (params.loop) {
|
||||
swiper.loopCreate();
|
||||
}
|
||||
if (!params.observer || swiper.isElement) {
|
||||
swiper.update();
|
||||
}
|
||||
swiper.slideTo(newActiveIndex, 0, false);
|
||||
}
|
||||
|
||||
function addSlide(index, slides) {
|
||||
const swiper = this;
|
||||
const {
|
||||
params,
|
||||
activeIndex,
|
||||
slidesEl
|
||||
} = swiper;
|
||||
let activeIndexBuffer = activeIndex;
|
||||
if (params.loop) {
|
||||
activeIndexBuffer -= swiper.loopedSlides;
|
||||
swiper.loopDestroy();
|
||||
swiper.recalcSlides();
|
||||
}
|
||||
const baseLength = swiper.slides.length;
|
||||
if (index <= 0) {
|
||||
swiper.prependSlide(slides);
|
||||
return;
|
||||
}
|
||||
if (index >= baseLength) {
|
||||
swiper.appendSlide(slides);
|
||||
return;
|
||||
}
|
||||
let newActiveIndex = activeIndexBuffer > index ? activeIndexBuffer + 1 : activeIndexBuffer;
|
||||
const slidesBuffer = [];
|
||||
for (let i = baseLength - 1; i >= index; i -= 1) {
|
||||
const currentSlide = swiper.slides[i];
|
||||
currentSlide.remove();
|
||||
slidesBuffer.unshift(currentSlide);
|
||||
}
|
||||
if (typeof slides === 'object' && 'length' in slides) {
|
||||
for (let i = 0; i < slides.length; i += 1) {
|
||||
if (slides[i]) slidesEl.append(slides[i]);
|
||||
}
|
||||
newActiveIndex = activeIndexBuffer > index ? activeIndexBuffer + slides.length : activeIndexBuffer;
|
||||
} else {
|
||||
slidesEl.append(slides);
|
||||
}
|
||||
for (let i = 0; i < slidesBuffer.length; i += 1) {
|
||||
slidesEl.append(slidesBuffer[i]);
|
||||
}
|
||||
swiper.recalcSlides();
|
||||
if (params.loop) {
|
||||
swiper.loopCreate();
|
||||
}
|
||||
if (!params.observer || swiper.isElement) {
|
||||
swiper.update();
|
||||
}
|
||||
if (params.loop) {
|
||||
swiper.slideTo(newActiveIndex + swiper.loopedSlides, 0, false);
|
||||
} else {
|
||||
swiper.slideTo(newActiveIndex, 0, false);
|
||||
}
|
||||
}
|
||||
|
||||
function removeSlide(slidesIndexes) {
|
||||
const swiper = this;
|
||||
const {
|
||||
params,
|
||||
activeIndex
|
||||
} = swiper;
|
||||
let activeIndexBuffer = activeIndex;
|
||||
if (params.loop) {
|
||||
activeIndexBuffer -= swiper.loopedSlides;
|
||||
swiper.loopDestroy();
|
||||
}
|
||||
let newActiveIndex = activeIndexBuffer;
|
||||
let indexToRemove;
|
||||
if (typeof slidesIndexes === 'object' && 'length' in slidesIndexes) {
|
||||
for (let i = 0; i < slidesIndexes.length; i += 1) {
|
||||
indexToRemove = slidesIndexes[i];
|
||||
if (swiper.slides[indexToRemove]) swiper.slides[indexToRemove].remove();
|
||||
if (indexToRemove < newActiveIndex) newActiveIndex -= 1;
|
||||
}
|
||||
newActiveIndex = Math.max(newActiveIndex, 0);
|
||||
} else {
|
||||
indexToRemove = slidesIndexes;
|
||||
if (swiper.slides[indexToRemove]) swiper.slides[indexToRemove].remove();
|
||||
if (indexToRemove < newActiveIndex) newActiveIndex -= 1;
|
||||
newActiveIndex = Math.max(newActiveIndex, 0);
|
||||
}
|
||||
swiper.recalcSlides();
|
||||
if (params.loop) {
|
||||
swiper.loopCreate();
|
||||
}
|
||||
if (!params.observer || swiper.isElement) {
|
||||
swiper.update();
|
||||
}
|
||||
if (params.loop) {
|
||||
swiper.slideTo(newActiveIndex + swiper.loopedSlides, 0, false);
|
||||
} else {
|
||||
swiper.slideTo(newActiveIndex, 0, false);
|
||||
}
|
||||
}
|
||||
|
||||
function removeAllSlides() {
|
||||
const swiper = this;
|
||||
const slidesIndexes = [];
|
||||
for (let i = 0; i < swiper.slides.length; i += 1) {
|
||||
slidesIndexes.push(i);
|
||||
}
|
||||
swiper.removeSlide(slidesIndexes);
|
||||
}
|
||||
|
||||
function Manipulation(_ref) {
|
||||
let {
|
||||
swiper
|
||||
} = _ref;
|
||||
Object.assign(swiper, {
|
||||
appendSlide: appendSlide.bind(swiper),
|
||||
prependSlide: prependSlide.bind(swiper),
|
||||
addSlide: addSlide.bind(swiper),
|
||||
removeSlide: removeSlide.bind(swiper),
|
||||
removeAllSlides: removeAllSlides.bind(swiper)
|
||||
});
|
||||
}
|
||||
|
||||
export { Manipulation as default };
|
||||
+395
@@ -0,0 +1,395 @@
|
||||
import { a as getWindow } from '../shared/ssr-window.esm.mjs';
|
||||
import { n as nextTick, f as now } from '../shared/utils.mjs';
|
||||
|
||||
/* eslint-disable consistent-return */
|
||||
function Mousewheel(_ref) {
|
||||
let {
|
||||
swiper,
|
||||
extendParams,
|
||||
on,
|
||||
emit
|
||||
} = _ref;
|
||||
const window = getWindow();
|
||||
extendParams({
|
||||
mousewheel: {
|
||||
enabled: false,
|
||||
releaseOnEdges: false,
|
||||
invert: false,
|
||||
forceToAxis: false,
|
||||
sensitivity: 1,
|
||||
eventsTarget: 'container',
|
||||
thresholdDelta: null,
|
||||
thresholdTime: null,
|
||||
noMousewheelClass: 'swiper-no-mousewheel'
|
||||
}
|
||||
});
|
||||
swiper.mousewheel = {
|
||||
enabled: false
|
||||
};
|
||||
let timeout;
|
||||
let lastScrollTime = now();
|
||||
let lastEventBeforeSnap;
|
||||
const recentWheelEvents = [];
|
||||
function normalize(e) {
|
||||
// Reasonable defaults
|
||||
const PIXEL_STEP = 10;
|
||||
const LINE_HEIGHT = 40;
|
||||
const PAGE_HEIGHT = 800;
|
||||
let sX = 0;
|
||||
let sY = 0; // spinX, spinY
|
||||
let pX = 0;
|
||||
let pY = 0; // pixelX, pixelY
|
||||
|
||||
// Legacy
|
||||
if ('detail' in e) {
|
||||
sY = e.detail;
|
||||
}
|
||||
if ('wheelDelta' in e) {
|
||||
sY = -e.wheelDelta / 120;
|
||||
}
|
||||
if ('wheelDeltaY' in e) {
|
||||
sY = -e.wheelDeltaY / 120;
|
||||
}
|
||||
if ('wheelDeltaX' in e) {
|
||||
sX = -e.wheelDeltaX / 120;
|
||||
}
|
||||
|
||||
// side scrolling on FF with DOMMouseScroll
|
||||
if ('axis' in e && e.axis === e.HORIZONTAL_AXIS) {
|
||||
sX = sY;
|
||||
sY = 0;
|
||||
}
|
||||
pX = sX * PIXEL_STEP;
|
||||
pY = sY * PIXEL_STEP;
|
||||
if ('deltaY' in e) {
|
||||
pY = e.deltaY;
|
||||
}
|
||||
if ('deltaX' in e) {
|
||||
pX = e.deltaX;
|
||||
}
|
||||
if (e.shiftKey && !pX) {
|
||||
// if user scrolls with shift he wants horizontal scroll
|
||||
pX = pY;
|
||||
pY = 0;
|
||||
}
|
||||
if ((pX || pY) && e.deltaMode) {
|
||||
if (e.deltaMode === 1) {
|
||||
// delta in LINE units
|
||||
pX *= LINE_HEIGHT;
|
||||
pY *= LINE_HEIGHT;
|
||||
} else {
|
||||
// delta in PAGE units
|
||||
pX *= PAGE_HEIGHT;
|
||||
pY *= PAGE_HEIGHT;
|
||||
}
|
||||
}
|
||||
|
||||
// Fall-back if spin cannot be determined
|
||||
if (pX && !sX) {
|
||||
sX = pX < 1 ? -1 : 1;
|
||||
}
|
||||
if (pY && !sY) {
|
||||
sY = pY < 1 ? -1 : 1;
|
||||
}
|
||||
return {
|
||||
spinX: sX,
|
||||
spinY: sY,
|
||||
pixelX: pX,
|
||||
pixelY: pY
|
||||
};
|
||||
}
|
||||
function handleMouseEnter() {
|
||||
if (!swiper.enabled) return;
|
||||
swiper.mouseEntered = true;
|
||||
}
|
||||
function handleMouseLeave() {
|
||||
if (!swiper.enabled) return;
|
||||
swiper.mouseEntered = false;
|
||||
}
|
||||
function animateSlider(newEvent) {
|
||||
if (swiper.params.mousewheel.thresholdDelta && newEvent.delta < swiper.params.mousewheel.thresholdDelta) {
|
||||
// Prevent if delta of wheel scroll delta is below configured threshold
|
||||
return false;
|
||||
}
|
||||
if (swiper.params.mousewheel.thresholdTime && now() - lastScrollTime < swiper.params.mousewheel.thresholdTime) {
|
||||
// Prevent if time between scrolls is below configured threshold
|
||||
return false;
|
||||
}
|
||||
|
||||
// If the movement is NOT big enough and
|
||||
// if the last time the user scrolled was too close to the current one (avoid continuously triggering the slider):
|
||||
// Don't go any further (avoid insignificant scroll movement).
|
||||
if (newEvent.delta >= 6 && now() - lastScrollTime < 60) {
|
||||
// Return false as a default
|
||||
return true;
|
||||
}
|
||||
// If user is scrolling towards the end:
|
||||
// If the slider hasn't hit the latest slide or
|
||||
// if the slider is a loop and
|
||||
// if the slider isn't moving right now:
|
||||
// Go to next slide and
|
||||
// emit a scroll event.
|
||||
// Else (the user is scrolling towards the beginning) and
|
||||
// if the slider hasn't hit the first slide or
|
||||
// if the slider is a loop and
|
||||
// if the slider isn't moving right now:
|
||||
// Go to prev slide and
|
||||
// emit a scroll event.
|
||||
if (newEvent.direction < 0) {
|
||||
if ((!swiper.isEnd || swiper.params.loop) && !swiper.animating) {
|
||||
swiper.slideNext();
|
||||
emit('scroll', newEvent.raw);
|
||||
}
|
||||
} else if ((!swiper.isBeginning || swiper.params.loop) && !swiper.animating) {
|
||||
swiper.slidePrev();
|
||||
emit('scroll', newEvent.raw);
|
||||
}
|
||||
// If you got here is because an animation has been triggered so store the current time
|
||||
lastScrollTime = new window.Date().getTime();
|
||||
// Return false as a default
|
||||
return false;
|
||||
}
|
||||
function releaseScroll(newEvent) {
|
||||
const params = swiper.params.mousewheel;
|
||||
if (newEvent.direction < 0) {
|
||||
if (swiper.isEnd && !swiper.params.loop && params.releaseOnEdges) {
|
||||
// Return true to animate scroll on edges
|
||||
return true;
|
||||
}
|
||||
} else if (swiper.isBeginning && !swiper.params.loop && params.releaseOnEdges) {
|
||||
// Return true to animate scroll on edges
|
||||
return true;
|
||||
}
|
||||
return false;
|
||||
}
|
||||
function handle(event) {
|
||||
let e = event;
|
||||
let disableParentSwiper = true;
|
||||
if (!swiper.enabled) return;
|
||||
|
||||
// Ignore event if the target or its parents have the swiper-no-mousewheel class
|
||||
if (event.target.closest(`.${swiper.params.mousewheel.noMousewheelClass}`)) return;
|
||||
const params = swiper.params.mousewheel;
|
||||
if (swiper.params.cssMode) {
|
||||
e.preventDefault();
|
||||
}
|
||||
let targetEl = swiper.el;
|
||||
if (swiper.params.mousewheel.eventsTarget !== 'container') {
|
||||
targetEl = document.querySelector(swiper.params.mousewheel.eventsTarget);
|
||||
}
|
||||
const targetElContainsTarget = targetEl && targetEl.contains(e.target);
|
||||
if (!swiper.mouseEntered && !targetElContainsTarget && !params.releaseOnEdges) return true;
|
||||
if (e.originalEvent) e = e.originalEvent; // jquery fix
|
||||
let delta = 0;
|
||||
const rtlFactor = swiper.rtlTranslate ? -1 : 1;
|
||||
const data = normalize(e);
|
||||
if (params.forceToAxis) {
|
||||
if (swiper.isHorizontal()) {
|
||||
if (Math.abs(data.pixelX) > Math.abs(data.pixelY)) delta = -data.pixelX * rtlFactor;else return true;
|
||||
} else if (Math.abs(data.pixelY) > Math.abs(data.pixelX)) delta = -data.pixelY;else return true;
|
||||
} else {
|
||||
delta = Math.abs(data.pixelX) > Math.abs(data.pixelY) ? -data.pixelX * rtlFactor : -data.pixelY;
|
||||
}
|
||||
if (delta === 0) return true;
|
||||
if (params.invert) delta = -delta;
|
||||
|
||||
// Get the scroll positions
|
||||
let positions = swiper.getTranslate() + delta * params.sensitivity;
|
||||
if (positions >= swiper.minTranslate()) positions = swiper.minTranslate();
|
||||
if (positions <= swiper.maxTranslate()) positions = swiper.maxTranslate();
|
||||
|
||||
// When loop is true:
|
||||
// the disableParentSwiper will be true.
|
||||
// When loop is false:
|
||||
// if the scroll positions is not on edge,
|
||||
// then the disableParentSwiper will be true.
|
||||
// if the scroll on edge positions,
|
||||
// then the disableParentSwiper will be false.
|
||||
disableParentSwiper = swiper.params.loop ? true : !(positions === swiper.minTranslate() || positions === swiper.maxTranslate());
|
||||
if (disableParentSwiper && swiper.params.nested) e.stopPropagation();
|
||||
if (!swiper.params.freeMode || !swiper.params.freeMode.enabled) {
|
||||
// Register the new event in a variable which stores the relevant data
|
||||
const newEvent = {
|
||||
time: now(),
|
||||
delta: Math.abs(delta),
|
||||
direction: Math.sign(delta),
|
||||
raw: event
|
||||
};
|
||||
|
||||
// Keep the most recent events
|
||||
if (recentWheelEvents.length >= 2) {
|
||||
recentWheelEvents.shift(); // only store the last N events
|
||||
}
|
||||
|
||||
const prevEvent = recentWheelEvents.length ? recentWheelEvents[recentWheelEvents.length - 1] : undefined;
|
||||
recentWheelEvents.push(newEvent);
|
||||
|
||||
// If there is at least one previous recorded event:
|
||||
// If direction has changed or
|
||||
// if the scroll is quicker than the previous one:
|
||||
// Animate the slider.
|
||||
// Else (this is the first time the wheel is moved):
|
||||
// Animate the slider.
|
||||
if (prevEvent) {
|
||||
if (newEvent.direction !== prevEvent.direction || newEvent.delta > prevEvent.delta || newEvent.time > prevEvent.time + 150) {
|
||||
animateSlider(newEvent);
|
||||
}
|
||||
} else {
|
||||
animateSlider(newEvent);
|
||||
}
|
||||
|
||||
// If it's time to release the scroll:
|
||||
// Return now so you don't hit the preventDefault.
|
||||
if (releaseScroll(newEvent)) {
|
||||
return true;
|
||||
}
|
||||
} else {
|
||||
// Freemode or scrollContainer:
|
||||
|
||||
// If we recently snapped after a momentum scroll, then ignore wheel events
|
||||
// to give time for the deceleration to finish. Stop ignoring after 500 msecs
|
||||
// or if it's a new scroll (larger delta or inverse sign as last event before
|
||||
// an end-of-momentum snap).
|
||||
const newEvent = {
|
||||
time: now(),
|
||||
delta: Math.abs(delta),
|
||||
direction: Math.sign(delta)
|
||||
};
|
||||
const ignoreWheelEvents = lastEventBeforeSnap && newEvent.time < lastEventBeforeSnap.time + 500 && newEvent.delta <= lastEventBeforeSnap.delta && newEvent.direction === lastEventBeforeSnap.direction;
|
||||
if (!ignoreWheelEvents) {
|
||||
lastEventBeforeSnap = undefined;
|
||||
let position = swiper.getTranslate() + delta * params.sensitivity;
|
||||
const wasBeginning = swiper.isBeginning;
|
||||
const wasEnd = swiper.isEnd;
|
||||
if (position >= swiper.minTranslate()) position = swiper.minTranslate();
|
||||
if (position <= swiper.maxTranslate()) position = swiper.maxTranslate();
|
||||
swiper.setTransition(0);
|
||||
swiper.setTranslate(position);
|
||||
swiper.updateProgress();
|
||||
swiper.updateActiveIndex();
|
||||
swiper.updateSlidesClasses();
|
||||
if (!wasBeginning && swiper.isBeginning || !wasEnd && swiper.isEnd) {
|
||||
swiper.updateSlidesClasses();
|
||||
}
|
||||
if (swiper.params.loop) {
|
||||
swiper.loopFix({
|
||||
direction: newEvent.direction < 0 ? 'next' : 'prev',
|
||||
byMousewheel: true
|
||||
});
|
||||
}
|
||||
if (swiper.params.freeMode.sticky) {
|
||||
// When wheel scrolling starts with sticky (aka snap) enabled, then detect
|
||||
// the end of a momentum scroll by storing recent (N=15?) wheel events.
|
||||
// 1. do all N events have decreasing or same (absolute value) delta?
|
||||
// 2. did all N events arrive in the last M (M=500?) msecs?
|
||||
// 3. does the earliest event have an (absolute value) delta that's
|
||||
// at least P (P=1?) larger than the most recent event's delta?
|
||||
// 4. does the latest event have a delta that's smaller than Q (Q=6?) pixels?
|
||||
// If 1-4 are "yes" then we're near the end of a momentum scroll deceleration.
|
||||
// Snap immediately and ignore remaining wheel events in this scroll.
|
||||
// See comment above for "remaining wheel events in this scroll" determination.
|
||||
// If 1-4 aren't satisfied, then wait to snap until 500ms after the last event.
|
||||
clearTimeout(timeout);
|
||||
timeout = undefined;
|
||||
if (recentWheelEvents.length >= 15) {
|
||||
recentWheelEvents.shift(); // only store the last N events
|
||||
}
|
||||
|
||||
const prevEvent = recentWheelEvents.length ? recentWheelEvents[recentWheelEvents.length - 1] : undefined;
|
||||
const firstEvent = recentWheelEvents[0];
|
||||
recentWheelEvents.push(newEvent);
|
||||
if (prevEvent && (newEvent.delta > prevEvent.delta || newEvent.direction !== prevEvent.direction)) {
|
||||
// Increasing or reverse-sign delta means the user started scrolling again. Clear the wheel event log.
|
||||
recentWheelEvents.splice(0);
|
||||
} else if (recentWheelEvents.length >= 15 && newEvent.time - firstEvent.time < 500 && firstEvent.delta - newEvent.delta >= 1 && newEvent.delta <= 6) {
|
||||
// We're at the end of the deceleration of a momentum scroll, so there's no need
|
||||
// to wait for more events. Snap ASAP on the next tick.
|
||||
// Also, because there's some remaining momentum we'll bias the snap in the
|
||||
// direction of the ongoing scroll because it's better UX for the scroll to snap
|
||||
// in the same direction as the scroll instead of reversing to snap. Therefore,
|
||||
// if it's already scrolled more than 20% in the current direction, keep going.
|
||||
const snapToThreshold = delta > 0 ? 0.8 : 0.2;
|
||||
lastEventBeforeSnap = newEvent;
|
||||
recentWheelEvents.splice(0);
|
||||
timeout = nextTick(() => {
|
||||
if (swiper.destroyed || !swiper.params) return;
|
||||
swiper.slideToClosest(swiper.params.speed, true, undefined, snapToThreshold);
|
||||
}, 0); // no delay; move on next tick
|
||||
}
|
||||
|
||||
if (!timeout) {
|
||||
// if we get here, then we haven't detected the end of a momentum scroll, so
|
||||
// we'll consider a scroll "complete" when there haven't been any wheel events
|
||||
// for 500ms.
|
||||
timeout = nextTick(() => {
|
||||
if (swiper.destroyed || !swiper.params) return;
|
||||
const snapToThreshold = 0.5;
|
||||
lastEventBeforeSnap = newEvent;
|
||||
recentWheelEvents.splice(0);
|
||||
swiper.slideToClosest(swiper.params.speed, true, undefined, snapToThreshold);
|
||||
}, 500);
|
||||
}
|
||||
}
|
||||
|
||||
// Emit event
|
||||
if (!ignoreWheelEvents) emit('scroll', e);
|
||||
|
||||
// Stop autoplay
|
||||
if (swiper.params.autoplay && swiper.params.autoplay.disableOnInteraction) swiper.autoplay.stop();
|
||||
// Return page scroll on edge positions
|
||||
if (params.releaseOnEdges && (position === swiper.minTranslate() || position === swiper.maxTranslate())) {
|
||||
return true;
|
||||
}
|
||||
}
|
||||
}
|
||||
if (e.preventDefault) e.preventDefault();else e.returnValue = false;
|
||||
return false;
|
||||
}
|
||||
function events(method) {
|
||||
let targetEl = swiper.el;
|
||||
if (swiper.params.mousewheel.eventsTarget !== 'container') {
|
||||
targetEl = document.querySelector(swiper.params.mousewheel.eventsTarget);
|
||||
}
|
||||
targetEl[method]('mouseenter', handleMouseEnter);
|
||||
targetEl[method]('mouseleave', handleMouseLeave);
|
||||
targetEl[method]('wheel', handle);
|
||||
}
|
||||
function enable() {
|
||||
if (swiper.params.cssMode) {
|
||||
swiper.wrapperEl.removeEventListener('wheel', handle);
|
||||
return true;
|
||||
}
|
||||
if (swiper.mousewheel.enabled) return false;
|
||||
events('addEventListener');
|
||||
swiper.mousewheel.enabled = true;
|
||||
return true;
|
||||
}
|
||||
function disable() {
|
||||
if (swiper.params.cssMode) {
|
||||
swiper.wrapperEl.addEventListener(event, handle);
|
||||
return true;
|
||||
}
|
||||
if (!swiper.mousewheel.enabled) return false;
|
||||
events('removeEventListener');
|
||||
swiper.mousewheel.enabled = false;
|
||||
return true;
|
||||
}
|
||||
on('init', () => {
|
||||
if (!swiper.params.mousewheel.enabled && swiper.params.cssMode) {
|
||||
disable();
|
||||
}
|
||||
if (swiper.params.mousewheel.enabled) enable();
|
||||
});
|
||||
on('destroy', () => {
|
||||
if (swiper.params.cssMode) {
|
||||
enable();
|
||||
}
|
||||
if (swiper.mousewheel.enabled) disable();
|
||||
});
|
||||
Object.assign(swiper.mousewheel, {
|
||||
enable,
|
||||
disable
|
||||
});
|
||||
}
|
||||
|
||||
export { Mousewheel as default };
|
||||
+200
@@ -0,0 +1,200 @@
|
||||
import { c as createElementIfNotDefined } from '../shared/create-element-if-not-defined.mjs';
|
||||
import { m as makeElementsArray } from '../shared/utils.mjs';
|
||||
|
||||
function Navigation(_ref) {
|
||||
let {
|
||||
swiper,
|
||||
extendParams,
|
||||
on,
|
||||
emit
|
||||
} = _ref;
|
||||
extendParams({
|
||||
navigation: {
|
||||
nextEl: null,
|
||||
prevEl: null,
|
||||
hideOnClick: false,
|
||||
disabledClass: 'swiper-button-disabled',
|
||||
hiddenClass: 'swiper-button-hidden',
|
||||
lockClass: 'swiper-button-lock',
|
||||
navigationDisabledClass: 'swiper-navigation-disabled'
|
||||
}
|
||||
});
|
||||
swiper.navigation = {
|
||||
nextEl: null,
|
||||
prevEl: null
|
||||
};
|
||||
function getEl(el) {
|
||||
let res;
|
||||
if (el && typeof el === 'string' && swiper.isElement) {
|
||||
res = swiper.el.querySelector(el) || swiper.hostEl.querySelector(el);
|
||||
if (res) return res;
|
||||
}
|
||||
if (el) {
|
||||
if (typeof el === 'string') res = [...document.querySelectorAll(el)];
|
||||
if (swiper.params.uniqueNavElements && typeof el === 'string' && res && res.length > 1 && swiper.el.querySelectorAll(el).length === 1) {
|
||||
res = swiper.el.querySelector(el);
|
||||
} else if (res && res.length === 1) {
|
||||
res = res[0];
|
||||
}
|
||||
}
|
||||
if (el && !res) return el;
|
||||
// if (Array.isArray(res) && res.length === 1) res = res[0];
|
||||
return res;
|
||||
}
|
||||
function toggleEl(el, disabled) {
|
||||
const params = swiper.params.navigation;
|
||||
el = makeElementsArray(el);
|
||||
el.forEach(subEl => {
|
||||
if (subEl) {
|
||||
subEl.classList[disabled ? 'add' : 'remove'](...params.disabledClass.split(' '));
|
||||
if (subEl.tagName === 'BUTTON') subEl.disabled = disabled;
|
||||
if (swiper.params.watchOverflow && swiper.enabled) {
|
||||
subEl.classList[swiper.isLocked ? 'add' : 'remove'](params.lockClass);
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
function update() {
|
||||
// Update Navigation Buttons
|
||||
const {
|
||||
nextEl,
|
||||
prevEl
|
||||
} = swiper.navigation;
|
||||
if (swiper.params.loop) {
|
||||
toggleEl(prevEl, false);
|
||||
toggleEl(nextEl, false);
|
||||
return;
|
||||
}
|
||||
toggleEl(prevEl, swiper.isBeginning && !swiper.params.rewind);
|
||||
toggleEl(nextEl, swiper.isEnd && !swiper.params.rewind);
|
||||
}
|
||||
function onPrevClick(e) {
|
||||
e.preventDefault();
|
||||
if (swiper.isBeginning && !swiper.params.loop && !swiper.params.rewind) return;
|
||||
swiper.slidePrev();
|
||||
emit('navigationPrev');
|
||||
}
|
||||
function onNextClick(e) {
|
||||
e.preventDefault();
|
||||
if (swiper.isEnd && !swiper.params.loop && !swiper.params.rewind) return;
|
||||
swiper.slideNext();
|
||||
emit('navigationNext');
|
||||
}
|
||||
function init() {
|
||||
const params = swiper.params.navigation;
|
||||
swiper.params.navigation = createElementIfNotDefined(swiper, swiper.originalParams.navigation, swiper.params.navigation, {
|
||||
nextEl: 'swiper-button-next',
|
||||
prevEl: 'swiper-button-prev'
|
||||
});
|
||||
if (!(params.nextEl || params.prevEl)) return;
|
||||
let nextEl = getEl(params.nextEl);
|
||||
let prevEl = getEl(params.prevEl);
|
||||
Object.assign(swiper.navigation, {
|
||||
nextEl,
|
||||
prevEl
|
||||
});
|
||||
nextEl = makeElementsArray(nextEl);
|
||||
prevEl = makeElementsArray(prevEl);
|
||||
const initButton = (el, dir) => {
|
||||
if (el) {
|
||||
el.addEventListener('click', dir === 'next' ? onNextClick : onPrevClick);
|
||||
}
|
||||
if (!swiper.enabled && el) {
|
||||
el.classList.add(...params.lockClass.split(' '));
|
||||
}
|
||||
};
|
||||
nextEl.forEach(el => initButton(el, 'next'));
|
||||
prevEl.forEach(el => initButton(el, 'prev'));
|
||||
}
|
||||
function destroy() {
|
||||
let {
|
||||
nextEl,
|
||||
prevEl
|
||||
} = swiper.navigation;
|
||||
nextEl = makeElementsArray(nextEl);
|
||||
prevEl = makeElementsArray(prevEl);
|
||||
const destroyButton = (el, dir) => {
|
||||
el.removeEventListener('click', dir === 'next' ? onNextClick : onPrevClick);
|
||||
el.classList.remove(...swiper.params.navigation.disabledClass.split(' '));
|
||||
};
|
||||
nextEl.forEach(el => destroyButton(el, 'next'));
|
||||
prevEl.forEach(el => destroyButton(el, 'prev'));
|
||||
}
|
||||
on('init', () => {
|
||||
if (swiper.params.navigation.enabled === false) {
|
||||
// eslint-disable-next-line
|
||||
disable();
|
||||
} else {
|
||||
init();
|
||||
update();
|
||||
}
|
||||
});
|
||||
on('toEdge fromEdge lock unlock', () => {
|
||||
update();
|
||||
});
|
||||
on('destroy', () => {
|
||||
destroy();
|
||||
});
|
||||
on('enable disable', () => {
|
||||
let {
|
||||
nextEl,
|
||||
prevEl
|
||||
} = swiper.navigation;
|
||||
nextEl = makeElementsArray(nextEl);
|
||||
prevEl = makeElementsArray(prevEl);
|
||||
if (swiper.enabled) {
|
||||
update();
|
||||
return;
|
||||
}
|
||||
[...nextEl, ...prevEl].filter(el => !!el).forEach(el => el.classList.add(swiper.params.navigation.lockClass));
|
||||
});
|
||||
on('click', (_s, e) => {
|
||||
let {
|
||||
nextEl,
|
||||
prevEl
|
||||
} = swiper.navigation;
|
||||
nextEl = makeElementsArray(nextEl);
|
||||
prevEl = makeElementsArray(prevEl);
|
||||
const targetEl = e.target;
|
||||
let targetIsButton = prevEl.includes(targetEl) || nextEl.includes(targetEl);
|
||||
if (swiper.isElement && !targetIsButton) {
|
||||
const path = e.path || e.composedPath && e.composedPath();
|
||||
if (path) {
|
||||
targetIsButton = path.find(pathEl => nextEl.includes(pathEl) || prevEl.includes(pathEl));
|
||||
}
|
||||
}
|
||||
if (swiper.params.navigation.hideOnClick && !targetIsButton) {
|
||||
if (swiper.pagination && swiper.params.pagination && swiper.params.pagination.clickable && (swiper.pagination.el === targetEl || swiper.pagination.el.contains(targetEl))) return;
|
||||
let isHidden;
|
||||
if (nextEl.length) {
|
||||
isHidden = nextEl[0].classList.contains(swiper.params.navigation.hiddenClass);
|
||||
} else if (prevEl.length) {
|
||||
isHidden = prevEl[0].classList.contains(swiper.params.navigation.hiddenClass);
|
||||
}
|
||||
if (isHidden === true) {
|
||||
emit('navigationShow');
|
||||
} else {
|
||||
emit('navigationHide');
|
||||
}
|
||||
[...nextEl, ...prevEl].filter(el => !!el).forEach(el => el.classList.toggle(swiper.params.navigation.hiddenClass));
|
||||
}
|
||||
});
|
||||
const enable = () => {
|
||||
swiper.el.classList.remove(...swiper.params.navigation.navigationDisabledClass.split(' '));
|
||||
init();
|
||||
update();
|
||||
};
|
||||
const disable = () => {
|
||||
swiper.el.classList.add(...swiper.params.navigation.navigationDisabledClass.split(' '));
|
||||
destroy();
|
||||
};
|
||||
Object.assign(swiper.navigation, {
|
||||
enable,
|
||||
disable,
|
||||
update,
|
||||
init,
|
||||
destroy
|
||||
});
|
||||
}
|
||||
|
||||
export { Navigation as default };
|
||||
+460
@@ -0,0 +1,460 @@
|
||||
import { c as classesToSelector } from '../shared/classes-to-selector.mjs';
|
||||
import { c as createElementIfNotDefined } from '../shared/create-element-if-not-defined.mjs';
|
||||
import { m as makeElementsArray, h as elementOuterSize, i as elementIndex, s as setInnerHTML, b as elementParents } from '../shared/utils.mjs';
|
||||
|
||||
function Pagination(_ref) {
|
||||
let {
|
||||
swiper,
|
||||
extendParams,
|
||||
on,
|
||||
emit
|
||||
} = _ref;
|
||||
const pfx = 'swiper-pagination';
|
||||
extendParams({
|
||||
pagination: {
|
||||
el: null,
|
||||
bulletElement: 'span',
|
||||
clickable: false,
|
||||
hideOnClick: false,
|
||||
renderBullet: null,
|
||||
renderProgressbar: null,
|
||||
renderFraction: null,
|
||||
renderCustom: null,
|
||||
progressbarOpposite: false,
|
||||
type: 'bullets',
|
||||
// 'bullets' or 'progressbar' or 'fraction' or 'custom'
|
||||
dynamicBullets: false,
|
||||
dynamicMainBullets: 1,
|
||||
formatFractionCurrent: number => number,
|
||||
formatFractionTotal: number => number,
|
||||
bulletClass: `${pfx}-bullet`,
|
||||
bulletActiveClass: `${pfx}-bullet-active`,
|
||||
modifierClass: `${pfx}-`,
|
||||
currentClass: `${pfx}-current`,
|
||||
totalClass: `${pfx}-total`,
|
||||
hiddenClass: `${pfx}-hidden`,
|
||||
progressbarFillClass: `${pfx}-progressbar-fill`,
|
||||
progressbarOppositeClass: `${pfx}-progressbar-opposite`,
|
||||
clickableClass: `${pfx}-clickable`,
|
||||
lockClass: `${pfx}-lock`,
|
||||
horizontalClass: `${pfx}-horizontal`,
|
||||
verticalClass: `${pfx}-vertical`,
|
||||
paginationDisabledClass: `${pfx}-disabled`
|
||||
}
|
||||
});
|
||||
swiper.pagination = {
|
||||
el: null,
|
||||
bullets: []
|
||||
};
|
||||
let bulletSize;
|
||||
let dynamicBulletIndex = 0;
|
||||
function isPaginationDisabled() {
|
||||
return !swiper.params.pagination.el || !swiper.pagination.el || Array.isArray(swiper.pagination.el) && swiper.pagination.el.length === 0;
|
||||
}
|
||||
function setSideBullets(bulletEl, position) {
|
||||
const {
|
||||
bulletActiveClass
|
||||
} = swiper.params.pagination;
|
||||
if (!bulletEl) return;
|
||||
bulletEl = bulletEl[`${position === 'prev' ? 'previous' : 'next'}ElementSibling`];
|
||||
if (bulletEl) {
|
||||
bulletEl.classList.add(`${bulletActiveClass}-${position}`);
|
||||
bulletEl = bulletEl[`${position === 'prev' ? 'previous' : 'next'}ElementSibling`];
|
||||
if (bulletEl) {
|
||||
bulletEl.classList.add(`${bulletActiveClass}-${position}-${position}`);
|
||||
}
|
||||
}
|
||||
}
|
||||
function getMoveDirection(prevIndex, nextIndex, length) {
|
||||
prevIndex = prevIndex % length;
|
||||
nextIndex = nextIndex % length;
|
||||
if (nextIndex === prevIndex + 1) {
|
||||
return 'next';
|
||||
} else if (nextIndex === prevIndex - 1) {
|
||||
return 'previous';
|
||||
}
|
||||
return;
|
||||
}
|
||||
function onBulletClick(e) {
|
||||
const bulletEl = e.target.closest(classesToSelector(swiper.params.pagination.bulletClass));
|
||||
if (!bulletEl) {
|
||||
return;
|
||||
}
|
||||
e.preventDefault();
|
||||
const index = elementIndex(bulletEl) * swiper.params.slidesPerGroup;
|
||||
if (swiper.params.loop) {
|
||||
if (swiper.realIndex === index) return;
|
||||
const moveDirection = getMoveDirection(swiper.realIndex, index, swiper.slides.length);
|
||||
if (moveDirection === 'next') {
|
||||
swiper.slideNext();
|
||||
} else if (moveDirection === 'previous') {
|
||||
swiper.slidePrev();
|
||||
} else {
|
||||
swiper.slideToLoop(index);
|
||||
}
|
||||
} else {
|
||||
swiper.slideTo(index);
|
||||
}
|
||||
}
|
||||
function update() {
|
||||
// Render || Update Pagination bullets/items
|
||||
const rtl = swiper.rtl;
|
||||
const params = swiper.params.pagination;
|
||||
if (isPaginationDisabled()) return;
|
||||
let el = swiper.pagination.el;
|
||||
el = makeElementsArray(el);
|
||||
// Current/Total
|
||||
let current;
|
||||
let previousIndex;
|
||||
const slidesLength = swiper.virtual && swiper.params.virtual.enabled ? swiper.virtual.slides.length : swiper.slides.length;
|
||||
const total = swiper.params.loop ? Math.ceil(slidesLength / swiper.params.slidesPerGroup) : swiper.snapGrid.length;
|
||||
if (swiper.params.loop) {
|
||||
previousIndex = swiper.previousRealIndex || 0;
|
||||
current = swiper.params.slidesPerGroup > 1 ? Math.floor(swiper.realIndex / swiper.params.slidesPerGroup) : swiper.realIndex;
|
||||
} else if (typeof swiper.snapIndex !== 'undefined') {
|
||||
current = swiper.snapIndex;
|
||||
previousIndex = swiper.previousSnapIndex;
|
||||
} else {
|
||||
previousIndex = swiper.previousIndex || 0;
|
||||
current = swiper.activeIndex || 0;
|
||||
}
|
||||
// Types
|
||||
if (params.type === 'bullets' && swiper.pagination.bullets && swiper.pagination.bullets.length > 0) {
|
||||
const bullets = swiper.pagination.bullets;
|
||||
let firstIndex;
|
||||
let lastIndex;
|
||||
let midIndex;
|
||||
if (params.dynamicBullets) {
|
||||
bulletSize = elementOuterSize(bullets[0], swiper.isHorizontal() ? 'width' : 'height', true);
|
||||
el.forEach(subEl => {
|
||||
subEl.style[swiper.isHorizontal() ? 'width' : 'height'] = `${bulletSize * (params.dynamicMainBullets + 4)}px`;
|
||||
});
|
||||
if (params.dynamicMainBullets > 1 && previousIndex !== undefined) {
|
||||
dynamicBulletIndex += current - (previousIndex || 0);
|
||||
if (dynamicBulletIndex > params.dynamicMainBullets - 1) {
|
||||
dynamicBulletIndex = params.dynamicMainBullets - 1;
|
||||
} else if (dynamicBulletIndex < 0) {
|
||||
dynamicBulletIndex = 0;
|
||||
}
|
||||
}
|
||||
firstIndex = Math.max(current - dynamicBulletIndex, 0);
|
||||
lastIndex = firstIndex + (Math.min(bullets.length, params.dynamicMainBullets) - 1);
|
||||
midIndex = (lastIndex + firstIndex) / 2;
|
||||
}
|
||||
bullets.forEach(bulletEl => {
|
||||
const classesToRemove = [...['', '-next', '-next-next', '-prev', '-prev-prev', '-main'].map(suffix => `${params.bulletActiveClass}${suffix}`)].map(s => typeof s === 'string' && s.includes(' ') ? s.split(' ') : s).flat();
|
||||
bulletEl.classList.remove(...classesToRemove);
|
||||
});
|
||||
if (el.length > 1) {
|
||||
bullets.forEach(bullet => {
|
||||
const bulletIndex = elementIndex(bullet);
|
||||
if (bulletIndex === current) {
|
||||
bullet.classList.add(...params.bulletActiveClass.split(' '));
|
||||
} else if (swiper.isElement) {
|
||||
bullet.setAttribute('part', 'bullet');
|
||||
}
|
||||
if (params.dynamicBullets) {
|
||||
if (bulletIndex >= firstIndex && bulletIndex <= lastIndex) {
|
||||
bullet.classList.add(...`${params.bulletActiveClass}-main`.split(' '));
|
||||
}
|
||||
if (bulletIndex === firstIndex) {
|
||||
setSideBullets(bullet, 'prev');
|
||||
}
|
||||
if (bulletIndex === lastIndex) {
|
||||
setSideBullets(bullet, 'next');
|
||||
}
|
||||
}
|
||||
});
|
||||
} else {
|
||||
const bullet = bullets[current];
|
||||
if (bullet) {
|
||||
bullet.classList.add(...params.bulletActiveClass.split(' '));
|
||||
}
|
||||
if (swiper.isElement) {
|
||||
bullets.forEach((bulletEl, bulletIndex) => {
|
||||
bulletEl.setAttribute('part', bulletIndex === current ? 'bullet-active' : 'bullet');
|
||||
});
|
||||
}
|
||||
if (params.dynamicBullets) {
|
||||
const firstDisplayedBullet = bullets[firstIndex];
|
||||
const lastDisplayedBullet = bullets[lastIndex];
|
||||
for (let i = firstIndex; i <= lastIndex; i += 1) {
|
||||
if (bullets[i]) {
|
||||
bullets[i].classList.add(...`${params.bulletActiveClass}-main`.split(' '));
|
||||
}
|
||||
}
|
||||
setSideBullets(firstDisplayedBullet, 'prev');
|
||||
setSideBullets(lastDisplayedBullet, 'next');
|
||||
}
|
||||
}
|
||||
if (params.dynamicBullets) {
|
||||
const dynamicBulletsLength = Math.min(bullets.length, params.dynamicMainBullets + 4);
|
||||
const bulletsOffset = (bulletSize * dynamicBulletsLength - bulletSize) / 2 - midIndex * bulletSize;
|
||||
const offsetProp = rtl ? 'right' : 'left';
|
||||
bullets.forEach(bullet => {
|
||||
bullet.style[swiper.isHorizontal() ? offsetProp : 'top'] = `${bulletsOffset}px`;
|
||||
});
|
||||
}
|
||||
}
|
||||
el.forEach((subEl, subElIndex) => {
|
||||
if (params.type === 'fraction') {
|
||||
subEl.querySelectorAll(classesToSelector(params.currentClass)).forEach(fractionEl => {
|
||||
fractionEl.textContent = params.formatFractionCurrent(current + 1);
|
||||
});
|
||||
subEl.querySelectorAll(classesToSelector(params.totalClass)).forEach(totalEl => {
|
||||
totalEl.textContent = params.formatFractionTotal(total);
|
||||
});
|
||||
}
|
||||
if (params.type === 'progressbar') {
|
||||
let progressbarDirection;
|
||||
if (params.progressbarOpposite) {
|
||||
progressbarDirection = swiper.isHorizontal() ? 'vertical' : 'horizontal';
|
||||
} else {
|
||||
progressbarDirection = swiper.isHorizontal() ? 'horizontal' : 'vertical';
|
||||
}
|
||||
const scale = (current + 1) / total;
|
||||
let scaleX = 1;
|
||||
let scaleY = 1;
|
||||
if (progressbarDirection === 'horizontal') {
|
||||
scaleX = scale;
|
||||
} else {
|
||||
scaleY = scale;
|
||||
}
|
||||
subEl.querySelectorAll(classesToSelector(params.progressbarFillClass)).forEach(progressEl => {
|
||||
progressEl.style.transform = `translate3d(0,0,0) scaleX(${scaleX}) scaleY(${scaleY})`;
|
||||
progressEl.style.transitionDuration = `${swiper.params.speed}ms`;
|
||||
});
|
||||
}
|
||||
if (params.type === 'custom' && params.renderCustom) {
|
||||
setInnerHTML(subEl, params.renderCustom(swiper, current + 1, total));
|
||||
if (subElIndex === 0) emit('paginationRender', subEl);
|
||||
} else {
|
||||
if (subElIndex === 0) emit('paginationRender', subEl);
|
||||
emit('paginationUpdate', subEl);
|
||||
}
|
||||
if (swiper.params.watchOverflow && swiper.enabled) {
|
||||
subEl.classList[swiper.isLocked ? 'add' : 'remove'](params.lockClass);
|
||||
}
|
||||
});
|
||||
}
|
||||
function render() {
|
||||
// Render Container
|
||||
const params = swiper.params.pagination;
|
||||
if (isPaginationDisabled()) return;
|
||||
const slidesLength = swiper.virtual && swiper.params.virtual.enabled ? swiper.virtual.slides.length : swiper.grid && swiper.params.grid.rows > 1 ? swiper.slides.length / Math.ceil(swiper.params.grid.rows) : swiper.slides.length;
|
||||
let el = swiper.pagination.el;
|
||||
el = makeElementsArray(el);
|
||||
let paginationHTML = '';
|
||||
if (params.type === 'bullets') {
|
||||
let numberOfBullets = swiper.params.loop ? Math.ceil(slidesLength / swiper.params.slidesPerGroup) : swiper.snapGrid.length;
|
||||
if (swiper.params.freeMode && swiper.params.freeMode.enabled && numberOfBullets > slidesLength) {
|
||||
numberOfBullets = slidesLength;
|
||||
}
|
||||
for (let i = 0; i < numberOfBullets; i += 1) {
|
||||
if (params.renderBullet) {
|
||||
paginationHTML += params.renderBullet.call(swiper, i, params.bulletClass);
|
||||
} else {
|
||||
// prettier-ignore
|
||||
paginationHTML += `<${params.bulletElement} ${swiper.isElement ? 'part="bullet"' : ''} class="${params.bulletClass}"></${params.bulletElement}>`;
|
||||
}
|
||||
}
|
||||
}
|
||||
if (params.type === 'fraction') {
|
||||
if (params.renderFraction) {
|
||||
paginationHTML = params.renderFraction.call(swiper, params.currentClass, params.totalClass);
|
||||
} else {
|
||||
paginationHTML = `<span class="${params.currentClass}"></span>` + ' / ' + `<span class="${params.totalClass}"></span>`;
|
||||
}
|
||||
}
|
||||
if (params.type === 'progressbar') {
|
||||
if (params.renderProgressbar) {
|
||||
paginationHTML = params.renderProgressbar.call(swiper, params.progressbarFillClass);
|
||||
} else {
|
||||
paginationHTML = `<span class="${params.progressbarFillClass}"></span>`;
|
||||
}
|
||||
}
|
||||
swiper.pagination.bullets = [];
|
||||
el.forEach(subEl => {
|
||||
if (params.type !== 'custom') {
|
||||
setInnerHTML(subEl, paginationHTML || '');
|
||||
}
|
||||
if (params.type === 'bullets') {
|
||||
swiper.pagination.bullets.push(...subEl.querySelectorAll(classesToSelector(params.bulletClass)));
|
||||
}
|
||||
});
|
||||
if (params.type !== 'custom') {
|
||||
emit('paginationRender', el[0]);
|
||||
}
|
||||
}
|
||||
function init() {
|
||||
swiper.params.pagination = createElementIfNotDefined(swiper, swiper.originalParams.pagination, swiper.params.pagination, {
|
||||
el: 'swiper-pagination'
|
||||
});
|
||||
const params = swiper.params.pagination;
|
||||
if (!params.el) return;
|
||||
let el;
|
||||
if (typeof params.el === 'string' && swiper.isElement) {
|
||||
el = swiper.el.querySelector(params.el);
|
||||
}
|
||||
if (!el && typeof params.el === 'string') {
|
||||
el = [...document.querySelectorAll(params.el)];
|
||||
}
|
||||
if (!el) {
|
||||
el = params.el;
|
||||
}
|
||||
if (!el || el.length === 0) return;
|
||||
if (swiper.params.uniqueNavElements && typeof params.el === 'string' && Array.isArray(el) && el.length > 1) {
|
||||
el = [...swiper.el.querySelectorAll(params.el)];
|
||||
// check if it belongs to another nested Swiper
|
||||
if (el.length > 1) {
|
||||
el = el.find(subEl => {
|
||||
if (elementParents(subEl, '.swiper')[0] !== swiper.el) return false;
|
||||
return true;
|
||||
});
|
||||
}
|
||||
}
|
||||
if (Array.isArray(el) && el.length === 1) el = el[0];
|
||||
Object.assign(swiper.pagination, {
|
||||
el
|
||||
});
|
||||
el = makeElementsArray(el);
|
||||
el.forEach(subEl => {
|
||||
if (params.type === 'bullets' && params.clickable) {
|
||||
subEl.classList.add(...(params.clickableClass || '').split(' '));
|
||||
}
|
||||
subEl.classList.add(params.modifierClass + params.type);
|
||||
subEl.classList.add(swiper.isHorizontal() ? params.horizontalClass : params.verticalClass);
|
||||
if (params.type === 'bullets' && params.dynamicBullets) {
|
||||
subEl.classList.add(`${params.modifierClass}${params.type}-dynamic`);
|
||||
dynamicBulletIndex = 0;
|
||||
if (params.dynamicMainBullets < 1) {
|
||||
params.dynamicMainBullets = 1;
|
||||
}
|
||||
}
|
||||
if (params.type === 'progressbar' && params.progressbarOpposite) {
|
||||
subEl.classList.add(params.progressbarOppositeClass);
|
||||
}
|
||||
if (params.clickable) {
|
||||
subEl.addEventListener('click', onBulletClick);
|
||||
}
|
||||
if (!swiper.enabled) {
|
||||
subEl.classList.add(params.lockClass);
|
||||
}
|
||||
});
|
||||
}
|
||||
function destroy() {
|
||||
const params = swiper.params.pagination;
|
||||
if (isPaginationDisabled()) return;
|
||||
let el = swiper.pagination.el;
|
||||
if (el) {
|
||||
el = makeElementsArray(el);
|
||||
el.forEach(subEl => {
|
||||
subEl.classList.remove(params.hiddenClass);
|
||||
subEl.classList.remove(params.modifierClass + params.type);
|
||||
subEl.classList.remove(swiper.isHorizontal() ? params.horizontalClass : params.verticalClass);
|
||||
if (params.clickable) {
|
||||
subEl.classList.remove(...(params.clickableClass || '').split(' '));
|
||||
subEl.removeEventListener('click', onBulletClick);
|
||||
}
|
||||
});
|
||||
}
|
||||
if (swiper.pagination.bullets) swiper.pagination.bullets.forEach(subEl => subEl.classList.remove(...params.bulletActiveClass.split(' ')));
|
||||
}
|
||||
on('changeDirection', () => {
|
||||
if (!swiper.pagination || !swiper.pagination.el) return;
|
||||
const params = swiper.params.pagination;
|
||||
let {
|
||||
el
|
||||
} = swiper.pagination;
|
||||
el = makeElementsArray(el);
|
||||
el.forEach(subEl => {
|
||||
subEl.classList.remove(params.horizontalClass, params.verticalClass);
|
||||
subEl.classList.add(swiper.isHorizontal() ? params.horizontalClass : params.verticalClass);
|
||||
});
|
||||
});
|
||||
on('init', () => {
|
||||
if (swiper.params.pagination.enabled === false) {
|
||||
// eslint-disable-next-line
|
||||
disable();
|
||||
} else {
|
||||
init();
|
||||
render();
|
||||
update();
|
||||
}
|
||||
});
|
||||
on('activeIndexChange', () => {
|
||||
if (typeof swiper.snapIndex === 'undefined') {
|
||||
update();
|
||||
}
|
||||
});
|
||||
on('snapIndexChange', () => {
|
||||
update();
|
||||
});
|
||||
on('snapGridLengthChange', () => {
|
||||
render();
|
||||
update();
|
||||
});
|
||||
on('destroy', () => {
|
||||
destroy();
|
||||
});
|
||||
on('enable disable', () => {
|
||||
let {
|
||||
el
|
||||
} = swiper.pagination;
|
||||
if (el) {
|
||||
el = makeElementsArray(el);
|
||||
el.forEach(subEl => subEl.classList[swiper.enabled ? 'remove' : 'add'](swiper.params.pagination.lockClass));
|
||||
}
|
||||
});
|
||||
on('lock unlock', () => {
|
||||
update();
|
||||
});
|
||||
on('click', (_s, e) => {
|
||||
const targetEl = e.target;
|
||||
const el = makeElementsArray(swiper.pagination.el);
|
||||
if (swiper.params.pagination.el && swiper.params.pagination.hideOnClick && el && el.length > 0 && !targetEl.classList.contains(swiper.params.pagination.bulletClass)) {
|
||||
if (swiper.navigation && (swiper.navigation.nextEl && targetEl === swiper.navigation.nextEl || swiper.navigation.prevEl && targetEl === swiper.navigation.prevEl)) return;
|
||||
const isHidden = el[0].classList.contains(swiper.params.pagination.hiddenClass);
|
||||
if (isHidden === true) {
|
||||
emit('paginationShow');
|
||||
} else {
|
||||
emit('paginationHide');
|
||||
}
|
||||
el.forEach(subEl => subEl.classList.toggle(swiper.params.pagination.hiddenClass));
|
||||
}
|
||||
});
|
||||
const enable = () => {
|
||||
swiper.el.classList.remove(swiper.params.pagination.paginationDisabledClass);
|
||||
let {
|
||||
el
|
||||
} = swiper.pagination;
|
||||
if (el) {
|
||||
el = makeElementsArray(el);
|
||||
el.forEach(subEl => subEl.classList.remove(swiper.params.pagination.paginationDisabledClass));
|
||||
}
|
||||
init();
|
||||
render();
|
||||
update();
|
||||
};
|
||||
const disable = () => {
|
||||
swiper.el.classList.add(swiper.params.pagination.paginationDisabledClass);
|
||||
let {
|
||||
el
|
||||
} = swiper.pagination;
|
||||
if (el) {
|
||||
el = makeElementsArray(el);
|
||||
el.forEach(subEl => subEl.classList.add(swiper.params.pagination.paginationDisabledClass));
|
||||
}
|
||||
destroy();
|
||||
};
|
||||
Object.assign(swiper.pagination, {
|
||||
enable,
|
||||
disable,
|
||||
render,
|
||||
update,
|
||||
init,
|
||||
destroy
|
||||
});
|
||||
}
|
||||
|
||||
export { Pagination as default };
|
||||
+124
@@ -0,0 +1,124 @@
|
||||
import { e as elementChildren } from '../shared/utils.mjs';
|
||||
|
||||
function Parallax(_ref) {
|
||||
let {
|
||||
swiper,
|
||||
extendParams,
|
||||
on
|
||||
} = _ref;
|
||||
extendParams({
|
||||
parallax: {
|
||||
enabled: false
|
||||
}
|
||||
});
|
||||
const elementsSelector = '[data-swiper-parallax], [data-swiper-parallax-x], [data-swiper-parallax-y], [data-swiper-parallax-opacity], [data-swiper-parallax-scale]';
|
||||
const setTransform = (el, progress) => {
|
||||
const {
|
||||
rtl
|
||||
} = swiper;
|
||||
const rtlFactor = rtl ? -1 : 1;
|
||||
const p = el.getAttribute('data-swiper-parallax') || '0';
|
||||
let x = el.getAttribute('data-swiper-parallax-x');
|
||||
let y = el.getAttribute('data-swiper-parallax-y');
|
||||
const scale = el.getAttribute('data-swiper-parallax-scale');
|
||||
const opacity = el.getAttribute('data-swiper-parallax-opacity');
|
||||
const rotate = el.getAttribute('data-swiper-parallax-rotate');
|
||||
if (x || y) {
|
||||
x = x || '0';
|
||||
y = y || '0';
|
||||
} else if (swiper.isHorizontal()) {
|
||||
x = p;
|
||||
y = '0';
|
||||
} else {
|
||||
y = p;
|
||||
x = '0';
|
||||
}
|
||||
if (x.indexOf('%') >= 0) {
|
||||
x = `${parseInt(x, 10) * progress * rtlFactor}%`;
|
||||
} else {
|
||||
x = `${x * progress * rtlFactor}px`;
|
||||
}
|
||||
if (y.indexOf('%') >= 0) {
|
||||
y = `${parseInt(y, 10) * progress}%`;
|
||||
} else {
|
||||
y = `${y * progress}px`;
|
||||
}
|
||||
if (typeof opacity !== 'undefined' && opacity !== null) {
|
||||
const currentOpacity = opacity - (opacity - 1) * (1 - Math.abs(progress));
|
||||
el.style.opacity = currentOpacity;
|
||||
}
|
||||
let transform = `translate3d(${x}, ${y}, 0px)`;
|
||||
if (typeof scale !== 'undefined' && scale !== null) {
|
||||
const currentScale = scale - (scale - 1) * (1 - Math.abs(progress));
|
||||
transform += ` scale(${currentScale})`;
|
||||
}
|
||||
if (rotate && typeof rotate !== 'undefined' && rotate !== null) {
|
||||
const currentRotate = rotate * progress * -1;
|
||||
transform += ` rotate(${currentRotate}deg)`;
|
||||
}
|
||||
el.style.transform = transform;
|
||||
};
|
||||
const setTranslate = () => {
|
||||
const {
|
||||
el,
|
||||
slides,
|
||||
progress,
|
||||
snapGrid,
|
||||
isElement
|
||||
} = swiper;
|
||||
const elements = elementChildren(el, elementsSelector);
|
||||
if (swiper.isElement) {
|
||||
elements.push(...elementChildren(swiper.hostEl, elementsSelector));
|
||||
}
|
||||
elements.forEach(subEl => {
|
||||
setTransform(subEl, progress);
|
||||
});
|
||||
slides.forEach((slideEl, slideIndex) => {
|
||||
let slideProgress = slideEl.progress;
|
||||
if (swiper.params.slidesPerGroup > 1 && swiper.params.slidesPerView !== 'auto') {
|
||||
slideProgress += Math.ceil(slideIndex / 2) - progress * (snapGrid.length - 1);
|
||||
}
|
||||
slideProgress = Math.min(Math.max(slideProgress, -1), 1);
|
||||
slideEl.querySelectorAll(`${elementsSelector}, [data-swiper-parallax-rotate]`).forEach(subEl => {
|
||||
setTransform(subEl, slideProgress);
|
||||
});
|
||||
});
|
||||
};
|
||||
const setTransition = function (duration) {
|
||||
if (duration === void 0) {
|
||||
duration = swiper.params.speed;
|
||||
}
|
||||
const {
|
||||
el,
|
||||
hostEl
|
||||
} = swiper;
|
||||
const elements = [...el.querySelectorAll(elementsSelector)];
|
||||
if (swiper.isElement) {
|
||||
elements.push(...hostEl.querySelectorAll(elementsSelector));
|
||||
}
|
||||
elements.forEach(parallaxEl => {
|
||||
let parallaxDuration = parseInt(parallaxEl.getAttribute('data-swiper-parallax-duration'), 10) || duration;
|
||||
if (duration === 0) parallaxDuration = 0;
|
||||
parallaxEl.style.transitionDuration = `${parallaxDuration}ms`;
|
||||
});
|
||||
};
|
||||
on('beforeInit', () => {
|
||||
if (!swiper.params.parallax.enabled) return;
|
||||
swiper.params.watchSlidesProgress = true;
|
||||
swiper.originalParams.watchSlidesProgress = true;
|
||||
});
|
||||
on('init', () => {
|
||||
if (!swiper.params.parallax.enabled) return;
|
||||
setTranslate();
|
||||
});
|
||||
on('setTranslate', () => {
|
||||
if (!swiper.params.parallax.enabled) return;
|
||||
setTranslate();
|
||||
});
|
||||
on('setTransition', (_swiper, duration) => {
|
||||
if (!swiper.params.parallax.enabled) return;
|
||||
setTransition(duration);
|
||||
});
|
||||
}
|
||||
|
||||
export { Parallax as default };
|
||||
+366
@@ -0,0 +1,366 @@
|
||||
import { g as getDocument } from '../shared/ssr-window.esm.mjs';
|
||||
import { m as makeElementsArray, j as classesToTokens, c as createElement, n as nextTick, d as elementOffset } from '../shared/utils.mjs';
|
||||
import { c as createElementIfNotDefined } from '../shared/create-element-if-not-defined.mjs';
|
||||
import { c as classesToSelector } from '../shared/classes-to-selector.mjs';
|
||||
|
||||
function Scrollbar(_ref) {
|
||||
let {
|
||||
swiper,
|
||||
extendParams,
|
||||
on,
|
||||
emit
|
||||
} = _ref;
|
||||
const document = getDocument();
|
||||
let isTouched = false;
|
||||
let timeout = null;
|
||||
let dragTimeout = null;
|
||||
let dragStartPos;
|
||||
let dragSize;
|
||||
let trackSize;
|
||||
let divider;
|
||||
extendParams({
|
||||
scrollbar: {
|
||||
el: null,
|
||||
dragSize: 'auto',
|
||||
hide: false,
|
||||
draggable: false,
|
||||
snapOnRelease: true,
|
||||
lockClass: 'swiper-scrollbar-lock',
|
||||
dragClass: 'swiper-scrollbar-drag',
|
||||
scrollbarDisabledClass: 'swiper-scrollbar-disabled',
|
||||
horizontalClass: `swiper-scrollbar-horizontal`,
|
||||
verticalClass: `swiper-scrollbar-vertical`
|
||||
}
|
||||
});
|
||||
swiper.scrollbar = {
|
||||
el: null,
|
||||
dragEl: null
|
||||
};
|
||||
function setTranslate() {
|
||||
if (!swiper.params.scrollbar.el || !swiper.scrollbar.el) return;
|
||||
const {
|
||||
scrollbar,
|
||||
rtlTranslate: rtl
|
||||
} = swiper;
|
||||
const {
|
||||
dragEl,
|
||||
el
|
||||
} = scrollbar;
|
||||
const params = swiper.params.scrollbar;
|
||||
const progress = swiper.params.loop ? swiper.progressLoop : swiper.progress;
|
||||
let newSize = dragSize;
|
||||
let newPos = (trackSize - dragSize) * progress;
|
||||
if (rtl) {
|
||||
newPos = -newPos;
|
||||
if (newPos > 0) {
|
||||
newSize = dragSize - newPos;
|
||||
newPos = 0;
|
||||
} else if (-newPos + dragSize > trackSize) {
|
||||
newSize = trackSize + newPos;
|
||||
}
|
||||
} else if (newPos < 0) {
|
||||
newSize = dragSize + newPos;
|
||||
newPos = 0;
|
||||
} else if (newPos + dragSize > trackSize) {
|
||||
newSize = trackSize - newPos;
|
||||
}
|
||||
if (swiper.isHorizontal()) {
|
||||
dragEl.style.transform = `translate3d(${newPos}px, 0, 0)`;
|
||||
dragEl.style.width = `${newSize}px`;
|
||||
} else {
|
||||
dragEl.style.transform = `translate3d(0px, ${newPos}px, 0)`;
|
||||
dragEl.style.height = `${newSize}px`;
|
||||
}
|
||||
if (params.hide) {
|
||||
clearTimeout(timeout);
|
||||
el.style.opacity = 1;
|
||||
timeout = setTimeout(() => {
|
||||
el.style.opacity = 0;
|
||||
el.style.transitionDuration = '400ms';
|
||||
}, 1000);
|
||||
}
|
||||
}
|
||||
function setTransition(duration) {
|
||||
if (!swiper.params.scrollbar.el || !swiper.scrollbar.el) return;
|
||||
swiper.scrollbar.dragEl.style.transitionDuration = `${duration}ms`;
|
||||
}
|
||||
function updateSize() {
|
||||
if (!swiper.params.scrollbar.el || !swiper.scrollbar.el) return;
|
||||
const {
|
||||
scrollbar
|
||||
} = swiper;
|
||||
const {
|
||||
dragEl,
|
||||
el
|
||||
} = scrollbar;
|
||||
dragEl.style.width = '';
|
||||
dragEl.style.height = '';
|
||||
trackSize = swiper.isHorizontal() ? el.offsetWidth : el.offsetHeight;
|
||||
divider = swiper.size / (swiper.virtualSize + swiper.params.slidesOffsetBefore - (swiper.params.centeredSlides ? swiper.snapGrid[0] : 0));
|
||||
if (swiper.params.scrollbar.dragSize === 'auto') {
|
||||
dragSize = trackSize * divider;
|
||||
} else {
|
||||
dragSize = parseInt(swiper.params.scrollbar.dragSize, 10);
|
||||
}
|
||||
if (swiper.isHorizontal()) {
|
||||
dragEl.style.width = `${dragSize}px`;
|
||||
} else {
|
||||
dragEl.style.height = `${dragSize}px`;
|
||||
}
|
||||
if (divider >= 1) {
|
||||
el.style.display = 'none';
|
||||
} else {
|
||||
el.style.display = '';
|
||||
}
|
||||
if (swiper.params.scrollbar.hide) {
|
||||
el.style.opacity = 0;
|
||||
}
|
||||
if (swiper.params.watchOverflow && swiper.enabled) {
|
||||
scrollbar.el.classList[swiper.isLocked ? 'add' : 'remove'](swiper.params.scrollbar.lockClass);
|
||||
}
|
||||
}
|
||||
function getPointerPosition(e) {
|
||||
return swiper.isHorizontal() ? e.clientX : e.clientY;
|
||||
}
|
||||
function setDragPosition(e) {
|
||||
const {
|
||||
scrollbar,
|
||||
rtlTranslate: rtl
|
||||
} = swiper;
|
||||
const {
|
||||
el
|
||||
} = scrollbar;
|
||||
let positionRatio;
|
||||
positionRatio = (getPointerPosition(e) - elementOffset(el)[swiper.isHorizontal() ? 'left' : 'top'] - (dragStartPos !== null ? dragStartPos : dragSize / 2)) / (trackSize - dragSize);
|
||||
positionRatio = Math.max(Math.min(positionRatio, 1), 0);
|
||||
if (rtl) {
|
||||
positionRatio = 1 - positionRatio;
|
||||
}
|
||||
const position = swiper.minTranslate() + (swiper.maxTranslate() - swiper.minTranslate()) * positionRatio;
|
||||
swiper.updateProgress(position);
|
||||
swiper.setTranslate(position);
|
||||
swiper.updateActiveIndex();
|
||||
swiper.updateSlidesClasses();
|
||||
}
|
||||
function onDragStart(e) {
|
||||
const params = swiper.params.scrollbar;
|
||||
const {
|
||||
scrollbar,
|
||||
wrapperEl
|
||||
} = swiper;
|
||||
const {
|
||||
el,
|
||||
dragEl
|
||||
} = scrollbar;
|
||||
isTouched = true;
|
||||
dragStartPos = e.target === dragEl ? getPointerPosition(e) - e.target.getBoundingClientRect()[swiper.isHorizontal() ? 'left' : 'top'] : null;
|
||||
e.preventDefault();
|
||||
e.stopPropagation();
|
||||
wrapperEl.style.transitionDuration = '100ms';
|
||||
dragEl.style.transitionDuration = '100ms';
|
||||
setDragPosition(e);
|
||||
clearTimeout(dragTimeout);
|
||||
el.style.transitionDuration = '0ms';
|
||||
if (params.hide) {
|
||||
el.style.opacity = 1;
|
||||
}
|
||||
if (swiper.params.cssMode) {
|
||||
swiper.wrapperEl.style['scroll-snap-type'] = 'none';
|
||||
}
|
||||
emit('scrollbarDragStart', e);
|
||||
}
|
||||
function onDragMove(e) {
|
||||
const {
|
||||
scrollbar,
|
||||
wrapperEl
|
||||
} = swiper;
|
||||
const {
|
||||
el,
|
||||
dragEl
|
||||
} = scrollbar;
|
||||
if (!isTouched) return;
|
||||
if (e.preventDefault && e.cancelable) e.preventDefault();else e.returnValue = false;
|
||||
setDragPosition(e);
|
||||
wrapperEl.style.transitionDuration = '0ms';
|
||||
el.style.transitionDuration = '0ms';
|
||||
dragEl.style.transitionDuration = '0ms';
|
||||
emit('scrollbarDragMove', e);
|
||||
}
|
||||
function onDragEnd(e) {
|
||||
const params = swiper.params.scrollbar;
|
||||
const {
|
||||
scrollbar,
|
||||
wrapperEl
|
||||
} = swiper;
|
||||
const {
|
||||
el
|
||||
} = scrollbar;
|
||||
if (!isTouched) return;
|
||||
isTouched = false;
|
||||
if (swiper.params.cssMode) {
|
||||
swiper.wrapperEl.style['scroll-snap-type'] = '';
|
||||
wrapperEl.style.transitionDuration = '';
|
||||
}
|
||||
if (params.hide) {
|
||||
clearTimeout(dragTimeout);
|
||||
dragTimeout = nextTick(() => {
|
||||
el.style.opacity = 0;
|
||||
el.style.transitionDuration = '400ms';
|
||||
}, 1000);
|
||||
}
|
||||
emit('scrollbarDragEnd', e);
|
||||
if (params.snapOnRelease) {
|
||||
swiper.slideToClosest();
|
||||
}
|
||||
}
|
||||
function events(method) {
|
||||
const {
|
||||
scrollbar,
|
||||
params
|
||||
} = swiper;
|
||||
const el = scrollbar.el;
|
||||
if (!el) return;
|
||||
const target = el;
|
||||
const activeListener = params.passiveListeners ? {
|
||||
passive: false,
|
||||
capture: false
|
||||
} : false;
|
||||
const passiveListener = params.passiveListeners ? {
|
||||
passive: true,
|
||||
capture: false
|
||||
} : false;
|
||||
if (!target) return;
|
||||
const eventMethod = method === 'on' ? 'addEventListener' : 'removeEventListener';
|
||||
target[eventMethod]('pointerdown', onDragStart, activeListener);
|
||||
document[eventMethod]('pointermove', onDragMove, activeListener);
|
||||
document[eventMethod]('pointerup', onDragEnd, passiveListener);
|
||||
}
|
||||
function enableDraggable() {
|
||||
if (!swiper.params.scrollbar.el || !swiper.scrollbar.el) return;
|
||||
events('on');
|
||||
}
|
||||
function disableDraggable() {
|
||||
if (!swiper.params.scrollbar.el || !swiper.scrollbar.el) return;
|
||||
events('off');
|
||||
}
|
||||
function init() {
|
||||
const {
|
||||
scrollbar,
|
||||
el: swiperEl
|
||||
} = swiper;
|
||||
swiper.params.scrollbar = createElementIfNotDefined(swiper, swiper.originalParams.scrollbar, swiper.params.scrollbar, {
|
||||
el: 'swiper-scrollbar'
|
||||
});
|
||||
const params = swiper.params.scrollbar;
|
||||
if (!params.el) return;
|
||||
let el;
|
||||
if (typeof params.el === 'string' && swiper.isElement) {
|
||||
el = swiper.el.querySelector(params.el);
|
||||
}
|
||||
if (!el && typeof params.el === 'string') {
|
||||
el = document.querySelectorAll(params.el);
|
||||
if (!el.length) return;
|
||||
} else if (!el) {
|
||||
el = params.el;
|
||||
}
|
||||
if (swiper.params.uniqueNavElements && typeof params.el === 'string' && el.length > 1 && swiperEl.querySelectorAll(params.el).length === 1) {
|
||||
el = swiperEl.querySelector(params.el);
|
||||
}
|
||||
if (el.length > 0) el = el[0];
|
||||
el.classList.add(swiper.isHorizontal() ? params.horizontalClass : params.verticalClass);
|
||||
let dragEl;
|
||||
if (el) {
|
||||
dragEl = el.querySelector(classesToSelector(swiper.params.scrollbar.dragClass));
|
||||
if (!dragEl) {
|
||||
dragEl = createElement('div', swiper.params.scrollbar.dragClass);
|
||||
el.append(dragEl);
|
||||
}
|
||||
}
|
||||
Object.assign(scrollbar, {
|
||||
el,
|
||||
dragEl
|
||||
});
|
||||
if (params.draggable) {
|
||||
enableDraggable();
|
||||
}
|
||||
if (el) {
|
||||
el.classList[swiper.enabled ? 'remove' : 'add'](...classesToTokens(swiper.params.scrollbar.lockClass));
|
||||
}
|
||||
}
|
||||
function destroy() {
|
||||
const params = swiper.params.scrollbar;
|
||||
const el = swiper.scrollbar.el;
|
||||
if (el) {
|
||||
el.classList.remove(...classesToTokens(swiper.isHorizontal() ? params.horizontalClass : params.verticalClass));
|
||||
}
|
||||
disableDraggable();
|
||||
}
|
||||
on('changeDirection', () => {
|
||||
if (!swiper.scrollbar || !swiper.scrollbar.el) return;
|
||||
const params = swiper.params.scrollbar;
|
||||
let {
|
||||
el
|
||||
} = swiper.scrollbar;
|
||||
el = makeElementsArray(el);
|
||||
el.forEach(subEl => {
|
||||
subEl.classList.remove(params.horizontalClass, params.verticalClass);
|
||||
subEl.classList.add(swiper.isHorizontal() ? params.horizontalClass : params.verticalClass);
|
||||
});
|
||||
});
|
||||
on('init', () => {
|
||||
if (swiper.params.scrollbar.enabled === false) {
|
||||
// eslint-disable-next-line
|
||||
disable();
|
||||
} else {
|
||||
init();
|
||||
updateSize();
|
||||
setTranslate();
|
||||
}
|
||||
});
|
||||
on('update resize observerUpdate lock unlock changeDirection', () => {
|
||||
updateSize();
|
||||
});
|
||||
on('setTranslate', () => {
|
||||
setTranslate();
|
||||
});
|
||||
on('setTransition', (_s, duration) => {
|
||||
setTransition(duration);
|
||||
});
|
||||
on('enable disable', () => {
|
||||
const {
|
||||
el
|
||||
} = swiper.scrollbar;
|
||||
if (el) {
|
||||
el.classList[swiper.enabled ? 'remove' : 'add'](...classesToTokens(swiper.params.scrollbar.lockClass));
|
||||
}
|
||||
});
|
||||
on('destroy', () => {
|
||||
destroy();
|
||||
});
|
||||
const enable = () => {
|
||||
swiper.el.classList.remove(...classesToTokens(swiper.params.scrollbar.scrollbarDisabledClass));
|
||||
if (swiper.scrollbar.el) {
|
||||
swiper.scrollbar.el.classList.remove(...classesToTokens(swiper.params.scrollbar.scrollbarDisabledClass));
|
||||
}
|
||||
init();
|
||||
updateSize();
|
||||
setTranslate();
|
||||
};
|
||||
const disable = () => {
|
||||
swiper.el.classList.add(...classesToTokens(swiper.params.scrollbar.scrollbarDisabledClass));
|
||||
if (swiper.scrollbar.el) {
|
||||
swiper.scrollbar.el.classList.add(...classesToTokens(swiper.params.scrollbar.scrollbarDisabledClass));
|
||||
}
|
||||
destroy();
|
||||
};
|
||||
Object.assign(swiper.scrollbar, {
|
||||
enable,
|
||||
disable,
|
||||
updateSize,
|
||||
setTranslate,
|
||||
init,
|
||||
destroy
|
||||
});
|
||||
}
|
||||
|
||||
export { Scrollbar as default };
|
||||
+197
@@ -0,0 +1,197 @@
|
||||
import { g as getDocument } from '../shared/ssr-window.esm.mjs';
|
||||
import { o as isObject, e as elementChildren } from '../shared/utils.mjs';
|
||||
|
||||
function Thumb(_ref) {
|
||||
let {
|
||||
swiper,
|
||||
extendParams,
|
||||
on
|
||||
} = _ref;
|
||||
extendParams({
|
||||
thumbs: {
|
||||
swiper: null,
|
||||
multipleActiveThumbs: true,
|
||||
autoScrollOffset: 0,
|
||||
slideThumbActiveClass: 'swiper-slide-thumb-active',
|
||||
thumbsContainerClass: 'swiper-thumbs'
|
||||
}
|
||||
});
|
||||
let initialized = false;
|
||||
let swiperCreated = false;
|
||||
swiper.thumbs = {
|
||||
swiper: null
|
||||
};
|
||||
function onThumbClick() {
|
||||
const thumbsSwiper = swiper.thumbs.swiper;
|
||||
if (!thumbsSwiper || thumbsSwiper.destroyed) return;
|
||||
const clickedIndex = thumbsSwiper.clickedIndex;
|
||||
const clickedSlide = thumbsSwiper.clickedSlide;
|
||||
if (clickedSlide && clickedSlide.classList.contains(swiper.params.thumbs.slideThumbActiveClass)) return;
|
||||
if (typeof clickedIndex === 'undefined' || clickedIndex === null) return;
|
||||
let slideToIndex;
|
||||
if (thumbsSwiper.params.loop) {
|
||||
slideToIndex = parseInt(thumbsSwiper.clickedSlide.getAttribute('data-swiper-slide-index'), 10);
|
||||
} else {
|
||||
slideToIndex = clickedIndex;
|
||||
}
|
||||
if (swiper.params.loop) {
|
||||
swiper.slideToLoop(slideToIndex);
|
||||
} else {
|
||||
swiper.slideTo(slideToIndex);
|
||||
}
|
||||
}
|
||||
function init() {
|
||||
const {
|
||||
thumbs: thumbsParams
|
||||
} = swiper.params;
|
||||
if (initialized) return false;
|
||||
initialized = true;
|
||||
const SwiperClass = swiper.constructor;
|
||||
if (thumbsParams.swiper instanceof SwiperClass) {
|
||||
if (thumbsParams.swiper.destroyed) {
|
||||
initialized = false;
|
||||
return false;
|
||||
}
|
||||
swiper.thumbs.swiper = thumbsParams.swiper;
|
||||
Object.assign(swiper.thumbs.swiper.originalParams, {
|
||||
watchSlidesProgress: true,
|
||||
slideToClickedSlide: false
|
||||
});
|
||||
Object.assign(swiper.thumbs.swiper.params, {
|
||||
watchSlidesProgress: true,
|
||||
slideToClickedSlide: false
|
||||
});
|
||||
swiper.thumbs.swiper.update();
|
||||
} else if (isObject(thumbsParams.swiper)) {
|
||||
const thumbsSwiperParams = Object.assign({}, thumbsParams.swiper);
|
||||
Object.assign(thumbsSwiperParams, {
|
||||
watchSlidesProgress: true,
|
||||
slideToClickedSlide: false
|
||||
});
|
||||
swiper.thumbs.swiper = new SwiperClass(thumbsSwiperParams);
|
||||
swiperCreated = true;
|
||||
}
|
||||
swiper.thumbs.swiper.el.classList.add(swiper.params.thumbs.thumbsContainerClass);
|
||||
swiper.thumbs.swiper.on('tap', onThumbClick);
|
||||
return true;
|
||||
}
|
||||
function update(initial) {
|
||||
const thumbsSwiper = swiper.thumbs.swiper;
|
||||
if (!thumbsSwiper || thumbsSwiper.destroyed) return;
|
||||
const slidesPerView = thumbsSwiper.params.slidesPerView === 'auto' ? thumbsSwiper.slidesPerViewDynamic() : thumbsSwiper.params.slidesPerView;
|
||||
|
||||
// Activate thumbs
|
||||
let thumbsToActivate = 1;
|
||||
const 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.forEach(slideEl => slideEl.classList.remove(thumbActiveClass));
|
||||
if (thumbsSwiper.params.loop || thumbsSwiper.params.virtual && thumbsSwiper.params.virtual.enabled) {
|
||||
for (let i = 0; i < thumbsToActivate; i += 1) {
|
||||
elementChildren(thumbsSwiper.slidesEl, `[data-swiper-slide-index="${swiper.realIndex + i}"]`).forEach(slideEl => {
|
||||
slideEl.classList.add(thumbActiveClass);
|
||||
});
|
||||
}
|
||||
} else {
|
||||
for (let i = 0; i < thumbsToActivate; i += 1) {
|
||||
if (thumbsSwiper.slides[swiper.realIndex + i]) {
|
||||
thumbsSwiper.slides[swiper.realIndex + i].classList.add(thumbActiveClass);
|
||||
}
|
||||
}
|
||||
}
|
||||
const autoScrollOffset = swiper.params.thumbs.autoScrollOffset;
|
||||
const useOffset = autoScrollOffset && !thumbsSwiper.params.loop;
|
||||
if (swiper.realIndex !== thumbsSwiper.realIndex || useOffset) {
|
||||
const currentThumbsIndex = thumbsSwiper.activeIndex;
|
||||
let newThumbsIndex;
|
||||
let direction;
|
||||
if (thumbsSwiper.params.loop) {
|
||||
const newThumbsSlide = thumbsSwiper.slides.find(slideEl => slideEl.getAttribute('data-swiper-slide-index') === `${swiper.realIndex}`);
|
||||
newThumbsIndex = thumbsSwiper.slides.indexOf(newThumbsSlide);
|
||||
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) ;
|
||||
thumbsSwiper.slideTo(newThumbsIndex, initial ? 0 : undefined);
|
||||
}
|
||||
}
|
||||
}
|
||||
on('beforeInit', () => {
|
||||
const {
|
||||
thumbs
|
||||
} = swiper.params;
|
||||
if (!thumbs || !thumbs.swiper) return;
|
||||
if (typeof thumbs.swiper === 'string' || thumbs.swiper instanceof HTMLElement) {
|
||||
const document = getDocument();
|
||||
const getThumbsElementAndInit = () => {
|
||||
const thumbsElement = typeof thumbs.swiper === 'string' ? document.querySelector(thumbs.swiper) : thumbs.swiper;
|
||||
if (thumbsElement && thumbsElement.swiper) {
|
||||
thumbs.swiper = thumbsElement.swiper;
|
||||
init();
|
||||
update(true);
|
||||
} else if (thumbsElement) {
|
||||
const eventName = `${swiper.params.eventsPrefix}init`;
|
||||
const onThumbsSwiper = e => {
|
||||
thumbs.swiper = e.detail[0];
|
||||
thumbsElement.removeEventListener(eventName, onThumbsSwiper);
|
||||
init();
|
||||
update(true);
|
||||
thumbs.swiper.update();
|
||||
swiper.update();
|
||||
};
|
||||
thumbsElement.addEventListener(eventName, onThumbsSwiper);
|
||||
}
|
||||
return thumbsElement;
|
||||
};
|
||||
const watchForThumbsToAppear = () => {
|
||||
if (swiper.destroyed) return;
|
||||
const thumbsElement = getThumbsElementAndInit();
|
||||
if (!thumbsElement) {
|
||||
requestAnimationFrame(watchForThumbsToAppear);
|
||||
}
|
||||
};
|
||||
requestAnimationFrame(watchForThumbsToAppear);
|
||||
} else {
|
||||
init();
|
||||
update(true);
|
||||
}
|
||||
});
|
||||
on('slideChange update resize observerUpdate', () => {
|
||||
update();
|
||||
});
|
||||
on('setTransition', (_s, duration) => {
|
||||
const thumbsSwiper = swiper.thumbs.swiper;
|
||||
if (!thumbsSwiper || thumbsSwiper.destroyed) return;
|
||||
thumbsSwiper.setTransition(duration);
|
||||
});
|
||||
on('beforeDestroy', () => {
|
||||
const thumbsSwiper = swiper.thumbs.swiper;
|
||||
if (!thumbsSwiper || thumbsSwiper.destroyed) return;
|
||||
if (swiperCreated) {
|
||||
thumbsSwiper.destroy();
|
||||
}
|
||||
});
|
||||
Object.assign(swiper.thumbs, {
|
||||
init,
|
||||
update
|
||||
});
|
||||
}
|
||||
|
||||
export { Thumb as default };
|
||||
+349
@@ -0,0 +1,349 @@
|
||||
import { g as getDocument } from '../shared/ssr-window.esm.mjs';
|
||||
import { a as setCSSProperty, e as elementChildren, s as setInnerHTML, c as createElement } from '../shared/utils.mjs';
|
||||
|
||||
function Virtual(_ref) {
|
||||
let {
|
||||
swiper,
|
||||
extendParams,
|
||||
on,
|
||||
emit
|
||||
} = _ref;
|
||||
extendParams({
|
||||
virtual: {
|
||||
enabled: false,
|
||||
slides: [],
|
||||
cache: true,
|
||||
renderSlide: null,
|
||||
renderExternal: null,
|
||||
renderExternalUpdate: true,
|
||||
addSlidesBefore: 0,
|
||||
addSlidesAfter: 0
|
||||
}
|
||||
});
|
||||
let cssModeTimeout;
|
||||
const document = getDocument();
|
||||
swiper.virtual = {
|
||||
cache: {},
|
||||
from: undefined,
|
||||
to: undefined,
|
||||
slides: [],
|
||||
offset: 0,
|
||||
slidesGrid: []
|
||||
};
|
||||
const tempDOM = document.createElement('div');
|
||||
function renderSlide(slide, index) {
|
||||
const params = swiper.params.virtual;
|
||||
if (params.cache && swiper.virtual.cache[index]) {
|
||||
return swiper.virtual.cache[index];
|
||||
}
|
||||
// eslint-disable-next-line
|
||||
let slideEl;
|
||||
if (params.renderSlide) {
|
||||
slideEl = params.renderSlide.call(swiper, slide, index);
|
||||
if (typeof slideEl === 'string') {
|
||||
setInnerHTML(tempDOM, slideEl);
|
||||
slideEl = tempDOM.children[0];
|
||||
}
|
||||
} else if (swiper.isElement) {
|
||||
slideEl = createElement('swiper-slide');
|
||||
} else {
|
||||
slideEl = createElement('div', swiper.params.slideClass);
|
||||
}
|
||||
slideEl.setAttribute('data-swiper-slide-index', index);
|
||||
if (!params.renderSlide) {
|
||||
setInnerHTML(slideEl, slide);
|
||||
}
|
||||
if (params.cache) {
|
||||
swiper.virtual.cache[index] = slideEl;
|
||||
}
|
||||
return slideEl;
|
||||
}
|
||||
function update(force, beforeInit, forceActiveIndex) {
|
||||
const {
|
||||
slidesPerView,
|
||||
slidesPerGroup,
|
||||
centeredSlides,
|
||||
loop: isLoop,
|
||||
initialSlide
|
||||
} = swiper.params;
|
||||
if (beforeInit && !isLoop && initialSlide > 0) {
|
||||
return;
|
||||
}
|
||||
const {
|
||||
addSlidesBefore,
|
||||
addSlidesAfter
|
||||
} = swiper.params.virtual;
|
||||
const {
|
||||
from: previousFrom,
|
||||
to: previousTo,
|
||||
slides,
|
||||
slidesGrid: previousSlidesGrid,
|
||||
offset: previousOffset
|
||||
} = swiper.virtual;
|
||||
if (!swiper.params.cssMode) {
|
||||
swiper.updateActiveIndex();
|
||||
}
|
||||
const activeIndex = typeof forceActiveIndex === 'undefined' ? swiper.activeIndex || 0 : forceActiveIndex;
|
||||
let offsetProp;
|
||||
if (swiper.rtlTranslate) offsetProp = 'right';else offsetProp = swiper.isHorizontal() ? 'left' : 'top';
|
||||
let slidesAfter;
|
||||
let slidesBefore;
|
||||
if (centeredSlides) {
|
||||
slidesAfter = Math.floor(slidesPerView / 2) + slidesPerGroup + addSlidesAfter;
|
||||
slidesBefore = Math.floor(slidesPerView / 2) + slidesPerGroup + addSlidesBefore;
|
||||
} else {
|
||||
slidesAfter = slidesPerView + (slidesPerGroup - 1) + addSlidesAfter;
|
||||
slidesBefore = (isLoop ? slidesPerView : slidesPerGroup) + addSlidesBefore;
|
||||
}
|
||||
let from = activeIndex - slidesBefore;
|
||||
let to = activeIndex + slidesAfter;
|
||||
if (!isLoop) {
|
||||
from = Math.max(from, 0);
|
||||
to = Math.min(to, slides.length - 1);
|
||||
}
|
||||
let offset = (swiper.slidesGrid[from] || 0) - (swiper.slidesGrid[0] || 0);
|
||||
if (isLoop && activeIndex >= slidesBefore) {
|
||||
from -= slidesBefore;
|
||||
if (!centeredSlides) offset += swiper.slidesGrid[0];
|
||||
} else if (isLoop && activeIndex < slidesBefore) {
|
||||
from = -slidesBefore;
|
||||
if (centeredSlides) offset += swiper.slidesGrid[0];
|
||||
}
|
||||
Object.assign(swiper.virtual, {
|
||||
from,
|
||||
to,
|
||||
offset,
|
||||
slidesGrid: swiper.slidesGrid,
|
||||
slidesBefore,
|
||||
slidesAfter
|
||||
});
|
||||
function onRendered() {
|
||||
swiper.updateSlides();
|
||||
swiper.updateProgress();
|
||||
swiper.updateSlidesClasses();
|
||||
emit('virtualUpdate');
|
||||
}
|
||||
if (previousFrom === from && previousTo === to && !force) {
|
||||
if (swiper.slidesGrid !== previousSlidesGrid && offset !== previousOffset) {
|
||||
swiper.slides.forEach(slideEl => {
|
||||
slideEl.style[offsetProp] = `${offset - Math.abs(swiper.cssOverflowAdjustment())}px`;
|
||||
});
|
||||
}
|
||||
swiper.updateProgress();
|
||||
emit('virtualUpdate');
|
||||
return;
|
||||
}
|
||||
if (swiper.params.virtual.renderExternal) {
|
||||
swiper.params.virtual.renderExternal.call(swiper, {
|
||||
offset,
|
||||
from,
|
||||
to,
|
||||
slides: function getSlides() {
|
||||
const slidesToRender = [];
|
||||
for (let i = from; i <= to; i += 1) {
|
||||
slidesToRender.push(slides[i]);
|
||||
}
|
||||
return slidesToRender;
|
||||
}()
|
||||
});
|
||||
if (swiper.params.virtual.renderExternalUpdate) {
|
||||
onRendered();
|
||||
} else {
|
||||
emit('virtualUpdate');
|
||||
}
|
||||
return;
|
||||
}
|
||||
const prependIndexes = [];
|
||||
const appendIndexes = [];
|
||||
const getSlideIndex = index => {
|
||||
let slideIndex = index;
|
||||
if (index < 0) {
|
||||
slideIndex = slides.length + index;
|
||||
} else if (slideIndex >= slides.length) {
|
||||
// eslint-disable-next-line
|
||||
slideIndex = slideIndex - slides.length;
|
||||
}
|
||||
return slideIndex;
|
||||
};
|
||||
if (force) {
|
||||
swiper.slides.filter(el => el.matches(`.${swiper.params.slideClass}, swiper-slide`)).forEach(slideEl => {
|
||||
slideEl.remove();
|
||||
});
|
||||
} else {
|
||||
for (let i = previousFrom; i <= previousTo; i += 1) {
|
||||
if (i < from || i > to) {
|
||||
const slideIndex = getSlideIndex(i);
|
||||
swiper.slides.filter(el => el.matches(`.${swiper.params.slideClass}[data-swiper-slide-index="${slideIndex}"], swiper-slide[data-swiper-slide-index="${slideIndex}"]`)).forEach(slideEl => {
|
||||
slideEl.remove();
|
||||
});
|
||||
}
|
||||
}
|
||||
}
|
||||
const loopFrom = isLoop ? -slides.length : 0;
|
||||
const loopTo = isLoop ? slides.length * 2 : slides.length;
|
||||
for (let i = loopFrom; i < loopTo; i += 1) {
|
||||
if (i >= from && i <= to) {
|
||||
const slideIndex = getSlideIndex(i);
|
||||
if (typeof previousTo === 'undefined' || force) {
|
||||
appendIndexes.push(slideIndex);
|
||||
} else {
|
||||
if (i > previousTo) appendIndexes.push(slideIndex);
|
||||
if (i < previousFrom) prependIndexes.push(slideIndex);
|
||||
}
|
||||
}
|
||||
}
|
||||
appendIndexes.forEach(index => {
|
||||
swiper.slidesEl.append(renderSlide(slides[index], index));
|
||||
});
|
||||
if (isLoop) {
|
||||
for (let i = prependIndexes.length - 1; i >= 0; i -= 1) {
|
||||
const index = prependIndexes[i];
|
||||
swiper.slidesEl.prepend(renderSlide(slides[index], index));
|
||||
}
|
||||
} else {
|
||||
prependIndexes.sort((a, b) => b - a);
|
||||
prependIndexes.forEach(index => {
|
||||
swiper.slidesEl.prepend(renderSlide(slides[index], index));
|
||||
});
|
||||
}
|
||||
elementChildren(swiper.slidesEl, '.swiper-slide, swiper-slide').forEach(slideEl => {
|
||||
slideEl.style[offsetProp] = `${offset - Math.abs(swiper.cssOverflowAdjustment())}px`;
|
||||
});
|
||||
onRendered();
|
||||
}
|
||||
function appendSlide(slides) {
|
||||
if (typeof slides === 'object' && 'length' in slides) {
|
||||
for (let i = 0; i < slides.length; i += 1) {
|
||||
if (slides[i]) swiper.virtual.slides.push(slides[i]);
|
||||
}
|
||||
} else {
|
||||
swiper.virtual.slides.push(slides);
|
||||
}
|
||||
update(true);
|
||||
}
|
||||
function prependSlide(slides) {
|
||||
const activeIndex = swiper.activeIndex;
|
||||
let newActiveIndex = activeIndex + 1;
|
||||
let numberOfNewSlides = 1;
|
||||
if (Array.isArray(slides)) {
|
||||
for (let i = 0; i < slides.length; i += 1) {
|
||||
if (slides[i]) swiper.virtual.slides.unshift(slides[i]);
|
||||
}
|
||||
newActiveIndex = activeIndex + slides.length;
|
||||
numberOfNewSlides = slides.length;
|
||||
} else {
|
||||
swiper.virtual.slides.unshift(slides);
|
||||
}
|
||||
if (swiper.params.virtual.cache) {
|
||||
const cache = swiper.virtual.cache;
|
||||
const newCache = {};
|
||||
Object.keys(cache).forEach(cachedIndex => {
|
||||
const cachedEl = cache[cachedIndex];
|
||||
const cachedElIndex = cachedEl.getAttribute('data-swiper-slide-index');
|
||||
if (cachedElIndex) {
|
||||
cachedEl.setAttribute('data-swiper-slide-index', parseInt(cachedElIndex, 10) + numberOfNewSlides);
|
||||
}
|
||||
newCache[parseInt(cachedIndex, 10) + numberOfNewSlides] = cachedEl;
|
||||
});
|
||||
swiper.virtual.cache = newCache;
|
||||
}
|
||||
update(true);
|
||||
swiper.slideTo(newActiveIndex, 0);
|
||||
}
|
||||
function removeSlide(slidesIndexes) {
|
||||
if (typeof slidesIndexes === 'undefined' || slidesIndexes === null) return;
|
||||
let activeIndex = swiper.activeIndex;
|
||||
if (Array.isArray(slidesIndexes)) {
|
||||
for (let i = slidesIndexes.length - 1; i >= 0; i -= 1) {
|
||||
if (swiper.params.virtual.cache) {
|
||||
delete swiper.virtual.cache[slidesIndexes[i]];
|
||||
// shift cache indexes
|
||||
Object.keys(swiper.virtual.cache).forEach(key => {
|
||||
if (key > slidesIndexes) {
|
||||
swiper.virtual.cache[key - 1] = swiper.virtual.cache[key];
|
||||
swiper.virtual.cache[key - 1].setAttribute('data-swiper-slide-index', key - 1);
|
||||
delete swiper.virtual.cache[key];
|
||||
}
|
||||
});
|
||||
}
|
||||
swiper.virtual.slides.splice(slidesIndexes[i], 1);
|
||||
if (slidesIndexes[i] < activeIndex) activeIndex -= 1;
|
||||
activeIndex = Math.max(activeIndex, 0);
|
||||
}
|
||||
} else {
|
||||
if (swiper.params.virtual.cache) {
|
||||
delete swiper.virtual.cache[slidesIndexes];
|
||||
// shift cache indexes
|
||||
Object.keys(swiper.virtual.cache).forEach(key => {
|
||||
if (key > slidesIndexes) {
|
||||
swiper.virtual.cache[key - 1] = swiper.virtual.cache[key];
|
||||
swiper.virtual.cache[key - 1].setAttribute('data-swiper-slide-index', key - 1);
|
||||
delete swiper.virtual.cache[key];
|
||||
}
|
||||
});
|
||||
}
|
||||
swiper.virtual.slides.splice(slidesIndexes, 1);
|
||||
if (slidesIndexes < activeIndex) activeIndex -= 1;
|
||||
activeIndex = Math.max(activeIndex, 0);
|
||||
}
|
||||
update(true);
|
||||
swiper.slideTo(activeIndex, 0);
|
||||
}
|
||||
function removeAllSlides() {
|
||||
swiper.virtual.slides = [];
|
||||
if (swiper.params.virtual.cache) {
|
||||
swiper.virtual.cache = {};
|
||||
}
|
||||
update(true);
|
||||
swiper.slideTo(0, 0);
|
||||
}
|
||||
on('beforeInit', () => {
|
||||
if (!swiper.params.virtual.enabled) return;
|
||||
let domSlidesAssigned;
|
||||
if (typeof swiper.passedParams.virtual.slides === 'undefined') {
|
||||
const slides = [...swiper.slidesEl.children].filter(el => el.matches(`.${swiper.params.slideClass}, swiper-slide`));
|
||||
if (slides && slides.length) {
|
||||
swiper.virtual.slides = [...slides];
|
||||
domSlidesAssigned = true;
|
||||
slides.forEach((slideEl, slideIndex) => {
|
||||
slideEl.setAttribute('data-swiper-slide-index', slideIndex);
|
||||
swiper.virtual.cache[slideIndex] = slideEl;
|
||||
slideEl.remove();
|
||||
});
|
||||
}
|
||||
}
|
||||
if (!domSlidesAssigned) {
|
||||
swiper.virtual.slides = swiper.params.virtual.slides;
|
||||
}
|
||||
swiper.classNames.push(`${swiper.params.containerModifierClass}virtual`);
|
||||
swiper.params.watchSlidesProgress = true;
|
||||
swiper.originalParams.watchSlidesProgress = true;
|
||||
update(false, true);
|
||||
});
|
||||
on('setTranslate', () => {
|
||||
if (!swiper.params.virtual.enabled) return;
|
||||
if (swiper.params.cssMode && !swiper._immediateVirtual) {
|
||||
clearTimeout(cssModeTimeout);
|
||||
cssModeTimeout = setTimeout(() => {
|
||||
update();
|
||||
}, 100);
|
||||
} else {
|
||||
update();
|
||||
}
|
||||
});
|
||||
on('init update resize', () => {
|
||||
if (!swiper.params.virtual.enabled) return;
|
||||
if (swiper.params.cssMode) {
|
||||
setCSSProperty(swiper.wrapperEl, '--swiper-virtual-size', `${swiper.virtualSize}px`);
|
||||
}
|
||||
});
|
||||
Object.assign(swiper.virtual, {
|
||||
appendSlide,
|
||||
prependSlide,
|
||||
removeSlide,
|
||||
removeAllSlides,
|
||||
update
|
||||
});
|
||||
}
|
||||
|
||||
export { Virtual as default };
|
||||
+701
@@ -0,0 +1,701 @@
|
||||
import { a as getWindow } from '../shared/ssr-window.esm.mjs';
|
||||
import { e as elementChildren, b as elementParents, d as elementOffset, k as getTranslate } from '../shared/utils.mjs';
|
||||
|
||||
function Zoom(_ref) {
|
||||
let {
|
||||
swiper,
|
||||
extendParams,
|
||||
on,
|
||||
emit
|
||||
} = _ref;
|
||||
const window = getWindow();
|
||||
extendParams({
|
||||
zoom: {
|
||||
enabled: false,
|
||||
limitToOriginalSize: false,
|
||||
maxRatio: 3,
|
||||
minRatio: 1,
|
||||
panOnMouseMove: false,
|
||||
toggle: true,
|
||||
containerClass: 'swiper-zoom-container',
|
||||
zoomedSlideClass: 'swiper-slide-zoomed'
|
||||
}
|
||||
});
|
||||
swiper.zoom = {
|
||||
enabled: false
|
||||
};
|
||||
let currentScale = 1;
|
||||
let isScaling = false;
|
||||
let isPanningWithMouse = false;
|
||||
let mousePanStart = {
|
||||
x: 0,
|
||||
y: 0
|
||||
};
|
||||
const mousePanSensitivity = -3; // Negative to invert pan direction
|
||||
let fakeGestureTouched;
|
||||
let fakeGestureMoved;
|
||||
const evCache = [];
|
||||
const gesture = {
|
||||
originX: 0,
|
||||
originY: 0,
|
||||
slideEl: undefined,
|
||||
slideWidth: undefined,
|
||||
slideHeight: undefined,
|
||||
imageEl: undefined,
|
||||
imageWrapEl: undefined,
|
||||
maxRatio: 3
|
||||
};
|
||||
const image = {
|
||||
isTouched: undefined,
|
||||
isMoved: undefined,
|
||||
currentX: undefined,
|
||||
currentY: undefined,
|
||||
minX: undefined,
|
||||
minY: undefined,
|
||||
maxX: undefined,
|
||||
maxY: undefined,
|
||||
width: undefined,
|
||||
height: undefined,
|
||||
startX: undefined,
|
||||
startY: undefined,
|
||||
touchesStart: {},
|
||||
touchesCurrent: {}
|
||||
};
|
||||
const velocity = {
|
||||
x: undefined,
|
||||
y: undefined,
|
||||
prevPositionX: undefined,
|
||||
prevPositionY: undefined,
|
||||
prevTime: undefined
|
||||
};
|
||||
let scale = 1;
|
||||
Object.defineProperty(swiper.zoom, 'scale', {
|
||||
get() {
|
||||
return scale;
|
||||
},
|
||||
set(value) {
|
||||
if (scale !== value) {
|
||||
const imageEl = gesture.imageEl;
|
||||
const slideEl = gesture.slideEl;
|
||||
emit('zoomChange', value, imageEl, slideEl);
|
||||
}
|
||||
scale = value;
|
||||
}
|
||||
});
|
||||
function getDistanceBetweenTouches() {
|
||||
if (evCache.length < 2) return 1;
|
||||
const x1 = evCache[0].pageX;
|
||||
const y1 = evCache[0].pageY;
|
||||
const x2 = evCache[1].pageX;
|
||||
const y2 = evCache[1].pageY;
|
||||
const distance = Math.sqrt((x2 - x1) ** 2 + (y2 - y1) ** 2);
|
||||
return distance;
|
||||
}
|
||||
function getMaxRatio() {
|
||||
const params = swiper.params.zoom;
|
||||
const maxRatio = gesture.imageWrapEl.getAttribute('data-swiper-zoom') || params.maxRatio;
|
||||
if (params.limitToOriginalSize && gesture.imageEl && gesture.imageEl.naturalWidth) {
|
||||
const imageMaxRatio = gesture.imageEl.naturalWidth / gesture.imageEl.offsetWidth;
|
||||
return Math.min(imageMaxRatio, maxRatio);
|
||||
}
|
||||
return maxRatio;
|
||||
}
|
||||
function getScaleOrigin() {
|
||||
if (evCache.length < 2) return {
|
||||
x: null,
|
||||
y: null
|
||||
};
|
||||
const box = gesture.imageEl.getBoundingClientRect();
|
||||
return [(evCache[0].pageX + (evCache[1].pageX - evCache[0].pageX) / 2 - box.x - window.scrollX) / currentScale, (evCache[0].pageY + (evCache[1].pageY - evCache[0].pageY) / 2 - box.y - window.scrollY) / currentScale];
|
||||
}
|
||||
function getSlideSelector() {
|
||||
return swiper.isElement ? `swiper-slide` : `.${swiper.params.slideClass}`;
|
||||
}
|
||||
function eventWithinSlide(e) {
|
||||
const slideSelector = getSlideSelector();
|
||||
if (e.target.matches(slideSelector)) return true;
|
||||
if (swiper.slides.filter(slideEl => slideEl.contains(e.target)).length > 0) return true;
|
||||
return false;
|
||||
}
|
||||
function eventWithinZoomContainer(e) {
|
||||
const selector = `.${swiper.params.zoom.containerClass}`;
|
||||
if (e.target.matches(selector)) return true;
|
||||
if ([...swiper.hostEl.querySelectorAll(selector)].filter(containerEl => containerEl.contains(e.target)).length > 0) return true;
|
||||
return false;
|
||||
}
|
||||
|
||||
// Events
|
||||
function onGestureStart(e) {
|
||||
if (e.pointerType === 'mouse') {
|
||||
evCache.splice(0, evCache.length);
|
||||
}
|
||||
if (!eventWithinSlide(e)) return;
|
||||
const params = swiper.params.zoom;
|
||||
fakeGestureTouched = false;
|
||||
fakeGestureMoved = false;
|
||||
evCache.push(e);
|
||||
if (evCache.length < 2) {
|
||||
return;
|
||||
}
|
||||
fakeGestureTouched = true;
|
||||
gesture.scaleStart = getDistanceBetweenTouches();
|
||||
if (!gesture.slideEl) {
|
||||
gesture.slideEl = e.target.closest(`.${swiper.params.slideClass}, swiper-slide`);
|
||||
if (!gesture.slideEl) gesture.slideEl = swiper.slides[swiper.activeIndex];
|
||||
let imageEl = gesture.slideEl.querySelector(`.${params.containerClass}`);
|
||||
if (imageEl) {
|
||||
imageEl = imageEl.querySelectorAll('picture, img, svg, canvas, .swiper-zoom-target')[0];
|
||||
}
|
||||
gesture.imageEl = imageEl;
|
||||
if (imageEl) {
|
||||
gesture.imageWrapEl = elementParents(gesture.imageEl, `.${params.containerClass}`)[0];
|
||||
} else {
|
||||
gesture.imageWrapEl = undefined;
|
||||
}
|
||||
if (!gesture.imageWrapEl) {
|
||||
gesture.imageEl = undefined;
|
||||
return;
|
||||
}
|
||||
gesture.maxRatio = getMaxRatio();
|
||||
}
|
||||
if (gesture.imageEl) {
|
||||
const [originX, originY] = getScaleOrigin();
|
||||
gesture.originX = originX;
|
||||
gesture.originY = originY;
|
||||
gesture.imageEl.style.transitionDuration = '0ms';
|
||||
}
|
||||
isScaling = true;
|
||||
}
|
||||
function onGestureChange(e) {
|
||||
if (!eventWithinSlide(e)) return;
|
||||
const params = swiper.params.zoom;
|
||||
const zoom = swiper.zoom;
|
||||
const pointerIndex = evCache.findIndex(cachedEv => cachedEv.pointerId === e.pointerId);
|
||||
if (pointerIndex >= 0) evCache[pointerIndex] = e;
|
||||
if (evCache.length < 2) {
|
||||
return;
|
||||
}
|
||||
fakeGestureMoved = true;
|
||||
gesture.scaleMove = getDistanceBetweenTouches();
|
||||
if (!gesture.imageEl) {
|
||||
return;
|
||||
}
|
||||
zoom.scale = gesture.scaleMove / gesture.scaleStart * currentScale;
|
||||
if (zoom.scale > gesture.maxRatio) {
|
||||
zoom.scale = gesture.maxRatio - 1 + (zoom.scale - gesture.maxRatio + 1) ** 0.5;
|
||||
}
|
||||
if (zoom.scale < params.minRatio) {
|
||||
zoom.scale = params.minRatio + 1 - (params.minRatio - zoom.scale + 1) ** 0.5;
|
||||
}
|
||||
gesture.imageEl.style.transform = `translate3d(0,0,0) scale(${zoom.scale})`;
|
||||
}
|
||||
function onGestureEnd(e) {
|
||||
if (!eventWithinSlide(e)) return;
|
||||
if (e.pointerType === 'mouse' && e.type === 'pointerout') return;
|
||||
const params = swiper.params.zoom;
|
||||
const zoom = swiper.zoom;
|
||||
const pointerIndex = evCache.findIndex(cachedEv => cachedEv.pointerId === e.pointerId);
|
||||
if (pointerIndex >= 0) evCache.splice(pointerIndex, 1);
|
||||
if (!fakeGestureTouched || !fakeGestureMoved) {
|
||||
return;
|
||||
}
|
||||
fakeGestureTouched = false;
|
||||
fakeGestureMoved = false;
|
||||
if (!gesture.imageEl) return;
|
||||
zoom.scale = Math.max(Math.min(zoom.scale, gesture.maxRatio), params.minRatio);
|
||||
gesture.imageEl.style.transitionDuration = `${swiper.params.speed}ms`;
|
||||
gesture.imageEl.style.transform = `translate3d(0,0,0) scale(${zoom.scale})`;
|
||||
currentScale = zoom.scale;
|
||||
isScaling = false;
|
||||
if (zoom.scale > 1 && gesture.slideEl) {
|
||||
gesture.slideEl.classList.add(`${params.zoomedSlideClass}`);
|
||||
} else if (zoom.scale <= 1 && gesture.slideEl) {
|
||||
gesture.slideEl.classList.remove(`${params.zoomedSlideClass}`);
|
||||
}
|
||||
if (zoom.scale === 1) {
|
||||
gesture.originX = 0;
|
||||
gesture.originY = 0;
|
||||
gesture.slideEl = undefined;
|
||||
}
|
||||
}
|
||||
let allowTouchMoveTimeout;
|
||||
function allowTouchMove() {
|
||||
swiper.touchEventsData.preventTouchMoveFromPointerMove = false;
|
||||
}
|
||||
function preventTouchMove() {
|
||||
clearTimeout(allowTouchMoveTimeout);
|
||||
swiper.touchEventsData.preventTouchMoveFromPointerMove = true;
|
||||
allowTouchMoveTimeout = setTimeout(() => {
|
||||
if (swiper.destroyed) return;
|
||||
allowTouchMove();
|
||||
});
|
||||
}
|
||||
function onTouchStart(e) {
|
||||
const device = swiper.device;
|
||||
if (!gesture.imageEl) return;
|
||||
if (image.isTouched) return;
|
||||
if (device.android && e.cancelable) e.preventDefault();
|
||||
image.isTouched = true;
|
||||
const event = evCache.length > 0 ? evCache[0] : e;
|
||||
image.touchesStart.x = event.pageX;
|
||||
image.touchesStart.y = event.pageY;
|
||||
}
|
||||
function onTouchMove(e) {
|
||||
const isMouseEvent = e.pointerType === 'mouse';
|
||||
const isMousePan = isMouseEvent && swiper.params.zoom.panOnMouseMove;
|
||||
if (!eventWithinSlide(e) || !eventWithinZoomContainer(e)) {
|
||||
return;
|
||||
}
|
||||
const zoom = swiper.zoom;
|
||||
if (!gesture.imageEl) {
|
||||
return;
|
||||
}
|
||||
if (!image.isTouched || !gesture.slideEl) {
|
||||
if (isMousePan) onMouseMove(e);
|
||||
return;
|
||||
}
|
||||
if (isMousePan) {
|
||||
onMouseMove(e);
|
||||
return;
|
||||
}
|
||||
if (!image.isMoved) {
|
||||
image.width = gesture.imageEl.offsetWidth || gesture.imageEl.clientWidth;
|
||||
image.height = gesture.imageEl.offsetHeight || gesture.imageEl.clientHeight;
|
||||
image.startX = getTranslate(gesture.imageWrapEl, 'x') || 0;
|
||||
image.startY = getTranslate(gesture.imageWrapEl, 'y') || 0;
|
||||
gesture.slideWidth = gesture.slideEl.offsetWidth;
|
||||
gesture.slideHeight = gesture.slideEl.offsetHeight;
|
||||
gesture.imageWrapEl.style.transitionDuration = '0ms';
|
||||
}
|
||||
// Define if we need image drag
|
||||
const scaledWidth = image.width * zoom.scale;
|
||||
const scaledHeight = image.height * zoom.scale;
|
||||
image.minX = Math.min(gesture.slideWidth / 2 - scaledWidth / 2, 0);
|
||||
image.maxX = -image.minX;
|
||||
image.minY = Math.min(gesture.slideHeight / 2 - scaledHeight / 2, 0);
|
||||
image.maxY = -image.minY;
|
||||
image.touchesCurrent.x = evCache.length > 0 ? evCache[0].pageX : e.pageX;
|
||||
image.touchesCurrent.y = evCache.length > 0 ? evCache[0].pageY : e.pageY;
|
||||
const touchesDiff = Math.max(Math.abs(image.touchesCurrent.x - image.touchesStart.x), Math.abs(image.touchesCurrent.y - image.touchesStart.y));
|
||||
if (touchesDiff > 5) {
|
||||
swiper.allowClick = false;
|
||||
}
|
||||
if (!image.isMoved && !isScaling) {
|
||||
if (swiper.isHorizontal() && (Math.floor(image.minX) === Math.floor(image.startX) && image.touchesCurrent.x < image.touchesStart.x || Math.floor(image.maxX) === Math.floor(image.startX) && image.touchesCurrent.x > image.touchesStart.x)) {
|
||||
image.isTouched = false;
|
||||
allowTouchMove();
|
||||
return;
|
||||
}
|
||||
if (!swiper.isHorizontal() && (Math.floor(image.minY) === Math.floor(image.startY) && image.touchesCurrent.y < image.touchesStart.y || Math.floor(image.maxY) === Math.floor(image.startY) && image.touchesCurrent.y > image.touchesStart.y)) {
|
||||
image.isTouched = false;
|
||||
allowTouchMove();
|
||||
return;
|
||||
}
|
||||
}
|
||||
if (e.cancelable) {
|
||||
e.preventDefault();
|
||||
}
|
||||
e.stopPropagation();
|
||||
preventTouchMove();
|
||||
image.isMoved = true;
|
||||
const scaleRatio = (zoom.scale - currentScale) / (gesture.maxRatio - swiper.params.zoom.minRatio);
|
||||
const {
|
||||
originX,
|
||||
originY
|
||||
} = gesture;
|
||||
image.currentX = image.touchesCurrent.x - image.touchesStart.x + image.startX + scaleRatio * (image.width - originX * 2);
|
||||
image.currentY = image.touchesCurrent.y - image.touchesStart.y + image.startY + scaleRatio * (image.height - originY * 2);
|
||||
if (image.currentX < image.minX) {
|
||||
image.currentX = image.minX + 1 - (image.minX - image.currentX + 1) ** 0.8;
|
||||
}
|
||||
if (image.currentX > image.maxX) {
|
||||
image.currentX = image.maxX - 1 + (image.currentX - image.maxX + 1) ** 0.8;
|
||||
}
|
||||
if (image.currentY < image.minY) {
|
||||
image.currentY = image.minY + 1 - (image.minY - image.currentY + 1) ** 0.8;
|
||||
}
|
||||
if (image.currentY > image.maxY) {
|
||||
image.currentY = image.maxY - 1 + (image.currentY - image.maxY + 1) ** 0.8;
|
||||
}
|
||||
|
||||
// Velocity
|
||||
if (!velocity.prevPositionX) velocity.prevPositionX = image.touchesCurrent.x;
|
||||
if (!velocity.prevPositionY) velocity.prevPositionY = image.touchesCurrent.y;
|
||||
if (!velocity.prevTime) velocity.prevTime = Date.now();
|
||||
velocity.x = (image.touchesCurrent.x - velocity.prevPositionX) / (Date.now() - velocity.prevTime) / 2;
|
||||
velocity.y = (image.touchesCurrent.y - velocity.prevPositionY) / (Date.now() - velocity.prevTime) / 2;
|
||||
if (Math.abs(image.touchesCurrent.x - velocity.prevPositionX) < 2) velocity.x = 0;
|
||||
if (Math.abs(image.touchesCurrent.y - velocity.prevPositionY) < 2) velocity.y = 0;
|
||||
velocity.prevPositionX = image.touchesCurrent.x;
|
||||
velocity.prevPositionY = image.touchesCurrent.y;
|
||||
velocity.prevTime = Date.now();
|
||||
gesture.imageWrapEl.style.transform = `translate3d(${image.currentX}px, ${image.currentY}px,0)`;
|
||||
}
|
||||
function onTouchEnd() {
|
||||
const zoom = swiper.zoom;
|
||||
evCache.length = 0;
|
||||
if (!gesture.imageEl) return;
|
||||
if (!image.isTouched || !image.isMoved) {
|
||||
image.isTouched = false;
|
||||
image.isMoved = false;
|
||||
return;
|
||||
}
|
||||
image.isTouched = false;
|
||||
image.isMoved = false;
|
||||
let momentumDurationX = 300;
|
||||
let momentumDurationY = 300;
|
||||
const momentumDistanceX = velocity.x * momentumDurationX;
|
||||
const newPositionX = image.currentX + momentumDistanceX;
|
||||
const momentumDistanceY = velocity.y * momentumDurationY;
|
||||
const newPositionY = image.currentY + momentumDistanceY;
|
||||
|
||||
// Fix duration
|
||||
if (velocity.x !== 0) momentumDurationX = Math.abs((newPositionX - image.currentX) / velocity.x);
|
||||
if (velocity.y !== 0) momentumDurationY = Math.abs((newPositionY - image.currentY) / velocity.y);
|
||||
const momentumDuration = Math.max(momentumDurationX, momentumDurationY);
|
||||
image.currentX = newPositionX;
|
||||
image.currentY = newPositionY;
|
||||
// Define if we need image drag
|
||||
const scaledWidth = image.width * zoom.scale;
|
||||
const scaledHeight = image.height * zoom.scale;
|
||||
image.minX = Math.min(gesture.slideWidth / 2 - scaledWidth / 2, 0);
|
||||
image.maxX = -image.minX;
|
||||
image.minY = Math.min(gesture.slideHeight / 2 - scaledHeight / 2, 0);
|
||||
image.maxY = -image.minY;
|
||||
image.currentX = Math.max(Math.min(image.currentX, image.maxX), image.minX);
|
||||
image.currentY = Math.max(Math.min(image.currentY, image.maxY), image.minY);
|
||||
gesture.imageWrapEl.style.transitionDuration = `${momentumDuration}ms`;
|
||||
gesture.imageWrapEl.style.transform = `translate3d(${image.currentX}px, ${image.currentY}px,0)`;
|
||||
}
|
||||
function onTransitionEnd() {
|
||||
const zoom = swiper.zoom;
|
||||
if (gesture.slideEl && swiper.activeIndex !== swiper.slides.indexOf(gesture.slideEl)) {
|
||||
if (gesture.imageEl) {
|
||||
gesture.imageEl.style.transform = 'translate3d(0,0,0) scale(1)';
|
||||
}
|
||||
if (gesture.imageWrapEl) {
|
||||
gesture.imageWrapEl.style.transform = 'translate3d(0,0,0)';
|
||||
}
|
||||
gesture.slideEl.classList.remove(`${swiper.params.zoom.zoomedSlideClass}`);
|
||||
zoom.scale = 1;
|
||||
currentScale = 1;
|
||||
gesture.slideEl = undefined;
|
||||
gesture.imageEl = undefined;
|
||||
gesture.imageWrapEl = undefined;
|
||||
gesture.originX = 0;
|
||||
gesture.originY = 0;
|
||||
}
|
||||
}
|
||||
function onMouseMove(e) {
|
||||
// Only pan if zoomed in and mouse panning is enabled
|
||||
if (currentScale <= 1 || !gesture.imageWrapEl) return;
|
||||
if (!eventWithinSlide(e) || !eventWithinZoomContainer(e)) return;
|
||||
const currentTransform = window.getComputedStyle(gesture.imageWrapEl).transform;
|
||||
const matrix = new window.DOMMatrix(currentTransform);
|
||||
if (!isPanningWithMouse) {
|
||||
isPanningWithMouse = true;
|
||||
mousePanStart.x = e.clientX;
|
||||
mousePanStart.y = e.clientY;
|
||||
image.startX = matrix.e;
|
||||
image.startY = matrix.f;
|
||||
image.width = gesture.imageEl.offsetWidth || gesture.imageEl.clientWidth;
|
||||
image.height = gesture.imageEl.offsetHeight || gesture.imageEl.clientHeight;
|
||||
gesture.slideWidth = gesture.slideEl.offsetWidth;
|
||||
gesture.slideHeight = gesture.slideEl.offsetHeight;
|
||||
return;
|
||||
}
|
||||
const deltaX = (e.clientX - mousePanStart.x) * mousePanSensitivity;
|
||||
const deltaY = (e.clientY - mousePanStart.y) * mousePanSensitivity;
|
||||
const scaledWidth = image.width * currentScale;
|
||||
const scaledHeight = image.height * currentScale;
|
||||
const slideWidth = gesture.slideWidth;
|
||||
const slideHeight = gesture.slideHeight;
|
||||
const minX = Math.min(slideWidth / 2 - scaledWidth / 2, 0);
|
||||
const maxX = -minX;
|
||||
const minY = Math.min(slideHeight / 2 - scaledHeight / 2, 0);
|
||||
const maxY = -minY;
|
||||
const newX = Math.max(Math.min(image.startX + deltaX, maxX), minX);
|
||||
const newY = Math.max(Math.min(image.startY + deltaY, maxY), minY);
|
||||
gesture.imageWrapEl.style.transitionDuration = '0ms';
|
||||
gesture.imageWrapEl.style.transform = `translate3d(${newX}px, ${newY}px, 0)`;
|
||||
mousePanStart.x = e.clientX;
|
||||
mousePanStart.y = e.clientY;
|
||||
image.startX = newX;
|
||||
image.startY = newY;
|
||||
image.currentX = newX;
|
||||
image.currentY = newY;
|
||||
}
|
||||
function zoomIn(e) {
|
||||
const zoom = swiper.zoom;
|
||||
const params = swiper.params.zoom;
|
||||
if (!gesture.slideEl) {
|
||||
if (e && e.target) {
|
||||
gesture.slideEl = e.target.closest(`.${swiper.params.slideClass}, swiper-slide`);
|
||||
}
|
||||
if (!gesture.slideEl) {
|
||||
if (swiper.params.virtual && swiper.params.virtual.enabled && swiper.virtual) {
|
||||
gesture.slideEl = elementChildren(swiper.slidesEl, `.${swiper.params.slideActiveClass}`)[0];
|
||||
} else {
|
||||
gesture.slideEl = swiper.slides[swiper.activeIndex];
|
||||
}
|
||||
}
|
||||
let imageEl = gesture.slideEl.querySelector(`.${params.containerClass}`);
|
||||
if (imageEl) {
|
||||
imageEl = imageEl.querySelectorAll('picture, img, svg, canvas, .swiper-zoom-target')[0];
|
||||
}
|
||||
gesture.imageEl = imageEl;
|
||||
if (imageEl) {
|
||||
gesture.imageWrapEl = elementParents(gesture.imageEl, `.${params.containerClass}`)[0];
|
||||
} else {
|
||||
gesture.imageWrapEl = undefined;
|
||||
}
|
||||
}
|
||||
if (!gesture.imageEl || !gesture.imageWrapEl) return;
|
||||
if (swiper.params.cssMode) {
|
||||
swiper.wrapperEl.style.overflow = 'hidden';
|
||||
swiper.wrapperEl.style.touchAction = 'none';
|
||||
}
|
||||
gesture.slideEl.classList.add(`${params.zoomedSlideClass}`);
|
||||
let touchX;
|
||||
let touchY;
|
||||
let offsetX;
|
||||
let offsetY;
|
||||
let diffX;
|
||||
let diffY;
|
||||
let translateX;
|
||||
let translateY;
|
||||
let imageWidth;
|
||||
let imageHeight;
|
||||
let scaledWidth;
|
||||
let scaledHeight;
|
||||
let translateMinX;
|
||||
let translateMinY;
|
||||
let translateMaxX;
|
||||
let translateMaxY;
|
||||
let slideWidth;
|
||||
let slideHeight;
|
||||
if (typeof image.touchesStart.x === 'undefined' && e) {
|
||||
touchX = e.pageX;
|
||||
touchY = e.pageY;
|
||||
} else {
|
||||
touchX = image.touchesStart.x;
|
||||
touchY = image.touchesStart.y;
|
||||
}
|
||||
const prevScale = currentScale;
|
||||
const forceZoomRatio = typeof e === 'number' ? e : null;
|
||||
if (currentScale === 1 && forceZoomRatio) {
|
||||
touchX = undefined;
|
||||
touchY = undefined;
|
||||
image.touchesStart.x = undefined;
|
||||
image.touchesStart.y = undefined;
|
||||
}
|
||||
const maxRatio = getMaxRatio();
|
||||
zoom.scale = forceZoomRatio || maxRatio;
|
||||
currentScale = forceZoomRatio || maxRatio;
|
||||
if (e && !(currentScale === 1 && forceZoomRatio)) {
|
||||
slideWidth = gesture.slideEl.offsetWidth;
|
||||
slideHeight = gesture.slideEl.offsetHeight;
|
||||
offsetX = elementOffset(gesture.slideEl).left + window.scrollX;
|
||||
offsetY = elementOffset(gesture.slideEl).top + window.scrollY;
|
||||
diffX = offsetX + slideWidth / 2 - touchX;
|
||||
diffY = offsetY + slideHeight / 2 - touchY;
|
||||
imageWidth = gesture.imageEl.offsetWidth || gesture.imageEl.clientWidth;
|
||||
imageHeight = gesture.imageEl.offsetHeight || gesture.imageEl.clientHeight;
|
||||
scaledWidth = imageWidth * zoom.scale;
|
||||
scaledHeight = imageHeight * zoom.scale;
|
||||
translateMinX = Math.min(slideWidth / 2 - scaledWidth / 2, 0);
|
||||
translateMinY = Math.min(slideHeight / 2 - scaledHeight / 2, 0);
|
||||
translateMaxX = -translateMinX;
|
||||
translateMaxY = -translateMinY;
|
||||
if (prevScale > 0 && forceZoomRatio && typeof image.currentX === 'number' && typeof image.currentY === 'number') {
|
||||
translateX = image.currentX * zoom.scale / prevScale;
|
||||
translateY = image.currentY * zoom.scale / prevScale;
|
||||
} else {
|
||||
translateX = diffX * zoom.scale;
|
||||
translateY = diffY * zoom.scale;
|
||||
}
|
||||
if (translateX < translateMinX) {
|
||||
translateX = translateMinX;
|
||||
}
|
||||
if (translateX > translateMaxX) {
|
||||
translateX = translateMaxX;
|
||||
}
|
||||
if (translateY < translateMinY) {
|
||||
translateY = translateMinY;
|
||||
}
|
||||
if (translateY > translateMaxY) {
|
||||
translateY = translateMaxY;
|
||||
}
|
||||
} else {
|
||||
translateX = 0;
|
||||
translateY = 0;
|
||||
}
|
||||
if (forceZoomRatio && zoom.scale === 1) {
|
||||
gesture.originX = 0;
|
||||
gesture.originY = 0;
|
||||
}
|
||||
image.currentX = translateX;
|
||||
image.currentY = translateY;
|
||||
gesture.imageWrapEl.style.transitionDuration = '300ms';
|
||||
gesture.imageWrapEl.style.transform = `translate3d(${translateX}px, ${translateY}px,0)`;
|
||||
gesture.imageEl.style.transitionDuration = '300ms';
|
||||
gesture.imageEl.style.transform = `translate3d(0,0,0) scale(${zoom.scale})`;
|
||||
}
|
||||
function zoomOut() {
|
||||
const zoom = swiper.zoom;
|
||||
const params = swiper.params.zoom;
|
||||
if (!gesture.slideEl) {
|
||||
if (swiper.params.virtual && swiper.params.virtual.enabled && swiper.virtual) {
|
||||
gesture.slideEl = elementChildren(swiper.slidesEl, `.${swiper.params.slideActiveClass}`)[0];
|
||||
} else {
|
||||
gesture.slideEl = swiper.slides[swiper.activeIndex];
|
||||
}
|
||||
let imageEl = gesture.slideEl.querySelector(`.${params.containerClass}`);
|
||||
if (imageEl) {
|
||||
imageEl = imageEl.querySelectorAll('picture, img, svg, canvas, .swiper-zoom-target')[0];
|
||||
}
|
||||
gesture.imageEl = imageEl;
|
||||
if (imageEl) {
|
||||
gesture.imageWrapEl = elementParents(gesture.imageEl, `.${params.containerClass}`)[0];
|
||||
} else {
|
||||
gesture.imageWrapEl = undefined;
|
||||
}
|
||||
}
|
||||
if (!gesture.imageEl || !gesture.imageWrapEl) return;
|
||||
if (swiper.params.cssMode) {
|
||||
swiper.wrapperEl.style.overflow = '';
|
||||
swiper.wrapperEl.style.touchAction = '';
|
||||
}
|
||||
zoom.scale = 1;
|
||||
currentScale = 1;
|
||||
image.currentX = undefined;
|
||||
image.currentY = undefined;
|
||||
image.touchesStart.x = undefined;
|
||||
image.touchesStart.y = undefined;
|
||||
gesture.imageWrapEl.style.transitionDuration = '300ms';
|
||||
gesture.imageWrapEl.style.transform = 'translate3d(0,0,0)';
|
||||
gesture.imageEl.style.transitionDuration = '300ms';
|
||||
gesture.imageEl.style.transform = 'translate3d(0,0,0) scale(1)';
|
||||
gesture.slideEl.classList.remove(`${params.zoomedSlideClass}`);
|
||||
gesture.slideEl = undefined;
|
||||
gesture.originX = 0;
|
||||
gesture.originY = 0;
|
||||
if (swiper.params.zoom.panOnMouseMove) {
|
||||
mousePanStart = {
|
||||
x: 0,
|
||||
y: 0
|
||||
};
|
||||
if (isPanningWithMouse) {
|
||||
isPanningWithMouse = false;
|
||||
image.startX = 0;
|
||||
image.startY = 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Toggle Zoom
|
||||
function zoomToggle(e) {
|
||||
const zoom = swiper.zoom;
|
||||
if (zoom.scale && zoom.scale !== 1) {
|
||||
// Zoom Out
|
||||
zoomOut();
|
||||
} else {
|
||||
// Zoom In
|
||||
zoomIn(e);
|
||||
}
|
||||
}
|
||||
function getListeners() {
|
||||
const passiveListener = swiper.params.passiveListeners ? {
|
||||
passive: true,
|
||||
capture: false
|
||||
} : false;
|
||||
const activeListenerWithCapture = swiper.params.passiveListeners ? {
|
||||
passive: false,
|
||||
capture: true
|
||||
} : true;
|
||||
return {
|
||||
passiveListener,
|
||||
activeListenerWithCapture
|
||||
};
|
||||
}
|
||||
|
||||
// Attach/Detach Events
|
||||
function enable() {
|
||||
const zoom = swiper.zoom;
|
||||
if (zoom.enabled) return;
|
||||
zoom.enabled = true;
|
||||
const {
|
||||
passiveListener,
|
||||
activeListenerWithCapture
|
||||
} = getListeners();
|
||||
|
||||
// Scale image
|
||||
swiper.wrapperEl.addEventListener('pointerdown', onGestureStart, passiveListener);
|
||||
swiper.wrapperEl.addEventListener('pointermove', onGestureChange, activeListenerWithCapture);
|
||||
['pointerup', 'pointercancel', 'pointerout'].forEach(eventName => {
|
||||
swiper.wrapperEl.addEventListener(eventName, onGestureEnd, passiveListener);
|
||||
});
|
||||
|
||||
// Move image
|
||||
swiper.wrapperEl.addEventListener('pointermove', onTouchMove, activeListenerWithCapture);
|
||||
}
|
||||
function disable() {
|
||||
const zoom = swiper.zoom;
|
||||
if (!zoom.enabled) return;
|
||||
zoom.enabled = false;
|
||||
const {
|
||||
passiveListener,
|
||||
activeListenerWithCapture
|
||||
} = getListeners();
|
||||
|
||||
// Scale image
|
||||
swiper.wrapperEl.removeEventListener('pointerdown', onGestureStart, passiveListener);
|
||||
swiper.wrapperEl.removeEventListener('pointermove', onGestureChange, activeListenerWithCapture);
|
||||
['pointerup', 'pointercancel', 'pointerout'].forEach(eventName => {
|
||||
swiper.wrapperEl.removeEventListener(eventName, onGestureEnd, passiveListener);
|
||||
});
|
||||
|
||||
// Move image
|
||||
swiper.wrapperEl.removeEventListener('pointermove', onTouchMove, activeListenerWithCapture);
|
||||
}
|
||||
on('init', () => {
|
||||
if (swiper.params.zoom.enabled) {
|
||||
enable();
|
||||
}
|
||||
});
|
||||
on('destroy', () => {
|
||||
disable();
|
||||
});
|
||||
on('touchStart', (_s, e) => {
|
||||
if (!swiper.zoom.enabled) return;
|
||||
onTouchStart(e);
|
||||
});
|
||||
on('touchEnd', (_s, e) => {
|
||||
if (!swiper.zoom.enabled) return;
|
||||
onTouchEnd();
|
||||
});
|
||||
on('doubleTap', (_s, e) => {
|
||||
if (!swiper.animating && swiper.params.zoom.enabled && swiper.zoom.enabled && swiper.params.zoom.toggle) {
|
||||
zoomToggle(e);
|
||||
}
|
||||
});
|
||||
on('transitionEnd', () => {
|
||||
if (swiper.zoom.enabled && swiper.params.zoom.enabled) {
|
||||
onTransitionEnd();
|
||||
}
|
||||
});
|
||||
on('slideChange', () => {
|
||||
if (swiper.zoom.enabled && swiper.params.zoom.enabled && swiper.params.cssMode) {
|
||||
onTransitionEnd();
|
||||
}
|
||||
});
|
||||
Object.assign(swiper.zoom, {
|
||||
enable,
|
||||
disable,
|
||||
in: zoomIn,
|
||||
out: zoomOut,
|
||||
toggle: zoomToggle
|
||||
});
|
||||
}
|
||||
|
||||
export { Zoom as default };
|
||||
+213
@@ -0,0 +1,213 @@
|
||||
{
|
||||
"name": "swiper",
|
||||
"version": "11.2.8",
|
||||
"description": "Most modern mobile touch slider and framework with hardware accelerated transitions",
|
||||
"typings": "swiper.d.ts",
|
||||
"type": "module",
|
||||
"main": "./swiper.mjs",
|
||||
"module": "./swiper.mjs",
|
||||
"exports": {
|
||||
".": {
|
||||
"types": "./swiper.d.ts",
|
||||
"default": "./swiper.mjs"
|
||||
},
|
||||
"./effect-utils": {
|
||||
"types": "./swiper-effect-utils.d.ts",
|
||||
"default": "./swiper-effect-utils.mjs"
|
||||
},
|
||||
"./core": {
|
||||
"types": "./swiper.d.ts",
|
||||
"default": "./swiper.mjs"
|
||||
},
|
||||
"./bundle": {
|
||||
"types": "./swiper.d.ts",
|
||||
"default": "./swiper-bundle.mjs"
|
||||
},
|
||||
"./css": "./swiper.css",
|
||||
"./css/bundle": "./swiper-bundle.css",
|
||||
"./swiper-bundle.css": "./swiper-bundle.css",
|
||||
"./css/a11y": "./modules/a11y.css",
|
||||
"./css/autoplay": "./modules/autoplay.css",
|
||||
"./css/controller": "./modules/controller.css",
|
||||
"./css/effect-coverflow": "./modules/effect-coverflow.css",
|
||||
"./css/effect-cube": "./modules/effect-cube.css",
|
||||
"./css/effect-fade": "./modules/effect-fade.css",
|
||||
"./css/effect-flip": "./modules/effect-flip.css",
|
||||
"./css/effect-creative": "./modules/effect-creative.css",
|
||||
"./css/effect-cards": "./modules/effect-cards.css",
|
||||
"./css/free-mode": "./modules/free-mode.css",
|
||||
"./css/grid": "./modules/grid.css",
|
||||
"./css/hash-navigation": "./modules/hash-navigation.css",
|
||||
"./css/history": "./modules/history.css",
|
||||
"./css/keyboard": "./modules/keyboard.css",
|
||||
"./css/manipulation": "./modules/manipulation.css",
|
||||
"./css/mousewheel": "./modules/mousewheel.css",
|
||||
"./css/navigation": "./modules/navigation.css",
|
||||
"./css/pagination": "./modules/pagination.css",
|
||||
"./css/parallax": "./modules/parallax.css",
|
||||
"./css/scrollbar": "./modules/scrollbar.css",
|
||||
"./css/thumbs": "./modules/thumbs.css",
|
||||
"./css/virtual": "./modules/virtual.css",
|
||||
"./css/zoom": "./modules/zoom.css",
|
||||
"./less": "./swiper.less",
|
||||
"./less/a11y": "./modules/a11y.less",
|
||||
"./less/autoplay": "./modules/autoplay.less",
|
||||
"./less/controller": "./modules/controller.less",
|
||||
"./less/effect-coverflow": "./modules/effect-coverflow.less",
|
||||
"./less/effect-cube": "./modules/effect-cube.less",
|
||||
"./less/effect-fade": "./modules/effect-fade.less",
|
||||
"./less/effect-flip": "./modules/effect-flip.less",
|
||||
"./less/effect-creative": "./modules/effect-creative.less",
|
||||
"./less/effect-cards": "./modules/effect-cards.less",
|
||||
"./less/free-mode": "./modules/free-mode.less",
|
||||
"./less/grid": "./modules/grid.less",
|
||||
"./less/hash-navigation": "./modules/hash-navigation.less",
|
||||
"./less/history": "./modules/history.less",
|
||||
"./less/keyboard": "./modules/keyboard.less",
|
||||
"./less/manipulation": "./modules/manipulation.less",
|
||||
"./less/mousewheel": "./modules/mousewheel.less",
|
||||
"./less/navigation": "./modules/navigation.less",
|
||||
"./less/pagination": "./modules/pagination.less",
|
||||
"./less/parallax": "./modules/parallax.less",
|
||||
"./less/scrollbar": "./modules/scrollbar.less",
|
||||
"./less/thumbs": "./modules/thumbs.less",
|
||||
"./less/virtual": "./modules/virtual.less",
|
||||
"./less/zoom": "./modules/zoom.less",
|
||||
"./scss": "./swiper.scss",
|
||||
"./scss/a11y": "./modules/a11y.scss",
|
||||
"./scss/autoplay": "./modules/autoplay.scss",
|
||||
"./scss/controller": "./modules/controller.scss",
|
||||
"./scss/effect-coverflow": "./modules/effect-coverflow.scss",
|
||||
"./scss/effect-cube": "./modules/effect-cube.scss",
|
||||
"./scss/effect-fade": "./modules/effect-fade.scss",
|
||||
"./scss/effect-flip": "./modules/effect-flip.scss",
|
||||
"./scss/effect-creative": "./modules/effect-creative.scss",
|
||||
"./scss/effect-cards": "./modules/effect-cards.scss",
|
||||
"./scss/free-mode": "./modules/free-mode.scss",
|
||||
"./scss/grid": "./modules/grid.scss",
|
||||
"./scss/hash-navigation": "./modules/hash-navigation.scss",
|
||||
"./scss/history": "./modules/history.scss",
|
||||
"./scss/keyboard": "./modules/keyboard.scss",
|
||||
"./scss/manipulation": "./modules/manipulation.scss",
|
||||
"./scss/mousewheel": "./modules/mousewheel.scss",
|
||||
"./scss/navigation": "./modules/navigation.scss",
|
||||
"./scss/pagination": "./modules/pagination.scss",
|
||||
"./scss/parallax": "./modules/parallax.scss",
|
||||
"./scss/scrollbar": "./modules/scrollbar.scss",
|
||||
"./scss/thumbs": "./modules/thumbs.scss",
|
||||
"./scss/vars": "./swiper-vars.scss",
|
||||
"./scss/virtual": "./modules/virtual.scss",
|
||||
"./scss/zoom": "./modules/zoom.scss",
|
||||
"./element": {
|
||||
"types": "./swiper-element.d.ts",
|
||||
"default": "./swiper-element.mjs"
|
||||
},
|
||||
"./element/bundle": {
|
||||
"types": "./swiper-element.d.ts",
|
||||
"default": "./swiper-element-bundle.mjs"
|
||||
},
|
||||
"./element-bundle": {
|
||||
"types": "./swiper-element.d.ts",
|
||||
"default": "./swiper-element-bundle.mjs"
|
||||
},
|
||||
"./element/css/a11y": "./modules/a11y-element.css",
|
||||
"./element/css/autoplay": "./modules/autoplay-element.css",
|
||||
"./element/css/controller": "./modules/controller-element.css",
|
||||
"./element/css/effect-coverflow": "./modules/effect-coverflow-element.css",
|
||||
"./element/css/effect-cube": "./modules/effect-cube-element.css",
|
||||
"./element/css/effect-fade": "./modules/effect-fade-element.css",
|
||||
"./element/css/effect-flip": "./modules/effect-flip-element.css",
|
||||
"./element/css/effect-creative": "./modules/effect-creative-element.css",
|
||||
"./element/css/effect-cards": "./modules/effect-cards-element.css",
|
||||
"./element/css/free-mode": "./modules/free-mode-element.css",
|
||||
"./element/css/grid": "./modules/grid-element.css",
|
||||
"./element/css/hash-navigation": "./modules/hash-navigation-element.css",
|
||||
"./element/css/history": "./modules/history-element.css",
|
||||
"./element/css/keyboard": "./modules/keyboard-element.css",
|
||||
"./element/css/manipulation": "./modules/manipulation-element.css",
|
||||
"./element/css/mousewheel": "./modules/mousewheel-element.css",
|
||||
"./element/css/navigation": "./modules/navigation-element.css",
|
||||
"./element/css/pagination": "./modules/pagination-element.css",
|
||||
"./element/css/parallax": "./modules/parallax-element.css",
|
||||
"./element/css/scrollbar": "./modules/scrollbar-element.css",
|
||||
"./element/css/thumbs": "./modules/thumbs-element.css",
|
||||
"./element/css/virtual": "./modules/virtual-element.css",
|
||||
"./element/css/zoom": "./modules/zoom-element.css",
|
||||
"./react": {
|
||||
"types": "./swiper-react.d.ts",
|
||||
"default": "./swiper-react.mjs"
|
||||
},
|
||||
"./vue": {
|
||||
"types": "./swiper-vue.d.ts",
|
||||
"default": "./swiper-vue.mjs"
|
||||
},
|
||||
"./modules": {
|
||||
"types": "./types/modules/index.d.ts",
|
||||
"default": "./modules/index.mjs"
|
||||
},
|
||||
"./types": "./types/index.d.ts",
|
||||
"./package.json": "./package.json"
|
||||
},
|
||||
"typesVersions": {
|
||||
"*": {
|
||||
"modules": [
|
||||
"./types/modules/index.d.ts"
|
||||
],
|
||||
"element": [
|
||||
"./swiper-element.d.ts"
|
||||
],
|
||||
"element/bundle": [
|
||||
"./swiper-element.d.ts"
|
||||
],
|
||||
"react": [
|
||||
"./swiper-react.d.ts"
|
||||
],
|
||||
"vue": [
|
||||
"./swiper-vue.d.ts"
|
||||
]
|
||||
}
|
||||
},
|
||||
"repository": {
|
||||
"type": "git",
|
||||
"url": "https://github.com/nolimits4web/Swiper.git"
|
||||
},
|
||||
"keywords": [
|
||||
"swiper",
|
||||
"swipe",
|
||||
"slider",
|
||||
"touch",
|
||||
"ios",
|
||||
"mobile",
|
||||
"cordova",
|
||||
"phonegap",
|
||||
"app",
|
||||
"framework",
|
||||
"framework7",
|
||||
"carousel",
|
||||
"gallery",
|
||||
"plugin",
|
||||
"react",
|
||||
"vue",
|
||||
"slideshow"
|
||||
],
|
||||
"author": "Vladimir Kharlampidi",
|
||||
"license": "MIT",
|
||||
"bugs": {
|
||||
"url": "https://github.com/nolimits4web/swiper/issues"
|
||||
},
|
||||
"homepage": "https://swiperjs.com",
|
||||
"funding": [
|
||||
{
|
||||
"type": "patreon",
|
||||
"url": "https://www.patreon.com/swiperjs"
|
||||
},
|
||||
{
|
||||
"type": "open_collective",
|
||||
"url": "http://opencollective.com/swiper"
|
||||
}
|
||||
],
|
||||
"engines": {
|
||||
"node": ">= 4.7.0"
|
||||
},
|
||||
"releaseDate": "May 23, 2025"
|
||||
}
|
||||
+9
@@ -0,0 +1,9 @@
|
||||
function classesToSelector(classes) {
|
||||
if (classes === void 0) {
|
||||
classes = '';
|
||||
}
|
||||
return `.${classes.trim().replace(/([\.:!+\/])/g, '\\$1') // eslint-disable-line
|
||||
.replace(/ /g, '.')}`;
|
||||
}
|
||||
|
||||
export { classesToSelector as c };
|
||||
+21
@@ -0,0 +1,21 @@
|
||||
import { e as elementChildren, c as createElement } from './utils.mjs';
|
||||
|
||||
function createElementIfNotDefined(swiper, originalParams, params, checkProps) {
|
||||
if (swiper.params.createElements) {
|
||||
Object.keys(checkProps).forEach(key => {
|
||||
if (!params[key] && params.auto === true) {
|
||||
let element = elementChildren(swiper.el, `.${checkProps[key]}`)[0];
|
||||
if (!element) {
|
||||
element = createElement('div', checkProps[key]);
|
||||
element.className = checkProps[key];
|
||||
swiper.el.append(element);
|
||||
}
|
||||
params[key] = element;
|
||||
originalParams[key] = element;
|
||||
}
|
||||
});
|
||||
}
|
||||
return params;
|
||||
}
|
||||
|
||||
export { createElementIfNotDefined as c };
|
||||
+14
@@ -0,0 +1,14 @@
|
||||
import { g as getSlideTransformEl, c as createElement } from './utils.mjs';
|
||||
|
||||
function createShadow(suffix, slideEl, side) {
|
||||
const shadowClass = `swiper-slide-shadow${side ? `-${side}` : ''}${suffix ? ` swiper-slide-shadow-${suffix}` : ''}`;
|
||||
const shadowContainer = getSlideTransformEl(slideEl);
|
||||
let shadowEl = shadowContainer.querySelector(`.${shadowClass.split(' ').join('.')}`);
|
||||
if (!shadowEl) {
|
||||
shadowEl = createElement('div', shadowClass.split(' '));
|
||||
shadowContainer.append(shadowEl);
|
||||
}
|
||||
return shadowEl;
|
||||
}
|
||||
|
||||
export { createShadow as c };
|
||||
+58
@@ -0,0 +1,58 @@
|
||||
function effectInit(params) {
|
||||
const {
|
||||
effect,
|
||||
swiper,
|
||||
on,
|
||||
setTranslate,
|
||||
setTransition,
|
||||
overwriteParams,
|
||||
perspective,
|
||||
recreateShadows,
|
||||
getEffectParams
|
||||
} = params;
|
||||
on('beforeInit', () => {
|
||||
if (swiper.params.effect !== effect) return;
|
||||
swiper.classNames.push(`${swiper.params.containerModifierClass}${effect}`);
|
||||
if (perspective && perspective()) {
|
||||
swiper.classNames.push(`${swiper.params.containerModifierClass}3d`);
|
||||
}
|
||||
const overwriteParamsResult = overwriteParams ? overwriteParams() : {};
|
||||
Object.assign(swiper.params, overwriteParamsResult);
|
||||
Object.assign(swiper.originalParams, overwriteParamsResult);
|
||||
});
|
||||
on('setTranslate _virtualUpdated', () => {
|
||||
if (swiper.params.effect !== effect) return;
|
||||
setTranslate();
|
||||
});
|
||||
on('setTransition', (_s, duration) => {
|
||||
if (swiper.params.effect !== effect) return;
|
||||
setTransition(duration);
|
||||
});
|
||||
on('transitionEnd', () => {
|
||||
if (swiper.params.effect !== effect) return;
|
||||
if (recreateShadows) {
|
||||
if (!getEffectParams || !getEffectParams().slideShadows) return;
|
||||
// remove shadows
|
||||
swiper.slides.forEach(slideEl => {
|
||||
slideEl.querySelectorAll('.swiper-slide-shadow-top, .swiper-slide-shadow-right, .swiper-slide-shadow-bottom, .swiper-slide-shadow-left').forEach(shadowEl => shadowEl.remove());
|
||||
});
|
||||
// create new one
|
||||
recreateShadows();
|
||||
}
|
||||
});
|
||||
let requireUpdateOnVirtual;
|
||||
on('virtualUpdate', () => {
|
||||
if (swiper.params.effect !== effect) return;
|
||||
if (!swiper.slides.length) {
|
||||
requireUpdateOnVirtual = true;
|
||||
}
|
||||
requestAnimationFrame(() => {
|
||||
if (requireUpdateOnVirtual && swiper.slides && swiper.slides.length) {
|
||||
setTranslate();
|
||||
requireUpdateOnVirtual = false;
|
||||
}
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
export { effectInit as e };
|
||||
+12
@@ -0,0 +1,12 @@
|
||||
import { g as getSlideTransformEl } from './utils.mjs';
|
||||
|
||||
function effectTarget(effectParams, slideEl) {
|
||||
const transformEl = getSlideTransformEl(slideEl);
|
||||
if (transformEl !== slideEl) {
|
||||
transformEl.style.backfaceVisibility = 'hidden';
|
||||
transformEl.style['-webkit-backface-visibility'] = 'hidden';
|
||||
}
|
||||
return transformEl;
|
||||
}
|
||||
|
||||
export { effectTarget as e };
|
||||
+48
@@ -0,0 +1,48 @@
|
||||
import { l as elementTransitionEnd } from './utils.mjs';
|
||||
|
||||
function effectVirtualTransitionEnd(_ref) {
|
||||
let {
|
||||
swiper,
|
||||
duration,
|
||||
transformElements,
|
||||
allSlides
|
||||
} = _ref;
|
||||
const {
|
||||
activeIndex
|
||||
} = swiper;
|
||||
const getSlide = el => {
|
||||
if (!el.parentElement) {
|
||||
// assume shadow root
|
||||
const slide = swiper.slides.find(slideEl => slideEl.shadowRoot && slideEl.shadowRoot === el.parentNode);
|
||||
return slide;
|
||||
}
|
||||
return el.parentElement;
|
||||
};
|
||||
if (swiper.params.virtualTranslate && duration !== 0) {
|
||||
let eventTriggered = false;
|
||||
let transitionEndTarget;
|
||||
if (allSlides) {
|
||||
transitionEndTarget = transformElements;
|
||||
} else {
|
||||
transitionEndTarget = transformElements.filter(transformEl => {
|
||||
const el = transformEl.classList.contains('swiper-slide-transform') ? getSlide(transformEl) : transformEl;
|
||||
return swiper.getSlideIndex(el) === activeIndex;
|
||||
});
|
||||
}
|
||||
transitionEndTarget.forEach(el => {
|
||||
elementTransitionEnd(el, () => {
|
||||
if (eventTriggered) return;
|
||||
if (!swiper || swiper.destroyed) return;
|
||||
eventTriggered = true;
|
||||
swiper.animating = false;
|
||||
const evt = new window.CustomEvent('transitionend', {
|
||||
bubbles: true,
|
||||
cancelable: true
|
||||
});
|
||||
swiper.wrapperEl.dispatchEvent(evt);
|
||||
});
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
export { effectVirtualTransitionEnd as e };
|
||||
+146
@@ -0,0 +1,146 @@
|
||||
/**
|
||||
* SSR Window 5.0.0
|
||||
* Better handling for window object in SSR environment
|
||||
* https://github.com/nolimits4web/ssr-window
|
||||
*
|
||||
* Copyright 2025, Vladimir Kharlampidi
|
||||
*
|
||||
* Licensed under MIT
|
||||
*
|
||||
* Released on: February 12, 2025
|
||||
*/
|
||||
/* eslint-disable no-param-reassign */
|
||||
function isObject(obj) {
|
||||
return obj !== null && typeof obj === 'object' && 'constructor' in obj && obj.constructor === Object;
|
||||
}
|
||||
function extend(target, src) {
|
||||
if (target === void 0) {
|
||||
target = {};
|
||||
}
|
||||
if (src === void 0) {
|
||||
src = {};
|
||||
}
|
||||
const noExtend = ['__proto__', 'constructor', 'prototype'];
|
||||
Object.keys(src).filter(key => noExtend.indexOf(key) < 0).forEach(key => {
|
||||
if (typeof target[key] === 'undefined') target[key] = src[key];else if (isObject(src[key]) && isObject(target[key]) && Object.keys(src[key]).length > 0) {
|
||||
extend(target[key], src[key]);
|
||||
}
|
||||
});
|
||||
}
|
||||
const ssrDocument = {
|
||||
body: {},
|
||||
addEventListener() {},
|
||||
removeEventListener() {},
|
||||
activeElement: {
|
||||
blur() {},
|
||||
nodeName: ''
|
||||
},
|
||||
querySelector() {
|
||||
return null;
|
||||
},
|
||||
querySelectorAll() {
|
||||
return [];
|
||||
},
|
||||
getElementById() {
|
||||
return null;
|
||||
},
|
||||
createEvent() {
|
||||
return {
|
||||
initEvent() {}
|
||||
};
|
||||
},
|
||||
createElement() {
|
||||
return {
|
||||
children: [],
|
||||
childNodes: [],
|
||||
style: {},
|
||||
setAttribute() {},
|
||||
getElementsByTagName() {
|
||||
return [];
|
||||
}
|
||||
};
|
||||
},
|
||||
createElementNS() {
|
||||
return {};
|
||||
},
|
||||
importNode() {
|
||||
return null;
|
||||
},
|
||||
location: {
|
||||
hash: '',
|
||||
host: '',
|
||||
hostname: '',
|
||||
href: '',
|
||||
origin: '',
|
||||
pathname: '',
|
||||
protocol: '',
|
||||
search: ''
|
||||
}
|
||||
};
|
||||
function getDocument() {
|
||||
const doc = typeof document !== 'undefined' ? document : {};
|
||||
extend(doc, ssrDocument);
|
||||
return doc;
|
||||
}
|
||||
const ssrWindow = {
|
||||
document: ssrDocument,
|
||||
navigator: {
|
||||
userAgent: ''
|
||||
},
|
||||
location: {
|
||||
hash: '',
|
||||
host: '',
|
||||
hostname: '',
|
||||
href: '',
|
||||
origin: '',
|
||||
pathname: '',
|
||||
protocol: '',
|
||||
search: ''
|
||||
},
|
||||
history: {
|
||||
replaceState() {},
|
||||
pushState() {},
|
||||
go() {},
|
||||
back() {}
|
||||
},
|
||||
CustomEvent: function CustomEvent() {
|
||||
return this;
|
||||
},
|
||||
addEventListener() {},
|
||||
removeEventListener() {},
|
||||
getComputedStyle() {
|
||||
return {
|
||||
getPropertyValue() {
|
||||
return '';
|
||||
}
|
||||
};
|
||||
},
|
||||
Image() {},
|
||||
Date() {},
|
||||
screen: {},
|
||||
setTimeout() {},
|
||||
clearTimeout() {},
|
||||
matchMedia() {
|
||||
return {};
|
||||
},
|
||||
requestAnimationFrame(callback) {
|
||||
if (typeof setTimeout === 'undefined') {
|
||||
callback();
|
||||
return null;
|
||||
}
|
||||
return setTimeout(callback, 0);
|
||||
},
|
||||
cancelAnimationFrame(id) {
|
||||
if (typeof setTimeout === 'undefined') {
|
||||
return;
|
||||
}
|
||||
clearTimeout(id);
|
||||
}
|
||||
};
|
||||
function getWindow() {
|
||||
const win = typeof window !== 'undefined' ? window : {};
|
||||
extend(win, ssrWindow);
|
||||
return win;
|
||||
}
|
||||
|
||||
export { getWindow as a, getDocument as g };
|
||||
+3936
File diff suppressed because it is too large
Load Diff
+131
@@ -0,0 +1,131 @@
|
||||
import { e as extend, p as paramsList, i as isObject, n as needsNavigation, a as needsPagination, b as needsScrollbar } from './update-swiper.mjs';
|
||||
import { d as defaults } from './swiper-core.mjs';
|
||||
|
||||
function getParams(obj, splitEvents) {
|
||||
if (obj === void 0) {
|
||||
obj = {};
|
||||
}
|
||||
if (splitEvents === void 0) {
|
||||
splitEvents = true;
|
||||
}
|
||||
const params = {
|
||||
on: {}
|
||||
};
|
||||
const events = {};
|
||||
const passedParams = {};
|
||||
extend(params, defaults);
|
||||
params._emitClasses = true;
|
||||
params.init = false;
|
||||
const rest = {};
|
||||
const allowedParams = paramsList.map(key => key.replace(/_/, ''));
|
||||
const plainObj = Object.assign({}, obj);
|
||||
Object.keys(plainObj).forEach(key => {
|
||||
if (typeof obj[key] === 'undefined') return;
|
||||
if (allowedParams.indexOf(key) >= 0) {
|
||||
if (isObject(obj[key])) {
|
||||
params[key] = {};
|
||||
passedParams[key] = {};
|
||||
extend(params[key], obj[key]);
|
||||
extend(passedParams[key], obj[key]);
|
||||
} else {
|
||||
params[key] = obj[key];
|
||||
passedParams[key] = obj[key];
|
||||
}
|
||||
} else if (key.search(/on[A-Z]/) === 0 && typeof obj[key] === 'function') {
|
||||
if (splitEvents) {
|
||||
events[`${key[2].toLowerCase()}${key.substr(3)}`] = obj[key];
|
||||
} else {
|
||||
params.on[`${key[2].toLowerCase()}${key.substr(3)}`] = obj[key];
|
||||
}
|
||||
} else {
|
||||
rest[key] = obj[key];
|
||||
}
|
||||
});
|
||||
['navigation', 'pagination', 'scrollbar'].forEach(key => {
|
||||
if (params[key] === true) params[key] = {};
|
||||
if (params[key] === false) delete params[key];
|
||||
});
|
||||
return {
|
||||
params,
|
||||
passedParams,
|
||||
rest,
|
||||
events
|
||||
};
|
||||
}
|
||||
|
||||
function mountSwiper(_ref, swiperParams) {
|
||||
let {
|
||||
el,
|
||||
nextEl,
|
||||
prevEl,
|
||||
paginationEl,
|
||||
scrollbarEl,
|
||||
swiper
|
||||
} = _ref;
|
||||
if (needsNavigation(swiperParams) && nextEl && prevEl) {
|
||||
swiper.params.navigation.nextEl = nextEl;
|
||||
swiper.originalParams.navigation.nextEl = nextEl;
|
||||
swiper.params.navigation.prevEl = prevEl;
|
||||
swiper.originalParams.navigation.prevEl = prevEl;
|
||||
}
|
||||
if (needsPagination(swiperParams) && paginationEl) {
|
||||
swiper.params.pagination.el = paginationEl;
|
||||
swiper.originalParams.pagination.el = paginationEl;
|
||||
}
|
||||
if (needsScrollbar(swiperParams) && scrollbarEl) {
|
||||
swiper.params.scrollbar.el = scrollbarEl;
|
||||
swiper.originalParams.scrollbar.el = scrollbarEl;
|
||||
}
|
||||
swiper.init(el);
|
||||
}
|
||||
|
||||
function getChangedParams(swiperParams, oldParams, children, oldChildren, getKey) {
|
||||
const keys = [];
|
||||
if (!oldParams) return keys;
|
||||
const addKey = key => {
|
||||
if (keys.indexOf(key) < 0) keys.push(key);
|
||||
};
|
||||
if (children && oldChildren) {
|
||||
const oldChildrenKeys = oldChildren.map(getKey);
|
||||
const childrenKeys = children.map(getKey);
|
||||
if (oldChildrenKeys.join('') !== childrenKeys.join('')) addKey('children');
|
||||
if (oldChildren.length !== children.length) addKey('children');
|
||||
}
|
||||
const watchParams = paramsList.filter(key => key[0] === '_').map(key => key.replace(/_/, ''));
|
||||
watchParams.forEach(key => {
|
||||
if (key in swiperParams && key in oldParams) {
|
||||
if (isObject(swiperParams[key]) && isObject(oldParams[key])) {
|
||||
const newKeys = Object.keys(swiperParams[key]);
|
||||
const oldKeys = Object.keys(oldParams[key]);
|
||||
if (newKeys.length !== oldKeys.length) {
|
||||
addKey(key);
|
||||
} else {
|
||||
newKeys.forEach(newKey => {
|
||||
if (swiperParams[key][newKey] !== oldParams[key][newKey]) {
|
||||
addKey(key);
|
||||
}
|
||||
});
|
||||
oldKeys.forEach(oldKey => {
|
||||
if (swiperParams[key][oldKey] !== oldParams[key][oldKey]) addKey(key);
|
||||
});
|
||||
}
|
||||
} else if (swiperParams[key] !== oldParams[key]) {
|
||||
addKey(key);
|
||||
}
|
||||
}
|
||||
});
|
||||
return keys;
|
||||
}
|
||||
|
||||
const updateOnVirtualData = swiper => {
|
||||
if (!swiper || swiper.destroyed || !swiper.params.virtual || swiper.params.virtual && !swiper.params.virtual.enabled) return;
|
||||
swiper.updateSlides();
|
||||
swiper.updateProgress();
|
||||
swiper.updateSlidesClasses();
|
||||
swiper.emit('_virtualUpdated');
|
||||
if (swiper.parallax && swiper.params.parallax && swiper.params.parallax.enabled) {
|
||||
swiper.parallax.setTranslate();
|
||||
}
|
||||
};
|
||||
|
||||
export { getChangedParams as a, getParams as g, mountSwiper as m, updateOnVirtualData as u };
|
||||
+238
@@ -0,0 +1,238 @@
|
||||
import { s as setInnerHTML } from './utils.mjs';
|
||||
|
||||
/* underscore in name -> watch for changes */
|
||||
const paramsList = ['eventsPrefix', 'injectStyles', 'injectStylesUrls', 'modules', 'init', '_direction', 'oneWayMovement', 'swiperElementNodeName', 'touchEventsTarget', 'initialSlide', '_speed', 'cssMode', 'updateOnWindowResize', 'resizeObserver', 'nested', 'focusableElements', '_enabled', '_width', '_height', 'preventInteractionOnTransition', 'userAgent', 'url', '_edgeSwipeDetection', '_edgeSwipeThreshold', '_freeMode', '_autoHeight', 'setWrapperSize', 'virtualTranslate', '_effect', 'breakpoints', 'breakpointsBase', '_spaceBetween', '_slidesPerView', 'maxBackfaceHiddenSlides', '_grid', '_slidesPerGroup', '_slidesPerGroupSkip', '_slidesPerGroupAuto', '_centeredSlides', '_centeredSlidesBounds', '_slidesOffsetBefore', '_slidesOffsetAfter', 'normalizeSlideIndex', '_centerInsufficientSlides', '_watchOverflow', 'roundLengths', 'touchRatio', 'touchAngle', 'simulateTouch', '_shortSwipes', '_longSwipes', 'longSwipesRatio', 'longSwipesMs', '_followFinger', 'allowTouchMove', '_threshold', 'touchMoveStopPropagation', 'touchStartPreventDefault', 'touchStartForcePreventDefault', 'touchReleaseOnEdges', 'uniqueNavElements', '_resistance', '_resistanceRatio', '_watchSlidesProgress', '_grabCursor', 'preventClicks', 'preventClicksPropagation', '_slideToClickedSlide', '_loop', 'loopAdditionalSlides', 'loopAddBlankSlides', 'loopPreventsSliding', '_rewind', '_allowSlidePrev', '_allowSlideNext', '_swipeHandler', '_noSwiping', 'noSwipingClass', 'noSwipingSelector', 'passiveListeners', 'containerModifierClass', 'slideClass', 'slideActiveClass', 'slideVisibleClass', 'slideFullyVisibleClass', 'slideNextClass', 'slidePrevClass', 'slideBlankClass', 'wrapperClass', 'lazyPreloaderClass', 'lazyPreloadPrevNext', 'runCallbacksOnInit', 'observer', 'observeParents', 'observeSlideChildren',
|
||||
// modules
|
||||
'a11y', '_autoplay', '_controller', 'coverflowEffect', 'cubeEffect', 'fadeEffect', 'flipEffect', 'creativeEffect', 'cardsEffect', 'hashNavigation', 'history', 'keyboard', 'mousewheel', '_navigation', '_pagination', 'parallax', '_scrollbar', '_thumbs', 'virtual', 'zoom', 'control'];
|
||||
|
||||
function isObject(o) {
|
||||
return typeof o === 'object' && o !== null && o.constructor && Object.prototype.toString.call(o).slice(8, -1) === 'Object' && !o.__swiper__;
|
||||
}
|
||||
function extend(target, src) {
|
||||
const noExtend = ['__proto__', 'constructor', 'prototype'];
|
||||
Object.keys(src).filter(key => noExtend.indexOf(key) < 0).forEach(key => {
|
||||
if (typeof target[key] === 'undefined') target[key] = src[key];else if (isObject(src[key]) && isObject(target[key]) && Object.keys(src[key]).length > 0) {
|
||||
if (src[key].__swiper__) target[key] = src[key];else extend(target[key], src[key]);
|
||||
} else {
|
||||
target[key] = src[key];
|
||||
}
|
||||
});
|
||||
}
|
||||
function needsNavigation(params) {
|
||||
if (params === void 0) {
|
||||
params = {};
|
||||
}
|
||||
return params.navigation && typeof params.navigation.nextEl === 'undefined' && typeof params.navigation.prevEl === 'undefined';
|
||||
}
|
||||
function needsPagination(params) {
|
||||
if (params === void 0) {
|
||||
params = {};
|
||||
}
|
||||
return params.pagination && typeof params.pagination.el === 'undefined';
|
||||
}
|
||||
function needsScrollbar(params) {
|
||||
if (params === void 0) {
|
||||
params = {};
|
||||
}
|
||||
return params.scrollbar && typeof params.scrollbar.el === 'undefined';
|
||||
}
|
||||
function uniqueClasses(classNames) {
|
||||
if (classNames === void 0) {
|
||||
classNames = '';
|
||||
}
|
||||
const classes = classNames.split(' ').map(c => c.trim()).filter(c => !!c);
|
||||
const unique = [];
|
||||
classes.forEach(c => {
|
||||
if (unique.indexOf(c) < 0) unique.push(c);
|
||||
});
|
||||
return unique.join(' ');
|
||||
}
|
||||
function attrToProp(attrName) {
|
||||
if (attrName === void 0) {
|
||||
attrName = '';
|
||||
}
|
||||
return attrName.replace(/-[a-z]/g, l => l.toUpperCase().replace('-', ''));
|
||||
}
|
||||
function wrapperClass(className) {
|
||||
if (className === void 0) {
|
||||
className = '';
|
||||
}
|
||||
if (!className) return 'swiper-wrapper';
|
||||
if (!className.includes('swiper-wrapper')) return `swiper-wrapper ${className}`;
|
||||
return className;
|
||||
}
|
||||
|
||||
function updateSwiper(_ref) {
|
||||
let {
|
||||
swiper,
|
||||
slides,
|
||||
passedParams,
|
||||
changedParams,
|
||||
nextEl,
|
||||
prevEl,
|
||||
scrollbarEl,
|
||||
paginationEl
|
||||
} = _ref;
|
||||
const updateParams = changedParams.filter(key => key !== 'children' && key !== 'direction' && key !== 'wrapperClass');
|
||||
const {
|
||||
params: currentParams,
|
||||
pagination,
|
||||
navigation,
|
||||
scrollbar,
|
||||
virtual,
|
||||
thumbs
|
||||
} = swiper;
|
||||
let needThumbsInit;
|
||||
let needControllerInit;
|
||||
let needPaginationInit;
|
||||
let needScrollbarInit;
|
||||
let needNavigationInit;
|
||||
let loopNeedDestroy;
|
||||
let loopNeedEnable;
|
||||
let loopNeedReloop;
|
||||
if (changedParams.includes('thumbs') && passedParams.thumbs && passedParams.thumbs.swiper && !passedParams.thumbs.swiper.destroyed && currentParams.thumbs && (!currentParams.thumbs.swiper || currentParams.thumbs.swiper.destroyed)) {
|
||||
needThumbsInit = true;
|
||||
}
|
||||
if (changedParams.includes('controller') && passedParams.controller && passedParams.controller.control && currentParams.controller && !currentParams.controller.control) {
|
||||
needControllerInit = true;
|
||||
}
|
||||
if (changedParams.includes('pagination') && passedParams.pagination && (passedParams.pagination.el || paginationEl) && (currentParams.pagination || currentParams.pagination === false) && pagination && !pagination.el) {
|
||||
needPaginationInit = true;
|
||||
}
|
||||
if (changedParams.includes('scrollbar') && passedParams.scrollbar && (passedParams.scrollbar.el || scrollbarEl) && (currentParams.scrollbar || currentParams.scrollbar === false) && scrollbar && !scrollbar.el) {
|
||||
needScrollbarInit = true;
|
||||
}
|
||||
if (changedParams.includes('navigation') && passedParams.navigation && (passedParams.navigation.prevEl || prevEl) && (passedParams.navigation.nextEl || nextEl) && (currentParams.navigation || currentParams.navigation === false) && navigation && !navigation.prevEl && !navigation.nextEl) {
|
||||
needNavigationInit = true;
|
||||
}
|
||||
const destroyModule = mod => {
|
||||
if (!swiper[mod]) return;
|
||||
swiper[mod].destroy();
|
||||
if (mod === 'navigation') {
|
||||
if (swiper.isElement) {
|
||||
swiper[mod].prevEl.remove();
|
||||
swiper[mod].nextEl.remove();
|
||||
}
|
||||
currentParams[mod].prevEl = undefined;
|
||||
currentParams[mod].nextEl = undefined;
|
||||
swiper[mod].prevEl = undefined;
|
||||
swiper[mod].nextEl = undefined;
|
||||
} else {
|
||||
if (swiper.isElement) {
|
||||
swiper[mod].el.remove();
|
||||
}
|
||||
currentParams[mod].el = undefined;
|
||||
swiper[mod].el = undefined;
|
||||
}
|
||||
};
|
||||
if (changedParams.includes('loop') && swiper.isElement) {
|
||||
if (currentParams.loop && !passedParams.loop) {
|
||||
loopNeedDestroy = true;
|
||||
} else if (!currentParams.loop && passedParams.loop) {
|
||||
loopNeedEnable = true;
|
||||
} else {
|
||||
loopNeedReloop = true;
|
||||
}
|
||||
}
|
||||
updateParams.forEach(key => {
|
||||
if (isObject(currentParams[key]) && isObject(passedParams[key])) {
|
||||
Object.assign(currentParams[key], passedParams[key]);
|
||||
if ((key === 'navigation' || key === 'pagination' || key === 'scrollbar') && 'enabled' in passedParams[key] && !passedParams[key].enabled) {
|
||||
destroyModule(key);
|
||||
}
|
||||
} else {
|
||||
const newValue = passedParams[key];
|
||||
if ((newValue === true || newValue === false) && (key === 'navigation' || key === 'pagination' || key === 'scrollbar')) {
|
||||
if (newValue === false) {
|
||||
destroyModule(key);
|
||||
}
|
||||
} else {
|
||||
currentParams[key] = passedParams[key];
|
||||
}
|
||||
}
|
||||
});
|
||||
if (updateParams.includes('controller') && !needControllerInit && swiper.controller && swiper.controller.control && currentParams.controller && currentParams.controller.control) {
|
||||
swiper.controller.control = currentParams.controller.control;
|
||||
}
|
||||
if (changedParams.includes('children') && slides && virtual && currentParams.virtual.enabled) {
|
||||
virtual.slides = slides;
|
||||
virtual.update(true);
|
||||
} else if (changedParams.includes('virtual') && virtual && currentParams.virtual.enabled) {
|
||||
if (slides) virtual.slides = slides;
|
||||
virtual.update(true);
|
||||
}
|
||||
if (changedParams.includes('children') && slides && currentParams.loop) {
|
||||
loopNeedReloop = true;
|
||||
}
|
||||
if (needThumbsInit) {
|
||||
const initialized = thumbs.init();
|
||||
if (initialized) thumbs.update(true);
|
||||
}
|
||||
if (needControllerInit) {
|
||||
swiper.controller.control = currentParams.controller.control;
|
||||
}
|
||||
if (needPaginationInit) {
|
||||
if (swiper.isElement && (!paginationEl || typeof paginationEl === 'string')) {
|
||||
paginationEl = document.createElement('div');
|
||||
paginationEl.classList.add('swiper-pagination');
|
||||
paginationEl.part.add('pagination');
|
||||
swiper.el.appendChild(paginationEl);
|
||||
}
|
||||
if (paginationEl) currentParams.pagination.el = paginationEl;
|
||||
pagination.init();
|
||||
pagination.render();
|
||||
pagination.update();
|
||||
}
|
||||
if (needScrollbarInit) {
|
||||
if (swiper.isElement && (!scrollbarEl || typeof scrollbarEl === 'string')) {
|
||||
scrollbarEl = document.createElement('div');
|
||||
scrollbarEl.classList.add('swiper-scrollbar');
|
||||
scrollbarEl.part.add('scrollbar');
|
||||
swiper.el.appendChild(scrollbarEl);
|
||||
}
|
||||
if (scrollbarEl) currentParams.scrollbar.el = scrollbarEl;
|
||||
scrollbar.init();
|
||||
scrollbar.updateSize();
|
||||
scrollbar.setTranslate();
|
||||
}
|
||||
if (needNavigationInit) {
|
||||
if (swiper.isElement) {
|
||||
if (!nextEl || typeof nextEl === 'string') {
|
||||
nextEl = document.createElement('div');
|
||||
nextEl.classList.add('swiper-button-next');
|
||||
setInnerHTML(nextEl, swiper.hostEl.constructor.nextButtonSvg);
|
||||
nextEl.part.add('button-next');
|
||||
swiper.el.appendChild(nextEl);
|
||||
}
|
||||
if (!prevEl || typeof prevEl === 'string') {
|
||||
prevEl = document.createElement('div');
|
||||
prevEl.classList.add('swiper-button-prev');
|
||||
setInnerHTML(prevEl, swiper.hostEl.constructor.prevButtonSvg);
|
||||
prevEl.part.add('button-prev');
|
||||
swiper.el.appendChild(prevEl);
|
||||
}
|
||||
}
|
||||
if (nextEl) currentParams.navigation.nextEl = nextEl;
|
||||
if (prevEl) currentParams.navigation.prevEl = prevEl;
|
||||
navigation.init();
|
||||
navigation.update();
|
||||
}
|
||||
if (changedParams.includes('allowSlideNext')) {
|
||||
swiper.allowSlideNext = passedParams.allowSlideNext;
|
||||
}
|
||||
if (changedParams.includes('allowSlidePrev')) {
|
||||
swiper.allowSlidePrev = passedParams.allowSlidePrev;
|
||||
}
|
||||
if (changedParams.includes('direction')) {
|
||||
swiper.changeDirection(passedParams.direction, false);
|
||||
}
|
||||
if (loopNeedDestroy || loopNeedReloop) {
|
||||
swiper.loopDestroy();
|
||||
}
|
||||
if (loopNeedEnable || loopNeedReloop) {
|
||||
swiper.loopCreate();
|
||||
}
|
||||
swiper.update();
|
||||
}
|
||||
|
||||
export { needsPagination as a, needsScrollbar as b, attrToProp as c, uniqueClasses as d, extend as e, isObject as i, needsNavigation as n, paramsList as p, updateSwiper as u, wrapperClass as w };
|
||||
+343
@@ -0,0 +1,343 @@
|
||||
import { a as getWindow, g as getDocument } from './ssr-window.esm.mjs';
|
||||
|
||||
function classesToTokens(classes) {
|
||||
if (classes === void 0) {
|
||||
classes = '';
|
||||
}
|
||||
return classes.trim().split(' ').filter(c => !!c.trim());
|
||||
}
|
||||
|
||||
function deleteProps(obj) {
|
||||
const object = obj;
|
||||
Object.keys(object).forEach(key => {
|
||||
try {
|
||||
object[key] = null;
|
||||
} catch (e) {
|
||||
// no getter for object
|
||||
}
|
||||
try {
|
||||
delete object[key];
|
||||
} catch (e) {
|
||||
// something got wrong
|
||||
}
|
||||
});
|
||||
}
|
||||
function nextTick(callback, delay) {
|
||||
if (delay === void 0) {
|
||||
delay = 0;
|
||||
}
|
||||
return setTimeout(callback, delay);
|
||||
}
|
||||
function now() {
|
||||
return Date.now();
|
||||
}
|
||||
function getComputedStyle(el) {
|
||||
const window = getWindow();
|
||||
let style;
|
||||
if (window.getComputedStyle) {
|
||||
style = window.getComputedStyle(el, null);
|
||||
}
|
||||
if (!style && el.currentStyle) {
|
||||
style = el.currentStyle;
|
||||
}
|
||||
if (!style) {
|
||||
style = el.style;
|
||||
}
|
||||
return style;
|
||||
}
|
||||
function getTranslate(el, axis) {
|
||||
if (axis === void 0) {
|
||||
axis = 'x';
|
||||
}
|
||||
const window = getWindow();
|
||||
let matrix;
|
||||
let curTransform;
|
||||
let transformMatrix;
|
||||
const curStyle = getComputedStyle(el);
|
||||
if (window.WebKitCSSMatrix) {
|
||||
curTransform = curStyle.transform || curStyle.webkitTransform;
|
||||
if (curTransform.split(',').length > 6) {
|
||||
curTransform = curTransform.split(', ').map(a => a.replace(',', '.')).join(', ');
|
||||
}
|
||||
// Some old versions of Webkit choke when 'none' is passed; pass
|
||||
// empty string instead in this case
|
||||
transformMatrix = new window.WebKitCSSMatrix(curTransform === 'none' ? '' : curTransform);
|
||||
} else {
|
||||
transformMatrix = curStyle.MozTransform || curStyle.OTransform || curStyle.MsTransform || curStyle.msTransform || curStyle.transform || curStyle.getPropertyValue('transform').replace('translate(', 'matrix(1, 0, 0, 1,');
|
||||
matrix = transformMatrix.toString().split(',');
|
||||
}
|
||||
if (axis === 'x') {
|
||||
// Latest Chrome and webkits Fix
|
||||
if (window.WebKitCSSMatrix) curTransform = transformMatrix.m41;
|
||||
// Crazy IE10 Matrix
|
||||
else if (matrix.length === 16) curTransform = parseFloat(matrix[12]);
|
||||
// Normal Browsers
|
||||
else curTransform = parseFloat(matrix[4]);
|
||||
}
|
||||
if (axis === 'y') {
|
||||
// Latest Chrome and webkits Fix
|
||||
if (window.WebKitCSSMatrix) curTransform = transformMatrix.m42;
|
||||
// Crazy IE10 Matrix
|
||||
else if (matrix.length === 16) curTransform = parseFloat(matrix[13]);
|
||||
// Normal Browsers
|
||||
else curTransform = parseFloat(matrix[5]);
|
||||
}
|
||||
return curTransform || 0;
|
||||
}
|
||||
function isObject(o) {
|
||||
return typeof o === 'object' && o !== null && o.constructor && Object.prototype.toString.call(o).slice(8, -1) === 'Object';
|
||||
}
|
||||
function isNode(node) {
|
||||
// eslint-disable-next-line
|
||||
if (typeof window !== 'undefined' && typeof window.HTMLElement !== 'undefined') {
|
||||
return node instanceof HTMLElement;
|
||||
}
|
||||
return node && (node.nodeType === 1 || node.nodeType === 11);
|
||||
}
|
||||
function extend() {
|
||||
const to = Object(arguments.length <= 0 ? undefined : arguments[0]);
|
||||
const noExtend = ['__proto__', 'constructor', 'prototype'];
|
||||
for (let i = 1; i < arguments.length; i += 1) {
|
||||
const nextSource = i < 0 || arguments.length <= i ? undefined : arguments[i];
|
||||
if (nextSource !== undefined && nextSource !== null && !isNode(nextSource)) {
|
||||
const keysArray = Object.keys(Object(nextSource)).filter(key => noExtend.indexOf(key) < 0);
|
||||
for (let nextIndex = 0, len = keysArray.length; nextIndex < len; nextIndex += 1) {
|
||||
const nextKey = keysArray[nextIndex];
|
||||
const desc = Object.getOwnPropertyDescriptor(nextSource, nextKey);
|
||||
if (desc !== undefined && desc.enumerable) {
|
||||
if (isObject(to[nextKey]) && isObject(nextSource[nextKey])) {
|
||||
if (nextSource[nextKey].__swiper__) {
|
||||
to[nextKey] = nextSource[nextKey];
|
||||
} else {
|
||||
extend(to[nextKey], nextSource[nextKey]);
|
||||
}
|
||||
} else if (!isObject(to[nextKey]) && isObject(nextSource[nextKey])) {
|
||||
to[nextKey] = {};
|
||||
if (nextSource[nextKey].__swiper__) {
|
||||
to[nextKey] = nextSource[nextKey];
|
||||
} else {
|
||||
extend(to[nextKey], nextSource[nextKey]);
|
||||
}
|
||||
} else {
|
||||
to[nextKey] = nextSource[nextKey];
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
return to;
|
||||
}
|
||||
function setCSSProperty(el, varName, varValue) {
|
||||
el.style.setProperty(varName, varValue);
|
||||
}
|
||||
function animateCSSModeScroll(_ref) {
|
||||
let {
|
||||
swiper,
|
||||
targetPosition,
|
||||
side
|
||||
} = _ref;
|
||||
const window = getWindow();
|
||||
const startPosition = -swiper.translate;
|
||||
let startTime = null;
|
||||
let time;
|
||||
const duration = swiper.params.speed;
|
||||
swiper.wrapperEl.style.scrollSnapType = 'none';
|
||||
window.cancelAnimationFrame(swiper.cssModeFrameID);
|
||||
const dir = targetPosition > startPosition ? 'next' : 'prev';
|
||||
const isOutOfBound = (current, target) => {
|
||||
return dir === 'next' && current >= target || dir === 'prev' && current <= target;
|
||||
};
|
||||
const animate = () => {
|
||||
time = new Date().getTime();
|
||||
if (startTime === null) {
|
||||
startTime = time;
|
||||
}
|
||||
const progress = Math.max(Math.min((time - startTime) / duration, 1), 0);
|
||||
const easeProgress = 0.5 - Math.cos(progress * Math.PI) / 2;
|
||||
let currentPosition = startPosition + easeProgress * (targetPosition - startPosition);
|
||||
if (isOutOfBound(currentPosition, targetPosition)) {
|
||||
currentPosition = targetPosition;
|
||||
}
|
||||
swiper.wrapperEl.scrollTo({
|
||||
[side]: currentPosition
|
||||
});
|
||||
if (isOutOfBound(currentPosition, targetPosition)) {
|
||||
swiper.wrapperEl.style.overflow = 'hidden';
|
||||
swiper.wrapperEl.style.scrollSnapType = '';
|
||||
setTimeout(() => {
|
||||
swiper.wrapperEl.style.overflow = '';
|
||||
swiper.wrapperEl.scrollTo({
|
||||
[side]: currentPosition
|
||||
});
|
||||
});
|
||||
window.cancelAnimationFrame(swiper.cssModeFrameID);
|
||||
return;
|
||||
}
|
||||
swiper.cssModeFrameID = window.requestAnimationFrame(animate);
|
||||
};
|
||||
animate();
|
||||
}
|
||||
function getSlideTransformEl(slideEl) {
|
||||
return slideEl.querySelector('.swiper-slide-transform') || slideEl.shadowRoot && slideEl.shadowRoot.querySelector('.swiper-slide-transform') || slideEl;
|
||||
}
|
||||
function elementChildren(element, selector) {
|
||||
if (selector === void 0) {
|
||||
selector = '';
|
||||
}
|
||||
const window = getWindow();
|
||||
const children = [...element.children];
|
||||
if (window.HTMLSlotElement && element instanceof HTMLSlotElement) {
|
||||
children.push(...element.assignedElements());
|
||||
}
|
||||
if (!selector) {
|
||||
return children;
|
||||
}
|
||||
return children.filter(el => el.matches(selector));
|
||||
}
|
||||
function elementIsChildOfSlot(el, slot) {
|
||||
// Breadth-first search through all parent's children and assigned elements
|
||||
const elementsQueue = [slot];
|
||||
while (elementsQueue.length > 0) {
|
||||
const elementToCheck = elementsQueue.shift();
|
||||
if (el === elementToCheck) {
|
||||
return true;
|
||||
}
|
||||
elementsQueue.push(...elementToCheck.children, ...(elementToCheck.shadowRoot ? elementToCheck.shadowRoot.children : []), ...(elementToCheck.assignedElements ? elementToCheck.assignedElements() : []));
|
||||
}
|
||||
}
|
||||
function elementIsChildOf(el, parent) {
|
||||
const window = getWindow();
|
||||
let isChild = parent.contains(el);
|
||||
if (!isChild && window.HTMLSlotElement && parent instanceof HTMLSlotElement) {
|
||||
const children = [...parent.assignedElements()];
|
||||
isChild = children.includes(el);
|
||||
if (!isChild) {
|
||||
isChild = elementIsChildOfSlot(el, parent);
|
||||
}
|
||||
}
|
||||
return isChild;
|
||||
}
|
||||
function showWarning(text) {
|
||||
try {
|
||||
console.warn(text);
|
||||
return;
|
||||
} catch (err) {
|
||||
// err
|
||||
}
|
||||
}
|
||||
function createElement(tag, classes) {
|
||||
if (classes === void 0) {
|
||||
classes = [];
|
||||
}
|
||||
const el = document.createElement(tag);
|
||||
el.classList.add(...(Array.isArray(classes) ? classes : classesToTokens(classes)));
|
||||
return el;
|
||||
}
|
||||
function elementOffset(el) {
|
||||
const window = getWindow();
|
||||
const document = getDocument();
|
||||
const box = el.getBoundingClientRect();
|
||||
const body = document.body;
|
||||
const clientTop = el.clientTop || body.clientTop || 0;
|
||||
const clientLeft = el.clientLeft || body.clientLeft || 0;
|
||||
const scrollTop = el === window ? window.scrollY : el.scrollTop;
|
||||
const scrollLeft = el === window ? window.scrollX : el.scrollLeft;
|
||||
return {
|
||||
top: box.top + scrollTop - clientTop,
|
||||
left: box.left + scrollLeft - clientLeft
|
||||
};
|
||||
}
|
||||
function elementPrevAll(el, selector) {
|
||||
const prevEls = [];
|
||||
while (el.previousElementSibling) {
|
||||
const prev = el.previousElementSibling; // eslint-disable-line
|
||||
if (selector) {
|
||||
if (prev.matches(selector)) prevEls.push(prev);
|
||||
} else prevEls.push(prev);
|
||||
el = prev;
|
||||
}
|
||||
return prevEls;
|
||||
}
|
||||
function elementNextAll(el, selector) {
|
||||
const nextEls = [];
|
||||
while (el.nextElementSibling) {
|
||||
const next = el.nextElementSibling; // eslint-disable-line
|
||||
if (selector) {
|
||||
if (next.matches(selector)) nextEls.push(next);
|
||||
} else nextEls.push(next);
|
||||
el = next;
|
||||
}
|
||||
return nextEls;
|
||||
}
|
||||
function elementStyle(el, prop) {
|
||||
const window = getWindow();
|
||||
return window.getComputedStyle(el, null).getPropertyValue(prop);
|
||||
}
|
||||
function elementIndex(el) {
|
||||
let child = el;
|
||||
let i;
|
||||
if (child) {
|
||||
i = 0;
|
||||
// eslint-disable-next-line
|
||||
while ((child = child.previousSibling) !== null) {
|
||||
if (child.nodeType === 1) i += 1;
|
||||
}
|
||||
return i;
|
||||
}
|
||||
return undefined;
|
||||
}
|
||||
function elementParents(el, selector) {
|
||||
const parents = []; // eslint-disable-line
|
||||
let parent = el.parentElement; // eslint-disable-line
|
||||
while (parent) {
|
||||
if (selector) {
|
||||
if (parent.matches(selector)) parents.push(parent);
|
||||
} else {
|
||||
parents.push(parent);
|
||||
}
|
||||
parent = parent.parentElement;
|
||||
}
|
||||
return parents;
|
||||
}
|
||||
function elementTransitionEnd(el, callback) {
|
||||
function fireCallBack(e) {
|
||||
if (e.target !== el) return;
|
||||
callback.call(el, e);
|
||||
el.removeEventListener('transitionend', fireCallBack);
|
||||
}
|
||||
if (callback) {
|
||||
el.addEventListener('transitionend', fireCallBack);
|
||||
}
|
||||
}
|
||||
function elementOuterSize(el, size, includeMargins) {
|
||||
const window = getWindow();
|
||||
if (includeMargins) {
|
||||
return el[size === 'width' ? 'offsetWidth' : 'offsetHeight'] + parseFloat(window.getComputedStyle(el, null).getPropertyValue(size === 'width' ? 'margin-right' : 'margin-top')) + parseFloat(window.getComputedStyle(el, null).getPropertyValue(size === 'width' ? 'margin-left' : 'margin-bottom'));
|
||||
}
|
||||
return el.offsetWidth;
|
||||
}
|
||||
function makeElementsArray(el) {
|
||||
return (Array.isArray(el) ? el : [el]).filter(e => !!e);
|
||||
}
|
||||
function getRotateFix(swiper) {
|
||||
return v => {
|
||||
if (Math.abs(v) > 0 && swiper.browser && swiper.browser.need3dFix && Math.abs(v) % 90 === 0) {
|
||||
return v + 0.001;
|
||||
}
|
||||
return v;
|
||||
};
|
||||
}
|
||||
function setInnerHTML(el, html) {
|
||||
if (html === void 0) {
|
||||
html = '';
|
||||
}
|
||||
if (typeof trustedTypes !== 'undefined') {
|
||||
el.innerHTML = trustedTypes.createPolicy('html', {
|
||||
createHTML: s => s
|
||||
}).createHTML(html);
|
||||
} else {
|
||||
el.innerHTML = html;
|
||||
}
|
||||
}
|
||||
|
||||
export { setCSSProperty as a, elementParents as b, createElement as c, elementOffset as d, elementChildren as e, now as f, getSlideTransformEl as g, elementOuterSize as h, elementIndex as i, classesToTokens as j, getTranslate as k, elementTransitionEnd as l, makeElementsArray as m, nextTick as n, isObject as o, getRotateFix as p, elementStyle as q, elementNextAll as r, setInnerHTML as s, elementPrevAll as t, animateCSSModeScroll as u, showWarning as v, elementIsChildOf as w, extend as x, deleteProps as y };
|
||||
+838
@@ -0,0 +1,838 @@
|
||||
/**
|
||||
* Swiper Vue 11.2.8
|
||||
* Most modern mobile touch slider and framework with hardware accelerated transitions
|
||||
* https://swiperjs.com
|
||||
*
|
||||
* Copyright 2014-2025 Vladimir Kharlampidi
|
||||
*
|
||||
* Released under the MIT License
|
||||
*
|
||||
* Released on: May 23, 2025
|
||||
*/
|
||||
|
||||
import { h, ref, onUpdated, provide, watch, nextTick, onMounted, onBeforeUnmount, onBeforeUpdate, computed, inject } from 'vue';
|
||||
import { S as Swiper$1 } from './shared/swiper-core.mjs';
|
||||
import { g as getParams, a as getChangedParams, u as updateOnVirtualData, m as mountSwiper } from './shared/update-on-virtual-data.mjs';
|
||||
import { e as extend, u as updateSwiper, d as uniqueClasses, w as wrapperClass, n as needsNavigation, b as needsScrollbar, a as needsPagination } from './shared/update-swiper.mjs';
|
||||
|
||||
function getChildren(originalSlots, slidesRef, oldSlidesRef) {
|
||||
if (originalSlots === void 0) {
|
||||
originalSlots = {};
|
||||
}
|
||||
const slides = [];
|
||||
const slots = {
|
||||
'container-start': [],
|
||||
'container-end': [],
|
||||
'wrapper-start': [],
|
||||
'wrapper-end': []
|
||||
};
|
||||
const getSlidesFromElements = (els, slotName) => {
|
||||
if (!Array.isArray(els)) {
|
||||
return;
|
||||
}
|
||||
els.forEach(vnode => {
|
||||
const isFragment = typeof vnode.type === 'symbol';
|
||||
if (slotName === 'default') slotName = 'container-end';
|
||||
if (isFragment && vnode.children) {
|
||||
getSlidesFromElements(vnode.children, slotName);
|
||||
} else if (vnode.type && (vnode.type.name === 'SwiperSlide' || vnode.type.name === 'AsyncComponentWrapper') || vnode.componentOptions && vnode.componentOptions.tag === 'SwiperSlide') {
|
||||
slides.push(vnode);
|
||||
} else if (slots[slotName]) {
|
||||
slots[slotName].push(vnode);
|
||||
}
|
||||
});
|
||||
};
|
||||
Object.keys(originalSlots).forEach(slotName => {
|
||||
if (typeof originalSlots[slotName] !== 'function') return;
|
||||
const els = originalSlots[slotName]();
|
||||
getSlidesFromElements(els, slotName);
|
||||
});
|
||||
oldSlidesRef.value = slidesRef.value;
|
||||
slidesRef.value = slides;
|
||||
return {
|
||||
slides,
|
||||
slots
|
||||
};
|
||||
}
|
||||
|
||||
function renderVirtual(swiperRef, slides, virtualData) {
|
||||
if (!virtualData) return null;
|
||||
const getSlideIndex = index => {
|
||||
let slideIndex = index;
|
||||
if (index < 0) {
|
||||
slideIndex = slides.length + index;
|
||||
} else if (slideIndex >= slides.length) {
|
||||
// eslint-disable-next-line
|
||||
slideIndex = slideIndex - slides.length;
|
||||
}
|
||||
return slideIndex;
|
||||
};
|
||||
const style = swiperRef.value.isHorizontal() ? {
|
||||
[swiperRef.value.rtlTranslate ? 'right' : 'left']: `${virtualData.offset}px`
|
||||
} : {
|
||||
top: `${virtualData.offset}px`
|
||||
};
|
||||
const {
|
||||
from,
|
||||
to
|
||||
} = virtualData;
|
||||
const loopFrom = swiperRef.value.params.loop ? -slides.length : 0;
|
||||
const loopTo = swiperRef.value.params.loop ? slides.length * 2 : slides.length;
|
||||
const slidesToRender = [];
|
||||
for (let i = loopFrom; i < loopTo; i += 1) {
|
||||
if (i >= from && i <= to && slidesToRender.length < slides.length) {
|
||||
slidesToRender.push(slides[getSlideIndex(i)]);
|
||||
}
|
||||
}
|
||||
return slidesToRender.map(slide => {
|
||||
if (!slide.props) slide.props = {};
|
||||
if (!slide.props.style) slide.props.style = {};
|
||||
slide.props.swiperRef = swiperRef;
|
||||
slide.props.style = style;
|
||||
if (slide.type) {
|
||||
return h(slide.type, {
|
||||
...slide.props
|
||||
}, slide.children);
|
||||
} else if (slide.componentOptions) {
|
||||
return h(slide.componentOptions.Ctor, {
|
||||
...slide.props
|
||||
}, slide.componentOptions.children);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
const Swiper = {
|
||||
name: 'Swiper',
|
||||
props: {
|
||||
tag: {
|
||||
type: String,
|
||||
default: 'div'
|
||||
},
|
||||
wrapperTag: {
|
||||
type: String,
|
||||
default: 'div'
|
||||
},
|
||||
modules: {
|
||||
type: Array,
|
||||
default: undefined
|
||||
},
|
||||
init: {
|
||||
type: Boolean,
|
||||
default: undefined
|
||||
},
|
||||
direction: {
|
||||
type: String,
|
||||
default: undefined
|
||||
},
|
||||
oneWayMovement: {
|
||||
type: Boolean,
|
||||
default: undefined
|
||||
},
|
||||
swiperElementNodeName: {
|
||||
type: String,
|
||||
default: 'SWIPER-CONTAINER'
|
||||
},
|
||||
touchEventsTarget: {
|
||||
type: String,
|
||||
default: undefined
|
||||
},
|
||||
initialSlide: {
|
||||
type: Number,
|
||||
default: undefined
|
||||
},
|
||||
speed: {
|
||||
type: Number,
|
||||
default: undefined
|
||||
},
|
||||
cssMode: {
|
||||
type: Boolean,
|
||||
default: undefined
|
||||
},
|
||||
updateOnWindowResize: {
|
||||
type: Boolean,
|
||||
default: undefined
|
||||
},
|
||||
resizeObserver: {
|
||||
type: Boolean,
|
||||
default: undefined
|
||||
},
|
||||
nested: {
|
||||
type: Boolean,
|
||||
default: undefined
|
||||
},
|
||||
focusableElements: {
|
||||
type: String,
|
||||
default: undefined
|
||||
},
|
||||
width: {
|
||||
type: Number,
|
||||
default: undefined
|
||||
},
|
||||
height: {
|
||||
type: Number,
|
||||
default: undefined
|
||||
},
|
||||
preventInteractionOnTransition: {
|
||||
type: Boolean,
|
||||
default: undefined
|
||||
},
|
||||
userAgent: {
|
||||
type: String,
|
||||
default: undefined
|
||||
},
|
||||
url: {
|
||||
type: String,
|
||||
default: undefined
|
||||
},
|
||||
edgeSwipeDetection: {
|
||||
type: [Boolean, String],
|
||||
default: undefined
|
||||
},
|
||||
edgeSwipeThreshold: {
|
||||
type: Number,
|
||||
default: undefined
|
||||
},
|
||||
autoHeight: {
|
||||
type: Boolean,
|
||||
default: undefined
|
||||
},
|
||||
setWrapperSize: {
|
||||
type: Boolean,
|
||||
default: undefined
|
||||
},
|
||||
virtualTranslate: {
|
||||
type: Boolean,
|
||||
default: undefined
|
||||
},
|
||||
effect: {
|
||||
type: String,
|
||||
default: undefined
|
||||
},
|
||||
breakpoints: {
|
||||
type: Object,
|
||||
default: undefined
|
||||
},
|
||||
breakpointsBase: {
|
||||
type: String,
|
||||
default: undefined
|
||||
},
|
||||
spaceBetween: {
|
||||
type: [Number, String],
|
||||
default: undefined
|
||||
},
|
||||
slidesPerView: {
|
||||
type: [Number, String],
|
||||
default: undefined
|
||||
},
|
||||
maxBackfaceHiddenSlides: {
|
||||
type: Number,
|
||||
default: undefined
|
||||
},
|
||||
slidesPerGroup: {
|
||||
type: Number,
|
||||
default: undefined
|
||||
},
|
||||
slidesPerGroupSkip: {
|
||||
type: Number,
|
||||
default: undefined
|
||||
},
|
||||
slidesPerGroupAuto: {
|
||||
type: Boolean,
|
||||
default: undefined
|
||||
},
|
||||
centeredSlides: {
|
||||
type: Boolean,
|
||||
default: undefined
|
||||
},
|
||||
centeredSlidesBounds: {
|
||||
type: Boolean,
|
||||
default: undefined
|
||||
},
|
||||
slidesOffsetBefore: {
|
||||
type: Number,
|
||||
default: undefined
|
||||
},
|
||||
slidesOffsetAfter: {
|
||||
type: Number,
|
||||
default: undefined
|
||||
},
|
||||
normalizeSlideIndex: {
|
||||
type: Boolean,
|
||||
default: undefined
|
||||
},
|
||||
centerInsufficientSlides: {
|
||||
type: Boolean,
|
||||
default: undefined
|
||||
},
|
||||
watchOverflow: {
|
||||
type: Boolean,
|
||||
default: undefined
|
||||
},
|
||||
roundLengths: {
|
||||
type: Boolean,
|
||||
default: undefined
|
||||
},
|
||||
touchRatio: {
|
||||
type: Number,
|
||||
default: undefined
|
||||
},
|
||||
touchAngle: {
|
||||
type: Number,
|
||||
default: undefined
|
||||
},
|
||||
simulateTouch: {
|
||||
type: Boolean,
|
||||
default: undefined
|
||||
},
|
||||
shortSwipes: {
|
||||
type: Boolean,
|
||||
default: undefined
|
||||
},
|
||||
longSwipes: {
|
||||
type: Boolean,
|
||||
default: undefined
|
||||
},
|
||||
longSwipesRatio: {
|
||||
type: Number,
|
||||
default: undefined
|
||||
},
|
||||
longSwipesMs: {
|
||||
type: Number,
|
||||
default: undefined
|
||||
},
|
||||
followFinger: {
|
||||
type: Boolean,
|
||||
default: undefined
|
||||
},
|
||||
allowTouchMove: {
|
||||
type: Boolean,
|
||||
default: undefined
|
||||
},
|
||||
threshold: {
|
||||
type: Number,
|
||||
default: undefined
|
||||
},
|
||||
touchMoveStopPropagation: {
|
||||
type: Boolean,
|
||||
default: undefined
|
||||
},
|
||||
touchStartPreventDefault: {
|
||||
type: Boolean,
|
||||
default: undefined
|
||||
},
|
||||
touchStartForcePreventDefault: {
|
||||
type: Boolean,
|
||||
default: undefined
|
||||
},
|
||||
touchReleaseOnEdges: {
|
||||
type: Boolean,
|
||||
default: undefined
|
||||
},
|
||||
uniqueNavElements: {
|
||||
type: Boolean,
|
||||
default: undefined
|
||||
},
|
||||
resistance: {
|
||||
type: Boolean,
|
||||
default: undefined
|
||||
},
|
||||
resistanceRatio: {
|
||||
type: Number,
|
||||
default: undefined
|
||||
},
|
||||
watchSlidesProgress: {
|
||||
type: Boolean,
|
||||
default: undefined
|
||||
},
|
||||
grabCursor: {
|
||||
type: Boolean,
|
||||
default: undefined
|
||||
},
|
||||
preventClicks: {
|
||||
type: Boolean,
|
||||
default: undefined
|
||||
},
|
||||
preventClicksPropagation: {
|
||||
type: Boolean,
|
||||
default: undefined
|
||||
},
|
||||
slideToClickedSlide: {
|
||||
type: Boolean,
|
||||
default: undefined
|
||||
},
|
||||
loop: {
|
||||
type: Boolean,
|
||||
default: undefined
|
||||
},
|
||||
loopedSlides: {
|
||||
type: Number,
|
||||
default: undefined
|
||||
},
|
||||
loopPreventsSliding: {
|
||||
type: Boolean,
|
||||
default: undefined
|
||||
},
|
||||
loopAdditionalSlides: {
|
||||
type: Number,
|
||||
default: undefined
|
||||
},
|
||||
loopAddBlankSlides: {
|
||||
type: Boolean,
|
||||
default: undefined
|
||||
},
|
||||
rewind: {
|
||||
type: Boolean,
|
||||
default: undefined
|
||||
},
|
||||
allowSlidePrev: {
|
||||
type: Boolean,
|
||||
default: undefined
|
||||
},
|
||||
allowSlideNext: {
|
||||
type: Boolean,
|
||||
default: undefined
|
||||
},
|
||||
swipeHandler: {
|
||||
type: Boolean,
|
||||
default: undefined
|
||||
},
|
||||
noSwiping: {
|
||||
type: Boolean,
|
||||
default: undefined
|
||||
},
|
||||
noSwipingClass: {
|
||||
type: String,
|
||||
default: undefined
|
||||
},
|
||||
noSwipingSelector: {
|
||||
type: String,
|
||||
default: undefined
|
||||
},
|
||||
passiveListeners: {
|
||||
type: Boolean,
|
||||
default: undefined
|
||||
},
|
||||
containerModifierClass: {
|
||||
type: String,
|
||||
default: undefined
|
||||
},
|
||||
slideClass: {
|
||||
type: String,
|
||||
default: undefined
|
||||
},
|
||||
slideActiveClass: {
|
||||
type: String,
|
||||
default: undefined
|
||||
},
|
||||
slideVisibleClass: {
|
||||
type: String,
|
||||
default: undefined
|
||||
},
|
||||
slideFullyVisibleClass: {
|
||||
type: String,
|
||||
default: undefined
|
||||
},
|
||||
slideBlankClass: {
|
||||
type: String,
|
||||
default: undefined
|
||||
},
|
||||
slideNextClass: {
|
||||
type: String,
|
||||
default: undefined
|
||||
},
|
||||
slidePrevClass: {
|
||||
type: String,
|
||||
default: undefined
|
||||
},
|
||||
wrapperClass: {
|
||||
type: String,
|
||||
default: undefined
|
||||
},
|
||||
lazyPreloaderClass: {
|
||||
type: String,
|
||||
default: undefined
|
||||
},
|
||||
lazyPreloadPrevNext: {
|
||||
type: Number,
|
||||
default: undefined
|
||||
},
|
||||
runCallbacksOnInit: {
|
||||
type: Boolean,
|
||||
default: undefined
|
||||
},
|
||||
observer: {
|
||||
type: Boolean,
|
||||
default: undefined
|
||||
},
|
||||
observeParents: {
|
||||
type: Boolean,
|
||||
default: undefined
|
||||
},
|
||||
observeSlideChildren: {
|
||||
type: Boolean,
|
||||
default: undefined
|
||||
},
|
||||
a11y: {
|
||||
type: [Boolean, Object],
|
||||
default: undefined
|
||||
},
|
||||
autoplay: {
|
||||
type: [Boolean, Object],
|
||||
default: undefined
|
||||
},
|
||||
controller: {
|
||||
type: Object,
|
||||
default: undefined
|
||||
},
|
||||
coverflowEffect: {
|
||||
type: Object,
|
||||
default: undefined
|
||||
},
|
||||
cubeEffect: {
|
||||
type: Object,
|
||||
default: undefined
|
||||
},
|
||||
fadeEffect: {
|
||||
type: Object,
|
||||
default: undefined
|
||||
},
|
||||
flipEffect: {
|
||||
type: Object,
|
||||
default: undefined
|
||||
},
|
||||
creativeEffect: {
|
||||
type: Object,
|
||||
default: undefined
|
||||
},
|
||||
cardsEffect: {
|
||||
type: Object,
|
||||
default: undefined
|
||||
},
|
||||
hashNavigation: {
|
||||
type: [Boolean, Object],
|
||||
default: undefined
|
||||
},
|
||||
history: {
|
||||
type: [Boolean, Object],
|
||||
default: undefined
|
||||
},
|
||||
keyboard: {
|
||||
type: [Boolean, Object],
|
||||
default: undefined
|
||||
},
|
||||
mousewheel: {
|
||||
type: [Boolean, Object],
|
||||
default: undefined
|
||||
},
|
||||
navigation: {
|
||||
type: [Boolean, Object],
|
||||
default: undefined
|
||||
},
|
||||
pagination: {
|
||||
type: [Boolean, Object],
|
||||
default: undefined
|
||||
},
|
||||
parallax: {
|
||||
type: [Boolean, Object],
|
||||
default: undefined
|
||||
},
|
||||
scrollbar: {
|
||||
type: [Boolean, Object],
|
||||
default: undefined
|
||||
},
|
||||
thumbs: {
|
||||
type: Object,
|
||||
default: undefined
|
||||
},
|
||||
virtual: {
|
||||
type: [Boolean, Object],
|
||||
default: undefined
|
||||
},
|
||||
zoom: {
|
||||
type: [Boolean, Object],
|
||||
default: undefined
|
||||
},
|
||||
grid: {
|
||||
type: [Object],
|
||||
default: undefined
|
||||
},
|
||||
freeMode: {
|
||||
type: [Boolean, Object],
|
||||
default: undefined
|
||||
},
|
||||
enabled: {
|
||||
type: Boolean,
|
||||
default: undefined
|
||||
}
|
||||
},
|
||||
emits: ['_beforeBreakpoint', '_containerClasses', '_slideClass', '_slideClasses', '_swiper', '_freeModeNoMomentumRelease', 'activeIndexChange', 'afterInit', 'autoplay', 'autoplayStart', 'autoplayStop', 'autoplayPause', 'autoplayResume', 'autoplayTimeLeft', 'beforeDestroy', 'beforeInit', 'beforeLoopFix', 'beforeResize', 'beforeSlideChangeStart', 'beforeTransitionStart', 'breakpoint', 'changeDirection', 'click', 'disable', 'doubleTap', 'doubleClick', 'destroy', 'enable', 'fromEdge', 'hashChange', 'hashSet', 'init', 'keyPress', 'lock', 'loopFix', 'momentumBounce', 'navigationHide', 'navigationShow', 'navigationPrev', 'navigationNext', 'observerUpdate', 'orientationchange', 'paginationHide', 'paginationRender', 'paginationShow', 'paginationUpdate', 'progress', 'reachBeginning', 'reachEnd', 'realIndexChange', 'resize', 'scroll', 'scrollbarDragEnd', 'scrollbarDragMove', 'scrollbarDragStart', 'setTransition', 'setTranslate', 'slidesUpdated', 'slideChange', 'slideChangeTransitionEnd', 'slideChangeTransitionStart', 'slideNextTransitionEnd', 'slideNextTransitionStart', 'slidePrevTransitionEnd', 'slidePrevTransitionStart', 'slideResetTransitionStart', 'slideResetTransitionEnd', 'sliderMove', 'sliderFirstMove', 'slidesLengthChange', 'slidesGridLengthChange', 'snapGridLengthChange', 'snapIndexChange', 'swiper', 'tap', 'toEdge', 'touchEnd', 'touchMove', 'touchMoveOpposite', 'touchStart', 'transitionEnd', 'transitionStart', 'unlock', 'update', 'virtualUpdate', 'zoomChange'],
|
||||
setup(props, _ref) {
|
||||
let {
|
||||
slots: originalSlots,
|
||||
emit
|
||||
} = _ref;
|
||||
const {
|
||||
tag: Tag,
|
||||
wrapperTag: WrapperTag
|
||||
} = props;
|
||||
const containerClasses = ref('swiper');
|
||||
const virtualData = ref(null);
|
||||
const breakpointChanged = ref(false);
|
||||
const initializedRef = ref(false);
|
||||
const swiperElRef = ref(null);
|
||||
const swiperRef = ref(null);
|
||||
const oldPassedParamsRef = ref(null);
|
||||
const slidesRef = {
|
||||
value: []
|
||||
};
|
||||
const oldSlidesRef = {
|
||||
value: []
|
||||
};
|
||||
const nextElRef = ref(null);
|
||||
const prevElRef = ref(null);
|
||||
const paginationElRef = ref(null);
|
||||
const scrollbarElRef = ref(null);
|
||||
const {
|
||||
params: swiperParams,
|
||||
passedParams
|
||||
} = getParams(props, false);
|
||||
getChildren(originalSlots, slidesRef, oldSlidesRef);
|
||||
oldPassedParamsRef.value = passedParams;
|
||||
oldSlidesRef.value = slidesRef.value;
|
||||
const onBeforeBreakpoint = () => {
|
||||
getChildren(originalSlots, slidesRef, oldSlidesRef);
|
||||
breakpointChanged.value = true;
|
||||
};
|
||||
swiperParams.onAny = function (event) {
|
||||
for (var _len = arguments.length, args = new Array(_len > 1 ? _len - 1 : 0), _key = 1; _key < _len; _key++) {
|
||||
args[_key - 1] = arguments[_key];
|
||||
}
|
||||
emit(event, ...args);
|
||||
};
|
||||
Object.assign(swiperParams.on, {
|
||||
_beforeBreakpoint: onBeforeBreakpoint,
|
||||
_containerClasses(swiper, classes) {
|
||||
containerClasses.value = classes;
|
||||
}
|
||||
});
|
||||
|
||||
// init Swiper
|
||||
const passParams = {
|
||||
...swiperParams
|
||||
};
|
||||
delete passParams.wrapperClass;
|
||||
swiperRef.value = new Swiper$1(passParams);
|
||||
if (swiperRef.value.virtual && swiperRef.value.params.virtual.enabled) {
|
||||
swiperRef.value.virtual.slides = slidesRef.value;
|
||||
const extendWith = {
|
||||
cache: false,
|
||||
slides: slidesRef.value,
|
||||
renderExternal: data => {
|
||||
virtualData.value = data;
|
||||
},
|
||||
renderExternalUpdate: false
|
||||
};
|
||||
extend(swiperRef.value.params.virtual, extendWith);
|
||||
extend(swiperRef.value.originalParams.virtual, extendWith);
|
||||
}
|
||||
onUpdated(() => {
|
||||
// set initialized flag
|
||||
if (!initializedRef.value && swiperRef.value) {
|
||||
swiperRef.value.emitSlidesClasses();
|
||||
initializedRef.value = true;
|
||||
}
|
||||
// watch for params change
|
||||
const {
|
||||
passedParams: newPassedParams
|
||||
} = getParams(props, false);
|
||||
const changedParams = getChangedParams(newPassedParams, oldPassedParamsRef.value, slidesRef.value, oldSlidesRef.value, c => c.props && c.props.key);
|
||||
oldPassedParamsRef.value = newPassedParams;
|
||||
if ((changedParams.length || breakpointChanged.value) && swiperRef.value && !swiperRef.value.destroyed) {
|
||||
updateSwiper({
|
||||
swiper: swiperRef.value,
|
||||
slides: slidesRef.value,
|
||||
passedParams: newPassedParams,
|
||||
changedParams,
|
||||
nextEl: nextElRef.value,
|
||||
prevEl: prevElRef.value,
|
||||
scrollbarEl: scrollbarElRef.value,
|
||||
paginationEl: paginationElRef.value
|
||||
});
|
||||
}
|
||||
breakpointChanged.value = false;
|
||||
});
|
||||
provide('swiper', swiperRef);
|
||||
|
||||
// update on virtual update
|
||||
watch(virtualData, () => {
|
||||
nextTick(() => {
|
||||
updateOnVirtualData(swiperRef.value);
|
||||
});
|
||||
});
|
||||
|
||||
// mount swiper
|
||||
onMounted(() => {
|
||||
if (!swiperElRef.value) return;
|
||||
mountSwiper({
|
||||
el: swiperElRef.value,
|
||||
nextEl: nextElRef.value,
|
||||
prevEl: prevElRef.value,
|
||||
paginationEl: paginationElRef.value,
|
||||
scrollbarEl: scrollbarElRef.value,
|
||||
swiper: swiperRef.value
|
||||
}, swiperParams);
|
||||
emit('swiper', swiperRef.value);
|
||||
});
|
||||
onBeforeUnmount(() => {
|
||||
if (swiperRef.value && !swiperRef.value.destroyed) {
|
||||
swiperRef.value.destroy(true, false);
|
||||
}
|
||||
});
|
||||
|
||||
// bypass swiper instance to slides
|
||||
function renderSlides(slides) {
|
||||
if (swiperParams.virtual) {
|
||||
return renderVirtual(swiperRef, slides, virtualData.value);
|
||||
}
|
||||
slides.forEach((slide, index) => {
|
||||
if (!slide.props) slide.props = {};
|
||||
slide.props.swiperRef = swiperRef;
|
||||
slide.props.swiperSlideIndex = index;
|
||||
});
|
||||
return slides;
|
||||
}
|
||||
return () => {
|
||||
const {
|
||||
slides,
|
||||
slots
|
||||
} = getChildren(originalSlots, slidesRef, oldSlidesRef);
|
||||
return h(Tag, {
|
||||
ref: swiperElRef,
|
||||
class: uniqueClasses(containerClasses.value)
|
||||
}, [slots['container-start'], h(WrapperTag, {
|
||||
class: wrapperClass(swiperParams.wrapperClass)
|
||||
}, [slots['wrapper-start'], renderSlides(slides), slots['wrapper-end']]), needsNavigation(props) && [h('div', {
|
||||
ref: prevElRef,
|
||||
class: 'swiper-button-prev'
|
||||
}), h('div', {
|
||||
ref: nextElRef,
|
||||
class: 'swiper-button-next'
|
||||
})], needsScrollbar(props) && h('div', {
|
||||
ref: scrollbarElRef,
|
||||
class: 'swiper-scrollbar'
|
||||
}), needsPagination(props) && h('div', {
|
||||
ref: paginationElRef,
|
||||
class: 'swiper-pagination'
|
||||
}), slots['container-end']]);
|
||||
};
|
||||
}
|
||||
};
|
||||
|
||||
const SwiperSlide = {
|
||||
name: 'SwiperSlide',
|
||||
props: {
|
||||
tag: {
|
||||
type: String,
|
||||
default: 'div'
|
||||
},
|
||||
swiperRef: {
|
||||
type: Object,
|
||||
required: false
|
||||
},
|
||||
swiperSlideIndex: {
|
||||
type: Number,
|
||||
default: undefined,
|
||||
required: false
|
||||
},
|
||||
zoom: {
|
||||
type: Boolean,
|
||||
default: undefined,
|
||||
required: false
|
||||
},
|
||||
lazy: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
required: false
|
||||
},
|
||||
virtualIndex: {
|
||||
type: [String, Number],
|
||||
default: undefined
|
||||
}
|
||||
},
|
||||
setup(props, _ref) {
|
||||
let {
|
||||
slots
|
||||
} = _ref;
|
||||
let eventAttached = false;
|
||||
const {
|
||||
swiperRef
|
||||
} = props;
|
||||
const slideElRef = ref(null);
|
||||
const slideClasses = ref('swiper-slide');
|
||||
const lazyLoaded = ref(false);
|
||||
function updateClasses(swiper, el, classNames) {
|
||||
if (el === slideElRef.value) {
|
||||
slideClasses.value = classNames;
|
||||
}
|
||||
}
|
||||
onMounted(() => {
|
||||
if (!swiperRef || !swiperRef.value) return;
|
||||
swiperRef.value.on('_slideClass', updateClasses);
|
||||
eventAttached = true;
|
||||
});
|
||||
onBeforeUpdate(() => {
|
||||
if (eventAttached || !swiperRef || !swiperRef.value) return;
|
||||
swiperRef.value.on('_slideClass', updateClasses);
|
||||
eventAttached = true;
|
||||
});
|
||||
onUpdated(() => {
|
||||
if (!slideElRef.value || !swiperRef || !swiperRef.value) return;
|
||||
if (typeof props.swiperSlideIndex !== 'undefined') {
|
||||
slideElRef.value.swiperSlideIndex = props.swiperSlideIndex;
|
||||
}
|
||||
if (swiperRef.value.destroyed) {
|
||||
if (slideClasses.value !== 'swiper-slide') {
|
||||
slideClasses.value = 'swiper-slide';
|
||||
}
|
||||
}
|
||||
});
|
||||
onBeforeUnmount(() => {
|
||||
if (!swiperRef || !swiperRef.value) return;
|
||||
swiperRef.value.off('_slideClass', updateClasses);
|
||||
});
|
||||
const slideData = computed(() => ({
|
||||
isActive: slideClasses.value.indexOf('swiper-slide-active') >= 0,
|
||||
isVisible: slideClasses.value.indexOf('swiper-slide-visible') >= 0,
|
||||
isPrev: slideClasses.value.indexOf('swiper-slide-prev') >= 0,
|
||||
isNext: slideClasses.value.indexOf('swiper-slide-next') >= 0
|
||||
}));
|
||||
provide('swiperSlide', slideData);
|
||||
const onLoad = () => {
|
||||
lazyLoaded.value = true;
|
||||
};
|
||||
return () => {
|
||||
return h(props.tag, {
|
||||
class: uniqueClasses(`${slideClasses.value}`),
|
||||
ref: slideElRef,
|
||||
'data-swiper-slide-index': typeof props.virtualIndex === 'undefined' && swiperRef && swiperRef.value && swiperRef.value.params.loop ? props.swiperSlideIndex : props.virtualIndex,
|
||||
onLoadCapture: onLoad
|
||||
}, props.zoom ? h('div', {
|
||||
class: 'swiper-zoom-container',
|
||||
'data-swiper-zoom': typeof props.zoom === 'number' ? props.zoom : undefined
|
||||
}, [slots.default && slots.default(slideData.value), props.lazy && !lazyLoaded.value && h('div', {
|
||||
class: 'swiper-lazy-preloader'
|
||||
})]) : [slots.default && slots.default(slideData.value), props.lazy && !lazyLoaded.value && h('div', {
|
||||
class: 'swiper-lazy-preloader'
|
||||
})]);
|
||||
};
|
||||
}
|
||||
};
|
||||
|
||||
const useSwiperSlide = () => {
|
||||
return inject('swiperSlide');
|
||||
};
|
||||
const useSwiper = () => {
|
||||
return inject('swiper');
|
||||
};
|
||||
|
||||
export { Swiper, SwiperSlide, useSwiper, useSwiperSlide };
|
||||
+13
@@ -0,0 +1,13 @@
|
||||
/**
|
||||
* Swiper 11.2.8
|
||||
* Most modern mobile touch slider and framework with hardware accelerated transitions
|
||||
* https://swiperjs.com
|
||||
*
|
||||
* Copyright 2014-2025 Vladimir Kharlampidi
|
||||
*
|
||||
* Released under the MIT License
|
||||
*
|
||||
* Released on: May 23, 2025
|
||||
*/
|
||||
|
||||
export { S as Swiper, S as default } from './shared/swiper-core.mjs';
|
||||
Reference in New Issue
Block a user