From 0e6a799e6d13843ce3fe1ae1ea810b5a4258f6e2 Mon Sep 17 00:00:00 2001 From: Jens Langhammer Date: Fri, 26 Nov 2021 13:30:02 +0100 Subject: [PATCH] web/elements: allow multiple tabs with different state Signed-off-by: Jens Langhammer --- web/src/elements/Tabs.ts | 15 +++++++++------ 1 file changed, 9 insertions(+), 6 deletions(-) diff --git a/web/src/elements/Tabs.ts b/web/src/elements/Tabs.ts index 10075ea67..44abcd6d7 100644 --- a/web/src/elements/Tabs.ts +++ b/web/src/elements/Tabs.ts @@ -13,6 +13,9 @@ import { getURLParams, updateURLParams } from "./router/RouteMatch"; @customElement("ak-tabs") export class Tabs extends LitElement { + @property() + pageIdentifier: string = "page"; + @property() currentPage?: string; @@ -66,9 +69,9 @@ export class Tabs extends LitElement { onClick(slot?: string): void { this.currentPage = slot; - updateURLParams({ - page: slot, - }); + const params: { [key: string]: string | undefined } = {}; + params[this.pageIdentifier] = slot; + updateURLParams(params); } renderTab(page: Element): TemplateResult { @@ -84,10 +87,10 @@ export class Tabs extends LitElement { const pages = Array.from(this.querySelectorAll("[slot^='page-']")); if (window.location.hash.includes(ROUTE_SEPARATOR)) { const params = getURLParams(); - if ("page" in params) { - if (this.querySelector(`[slot='${params.page}']`) !== null) { + if (this.pageIdentifier in params) { + if (this.querySelector(`[slot='${params[this.pageIdentifier]}']`) !== null) { // To update the URL to match with the current slot - this.currentPage = params.page; + this.currentPage = params[this.pageIdentifier]; } } }