feat: support image preview (#105)

* feat: support image preview * feat: replacing the viewerjs library * fix: remove useless code
sanyuan0704 · Oct 23, 2022 · f7330a8 · f7330a8 · vercel · Oct 23, 2022
1 parent b39c221
commit f7330a8
Show file tree

Hide file tree

Showing 4 changed files with 22 additions and 0 deletions.
diff --git a/package.json b/package.json
@@ -84,6 +84,7 @@
     "husky": "^8.0.1",
     "lodash-es": "^4.17.21",
     "mdast-util-mdxjs-esm": "^1.3.0",
+    "medium-zoom": "^1.0.6",
     "ora": "^6.1.2",
     "picocolors": "^1.0.0",
     "polka": "^0.5.2",

diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
diff --git a/src/theme-default/logic/sideEffects.ts b/src/theme-default/logic/sideEffects.ts
@@ -2,6 +2,7 @@ import { throttle } from 'lodash-es';
 import { APPEARANCE_KEY } from '../../shared/constants';
 import { inBrowser } from '../../shared/utils';
 import { setupCopyCodeButton } from './copyCode';
+import mediumZoom from 'medium-zoom';
 
 const DEFAULT_NAV_HEIGHT = 60;
 
@@ -221,6 +222,14 @@ function bindingMenuGroupToggle() {
   });
 }
 
+function bindingImagePreview() {
+  const imageList = document.querySelectorAll<HTMLImageElement>('img');
+  mediumZoom(imageList, {
+    margin: 100,
+    background: 'rgba(0, 0, 0, 0.7)'
+  });
+}
+
 export function setup() {
   if (!inBrowser()) {
     return;
@@ -233,4 +242,5 @@ export function setup() {
   bindingWindowScroll();
   bindingMenuGroupToggle();
   setupCopyCodeButton();
+  bindingImagePreview();
 }
diff --git a/src/theme-default/styles/base.css b/src/theme-default/styles/base.css
@@ -217,3 +217,9 @@ fieldset {
 .visually-hidden {
   visibility: hidden;
 }
+
+/* https://github.com/francoischalifour/medium-zoom#debugging */
+.medium-zoom-overlay,
+.medium-zoom-image--opened {
+  z-index: 999;
+}