overleaf/services/web/frontend/js/directives/bookmarkableTabset.js

import _ from 'lodash'
import App from '../base'
App.directive('bookmarkableTabset', [
  '$location',
  function ($location) {
    return {
      restrict: 'A',
      require: 'tabset',
      link(scope, el, attrs, tabset) {
        const _makeActive = function (hash) {
          if (hash && hash !== '') {
            const matchingTab = _.find(
              tabset.tabs,
              tab => tab.bookmarkableTabId === hash
            )
            if (matchingTab) {
              matchingTab.select()
              return el.children()[0].scrollIntoView({ behavior: 'smooth' })
            }
          }
        }

        scope.$applyAsync(function () {
          // for page load
          const hash = $location.hash()
          _makeActive(hash)

          // for links within page to a tab
          // this needs to be within applyAsync because there could be a link
          // within a tab to another tab
          const linksToTabs = document.querySelectorAll('.link-to-tab')
          const _clickLinkToTab = event => {
            const hash = event.currentTarget
              .getAttribute('href')
              .split('#')
              .pop()
            _makeActive(hash)
          }

          if (linksToTabs) {
            Array.from(linksToTabs).map(link =>
              link.addEventListener('click', _clickLinkToTab)
            )
          }
        })
      },
    }
  },
])

App.directive('bookmarkableTab', [
  '$location',
  function ($location) {
    return {
      restrict: 'A',
      require: 'tab',
      link(scope, el, attrs, tab) {
        const tabScope = el.isolateScope()
        const tabId = attrs.bookmarkableTab
        if (tabScope && tabId && tabId !== '') {
          tabScope.bookmarkableTabId = tabId
          tabScope.$watch('active', function (isActive, wasActive) {
            if (isActive && !wasActive && $location.hash() !== tabId) {
              return $location.hash(tabId)
            }
          })
        }
      },
    }
  },
])