scrollDisable();
this.container.hidden = false;
+ this.provider.refresh();
+
this.getFocusTrap().activate();
}
}
}
+ getContent(): HTMLElement {
+ return this.content;
+ }
+
private buildElements(): void {
if (this.container.classList.contains("pageMenuContainer")) {
return;
});
this.content.classList.add("pageMenuContent");
+ this.content.addEventListener("click", (event) => {
+ event.stopPropagation();
+ });
this.container.append(this.content);
return this.mainMenu;
}
+ refresh(): void {
+ /* Does nothing */
+ }
+
private buildMainMenu(): HTMLElement[] {
const boxMenu = this.mainMenu.querySelector(".boxMenu") as HTMLElement;
getContent(): DocumentFragment;
getMenuButton(): HTMLElement;
+
+ refresh(): void;
}
export class PageMenuUser implements PageMenuProvider {
private readonly callbackOpen: CallbackOpen;
private readonly container: PageMenuContainer;
+ private readonly tabPanels = new Map<HTMLAnchorElement, HTMLDivElement>();
+ private readonly tabs: HTMLAnchorElement[] = [];
private readonly userMenu: HTMLElement;
constructor() {
return this.userMenu;
}
+ refresh(): void {
+ this.openNotifications();
+ }
+
+ private openNotifications(): void {
+ const notifications = this.tabs.find((element) => element.dataset.origin === "userNotifications");
+ if (!notifications) {
+ throw new Error("Unable to find the notifications tab.");
+ }
+
+ notifications.click();
+ }
+
+ private openTab(tab: HTMLAnchorElement): void {
+ if (tab.getAttribute("aria-selected") === "true") {
+ return;
+ }
+
+ const activeTab = this.tabs.find((element) => element.getAttribute("aria-selected") === "true");
+ if (activeTab) {
+ activeTab.setAttribute("aria-selected", "false");
+ activeTab.tabIndex = -1;
+
+ const activePanel = this.tabPanels.get(activeTab)!;
+ activePanel.hidden = true;
+ }
+
+ tab.setAttribute("aria-selected", "true");
+ tab.tabIndex = 0;
+
+ const tabPanel = this.tabPanels.get(tab)!;
+ tabPanel.hidden = false;
+
+ if (document.activeElement !== tab) {
+ tab.focus();
+ }
+ }
+
+ private keydown(event: KeyboardEvent): void {
+ const tab = event.currentTarget as HTMLAnchorElement;
+
+ if (event.key === "Enter" || event.key === " ") {
+ event.preventDefault();
+
+ this.openTab(tab);
+
+ return;
+ }
+
+ const navigationKeyEvents = ["ArrowLeft", "ArrowRight", "End", "Home"];
+ if (!navigationKeyEvents.includes(event.key)) {
+ return;
+ }
+
+ event.preventDefault();
+
+ const currentIndex = this.tabs.indexOf(tab);
+ const lastIndex = this.tabs.length - 1;
+
+ let index: number;
+ if (event.key === "ArrowLeft") {
+ if (currentIndex === 0) {
+ index = lastIndex;
+ } else {
+ index = currentIndex - 1;
+ }
+ } else if (event.key === "ArrowRight") {
+ if (currentIndex === lastIndex) {
+ index = 0;
+ } else {
+ index = currentIndex + 1;
+ }
+ } else if (event.key === "End") {
+ index = lastIndex;
+ } else {
+ index = 0;
+ }
+
+ this.tabs[index].focus();
+ }
+
private buildTabMenu(): TabMenu {
const tabList = document.createElement("div");
tabList.classList.add("pageMenuUserTabList");
tabList.append(tab);
tabPanelContainer.append(tabPanel);
+
+ this.tabs.push(tab);
+ this.tabPanels.set(tab, tabPanel);
});
// TODO: Inject legacy user panel items.
const tab = document.createElement("a");
tab.classList.add("pageMenuUserTab");
+ tab.dataset.origin = provider.getPanelButton().id;
tab.id = tabId;
tab.setAttribute("aria-controls", panelId);
tab.setAttribute("aria-selected", "false");
tab.setAttribute("aria-label", button.dataset.title || button.title);
tab.innerHTML = button.querySelector(".icon")!.outerHTML;
+ tab.addEventListener("click", (event) => {
+ event.preventDefault();
+
+ this.openTab(tab);
+ });
+ tab.addEventListener("keydown", (event) => this.keydown(event));
+
const panel = document.createElement("div");
panel.classList.add("pageMenuUserTabPanel");
panel.id = panelId;
panel.setAttribute("aria-labelledby", tabId);
panel.setAttribute("role", "tabpanel");
panel.tabIndex = 0;
+ panel.textContent = "panel for #" + provider.getPanelButton().id;
return [tab, panel];
}
(0, Screen_1.pageOverlayOpen)();
(0, Screen_1.scrollDisable)();
this.container.hidden = false;
+ this.provider.refresh();
this.getFocusTrap().activate();
}
close() {
this.close();
}
}
+ getContent() {
+ return this.content;
+ }
buildElements() {
if (this.container.classList.contains("pageMenuContainer")) {
return;
}
});
this.content.classList.add("pageMenuContent");
+ this.content.addEventListener("click", (event) => {
+ event.stopPropagation();
+ });
this.container.append(this.content);
document.body.append(this.container);
}
getMenuButton() {
return this.mainMenu;
}
+ refresh() {
+ /* Does nothing */
+ }
buildMainMenu() {
const boxMenu = this.mainMenu.querySelector(".boxMenu");
const nav = this.buildMenu(boxMenu);
Util_1 = (0, tslib_1.__importDefault)(Util_1);
class PageMenuUser {
constructor() {
+ this.tabPanels = new Map();
+ this.tabs = [];
this.userMenu = document.querySelector(".userPanel");
this.container = new Container_1.default(this);
this.callbackOpen = (event) => {
getMenuButton() {
return this.userMenu;
}
+ refresh() {
+ this.openNotifications();
+ }
+ openNotifications() {
+ const notifications = this.tabs.find((element) => element.dataset.origin === "userNotifications");
+ if (!notifications) {
+ throw new Error("Unable to find the notifications tab.");
+ }
+ notifications.click();
+ }
+ openTab(tab) {
+ if (tab.getAttribute("aria-selected") === "true") {
+ return;
+ }
+ const activeTab = this.tabs.find((element) => element.getAttribute("aria-selected") === "true");
+ if (activeTab) {
+ activeTab.setAttribute("aria-selected", "false");
+ activeTab.tabIndex = -1;
+ const activePanel = this.tabPanels.get(activeTab);
+ activePanel.hidden = true;
+ }
+ tab.setAttribute("aria-selected", "true");
+ tab.tabIndex = 0;
+ const tabPanel = this.tabPanels.get(tab);
+ tabPanel.hidden = false;
+ if (document.activeElement !== tab) {
+ tab.focus();
+ }
+ }
+ keydown(event) {
+ const tab = event.currentTarget;
+ if (event.key === "Enter" || event.key === " ") {
+ event.preventDefault();
+ this.openTab(tab);
+ return;
+ }
+ const navigationKeyEvents = ["ArrowLeft", "ArrowRight", "End", "Home"];
+ if (!navigationKeyEvents.includes(event.key)) {
+ return;
+ }
+ event.preventDefault();
+ const currentIndex = this.tabs.indexOf(tab);
+ const lastIndex = this.tabs.length - 1;
+ let index;
+ if (event.key === "ArrowLeft") {
+ if (currentIndex === 0) {
+ index = lastIndex;
+ }
+ else {
+ index = currentIndex - 1;
+ }
+ }
+ else if (event.key === "ArrowRight") {
+ if (currentIndex === lastIndex) {
+ index = 0;
+ }
+ else {
+ index = currentIndex + 1;
+ }
+ }
+ else if (event.key === "End") {
+ index = lastIndex;
+ }
+ else {
+ index = 0;
+ }
+ this.tabs[index].focus();
+ }
buildTabMenu() {
const tabList = document.createElement("div");
tabList.classList.add("pageMenuUserTabList");
const [tab, tabPanel] = this.buildTab(provider);
tabList.append(tab);
tabPanelContainer.append(tabPanel);
+ this.tabs.push(tab);
+ this.tabPanels.set(tab, tabPanel);
});
// TODO: Inject legacy user panel items.
return [tabList, tabPanelContainer];
const panelId = Util_1.default.getUniqueId();
const tab = document.createElement("a");
tab.classList.add("pageMenuUserTab");
+ tab.dataset.origin = provider.getPanelButton().id;
tab.id = tabId;
tab.setAttribute("aria-controls", panelId);
tab.setAttribute("aria-selected", "false");
const button = provider.getPanelButton().querySelector("a");
tab.setAttribute("aria-label", button.dataset.title || button.title);
tab.innerHTML = button.querySelector(".icon").outerHTML;
+ tab.addEventListener("click", (event) => {
+ event.preventDefault();
+ this.openTab(tab);
+ });
+ tab.addEventListener("keydown", (event) => this.keydown(event));
const panel = document.createElement("div");
panel.classList.add("pageMenuUserTabPanel");
panel.id = panelId;
panel.setAttribute("aria-labelledby", tabId);
panel.setAttribute("role", "tabpanel");
panel.tabIndex = 0;
+ panel.textContent = "panel for #" + provider.getPanelButton().id;
return [tab, panel];
}
}
projects / GitHub / WoltLab / WCF.git / commitdiff