From b4d0a36c714a303ddfc45537edc1526c154b5b51 Mon Sep 17 00:00:00 2001
From: Andrea Longo <feorlen@users.noreply.github.com>
Date: Fri, 23 Feb 2024 11:40:26 -0700
Subject: [PATCH] Allow links into closed tabs (#1126)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

JS update to allow a link into a closed tab.

Tested with
```
:mc-conf:`~browser.hsts_seconds`
```
which goes to a tab in [this
section](https://min.io/docs/minio/linux/reference/minio-server/settings/console.html#strict-transport-security)

@rushenn Ravind and Andrea came up with this, need a JS intervention to
ensure it's actually reasonable. 🙏🏻

Staged

http://192.241.195.202:9000/staging/link-into-tab/linux/reference/minio-server/settings/console.html#strict-transport-security

---------

Co-authored-by: Ravind Kumar <ravind@min.io>
Co-authored-by: Rushan <rushenn123@gmail.com>
---
 source/_static/js/main.js                 | 52 ++++++++++++++++++++++-
 source/_static/scss/includes/_base.scss   |  1 -
 source/_static/scss/includes/_layout.scss |  1 -
 3 files changed, 51 insertions(+), 3 deletions(-)

diff --git a/source/_static/js/main.js b/source/_static/js/main.js
index 46e251a7..ecbf1553 100644
--- a/source/_static/js/main.js
+++ b/source/_static/js/main.js
@@ -504,4 +504,54 @@ window.addEventListener("DOMContentLoaded", (event) => {
       });
     }
   })();
-});
\ No newline at end of file
+
+  // ------------------------------------------------
+  // Tab switching for hidden anchors
+  // ------------------------------------------------
+
+  // If the element is hidden, neither scrollIntoView nor hashScroll will work.
+  // This function checks whether the element is visible or not.
+  function isHashElemeVisible(elem) {
+    var style = window.getComputedStyle(elem);
+    return (elem.offsetWidth > 0 || elem.offsetHeight > 0) && style.display !== 'none' && style.visibility !== 'hidden';
+  }
+  
+  function hashScroll() {
+    // Target ID - where the browser should scroll to
+    const hashElem = document.getElementById(window.location.hash.substring(1));
+  
+    // Check if the hash is valid
+    // If it is, but not visible, the corresponding tab is also not visible.
+    // Make the tab active and scroll to it
+    if(hashElem) {
+      if(!isHashElemeVisible(hashElem)) {
+        hashElem.closest(".sd-tab-content").previousElementSibling.click();
+  
+        setTimeout(() => {
+          hashElem.scrollIntoView({ behavior: 'smooth' });
+        }, 100);
+      }
+      else {
+        hashElem.scrollIntoView({ behavior: 'smooth' });
+      }
+    }
+  }
+  
+  // Listen for hash changes
+  window.addEventListener("hashchange", () => {
+    hashScroll();
+  });
+
+  // Listen for click events on internal references
+  const references = document.querySelectorAll("a.reference.internal");
+
+  if(references.length > 0) {
+    references.forEach((item) => {
+      item.addEventListener("click", () => {
+        hashScroll();
+      });
+    });
+  }
+  
+  hashScroll()
+});
diff --git a/source/_static/scss/includes/_base.scss b/source/_static/scss/includes/_base.scss
index a9cc54e5..9f6ac2c1 100644
--- a/source/_static/scss/includes/_base.scss
+++ b/source/_static/scss/includes/_base.scss
@@ -11,7 +11,6 @@
 
 html {
     font-size: $root-font-size;
-    scroll-behavior: smooth;
     scroll-padding: 1rem;
 
     @include breakpoint-min(breakpoints(lg)) { 
diff --git a/source/_static/scss/includes/_layout.scss b/source/_static/scss/includes/_layout.scss
index d67d8657..5de093f0 100644
--- a/source/_static/scss/includes/_layout.scss
+++ b/source/_static/scss/includes/_layout.scss
@@ -48,7 +48,6 @@
         .content {
             @include breakpoint-min(breakpoints(lg)) { 
                 overflow: auto;
-                scroll-behavior: smooth;
                 scroll-padding: 2rem;
             }