重构初步完成

Author: KyLeoHC

demo/index.html

@@ -31,8 +31,11 @@ <h1>Hello, this is an image viewer.</h1>
 </div>
 <script src="build/imageViewer.js"></script>
 <script type="text/javascript">
+    var images1 = ['images/2.jpg'];
+    var images2 = ['images/2.jpg', 'images/3.jpg'];
+    var images3 = ['images/2.jpg', 'images/3.jpg', 'images/4.jpg'];
     var images = ['images/2.jpg', 'images/3.jpg', 'images/4.jpg', 'images/5.jpg', 'images/6.jpg', 'images/7.jpg', 'images/8.jpg'];
-    var imageViewer = new ImageViewer(images, {
+    var imageViewer = new ImageViewer(images3, {
         container: 'body',
         enableScale: true,
         startIndex: 0,
@@ -57,15 +60,15 @@ <h1>Hello, this is an image viewer.</h1>
         swipeLastLeft: function (imageViewer, distance) {
             console.log('swipeLastLeft', distance);
             if (distance > 50) {
-                //imageViewer.setImageOption(['images/4.jpg']);
-                //return true;
+                imageViewer.setImageOption(['images/4.jpg']);
+                return true;
             }
         },
         swipeFirstRight: function (imageViewer, distance) {
             console.log('swipeFirstRight', distance);
             if (distance > 30) {
-                //imageViewer.setImageOption(['images/5.jpg', 'images/6.jpg', 'images/7.jpg']);
-                //return true;
+                imageViewer.setImageOption(['images/5.jpg', 'images/6.jpg', 'images/7.jpg']);
+                return true;
             }
         }
     });

package.json

@@ -2,7 +2,7 @@
   "name": "image-viewer-gallery",
   "version": "0.5.4",
   "scripts": {
-    "dev": "webpack-dev-server --inline --hot",
+    "dev": "webpack-dev-server --config webpack.config.dev.js --inline --hot",
     "dist": "webpack --config webpack.config.dist.js"
   },
   "description": "A lib for image display.",
@@ -21,12 +21,14 @@
   },
   "homepage": "https://github.com/KyLeoHC/ImageViewer#readme",
   "devDependencies": {
+    "autoprefixer": "^6.7.0",
     "babel-core": "^6.17.0",
     "babel-loader": "^6.2.5",
     "babel-plugin-transform-runtime": "^6.15.0",
     "babel-preset-es2015": "^6.16.0",
     "babel-runtime": "^6.11.6",
     "css-loader": "^0.25.0",
+    "postcss-loader": "^1.2.2",
     "style-loader": "^0.13.1",
     "webpack": "^1.13.2",
     "webpack-dev-server": "^1.16.2"

src/core/imageViewer.js

@@ -39,20 +39,16 @@ class ImageViewer {
         this.translateX = 0;
     }
 
-    _generateViewerDom() {
-        return Array.prototype.slice.call(this.images, 0, 3).map(function () {
-            return `<div class="viewer"><div class="panel"><img></div></div>`
-        }).join();
-    }
-
     _create() {
         this.el = query('.image-viewer')[0];
         this.destroy();
         let imageViewerTemplate =
             `<div class="image-viewer">
                 <div class="image-header"></div>
                 <div class="image-body">
-                    ${this._generateViewerDom()}
+                    <div class="viewer"><div class="panel"><img></div></div>
+                    <div class="viewer"><div class="panel"><img></div></div>
+                    <div class="viewer"><div class="panel"><img></div></div>
                 </div>
                 <div class="image-footer"></div>
             </div>`;
@@ -82,7 +78,7 @@ class ImageViewer {
         this.viewers = [];
         for (let i = 0, length = this.itemList.length, item; i < length; i++) {
             item = this.itemList[i];
-            this.viewers.push(new Viewer(this, item, this.width, this.height));
+            this.viewers.push(new Viewer(this, item, this.width, this.height, i));
         }
         this.translateX = 0;
         this.swipeInByIndex(this.currentIndex);
@@ -202,6 +198,9 @@ class ImageViewer {
         return this.images[index] || '';
     }
 
+    /**
+     * 重置当前图片的缩放
+     */
     reset() {
         this.viewers[1].init(this.displayIndex, true, null, false);
         setTimeout(() => {
@@ -272,11 +271,18 @@ class ImageViewer {
         }
     }
 
+    /**
+     * 根据给定的下标移动到指定图片处
+     * @param index 数组下标，从0开始
+     */
     swipeInByIndex(index) {
         if (!isNaN(index) && -1 < index && index < this.imagesLength) {
             this.currentIndex = index;
-            setTranslateStyle(this.bodyEl, this.translateX, 0);
+            setTranslateStyle(this.bodyEl, 0, 0);
 
+            this.viewers = this.viewers.sort(function (a, b) {
+                return a.index < b.index;
+            });
             this.viewers[0].init(-1, true, null, true, this._getPrevImage());
             this.viewers[1].init(0, true, null, true, this._getCurrentImage());
             this.viewers[2].init(1, true, null, true, this._getNextImage());
@@ -294,10 +300,6 @@ class ImageViewer {
         this.images = images;
         this.imagesLength = images.length;
         this.currentIndex = startIndex;
-
-        let listEl = query('.image-body', this.el)[0];
-        listEl.innerHTML = this._generateViewerDom();
-        this.itemList = listEl.children;
         this._init();
     }
 

src/core/viewer.js

@@ -13,13 +13,14 @@ import Event from '../common/event';
 import Hammer from '../lib/hammer';
 
 class Viewer {
-    constructor(imageViewer, el, width, height) {
+    constructor(imageViewer, el, width, height, index) {
         this.event = new Event(false);
         this.imageViewer = imageViewer;
         this.el = el;             //.viewer类
         this.panelEl = el.firstElementChild;//.panel类
         this.imageEl = query('img', this.el)[0];
         this.src = '';
+        this.index = index;        //viewer排序用，记录原始的数组位置
         this.displayIndex = 0;
         this.width = width;
         this.height = height;
@@ -80,7 +81,7 @@ class Viewer {
             _initImage();
         }
         return this;
-    };
+    }
 
     _bindEvent() {
         let mc = new Hammer.Manager(this.panelEl);
@@ -115,7 +116,7 @@ class Viewer {
         this.imageEl.addEventListener('load', () => {
             this.event.emit(this.EVENT_NAME);
         }, false);
-    };
+    }
 
     _pinch(scale) {
         let currentScale = scale + this.scale;
@@ -124,7 +125,7 @@ class Viewer {
             setScaleAndTranslateStyle(this.panelEl, this.currentScale, this.translatePanelX, this.translatePanelY);
         }
         return this;
-    };
+    }
 
     _pinchEnd(scale) {
         this.scale = isNaN(scale) ? this.currentScale : scale;
@@ -141,7 +142,7 @@ class Viewer {
             lock.releaseLock(LOCK_NAME);
         }
         return this;
-    };
+    }
 
     calculate(a, b) {
         return a > 0 ? (a - b) : (a + b);
@@ -168,7 +169,7 @@ class Viewer {
         }
 
         return this;
-    };
+    }
 
     _translatePanelEnd() {
         if (this.realWidth <= this.width && this.realHeight <= this.height)return this;
@@ -199,23 +200,21 @@ class Viewer {
         }
         this.needResetX = this.needResetY = false;
         return this;
-    };
+    }
 
     isScale() {
         return Math.abs(this.scale - 1) > 0.01;
-    };
+    }
 
-    addAnimation(needAnimation) {
-        if (needAnimation || needAnimation === undefined) {
-            this.el.classList.add(ITEM_ANIMATION_CLASS);
-        }
-        return this;
-    };
+    addAnimation() {
+        this.panelEl.classList.add(ITEM_ANIMATION_CLASS);
+        this.el.classList.add(ITEM_ANIMATION_CLASS);
+    }
 
     removeAnimation() {
+        this.panelEl.classList.remove(ITEM_ANIMATION_CLASS);
         this.el.classList.remove(ITEM_ANIMATION_CLASS);
-        return this;
-    };
+    }
 }
 
 export default Viewer;

src/css/index.css

@@ -1,7 +1,4 @@
 .viewer-animation {
-    -webkit-transition: transform .4s; /* Safari 和 Chrome */
-    -moz-transition: transform .4s; /* Firefox 4 */
-    -o-transition: transform .4s; /* Opera */
     transition: transform .4s;
 }
 
@@ -14,9 +11,8 @@
     background-color: black;
     z-index: 10000;
     font-size: 0;
-    -webkit-transform: translate3d(0, 0, 0);
-    -moz-transform: translate3d(0, 0, 0);
     transform: translate3d(0, 0, 0);
+    backface-visibility: hidden;
     overflow: hidden;
 }
 
@@ -26,9 +22,8 @@
     top: 50%;
     width: 100%;
     text-align: center;
-    -webkit-transform: translate3d(0, -50%, 0);
-    -moz-transform: translate3d(0, -50%, 0);
     transform: translate3d(0, -50%, 0);
+    backface-visibility: hidden;
 }
 
 .image-viewer .image-header {

webpack.config.js webpack.config.base.jswebpack.config.js renamed to webpack.config.base.js

@@ -1,14 +1,7 @@
-var webpack = require('webpack');
-var path = require('path');
 var config = {
     entry: {
         imageViewer: './src/index'
     },
-    output: {
-        path: path.resolve(__dirname, 'build'),
-        publicPath: '/build/',
-        filename: '[name].js'
-    },
     module: {
         noParse: /es6-promise\.js$/,
         loaders: [
@@ -17,18 +10,18 @@ var config = {
                 exclude: /node_modules/,
                 loader: 'babel'
             },
-            {test: /\.css$/, loader: 'style-loader!css-loader'}
+            {test: /\.css$/, loader: 'style-loader!css-loader!postcss-loader'}
         ]
     },
     babel: {
         presets: ['es2015'],
         plugins: ['transform-runtime']
     },
     plugins: [],
-    devServer: {
-        contentBase: './demo',
-        host: '0.0.0.0',
-        port: '8084'
+    postcss: () => {
+        return [
+            require('autoprefixer')
+        ];
     }
 };
 

webpack.config.dev.js

@@ -0,0 +1,16 @@
+var webpack = require('webpack');
+var path = require('path');
+var baseConfig = require('./webpack.config.base');
+
+baseConfig.output = {
+    path: path.resolve(__dirname, 'build'),
+    publicPath: '/build/',
+    filename: '[name].js'
+};
+baseConfig.devServer = {
+    contentBase: './demo',
+    host: '0.0.0.0',
+    port: '8084'
+};
+
+module.exports = baseConfig;

webpack.config.dist.js

@@ -1,35 +1,17 @@
 var webpack = require('webpack');
 var path = require('path');
-var config = {
-    entry: {
-        imageViewer: './src/index'
-    },
-    output: {
-        path: path.resolve(__dirname, 'dist'),
-        filename: '[name].min.js'
-    },
-    module: {
-        noParse: /es6-promise\.js$/,
-        loaders: [
-            {
-                test: /\.js$/,
-                exclude: /node_modules/,
-                loader: 'babel'
-            },
-            {test: /\.css$/, loader: 'style-loader!css-loader'}
-        ]
-    },
-    babel: {
-        presets: ['es2015'],
-        plugins: ['transform-runtime']
-    },
-    plugins: [
-        new webpack.optimize.UglifyJsPlugin({
-            compress: {
-                warnings: false
-            }
-        })
-    ]
+var baseConfig = require('./webpack.config.base');
+
+baseConfig.output = {
+    path: path.resolve(__dirname, 'dist'),
+    filename: '[name].min.js'
 };
+baseConfig.plugins.push(
+    new webpack.optimize.UglifyJsPlugin({
+        compress: {
+            warnings: false
+        }
+    })
+);
 
-module.exports = config;
+module.exports = baseConfig;