import { window, document } from 'ssr-window';
|
import $ from '../../utils/dom';
|
import Utils from '../../utils/utils';
|
|
const HashNavigation = {
|
onHashCange() {
|
const swiper = this;
|
swiper.emit('hashChange');
|
const newHash = document.location.hash.replace('#', '');
|
const activeSlideHash = swiper.slides.eq(swiper.activeIndex).attr('data-hash');
|
if (newHash !== activeSlideHash) {
|
const newIndex = swiper.$wrapperEl.children(`.${swiper.params.slideClass}[data-hash="${newHash}"]`).index();
|
if (typeof newIndex === 'undefined') return;
|
swiper.slideTo(newIndex);
|
}
|
},
|
setHash() {
|
const swiper = this;
|
if (!swiper.hashNavigation.initialized || !swiper.params.hashNavigation.enabled) return;
|
if (swiper.params.hashNavigation.replaceState && window.history && window.history.replaceState) {
|
window.history.replaceState(null, null, (`#${swiper.slides.eq(swiper.activeIndex).attr('data-hash')}` || ''));
|
swiper.emit('hashSet');
|
} else {
|
const slide = swiper.slides.eq(swiper.activeIndex);
|
const hash = slide.attr('data-hash') || slide.attr('data-history');
|
document.location.hash = hash || '';
|
swiper.emit('hashSet');
|
}
|
},
|
init() {
|
const swiper = this;
|
if (!swiper.params.hashNavigation.enabled || (swiper.params.history && swiper.params.history.enabled)) return;
|
swiper.hashNavigation.initialized = true;
|
const hash = document.location.hash.replace('#', '');
|
if (hash) {
|
const speed = 0;
|
for (let i = 0, length = swiper.slides.length; i < length; i += 1) {
|
const slide = swiper.slides.eq(i);
|
const slideHash = slide.attr('data-hash') || slide.attr('data-history');
|
if (slideHash === hash && !slide.hasClass(swiper.params.slideDuplicateClass)) {
|
const index = slide.index();
|
swiper.slideTo(index, speed, swiper.params.runCallbacksOnInit, true);
|
}
|
}
|
}
|
if (swiper.params.hashNavigation.watchState) {
|
$(window).on('hashchange', swiper.hashNavigation.onHashCange);
|
}
|
},
|
destroy() {
|
const swiper = this;
|
if (swiper.params.hashNavigation.watchState) {
|
$(window).off('hashchange', swiper.hashNavigation.onHashCange);
|
}
|
},
|
};
|
export default {
|
name: 'hash-navigation',
|
params: {
|
hashNavigation: {
|
enabled: false,
|
replaceState: false,
|
watchState: false,
|
},
|
},
|
create() {
|
const swiper = this;
|
Utils.extend(swiper, {
|
hashNavigation: {
|
initialized: false,
|
init: HashNavigation.init.bind(swiper),
|
destroy: HashNavigation.destroy.bind(swiper),
|
setHash: HashNavigation.setHash.bind(swiper),
|
onHashCange: HashNavigation.onHashCange.bind(swiper),
|
},
|
});
|
},
|
on: {
|
init() {
|
const swiper = this;
|
if (swiper.params.hashNavigation.enabled) {
|
swiper.hashNavigation.init();
|
}
|
},
|
destroy() {
|
const swiper = this;
|
if (swiper.params.hashNavigation.enabled) {
|
swiper.hashNavigation.destroy();
|
}
|
},
|
transitionEnd() {
|
const swiper = this;
|
if (swiper.hashNavigation.initialized) {
|
swiper.hashNavigation.setHash();
|
}
|
},
|
slideChange() {
|
const swiper = this;
|
if (swiper.hashNavigation.initialized && swiper.params.cssMode) {
|
swiper.hashNavigation.setHash();
|
}
|
},
|
},
|
};
|