51 lines
1.4 KiB
TypeScript
51 lines
1.4 KiB
TypeScript
import { createElement } from "../../framework/element-factory";
|
|
import { PageElement } from "../../framework/page-element";
|
|
|
|
import { generate } from "./image-viewer.html";
|
|
import { mixColorsToRGB } from "../../framework/helper";
|
|
|
|
export class PageImageViewer extends PageElement {
|
|
public constructor() {
|
|
super();
|
|
const root = createElement(generate());
|
|
(root.querySelector("#cancel") as HTMLElement).onclick = () =>
|
|
PageImageViewer.hide(root);
|
|
this.setElement(root);
|
|
}
|
|
|
|
public onAfterLoad(parent: HTMLElement) {
|
|
super.onAfterLoad(parent);
|
|
|
|
document.body.addEventListener("keydown", this.handleKeydown.bind(this));
|
|
|
|
const images = Array.prototype.slice.call(parent.querySelectorAll("img"));
|
|
images
|
|
.filter(
|
|
(img: HTMLImageElement) => img.parentElement !== this.getElement()
|
|
)
|
|
.forEach(
|
|
(img: HTMLImageElement) => (img.onclick = this.handleClick.bind(this))
|
|
);
|
|
}
|
|
|
|
private handleClick(event: Event) {
|
|
(this.getElement().querySelector(
|
|
"#photo"
|
|
) as HTMLImageElement).src = (event.target as HTMLImageElement).src;
|
|
|
|
PageImageViewer.show(this.getElement());
|
|
}
|
|
|
|
private handleKeydown(event: KeyboardEvent) {
|
|
if (event.key === "Escape") {
|
|
PageImageViewer.hide(this.getElement());
|
|
}
|
|
}
|
|
|
|
private static show(e: HTMLElement) {
|
|
e.style.display = "flex";
|
|
}
|
|
private static hide(e: HTMLElement) {
|
|
e.style.display = "none";
|
|
}
|
|
}
|