diff --git a/ts_web/00_commitinfo_data.ts b/ts_web/00_commitinfo_data.ts index e1064fa..3b8582a 100644 --- a/ts_web/00_commitinfo_data.ts +++ b/ts_web/00_commitinfo_data.ts @@ -3,6 +3,6 @@ */ export const commitinfo = { name: '@design.estate/dees-catalog', - version: '1.0.194', + version: '1.0.195', description: 'website for lossless.com' } diff --git a/ts_web/elements/dees-modal.ts b/ts_web/elements/dees-modal.ts index ced7421..79a65a9 100644 --- a/ts_web/elements/dees-modal.ts +++ b/ts_web/elements/dees-modal.ts @@ -38,7 +38,9 @@ export class DeesModal extends DeesElement { modal.heading = optionsArg.heading; modal.content = optionsArg.content; modal.menuOptions = optionsArg.menuOptions; - modal.windowLayer = await DeesWindowLayer.createAndShow(); + modal.windowLayer = await DeesWindowLayer.createAndShow({ + blur: true, + }); modal.windowLayer.addEventListener('click', async () => { await modal.destroy(); }); diff --git a/ts_web/elements/dees-windowlayer.ts b/ts_web/elements/dees-windowlayer.ts index 77886c6..64b0617 100644 --- a/ts_web/elements/dees-windowlayer.ts +++ b/ts_web/elements/dees-windowlayer.ts @@ -1,4 +1,4 @@ -import { customElement, DeesElement, type TemplateResult, html, property, type CSSResult, } from '@design.estate/dees-element'; +import { customElement, DeesElement, type TemplateResult, html, property, type CSSResult, state, } from '@design.estate/dees-element'; import * as domtools from '@design.estate/dees-domtools'; @@ -8,20 +8,33 @@ declare global { } } +export interface IOptions_DeesWindowLayer { + blur: boolean; +} + @customElement('dees-windowlayer') export class DeesWindowLayer extends DeesElement { // STATIC public static demo = () => html``; - public static async createAndShow() { + public static async createAndShow(optionsArg?: IOptions_DeesWindowLayer) { const domtoolsInstance = domtools.DomTools.getGlobalDomToolsSync(); const windowLayer = new DeesWindowLayer(); + windowLayer.options = { + ...windowLayer.options, + ...optionsArg, + } document.body.append(windowLayer); await domtoolsInstance.convenience.smartdelay.delayFor(0); windowLayer.show(); return windowLayer; } + @state() + public options: IOptions_DeesWindowLayer = { + blur: false + }; + // INSTANCE @property({ type: Boolean @@ -49,14 +62,14 @@ export class DeesWindowLayer extends DeesElement { justify-content: center; align-items: center; background: rgba(0, 0, 0, 0.0); - backdrop-filter: brightness(1); + backdrop-filter: brightness(1) ${this.options.blur ? 'blur(0px)' : ''}; pointer-events: none; z-index: 200; } .visible { background: rgba(0, 0, 0, 0.2); - backdrop-filter: brightness(0.3); + backdrop-filter: brightness(0.9) ${this.options.blur ? 'blur(2px)' : ''}; pointer-events: all; }