43 lines
1.0 KiB
TypeScript
43 lines
1.0 KiB
TypeScript
export class Menu {
|
|
menuContainer: HTMLDivElement = document.querySelector('.ntsh_menubar');
|
|
tabContainer: HTMLDivElement = document.querySelector('.ntsh_tabs');
|
|
|
|
constructor() {
|
|
this.registerListeners();
|
|
|
|
if (window.location.search.includes('advanced'))
|
|
this.selectTab('advanced');
|
|
}
|
|
|
|
selectTab(tabId: string) {
|
|
this.menuContainer
|
|
.querySelectorAll('.ntsh_menubar-item')
|
|
.forEach((item) => {
|
|
if (item.getAttribute('tabid') === tabId) {
|
|
item.classList.add('selected');
|
|
} else {
|
|
item.classList.remove('selected');
|
|
}
|
|
});
|
|
|
|
this.tabContainer.querySelectorAll('.ntsh_tab').forEach((tab) => {
|
|
if (tab.getAttribute('tabid') === tabId) {
|
|
tab.classList.add('visible');
|
|
} else {
|
|
tab.classList.remove('visible');
|
|
}
|
|
});
|
|
}
|
|
|
|
private registerListeners() {
|
|
this.menuContainer
|
|
.querySelectorAll('.ntsh_menubar-item')
|
|
.forEach((item) => {
|
|
item.addEventListener('click', () => {
|
|
const itemId = item.getAttribute('tabid');
|
|
this.selectTab(itemId);
|
|
});
|
|
});
|
|
}
|
|
}
|