1 | import { getWindow } from 'ssr-window';
|
2 | export default function History(_ref) {
|
3 | let {
|
4 | swiper,
|
5 | extendParams,
|
6 | on
|
7 | } = _ref;
|
8 | extendParams({
|
9 | history: {
|
10 | enabled: false,
|
11 | root: '',
|
12 | replaceState: false,
|
13 | key: 'slides',
|
14 | keepQuery: false
|
15 | }
|
16 | });
|
17 | let initialized = false;
|
18 | let paths = {};
|
19 |
|
20 | const slugify = text => {
|
21 | return text.toString().replace(/\s+/g, '-').replace(/[^\w-]+/g, '').replace(/--+/g, '-').replace(/^-+/, '').replace(/-+$/, '');
|
22 | };
|
23 |
|
24 | const getPathValues = urlOverride => {
|
25 | const window = getWindow();
|
26 | let location;
|
27 |
|
28 | if (urlOverride) {
|
29 | location = new URL(urlOverride);
|
30 | } else {
|
31 | location = window.location;
|
32 | }
|
33 |
|
34 | const pathArray = location.pathname.slice(1).split('/').filter(part => part !== '');
|
35 | const total = pathArray.length;
|
36 | const key = pathArray[total - 2];
|
37 | const value = pathArray[total - 1];
|
38 | return {
|
39 | key,
|
40 | value
|
41 | };
|
42 | };
|
43 |
|
44 | const setHistory = (key, index) => {
|
45 | const window = getWindow();
|
46 | if (!initialized || !swiper.params.history.enabled) return;
|
47 | let location;
|
48 |
|
49 | if (swiper.params.url) {
|
50 | location = new URL(swiper.params.url);
|
51 | } else {
|
52 | location = window.location;
|
53 | }
|
54 |
|
55 | const slide = swiper.slides.eq(index);
|
56 | let value = slugify(slide.attr('data-history'));
|
57 |
|
58 | if (swiper.params.history.root.length > 0) {
|
59 | let root = swiper.params.history.root;
|
60 | if (root[root.length - 1] === '/') root = root.slice(0, root.length - 1);
|
61 | value = `${root}/${key}/${value}`;
|
62 | } else if (!location.pathname.includes(key)) {
|
63 | value = `${key}/${value}`;
|
64 | }
|
65 |
|
66 | if (swiper.params.history.keepQuery) {
|
67 | value += location.search;
|
68 | }
|
69 |
|
70 | const currentState = window.history.state;
|
71 |
|
72 | if (currentState && currentState.value === value) {
|
73 | return;
|
74 | }
|
75 |
|
76 | if (swiper.params.history.replaceState) {
|
77 | window.history.replaceState({
|
78 | value
|
79 | }, null, value);
|
80 | } else {
|
81 | window.history.pushState({
|
82 | value
|
83 | }, null, value);
|
84 | }
|
85 | };
|
86 |
|
87 | const scrollToSlide = (speed, value, runCallbacks) => {
|
88 | if (value) {
|
89 | for (let i = 0, length = swiper.slides.length; i < length; i += 1) {
|
90 | const slide = swiper.slides.eq(i);
|
91 | const slideHistory = slugify(slide.attr('data-history'));
|
92 |
|
93 | if (slideHistory === value && !slide.hasClass(swiper.params.slideDuplicateClass)) {
|
94 | const index = slide.index();
|
95 | swiper.slideTo(index, speed, runCallbacks);
|
96 | }
|
97 | }
|
98 | } else {
|
99 | swiper.slideTo(0, speed, runCallbacks);
|
100 | }
|
101 | };
|
102 |
|
103 | const setHistoryPopState = () => {
|
104 | paths = getPathValues(swiper.params.url);
|
105 | scrollToSlide(swiper.params.speed, paths.value, false);
|
106 | };
|
107 |
|
108 | const init = () => {
|
109 | const window = getWindow();
|
110 | if (!swiper.params.history) return;
|
111 |
|
112 | if (!window.history || !window.history.pushState) {
|
113 | swiper.params.history.enabled = false;
|
114 | swiper.params.hashNavigation.enabled = true;
|
115 | return;
|
116 | }
|
117 |
|
118 | initialized = true;
|
119 | paths = getPathValues(swiper.params.url);
|
120 | if (!paths.key && !paths.value) return;
|
121 | scrollToSlide(0, paths.value, swiper.params.runCallbacksOnInit);
|
122 |
|
123 | if (!swiper.params.history.replaceState) {
|
124 | window.addEventListener('popstate', setHistoryPopState);
|
125 | }
|
126 | };
|
127 |
|
128 | const destroy = () => {
|
129 | const window = getWindow();
|
130 |
|
131 | if (!swiper.params.history.replaceState) {
|
132 | window.removeEventListener('popstate', setHistoryPopState);
|
133 | }
|
134 | };
|
135 |
|
136 | on('init', () => {
|
137 | if (swiper.params.history.enabled) {
|
138 | init();
|
139 | }
|
140 | });
|
141 | on('destroy', () => {
|
142 | if (swiper.params.history.enabled) {
|
143 | destroy();
|
144 | }
|
145 | });
|
146 | on('transitionEnd _freeModeNoMomentumRelease', () => {
|
147 | if (initialized) {
|
148 | setHistory(swiper.params.history.key, swiper.activeIndex);
|
149 | }
|
150 | });
|
151 | on('slideChange', () => {
|
152 | if (initialized && swiper.params.cssMode) {
|
153 | setHistory(swiper.params.history.key, swiper.activeIndex);
|
154 | }
|
155 | });
|
156 | } |
\ | No newline at end of file |