From bd5b86272ca05925485f840223735998f655d678 Mon Sep 17 00:00:00 2001
From: Benny Guo <bennyxguo6@gmail.com>
Date: Wed, 16 Aug 2023 03:44:28 +0800
Subject: [PATCH] feat: add image enlarge feature

---
 package.json                       |  1 +
 pnpm-lock.yaml                     | 12 +++++++++++
 src/App.vue                        | 22 ++++++++++++++++++-
 src/components/PageContent.vue     |  3 +++
 src/hooks/useLightBox.ts           | 26 +++++++++++++++++++++++
 src/shims-vue.d.ts                 |  6 ++++++
 src/stores/lightbox.ts             | 34 ++++++++++++++++++++++++++++++
 src/styles/components/article.scss |  3 +++
 src/views/Post.vue                 |  3 +++
 9 files changed, 109 insertions(+), 1 deletion(-)
 create mode 100644 src/hooks/useLightBox.ts
 create mode 100644 src/stores/lightbox.ts

diff --git a/package.json b/package.json
index e0ac253a..ce078238 100644
--- a/package.json
+++ b/package.json
@@ -72,6 +72,7 @@
     "vite": "^4.3.9",
     "vite-plugin-html-transformer": "^4.0.0",
     "vite-plugin-svg-icons": "^2.0.1",
+    "vue-easy-lightbox": "^1.16.0",
     "vue-jest": "^3.0.7"
   }
 }
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index c1eab385..02232c0d 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -127,6 +127,9 @@ devDependencies:
   vite-plugin-svg-icons:
     specifier: ^2.0.1
     version: 2.0.1(vite@4.3.9)
+  vue-easy-lightbox:
+    specifier: ^1.16.0
+    version: 1.16.0(vue@3.3.4)
   vue-jest:
     specifier: ^3.0.7
     version: 3.0.7(babel-core@6.26.3)(vue-template-compiler@2.7.14)(vue@3.3.4)
@@ -7983,6 +7986,15 @@ packages:
       vue: 3.3.4
     dev: false
 
+  /vue-easy-lightbox@1.16.0(vue@3.3.4):
+    resolution: {integrity: sha512-9ckBIi56kTNkfbxioTBLKR3xnFjmkIs4SOvePn6XUciR+Dzuav0tgNjqDHkfsoo3nxIpUmfpQAT0YDl9TpJ5jA==}
+    engines: {node: '>=14.18.3'}
+    peerDependencies:
+      vue: ^3.0.0
+    dependencies:
+      vue: 3.3.4
+    dev: true
+
   /vue-eslint-parser@9.3.1(eslint@8.0.0):
     resolution: {integrity: sha512-Clr85iD2XFZ3lJ52/ppmUDG/spxQu6+MAeHXjjyI4I1NUYZ9xmenQp4N0oaHJhrA8OOxltCVxMRfANGa70vU0g==}
     engines: {node: ^14.17.0 || >=16.0.0}
diff --git a/src/App.vue b/src/App.vue
index b80d01e7..8e44f624 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -32,6 +32,16 @@
   <teleport to="head">
     <title>{{ title }}</title>
   </teleport>
+
+  <VueEasyLightbox
+    :visible="lightBoxVisible"
+    :imgs="lightBoxImages"
+    :index="lightBoxIndex"
+    :moveDisabled="true"
+    :rotateDisabled="true"
+    :scrollDisabled="false"
+    @hide="onHideLightBox"
+  ></VueEasyLightbox>
 </template>
 
 <script lang="ts">
@@ -46,6 +56,7 @@ import {
 } from 'vue'
 import { useAppStore } from '@/stores/app'
 import { useCommonStore } from '@/stores/common'
+import { useLightBoxStore } from '@/stores/lightbox'
 import { useMetaStore } from '@/stores/meta'
 import { useSearchStore } from './stores/search'
 import HeaderMain from '@/components/Header/src/Header.vue'
@@ -55,6 +66,7 @@ import MobileMenu from '@/components/MobileMenu.vue'
 import Dia from '@/components/Dia.vue'
 import defaultCover from '@/assets/default-cover.jpg'
 import { useI18n } from 'vue-i18n'
+import VueEasyLightbox from 'vue-easy-lightbox'
 
 export default defineComponent({
   name: 'App',
@@ -63,10 +75,12 @@ export default defineComponent({
     Footer,
     Navigator,
     MobileMenu,
-    Dia
+    Dia,
+    VueEasyLightbox
   },
   setup() {
     const appStore = useAppStore()
+    const lightBoxStore = useLightBoxStore()
     const commonStore = useCommonStore()
     const metaStore = useMetaStore()
     const searchStore = useSearchStore()
@@ -128,6 +142,8 @@ export default defineComponent({
       }
     }
 
+    const onHideLightBox = () => lightBoxStore.hideLightBox()
+
     /** Adding copy listner */
     const initialCopyrightScript = () => {
       document.addEventListener('copy', copyEventHandler)
@@ -220,9 +236,13 @@ export default defineComponent({
           --main-gradient: ${appStore.themeConfig.theme.header_gradient_css};
         `
       }),
+      lightBoxVisible: computed(() => lightBoxStore.visible),
+      lightBoxIndex: computed(() => lightBoxStore.index),
+      lightBoxImages: computed(() => lightBoxStore.images),
       appWrapperClass,
       loadingBarClass,
       handleOpenModal,
+      onHideLightBox,
       t
     }
   }
diff --git a/src/components/PageContent.vue b/src/components/PageContent.vue
index f932f2af..55f76268 100644
--- a/src/components/PageContent.vue
+++ b/src/components/PageContent.vue
@@ -92,6 +92,7 @@ import { useRoute } from 'vue-router'
 import PostStats from './Post/PostStats.vue'
 import { useAppStore } from '@/stores/app'
 import useCommentPlugin from '@/hooks/useCommentPlugin'
+import useLightBox from '@/hooks/useLightBox'
 
 interface PostStatsExpose extends Ref<InstanceType<typeof PostStats>> {
   getCommentCount(): void
@@ -122,6 +123,7 @@ export default defineComponent({
     const title = toRefs(props).title
     const postStatsRef = ref<PostStatsExpose>()
     const { enabledCommentPlugin } = useCommentPlugin()
+    const { initializeLightBox } = useLightBox()
 
     watch(
       () => post.value.covers,
@@ -135,6 +137,7 @@ export default defineComponent({
       async value => {
         if (value) {
           await nextTick()
+          initializeLightBox()
           postStatsRef.value?.getCommentCount()
           postStatsRef.value?.getPostView()
         }
diff --git a/src/hooks/useLightBox.ts b/src/hooks/useLightBox.ts
new file mode 100644
index 00000000..7fefc763
--- /dev/null
+++ b/src/hooks/useLightBox.ts
@@ -0,0 +1,26 @@
+import { useLightBoxStore } from '@/stores/lightbox'
+
+export default function useLightBox() {
+  const lightBoxStore = useLightBoxStore()
+
+  const showImage = (ele: HTMLImageElement) => {
+    lightBoxStore.openImage(ele)
+  }
+
+  const initializeLightBox = () => {
+    const postHtmlEle = document.querySelector('.post-html')
+
+    if (!postHtmlEle) return
+
+    let imageNodes = postHtmlEle.querySelectorAll('img')
+    for (let i = 0; i < imageNodes.length; i++) {
+      console.log(imageNodes[i].src)
+      lightBoxStore.addImage(imageNodes[i].src)
+      imageNodes[i].addEventListener('click', function () {
+        showImage(this)
+      })
+    }
+  }
+
+  return { initializeLightBox }
+}
diff --git a/src/shims-vue.d.ts b/src/shims-vue.d.ts
index 3804a43e..e3b39ca6 100644
--- a/src/shims-vue.d.ts
+++ b/src/shims-vue.d.ts
@@ -4,3 +4,9 @@ declare module '*.vue' {
   const component: DefineComponent<{}, {}, any>
   export default component
 }
+
+declare module 'vue-easy-lightbox/dist/external-css/vue-easy-lightbox.esm.min.js' {
+  import VueEasyLightbox from 'vue-easy-lightbox'
+  export * from 'vue-easy-lightbox'
+  export default VueEasyLightbox
+}
diff --git a/src/stores/lightbox.ts b/src/stores/lightbox.ts
new file mode 100644
index 00000000..2b6bab47
--- /dev/null
+++ b/src/stores/lightbox.ts
@@ -0,0 +1,34 @@
+import { defineStore } from 'pinia'
+
+interface State {
+  images: string[]
+  index: number
+  visible: boolean
+}
+
+export const useLightBoxStore = defineStore({
+  // id is the name of the store
+  // it is used in devtools and allows restoring state
+  id: 'lightBoxStore',
+  state: (): State => ({
+    images: [],
+    index: 0,
+    visible: false
+  }),
+  getters: {},
+  actions: {
+    addImage(image: string) {
+      this.images.push(image)
+    },
+    setImages(images: string[]): void {
+      this.images = images
+    },
+    openImage(imageEle: HTMLImageElement) {
+      this.index = this.images.indexOf(imageEle.src)
+      this.visible = true
+    },
+    hideLightBox() {
+      this.visible = false
+    }
+  }
+})
diff --git a/src/styles/components/article.scss b/src/styles/components/article.scss
index f9ee18b6..15d356dd 100644
--- a/src/styles/components/article.scss
+++ b/src/styles/components/article.scss
@@ -157,6 +157,9 @@
 
 .post-html {
   @apply bg-ob-deep-800 p-4 lg:p-14 rounded-2xl shadow-xl mb-8 lg:mb-0;
+  img {
+    @apply cursor-zoom-in hover:opacity-60 transition-all;
+  }
   h1,
   h2,
   h3,
diff --git a/src/views/Post.vue b/src/views/Post.vue
index 586e6218..110297c6 100644
--- a/src/views/Post.vue
+++ b/src/views/Post.vue
@@ -188,6 +188,7 @@ import { useCommonStore } from '@/stores/common'
 import SvgIcon, { SvgTypes } from '@/components/SvgIcon/index.vue'
 import PostStats from '@/components/Post/PostStats.vue'
 import useCommentPlugin from '@/hooks/useCommentPlugin'
+import useLightBox from '@/hooks/useLightBox'
 
 interface PostStatsExpose extends Ref<InstanceType<typeof PostStats>> {
   getCommentCount(): void
@@ -219,6 +220,7 @@ export default defineComponent({
     const loading = ref(true)
     const postStatsRef = ref<PostStatsExpose>()
     const { enabledCommentPlugin } = useCommentPlugin()
+    const { initializeLightBox } = useLightBox()
 
     const fetchData = async () => {
       loading.value = true
@@ -245,6 +247,7 @@ export default defineComponent({
         )
       }
       await nextTick()
+      initializeLightBox()
       postStatsRef.value?.getCommentCount()
       postStatsRef.value?.getPostView()
       Prism.highlightAll()