Add Lightbox Feature

src/index.css

@@ -10,10 +10,13 @@
 
     &-picture {
       max-width: 100%;
-      vertical-align: bottom;
       display: block;
     }
 
+    img {
+      cursor: zoom-in;
+    }
+
     &-preloader {
       width: 50px;
       height: 50px;
@@ -157,3 +160,48 @@
     transform: rotate(360deg);
   }
 }
+
+.image-lightbox {
+  z-index: 1000;
+  display: block;
+  position: fixed;
+  overflow: hidden;
+  top:0;
+  right: 0;
+  left: 0;
+  bottom: 0;
+  background: rgba(0, 0, 0, 0.1);
+  transition: opacity .15s linear;
+  touch-action: pinch-zoom;
+
+  &__item {
+    display: flex;
+    position: absolute;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: 0;
+    justify-content: center;
+    align-items: center;
+    will-change: transform opacity;
+
+    img {
+      width: auto;
+      height: auto;
+      max-width: 100vw;
+      max-height: 100vh;
+      cursor: pointer;
+    }
+  }
+
+  &__close {
+    position: absolute;
+    top: 5px;
+    right: 5px;
+    cursor: pointer;
+    color: #fff;
+    font-size: 24px;
+    line-height: 1;
+    padding: 20px;
+  }
+}

src/index.js

@@ -105,18 +105,18 @@ export default class ImageTool {
    */
   static get tunes() {
     return [
-      {
-        name: 'withBorder',
-        icon: IconAddBorder,
-        title: 'With border',
-        toggle: true,
-      },
       {
         name: 'stretched',
         icon: IconStretch,
         title: 'Stretch image',
         toggle: true,
       },
+      {
+        name: 'withBorder',
+        icon: IconAddBorder,
+        title: 'With border',
+        toggle: true,
+      },
       {
         name: 'withBackground',
         icon: IconAddBackground,
@@ -290,7 +290,7 @@ export default class ImageTool {
        * Drag n drop file from into the Editor
        */
       files: {
-        mimeTypes: [ 'image/*' ],
+        mimeTypes: [ 'image/*', 'video/mp4' ],
       },
     };
   }

src/ui.js

@@ -152,7 +152,7 @@ export default class Ui {
     /**
      * Check for a source extension to compose element correctly: video tag for mp4, img — for others
      */
-    const tag = /\.mp4$/.test(url) ? 'VIDEO' : 'IMG';
+    const tag = /\.mp4$/i.test(url) ? 'VIDEO' : 'IMG';
 
     const attributes = {
       src: url,
@@ -208,6 +208,12 @@ export default class Ui {
       if (this.nodes.imagePreloader) {
         this.nodes.imagePreloader.style.backgroundImage = '';
       }
+
+      if (tag === 'IMG') {
+        this.nodes.imageEl.addEventListener('click', () => {
+          this.openLightbox(this.nodes.imageEl.src);
+        });
+      }
     });
 
     this.nodes.imageContainer.appendChild(this.nodes.imageEl);
@@ -249,5 +255,35 @@ export default class Ui {
   applyTune(tuneName, status) {
     this.nodes.wrapper.classList.toggle(`${this.CSS.wrapper}--${tuneName}`, status);
   }
-}
 
+  /**
+   * Open lightbox with an image
+   * 
+   * @param {string} url - image source url
+   */
+  openLightbox(url) {
+    const overflow = document.body.style.overflow;
+
+    const lightbox = make('div', 'image-lightbox');
+    const imageContainer = make('div', 'image-lightbox__item');
+    const image = make('img', 'image-lightbox__image', { src: url });
+    const closeBtn = make('button', 'image-lightbox__close');
+
+    const closeLightbox = () => {
+      document.body.style.overflow = overflow;
+      lightbox.remove();
+    };
+
+    closeBtn.innerHTML = '<svg width="20" height="20" viewBox="0 0 20 20"><line fill="none" stroke="#000" stroke-width="1.4" x1="1" y1="1" x2="19" y2="19"></line><line fill="none" stroke="#000" stroke-width="1.4" x1="19" y1="1" x2="1" y2="19"></line></svg>';
+
+    imageContainer.appendChild(image);
+    lightbox.appendChild(imageContainer);
+    lightbox.appendChild(closeBtn);
+
+    closeBtn.addEventListener('click', closeLightbox);
+    image.addEventListener('click', closeLightbox);
+
+    document.body.style.overflow = 'hidden';
+    document.body.appendChild(lightbox);
+  }
+}