Add dark mode

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

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

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

@@ -1,30 +1,41 @@
 @import '../../style/vars';
 @import '../../style/mixins';
 
-#image-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: 80vw;
-    max-height: 80vh;
-  }
-
-  #cancel {
-    @include square($icon-size);
-    position: absolute;
-    box-sizing: content-box;
-    padding: $normal-margin;
-    right: 0;
+@include responsive() using ($vars) {
+  #image-viewer {
+    @include center-children();
+    display: none;
+    position: fixed;
+    width: 100%;
+    height: 100%;
+    left: 0;
     top: 0;
-    cursor: pointer;
+    margin: 0;
+    z-index: 2;
+    background-color: rgba(0, 0, 0, 0.85);
+
+    @include on-large-screen {
+      #container > * {
+        max-width: 80vw;
+        max-height: 80vh;
+      }
+    }
+
+    @include on-small-screen {
+      #container > * {
+        max-width: 95vw;
+        max-height: 95vh;
+      }
+    }
+
+    #cancel {
+      @include square(map_get($vars, $icon-size));
+      position: absolute;
+      box-sizing: content-box;
+      padding: map_get($vars, $normal-margin);
+      right: 0;
+      top: 0;
+      cursor: pointer;
+    }
   }
 }

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

@@ -6,9 +6,8 @@ import { createElement } from '../../framework/helper/create-element';
 
 export class PageImageViewer extends PageElement {
   public constructor() {
-    const root = createElement(generate());
-    root.onclick = () => PageImageViewer.hide(root);
-    super(root);
+    super(createElement(generate()));
+    this.element.onclick = () => PageImageViewer.hide(this.element);
   }
 
   protected handleEvent(event: PageEvent, parent: PageElement) {
@@ -18,25 +17,26 @@ export class PageImageViewer extends PageElement {
 
     document.body.addEventListener('keydown', this.handleKeydown.bind(this));
 
-    const images = Array.prototype.slice.call(
-      parent.element.querySelectorAll('img')
+    const media = Array.prototype.slice.call(
+      parent.element.querySelectorAll('img, video')
     );
-    images
+
+    media
       .filter(
-        (img: HTMLImageElement) =>
-          img.parentElement !== this.element &&
-          !img.classList.contains('no-open')
+        (e: HTMLElement) =>
+          e.parentElement !== this.element && !e.classList.contains('no-open')
       )
       .forEach(
-        (img: HTMLImageElement) => (img.onclick = this.handleClick.bind(this))
+        (e: HTMLImageElement) => (e.onclick = this.handleClick.bind(this))
       );
   }
 
   private handleClick(event: Event) {
-    (this.query(
-      '#photo'
-    ) as HTMLImageElement).src = (event.target as HTMLImageElement).src;
-
+    const container = this.query('#container');
+    Array.prototype.forEach.call(container.childNodes, (e: HTMLElement) =>
+      e.remove()
+    );
+    container.appendChild((event.target as HTMLElement).cloneNode());
     PageImageViewer.show(this.element);
   }