Merge pull request #1463 from hackmdio/feature/image-lightbox

public/js/extra.js

@@ -24,6 +24,7 @@ import {
   deserializeParamAttributeFromElement
 } from './lib/markdown/utils'
 import { renderFretBoard } from './lib/renderer/fretboard/fretboard'
+import './lib/renderer/lightbox'
 
 import markdownit from 'markdown-it'
 import markdownitContainer from 'markdown-it-container'
@@ -1187,6 +1188,7 @@ md.use(markdownitContainer, 'spoiler', {
 const defaultImageRender = md.renderer.rules.image
 md.renderer.rules.image = function (tokens, idx, options, env, self) {
   tokens[idx].attrJoin('class', 'raw')
+  tokens[idx].attrJoin('class', 'md-image')
   return defaultImageRender(...arguments)
 }
 md.renderer.rules.list_item_open = function (tokens, idx, options, env, self) {

public/js/lib/renderer/lightbox/index.js

@@ -0,0 +1,212 @@
+import './lightbox.css'
+
+let images = []
+/** @type {HTMLImageElement} */
+let currentImage = null
+let currentIndexIndex = 0
+
+let hideContainer
+
+function findOrCreateLightboxContainer () {
+  const lightboxContainerSelector = '.lightbox-container'
+
+  let lightBoxContainer = document.querySelector(lightboxContainerSelector)
+  if (!lightBoxContainer) {
+    lightBoxContainer = document.createElement('div')
+    lightBoxContainer.className = 'lightbox-container'
+
+    lightBoxContainer.innerHTML = `
+      <i class="fa fa-chevron-left lightbox-control-previous" aria-hidden="true"></i>
+      <i class="fa fa-chevron-right lightbox-control-next" aria-hidden="true"></i>
+      <i class="fa fa-close lightbox-control-close" aria-hidden="true"></i>
+
+      <div class="lightbox-inner">
+      </div>
+    `
+
+    addImageZoomListener(lightBoxContainer)
+
+    hideContainer = () => {
+      lightBoxContainer.classList.remove('show')
+      document.body.classList.remove('no-scroll')
+      currentImage = null
+    }
+
+    lightBoxContainer.querySelector('.lightbox-control-previous').addEventListener('click', (e) => {
+      e.stopPropagation()
+      switchImage(-1)
+    })
+    lightBoxContainer.querySelector('.lightbox-control-next').addEventListener('click', (e) => {
+      e.stopPropagation()
+      switchImage(1)
+    })
+    lightBoxContainer.querySelector('.lightbox-control-close').addEventListener('click', (e) => {
+      e.stopPropagation()
+      hideContainer()
+    })
+    lightBoxContainer.addEventListener('click', (e) => {
+      e.stopPropagation()
+      hideContainer()
+    })
+
+    document.body.appendChild(lightBoxContainer)
+  }
+
+  return lightBoxContainer
+}
+
+function switchImage (dir) {
+  const lightBoxContainer = findOrCreateLightboxContainer()
+
+  currentIndexIndex += dir
+  if (currentIndexIndex >= images.length) {
+    currentIndexIndex = 0
+  } else if (currentIndexIndex < 0) {
+    currentIndexIndex = images.length - 1
+  }
+
+  const img = images[currentIndexIndex]
+
+  setImageInner(img, lightBoxContainer)
+}
+
+function setImageInner (img, lightBoxContainer) {
+  const src = img.getAttribute('src')
+  const alt = img.getAttribute('alt')
+
+  lightBoxContainer.querySelector('.lightbox-inner').innerHTML = `<img src="${src}" alt="${alt}" draggable="false">`
+  addImageDragListener(lightBoxContainer.querySelector('.lightbox-inner img'))
+}
+
+function onClickImage (img) {
+  const lightBoxContainer = findOrCreateLightboxContainer()
+
+  setImageInner(img, lightBoxContainer)
+
+  lightBoxContainer.classList.add('show')
+  document.body.classList.add('no-scroll')
+
+  currentImage = img
+  updateLightboxImages()
+}
+
+function updateLightboxImages () {
+  images = [...document.querySelectorAll('.markdown-body img.md-image')]
+
+  if (currentImage) {
+    currentIndexIndex = images.findIndex(image => image === currentImage)
+  }
+}
+
+function addImageZoomListener (container) {
+  container.addEventListener('wheel', function (e) {
+    // normalize scroll position as percentage
+    e.preventDefault()
+
+    /** @type {HTMLImageElement} */
+    const image = container.querySelector('img')
+
+    if (!image) {
+      return
+    }
+
+    let scale = image.getBoundingClientRect().width / image.offsetWidth
+    scale += e.deltaY * -0.01
+
+    // Restrict scale
+    scale = Math.min(Math.max(0.125, scale), 4)
+
+    var transformValue = `scale(${scale})`
+
+    image.style.WebkitTransform = transformValue
+    image.style.MozTransform = transformValue
+    image.style.OTransform = transformValue
+    image.style.transform = transformValue
+  })
+}
+
+/**
+ * @param {HTMLImageElement} image
+ */
+function addImageDragListener (image) {
+  let moved = false
+  let pos = []
+
+  const container = findOrCreateLightboxContainer()
+  const inner = container.querySelector('.lightbox-inner')
+
+  const onMouseDown = (evt) => {
+    moved = true
+
+    const { left, top } = image.getBoundingClientRect()
+
+    pos = [
+      evt.pageX - left,
+      evt.pageY - top
+    ]
+  }
+  image.addEventListener('mousedown', onMouseDown)
+  inner.addEventListener('mousedown', onMouseDown)
+
+  const onMouseMove = (evt) => {
+    if (!moved) {
+      return
+    }
+
+    image.style.left = `${evt.pageX - pos[0]}px`
+    image.style.top = `${evt.pageY - pos[1]}px`
+    image.style.position = 'absolute'
+  }
+  image.addEventListener('mousemove', onMouseMove)
+  inner.addEventListener('mousemove', onMouseMove)
+
+  const onMouseUp = () => {
+    moved = false
+    pos = []
+  }
+  image.addEventListener('mouseup', onMouseUp)
+  inner.addEventListener('mouseup', onMouseUp)
+
+  inner.addEventListener('click', (e) => {
+    e.stopPropagation()
+  })
+  image.addEventListener('click', (e) => {
+    e.stopPropagation()
+  })
+}
+
+const init = () => {
+  const markdownBody = document.querySelector('.markdown-body')
+  if (!markdownBody) {
+    return
+  }
+
+  markdownBody.addEventListener('click', function (e) {
+    const img = e.target
+    if (img.nodeName === 'IMG' && img.classList.contains('md-image')) {
+      onClickImage(img)
+      e.stopPropagation()
+    }
+  })
+
+  window.addEventListener('keydown', function (e) {
+    if (!currentImage) {
+      return
+    }
+
+    if (e.key === 'ArrowRight') {
+      switchImage(1)
+      e.stopPropagation()
+    } else if (e.key === 'ArrowLeft') {
+      switchImage(-1)
+      e.stopPropagation()
+    } else if (e.key === 'Escape') {
+      if (hideContainer) {
+        hideContainer()
+        e.stopPropagation()
+      }
+    }
+  })
+}
+
+init()

public/js/lib/renderer/lightbox/lightbox.css

@@ -0,0 +1,115 @@
+.lightbox-container.show {
+  display: flex !important;
+}
+
+.lightbox-container {
+  display: none;
+
+  position: fixed;
+  z-index: 99999;
+  background-color: rgba(255, 255, 255, 0.8);
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+
+  justify-content: center;
+  align-items: center;
+  padding: 0px 40px;
+}
+
+.night .lightbox-container {
+  background-color: rgba(47, 47, 47, 0.8);;
+}
+
+.lightbox-container .lightbox-control-previous,
+.lightbox-container .lightbox-control-next,
+.lightbox-container .lightbox-control-close {
+  position: absolute;
+  width: 40px;
+  height: 40px;
+  color: rgba(65, 65, 65, 0.8);
+  text-align: center;
+  cursor: pointer;
+  user-select: none;
+  font-size: 25px;
+  z-index: 1;
+}
+
+.night .lightbox-container .lightbox-control-previous,
+.night .lightbox-container .lightbox-control-next,
+.night .lightbox-container .lightbox-control-close {
+  color: rgba(255, 255, 255, 0.5);
+}
+
+.lightbox-container .lightbox-control-previous:hover,
+.lightbox-container .lightbox-control-next:hover,
+.lightbox-container .lightbox-control-close:hover {
+  color: rgba(130, 130, 130, 0.78);
+}
+
+.night .lightbox-container .lightbox-control-previous:hover,
+.night .lightbox-container .lightbox-control-next:hover,
+.night .lightbox-container .lightbox-control-close:hover {
+  color: rgba(255, 255, 255, 0.8);
+}
+
+.lightbox-container .lightbox-control-next,
+.lightbox-container .lightbox-control-previous {
+  top: calc(50% - 10px);
+}
+
+.lightbox-container .lightbox-control-previous {
+  left: 0;
+}
+
+.lightbox-container .lightbox-control-next {
+  right: 0;
+}
+
+.lightbox-container .lightbox-control-close {
+  top: 10px;
+  right: 10px;
+}
+
+.lightbox-container .lightbox-inner {
+  width: 100%;
+  height: 100%;
+  cursor: move;
+
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -moz-box;
+  display: -ms-flexbox;
+
+  display: flex;
+  -webkit-box-align: center;
+  -webkit-align-items: center;
+     -moz-box-align: center;
+      -ms-flex-align: center;
+          align-items: center;
+  -webkit-box-pack: center;
+  -webkit-justify-content: center;
+     -moz-box-pack: center;
+      -ms-flex-pack: center;
+          justify-content: center;
+}
+
+.lightbox-container .lightbox-inner img {
+  max-width: 100%;
+  cursor: move;
+
+  transform-origin: 0 0;
+  -moz-transform-origin: 0 0;
+  -webkit-transform-origin: 0 0;
+  -ms-transform-origin: 0 0;
+  -o-transform-origin: 0 0;
+}
+
+.markdown-body img.md-image {
+  cursor: zoom-in;
+}
+
+body.no-scroll {
+  overflow: hidden;
+}

public/js/lib/syncscroll.js

@@ -27,6 +27,11 @@ md.renderer.rules.table_open = function (tokens, idx, options, env, self) {
   addPart(tokens, idx)
   return self.renderToken(...arguments)
 }
+const defaultImageRender = md.renderer.rules.image
+md.renderer.rules.image = function (tokens, idx, options, env, self) {
+  tokens[idx].attrJoin('class', 'md-image')
+  return defaultImageRender(...arguments)
+}
 md.renderer.rules.bullet_list_open = function (tokens, idx, options, env, self) {
   addPart(tokens, idx)
   return self.renderToken(...arguments)