Merge pull request #2809 from roottool/zoom-in-and-out-image#1448

Zoom in and out image #1448
BoostIO · Jan 28, 2019 · 950d31a · 950d31a
2 parents 543c31c + 5e87ec2
commit 950d31a
Show file tree

Hide file tree

Showing 2 changed files with 76 additions and 0 deletions.
diff --git a/browser/components/MarkdownPreview.js b/browser/components/MarkdownPreview.js
@@ -832,6 +832,81 @@ export default class MarkdownPreview extends React.Component {
         )
       }
     )
+
+    const markdownPreviewIframe = document.querySelector('.MarkdownPreview')
+    const rect = markdownPreviewIframe.getBoundingClientRect()
+    const imgList = markdownPreviewIframe.contentWindow.document.body.querySelectorAll('img')
+    for (const img of imgList) {
+      img.onclick = () => {
+        const widthMagnification = document.body.clientWidth / img.width
+        const heightMagnification = document.body.clientHeight / img.height
+        const baseOnWidth = widthMagnification < heightMagnification
+        const magnification = baseOnWidth ? widthMagnification : heightMagnification
+
+        const zoomImgWidth = img.width * magnification
+        const zoomImgHeight = img.height * magnification
+        const zoomImgTop = (document.body.clientHeight - zoomImgHeight) / 2
+        const zoomImgLeft = (document.body.clientWidth - zoomImgWidth) / 2
+        const originalImgTop = img.y + rect.top
+        const originalImgLeft = img.x + rect.left
+        const originalImgRect = {
+          top: `${originalImgTop}px`,
+          left: `${originalImgLeft}px`,
+          width: `${img.width}px`,
+          height: `${img.height}px`
+        }
+        const zoomInImgRect = {
+          top: `${baseOnWidth ? zoomImgTop : 0}px`,
+          left: `${baseOnWidth ? 0 : zoomImgLeft}px`,
+          width: `${zoomImgWidth}px`,
+          height: `${zoomImgHeight}px`
+        }
+        const animationSpeed = 300
+
+        const zoomImg = document.createElement('img')
+        zoomImg.src = img.src
+        zoomImg.style = `
+          position: absolute;
+          top: ${baseOnWidth ? zoomImgTop : 0}px;
+          left: ${baseOnWidth ? 0 : zoomImgLeft}px;
+          width: ${zoomImgWidth};
+          height: ${zoomImgHeight}px;
+          `
+        zoomImg.animate([
+          originalImgRect,
+          zoomInImgRect
+        ], animationSpeed)
+
+        const overlay = document.createElement('div')
+        overlay.style = `
+          background-color: rgba(0,0,0,0.5);
+          cursor: zoom-out;
+          position: absolute;
+          top: 0;
+          left: 0;
+          width: 100%;
+          height: ${document.body.clientHeight}px;
+          z-index: 100;
+        `
+        overlay.onclick = () => {
+          zoomImg.style = `
+            position: absolute;
+            top: ${originalImgTop}px;
+            left: ${originalImgLeft}px;
+            width: ${img.width}px;
+            height: ${img.height}px;
+            `
+          const zoomOutImgAnimation = zoomImg.animate([
+            zoomInImgRect,
+            originalImgRect
+          ], animationSpeed)
+          zoomOutImgAnimation.onfinish = () => overlay.remove()
+        }
+
+        overlay.appendChild(zoomImg)
+        document.body.appendChild(overlay)
+      }
+    }
   }
 
   focus () {

diff --git a/browser/components/markdown.styl b/browser/components/markdown.styl
@@ -165,6 +165,7 @@ p
   white-space pre-line
   word-wrap break-word
 img
+  cursor zoom-in
   max-width 100%
 strong, b
   font-weight bold