From 50fa6fcb89fc575687cededc670abef7c20bbbee Mon Sep 17 00:00:00 2001
From: "qingwei.li" <cinwell.li@gmail.com>
Date: Thu, 9 Mar 2017 20:26:33 +0800
Subject: [PATCH] feat(zoom-image): add plugin

---
 build/build.js            | 13 ++++++++++---
 docs/plugins.md           |  8 ++++++++
 docs/zh-cn/plugins.md     |  8 ++++++++
 package.json              |  4 +++-
 src/plugins/zoom-image.js | 23 +++++++++++++++++++++++
 5 files changed, 52 insertions(+), 4 deletions(-)
 create mode 100644 src/plugins/zoom-image.js

diff --git a/build/build.js b/build/build.js
index d1d2d63b7..cc5dd62a7 100644
--- a/build/build.js
+++ b/build/build.js
@@ -2,6 +2,7 @@ var rollup = require('rollup')
 var buble = require('rollup-plugin-buble')
 var commonjs = require('rollup-plugin-commonjs')
 var nodeResolve = require('rollup-plugin-node-resolve')
+var string = require('rollup-plugin-string')
 var uglify = require('rollup-plugin-uglify')
 var isProd = process.argv[process.argv.length - 1] !== '--dev'
 
@@ -9,7 +10,7 @@ var build = function (opts) {
   rollup
     .rollup({
       entry: 'src/' + opts.entry,
-      plugins: [buble(), commonjs(), nodeResolve()].concat(opts.plugins || [])
+      plugins: (opts.plugins || []).concat([buble(), commonjs(), nodeResolve()])
     })
     .then(function (bundle) {
       var dest = 'lib/' + (opts.output || opts.entry)
@@ -36,14 +37,20 @@ var plugins = [
   { name: 'ga', entry: 'ga.js', moduleName: 'GA' },
   { name: 'emoji', entry: 'emoji.js', moduleName: 'Emoji' },
   { name: 'external-script', entry: 'external-script.js', moduleName: 'ExternalScript' },
-  { name: 'front-matter', entry: 'front-matter/index.js', moduleName: 'FrontMatter' }
+  { name: 'front-matter', entry: 'front-matter/index.js', moduleName: 'FrontMatter' },
+  { name: 'zoom-image', entry: 'zoom-image.js', moduleName: 'ZoomImage' }
 ]
 
 plugins.forEach(item => {
   build({
     entry: 'plugins/' + item.entry,
     output: 'plugins/' + item.name + '.js',
-    moduleName: 'D.' + item.moduleName
+    moduleName: 'D.' + item.moduleName,
+    plugins: [
+      string({
+        include: '**/*.css'
+      })
+    ]
   })
 })
 
diff --git a/docs/plugins.md b/docs/plugins.md
index 4621d34c0..8c5f8bcd6 100644
--- a/docs/plugins.md
+++ b/docs/plugins.md
@@ -82,3 +82,11 @@ If the script on the page is an external one (imports a js file via `src` attrib
 ```html
 <script src="//unpkg.com/docsify/lib/plugins/external-script.js"></script>
 ```
+
+## Zoom image
+
+Medium's Image Zoom. Based on [zoom-image](https://github.com/egoist/zoom-image).
+
+```html
+<script src="//unpkg.com/docsify/lib/plugins/zoom-image.js"></script>
+```
diff --git a/docs/zh-cn/plugins.md b/docs/zh-cn/plugins.md
index 5b35d9d70..6e19cd469 100644
--- a/docs/zh-cn/plugins.md
+++ b/docs/zh-cn/plugins.md
@@ -79,3 +79,11 @@
 ```html
 <script src="//unpkg.com/docsify/lib/plugins/external-script.js"></script>
 ```
+
+## 图片缩放 - Zoom image
+
+Medium's 风格的图片缩放插件. 基于 [zoom-image](https://github.com/egoist/zoom-image)。
+
+```html
+<script src="//unpkg.com/docsify/lib/plugins/zoom-image.js"></script>
+```
diff --git a/package.json b/package.json
index 22a94b163..029ae5bf9 100644
--- a/package.json
+++ b/package.json
@@ -40,11 +40,13 @@
     "rollup-plugin-buble": "^0.15.0",
     "rollup-plugin-commonjs": "^7.0.0",
     "rollup-plugin-node-resolve": "^2.0.0",
+    "rollup-plugin-string": "^2.0.2",
     "rollup-plugin-uglify": "^1.0.1",
     "serve-static": "^1.11.1"
   },
   "dependencies": {
     "marked": "^0.3.6",
-    "prismjs": "^1.5.1"
+    "prismjs": "^1.5.1",
+    "zoom-image": "^0.1.4"
   }
 }
diff --git a/src/plugins/zoom-image.js b/src/plugins/zoom-image.js
new file mode 100644
index 000000000..15e643502
--- /dev/null
+++ b/src/plugins/zoom-image.js
@@ -0,0 +1,23 @@
+import zoom from 'zoom-image'
+import style from 'zoom-image/css/zoom-image.css'
+
+function install (hook) {
+  const dom = Docsify.dom
+  let destroys
+
+  // add style
+  dom.appendTo(dom.head, dom.create('style', style))
+
+  hook.doneEach(_ => {
+    const images = dom.findAll('img:not(.emoji)')
+
+    if (Array.isArray(destroys) && destroys.length) {
+      destroys.forEach(o => o())
+      destroys = []
+    }
+
+    destroys = images.map(zoom)
+  })
+}
+
+$docsify.plugins = [].concat(install, $docsify.plugins)