Update features

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

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

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

@@ -28,12 +28,11 @@ section#image-viewer {
   }
 
   #cancel {
-    @include square(var(--icon-size));
+    @include square(calc(var(--large-icon-size) + var(--normal-margin) * 2));
     position: absolute;
-    box-sizing: content-box;
-    padding: var(--normal-margin);
     right: 0;
     top: 0;
-    cursor: pointer;
+
+    @include image-button(var(--large-icon-size));
   }
 }

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

@@ -17,8 +17,9 @@ export class PageImageViewer extends PageElement {
     const media = Array.prototype.slice.call(document.querySelectorAll('img'));
 
     media
-      .filter((e: HTMLElement) => e.parentElement !== this.htmlRoot)
+      .filter((e: HTMLElement) => !e.attributes['image-viewer-ignore'])
       .forEach((e: HTMLImageElement) => (e.onclick = this.handleClick.bind(this)));
+
     return super.handleOnLoadEvent(event);
   }