hash-navigation.js 2.7 KB

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