Most features done

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

@@ -0,0 +1,9 @@
+import { html } from "../../model/misc";
+import cancel from "../../static/icons/cancel.svg";
+
+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

@@ -0,0 +1,30 @@
+@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,28 +1,24 @@
-import "./image-viewer.scss";
-import cancel from "../../static/icons/cancel.svg";
-import { html } from "../../model/misc";
 import { createElement } from "../../framework/element-factory";
 import { PageElement } from "../../framework/page-element";
-import { hide, show } from "../../framework/helpers";
+
+import "./image-viewer.scss";
+import { generate } from "./image-viewer.html";
+import { mixColorsToRGB } from "../../framework/helper";
 
 export class PageImageViewer extends PageElement {
-  private static template: html = `
-        <section class="photo-viewer">
-            <img id="photo" alt="currently opened photo"/>
-            <img id="cancel" src="${cancel}" alt="cancel"/>
-        </section>
-    `;
-
   public constructor() {
     super();
-    const root = createElement(PageImageViewer.template);
-    (root.querySelector("#cancel") as HTMLElement).onclick = () => hide(root);
+    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(
@@ -38,6 +34,22 @@ export class PageImageViewer extends PageElement {
       "#photo"
     ) as HTMLImageElement).src = (event.target as HTMLImageElement).src;
 
-    show(this.getElement());
+    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";
+    console.log("#" + mixColorsToRGB("00000", "ffd6d6", 0.75));
+    document.body.parentElement.style.backgroundColor =
+      "#" + mixColorsToRGB("00000", "ffd6d6", 0.75);
+  }
+  private static hide(e: HTMLElement) {
+    e.style.display = "none";
   }
 }