feat(hash-navigation): new getSlideIndex to specify slide index by …

…hash fixes #6588
nolimits4web · Apr 21, 2023 · 3eb0ae2 · 3eb0ae2
1 parent 154f048
commit 3eb0ae2
Show file tree

Hide file tree

Showing 2 changed files with 38 additions and 23 deletions.
diff --git a/src/modules/hash-navigation/hash-navigation.js b/src/modules/hash-navigation/hash-navigation.js
@@ -10,40 +10,55 @@ export default function HashNavigation({ swiper, extendParams, emit, on }) {
       enabled: false,
       replaceState: false,
       watchState: false,
+      getSlideIndex(_s, hash) {
+        if (swiper.virtual && swiper.params.virtual.enabled) {
+          const slideWithHash = swiper.slides.filter(
+            (slideEl) => slideEl.getAttribute('data-hash') === hash,
+          )[0];
+          if (!slideWithHash) return 0;
+          const index = parseInt(slideWithHash.getAttribute('data-swiper-slide-index'), 10);
+          return index;
+        }
+        return swiper.getSlideIndex(
+          elementChildren(
+            swiper.slidesEl,
+            `.${swiper.params.slideClass}[data-hash="${hash}"], swiper-slide[data-hash="${hash}"]`,
+          )[0],
+        );
+      },
     },
   });
   const onHashChange = () => {
     emit('hashChange');
     const newHash = document.location.hash.replace('#', '');
-    const activeSlideHash = swiper.slides[swiper.activeIndex].getAttribute('data-hash');
+    const activeSlideEl = swiper.slidesEl.querySelector(
+      `[data-swiper-slide-index="${swiper.activeIndex}"]`,
+    );
+    const activeSlideHash = activeSlideEl ? activeSlideEl.getAttribute('data-hash') : '';
     if (newHash !== activeSlideHash) {
-      const newIndex = swiper.getSlideIndex(
-        elementChildren(
-          swiper.slidesEl,
-          `.${swiper.params.slideClass}[data-hash="${newHash}"], swiper-slide[data-hash="${newHash}"]`,
-        )[0],
-      );
+      const newIndex = swiper.params.hashNavigation.getSlideIndex(swiper, newHash);
+      console.log(newIndex);
       if (typeof newIndex === 'undefined') return;
       swiper.slideTo(newIndex);
     }
   };
   const setHash = () => {
     if (!initialized || !swiper.params.hashNavigation.enabled) return;
+    const activeSlideEl = swiper.slidesEl.querySelector(
+      `[data-swiper-slide-index="${swiper.activeIndex}"]`,
+    );
+    const activeSlideHash = activeSlideEl
+      ? activeSlideEl.getAttribute('data-hash') || activeSlideEl.getAttribute('data-history')
+      : '';
     if (
       swiper.params.hashNavigation.replaceState &&
       window.history &&
       window.history.replaceState
     ) {
-      window.history.replaceState(
-        null,
-        null,
-        `#${swiper.slides[swiper.activeIndex].getAttribute('data-hash')}` || '',
-      );
+      window.history.replaceState(null, null, `#${activeSlideHash}` || '');
       emit('hashSet');
     } else {
-      const slide = swiper.slides[swiper.activeIndex];
-      const hash = slide.getAttribute('data-hash') || slide.getAttribute('data-history');
-      document.location.hash = hash || '';
+      document.location.hash = activeSlideHash || '';
       emit('hashSet');
     }
   };
@@ -57,14 +72,8 @@ export default function HashNavigation({ swiper, extendParams, emit, on }) {
     const hash = document.location.hash.replace('#', '');
     if (hash) {
       const speed = 0;
-      for (let i = 0, length = swiper.slides.length; i < length; i += 1) {
-        const slide = swiper.slides[i];
-        const slideHash = slide.getAttribute('data-hash') || slide.getAttribute('data-history');
-        if (slideHash === hash) {
-          const index = swiper.getSlideIndex(slide);
-          swiper.slideTo(index, speed, swiper.params.runCallbacksOnInit, true);
-        }
-      }
+      const index = swiper.params.hashNavigation.getSlideIndex(swiper, hash);
+      swiper.slideTo(index || 0, speed, swiper.params.runCallbacksOnInit, true);
     }
     if (swiper.params.hashNavigation.watchState) {
       window.addEventListener('hashchange', onHashChange);

diff --git a/src/types/modules/hash-navigation.d.ts b/src/types/modules/hash-navigation.d.ts
@@ -29,4 +29,10 @@ export interface HashNavigationOptions {
    * @default     false
    */
   replaceState?: boolean;
+
+  /**
+   * Designed to be used with Virtual slides when it is impossible to find slide in DOM by hash (e.g. not yet rendered)
+   *
+   */
+  getSlideIndex?: (swiper: Swiper, hash: string) => number;
 }