set tree-item to active if its path exists in the url
This commit is contained in:
@@ -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<TreeItemType extends UmbTreeItemModelBase> = (
|
||||
@@ -101,6 +101,8 @@ export abstract class UmbTreeItemContextBase<TreeItemType extends UmbTreeItemMod
|
||||
this.loadChildren();
|
||||
}
|
||||
});
|
||||
|
||||
window.addEventListener('navigationend', this.#debouncedCheckIsActive);
|
||||
}
|
||||
|
||||
/**
|
||||
@@ -277,6 +279,7 @@ export abstract class UmbTreeItemContextBase<TreeItemType extends UmbTreeItemMod
|
||||
if (!pathname || !this.entityType || this.unique === undefined) return;
|
||||
const path = this.constructPath(pathname, this.entityType, this.unique);
|
||||
this.#path.setValue(path);
|
||||
this.#checkIsActive();
|
||||
},
|
||||
'observeSectionPath',
|
||||
);
|
||||
@@ -349,6 +352,15 @@ export abstract class UmbTreeItemContextBase<TreeItemType extends UmbTreeItemMod
|
||||
this.loadChildren();
|
||||
};
|
||||
|
||||
#debouncedCheckIsActive = debounce(() => 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<TreeItemType extends UmbTreeItemMod
|
||||
UmbReloadTreeItemChildrenRequestEntityActionEvent.TYPE,
|
||||
this.#onReloadRequest as EventListener,
|
||||
);
|
||||
window.removeEventListener('navigationend', this.#debouncedCheckIsActive);
|
||||
super.destroy();
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user