58 lines
1.6 KiB
JavaScript
58 lines
1.6 KiB
JavaScript
class CustomModal extends HTMLElement {
|
|
static observedAttributes = ['active'];
|
|
|
|
#templateHtml = `
|
|
<div class="overlay">
|
|
<main-window width="700px" gap="25px">
|
|
<slot></slot>
|
|
</main-window>
|
|
</div>
|
|
`;
|
|
|
|
constructor() {
|
|
super();
|
|
this.attachShadow({ mode: 'open' });
|
|
|
|
const template = document.createElement('template')
|
|
template.innerHTML = this.#templateHtml;
|
|
this.shadowRoot.appendChild(template.content.cloneNode(true));
|
|
|
|
this.overlay = this.shadowRoot.querySelector('div.overlay');
|
|
this.mainWindow = this.shadowRoot.querySelector('main-window');
|
|
}
|
|
|
|
connectedCallback() {
|
|
this.updateStyle();
|
|
}
|
|
|
|
attributeChangedCallback(name, oldValue, newValue) {
|
|
if (oldValue === newValue) return;
|
|
|
|
switch (name) {
|
|
case 'active':
|
|
this.overlay.style.visibility = newValue === "true" ? 'visible' : 'hidden';
|
|
break;
|
|
default:
|
|
console.error(`Unhandled attribute change: ${name}`);
|
|
}
|
|
}
|
|
|
|
updateStyle() {
|
|
this.overlay.style.position = 'fixed';
|
|
this.overlay.style.margin = '0';
|
|
this.overlay.style.top = '0';
|
|
this.overlay.style.left = '0';
|
|
this.overlay.style.right = '0';
|
|
this.overlay.style.bottom = '0';
|
|
this.overlay.style.display = 'flex';
|
|
this.overlay.style.paddingTop = '50px';
|
|
this.overlay.style.justifyContent = 'center';
|
|
this.overlay.style.background = '#0000001A 0% 0% no-repeat padding-box';
|
|
this.overlay.style.opacity = '1';
|
|
this.overlay.style.transition = 'all 0.35s ease-in';
|
|
this.mainWindow.style.top = '25px';
|
|
}
|
|
}
|
|
|
|
customElements.define('custom-modal', CustomModal);
|