import { c as createElementIfNotDefined } from '../shared/create-element-if-not-defined.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 }; const makeElementsArray = el => (Array.isArray(el) ? el : [el]).filter(e => !!e); function getEl(el) { let res; if (el && typeof el === 'string' && swiper.isElement) { res = swiper.el.querySelector(el); if (res) return res; } if (el) { if (typeof el === 'string') res = [...document.querySelectorAll(el)]; if (swiper.params.uniqueNavElements && typeof el === 'string' && res.length > 1 && swiper.el.querySelectorAll(el).length === 1) { res = swiper.el.querySelector(el); } } 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; if (swiper.params.navigation.hideOnClick && !prevEl.includes(targetEl) && !nextEl.includes(targetEl)) { 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 };