hash-navigation.mjs 3.4 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293
  1. import { g as getDocument, a as getWindow } from '../shared/ssr-window.esm.mjs';
  2. import { e as elementChildren } from '../shared/utils.mjs';
  3. function HashNavigation(_ref) {
  4. let {
  5. swiper,
  6. extendParams,
  7. emit,
  8. on
  9. } = _ref;
  10. let initialized = false;
  11. const document = getDocument();
  12. const window = getWindow();
  13. extendParams({
  14. hashNavigation: {
  15. enabled: false,
  16. replaceState: false,
  17. watchState: false,
  18. getSlideIndex(_s, hash) {
  19. if (swiper.virtual && swiper.params.virtual.enabled) {
  20. const slideWithHash = swiper.slides.filter(slideEl => slideEl.getAttribute('data-hash') === hash)[0];
  21. if (!slideWithHash) return 0;
  22. const index = parseInt(slideWithHash.getAttribute('data-swiper-slide-index'), 10);
  23. return index;
  24. }
  25. return swiper.getSlideIndex(elementChildren(swiper.slidesEl, `.${swiper.params.slideClass}[data-hash="${hash}"], swiper-slide[data-hash="${hash}"]`)[0]);
  26. }
  27. }
  28. });
  29. const onHashChange = () => {
  30. emit('hashChange');
  31. const newHash = document.location.hash.replace('#', '');
  32. const activeSlideEl = swiper.virtual && swiper.params.virtual.enabled ? swiper.slidesEl.querySelector(`[data-swiper-slide-index="${swiper.activeIndex}"]`) : swiper.slides[swiper.activeIndex];
  33. const activeSlideHash = activeSlideEl ? activeSlideEl.getAttribute('data-hash') : '';
  34. if (newHash !== activeSlideHash) {
  35. const newIndex = swiper.params.hashNavigation.getSlideIndex(swiper, newHash);
  36. if (typeof newIndex === 'undefined' || Number.isNaN(newIndex)) return;
  37. swiper.slideTo(newIndex);
  38. }
  39. };
  40. const setHash = () => {
  41. if (!initialized || !swiper.params.hashNavigation.enabled) return;
  42. const activeSlideEl = swiper.virtual && swiper.params.virtual.enabled ? swiper.slidesEl.querySelector(`[data-swiper-slide-index="${swiper.activeIndex}"]`) : swiper.slides[swiper.activeIndex];
  43. const activeSlideHash = activeSlideEl ? activeSlideEl.getAttribute('data-hash') || activeSlideEl.getAttribute('data-history') : '';
  44. if (swiper.params.hashNavigation.replaceState && window.history && window.history.replaceState) {
  45. window.history.replaceState(null, null, `#${activeSlideHash}` || '');
  46. emit('hashSet');
  47. } else {
  48. document.location.hash = activeSlideHash || '';
  49. emit('hashSet');
  50. }
  51. };
  52. const init = () => {
  53. if (!swiper.params.hashNavigation.enabled || swiper.params.history && swiper.params.history.enabled) return;
  54. initialized = true;
  55. const hash = document.location.hash.replace('#', '');
  56. if (hash) {
  57. const speed = 0;
  58. const index = swiper.params.hashNavigation.getSlideIndex(swiper, hash);
  59. swiper.slideTo(index || 0, speed, swiper.params.runCallbacksOnInit, true);
  60. }
  61. if (swiper.params.hashNavigation.watchState) {
  62. window.addEventListener('hashchange', onHashChange);
  63. }
  64. };
  65. const destroy = () => {
  66. if (swiper.params.hashNavigation.watchState) {
  67. window.removeEventListener('hashchange', onHashChange);
  68. }
  69. };
  70. on('init', () => {
  71. if (swiper.params.hashNavigation.enabled) {
  72. init();
  73. }
  74. });
  75. on('destroy', () => {
  76. if (swiper.params.hashNavigation.enabled) {
  77. destroy();
  78. }
  79. });
  80. on('transitionEnd _freeModeNoMomentumRelease', () => {
  81. if (initialized) {
  82. setHash();
  83. }
  84. });
  85. on('slideChange', () => {
  86. if (initialized && swiper.params.cssMode) {
  87. setHash();
  88. }
  89. });
  90. }
  91. export { HashNavigation as default };