123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200 |
- 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 };
|