38 lines
1.1 KiB
TypeScript
38 lines
1.1 KiB
TypeScript
import { PageElement } from '../page-element';
|
|
import { generate } from './image-viewer.html';
|
|
import { createElement } from '../../helper/create-element';
|
|
|
|
export class PageImageViewer extends PageElement {
|
|
public constructor() {
|
|
super(createElement(generate()));
|
|
|
|
document.body.addEventListener('click', (event: MouseEvent) => {
|
|
if (
|
|
event.target instanceof HTMLImageElement &&
|
|
!event.target.attributes['image-viewer-ignore']
|
|
) {
|
|
this.showImage(event.target);
|
|
}
|
|
});
|
|
|
|
document.body.addEventListener('keydown', (event: KeyboardEvent) => {
|
|
if (event.key === 'Escape') {
|
|
this.hideImage();
|
|
}
|
|
});
|
|
|
|
this.htmlRoot.addEventListener('click', this.hideImage.bind(this));
|
|
}
|
|
|
|
private showImage(source: HTMLImageElement) {
|
|
const image = this.query('img') as HTMLImageElement;
|
|
image.src = source.src;
|
|
image.height = source.height;
|
|
image.width = source.width;
|
|
this.htmlRoot.style.visibility = 'visible';
|
|
}
|
|
|
|
private hideImage() {
|
|
this.htmlRoot.style.visibility = 'hidden';
|
|
}
|
|
}
|