import { window } from 'ssr-window';
|
import Utils from '../../utils/utils';
|
|
const History = {
|
init() {
|
const swiper = this;
|
if (!swiper.params.history) return;
|
if (!window.history || !window.history.pushState) {
|
swiper.params.history.enabled = false;
|
swiper.params.hashNavigation.enabled = true;
|
return;
|
}
|
const history = swiper.history;
|
history.initialized = true;
|
history.paths = History.getPathValues();
|
if (!history.paths.key && !history.paths.value) return;
|
history.scrollToSlide(0, history.paths.value, swiper.params.runCallbacksOnInit);
|
if (!swiper.params.history.replaceState) {
|
window.addEventListener('popstate', swiper.history.setHistoryPopState);
|
}
|
},
|
destroy() {
|
const swiper = this;
|
if (!swiper.params.history.replaceState) {
|
window.removeEventListener('popstate', swiper.history.setHistoryPopState);
|
}
|
},
|
setHistoryPopState() {
|
const swiper = this;
|
swiper.history.paths = History.getPathValues();
|
swiper.history.scrollToSlide(swiper.params.speed, swiper.history.paths.value, false);
|
},
|
getPathValues() {
|
const pathArray = window.location.pathname.slice(1).split('/').filter((part) => part !== '');
|
const total = pathArray.length;
|
const key = pathArray[total - 2];
|
const value = pathArray[total - 1];
|
return { key, value };
|
},
|
setHistory(key, index) {
|
const swiper = this;
|
if (!swiper.history.initialized || !swiper.params.history.enabled) return;
|
const slide = swiper.slides.eq(index);
|
let value = History.slugify(slide.attr('data-history'));
|
if (!window.location.pathname.includes(key)) {
|
value = `${key}/${value}`;
|
}
|
const currentState = window.history.state;
|
if (currentState && currentState.value === value) {
|
return;
|
}
|
if (swiper.params.history.replaceState) {
|
window.history.replaceState({ value }, null, value);
|
} else {
|
window.history.pushState({ value }, null, value);
|
}
|
},
|
slugify(text) {
|
return text.toString()
|
.replace(/\s+/g, '-')
|
.replace(/[^\w-]+/g, '')
|
.replace(/--+/g, '-')
|
.replace(/^-+/, '')
|
.replace(/-+$/, '');
|
},
|
scrollToSlide(speed, value, runCallbacks) {
|
const swiper = this;
|
if (value) {
|
for (let i = 0, length = swiper.slides.length; i < length; i += 1) {
|
const slide = swiper.slides.eq(i);
|
const slideHistory = History.slugify(slide.attr('data-history'));
|
if (slideHistory === value && !slide.hasClass(swiper.params.slideDuplicateClass)) {
|
const index = slide.index();
|
swiper.slideTo(index, speed, runCallbacks);
|
}
|
}
|
} else {
|
swiper.slideTo(0, speed, runCallbacks);
|
}
|
},
|
};
|
|
export default {
|
name: 'history',
|
params: {
|
history: {
|
enabled: false,
|
replaceState: false,
|
key: 'slides',
|
},
|
},
|
create() {
|
const swiper = this;
|
Utils.extend(swiper, {
|
history: {
|
init: History.init.bind(swiper),
|
setHistory: History.setHistory.bind(swiper),
|
setHistoryPopState: History.setHistoryPopState.bind(swiper),
|
scrollToSlide: History.scrollToSlide.bind(swiper),
|
destroy: History.destroy.bind(swiper),
|
},
|
});
|
},
|
on: {
|
init() {
|
const swiper = this;
|
if (swiper.params.history.enabled) {
|
swiper.history.init();
|
}
|
},
|
destroy() {
|
const swiper = this;
|
if (swiper.params.history.enabled) {
|
swiper.history.destroy();
|
}
|
},
|
transitionEnd() {
|
const swiper = this;
|
if (swiper.history.initialized) {
|
swiper.history.setHistory(swiper.params.history.key, swiper.activeIndex);
|
}
|
},
|
slideChange() {
|
const swiper = this;
|
if (swiper.history.initialized && swiper.params.cssMode) {
|
swiper.history.setHistory(swiper.params.history.key, swiper.activeIndex);
|
}
|
},
|
},
|
};
|
