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