first commit

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

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

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()