history.mjs 4.2 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142
  1. import { a as getWindow } from '../shared/ssr-window.esm.mjs';
  2. 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. const slugify = text => {
  20. return text.toString().replace(/\s+/g, '-').replace(/[^\w-]+/g, '').replace(/--+/g, '-').replace(/^-+/, '').replace(/-+$/, '');
  21. };
  22. const getPathValues = urlOverride => {
  23. const window = getWindow();
  24. let location;
  25. if (urlOverride) {
  26. location = new URL(urlOverride);
  27. } else {
  28. location = window.location;
  29. }
  30. const pathArray = location.pathname.slice(1).split('/').filter(part => part !== '');
  31. const total = pathArray.length;
  32. const key = pathArray[total - 2];
  33. const value = pathArray[total - 1];
  34. return {
  35. key,
  36. value
  37. };
  38. };
  39. const setHistory = (key, index) => {
  40. const window = getWindow();
  41. if (!initialized || !swiper.params.history.enabled) return;
  42. let location;
  43. if (swiper.params.url) {
  44. location = new URL(swiper.params.url);
  45. } else {
  46. location = window.location;
  47. }
  48. const slide = swiper.virtual && swiper.params.virtual.enabled ? swiper.slidesEl.querySelector(`[data-swiper-slide-index="${index}"]`) : swiper.slides[index];
  49. let value = slugify(slide.getAttribute('data-history'));
  50. if (swiper.params.history.root.length > 0) {
  51. let root = swiper.params.history.root;
  52. if (root[root.length - 1] === '/') root = root.slice(0, root.length - 1);
  53. value = `${root}/${key ? `${key}/` : ''}${value}`;
  54. } else if (!location.pathname.includes(key)) {
  55. value = `${key ? `${key}/` : ''}${value}`;
  56. }
  57. if (swiper.params.history.keepQuery) {
  58. value += location.search;
  59. }
  60. const currentState = window.history.state;
  61. if (currentState && currentState.value === value) {
  62. return;
  63. }
  64. if (swiper.params.history.replaceState) {
  65. window.history.replaceState({
  66. value
  67. }, null, value);
  68. } else {
  69. window.history.pushState({
  70. value
  71. }, null, value);
  72. }
  73. };
  74. const scrollToSlide = (speed, value, runCallbacks) => {
  75. if (value) {
  76. for (let i = 0, length = swiper.slides.length; i < length; i += 1) {
  77. const slide = swiper.slides[i];
  78. const slideHistory = slugify(slide.getAttribute('data-history'));
  79. if (slideHistory === value) {
  80. const index = swiper.getSlideIndex(slide);
  81. swiper.slideTo(index, speed, runCallbacks);
  82. }
  83. }
  84. } else {
  85. swiper.slideTo(0, speed, runCallbacks);
  86. }
  87. };
  88. const setHistoryPopState = () => {
  89. paths = getPathValues(swiper.params.url);
  90. scrollToSlide(swiper.params.speed, paths.value, false);
  91. };
  92. const init = () => {
  93. const window = getWindow();
  94. if (!swiper.params.history) return;
  95. if (!window.history || !window.history.pushState) {
  96. swiper.params.history.enabled = false;
  97. swiper.params.hashNavigation.enabled = true;
  98. return;
  99. }
  100. initialized = true;
  101. paths = getPathValues(swiper.params.url);
  102. if (!paths.key && !paths.value) {
  103. if (!swiper.params.history.replaceState) {
  104. window.addEventListener('popstate', setHistoryPopState);
  105. }
  106. return;
  107. }
  108. scrollToSlide(0, paths.value, swiper.params.runCallbacksOnInit);
  109. if (!swiper.params.history.replaceState) {
  110. window.addEventListener('popstate', setHistoryPopState);
  111. }
  112. };
  113. const destroy = () => {
  114. const window = getWindow();
  115. if (!swiper.params.history.replaceState) {
  116. window.removeEventListener('popstate', setHistoryPopState);
  117. }
  118. };
  119. on('init', () => {
  120. if (swiper.params.history.enabled) {
  121. init();
  122. }
  123. });
  124. on('destroy', () => {
  125. if (swiper.params.history.enabled) {
  126. destroy();
  127. }
  128. });
  129. on('transitionEnd _freeModeNoMomentumRelease', () => {
  130. if (initialized) {
  131. setHistory(swiper.params.history.key, swiper.activeIndex);
  132. }
  133. });
  134. on('slideChange', () => {
  135. if (initialized && swiper.params.cssMode) {
  136. setHistory(swiper.params.history.key, swiper.activeIndex);
  137. }
  138. });
  139. }
  140. export { History as default };