swiper
Version:
Most modern mobile touch slider and framework with hardware accelerated transitions
105 lines (103 loc) • 3.41 kB
JavaScript
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();
}
},
},
};