habsi/authentik
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

web: allow for non-path elements in hash, store current tab page in hash

Browse Source 
Signed-off-by: Jens Langhammer <jens.langhammer@beryju.org>
This commit is contained in:
Jens Langhammer
2021-04-04 23:19:08 +02:00
parent 1a0a62975c
commit 2c4239d79a
5 changed files with 46 additions and 11 deletions
Download Patch File Download Diff File Expand all files Collapse all files

21
web/src/elements/Tabs.ts
View File

@ -3,7 +3,7 @@ import { ifDefined } from "lit-html/directives/if-defined";
import PFTabs from "@patternfly/patternfly/components/Tabs/tabs.css";
import PFGlobal from "@patternfly/patternfly/patternfly-base.css";
import AKGlobal from "../authentik.css";
import { CURRENT_CLASS } from "../constants";
import { CURRENT_CLASS, ROUTE_SEPARATOR } from "../constants";
import { t } from "@lingui/macro";
@customElement("ak-tabs")
@ -50,10 +50,17 @@ export class Tabs extends LitElement {
super.disconnectedCallback();
}
onClick(slot?: string): void {
this.currentPage = slot;
const currentUrl = window.location.hash.slice(1, Infinity).split(ROUTE_SEPARATOR)[0];
const newUrl = `#${currentUrl};${slot}`;
window.location.hash = newUrl;
}
renderTab(page: Element): TemplateResult {
const slot = page.attributes.getNamedItem("slot")?.value;
return html` <li class="pf-c-tabs__item ${slot === this.currentPage ? CURRENT_CLASS : ""}">
<button class="pf-c-tabs__link" @click=${() => { this.currentPage = slot; }}>
<button class="pf-c-tabs__link" @click=${() => this.onClick(slot)}>
<span class="pf-c-tabs__item-text">
${page.getAttribute("data-tab-title")}
</span>
@ -67,7 +74,15 @@ export class Tabs extends LitElement {
if (pages.length < 1) {
return html`<h1>${t`no tabs defined`}</h1>`;
}
this.currentPage = pages[0].attributes.getNamedItem("slot")?.value;
let wantedPage = pages[0].attributes.getNamedItem("slot")?.value;
if (window.location.hash.includes(ROUTE_SEPARATOR)) {
const urlParts = window.location.hash.slice(1, Infinity).split(ROUTE_SEPARATOR);
if (this.querySelector(`[slot='${urlParts[1]}']`) !== null) {
// To update the URL to match with the current slot
wantedPage = urlParts[1];
}
}
this.onClick(wantedPage);
}
return html`<div class="pf-c-tabs ${this.vertical ? "pf-m-vertical pf-m-box" : ""}">
<ul class="pf-c-tabs__list">