design.estate/dees-catalog
2
0
Fork 0
Code Issues 2 Pull Requests Actions Packages Projects Releases Wiki Activity

fix zindex

Browse Source
This commit is contained in:
Juergen Kunz
2025-06-26 18:37:49 +00:00
parent 931a760ee1
commit b5a2bd7436
5 changed files with 495 additions and 96 deletions
Download Patch File Download Diff File Expand all files Collapse all files

28
ts_web/elements/dees-windowlayer.ts
View File

@ -1,5 +1,5 @@
import { customElement, DeesElement, domtools, type TemplateResult, html, property, type CSSResult, state, } from '@design.estate/dees-element';
import { zIndexLayers } from './00zindex.js';
import { zIndexLayers, zIndexRegistry } from './00zindex.js';
declare global {
interface HTMLElementTagNameMap {
@ -33,6 +33,12 @@ export class DeesWindowLayer extends DeesElement {
public options: IOptions_DeesWindowLayer = {
blur: false
};
@state()
private backdropZIndex: number = 1000;
@state()
private contentZIndex: number = 1001;
// INSTANCE
@property({
@ -63,7 +69,7 @@ export class DeesWindowLayer extends DeesElement {
background: rgba(0, 0, 0, 0.0);
backdrop-filter: brightness(1) ${this.options.blur ? 'blur(0px)' : ''};
pointer-events: none;
z-index: ${zIndexLayers.backdrop.dropdown};
z-index: ${this.backdropZIndex};
}
.slotContent {
position: fixed;
@ -72,7 +78,7 @@ export class DeesWindowLayer extends DeesElement {
display: flex;
justify-content: center;
align-items: center;
z-index: ${zIndexLayers.overlay.dropdown};
z-index: ${this.contentZIndex};
}
.visible {
@ -102,9 +108,21 @@ export class DeesWindowLayer extends DeesElement {
public toggleVisibility () {
this.visible = !this.visible;
}
public getContentZIndex(): number {
return this.contentZIndex;
}
public async show() {
const domtools = await this.domtoolsPromise;
// Get z-indexes from registry
this.backdropZIndex = zIndexRegistry.getNextZIndex();
this.contentZIndex = zIndexRegistry.getNextZIndex();
// Register this element
zIndexRegistry.register(this, this.backdropZIndex);
await domtools.convenience.smartdelay.delayFor(0);
this.visible = true;
}
@ -119,6 +137,10 @@ export class DeesWindowLayer extends DeesElement {
const domtools = await this.domtoolsPromise;
await this.hide();
await domtools.convenience.smartdelay.delayFor(300);
// Unregister from z-index registry
zIndexRegistry.unregister(this);
this.remove();
}
}