From e3d20014772db0ec5e5f1890d8505b28151eeca9 Mon Sep 17 00:00:00 2001 From: Mads Rasmussen Date: Tue, 7 Oct 2025 12:08:35 +0200 Subject: [PATCH] SectionSidebarContextMenu: Delete element and methods for interaction (#20399) Delete sction-sidebar-context-menu element + context methods --- .../src/packages/core/section/index.ts | 1 - .../section-sidebar-context-menu/index.ts | 1 - .../section-sidebar-context-menu.element.ts | 163 ------------------ .../core/section/section-sidebar/index.ts | 2 +- .../section-sidebar.context.token.ts | 4 + .../section-sidebar.context.ts | 46 +---- .../tree-item-base/tree-item-context-base.ts | 19 +- .../tree-item/tree-item-context.interface.ts | 1 - 8 files changed, 7 insertions(+), 230 deletions(-) delete mode 100644 src/Umbraco.Web.UI.Client/src/packages/core/section/section-sidebar-context-menu/index.ts delete mode 100644 src/Umbraco.Web.UI.Client/src/packages/core/section/section-sidebar-context-menu/section-sidebar-context-menu.element.ts create mode 100644 src/Umbraco.Web.UI.Client/src/packages/core/section/section-sidebar/section-sidebar.context.token.ts diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/section/index.ts b/src/Umbraco.Web.UI.Client/src/packages/core/section/index.ts index 03fa9cfd53..54238409df 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/core/section/index.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/core/section/index.ts @@ -3,7 +3,6 @@ export * from './constants.js'; export * from './default/default-section.element.js'; export * from './section-main/index.js'; export * from './section-picker-modal/section-picker-modal.token.js'; -export * from './section-sidebar-context-menu/index.js'; export * from './section-sidebar/index.js'; export * from './section.context.js'; export * from './section.context.token.js'; diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/section/section-sidebar-context-menu/index.ts b/src/Umbraco.Web.UI.Client/src/packages/core/section/section-sidebar-context-menu/index.ts deleted file mode 100644 index c1420f9b8a..0000000000 --- a/src/Umbraco.Web.UI.Client/src/packages/core/section/section-sidebar-context-menu/index.ts +++ /dev/null @@ -1 +0,0 @@ -export * from './section-sidebar-context-menu.element.js'; diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/section/section-sidebar-context-menu/section-sidebar-context-menu.element.ts b/src/Umbraco.Web.UI.Client/src/packages/core/section/section-sidebar-context-menu/section-sidebar-context-menu.element.ts deleted file mode 100644 index 065ed5c8b6..0000000000 --- a/src/Umbraco.Web.UI.Client/src/packages/core/section/section-sidebar-context-menu/section-sidebar-context-menu.element.ts +++ /dev/null @@ -1,163 +0,0 @@ -import type { UmbSectionSidebarContext } from '../section-sidebar/index.js'; -import { UMB_SECTION_SIDEBAR_CONTEXT } from '../section-sidebar/index.js'; -import { UmbTextStyles } from '@umbraco-cms/backoffice/style'; -import { css, html, nothing, customElement, state, ref } from '@umbraco-cms/backoffice/external/lit'; -import { UmbLitElement } from '@umbraco-cms/backoffice/lit-element'; -import { observeMultiple } from '@umbraco-cms/backoffice/observable-api'; -import { UmbContextProxyController } from '@umbraco-cms/backoffice/context-proxy'; - -@customElement('umb-section-sidebar-context-menu') -export class UmbSectionSidebarContextMenuElement extends UmbLitElement { - #sectionSidebarContext?: UmbSectionSidebarContext; - - @state() - private _isOpen = false; - - @state() - private _entityType?: string; - - @state() - private _unique?: string | null; - - @state() - private _headline?: string; - - constructor() { - super(); - - this.consumeContext(UMB_SECTION_SIDEBAR_CONTEXT, (instance) => { - this.#sectionSidebarContext = instance; - this.#observeEntityModel(); - - if (this.#sectionSidebarContext) { - // make prettier not break the lines on the next 4 lines: - // prettier-ignore - this.observe( this.#sectionSidebarContext.contextMenuIsOpen, (value) => (this._isOpen = value), '_observeContextMenuIsOpen'); - // prettier-ignore - this.observe(this.#sectionSidebarContext.headline, (value) => (this._headline = value), '_observeHeadline'); - } else { - this.removeUmbControllerByAlias('_observeContextMenuIsOpen'); - this.removeUmbControllerByAlias('_observeHeadline'); - } - }); - } - - #observeEntityModel() { - if (!this.#sectionSidebarContext) { - this.removeUmbControllerByAlias('_observeEntityModel'); - return; - } - - this.observe( - observeMultiple([this.#sectionSidebarContext.unique, this.#sectionSidebarContext.entityType]), - (values) => { - this._unique = values[0]; - this._entityType = values[1]; - }, - '_observeEntityModel', - ); - } - - #closeContextMenu() { - this.#sectionSidebarContext?.closeContextMenu(); - } - - #onActionExecuted(event: CustomEvent) { - event.stopPropagation(); - this.#closeContextMenu(); - } - - #setupProxy(target: EventTarget | undefined) { - new UmbContextProxyController(this, target, () => - this.#sectionSidebarContext?.getContextElement(), - ).setIgnoreContextAliases([UMB_SECTION_SIDEBAR_CONTEXT.contextAlias]); - } - - override render() { - return html` - ${this.#renderBackdrop()} -
- - ${this.#renderModal()} -
- `; - } - - #renderBackdrop() { - // TODO: add keyboard support (close on escape) - - return this._isOpen ? html`
` : nothing; - } - - #renderModal() { - return this._isOpen && this._unique !== undefined && this._entityType - ? html` - ${this._headline ? html`

${this.localize.string(this._headline)}

` : nothing} - - ` - : nothing; - } - - static override styles = [ - UmbTextStyles, - css` - :host { - display: block; - width: 100%; - height: 100%; - z-index: 1; - } - #backdrop { - content: ''; - position: absolute; - inset: 0px; - background-color: black; - opacity: 0.5; - width: 100vw; - height: 100vh; - z-index: -1; - } - #relative-wrapper { - background-color: var(--uui-color-surface); - position: relative; - display: flex; - flex-direction: column; - width: 100%; - height: 100%; - } - #action-modal { - position: absolute; - height: 100%; - z-index: 1; - top: 0; - right: calc(var(--umb-section-sidebar-width) * -1); - width: var(--umb-section-sidebar-width); - border: none; - border-left: 1px solid var(--uui-color-border); - border-right: 1px solid var(--uui-color-border); - background-color: var(--uui-color-surface); - } - - #action-modal h3 { - padding: var(--uui-size-4) var(--uui-size-8); - margin: 0; - min-height: var(--umb-header-layout-height); - box-sizing: border-box; - display: flex; - align-items: center; - } - #action-modal umb-entity-action-list { - --uui-menu-item-flat-structure: 0; - } - `, - ]; -} - -declare global { - interface HTMLElementTagNameMap { - 'umb-section-sidebar-context-menu': UmbSectionSidebarContextMenuElement; - } -} diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/section/section-sidebar/index.ts b/src/Umbraco.Web.UI.Client/src/packages/core/section/section-sidebar/index.ts index dbb38f6093..263a48c727 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/core/section/section-sidebar/index.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/core/section/section-sidebar/index.ts @@ -1,2 +1,2 @@ -export * from './section-sidebar.context.js'; export * from './section-sidebar.element.js'; +export * from './section-sidebar.context.token.js'; diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/section/section-sidebar/section-sidebar.context.token.ts b/src/Umbraco.Web.UI.Client/src/packages/core/section/section-sidebar/section-sidebar.context.token.ts new file mode 100644 index 0000000000..c91ec2f0e5 --- /dev/null +++ b/src/Umbraco.Web.UI.Client/src/packages/core/section/section-sidebar/section-sidebar.context.token.ts @@ -0,0 +1,4 @@ +import type { UmbSectionSidebarContext } from './section-sidebar.context.js'; +import { UmbContextToken } from '@umbraco-cms/backoffice/context-api'; + +export const UMB_SECTION_SIDEBAR_CONTEXT = new UmbContextToken('UmbSectionSidebarContext'); diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/section/section-sidebar/section-sidebar.context.ts b/src/Umbraco.Web.UI.Client/src/packages/core/section/section-sidebar/section-sidebar.context.ts index 6c1bce2e19..7e67bb2e8b 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/core/section/section-sidebar/section-sidebar.context.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/core/section/section-sidebar/section-sidebar.context.ts @@ -1,53 +1,9 @@ -import type { UmbOpenContextMenuArgs } from './types.js'; -import { UmbContextToken } from '@umbraco-cms/backoffice/context-api'; +import { UMB_SECTION_SIDEBAR_CONTEXT } from './section-sidebar.context.token.js'; import { UmbContextBase } from '@umbraco-cms/backoffice/class-api'; import type { UmbControllerHost } from '@umbraco-cms/backoffice/controller-api'; -import { UmbStringState, UmbBooleanState } from '@umbraco-cms/backoffice/observable-api'; export class UmbSectionSidebarContext extends UmbContextBase { - #contextMenuIsOpen = new UmbBooleanState(false); - contextMenuIsOpen = this.#contextMenuIsOpen.asObservable(); - - #entityType = new UmbStringState(undefined); - entityType = this.#entityType.asObservable(); - - #unique = new UmbStringState(undefined); - unique = this.#unique.asObservable(); - - #headline = new UmbStringState(undefined); - headline = this.#headline.asObservable(); - - #contextElement: Element | undefined = undefined; - constructor(host: UmbControllerHost) { super(host, UMB_SECTION_SIDEBAR_CONTEXT); } - - toggleContextMenu(host: Element, args: UmbOpenContextMenuArgs) { - this.openContextMenu(host, args); - } - - // TODO: we wont get notified about tree item name changes because we don't have a subscription - // we need to figure out how we best can handle this when we only know the entity and unique id - openContextMenu(host: Element, args: UmbOpenContextMenuArgs) { - this.#entityType.setValue(args.entityType); - this.#unique.setValue(args.unique); - this.#headline.setValue(args.headline); - this.#contextMenuIsOpen.setValue(true); - this.#contextElement = host; - } - - closeContextMenu() { - this.#contextMenuIsOpen.setValue(false); - this.#entityType.setValue(undefined); - this.#unique.setValue(undefined); - this.#headline.setValue(undefined); - this.#contextElement = undefined; - } - - getContextElement() { - return this.#contextElement; - } } - -export const UMB_SECTION_SIDEBAR_CONTEXT = new UmbContextToken('UmbSectionSidebarContext'); 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 4bb1a9b759..8a30e0e455 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 @@ -12,7 +12,7 @@ import { UmbBooleanState, UmbObjectState, UmbStringState } from '@umbraco-cms/ba import { UmbContextBase } from '@umbraco-cms/backoffice/class-api'; import { UmbDeprecation, debounce } from '@umbraco-cms/backoffice/utils'; import { UmbParentEntityContext } from '@umbraco-cms/backoffice/entity'; -import { UMB_SECTION_CONTEXT, UMB_SECTION_SIDEBAR_CONTEXT } from '@umbraco-cms/backoffice/section'; +import { UMB_SECTION_CONTEXT } from '@umbraco-cms/backoffice/section'; import type { UmbControllerHost } from '@umbraco-cms/backoffice/controller-api'; import type { UmbEntityModel, UmbEntityUnique } from '@umbraco-cms/backoffice/entity'; @@ -69,7 +69,6 @@ export abstract class UmbTreeItemContextBase< public treeContext?: typeof UMB_TREE_CONTEXT.TYPE; #sectionContext?: typeof UMB_SECTION_CONTEXT.TYPE; - #sectionSidebarContext?: typeof UMB_SECTION_SIDEBAR_CONTEXT.TYPE; #parentContext = new UmbParentEntityContext(this); @@ -172,18 +171,6 @@ export abstract class UmbTreeItemContextBase< */ public loadNextItems = (): Promise => this.#treeItemChildrenManager.loadNextChildren(); - public toggleContextMenu() { - if (!this.getTreeItem() || !this.entityType || this.unique === undefined) { - throw new Error('Could not request children, tree item is not set'); - } - - this.#sectionSidebarContext?.toggleContextMenu(this.getHostElement(), { - entityType: this.entityType, - unique: this.unique, - headline: this.getTreeItem()?.name || '', - }); - } - /** * Selects the tree item * @memberof UmbTreeItemContextBase @@ -241,10 +228,6 @@ export abstract class UmbTreeItemContextBase< this.#observeSectionPath(); }); - this.consumeContext(UMB_SECTION_SIDEBAR_CONTEXT, (instance) => { - this.#sectionSidebarContext = instance; - }); - this.consumeContext(UMB_TREE_CONTEXT, (treeContext) => { this.treeContext = treeContext; this.#observeIsSelectable(); diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/tree/tree-item/tree-item-context.interface.ts b/src/Umbraco.Web.UI.Client/src/packages/core/tree/tree-item/tree-item-context.interface.ts index acd7a3fadf..885de32b35 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/core/tree/tree-item/tree-item-context.interface.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/core/tree/tree-item/tree-item-context.interface.ts @@ -25,7 +25,6 @@ export interface UmbTreeItemContext