Merge pull request #5133 from overleaf/as-bookmarkable-tab

De-Angularise bookmarkable-tabset

GitOrigin-RevId: fc80f0c42fded9b0856dc7c62de2c87e66b5d85c

services/web/frontend/js/features/bookmarkable-tab/index.js

@@ -0,0 +1,21 @@
+function bookmarkableTab(tabEl) {
+  tabEl.addEventListener('click', () => {
+    window.location.hash = tabEl.getAttribute('href')
+  })
+}
+
+function handleHashChange() {
+  const hash = window.location.hash
+  if (!hash) return
+
+  // Find the bookmarkable tab that links to the hash
+  const $tabEl = $(`[data-ol-bookmarkable-tab][href="${hash}"]`)
+  if (!$tabEl) return
+
+  // Select the tab via Bootstrap
+  $tabEl.tab('show')
+}
+
+document.querySelectorAll('[data-ol-bookmarkable-tab]').forEach(bookmarkableTab)
+window.addEventListener('hashchange', handleHashChange)
+handleHashChange()

services/web/frontend/stylesheets/app/cms-page.less

@@ -17,7 +17,8 @@
     Tabs
   */
   .tab-content {
-    padding: 0;
+    padding-left: 0;
+    padding-right: 0;
     width: 100%;
   }
 

services/web/frontend/stylesheets/app/portals.less

@@ -92,10 +92,6 @@
   }
   // End Actions
 
-  .nav-tabs {
-    margin-bottom: @margin-md;
-  }
-
   /*
     Begin Print
   */

services/web/frontend/stylesheets/components/tabs.less

@@ -38,3 +38,14 @@
     border: none !important;
   }
 }
+
+// Scroll the page up a bit to allow tab links to be shown when navigating to
+// a bookmarked tab hash
+[data-ol-bookmarkable-tabset] .tab-pane {
+  scroll-margin-top: calc(
+    @line-height-computed + // Computed text height
+    20px + // nav-link-padding top & bottom
+    @padding-md + // ol-tabs bottom padding
+    (@line-height-computed / 2) // tab-content top padding
+  );
+}