overleaf/services/web/frontend/js/directives/bookmarkableTabset.js
Mathias Jakobsen 1a92e1b664 Merge pull request #15248 from overleaf/mj-eslint-angular-components
[web] Add eslint rules for angularjs components

GitOrigin-RevId: 1343d584368faeb912f04c5879228bcbd07a042a
2023-10-18 08:03:57 +00:00

71 lines
2 KiB
JavaScript

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)
}
})
}
},
}
},
])