blob: 05102f73f926c981fa1a169a209a255e539378f7 (
plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
|
import createFlash from '~/flash';
import { sanitize } from '~/lib/dompurify';
import axios from '~/lib/utils/axios_utils';
import { historyPushState } from '~/lib/utils/common_utils';
import { __ } from '~/locale';
import { GlTabsBehavior, TAB_SHOWN_EVENT } from '~/tabs';
export default class Milestone {
constructor() {
this.tabsEl = document.querySelector('.js-milestone-tabs');
this.glTabs = new GlTabsBehavior(this.tabsEl);
this.loadedTabs = new WeakSet();
this.bindTabsSwitching();
this.loadInitialTab();
}
bindTabsSwitching() {
this.tabsEl.addEventListener(TAB_SHOWN_EVENT, (event) => {
const tab = event.target;
const { activeTabPanel } = event.detail;
historyPushState(tab.getAttribute('href'));
this.loadTab(tab, activeTabPanel);
});
}
loadInitialTab() {
const tab = this.tabsEl.querySelector(`a[href="${window.location.hash}"]`);
this.glTabs.activateTab(tab || this.glTabs.activeTab);
}
loadTab(tab, tabPanel) {
const { endpoint } = tab.dataset;
if (endpoint && !this.loadedTabs.has(tab)) {
axios
.get(endpoint)
.then(({ data }) => {
// eslint-disable-next-line no-param-reassign
tabPanel.innerHTML = sanitize(data.html);
this.loadedTabs.add(tab);
})
.catch(() =>
createFlash({
message: __('Error loading milestone tab'),
}),
);
}
}
}
|