init

WEBuster · Oct 18, 2017 · 48c09cf · 48c09cf
commit 48c09cf
Show file tree

Hide file tree

Showing 15 changed files with 429 additions and 0 deletions.
diff --git a/.babelrc b/.babelrc
@@ -0,0 +1,8 @@
+{
+  "presets": [
+    ["env", {
+      "modules": false
+    }]
+  ],
+  "plugins": ["external-helpers", "babel-plugin-transform-object-assign"]
+}
diff --git a/.gitignore b/.gitignore
@@ -0,0 +1,3 @@
+/node_modules
+/npm-debug.log*
+/dev/juejin-image-viewer.js
diff --git a/.travis.yml b/.travis.yml
@@ -0,0 +1,6 @@
+language: node_js
+node_js:
+  - "node"
+branches:
+  only:
+    - master
diff --git a/LICENSE b/LICENSE
@@ -0,0 +1,21 @@
+The MIT License (MIT)
+
+Copyright (c) 2017 WEBuster
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.
diff --git a/README.md b/README.md
@@ -0,0 +1,57 @@
+# juejin-image-viewer
+
+[![Build Status](https://img.shields.io/travis/WEBuster/juejin-image-viewer.svg?style=flat-square)](https://travis-ci.org/WEBuster/juejin-image-viewer)
+[![Version](https://img.shields.io/npm/v/juejin-image-viewer.svg?style=flat-square)](https://www.npmjs.com/package/juejin-image-viewer)
+[![License](https://img.shields.io/npm/l/juejin-image-viewer.svg?style=flat-square)](LICENSE)
+
+[掘金](https://juejin.im) 图片查看插件。
+
+## 安装
+
+```bash
+npm i -S juejin-image-viewer
+```
+
+## 使用
+
+### 初始化
+
+#### 模块化环境
+
+```js
+import JuejinImageViewer from 'juejin-image-viewer'
+
+const imageViewer = new JuejinImageViewer(...)
+```
+
+#### 浏览器直引
+
+```html
+<script src="path/to/juejin-image-viewer.min.js"></script>
+```
+
+```js
+var imageViewer = new JuejinImageViewer(...)
+```
+
+### 构造参数
+
+```js
+new JuejinImageViewer(container || containerList || selector, {
+  urlHandler: url => url, // 一般用于去除缩略图参数等
+  urlAttribute: 'src',  // 图片 URL 从哪个属性上获取
+  eventName: 'click',
+  cursor: 'zoom-in',
+  backgroundColor: '#fff',
+  transitionDuration: 200,
+  containerClassName: 'juejin-image-viewer__container',
+  boxClassName: 'juejin-image-viewer__box',
+  imageClassName: 'juejin-image-viewer__image'
+})
+```
+
+### 方法
+
+```js
+imageViewer.destroy() // 销毁
+```
diff --git a/dev/image.png b/dev/image.png
diff --git a/dev/index.html b/dev/index.html
@@ -0,0 +1,14 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <title>Juejin Image Viewer</title>
+    <link rel="stylesheet" href="style.css">
+  </head>
+  <body>
+    <img class="image" src="image.png?thumb=1">
+    <img class="image" src="https://user-gold-cdn.xitu.io/2017/8/2/ae0b8c5d702987dd1b702cdbc286007c?imageView2/2/w/960/h/200/q/85/format/jpg/interlace/1">
+    <img class="image" src="https://user-gold-cdn.xitu.io/2017/8/2/ae0b8c5d702987dd1b702cdbc286007c?imageView2/1/w/960/h/200/q/85/format/jpg/interlace/1">
+    <script src="juejin-image-viewer.js"></script>
+    <script src="main.js"></script>
+  </body>
+</html>
diff --git a/dev/main.js b/dev/main.js
@@ -0,0 +1,5 @@
+var imageViewer = new JuejinImageViewer(document.body, {
+  urlHandler: url => url.split('?')[0]
+})
+
+// imageViewer.destroy()
diff --git a/dev/style.css b/dev/style.css
@@ -0,0 +1,13 @@
+html {
+  font-size: 12px;
+}
+
+body {
+  padding-bottom: 100rem;
+}
+
+.image {
+  display: block;
+  margin-bottom: 1rem;
+  max-width: 20rem;
+}
diff --git a/dist/juejin-image-viewer.min.js b/dist/juejin-image-viewer.min.js
diff --git a/package.json b/package.json
@@ -0,0 +1,24 @@
+{
+  "name": "juejin-image-viewer",
+  "version": "1.0.0",
+  "description": "juejin image viewer",
+  "main": "dist/juejin-image-viewer.min.js",
+  "scripts": {
+    "dev": "rollup -w -c rollup.config.dev.js",
+    "build": "rollup -c rollup.config.build.js",
+    "test": "echo 42"
+  },
+  "author": "WEBuster <[email protected]>",
+  "license": "MIT",
+  "devDependencies": {
+    "babel-core": "^6.26.0",
+    "babel-plugin-external-helpers": "^6.22.0",
+    "babel-plugin-transform-object-assign": "^6.22.0",
+    "babel-preset-env": "^1.6.0",
+    "rollup": "^0.50.0",
+    "rollup-plugin-babel": "^3.0.2",
+    "rollup-plugin-license": "^0.5.0",
+    "rollup-plugin-node-resolve": "^3.0.0",
+    "rollup-plugin-uglify": "^2.0.1"
+  }
+}
diff --git a/rollup.config.build.js b/rollup.config.build.js
@@ -0,0 +1,30 @@
+import resolve from 'rollup-plugin-node-resolve'
+import babel from 'rollup-plugin-babel'
+import uglify from 'rollup-plugin-uglify'
+import license from 'rollup-plugin-license'
+import manifest from './package.json'
+
+const banner = [
+  '/**',
+  ` * ${manifest.name} v${manifest.version}`,
+  ` * (c) ${new Date().getFullYear()} ${manifest.author}`,
+  ` * @license ${manifest.license}`,
+  ' */'
+].join('\n')
+
+export default {
+  input: 'src/juejin-image-viewer.js',
+  output: {
+    format: 'umd',
+    name: 'JuejinImageViewer',
+    file: 'dist/juejin-image-viewer.min.js'
+  },
+  plugins: [
+    resolve(),
+    babel({
+      exclude: 'node_modules/**'
+    }),
+    uglify(),
+    license({ banner })
+  ]
+}
diff --git a/rollup.config.dev.js b/rollup.config.dev.js
@@ -0,0 +1,17 @@
+import resolve from 'rollup-plugin-node-resolve'
+import babel from 'rollup-plugin-babel'
+
+export default {
+  input: 'src/juejin-image-viewer.js',
+  output: {
+    format: 'umd',
+    name: 'JuejinImageViewer',
+    file: 'dev/juejin-image-viewer.js'
+  },
+  plugins: [
+    resolve(),
+    babel({
+      exclude: 'node_modules/**'
+    })
+  ]
+}