Implement simple lightbox

Signed-off-by: Yukai Huang <yukaihuangtw@gmail.com>

public/js/extra.js

@@ -21,6 +21,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'

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

@@ -0,0 +1,101 @@
+import './lightbox.css'
+
+let images = []
+let currentImage = null
+let currentIndexIndex = 0
+
+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>
+    `
+
+    const hideContainer = (e) => {
+      e.stopPropagation()
+      lightBoxContainer.classList.remove('show')
+    }
+
+    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', hideContainer)
+    lightBoxContainer.addEventListener('click', 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}">`
+}
+
+function onClickImage (img) {
+  const lightBoxContainer = findOrCreateLightboxContainer()
+
+  setImageInner(img, lightBoxContainer)
+
+  lightBoxContainer.classList.add('show')
+
+  currentImage = img
+  updateLightboxImages()
+}
+
+function updateLightboxImages () {
+  images = [...document.querySelectorAll('.markdown-body img:not(.emoji)')]
+
+  if (currentImage) {
+    currentIndexIndex = images.findIndex(image => image === currentImage)
+  }
+}
+
+const init = () => {
+  const markdownBody = document.querySelector('.markdown-body')
+  if (!markdownBody) {
+    return
+  }
+
+  markdownBody.addEventListener('click', function (e) {
+    if (e.target.nodeName === 'IMG' && !e.target.classList.contains('emoji')) {
+      onClickImage(e.target)
+      e.stopPropagation()
+    }
+  })
+}
+
+init()

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

@@ -0,0 +1,64 @@
+.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;
+}
+
+.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;
+}
+
+.lightbox-container .lightbox-control-previous:hover,
+.lightbox-container .lightbox-control-next:hover,
+.lightbox-container .lightbox-control-close:hover {
+  cursor: rgba(130, 130, 130, 0.78);
+}
+
+.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 img {
+  max-width: 100%;
+}
+
+.markdown-body img:not(.emoji) {
+  cursor: zoom-in;
+}