71 lines
1.4 KiB
JavaScript
71 lines
1.4 KiB
JavaScript
class ModalImage extends HTMLElement {
|
|
#src = null
|
|
#alt = null
|
|
#imgElem = null
|
|
constructor () {
|
|
super();
|
|
this.attachShadow({ mode: "open" });
|
|
this.shadowRoot.innerHTML = `
|
|
<style>
|
|
dialog {
|
|
border: none;
|
|
padding: 0;
|
|
background-color: rgba(0,0,0,0);
|
|
}
|
|
|
|
dialog img {
|
|
max-width: 100%;
|
|
max-height: 100%;
|
|
}
|
|
|
|
dialog #dialog-content {
|
|
max-width: 90%;
|
|
margin: auto;
|
|
background-color: white;
|
|
padding: 1em;
|
|
}
|
|
|
|
dialog #close {
|
|
cursor: pointer;
|
|
}
|
|
img {
|
|
max-width: 100%;
|
|
max-height: 100%;
|
|
}
|
|
</style>
|
|
<img>
|
|
`;
|
|
this.#imgElem = this.shadowRoot.querySelector("img");
|
|
this.#imgElem.onclick = this.modalZoom.bind(this);
|
|
}
|
|
|
|
connectedCallback() {
|
|
const src = this.getAttribute("src");
|
|
const alt = this.getAttribute("alt");
|
|
this.#src = src;
|
|
this.#alt = alt;
|
|
this.#imgElem.src = src;
|
|
this.#imgElem.alt = alt;
|
|
}
|
|
|
|
modalZoom () {
|
|
const modalBox = document.createElement("dialog");
|
|
modalBox.innerHTML = `
|
|
<div id="dialog-content">
|
|
<button id="close">×</button>
|
|
<img src="${this.#src}" alt="${this.#alt}">
|
|
<div>${this.#alt}</div>
|
|
<div>
|
|
`;
|
|
this.shadowRoot.appendChild(modalBox);
|
|
modalBox.showModal();
|
|
modalBox.querySelector("#close").onclick = (e) => {
|
|
e.preventDefault();
|
|
modalBox.close();
|
|
modalBox.parentElement.removeChild(modalBox)
|
|
}
|
|
}
|
|
}
|
|
|
|
customElements.define("modal-image", ModalImage);
|