47 lines
1.5 KiB
JavaScript
47 lines
1.5 KiB
JavaScript
import { BaseElement } from "../base-element/base-element";
|
|
import { collectionLog } from "../data/collection-log";
|
|
|
|
export class CollectionLogTab extends BaseElement {
|
|
constructor() {
|
|
super();
|
|
}
|
|
|
|
html() {
|
|
return `{{collection-log-tab.html}}`;
|
|
}
|
|
|
|
connectedCallback() {
|
|
super.connectedCallback();
|
|
this.playerName = this.getAttribute("player-name");
|
|
this.tabId = parseInt(this.getAttribute("tab-id"));
|
|
this.pages = collectionLog.info[this.tabId].pages;
|
|
this.render();
|
|
|
|
this.pageContainer = this.querySelector(".collection-log__page-container");
|
|
this.tabList = this.querySelector(".collection-log__tab-list");
|
|
this.showPage(this.pages[0].name);
|
|
this.eventListener(this.tabList, "click", this.handlePageClick.bind(this));
|
|
}
|
|
|
|
disconnectedCallback() {
|
|
super.disconnectedCallback();
|
|
}
|
|
|
|
handlePageClick(event) {
|
|
const pageName = event.target.getAttribute("page-name");
|
|
if (pageName) {
|
|
this.showPage(pageName);
|
|
}
|
|
}
|
|
|
|
showPage(pageName) {
|
|
this.tabList.querySelectorAll("button[page-name]").forEach((button) => {
|
|
if (button.getAttribute("page-name") === `${pageName}`) button.classList.add("collection-log__page-active");
|
|
else button.classList.remove("collection-log__page-active");
|
|
});
|
|
this.pageContainer.innerHTML = `<collection-log-page player-name="${this.playerName}" page-name="${pageName}" tab-id="${this.tabId}"></collection-log-page>`;
|
|
}
|
|
}
|
|
|
|
customElements.define("collection-log-tab", CollectionLogTab);
|