|
// retoor <retoor@molodetz.nl>
|
|
|
|
export class ProfileTabs {
|
|
constructor(root) {
|
|
this.root = root;
|
|
this.more = root.querySelector(".profile-tabs-more");
|
|
this.tabs = Array.from(root.querySelectorAll(".profile-tab")).filter(
|
|
(tab) => tab !== this.more
|
|
);
|
|
if (!this.more || !this.tabs.length) {
|
|
return;
|
|
}
|
|
this.overflow = [];
|
|
this.root.classList.add("tabs-managed");
|
|
this.more.addEventListener("click", (event) => this.open(event));
|
|
this._onResize = () => this.layout();
|
|
window.addEventListener("resize", this._onResize);
|
|
this.layout();
|
|
}
|
|
|
|
layout() {
|
|
this.tabs.forEach((tab) => {
|
|
tab.hidden = false;
|
|
});
|
|
this.more.hidden = false;
|
|
|
|
if (this._fits()) {
|
|
this.more.hidden = true;
|
|
this.overflow = [];
|
|
return;
|
|
}
|
|
|
|
while (!this._fits()) {
|
|
const victim = this.tabs
|
|
.filter((tab) => !tab.hidden && !tab.classList.contains("active"))
|
|
.pop();
|
|
if (!victim) {
|
|
break;
|
|
}
|
|
victim.hidden = true;
|
|
}
|
|
|
|
this.overflow = this.tabs.filter((tab) => tab.hidden);
|
|
}
|
|
|
|
_fits() {
|
|
return this.root.scrollWidth <= this.root.clientWidth;
|
|
}
|
|
|
|
open(event) {
|
|
event.preventDefault();
|
|
event.stopPropagation();
|
|
const items = this.overflow.map((tab) => ({
|
|
icon: tab.dataset.menuIcon || "",
|
|
label: tab.dataset.menuLabel || tab.textContent.trim(),
|
|
onSelect: () => tab.click(),
|
|
}));
|
|
if (!items.length) {
|
|
return;
|
|
}
|
|
const rect = this.more.getBoundingClientRect();
|
|
window.app.contextMenu.open(rect.left, rect.bottom + 4, items);
|
|
}
|
|
}
|