feat: view full size image (#430)

* feat: added popup for full size image * fix: added z-index to popup
netwerk-digitaal-erfgoed · Aug 17, 2021 · be9d425 · be9d425
1 parent 5f71609
commit be9d425
Show file tree

Hide file tree

Showing 2 changed files with 72 additions and 5 deletions.
diff --git a/packages/solid-crs-components/lib/alerts/popup.component.ts b/packages/solid-crs-components/lib/alerts/popup.component.ts
@@ -80,6 +80,7 @@ export class PopupComponent extends RxLitElement {
           top: 0;
           left: 0;
           position: fixed;
+          z-index: 20;
         }
         .overlay {
           height: 100%;

diff --git a/packages/solid-crs-semcom-components/lib/object-imagery.component.ts b/packages/solid-crs-semcom-components/lib/object-imagery.component.ts
@@ -1,9 +1,9 @@
-import { html, property, unsafeCSS, css, TemplateResult, CSSResult } from 'lit-element';
+import { html, property, unsafeCSS, css, TemplateResult, CSSResult, query } from 'lit-element';
 import { CollectionObject, Logger, Translator } from '@netwerk-digitaal-erfgoed/solid-crs-core';
-import { FormEvent } from '@netwerk-digitaal-erfgoed/solid-crs-components';
+import { FormEvent, PopupComponent } from '@netwerk-digitaal-erfgoed/solid-crs-components';
 import { SpawnedActorRef } from 'xstate';
 import { RxLitElement } from 'rx-lit';
-import { Theme, Image } from '@netwerk-digitaal-erfgoed/solid-crs-theme';
+import { Theme, Image, Open, Cross } from '@netwerk-digitaal-erfgoed/solid-crs-theme';
 import { unsafeSVG } from 'lit-html/directives/unsafe-svg';
 
 /**
@@ -57,23 +57,34 @@ export class ObjectImageryComponent extends RxLitElement {
     'https://creativecommons.org/licenses/by-sa/2.0/be/deed.nl',
   ];
 
+  /**
+   * The popup component shown when the image preview is clicked
+   */
+  @query('nde-popup#image-popup')
+  imagePopup: PopupComponent;
+
   /**
    * Renders the component as HTML.
    *
    * @returns The rendered HTML of the component.
    */
   render(): TemplateResult {
 
+    const toggleImage =  () => { this.imagePopup?.toggle(); };
+
     return this.object ? html`
         
-    <nde-large-card>
+    <nde-large-card .showImage="${false}">
       <div slot="title">${this.translator?.translate('nde.features.object.card.image.title')}</div>
       <div slot="subtitle">${this.translator?.translate('nde.features.object.card.image.subtitle')}</div>
       <div slot="icon">
         ${unsafeSVG(Image)}
       </div>
-      <img slot="image" src="${this.object.image}">
       <div slot="content">
+        <div class="overlay" @click="${ () => toggleImage() }">
+            ${ unsafeSVG(Open) }
+            <img slot="image" src="${this.object.image}"/>
+        </div>
         <nde-form-element .actor="${this.formActor}" .translator="${this.translator}" field="image">
           <label slot="label" for="image">${this.translator?.translate('nde.features.object.card.field.file')}</label>
           <input type="text" slot="input" name="image" id="image"/>
@@ -84,12 +95,30 @@ export class ObjectImageryComponent extends RxLitElement {
             ${this.licenses.map((license: string) => html`<option id="${license}" ?selected="${license === this.object.license}">${this.translator?.translate(`nde.features.object.card.image.field.license.${license}`)}</option>`)}
           </select>
         </nde-form-element>
+        <nde-popup dark id="image-popup">
+          <div slot="content">
+            <div id="dismiss-popup" @click="${ () => toggleImage() }"> ${ unsafeSVG(Cross) } </div>
+            <img src="${ this.object.image }"/>
+          </div>
+        </nde-popup>
       </div>
     </nde-large-card>
   ` : html``;
 
   }
 
+  constructor() {
+
+    super();
+
+    if(!customElements.get('nde-popup')) {
+
+      customElements.define('nde-popup', PopupComponent);
+
+    }
+
+  }
+
   static get styles(): CSSResult[] {
 
     return [
@@ -100,6 +129,43 @@ export class ObjectImageryComponent extends RxLitElement {
           flex-direction: column;
           gap: var(--gap-normal);
         }
+        nde-large-card .overlay {
+          position: relative;
+          cursor: pointer;
+          height: 200px;
+          width: 100%;
+          display: block;
+          margin-bottom: var(--gap-normal);
+        }
+        nde-large-card .overlay svg {
+          position: absolute;
+          top: var(--gap-small);
+          right: var(--gap-small);
+          fill: white;
+        }
+        nde-large-card .overlay img {
+          display: block;
+          height: 200px;
+          width: 100%;
+          object-fit: cover;
+        }
+        #image-popup div[slot="content"] {
+          display: flex;
+          flex-direction: column;
+          max-height: 90%;
+        }
+        #image-popup div[slot="content"] img {
+          max-width: 100%;
+          max-height: 95%;
+        }
+        #image-popup div[slot="content"] div {
+          fill: white;
+          margin-bottom: var(--gap-normal);
+          min-height: 20px;
+          min-width: 20px;
+          align-self: flex-end;
+          cursor: pointer;
+        }
       `,
     ];