89 lines
3.4 KiB
JavaScript
89 lines
3.4 KiB
JavaScript
import { getWindow, getDocument } from 'ssr-window';
|
|
import { elementChildren } from '../../shared/utils.js';
|
|
export default function HashNavigation({
|
|
swiper,
|
|
extendParams,
|
|
emit,
|
|
on
|
|
}) {
|
|
let initialized = false;
|
|
const document = getDocument();
|
|
const window = getWindow();
|
|
extendParams({
|
|
hashNavigation: {
|
|
enabled: false,
|
|
replaceState: false,
|
|
watchState: false,
|
|
getSlideIndex(_s, hash) {
|
|
if (swiper.virtual && swiper.params.virtual.enabled) {
|
|
const slideWithHash = swiper.slides.filter(slideEl => slideEl.getAttribute('data-hash') === hash)[0];
|
|
if (!slideWithHash) return 0;
|
|
const index = parseInt(slideWithHash.getAttribute('data-swiper-slide-index'), 10);
|
|
return index;
|
|
}
|
|
return swiper.getSlideIndex(elementChildren(swiper.slidesEl, `.${swiper.params.slideClass}[data-hash="${hash}"], swiper-slide[data-hash="${hash}"]`)[0]);
|
|
}
|
|
}
|
|
});
|
|
const onHashChange = () => {
|
|
emit('hashChange');
|
|
const newHash = document.location.hash.replace('#', '');
|
|
const activeSlideEl = swiper.virtual && swiper.params.virtual.enabled ? swiper.slidesEl.querySelector(`[data-swiper-slide-index="${swiper.activeIndex}"]`) : swiper.slides[swiper.activeIndex];
|
|
const activeSlideHash = activeSlideEl ? activeSlideEl.getAttribute('data-hash') : '';
|
|
if (newHash !== activeSlideHash) {
|
|
const newIndex = swiper.params.hashNavigation.getSlideIndex(swiper, newHash);
|
|
if (typeof newIndex === 'undefined' || Number.isNaN(newIndex)) return;
|
|
swiper.slideTo(newIndex);
|
|
}
|
|
};
|
|
const setHash = () => {
|
|
if (!initialized || !swiper.params.hashNavigation.enabled) return;
|
|
const activeSlideEl = swiper.virtual && swiper.params.virtual.enabled ? swiper.slidesEl.querySelector(`[data-swiper-slide-index="${swiper.activeIndex}"]`) : swiper.slides[swiper.activeIndex];
|
|
const activeSlideHash = activeSlideEl ? activeSlideEl.getAttribute('data-hash') || activeSlideEl.getAttribute('data-history') : '';
|
|
if (swiper.params.hashNavigation.replaceState && window.history && window.history.replaceState) {
|
|
window.history.replaceState(null, null, `#${activeSlideHash}` || '');
|
|
emit('hashSet');
|
|
} else {
|
|
document.location.hash = activeSlideHash || '';
|
|
emit('hashSet');
|
|
}
|
|
};
|
|
const init = () => {
|
|
if (!swiper.params.hashNavigation.enabled || swiper.params.history && swiper.params.history.enabled) return;
|
|
initialized = true;
|
|
const hash = document.location.hash.replace('#', '');
|
|
if (hash) {
|
|
const speed = 0;
|
|
const index = swiper.params.hashNavigation.getSlideIndex(swiper, hash);
|
|
swiper.slideTo(index || 0, speed, swiper.params.runCallbacksOnInit, true);
|
|
}
|
|
if (swiper.params.hashNavigation.watchState) {
|
|
window.addEventListener('hashchange', onHashChange);
|
|
}
|
|
};
|
|
const destroy = () => {
|
|
if (swiper.params.hashNavigation.watchState) {
|
|
window.removeEventListener('hashchange', onHashChange);
|
|
}
|
|
};
|
|
on('init', () => {
|
|
if (swiper.params.hashNavigation.enabled) {
|
|
init();
|
|
}
|
|
});
|
|
on('destroy', () => {
|
|
if (swiper.params.hashNavigation.enabled) {
|
|
destroy();
|
|
}
|
|
});
|
|
on('transitionEnd _freeModeNoMomentumRelease', () => {
|
|
if (initialized) {
|
|
setHash();
|
|
}
|
|
});
|
|
on('slideChange', () => {
|
|
if (initialized && swiper.params.cssMode) {
|
|
setHash();
|
|
}
|
|
});
|
|
} |