'wcf.global.rss.copy.success': '{jslang}wcf.global.rss.copy.success{/jslang}',
'wcf.global.rss.accessToken.info': '{jslang}wcf.global.rss.accessToken.info{/jslang}',
'wcf.global.rss.withoutAccessToken': '{jslang}wcf.global.rss.withoutAccessToken{/jslang}',
- 'wcf.global.rss.withAccessToken': '{jslang}wcf.global.rss.withAccessToken{/jslang}'
+ 'wcf.global.rss.withAccessToken': '{jslang}wcf.global.rss.withAccessToken{/jslang}',
+ 'wcf.user.language': '{jslang}wcf.user.language{/jslang}'
{if MODULE_LIKE}
,'wcf.like.button.like': '{jslang}wcf.like.button.like{/jslang}',
'wcf.like.button.dislike': '{jslang}wcf.like.button.dislike{/jslang}',
import * as Language from "../../../Language";
import DomUtil from "../../../Dom/Util";
import { MenuItem, PageMenuMainProvider } from "./Main/Provider";
+import * as DropDownSimple from "../../Dropdown/Simple";
type CallbackOpen = (event: MouseEvent) => void;
container.append(this.buildMainMenu());
+ const languageMenu = this.buildLanguageMenu();
+ if (languageMenu) {
+ container.append(languageMenu);
+ }
+
const footerMenu = this.buildFooterMenu();
if (footerMenu) {
container.append(footerMenu);
}
}
+ private buildLanguageMenu(): HTMLElement | null {
+ const dropDownMenu = DropDownSimple.getDropdownMenu("pageLanguageContainer");
+ if (dropDownMenu === undefined) {
+ return null;
+ }
+
+ const children: MenuItem[] = [];
+ const languageMapping = new Map<string, HTMLAnchorElement>();
+ Array.from(dropDownMenu.children).forEach((listItem: HTMLElement) => {
+ const identifier = listItem.dataset.languageCode!;
+ const title = listItem.querySelector("span")!.textContent!.trim();
+
+ languageMapping.set(identifier, listItem.querySelector("a")!);
+
+ children.push({
+ active: false,
+ children: [],
+ counter: 0,
+ depth: 1,
+ identifier,
+ title,
+ });
+ });
+
+ const menuItems: MenuItem[] = [
+ {
+ active: false,
+ children,
+ counter: 0,
+ depth: 0,
+ identifier: null,
+ title: Language.get("wcf.user.language"),
+ },
+ ];
+
+ const nav = document.createElement("nav");
+ nav.classList.add("pageMenuMainNavigation", "pageMenuMainNavigationLanguage");
+ nav.append(this.buildMenuItemList(menuItems, true));
+
+ // Forward clicks on the language to the actual language picker element.
+ nav
+ .querySelectorAll(".pageMenuMainItemList .pageMenuMainItemLabel[data-identifier]")
+ .forEach((element: HTMLAnchorElement) => {
+ element.addEventListener("click", (event) => {
+ event.preventDefault();
+
+ const identifier = element.dataset.identifier!;
+ languageMapping.get(identifier)!.click();
+ });
+ });
+
+ return nav;
+ }
+
private buildFooterMenu(): HTMLElement | null {
const box = document.querySelector('.box[data-box-identifier="com.woltlab.wcf.FooterMenu"]');
if (box === null) {
const nav = document.createElement("nav");
nav.classList.add("pageMenuMainNavigation");
- nav.append(this.buildMenuItemList(menuItems));
+ nav.append(this.buildMenuItemList(menuItems, false));
return nav;
}
- private buildMenuItemList(menuItems: MenuItem[]): HTMLUListElement {
+ private buildMenuItemList(menuItems: MenuItem[], isLanguageSelection: boolean): HTMLUListElement {
const list = document.createElement("ul");
list.classList.add("pageMenuMainItemList");
menuItems
.filter((menuItem) => {
// Remove links that have no target (`#`) and do not contain any children.
- if (!menuItem.link && menuItem.children.length === 0) {
+ if (!isLanguageSelection && !menuItem.link && menuItem.children.length === 0) {
return false;
}
return true;
})
.forEach((menuItem) => {
- list.append(this.buildMenuItem(menuItem));
+ list.append(this.buildMenuItem(menuItem, isLanguageSelection));
});
return list;
}
- private buildMenuItem(menuItem: MenuItem): HTMLLIElement {
+ private buildMenuItem(menuItem: MenuItem, isLanguageSelection: boolean): HTMLLIElement {
const listItem = document.createElement("li");
listItem.dataset.depth = menuItem.depth.toString();
listItem.classList.add("pageMenuMainItem");
label.classList.add("pageMenuMainItemLabel");
label.href = "#";
label.textContent = menuItem.title;
- label.addEventListener("click", (event) => {
- event.preventDefault();
- const button = label.nextElementSibling as HTMLAnchorElement;
- button.click();
- });
+ if (!isLanguageSelection || !menuItem.identifier) {
+ label.addEventListener("click", (event) => {
+ event.preventDefault();
+
+ const button = label.nextElementSibling as HTMLAnchorElement;
+ button.click();
+ });
- // The button to expand the link group is used instead.
- label.setAttribute("aria-hidden", "true");
+ // The button to expand the link group is used instead.
+ label.setAttribute("aria-hidden", "true");
+ }
+
+ if (isLanguageSelection && menuItem.identifier) {
+ label.dataset.identifier = menuItem.identifier;
+ }
listItem.append(label);
}
}
button.setAttribute("aria-label", ariaLabel);
- const list = this.buildMenuItemList(menuItem.children);
+ const list = this.buildMenuItemList(menuItem.children, isLanguageSelection);
list.id = menuId;
list.hidden = true;
'wcf.date.datePicker.hour': '{jslang}wcf.date.datePicker.hour{/jslang}',
'wcf.date.datePicker.minute': '{jslang}wcf.date.datePicker.minute{/jslang}',
'wcf.global.form.password.button.hide': '{jslang}wcf.global.form.password.button.hide{/jslang}',
- 'wcf.global.form.password.button.show': '{jslang}wcf.global.form.password.button.show{/jslang}'
+ 'wcf.global.form.password.button.show': '{jslang}wcf.global.form.password.button.show{/jslang}',
+ 'wcf.user.language': '{jslang}wcf.user.language{/jslang}'
{event name='javascriptLanguageImport'}
});
* @license GNU Lesser General Public License <http://opensource.org/licenses/lgpl-license.php>
* @module WoltLabSuite/Core/Ui/Page/Menu/Main
*/
-define(["require", "exports", "tslib", "./Container", "../../../Language", "../../../Dom/Util"], function (require, exports, tslib_1, Container_1, Language, Util_1) {
+define(["require", "exports", "tslib", "./Container", "../../../Language", "../../../Dom/Util", "../../Dropdown/Simple"], function (require, exports, tslib_1, Container_1, Language, Util_1, DropDownSimple) {
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.PageMenuMain = void 0;
Container_1 = tslib_1.__importDefault(Container_1);
Language = tslib_1.__importStar(Language);
Util_1 = tslib_1.__importDefault(Util_1);
+ DropDownSimple = tslib_1.__importStar(DropDownSimple);
class PageMenuMain {
constructor(menuItemProvider) {
this.menuItemBadges = new Map();
container.classList.add("pageMenuMainContainer");
container.addEventListener("scroll", () => this.updateOverflowIndicator(container), { passive: true });
container.append(this.buildMainMenu());
+ const languageMenu = this.buildLanguageMenu();
+ if (languageMenu) {
+ container.append(languageMenu);
+ }
const footerMenu = this.buildFooterMenu();
if (footerMenu) {
container.append(footerMenu);
}
}
}
+ buildLanguageMenu() {
+ const dropDownMenu = DropDownSimple.getDropdownMenu("pageLanguageContainer");
+ if (dropDownMenu === undefined) {
+ return null;
+ }
+ const children = [];
+ const languageMapping = new Map();
+ Array.from(dropDownMenu.children).forEach((listItem) => {
+ const identifier = listItem.dataset.languageCode;
+ const title = listItem.querySelector("span").textContent.trim();
+ languageMapping.set(identifier, listItem.querySelector("a"));
+ children.push({
+ active: false,
+ children: [],
+ counter: 0,
+ depth: 1,
+ identifier,
+ title,
+ });
+ });
+ const menuItems = [
+ {
+ active: false,
+ children,
+ counter: 0,
+ depth: 0,
+ identifier: null,
+ title: Language.get("wcf.user.language"),
+ },
+ ];
+ const nav = document.createElement("nav");
+ nav.classList.add("pageMenuMainNavigation", "pageMenuMainNavigationLanguage");
+ nav.append(this.buildMenuItemList(menuItems, true));
+ // Forward clicks on the language to the actual language picker element.
+ nav
+ .querySelectorAll(".pageMenuMainItemList .pageMenuMainItemLabel[data-identifier]")
+ .forEach((element) => {
+ element.addEventListener("click", (event) => {
+ event.preventDefault();
+ const identifier = element.dataset.identifier;
+ languageMapping.get(identifier).click();
+ });
+ });
+ return nav;
+ }
buildFooterMenu() {
const box = document.querySelector('.box[data-box-identifier="com.woltlab.wcf.FooterMenu"]');
if (box === null) {
const menuItems = this.menuItemProvider.getMenuItems(boxMenu);
const nav = document.createElement("nav");
nav.classList.add("pageMenuMainNavigation");
- nav.append(this.buildMenuItemList(menuItems));
+ nav.append(this.buildMenuItemList(menuItems, false));
return nav;
}
- buildMenuItemList(menuItems) {
+ buildMenuItemList(menuItems, isLanguageSelection) {
const list = document.createElement("ul");
list.classList.add("pageMenuMainItemList");
menuItems
.filter((menuItem) => {
// Remove links that have no target (`#`) and do not contain any children.
- if (!menuItem.link && menuItem.children.length === 0) {
+ if (!isLanguageSelection && !menuItem.link && menuItem.children.length === 0) {
return false;
}
return true;
})
.forEach((menuItem) => {
- list.append(this.buildMenuItem(menuItem));
+ list.append(this.buildMenuItem(menuItem, isLanguageSelection));
});
return list;
}
- buildMenuItem(menuItem) {
+ buildMenuItem(menuItem, isLanguageSelection) {
const listItem = document.createElement("li");
listItem.dataset.depth = menuItem.depth.toString();
listItem.classList.add("pageMenuMainItem");
label.classList.add("pageMenuMainItemLabel");
label.href = "#";
label.textContent = menuItem.title;
- label.addEventListener("click", (event) => {
- event.preventDefault();
- const button = label.nextElementSibling;
- button.click();
- });
- // The button to expand the link group is used instead.
- label.setAttribute("aria-hidden", "true");
+ if (!isLanguageSelection || !menuItem.identifier) {
+ label.addEventListener("click", (event) => {
+ event.preventDefault();
+ const button = label.nextElementSibling;
+ button.click();
+ });
+ // The button to expand the link group is used instead.
+ label.setAttribute("aria-hidden", "true");
+ }
+ if (isLanguageSelection && menuItem.identifier) {
+ label.dataset.identifier = menuItem.identifier;
+ }
listItem.append(label);
}
if (menuItem.children.length) {
ariaLabel = Language.get("wcf.menu.page.button.toggle", { title: menuItem.title });
}
button.setAttribute("aria-label", ariaLabel);
- const list = this.buildMenuItemList(menuItem.children);
+ const list = this.buildMenuItemList(menuItem.children, isLanguageSelection);
list.id = menuId;
list.hidden = true;
button.addEventListener("click", (event) => {
}
}
+.pageMenuMainNavigationLanguage,
.pageMenuMainNavigationFooter {
/* The footer is placed at the very bottom of the main menu which
is accomplished by setting `margin-top: auto`. However, this
margin-top: auto;
}
+.pageMenuMainNavigationLanguage + .pageMenuMainNavigationFooter {
+ padding-top: 0;
+ margin-top: 0;
+}
+
.pageMenuMainItem {
border-bottom: 1px solid var(--border-color);
column-gap: 10px;
projects / GitHub / WoltLab / WCF.git / commitdiff