WIP

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

@@ -1,10 +0,0 @@
-import { html } from "../../model/misc";
-import cancel from "../../static/icons/cancel.svg";
-import "./image-viewer.scss";
-
-export const generate = (): html => `
-    <section class="photo-viewer">
-        <img id="photo" alt="currently opened photo"/>
-        <img id="cancel" src="${cancel}" alt="cancel"/>
-    </section>
-`;

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

@@ -1,30 +0,0 @@
-@import "../../style/vars";
-@import "../../style/mixins";
-
-.photo-viewer {
-  @include center-children();
-  display: none;
-
-  position: fixed;
-  width: 100%;
-  height: 100%;
-  left: 0;
-  top: 0;
-  margin: 0;
-  z-index: 2;
-  background-color: rgba(0, 0, 0, 0.75);
-
-  #photo {
-    max-width: 90vw;
-    max-height: 80vh;
-  }
-
-  #cancel {
-    @include square($icon-size);
-    position: absolute;
-    padding: $normal-margin;
-    right: 0;
-    top: 0;
-    cursor: pointer;
-  }
-}

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

@@ -1,51 +0,0 @@
-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";
-  }
-}