fix: zoom image plugin issue, fixed #187 (#300)

Author: QingWei-Li

docs/plugins.md

@@ -97,6 +97,13 @@ Medium's Image Zoom. Based on [zoom-image](https://github.com/egoist/zoom-image)
 <script src="//unpkg.com/docsify/lib/plugins/zoom-image.min.js"></script>
 ```
 
+Exclude the special image
+
+```markdown
+![](image.png ':no-zoom')
+```
+
+
 ## Edit on github
 
 Add `Edit on github` button on every pages. provided by 3rd party, check [document](https://github.com/njleonzhang/docsify-edit-on-github)

package-lock.json

@@ -31,10 +31,10 @@
   },
   "dependencies": {
     "marked": "^0.3.6",
+    "medium-zoom": "^0.2.0",
     "prismjs": "^1.6.0",
     "tinydate": "^1.0.0",
-    "tweezer.js": "^1.4.0",
-    "zoom-image": "^0.1.4"
+    "tweezer.js": "^1.4.0"
   },
   "devDependencies": {
     "conventional-changelog-cli": "^1.3.2",

package.json

@@ -8,6 +8,20 @@ import { isAbsolutePath, getPath } from '../router/util'
 import { isFn, merge, cached } from '../util/core'
 
 const cachedLinks = {}
+function getAndRemoveConfig (str = '') {
+  const config = {}
+
+  if (str) {
+    str = str
+      .replace(/:([\w-]+)=?([\w-]+)?/g, (m, key, value) => {
+        config[key] = value || true
+        return ''
+      })
+      .trim()
+  }
+
+  return { str, config }
+}
 
 export class Compiler {
   constructor (config, router) {
@@ -102,16 +116,9 @@ export class Compiler {
     }
     origin.link = renderer.link = function (href, title = '', text) {
       let attrs = ''
-      const config = {}
 
-      if (title) {
-        title = title
-          .replace(/:(\w+)=?(\w+)?/g, (m, key, value) => {
-            config[key] = value || true
-            return ''
-          })
-          .trim()
-      }
+      const { str, config } = getAndRemoveConfig(title)
+      title = str
 
       if (
         !/:|(\/{2})/.test(href) &&
@@ -133,9 +140,10 @@ export class Compiler {
       }
 
       if (title) {
-        title = ` title="${title}"`
+        attrs += ` title="${title}"`
       }
-      return `<a href="${href}"${title || ''}${attrs}>${text}</a>`
+
+      return `<a href="${href}"${attrs}>${text}</a>`
     }
     origin.paragraph = renderer.paragraph = function (text) {
       if (/^!&gt;/.test(text)) {
@@ -147,13 +155,24 @@ export class Compiler {
     }
     origin.image = renderer.image = function (href, title, text) {
       let url = href
-      const titleHTML = title ? ` title="${title}"` : ''
+      let attrs = ''
+
+      const { str, config } = getAndRemoveConfig(title)
+      title = str
+
+      if (config['no-zoom']) {
+        attrs += ' data-no-zoom'
+      }
+
+      if (title) {
+        attrs += ` title="${title}"`
+      }
 
       if (!isAbsolutePath(href)) {
         url = getPath(contentBase, href)
       }
 
-      return `<img src="${url}" data-origin="${href}" alt="${text}"${titleHTML}>`
+      return `<img src="${url}"data-origin="${href}" alt="${text}"${attrs}>`
     }
 
     renderer.origin = origin

src/core/render/compiler.js

@@ -1,22 +1,14 @@
-import zoom from 'zoom-image'
-import style from 'zoom-image/css/zoom-image.css'
+import mediumZoom from 'medium-zoom'
 
 function install (hook) {
-  const dom = Docsify.dom
-  let destroys
-
-  // add style
-  dom.appendTo(dom.head, dom.create('style', style))
+  let zoom
 
   hook.doneEach(_ => {
-    const images = dom.findAll('img:not(.emoji)')
-
-    if (Array.isArray(destroys) && destroys.length) {
-      destroys.forEach(o => o())
-      destroys = []
+    if (zoom) {
+      zoom.detach()
     }
 
-    destroys = images.map(zoom)
+    zoom = mediumZoom('img:not(.emoji):not([data-no-zoom])')
   })
 }
 

src/plugins/zoom-image.js

@@ -212,6 +212,7 @@ main {
   display: block;
   position: relative;
   size: 100vw 100%;
+  z-index: 0;
 }
 
 .anchor {
@@ -450,10 +451,7 @@ body.close {
 @media print {
   .github-corner,
   .sidebar-toggle,
-  .sidebar {
-    display: none;
-  }
-
+  .sidebar,
   .app-nav {
     display: none;
   }