Fix: Issue-2147 - Changes to fix backward compatibility issues (#2164)

* Changed: Issue 2147 - Tabs script updated for `EMBL People` tabs structure * Fix: Issue-2147 - Changes to fix backward compatibility issues
visual-framework · Nov 18, 2024 · 8ad2672 · 8ad2672
1 parent 6fddbe2
commit 8ad2672
Show file tree

Hide file tree

Showing 2 changed files with 21 additions and 12 deletions.
diff --git a/components/vf-tabs/CHANGELOG.md b/components/vf-tabs/CHANGELOG.md
@@ -1,3 +1,7 @@
+### 2.1.8
+
+* Fixed: Tabs script code updated to fix backward compatibility issues [Tracking issue](https://github.com/visual-framework/vf-core/issues/2147)
+
 ### 2.1.7
 
 * Updated: Tabs script code updated to accommodate 'EMBL People' tabs HTML structure [Tracking issue](https://github.com/visual-framework/vf-core/issues/2147)

diff --git a/components/vf-tabs/vf-tabs.js b/components/vf-tabs/vf-tabs.js
@@ -44,7 +44,7 @@ function vfTabs(scope) {
     // Handle clicking of tabs for mouse users
     tab.addEventListener("click", e => {
       e.preventDefault();
-      vfTabsSwitch(e.currentTarget);
+      vfTabsSwitch(e.currentTarget, panels);
     });
 
     // Handle keydown events for keyboard users
@@ -68,7 +68,7 @@ function vfTabs(scope) {
         dir === "down"
           ? panels[i].focus({ preventScroll: true })
           : tabs[dir]
-            ? vfTabsSwitch(tabs[dir])
+            ? vfTabsSwitch(tabs[dir], panels)
             : void 0;
       }
     });
@@ -100,30 +100,32 @@ function vfTabs(scope) {
 
   // activate any deeplinks to a specific tab
   if (activateDeepLinkOnLoad) {
+    vfTabsDeepLinkOnLoad(tabs, panels);
     Array.prototype.forEach.call(panels, panel => {
       let links = panel.querySelectorAll("[href*='vf-tabs__section']");
       links.forEach(link => {
         link.addEventListener("click", e => {
           e.preventDefault();
           let href = e.currentTarget.getAttribute("href");
-          vfTabsDeepLinkOnLoad(tabs, href);
+          vfTabsDeepLinkOnLoad(tabs, panels, href);
         });
       });
     });
   }
 }
 
 // The tab switching function
-const vfTabsSwitch = newTab => {
+const vfTabsSwitch = (newTab, panels) => {
   // Update url based on tab id
+  const data = newTab.getAttribute("id");
+  var url = "#" + data;
+  // var url = window.location.origin + window.location.pathname + window.location.search;
+  // url += url.endsWith("/") ? "#" + data : "/#" + data;
+  window.history.pushState(data, null, url);
 
   // get the parent ul of the clicked tab
   let parentTabSet = newTab.closest(".vf-tabs");
-  let parentPanelSet = parentTabSet.nextElementSibling || newTab.closest(".vf-tabs__list").nextElementSibling;
   let tabs = parentTabSet.querySelectorAll("[data-vf-js-tabs] .vf-tabs__link");
-  let panels = parentPanelSet.querySelectorAll(
-    "[data-vf-js-tabs-content] [id^='vf-tabs__section']"
-  );
 
   tabs.forEach(tab => {
     if (tab.getAttribute("aria-selected")) {
@@ -154,10 +156,13 @@ const vfTabsSwitch = newTab => {
   });
 };
 
-function vfTabsDeepLinkOnLoad(tabs, href) {
+function vfTabsDeepLinkOnLoad(tabs, panels, href) {
+  var hash;
   // 1. See if there is a `#vf-tabs__section--88888`
-  if (href) {
-    var hash = href.substring(href.indexOf("#") + 1);
+  if (window.location.hash) {
+    hash = window.location.hash.substring(1); //Puts hash in variable, and removes the # character
+  } else if (href) {
+    hash = href.substring(href.indexOf("#") + 1);
   } else {
     // No hash found
     return false;
@@ -168,7 +173,7 @@ function vfTabsDeepLinkOnLoad(tabs, href) {
   Array.prototype.forEach.call(tabs, tab => {
     let tabId = tab.getAttribute("data-tabs__item");
     if (tabId == hash) {
-      vfTabsSwitch(tab);
+      vfTabsSwitch(tab, panels);
     }
   });
 }