swiper
Version:
Most modern mobile touch slider and framework with hardware accelerated transitions
227 lines (224 loc) • 8.59 kB
JavaScript
import { c as createElementIfNotDefined } from '../shared/create-element-if-not-defined.mjs';
import { s as makeElementsArray, w as setInnerHTML } from '../shared/utils.mjs';
const arrowSvg = `<svg class="swiper-navigation-icon" width="11" height="20" viewBox="0 0 11 20" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M0.38296 20.0762C0.111788 19.805 0.111788 19.3654 0.38296 19.0942L9.19758 10.2796L0.38296 1.46497C0.111788 1.19379 0.111788 0.754138 0.38296 0.482966C0.654131 0.211794 1.09379 0.211794 1.36496 0.482966L10.4341 9.55214C10.8359 9.9539 10.8359 10.6053 10.4341 11.007L1.36496 20.0762C1.09379 20.3474 0.654131 20.3474 0.38296 20.0762Z" fill="currentColor"/></svg>`;
const Navigation = ({ swiper, extendParams, on, emit }) => {
extendParams({
navigation: {
nextEl: null,
prevEl: null,
addIcons: true,
hideOnClick: false,
disabledClass: 'swiper-button-disabled',
hiddenClass: 'swiper-button-hidden',
lockClass: 'swiper-button-lock',
navigationDisabledClass: 'swiper-navigation-disabled',
},
});
// Initialized as a partial; remaining methods (update, init, destroy,
// enable, disable) attach after their definitions below.
swiper.navigation = {
nextEl: null,
prevEl: null,
arrowSvg,
};
function getParams() {
return swiper.params.navigation;
}
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;
return res;
}
function toggleEl(el, disabled) {
const params = getParams();
const els = makeElementsArray(el);
els.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() {
swiper.params.navigation = createElementIfNotDefined(swiper, swiper.originalParams.navigation, swiper.params.navigation, {
nextEl: 'swiper-button-next',
prevEl: 'swiper-button-prev',
});
const params = getParams();
if (!(params.nextEl || params.prevEl))
return;
const nextEl = getEl(params.nextEl);
const prevEl = getEl(params.prevEl);
Object.assign(swiper.navigation, {
nextEl,
prevEl,
});
const nextEls = makeElementsArray(nextEl);
const prevEls = makeElementsArray(prevEl);
const initButton = (el, dir) => {
if (el) {
if (params.addIcons &&
el.matches('.swiper-button-next,.swiper-button-prev') &&
!el.querySelector('svg')) {
const tempEl = document.createElement('div');
setInnerHTML(tempEl, arrowSvg);
const svgEl = tempEl.querySelector('svg');
if (svgEl)
el.appendChild(svgEl);
tempEl.remove();
}
el.addEventListener('click', dir === 'next' ? onNextClick : onPrevClick);
}
if (!swiper.enabled && el) {
el.classList.add(...params.lockClass.split(' '));
}
};
nextEls.forEach((el) => initButton(el, 'next'));
prevEls.forEach((el) => initButton(el, 'prev'));
}
function destroy() {
const params = getParams();
const { nextEl, prevEl } = swiper.navigation;
const nextEls = makeElementsArray(nextEl);
const prevEls = makeElementsArray(prevEl);
const destroyButton = (el, dir) => {
el.removeEventListener('click', dir === 'next' ? onNextClick : onPrevClick);
el.classList.remove(...params.disabledClass.split(' '));
};
nextEls.forEach((el) => destroyButton(el, 'next'));
prevEls.forEach((el) => destroyButton(el, 'prev'));
}
on('init', () => {
if (getParams().enabled === false) {
disable();
}
else {
init();
update();
}
});
on('toEdge fromEdge lock unlock', () => {
update();
});
on('destroy', () => {
destroy();
});
on('enable disable', () => {
const params = getParams();
const { nextEl, prevEl } = swiper.navigation;
const nextEls = makeElementsArray(nextEl);
const prevEls = makeElementsArray(prevEl);
if (swiper.enabled) {
update();
return;
}
[...nextEls, ...prevEls]
.filter((el) => !!el)
.forEach((el) => el.classList.add(params.lockClass));
});
on('click', (_s, e) => {
const params = getParams();
const { nextEl, prevEl } = swiper.navigation;
const nextEls = makeElementsArray(nextEl);
const prevEls = makeElementsArray(prevEl);
const targetEl = e.target;
let targetIsButton = prevEls.includes(targetEl) || nextEls.includes(targetEl);
if (swiper.isElement && !targetIsButton) {
const path = e.composedPath ? e.composedPath() : [];
if (path.length) {
targetIsButton = path.find((pathEl) => nextEls.includes(pathEl) || prevEls.includes(pathEl));
}
}
if (params.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 (nextEls.length) {
isHidden = nextEls[0].classList.contains(params.hiddenClass);
}
else if (prevEls.length) {
isHidden = prevEls[0].classList.contains(params.hiddenClass);
}
if (isHidden === true) {
emit('navigationShow');
}
else {
emit('navigationHide');
}
[...nextEls, ...prevEls]
.filter((el) => !!el)
.forEach((el) => el.classList.toggle(params.hiddenClass));
}
});
const enable = () => {
const params = getParams();
swiper.el.classList.remove(...params.navigationDisabledClass.split(' '));
init();
update();
};
const disable = () => {
const params = getParams();
swiper.el.classList.add(...params.navigationDisabledClass.split(' '));
destroy();
};
Object.assign(swiper.navigation, {
enable,
disable,
update,
init,
destroy,
});
};
export { Navigation as default };