hash-navigation.js 2.7 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596
  1. import { getWindow, getDocument } from 'ssr-window';
  2. import $ from '../../shared/dom.js';
  3. export default function HashNavigation({
  4. swiper,
  5. extendParams,
  6. emit,
  7. on
  8. }) {
  9. let initialized = false;
  10. const document = getDocument();
  11. const window = getWindow();
  12. extendParams({
  13. hashNavigation: {
  14. enabled: false,
  15. replaceState: false,
  16. watchState: false
  17. }
  18. });
  19. const onHashChange = () => {
  20. emit('hashChange');
  21. const newHash = document.location.hash.replace('#', '');
  22. const activeSlideHash = swiper.slides.eq(swiper.activeIndex).attr('data-hash');
  23. if (newHash !== activeSlideHash) {
  24. const newIndex = swiper.$wrapperEl.children(`.${swiper.params.slideClass}[data-hash="${newHash}"]`).index();
  25. if (typeof newIndex === 'undefined') return;
  26. swiper.slideTo(newIndex);
  27. }
  28. };
  29. const setHash = () => {
  30. if (!initialized || !swiper.params.hashNavigation.enabled) return;
  31. if (swiper.params.hashNavigation.replaceState && window.history && window.history.replaceState) {
  32. window.history.replaceState(null, null, `#${swiper.slides.eq(swiper.activeIndex).attr('data-hash')}` || '');
  33. emit('hashSet');
  34. } else {
  35. const slide = swiper.slides.eq(swiper.activeIndex);
  36. const hash = slide.attr('data-hash') || slide.attr('data-history');
  37. document.location.hash = hash || '';
  38. emit('hashSet');
  39. }
  40. };
  41. const init = () => {
  42. if (!swiper.params.hashNavigation.enabled || swiper.params.history && swiper.params.history.enabled) return;
  43. initialized = true;
  44. const hash = document.location.hash.replace('#', '');
  45. if (hash) {
  46. const speed = 0;
  47. for (let i = 0, length = swiper.slides.length; i < length; i += 1) {
  48. const slide = swiper.slides.eq(i);
  49. const slideHash = slide.attr('data-hash') || slide.attr('data-history');
  50. if (slideHash === hash && !slide.hasClass(swiper.params.slideDuplicateClass)) {
  51. const index = slide.index();
  52. swiper.slideTo(index, speed, swiper.params.runCallbacksOnInit, true);
  53. }
  54. }
  55. }
  56. if (swiper.params.hashNavigation.watchState) {
  57. $(window).on('hashchange', onHashChange);
  58. }
  59. };
  60. const destroy = () => {
  61. if (swiper.params.hashNavigation.watchState) {
  62. $(window).off('hashchange', onHashChange);
  63. }
  64. };
  65. on('init', () => {
  66. if (swiper.params.hashNavigation.enabled) {
  67. init();
  68. }
  69. });
  70. on('destroy', () => {
  71. if (swiper.params.hashNavigation.enabled) {
  72. destroy();
  73. }
  74. });
  75. on('transitionEnd _freeModeNoMomentumRelease', () => {
  76. if (initialized) {
  77. setHash();
  78. }
  79. });
  80. on('slideChange', () => {
  81. if (initialized && swiper.params.cssMode) {
  82. setHash();
  83. }
  84. });
  85. }