From 9e19dcd1d96e5fa3e025bc6d2d4924d59acf92e8 Mon Sep 17 00:00:00 2001
From: Jakob Ackermann <jakob.ackermann@overleaf.com>
Date: Tue, 21 Sep 2021 15:46:44 +0200
Subject: [PATCH] Merge pull request #5133 from overleaf/as-bookmarkable-tab

De-Angularise bookmarkable-tabset

GitOrigin-RevId: fc80f0c42fded9b0856dc7c62de2c87e66b5d85c
---
 .../js/features/bookmarkable-tab/index.js     | 21 +++++++++++++++++++
 .../frontend/stylesheets/app/cms-page.less    |  3 ++-
 .../web/frontend/stylesheets/app/portals.less |  4 ----
 .../frontend/stylesheets/components/tabs.less | 11 ++++++++++
 4 files changed, 34 insertions(+), 5 deletions(-)
 create mode 100644 services/web/frontend/js/features/bookmarkable-tab/index.js

diff --git a/services/web/frontend/js/features/bookmarkable-tab/index.js b/services/web/frontend/js/features/bookmarkable-tab/index.js
new file mode 100644
index 0000000000..76855e970e
--- /dev/null
+++ b/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()
diff --git a/services/web/frontend/stylesheets/app/cms-page.less b/services/web/frontend/stylesheets/app/cms-page.less
index 1f844da04c..98d055234b 100644
--- a/services/web/frontend/stylesheets/app/cms-page.less
+++ b/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%;
   }
 
diff --git a/services/web/frontend/stylesheets/app/portals.less b/services/web/frontend/stylesheets/app/portals.less
index a89c81e92b..28e472b010 100644
--- a/services/web/frontend/stylesheets/app/portals.less
+++ b/services/web/frontend/stylesheets/app/portals.less
@@ -92,10 +92,6 @@
   }
   // End Actions
 
-  .nav-tabs {
-    margin-bottom: @margin-md;
-  }
-
   /*
     Begin Print
   */
diff --git a/services/web/frontend/stylesheets/components/tabs.less b/services/web/frontend/stylesheets/components/tabs.less
index b9858416b9..5aa21722f0 100644
--- a/services/web/frontend/stylesheets/components/tabs.less
+++ b/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
+  );
+}