39 lines
1.1 KiB
JavaScript
39 lines
1.1 KiB
JavaScript
class PreviewableImage extends HTMLElement {
|
|
static elementName = "previewable-image";
|
|
|
|
connectedCallback() {
|
|
const img = this.querySelector("picture") ?? this.querySelector("img");
|
|
if (!img) {
|
|
console.warn("PreviewableImage: no valid child picture or img", this);
|
|
return;
|
|
}
|
|
|
|
const dialog = document.createElement("dialog");
|
|
dialog.appendChild(img.cloneNode(true));
|
|
|
|
const closeForm = document.createElement("form");
|
|
closeForm.method = "dialog";
|
|
|
|
const closeButton = document.createElement("button");
|
|
closeButton.innerText = this.getAttribute("close-label") || "Close";
|
|
closeForm.appendChild(closeButton);
|
|
|
|
dialog.appendChild(closeForm);
|
|
|
|
const openButton = document.createElement("button");
|
|
openButton.appendChild(img);
|
|
openButton.addEventListener("click", () => {
|
|
dialog.showModal();
|
|
});
|
|
|
|
this.appendChild(openButton);
|
|
this.appendChild(dialog);
|
|
|
|
if (this.hasAttribute("open")) {
|
|
dialog.showModal();
|
|
}
|
|
}
|
|
}
|
|
|
|
customElements.define(PreviewableImage.elementName, PreviewableImage);
|