swiper
Version:
Most modern mobile touch slider and framework with hardware accelerated transitions
209 lines (206 loc) • 7.14 kB
JavaScript
import { c as createElementIfNotDefined } from '../shared/create-element-if-not-defined.mjs';
import { m as makeElementsArray, s 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>`;
function 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'
}
});
swiper.navigation = {
nextEl: null,
prevEl: null,
arrowSvg
};
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) {
if (params.addIcons && el.matches('.swiper-button-next,.swiper-button-prev') && !el.querySelector('svg')) {
const tempEl = document.createElement('div');
setInnerHTML(tempEl, arrowSvg);
el.appendChild(tempEl.querySelector('svg'));
tempEl.remove();
}
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 };