zoomable image works as a modal now :)

Author: guim4dev

src/components.d.ts

@@ -174,8 +174,9 @@ export namespace Components {
     'listenFor': string;
   }
   interface DocsZoomableImage {
-    'alt': string;
+    'close': () => Promise<void>;
     'href': string;
+    'open': () => Promise<void>;
   }
   interface FileTree {}
   interface FileTreeDirectory {
@@ -640,7 +641,6 @@ declare namespace LocalJSX {
     'listenFor'?: string;
   }
   interface DocsZoomableImage {
-    'alt'?: string;
     'href'?: string;
   }
   interface FileTree {}

src/components/zoomable-image/zoomable-image.css

@@ -1,23 +1,67 @@
-.Zoom-Image-Container {
-  transition: transform .2s; /* Animation */
-  padding: 10px;
-  z-index: 90000;
-  overflow: visible;
-  position: relative;
-}
-.Zoom-Image-Container img {
-  width: 100%;
-  transition: transform 0.25s ease;
-  cursor: zoom-in;
-  background-color: white;
+ /* Style the Image Used to Trigger the Modal */
+ .notModalImg {
+  border-radius: 5px;
+  cursor: pointer;
+  transition: 0.3s;
 }
 
-.Zoom-Image-Container input[type=checkbox] {
+.notModalImg:hover {opacity: 0.7;}
+
+/* The Modal (background) */
+.modal {
   display: none
 }
 
-.Zoom-Image-Container input[type=checkbox]:checked~img {
-  transform: scale(3);
-  cursor: zoom-out;
+.openModal {
+  display: block; /* Hidden by default */
+  position: fixed; /* Stay in place */
+  z-index: 1; /* Sit on top */
+  padding-top: 100px; /* Location of the box */
+  left: 0;
+  top: 0;
+  width: 100%; /* Full width */
+  height: 100%; /* Full height */
+  overflow: auto; /* Enable scroll if needed */
+  background-color: rgb(0,0,0); /* Fallback color */
+  background-color: rgba(0,0,0,0.8); /* Black w/ opacity */
+}
+
+.modalImg {
+  margin: auto;
+  display: block;
+  width: 90%;
+  animation-name: zoom;
+  animation-duration: 0.6s;
   background-color: white;
+  padding: 10px;
+}
+
+@keyframes zoom {
+  from {transform:scale(0)}
+  to {transform:scale(1)}
+}
+
+/* The Close Button */
+.close {
+  position: absolute;
+  top: 40px;
+  right: 35px;
+  color: #f1f1f1;
+  font-size: 40px;
+  font-weight: bold;
+  transition: 0.3s;
+}
+
+.close:hover,
+.close:focus {
+  color: #bbb;
+  text-decoration: none;
+  cursor: pointer;
+}
+
+/* 100% Image Width on Smaller Screens */
+@media only screen and (max-width: 700px){
+  .modalImg {
+    width: 100%;
+  }
 }

src/components/zoomable-image/zoomable-image.tsx

@@ -1,21 +1,43 @@
-import { Component, Prop, h } from '@stencil/core';
+import { Component, Element, Prop, h, State, Listen, Method } from '@stencil/core';
 
 @Component({
   tag: 'docs-zoomable-image',
   styleUrl: 'zoomable-image.css'
 })
 export class ZoomableImage {
-  @Prop() href: string;
-  @Prop() alt: string;
+  @Prop() href: string
+  @State() isOpen = false
+  @Element() element: HTMLElement;
+  @Listen('click', { target: 'window' })
+
+  handleClick(event: MouseEvent) {
+    const isNode = event.target instanceof Node;
+    const isOurs = isNode && this.element.contains(event.target as Node);
+
+    if (!isOurs) {
+      this.close();
+    }
+  }
+
+  @Method()
+  async close() {
+    this.isOpen = false;
+  }
+
+  @Method()
+  async open() {
+    this.isOpen = true
+  }
 
   render() {
 
     return (
-      <div class="Zoom-Image-Container">
-        <label>
-          <input type="checkbox" />
-          <img src={this.href} alt={this.alt} />
-        </label>
+      <div>
+        <img onClick={this.open.bind(this)} class="notModalImg" src={this.href} alt="Integrando sua Startup" />
+        <div class={ this.isOpen ? "openModal" : "modal" }>
+          <span onClick={this.close.bind(this)} class="close">&times;</span>
+          <img class="modalImg" src={this.href} />
+        </div>
       </div>
     );
   }

src/pages/forstartups.md

@@ -34,7 +34,7 @@ A Layers oferece aos desenvolvedores uma série de funcionalidades para que crie
 
 ## Etapas do Processo de Integração
 
-<docs-zoomable-image href="https://cdn.layers.digital/demo-developers/uploads/a2ce8aea-fed6-4ce8-b525-5da9d2fadfe5/Fluxo-Startups-Bonitinho.png" alt="Fluxo de Integração com Startups"></docs-zoomable-image>
+<docs-zoomable-image href="https://cdn.layers.digital/demo-developers/uploads/a2ce8aea-fed6-4ce8-b525-5da9d2fadfe5/Fluxo-Startups-Bonitinho.png"></docs-zoomable-image>
 
 O processo de integração consiste em 5 etapas:
 - Primeiro contato: Layers e Startup se conhecem e interagem com o objetivo de verificar se faz sentido para os dois uma integração.