From b1160e6e2dab5ff6e11ff5c09b4cba97e8347bf5 Mon Sep 17 00:00:00 2001 From: Mads Rasmussen Date: Wed, 20 Mar 2024 12:54:38 +0100 Subject: [PATCH 1/4] observe isActive state in tree-item element --- .../tree/tree-item/tree-item-base/tree-item-element-base.ts | 5 +++++ 1 file changed, 5 insertions(+) diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/tree/tree-item/tree-item-base/tree-item-element-base.ts b/src/Umbraco.Web.UI.Client/src/packages/core/tree/tree-item/tree-item-base/tree-item-element-base.ts index 37a2d713f2..fff0a03aeb 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/core/tree/tree-item/tree-item-base/tree-item-element-base.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/core/tree/tree-item/tree-item-base/tree-item-element-base.ts @@ -16,6 +16,9 @@ export abstract class UmbTreeItemElementBase (this._item = value)); this.observe(this.#treeItemContext.childItems, (value) => (this._childItems = value)); this.observe(this.#treeItemContext.hasChildren, (value) => (this._hasChildren = value)); + this.observe(this.#treeItemContext.isActive, (value) => (this._isActive = value)); this.observe(this.#treeItemContext.isLoading, (value) => (this._isLoading = value)); this.observe(this.#treeItemContext.isSelectableContext, (value) => (this._isSelectableContext = value)); this.observe(this.#treeItemContext.isSelectable, (value) => (this._isSelectable = value)); @@ -107,6 +111,7 @@ export abstract class UmbTreeItemElementBase Date: Wed, 20 Mar 2024 12:55:31 +0100 Subject: [PATCH 2/4] set tree-item to active if its path exists in the url --- .../tree-item-base/tree-item-context-base.ts | 15 ++++++++++++++- 1 file changed, 14 insertions(+), 1 deletion(-) diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/tree/tree-item/tree-item-base/tree-item-context-base.ts b/src/Umbraco.Web.UI.Client/src/packages/core/tree/tree-item/tree-item-base/tree-item-context-base.ts index 3650bdca50..82d17aba9d 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/core/tree/tree-item/tree-item-base/tree-item-context-base.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/core/tree/tree-item/tree-item-base/tree-item-context-base.ts @@ -13,7 +13,7 @@ import { UmbContextBase } from '@umbraco-cms/backoffice/class-api'; import { UmbContextToken } from '@umbraco-cms/backoffice/context-api'; import { UMB_ACTION_EVENT_CONTEXT, type UmbActionEventContext } from '@umbraco-cms/backoffice/action'; import type { UmbEntityActionEvent } from '@umbraco-cms/backoffice/entity-action'; -import { UmbPaginationManager } from '@umbraco-cms/backoffice/utils'; +import { UmbPaginationManager, debounce } from '@umbraco-cms/backoffice/utils'; import { UmbChangeEvent, UmbRequestReloadStructureForEntityEvent } from '@umbraco-cms/backoffice/event'; export type UmbTreeItemUniqueFunction = ( @@ -101,6 +101,8 @@ export abstract class UmbTreeItemContextBase this.#checkIsActive(), 100); + + #checkIsActive() { + const path = this.#path.getValue(); + const location = window.location.pathname; + const isActive = location.includes(path); + this.#isActive.setValue(isActive); + } + // TODO: use router context constructPath(pathname: string, entityType: string, unique: string | null) { return `section/${pathname}/workspace/${entityType}/edit/${unique}`; @@ -359,6 +371,7 @@ export abstract class UmbTreeItemContextBase Date: Wed, 20 Mar 2024 13:08:07 +0100 Subject: [PATCH 3/4] dont set tree item to active if it is selectable --- .../tree-item/tree-item-base/tree-item-context-base.ts | 9 +++++++++ 1 file changed, 9 insertions(+) diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/tree/tree-item/tree-item-base/tree-item-context-base.ts b/src/Umbraco.Web.UI.Client/src/packages/core/tree/tree-item/tree-item-base/tree-item-context-base.ts index 82d17aba9d..76f46b3fc3 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/core/tree/tree-item/tree-item-base/tree-item-context-base.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/core/tree/tree-item/tree-item-base/tree-item-context-base.ts @@ -252,6 +252,7 @@ export abstract class UmbTreeItemContextBase this.#checkIsActive(), 100); #checkIsActive() { + // don't set the active state if the item is selectable + const isSelectable = this.#isSelectable.getValue(); + + if (isSelectable) { + this.#isActive.setValue(false); + return; + } + const path = this.#path.getValue(); const location = window.location.pathname; const isActive = location.includes(path); From f32c6ba68f38f821ee17396017c341faab57406a Mon Sep 17 00:00:00 2001 From: Mads Rasmussen Date: Wed, 20 Mar 2024 13:47:24 +0100 Subject: [PATCH 4/4] add active state to menu item --- .../menu-item-layout.element.ts | 36 +++++++++++++++++-- 1 file changed, 33 insertions(+), 3 deletions(-) diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/menu/menu-item-layout/menu-item-layout.element.ts b/src/Umbraco.Web.UI.Client/src/packages/core/menu/menu-item-layout/menu-item-layout.element.ts index 6b2b0b4dec..ec9756c5fa 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/core/menu/menu-item-layout/menu-item-layout.element.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/core/menu/menu-item-layout/menu-item-layout.element.ts @@ -1,5 +1,6 @@ -import { html, customElement, property, ifDefined } from '@umbraco-cms/backoffice/external/lit'; +import { html, customElement, property, ifDefined, state } from '@umbraco-cms/backoffice/external/lit'; import { UmbLitElement } from '@umbraco-cms/backoffice/lit-element'; +import { debounce } from '@umbraco-cms/backoffice/utils'; /** * @element umb-menu-item-layout @@ -36,8 +37,32 @@ export class UmbMenuItemLayoutElement extends UmbLitElement { @property({ type: String }) public href?: string; + @state() + private _isActive = false; + + connectedCallback() { + super.connectedCallback(); + window.addEventListener('navigationend', this.#debouncedCheckIsActive); + } + + #debouncedCheckIsActive = debounce(() => this.#checkIsActive(), 100); + + #checkIsActive() { + if (!this.href) { + this._isActive = false; + return; + } + + const location = window.location.pathname; + this._isActive = location.includes(this.href); + } + render() { - return html` + return html` ${this.entityType ? html` - ` + ` : ''} `; } + + disconnectedCallback() { + super.disconnectedCallback(); + window.removeEventListener('navigationend', this.#debouncedCheckIsActive); + } } declare global {