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