diff --git a/src/Umbraco.Web.UI.Client/libs/context-api/provide/context-provider.ts b/src/Umbraco.Web.UI.Client/libs/context-api/provide/context-provider.ts index ddad843889..3f32cc247b 100644 --- a/src/Umbraco.Web.UI.Client/libs/context-api/provide/context-provider.ts +++ b/src/Umbraco.Web.UI.Client/libs/context-api/provide/context-provider.ts @@ -31,6 +31,9 @@ export class UmbContextProvider { public hostConnected() { this.host.addEventListener(umbContextRequestEventType, this._handleContextRequest); this.host.dispatchEvent(new UmbContextProvideEventImplementation(this._contextAlias)); + + // Listen to our debug event 'umb:debug-contexts' + this.host.addEventListener('umb:debug-contexts', this._handleDebugContextRequest); } /** @@ -54,6 +57,17 @@ export class UmbContextProvider { event.callback(this.#instance); }; + private _handleDebugContextRequest = (event: Event) => { + + + console.log('Context Alias:', this._contextAlias); + console.log('Context Instance:', this.#instance); + + // Do I update an array on the event which + // The Debug element can then render in UI?! + console.log('Event:', event); + }; + destroy(): void { // I want to make sure to call this, but for now it was too overwhelming to require the destroy method on context instances. diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/settings/dashboards/published-status/dashboard-published-status.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/settings/dashboards/published-status/dashboard-published-status.element.ts index c91b095df2..58a1db4df7 100644 --- a/src/Umbraco.Web.UI.Client/src/backoffice/settings/dashboards/published-status/dashboard-published-status.element.ts +++ b/src/Umbraco.Web.UI.Client/src/backoffice/settings/dashboards/published-status/dashboard-published-status.element.ts @@ -133,6 +133,7 @@ export class UmbDashboardPublishedStatusElement extends UmbLitElement { render() { return html` +

${this._publishedStatusText}

div { padding:10px; } @@ -43,6 +43,9 @@ export class UmbDebug extends LitElement { @property({reflect: true, type: Boolean}) enabled = false; + @property({type: Array}) + contextAliases = ['UmbTemplateDetailStore', 'umbLanguageStore']; + @state() private _debugPaneOpen = false; @@ -50,22 +53,18 @@ export class UmbDebug extends LitElement { this._debugPaneOpen = !this._debugPaneOpen; } - constructor() { - super(); + connectedCallback(): void { + super.connectedCallback(); - // Get outer element - const app = window.document.querySelector('umb-app'); + // Create event that bubbles up through the DOM + const event = new CustomEvent('umb:debug-contexts', { + bubbles: true, + composed: true + }); - app?.addEventListener(umbContextRequestEventType as unknown as UmbContextRequestEventImplementation, (e) => { - // Console.log event - console.log('Some event', e.type); - console.log('Some event thing', e); - console.log('Some event thing', e.contextAlias); - - }); - - //this.addEventListener('click', (e) => console.log(e.type, e.target.localName)); - } + // Dispatch it + this.dispatchEvent(event); + } render() { @@ -78,7 +77,14 @@ export class UmbDebug extends LitElement {
-

Events

+
+

Context Aliases to consume

+
    + ${this.contextAliases.map((ctxAlias) => + html`
  • ${ctxAlias}
  • ` + )} +
+
`;