fix(core): update
This commit is contained in:
parent
32dd5e769b
commit
17d224332d
@ -3,6 +3,6 @@
|
|||||||
*/
|
*/
|
||||||
export const commitinfo = {
|
export const commitinfo = {
|
||||||
name: '@design.estate/dees-catalog',
|
name: '@design.estate/dees-catalog',
|
||||||
version: '1.0.194',
|
version: '1.0.195',
|
||||||
description: 'website for lossless.com'
|
description: 'website for lossless.com'
|
||||||
}
|
}
|
||||||
|
@ -38,7 +38,9 @@ export class DeesModal extends DeesElement {
|
|||||||
modal.heading = optionsArg.heading;
|
modal.heading = optionsArg.heading;
|
||||||
modal.content = optionsArg.content;
|
modal.content = optionsArg.content;
|
||||||
modal.menuOptions = optionsArg.menuOptions;
|
modal.menuOptions = optionsArg.menuOptions;
|
||||||
modal.windowLayer = await DeesWindowLayer.createAndShow();
|
modal.windowLayer = await DeesWindowLayer.createAndShow({
|
||||||
|
blur: true,
|
||||||
|
});
|
||||||
modal.windowLayer.addEventListener('click', async () => {
|
modal.windowLayer.addEventListener('click', async () => {
|
||||||
await modal.destroy();
|
await modal.destroy();
|
||||||
});
|
});
|
||||||
|
@ -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';
|
import * as domtools from '@design.estate/dees-domtools';
|
||||||
|
|
||||||
@ -8,20 +8,33 @@ declare global {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
export interface IOptions_DeesWindowLayer {
|
||||||
|
blur: boolean;
|
||||||
|
}
|
||||||
|
|
||||||
@customElement('dees-windowlayer')
|
@customElement('dees-windowlayer')
|
||||||
export class DeesWindowLayer extends DeesElement {
|
export class DeesWindowLayer extends DeesElement {
|
||||||
// STATIC
|
// STATIC
|
||||||
public static demo = () => html`<dees-windowlayer></dees-windowlayer>`;
|
public static demo = () => html`<dees-windowlayer></dees-windowlayer>`;
|
||||||
|
|
||||||
public static async createAndShow() {
|
public static async createAndShow(optionsArg?: IOptions_DeesWindowLayer) {
|
||||||
const domtoolsInstance = domtools.DomTools.getGlobalDomToolsSync();
|
const domtoolsInstance = domtools.DomTools.getGlobalDomToolsSync();
|
||||||
const windowLayer = new DeesWindowLayer();
|
const windowLayer = new DeesWindowLayer();
|
||||||
|
windowLayer.options = {
|
||||||
|
...windowLayer.options,
|
||||||
|
...optionsArg,
|
||||||
|
}
|
||||||
document.body.append(windowLayer);
|
document.body.append(windowLayer);
|
||||||
await domtoolsInstance.convenience.smartdelay.delayFor(0);
|
await domtoolsInstance.convenience.smartdelay.delayFor(0);
|
||||||
windowLayer.show();
|
windowLayer.show();
|
||||||
return windowLayer;
|
return windowLayer;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@state()
|
||||||
|
public options: IOptions_DeesWindowLayer = {
|
||||||
|
blur: false
|
||||||
|
};
|
||||||
|
|
||||||
// INSTANCE
|
// INSTANCE
|
||||||
@property({
|
@property({
|
||||||
type: Boolean
|
type: Boolean
|
||||||
@ -49,14 +62,14 @@ export class DeesWindowLayer extends DeesElement {
|
|||||||
justify-content: center;
|
justify-content: center;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
background: rgba(0, 0, 0, 0.0);
|
background: rgba(0, 0, 0, 0.0);
|
||||||
backdrop-filter: brightness(1);
|
backdrop-filter: brightness(1) ${this.options.blur ? 'blur(0px)' : ''};
|
||||||
pointer-events: none;
|
pointer-events: none;
|
||||||
z-index: 200;
|
z-index: 200;
|
||||||
}
|
}
|
||||||
|
|
||||||
.visible {
|
.visible {
|
||||||
background: rgba(0, 0, 0, 0.2);
|
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;
|
pointer-events: all;
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
Loading…
Reference in New Issue
Block a user