overleaf/services/web/frontend/js/directives/bookmarkableTabset.js
Alf Eaton 1be43911b4 Merge pull request #3942 from overleaf/prettier-trailing-comma
Set Prettier's "trailingComma" setting to "es5"

GitOrigin-RevId: 9f14150511929a855b27467ad17be6ab262fe5d5
2021-04-28 02:10:01 +00:00

58 lines
1.6 KiB
JavaScript

import _ from 'lodash'
import App from '../base'
App.directive('bookmarkableTabset', $location => ({
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 => ({
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)
}
})
}
},
}))