dees-catalog/ts_web/elements/dees-modal.ts

215 lines
5.5 KiB
TypeScript
Raw Normal View History

2024-01-18 01:08:19 +00:00
import * as colors from './00colors.js';
2024-01-15 18:42:15 +00:00
import * as plugins from './00plugins.js';
2024-01-18 01:08:19 +00:00
2023-09-12 23:37:02 +00:00
import { demoFunc } from './dees-modal.demo.js';
import {
customElement,
html,
DeesElement,
property,
type TemplateResult,
cssManager,
css,
type CSSResult,
unsafeCSS,
unsafeHTML,
state,
} from '@design.estate/dees-element';
import * as domtools from '@design.estate/dees-domtools';
import { DeesWindowLayer } from './dees-windowlayer.js';
declare global {
interface HTMLElementTagNameMap {
'dees-modal': DeesModal;
}
}
@customElement('dees-modal')
export class DeesModal extends DeesElement {
// STATIC
public static demo = demoFunc;
2023-09-13 11:41:56 +00:00
public static async createAndShow(optionsArg: {
heading: string;
content: TemplateResult;
menuOptions: plugins.tsclass.website.IMenuItem<DeesModal>[];
}) {
2023-09-12 23:37:02 +00:00
const body = document.body;
const modal = new DeesModal();
modal.heading = optionsArg.heading;
modal.content = optionsArg.content;
2023-09-13 11:41:56 +00:00
modal.menuOptions = optionsArg.menuOptions;
2023-09-13 14:46:00 +00:00
modal.windowLayer = await DeesWindowLayer.createAndShow({
blur: true,
});
2023-09-12 23:37:02 +00:00
modal.windowLayer.addEventListener('click', async () => {
await modal.destroy();
});
body.append(modal.windowLayer);
body.append(modal);
}
// INSTANCE
@property({
type: String,
})
public heading = '';
@state({})
public content: TemplateResult;
2023-09-13 11:41:56 +00:00
@state({})
public menuOptions: plugins.tsclass.website.IMenuItem<DeesModal>[] = [];
2023-09-12 23:37:02 +00:00
constructor() {
super();
}
public static styles = [
cssManager.defaultStyles,
css`
:host {
2023-10-05 12:36:59 +00:00
font-family: 'Roboto', 'Inter', sans-serif;
2023-09-12 23:37:02 +00:00
color: ${cssManager.bdTheme('#333', '#fff')};
2023-11-29 16:20:32 +00:00
will-change: transform;
2023-09-12 23:37:02 +00:00
}
.modalContainer {
display: flex;
position: fixed;
2023-09-13 14:25:54 +00:00
top: 0px;
left: 0px;
2023-09-12 23:37:02 +00:00
width: 100vw;
height: 100vh;
box-sizing: border-box;
align-items: center;
justify-content: center;
z-index: 2000;
}
.modal {
will-change: transform;
2023-09-13 17:15:53 +00:00
transform: translateY(0px) scale(0.95);
2023-09-12 23:37:02 +00:00
opacity: 0;
width: 480px;
min-height: 120px;
background: #111;
border-radius: 8px;
border: 1px solid #222;
transition: all 0.2s;
overflow: hidden;
2023-09-13 16:12:01 +00:00
box-shadow: 0px 2px 5px #00000080;
2023-09-12 23:37:02 +00:00
}
.modal.show {
opacity: 1;
2023-09-13 17:15:53 +00:00
transform: translateY(0px) scale(1);
}
.modal.show.predestroy {
opacity: 0;
transform: translateY(10px) scale(1);
2023-09-12 23:37:02 +00:00
}
.modal .heading {
height: 32px;
2023-10-05 12:36:59 +00:00
font-family: 'Roboto', 'Inter', sans-serif;
2023-09-12 23:37:02 +00:00
line-height: 32px;
text-align: center;
font-weight: 600;
font-size: 12px;
border-bottom: 1px solid #222;
}
.modal .content {
padding: 16px;
}
.modal .bottomButtons {
2024-01-18 01:08:19 +00:00
display: flex;
flex-direction: row;
2023-09-12 23:37:02 +00:00
border-top: 1px solid #222;
2024-01-18 01:08:19 +00:00
justify-content: flex-end;
2023-09-12 23:37:02 +00:00
}
.modal .bottomButtons .bottomButton {
2024-01-18 01:08:19 +00:00
margin: 8px 0px;
padding: 8px 12px;
border-radius: 4px;
line-height: 16px;
2023-09-12 23:37:02 +00:00
text-align: center;
font-size: 14px;
2024-01-18 01:08:19 +00:00
cursor: default;
user-select: none;
}
.modal .bottomButtons .bottomButton:first-child {
margin-left: 8px;
2023-09-12 23:37:02 +00:00
}
2024-01-18 01:08:19 +00:00
.modal .bottomButtons .bottomButton:last-child {
margin-right: 8px;
}
2023-09-12 23:37:02 +00:00
.modal .bottomButtons .bottomButton:hover {
2024-01-18 01:08:19 +00:00
background: ${cssManager.bdTheme(colors.bright.blue, colors.dark.blue)};
}
.modal .bottomButtons .bottomButton:active {
background: ${cssManager.bdTheme(colors.bright.blueActive, colors.dark.blueActive)};
2023-09-12 23:37:02 +00:00
}
.modal .bottomButtons .bottomButton:last-child {
border-right: none;
}
`,
];
public render(): TemplateResult {
return html`
2023-09-13 11:41:56 +00:00
<style>
.modal .bottomButtons {
grid-template-columns: ${cssManager.cssGridColumns(this.menuOptions.length, 0)};
}
</style>
2023-09-12 23:37:02 +00:00
<div class="modalContainer" @click=${this.handleOutsideClick}>
<div class="modal">
<div class="heading">${this.heading}</div>
<div class="content">${this.content}</div>
<div class="bottomButtons">
2023-09-13 11:41:56 +00:00
${this.menuOptions.map(
(actionArg) => html`
<div class="bottomButton" @click=${() => {
actionArg.action(this);
}}>${actionArg.name}</div>
`
)}
2023-09-12 23:37:02 +00:00
</div>
</div>
</div>
`;
}
private windowLayer: DeesWindowLayer;
public async firstUpdated(_changedProperties: Map<string | number | symbol, unknown>) {
super.firstUpdated(_changedProperties);
const domtools = await this.domtoolsPromise;
await domtools.convenience.smartdelay.delayFor(30);
const modal = this.shadowRoot.querySelector('.modal');
modal.classList.add('show');
}
public async handleOutsideClick(eventArg: MouseEvent) {
eventArg.stopPropagation();
const modalContainer = this.shadowRoot.querySelector('.modalContainer');
if (eventArg.target === modalContainer) {
await this.destroy();
}
}
public async destroy() {
const domtools = await this.domtoolsPromise;
const modal = this.shadowRoot.querySelector('.modal');
2023-09-13 17:15:53 +00:00
modal.classList.add('predestroy');
2023-09-12 23:37:02 +00:00
await domtools.convenience.smartdelay.delayFor(200);
document.body.removeChild(this);
await this.windowLayer.destroy();
}
}