Refactor and fix

src/page/image-viewer/image-viewer.html.ts

@@ -5,7 +5,7 @@ import { html } from '../../types/html';
 
 export const generate = (): html => `
   <section id="image-viewer">
-    <div id="container"></div>
+    <img image-viewer-ignore />
     <div tabindex="0" id="cancel">${cancel}</div>
   </section>
 `;

src/page/image-viewer/image-viewer.scss

@@ -1,20 +1,18 @@
 @use '../../style/mixins' as *;
 
-section#image-viewer {
+#image-viewer {
   @include center-children();
-  display: none;
+  @include blurred-background();
+
+  visibility: hidden;
   position: fixed;
   left: 0;
   top: 0;
   width: 100%;
   height: 100%;
-  margin: 0;
-  z-index: 2;
-  background-color: rgba(0, 0, 0, 0.85);
 
-  #container > * {
-    width: auto;
-    height: auto;
+  img {
+    @include square(auto);
 
     @include on-large-screen {
       max-width: 80vw;
@@ -22,17 +20,20 @@ section#image-viewer {
     }
 
     @include on-small-screen {
-      max-width: 95vw;
-      max-height: 95vh;
+      max-width: 92.5vw;
+      max-height: 92.5vh;
     }
   }
 
   #cancel {
+    @include image-button(var(--large-icon-size));
     @include square(calc(var(--large-icon-size) + var(--normal-margin) * 2));
     position: absolute;
     right: 0;
     top: 0;
 
-    @include image-button(var(--large-icon-size));
+    svg {
+      stroke: var(--normal-text-color);
+    }
   }
 }

src/page/image-viewer/image-viewer.ts

@@ -1,48 +1,36 @@
 import { PageElement } from '../page-element';
-
 import { generate } from './image-viewer.html';
 import { createElement } from '../../helper/create-element';
-import { OnLoadEvent } from '../../events/concrete-events/on-load-event';
-import { OptionalEvent } from '../../events/optional-event';
 
 export class PageImageViewer extends PageElement {
   public constructor() {
     super(createElement(generate()));
-    this.htmlRoot.onclick = () => PageImageViewer.hide(this.htmlRoot);
+
+    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));
   }
 
-  public handleOnLoadEvent(event: OnLoadEvent): OptionalEvent {
-    document.body.addEventListener('keydown', this.handleKeydown.bind(this));
-
-    const media = Array.prototype.slice.call(document.querySelectorAll('img'));
-
-    media
-      .filter((e: HTMLElement) => !e.attributes['image-viewer-ignore'])
-      .forEach((e: HTMLImageElement) => (e.onclick = this.handleClick.bind(this)));
-
-    return super.handleOnLoadEvent(event);
+  private showImage(source: HTMLImageElement) {
+    const image = this.query('img') as HTMLImageElement;
+    image.src = source.src;
+    this.htmlRoot.style.visibility = 'visible';
   }
 
-  private handleClick(event: Event) {
-    const container = this.query('#container');
-    container.firstElementChild?.remove();
-
-    const element: HTMLImageElement = new Image();
-    element.src = (event.target as HTMLImageElement).src;
-    container.appendChild(element);
-    PageImageViewer.show(this.htmlRoot);
-  }
-
-  private handleKeydown(event: KeyboardEvent) {
-    if (event.key === 'Escape') {
-      PageImageViewer.hide(this.htmlRoot);
-    }
-  }
-
-  private static show(e: HTMLElement) {
-    e.style.display = 'flex';
-  }
-  private static hide(e: HTMLElement) {
-    e.style.display = 'none';
+  private hideImage() {
+    this.htmlRoot.style.visibility = 'hidden';
   }
 }