trustchain-oc1-orchestral/authentik
Archived
10
0
Fork 0
Code Issues Pull requests Packages Projects Releases Wiki Activity

web/elements: allow multiple tabs with different state

Browse source 
Signed-off-by: Jens Langhammer <jens.langhammer@beryju.org>
This commit is contained in:
Jens Langhammer 2021-11-26 13:30:02 +01:00
parent bc6afdf94f
commit 0e6a799e6d
1 changed files with 9 additions and 6 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

15
web/src/elements/Tabs.ts
View file

@ -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];
}
}
}