mirror of
				https://github.com/minio/docs.git
				synced 2025-11-03 05:13:12 +03:00 
			
		
		
		
	Allow links into closed tabs (#1126)
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>
This commit is contained in:
		@@ -504,4 +504,54 @@ window.addEventListener("DOMContentLoaded", (event) => {
 | 
				
			|||||||
      });
 | 
					      });
 | 
				
			||||||
    }
 | 
					    }
 | 
				
			||||||
  })();
 | 
					  })();
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					  // ------------------------------------------------
 | 
				
			||||||
 | 
					  // 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()
 | 
				
			||||||
});
 | 
					});
 | 
				
			||||||
@@ -11,7 +11,6 @@
 | 
				
			|||||||
 | 
					
 | 
				
			||||||
html {
 | 
					html {
 | 
				
			||||||
    font-size: $root-font-size;
 | 
					    font-size: $root-font-size;
 | 
				
			||||||
    scroll-behavior: smooth;
 | 
					 | 
				
			||||||
    scroll-padding: 1rem;
 | 
					    scroll-padding: 1rem;
 | 
				
			||||||
 | 
					
 | 
				
			||||||
    @include breakpoint-min(breakpoints(lg)) { 
 | 
					    @include breakpoint-min(breakpoints(lg)) { 
 | 
				
			||||||
 
 | 
				
			|||||||
@@ -48,7 +48,6 @@
 | 
				
			|||||||
        .content {
 | 
					        .content {
 | 
				
			||||||
            @include breakpoint-min(breakpoints(lg)) { 
 | 
					            @include breakpoint-min(breakpoints(lg)) { 
 | 
				
			||||||
                overflow: auto;
 | 
					                overflow: auto;
 | 
				
			||||||
                scroll-behavior: smooth;
 | 
					 | 
				
			||||||
                scroll-padding: 2rem;
 | 
					                scroll-padding: 2rem;
 | 
				
			||||||
            }
 | 
					            }
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 
 | 
				
			|||||||
		Reference in New Issue
	
	Block a user