feat(zoom-image): add plugin

build/build.js

@@ -2,14 +2,15 @@ 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'
 
 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'
+      })
+    ]
   })
 })
 

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>
+```

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>
+```

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"
   }
 }

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)