Revert to a prior version; fix bottom border so tier-2 elements with children don't have a separator, as before.

This commit is contained in:
Ken Sternberg 2023-11-17 11:34:51 -08:00
parent 83e934f80c
commit c471428c6b
1 changed files with 22 additions and 35 deletions

View File

@ -24,9 +24,6 @@ export type SidebarAttributes = {
}; };
export type SidebarEntry = { export type SidebarEntry = {
// - nullish: This entry is not a link.
// - string: the url for the entry
// - SidebarEventHandler: a function to run if the entry is clicked.
path: string | SidebarEventHandler | null; path: string | SidebarEventHandler | null;
label: string; label: string;
attributes?: SidebarAttributes | null; // eslint-disable-line attributes?: SidebarAttributes | null; // eslint-disable-line
@ -36,8 +33,6 @@ export type SidebarEntry = {
// Typescript requires the type here to correctly type the recursive path // Typescript requires the type here to correctly type the recursive path
export type SidebarRenderer = (_: SidebarEntry) => TemplateResult; export type SidebarRenderer = (_: SidebarEntry) => TemplateResult;
const entryKey = (entry: SidebarEntry) => `${entry.path || "no-path"}:${entry.label}`;
@customElement("ak-sidebar-items") @customElement("ak-sidebar-items")
export class SidebarItems extends AKElement { export class SidebarItems extends AKElement {
static get styles(): CSSResult[] { static get styles(): CSSResult[] {
@ -66,6 +61,10 @@ export class SidebarItems extends AKElement {
--pf-c-nav__link--m-current--after--BorderColor: #fd4b2d; --pf-c-nav__link--m-current--after--BorderColor: #fd4b2d;
} }
.pf-c-nav__item .pf-c-nav__item::before {
border-bottom-width: 0;
}
.pf-c-nav__section + .pf-c-nav__section { .pf-c-nav__section + .pf-c-nav__section {
--pf-c-nav__section--section--MarginTop: var(--pf-global--spacer--sm); --pf-c-nav__section--section--MarginTop: var(--pf-global--spacer--sm);
} }
@ -127,14 +126,12 @@ export class SidebarItems extends AKElement {
@state() @state()
expanded: WeakSet<SidebarEntry> = new WeakSet(); expanded: WeakSet<SidebarEntry> = new WeakSet();
current?: SidebarEntry;
constructor() { constructor() {
super(); super();
// this.onToggle = this.onToggle.bind(this); // this.onToggle = this.onToggle.bind(this);
this.onHashChange = this.onHashChange.bind(this); this.onHashChange = this.onHashChange.bind(this);
this.recordActive = this.recordActive.bind(this); this.isActive = this.isActive.bind(this);
this.renderItem = this.renderItem.bind(this); this.renderItem = this.renderItem.bind(this);
this.toggleExpand = this.toggleExpand.bind(this); this.toggleExpand = this.toggleExpand.bind(this);
} }
@ -157,8 +154,8 @@ export class SidebarItems extends AKElement {
/* no op */ /* no op */
} }
recordActive(entry: SidebarEntry) { isActive(path: string) {
this.current = entry; return true;
} }
render(): TemplateResult { render(): TemplateResult {
@ -186,6 +183,7 @@ export class SidebarItems extends AKElement {
// not when being forwarded to the correct renderer. // not when being forwarded to the correct renderer.
const attr = attributes ?? undefined; const attr = attributes ?? undefined;
const hasChildren = !!(children && children.length > 0); const hasChildren = !!(children && children.length > 0);
console.log(entry.label, hasChildren);
// This is grossly imperative, in that it HAS to come before the content is rendered // This is grossly imperative, in that it HAS to come before the content is rendered
// to make sure the content gets the right settings with respect to expansion. // to make sure the content gets the right settings with respect to expansion.
@ -200,8 +198,8 @@ export class SidebarItems extends AKElement {
: hasChildren : hasChildren
? this.renderLabelAndChildren(entry) ? this.renderLabelAndChildren(entry)
: path : path
? this.renderLink(entry) ? this.renderLink(label, path, attr)
: this.renderLabel(entry); : this.renderLabel(label, attr);
const expanded = { const expanded = {
"highlighted": !!attr?.highlight, "highlighted": !!attr?.highlight,
@ -212,10 +210,9 @@ export class SidebarItems extends AKElement {
return html`<li class="pf-c-nav__item ${classMap(expanded)}">${content}</li>`; return html`<li class="pf-c-nav__item ${classMap(expanded)}">${content}</li>`;
} }
toLinkClasses(entry: SidebarEntry) { toLinkClasses(attr: SidebarAttributes) {
const attr = entry.attributes || {};
return { return {
"pf-m-current": this.current === entry, "pf-m-current": !!attr.isActive,
"pf-c-nav__link": true, "pf-c-nav__link": true,
"highlight": !!(typeof attr.highlight === "function" "highlight": !!(typeof attr.highlight === "function"
? attr.highlight() ? attr.highlight()
@ -223,29 +220,22 @@ export class SidebarItems extends AKElement {
}; };
} }
renderLabel(entry: SidebarEntry) { renderLabel(label: string, attr: SidebarAttributes = {}) {
return html`<div class=${classMap(this.toLinkClasses(entry))}>${entry.label}</div>`; return html`<div class=${classMap(this.toLinkClasses(attr))}>${label}</div>`;
} }
// note the responsibilities pushed up to the caller // note the responsibilities pushed up to the caller
renderLink(entry: SidebarEntry) { renderLink(label: string, path: string | SidebarEventHandler, attr: SidebarAttributes = {}) {
const record = () => this.recordActive(entry); if (typeof path === "function") {
if (typeof entry.path === "function") { return html` <a @click=${path} class=${classMap(this.toLinkClasses(attr))}>
const handler = entry.path; ${label}
const recordAndHandle = () => {
record();
handler();
};
return html` <a @click=${recordAndHandle} class=${classMap(this.toLinkClasses(entry))}>
${entry.label}
</a>`; </a>`;
} }
return html` <a return html` <a
@click=${record} href="${attr.isAbsoluteLink ? "" : "#"}${path}"
href="${entry.attributes?.isAbsoluteLink ? "" : "#"}${entry.path}" class=${classMap(this.toLinkClasses(attr))}
class=${classMap(this.toLinkClasses(entry))}
> >
${entry.label} ${label}
</a>`; </a>`;
} }
@ -272,12 +262,9 @@ export class SidebarItems extends AKElement {
renderLinkAndChildren(entry: SidebarEntry): TemplateResult { renderLinkAndChildren(entry: SidebarEntry): TemplateResult {
const handler = () => this.toggleExpand(entry); const handler = () => this.toggleExpand(entry);
const record = () => this.recordActive(entry); return html` <div class="pf-c-nav__link">
const active = { "pf-m-current": entry === this.current };
return html` <div class="pf-c-nav__link ${classMap(active)}">
<a <a
href="${entry.attributes?.isAbsoluteLink ? "" : "#"}${entry.path}" href="${entry.attributes?.isAbsoluteLink ? "" : "#"}${entry.path}"
@click=${record}
class="ak-nav__link" class="ak-nav__link"
> >
${entry.label} ${entry.label}