diff --git a/src/Umbraco.Web.UI.Client/src/app.ts b/src/Umbraco.Web.UI.Client/src/app.ts index 22ab81b634..f556e4ae86 100644 --- a/src/Umbraco.Web.UI.Client/src/app.ts +++ b/src/Umbraco.Web.UI.Client/src/app.ts @@ -149,7 +149,9 @@ export class UmbApp extends UmbLitElement { } render() { - return html``; + return html` + + `; } } diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/debug/debug.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/debug/debug.element.ts new file mode 100644 index 0000000000..5af1998733 --- /dev/null +++ b/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/debug/debug.element.ts @@ -0,0 +1,103 @@ +import { UmbContextRequestEventImplementation, umbContextRequestEventType } from '@umbraco-cms/context-api'; +import { UUITextStyles } from '@umbraco-ui/uui-css/lib'; +import { css, html, LitElement, nothing } from 'lit'; +import { styleMap } from 'lit-html/directives/style-map'; +import { customElement, property, state } from 'lit/decorators.js'; + + +@customElement('umb-debug') +export class UmbDebug extends LitElement { + static styles = [ + UUITextStyles, + css` + :host { + } + + #debug { + display: block; + font-family: monospace; + /* background:red; */ + + position:absolute; + bottom:0; + left:0; + z-index:10000; + width:calc(100% - 20px); + + padding:10px; + } + + #debug:hover { + /* background-color:blue; */ + } + + .events { + background-color:var(--uui-color-danger); + color:var(--uui-color-selected-contrast); + height:0; + transition: height 0.3s ease-out; + } + + .events.open { + height:200px; + padding:10px; + } + + h4 { + margin:0; + } + + `, + ]; + + @property({reflect: true, type: Boolean}) + enabled = false; + + @state() + private _debugPaneOpen = false; + + private _toggleDebugPane() { + this._debugPaneOpen = !this._debugPaneOpen; + } + + constructor() { + super(); + + // Get outer element + const app = window.document.querySelector('umb-app'); + + console.log('root app', app); + 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)); + } + + render() { + + if(this.enabled){ + return html` +
+ Debug +
+

Events

+ +
+
+ `; + } + + return nothing; + } +} + +declare global { + interface HTMLElementTagNameMap { + 'umb-debug': UmbDebug; + } +} diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/index.ts b/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/index.ts index 77c784844f..31fabab8cb 100644 --- a/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/index.ts +++ b/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/index.ts @@ -31,3 +31,5 @@ import './input-document-picker/input-document-picker.element'; import './empty-state/empty-state.element'; import './color-picker/color-picker.element'; + +import './debug/debug.element'; \ No newline at end of file