186 lines
		
	
	
		
			5.7 KiB
		
	
	
	
		
			JavaScript
		
	
	
			
		
		
	
	
			186 lines
		
	
	
		
			5.7 KiB
		
	
	
	
		
			JavaScript
		
	
	
import createElementIfNotDefined from '../../shared/create-element-if-not-defined.js';
 | 
						|
export default function Navigation({
 | 
						|
  swiper,
 | 
						|
  extendParams,
 | 
						|
  on,
 | 
						|
  emit
 | 
						|
}) {
 | 
						|
  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 => {
 | 
						|
    if (!Array.isArray(el)) el = [el].filter(e => !!e);
 | 
						|
    return el;
 | 
						|
  };
 | 
						|
  function getEl(el) {
 | 
						|
    let res;
 | 
						|
    if (el && typeof el === 'string' && swiper.isElement) {
 | 
						|
      res = swiper.el.shadowRoot.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);
 | 
						|
    [...nextEl, ...prevEl].filter(el => !!el).forEach(el => el.classList[swiper.enabled ? 'remove' : '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
 | 
						|
  });
 | 
						|
} |