73 lines
2.2 KiB
JavaScript
73 lines
2.2 KiB
JavaScript
// retoor <retoor@molodetz.nl>
|
|
import { Component } from "./Component.js";
|
|
|
|
export class Lightbox extends Component {
|
|
static tag = "dp-lightbox";
|
|
|
|
setup() {
|
|
this.setAttribute("role", "dialog");
|
|
this.setAttribute("aria-modal", "true");
|
|
this.setAttribute("aria-label", "Image");
|
|
this.hidden = true;
|
|
this.image = document.createElement("img");
|
|
this.image.alt = "";
|
|
this.caption = document.createElement("p");
|
|
this.caption.className = "caption";
|
|
this.closeButton = document.createElement("button");
|
|
this.closeButton.type = "button";
|
|
this.closeButton.className = "modal-close lightbox-close";
|
|
this.closeButton.setAttribute("aria-label", "Close");
|
|
this.closeButton.textContent = "\u00d7";
|
|
this.append(this.closeButton, this.image, this.caption);
|
|
this.items = [];
|
|
this.index = 0;
|
|
document.addEventListener("click", (event) => this.onDocumentClick(event));
|
|
this.addEventListener("click", (event) => {
|
|
if (event.target === this || event.target === this.closeButton) {
|
|
this.close();
|
|
}
|
|
});
|
|
document.addEventListener("keydown", (event) => this.onKey(event));
|
|
}
|
|
|
|
onDocumentClick(event) {
|
|
const link = event.target.closest("[data-lightbox]");
|
|
if (!link || event.metaKey || event.ctrlKey) {
|
|
return;
|
|
}
|
|
event.preventDefault();
|
|
this.items = [...document.querySelectorAll("[data-lightbox]")];
|
|
this.show(this.items.indexOf(link));
|
|
}
|
|
|
|
show(index) {
|
|
this.index = (index + this.items.length) % this.items.length;
|
|
const link = this.items[this.index];
|
|
this.image.src = link.getAttribute("href");
|
|
this.image.alt = link.dataset.caption || "";
|
|
this.caption.textContent = link.dataset.caption || "";
|
|
this.hidden = false;
|
|
this.classList.add("visible");
|
|
this.closeButton.focus();
|
|
}
|
|
|
|
close() {
|
|
this.hidden = true;
|
|
this.classList.remove("visible");
|
|
this.image.removeAttribute("src");
|
|
}
|
|
|
|
onKey(event) {
|
|
if (this.hidden) {
|
|
return;
|
|
}
|
|
if (event.key === "Escape") {
|
|
this.close();
|
|
} else if (event.key === "ArrowRight") {
|
|
this.show(this.index + 1);
|
|
} else if (event.key === "ArrowLeft") {
|
|
this.show(this.index - 1);
|
|
}
|
|
}
|
|
}
|