diff --git a/dist/example/qrcode.png b/dist/example/qrcode.png
deleted file mode 100644
index f136d9b..0000000
Binary files a/dist/example/qrcode.png and /dev/null differ
diff --git a/dist/swiper.css b/dist/swiper.css
index 6cd159c..b35bd95 100644
--- a/dist/swiper.css
+++ b/dist/swiper.css
@@ -1,9 +1,3 @@
-/*!
- * iswiper - swiper.js
- * @version v1.4.1
- * @link https://github.com/weui/swiper.git
- * @license MIT
- */
.swiper {
height: 100%;
overflow: hidden;
diff --git a/dist/swiper.js b/dist/swiper.js
index c4660d7..eb65e47 100644
--- a/dist/swiper.js
+++ b/dist/swiper.js
@@ -1,261 +1,343 @@
/*!
- * iswiper - swiper.js
- * @version v1.4.1
- * @link https://github.com/weui/swiper.git
- * @license MIT
+ * iswiper 1.4.2 (https://github.com/wechatui/swiper.git)
+ * Copyright 2016 wechat ui team.
+ * Licensed under the MIT license
*/
+(function (global, factory) {
+ typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory() :
+ typeof define === 'function' && define.amd ? define(factory) :
+ (global.Swiper = factory());
+}(this, function () { 'use strict';
-(function (name, definition) {
- if (typeof define === 'function') {
- define(definition);
- } else {
- this[name] = definition();
+ var babelHelpers = {};
+
+ babelHelpers.classCallCheck = function (instance, Constructor) {
+ if (!(instance instanceof Constructor)) {
+ throw new TypeError("Cannot call a class as a function");
}
-})('Swiper', function () {
-
- /**
- *
- * @param options
- * @constructor
- */
- function Swiper(options) {
- this.version = '1.4.1';
- this._default = {container: '.swiper', item: '.item', direction: 'vertical', activeClass: 'active', threshold: 50, duration: 300};
- this._options = extend(this._default, options);
- this._start = {};
- this._move = {};
- this._end = {};
- this._prev = 0;
- this._current = 0;
- this._offset = 0;
- this._goto = -1;
- this._eventHandlers = {};
-
- this.$container = document.querySelector(this._options.container);
- this.$items = this.$container.querySelectorAll(this._options.item);
- this.count = this.$items.length;
-
- this._width = this.$container.offsetWidth;
- this._height = this.$container.offsetHeight;
-
- this._init();
- this._bind();
+ };
+
+ babelHelpers.createClass = function () {
+ function defineProperties(target, props) {
+ for (var i = 0; i < props.length; i++) {
+ var descriptor = props[i];
+ descriptor.enumerable = descriptor.enumerable || false;
+ descriptor.configurable = true;
+ if ("value" in descriptor) descriptor.writable = true;
+ Object.defineProperty(target, descriptor.key, descriptor);
+ }
}
- /**
- * initial
- * @private
- */
- Swiper.prototype._init = function () {
- var me = this;
- var width = me._width;
- var height = me._height;
-
-
- var w = width;
- var h = height * me.count;
-
- if (me._options.direction === 'horizontal') {
- w = width * me.count;
- h = height;
- }
-
- me.$container.style.width = w + 'px';
- me.$container.style.height = h + 'px';
-
- Array.prototype.forEach.call(me.$items, function ($item, key) {
- $item.style.width = width + 'px';
- $item.style.height = height + 'px';
- });
-
- me._activate(0);
+ return function (Constructor, protoProps, staticProps) {
+ if (protoProps) defineProperties(Constructor.prototype, protoProps);
+ if (staticProps) defineProperties(Constructor, staticProps);
+ return Constructor;
};
-
- /**
- * bind event listener
- * @private
- */
- Swiper.prototype._bind = function () {
- var me = this;
-
- this.$container.addEventListener('touchstart', function (e) {
- me._start.x = e.changedTouches[0].pageX;
- me._start.y = e.changedTouches[0].pageY;
-
- me.$container.style['-webkit-transition'] = 'none';
- me.$container.style.transition = 'none';
-
- }, false);
-
- this.$container.addEventListener('touchmove', function (e) {
- me._move.x = e.changedTouches[0].pageX;
- me._move.y = e.changedTouches[0].pageY;
-
- var distance = me._move.y - me._start.y;
- var transform = 'translate3d(0, ' + (distance - me._offset) + 'px, 0)';
-
- if (me._options.direction === 'horizontal') {
- distance = me._move.x - me._start.x;
- transform = 'translate3d(' + (distance - me._offset) + 'px, 0, 0)';
- }
-
- me.$container.style['-webkit-transform'] = transform;
- me.$container.style.transform = transform;
-
- e.preventDefault();
- }, false);
-
- this.$container.addEventListener('touchend', function (e) {
- me._end.x = e.changedTouches[0].pageX;
- me._end.y = e.changedTouches[0].pageY;
-
-
- var distance = me._end.y - me._start.y;
- if (me._options.direction === 'horizontal') {
- distance = me._end.x - me._start.x;
- }
-
- me._prev = me._current;
- if (distance > me._options.threshold) {
- me._current = me._current === 0 ? 0 : --me._current;
- } else if (distance < -me._options.threshold) {
- me._current = me._current < (me.count - 1) ? ++me._current : me._current;
- }
-
- me._show(me._current);
-
- }, false);
-
- this.$container.addEventListener('transitionEnd', function (e) {
- }, false);
-
- this.$container.addEventListener('webkitTransitionEnd', function (e) {
- if (e.target !== me.$container) {
- return false;
- }
-
- if (me._current != me._prev || me._goto > -1) {
- me._activate(me._current);
- var cb = me._eventHandlers.swiped || noop;
- cb.apply(me, [me._prev, me._current]);
- me._goto = -1;
- }
- e.preventDefault();
- }, false);
- };
-
- /**
- * show
- * @param index
- * @private
- */
- Swiper.prototype._show = function (index) {
- this._offset = index * this._height;
- var transform = 'translate3d(0, -' + this._offset + 'px, 0)';
-
- if (this._options.direction === 'horizontal') {
- this._offset = index * this._width;
- transform = 'translate3d(-' + this._offset + 'px, 0, 0)';
- }
-
- var duration = this._options.duration + 'ms';
-
- this.$container.style['-webkit-transition'] = duration;
- this.$container.style.transition = duration;
- this.$container.style['-webkit-transform'] = transform;
- this.$container.style.transform = transform;
- };
-
- /**
- * activate
- * @param index
- * @private
- */
- Swiper.prototype._activate = function (index){
- var clazz = this._options.activeClass;
- Array.prototype.forEach.call(this.$items, function ($item, key){
- $item.classList.remove(clazz);
- if (index === key) {
- $item.classList.add(clazz);
- }
- });
- };
-
- /**
- * goto x page
- */
- Swiper.prototype.go = function (index) {
- if(index < 0 || index > this.count - 1 || index === this._current){
- return;
- }
-
- if (index === 0) {
- this._current = 0;
- this._prev = 0;
- }else{
- this._current = index;
- this._prev = index - 1;
- }
-
- this._goto = index;
- this._show(this._current);
-
- return this;
- };
-
- /**
- * show next page
- */
- Swiper.prototype.next = function () {
- if (this._current >= this.count - 1) {
- return;
- }
- this._prev = this._current;
- this._show(++this._current);
- return this;
- };
-
- /**
- *
- * @param {String} event
- * @param {Function} callback
- */
- Swiper.prototype.on = function (event, callback) {
- if (this._eventHandlers[event]) {
- throw new Error('event ' + event + ' is already register');
- }
- if (typeof callback !== 'function') {
- throw new Error('parameter callback must be a function');
- }
-
- this._eventHandlers[event] = callback;
-
- return this;
- };
-
- /**
- * simple `extend` method
- * @param target
- * @param source
- * @returns {*}
- */
- function extend(target, source) {
- for (var key in source) {
- target[key] = source[key];
- }
-
- return target;
+ }();
+
+ babelHelpers;
+
+ /**
+ * simple `extend` method
+ * @param target
+ * @param source
+ * @returns {*}
+ */
+ function extend(target, source) {
+ for (var key in source) {
+ target[key] = source[key];
}
-
- /**
- * noop
- */
- function noop() {
-
- }
-
- /**
- * export
- */
- return Swiper;
-});
\ No newline at end of file
+ return target;
+ }
+
+ /**
+ * noop
+ */
+ function noop() {}
+
+ /**
+ * Swiper
+ */
+
+ var Swiper = function () {
+
+ /**
+ * constructor
+ * @param {Object} options
+ */
+
+ function Swiper() {
+ var options = arguments.length <= 0 || arguments[0] === undefined ? {} : arguments[0];
+ babelHelpers.classCallCheck(this, Swiper);
+
+ this.version = '1.4.2';
+ this._options = extend({
+ container: '.swiper', /* container's selector */
+ item: '.item', /* item's selector */
+ direction: 'vertical', /* swiper's direction, vertical or horizontal */
+ activeClass: 'active', /* current active item's class name */
+ threshold: 50, /* threshold */
+ duration: 300 /* duration */
+ }, options);
+ this._start = {};
+ this._move = {};
+ this._end = {};
+ this._prev = 0;
+ this._current = 0;
+ this._offset = 0;
+ this._goto = -1;
+ this._eventHandlers = {};
+
+ /**
+ * container
+ * @type {Element}
+ */
+ this.$container = document.querySelector(this._options.container);
+ /**
+ * item list
+ * @type {NodeList}
+ */
+ this.$items = this.$container.querySelectorAll(this._options.item);
+ /**
+ * count of item list
+ * @type {number}
+ */
+ this.count = this.$items.length;
+
+ /**
+ * container's width
+ * @type {number}
+ * @private
+ */
+ this._width = this.$container.offsetWidth;
+ /**
+ * container's height
+ * @type {number}
+ * @private
+ */
+ this._height = this.$container.offsetHeight;
+
+ this._init();
+ this._bind();
+ }
+
+ /**
+ * init
+ * @private
+ */
+
+
+ babelHelpers.createClass(Swiper, [{
+ key: '_init',
+ value: function _init() {
+ var _this = this;
+
+ // if direction is vertical, then container's width is container's width, height is container's height*count
+ var w = this._width;
+ var h = this._height * this.count;
+
+ if (this._options.direction === 'horizontal') {
+ w = this._width * this.count;
+ h = this._height;
+ }
+
+ // set container's width and height
+ this.$container.style.width = w + 'px';
+ this.$container.style.height = h + 'px';
+
+ Array.prototype.forEach.call(this.$items, function ($item, key) {
+ $item.style.width = _this._width + 'px';
+ $item.style.height = _this._height + 'px';
+ });
+
+ this._activate(0);
+ }
+
+ /**
+ * bind event listener
+ * @private
+ */
+
+ }, {
+ key: '_bind',
+ value: function _bind() {
+ var _this2 = this;
+
+ this.$container.addEventListener('touchstart', function (e) {
+ _this2._start.x = e.changedTouches[0].pageX;
+ _this2._start.y = e.changedTouches[0].pageY;
+
+ _this2.$container.style['-webkit-transition'] = 'none';
+ _this2.$container.style.transition = 'none';
+ }, false);
+
+ this.$container.addEventListener('touchmove', function (e) {
+ _this2._move.x = e.changedTouches[0].pageX;
+ _this2._move.y = e.changedTouches[0].pageY;
+
+ var distance = _this2._move.y - _this2._start.y;
+ var translate = distance - _this2._offset;
+ var transform = 'translate3d(0, ' + translate + 'px, 0)';
+
+ if (_this2._options.direction === 'horizontal') {
+ distance = _this2._move.x - _this2._start.x;
+ translate = distance - _this2._offset;
+ transform = 'translate3d(' + translate + 'px, 0, 0)';
+ }
+
+ _this2.$container.style['-webkit-transform'] = transform;
+ _this2.$container.style.transform = transform;
+
+ e.preventDefault();
+ }, false);
+
+ this.$container.addEventListener('touchend', function (e) {
+ _this2._end.x = e.changedTouches[0].pageX;
+ _this2._end.y = e.changedTouches[0].pageY;
+
+ var distance = _this2._end.y - _this2._start.y;
+ if (_this2._options.direction === 'horizontal') {
+ distance = _this2._end.x - _this2._start.x;
+ }
+
+ _this2._prev = _this2._current;
+ if (distance > _this2._options.threshold) {
+ _this2._current = _this2._current === 0 ? 0 : --_this2._current;
+ } else if (distance < -_this2._options.threshold) {
+ _this2._current = _this2._current < _this2.count - 1 ? ++_this2._current : _this2._current;
+ }
+
+ _this2._show(_this2._current);
+ }, false);
+
+ this.$container.addEventListener('transitionEnd', function (e) {}, false);
+
+ this.$container.addEventListener('webkitTransitionEnd', function (e) {
+ if (e.target !== _this2.$container) {
+ return false;
+ }
+
+ if (_this2._current != _this2._prev || _this2._goto > -1) {
+ _this2._activate(_this2._current);
+ var cb = _this2._eventHandlers['swiped'] || noop;
+ cb.apply(_this2, [_this2._prev, _this2._current]);
+ _this2._goto = -1;
+ }
+ e.preventDefault();
+ }, false);
+ }
+
+ /**
+ * show
+ * @param {Number} index
+ * @private
+ */
+
+ }, {
+ key: '_show',
+ value: function _show(index) {
+ this._offset = index * this._height;
+ var transform = 'translate3d(0, -' + this._offset + 'px, 0)';
+
+ if (this._options.direction === 'horizontal') {
+ this._offset = index * this._width;
+ transform = 'translate3d(-' + this._offset + 'px, 0, 0)';
+ }
+
+ var duration = this._options.duration + 'ms';
+
+ this.$container.style['-webkit-transition'] = duration;
+ this.$container.style.transition = duration;
+ this.$container.style['-webkit-transform'] = transform;
+ this.$container.style.transform = transform;
+ }
+
+ /**
+ * activate
+ * @param {Number} index
+ * @private
+ */
+
+ }, {
+ key: '_activate',
+ value: function _activate(index) {
+ var clazz = this._options.activeClass;
+ Array.prototype.forEach.call(this.$items, function ($item, key) {
+ $item.classList.remove(clazz);
+ if (index === key) {
+ $item.classList.add(clazz);
+ }
+ });
+ }
+
+ /**
+ * go to some page
+ * @param {Number} index
+ * @returns {*}
+ */
+
+ }, {
+ key: 'go',
+ value: function go(index) {
+ if (index < 0 || index > this.count - 1 || index === this._current) {
+ return;
+ }
+
+ if (index === 0) {
+ this._current = 0;
+ this._prev = 0;
+ } else {
+ this._current = index;
+ this._prev = index - 1;
+ }
+
+ this._goto = index;
+ this._show(this._current);
+
+ return this;
+ }
+
+ /**
+ * next page
+ * @returns {*}
+ */
+
+ }, {
+ key: 'next',
+ value: function next() {
+ if (this._current >= this.count - 1) {
+ return;
+ }
+ this._prev = this._current;
+ this._show(++this._current);
+ return this;
+ }
+
+ /**
+ * event listener
+ * @param {String} event
+ * @param {Function} callback
+ * @returns {Swiper}
+ */
+
+ }, {
+ key: 'on',
+ value: function on(event, callback) {
+ if (this._eventHandlers[event]) {
+ throw new Error('event ' + event + ' is already register');
+ }
+ if (typeof callback !== 'function') {
+ throw new Error('parameter callback must be a function');
+ }
+
+ this._eventHandlers[event] = callback;
+
+ return this;
+ }
+ }]);
+ return Swiper;
+ }();
+
+ return Swiper;
+
+}));
\ No newline at end of file
diff --git a/dist/swiper.min.css b/dist/swiper.min.css
index 2119147..61e1310 100644
--- a/dist/swiper.min.css
+++ b/dist/swiper.min.css
@@ -1,6 +1 @@
-/*!
- * iswiper - swiper.js
- * @version v1.4.1
- * @link https://github.com/weui/swiper.git
- * @license MIT
- */.item,.swiper{height:100%;overflow:hidden}.swiper{-webkit-transition:all .3s ease;transition:all .3s ease}.item{background-position:center center;background-size:cover;position:relative;float:left}.item.active .animated{-webkit-animation-fill-mode:both;animation-fill-mode:both;opacity:1}.item:not(.active) .animated{-webkit-animation:none;animation:none;opacity:0}
\ No newline at end of file
+.swiper{-webkit-transition:all .3s ease;transition:all .3s ease}.item,.swiper{height:100%;overflow:hidden}.item{background-position:50%;background-size:cover;position:relative;float:left}.item.active .animated{-webkit-animation-fill-mode:both;animation-fill-mode:both;opacity:1}.item:not(.active) .animated{-webkit-animation:none;animation:none;opacity:0}
\ No newline at end of file
diff --git a/dist/swiper.min.js b/dist/swiper.min.js
index 546153f..507ce97 100644
--- a/dist/swiper.min.js
+++ b/dist/swiper.min.js
@@ -1 +1,6 @@
-!function(t,e){"function"==typeof define?define(e):this[t]=e()}("Swiper",function(){function t(t){this.version="1.4.1",this._default={container:".swiper",item:".item",direction:"vertical",activeClass:"active",threshold:50,duration:300},this._options=e(this._default,t),this._start={},this._move={},this._end={},this._prev=0,this._current=0,this._offset=0,this._goto=-1,this._eventHandlers={},this.$container=document.querySelector(this._options.container),this.$items=this.$container.querySelectorAll(this._options.item),this.count=this.$items.length,this._width=this.$container.offsetWidth,this._height=this.$container.offsetHeight,this._init(),this._bind()}function e(t,e){for(var n in e)t[n]=e[n];return t}function n(){}return t.prototype._init=function(){var t=this,e=t._width,n=t._height,i=e,r=n*t.count;"horizontal"===t._options.direction&&(i=e*t.count,r=n),t.$container.style.width=i+"px",t.$container.style.height=r+"px",Array.prototype.forEach.call(t.$items,function(t,i){t.style.width=e+"px",t.style.height=n+"px"}),t._activate(0)},t.prototype._bind=function(){var t=this;this.$container.addEventListener("touchstart",function(e){t._start.x=e.changedTouches[0].pageX,t._start.y=e.changedTouches[0].pageY,t.$container.style["-webkit-transition"]="none",t.$container.style.transition="none"},!1),this.$container.addEventListener("touchmove",function(e){t._move.x=e.changedTouches[0].pageX,t._move.y=e.changedTouches[0].pageY;var n=t._move.y-t._start.y,i="translate3d(0, "+(n-t._offset)+"px, 0)";"horizontal"===t._options.direction&&(n=t._move.x-t._start.x,i="translate3d("+(n-t._offset)+"px, 0, 0)"),t.$container.style["-webkit-transform"]=i,t.$container.style.transform=i,e.preventDefault()},!1),this.$container.addEventListener("touchend",function(e){t._end.x=e.changedTouches[0].pageX,t._end.y=e.changedTouches[0].pageY;var n=t._end.y-t._start.y;"horizontal"===t._options.direction&&(n=t._end.x-t._start.x),t._prev=t._current,n>t._options.threshold?t._current=0===t._current?0:--t._current:n<-t._options.threshold&&(t._current=t._current
-1){t._activate(t._current);var i=t._eventHandlers.swiped||n;i.apply(t,[t._prev,t._current]),t._goto=-1}e.preventDefault()},!1)},t.prototype._show=function(t){this._offset=t*this._height;var e="translate3d(0, -"+this._offset+"px, 0)";"horizontal"===this._options.direction&&(this._offset=t*this._width,e="translate3d(-"+this._offset+"px, 0, 0)");var n=this._options.duration+"ms";this.$container.style["-webkit-transition"]=n,this.$container.style.transition=n,this.$container.style["-webkit-transform"]=e,this.$container.style.transform=e},t.prototype._activate=function(t){var e=this._options.activeClass;Array.prototype.forEach.call(this.$items,function(n,i){n.classList.remove(e),t===i&&n.classList.add(e)})},t.prototype.go=function(t){return 0>t||t>this.count-1||t===this._current?void 0:(0===t?(this._current=0,this._prev=0):(this._current=t,this._prev=t-1),this._goto=t,this._show(this._current),this)},t.prototype.next=function(){return this._current>=this.count-1?void 0:(this._prev=this._current,this._show(++this._current),this)},t.prototype.on=function(t,e){if(this._eventHandlers[t])throw new Error("event "+t+" is already register");if("function"!=typeof e)throw new Error("parameter callback must be a function");return this._eventHandlers[t]=e,this},t});
\ No newline at end of file
+/*!
+ * iswiper 1.4.2 (https://github.com/wechatui/swiper.git)
+ * Copyright 2016 wechat ui team.
+ * Licensed under the MIT license
+ */
+!function(t,e){"object"==typeof exports&&"undefined"!=typeof module?module.exports=e():"function"==typeof define&&define.amd?define(e):t.Swiper=e()}(this,function(){"use strict";function t(t,e){for(var n in e)t[n]=e[n];return t}function e(){}var n={};n.classCallCheck=function(t,e){if(!(t instanceof e))throw new TypeError("Cannot call a class as a function")},n.createClass=function(){function t(t,e){for(var n=0;nt._options.threshold?t._current=0===t._current?0:--t._current:n<-t._options.threshold&&(t._current=t._current-1){t._activate(t._current);var i=t._eventHandlers.swiped||e;i.apply(t,[t._prev,t._current]),t._goto=-1}n.preventDefault()},!1)}},{key:"_show",value:function(t){this._offset=t*this._height;var e="translate3d(0, -"+this._offset+"px, 0)";"horizontal"===this._options.direction&&(this._offset=t*this._width,e="translate3d(-"+this._offset+"px, 0, 0)");var n=this._options.duration+"ms";this.$container.style["-webkit-transition"]=n,this.$container.style.transition=n,this.$container.style["-webkit-transform"]=e,this.$container.style.transform=e}},{key:"_activate",value:function(t){var e=this._options.activeClass;Array.prototype.forEach.call(this.$items,function(n,i){n.classList.remove(e),t===i&&n.classList.add(e)})}},{key:"go",value:function(t){return 0>t||t>this.count-1||t===this._current?void 0:(0===t?(this._current=0,this._prev=0):(this._current=t,this._prev=t-1),this._goto=t,this._show(this._current),this)}},{key:"next",value:function(){return this._current>=this.count-1?void 0:(this._prev=this._current,this._show(++this._current),this)}},{key:"on",value:function(t,e){if(this._eventHandlers[t])throw new Error("event "+t+" is already register");if("function"!=typeof e)throw new Error("parameter callback must be a function");return this._eventHandlers[t]=e,this}}]),i}();return i});
\ No newline at end of file
diff --git a/gulpfile.js b/gulpfile.js
index 755a0f2..236a29e 100644
--- a/gulpfile.js
+++ b/gulpfile.js
@@ -1,64 +1,70 @@
-/**
- * Created by jfengjiang on 2015/1/14.
- */
-
+const fs = require('fs');
+const path = require('path');
+const gulp = require('gulp');
+const rollup = require('rollup');
+const less = require('gulp-less');
+const nano = require('gulp-cssnano');
+const rename = require('gulp-rename');
+const postcss = require('gulp-postcss');
+const autoprefixer = require('autoprefixer');
+const uglify = require('uglify-js');
+const babel = require('rollup-plugin-babel');
+const browserSync = require('browser-sync');
+const pkg = require('./package.json');
-var gulp = require('gulp');
-var gutil = require('gulp-util');
-var header = require('gulp-header');
-var uglify = require('gulp-uglify');
-var jshint = require('gulp-jshint');
-var rename = require('gulp-rename');
-var less = require('gulp-less');
-var autoprefixer = require('gulp-autoprefixer');
-var minify = require('gulp-minify-css');
-var tap = require('gulp-tap');
-var browserSync = require('browser-sync');
-var pkg = require('./package.json');
-
-gulp.task('build', function () {
- gulp.src('src/example/**/*')
- .pipe(gulp.dest('dist/example'));
+const banner = `/*!
+ * ${pkg.name} ${pkg.version} (${pkg.repository.url})
+ * Copyright ${new Date().getFullYear()} ${pkg.author}.
+ * Licensed under the ${pkg.license} license
+ */
+`;
- var banner = ['/*!',
- ' * <%= pkg.name %> - <%= pkg.description %>',
- ' * @version v<%= pkg.version %>',
- ' * @link <%= pkg.repository.url %>',
- ' * @license <%= pkg.license %>',
- ' */',
- ''].join('\n');
+gulp.task('build:swiper:js', function () {
+ return rollup.rollup({
+ entry: 'src/index.js',
+ plugins: [babel()]
+ }).then(function (bundle) {
+ var result = bundle.generate({
+ format: 'umd',
+ moduleName: 'Swiper'
+ });
+ fs.writeFileSync('dist/swiper.js', banner + result.code.replace(/@VERSION/g, pkg.version));
+ fs.writeFileSync('dist/swiper.min.js', banner + uglify.minify('dist/swiper.js').code);
+ });
+});
- gulp.src('src/swiper.less')
- .pipe(less().on('error', function (e){
- console.error(e.message);
- this.emit('end');
+gulp.task('build:swiper:style', function (done) {
+ gulp.src('src/index.less')
+ .pipe(less())
+ .pipe(postcss([autoprefixer]))
+ .pipe(rename(function (path) {
+ path.basename = 'swiper';
}))
- .pipe(autoprefixer())
- .pipe(header(banner, { pkg : pkg } ))
.pipe(gulp.dest('dist'))
- .pipe(minify())
- .pipe(rename(function (file){
- file.basename += '.min';
- }))
- .pipe(gulp.dest('dist'));
-
- gulp.src('src/swiper.js')
- .pipe(tap(function(file, t){
- var contents = file.contents.toString();
- contents = contents.replace('${version}', pkg.version);
- file.contents = new Buffer(contents);
+ .pipe(nano())
+ .pipe(rename(function (path) {
+ path.basename += '.min';
}))
- .pipe(jshint())
- .pipe(jshint.reporter('default'))
- .pipe(header(banner, { pkg : pkg } ))
.pipe(gulp.dest('dist'))
- .pipe(uglify())
- .pipe(rename(function (file){
- file.basename += '.min';
- }))
- .pipe(gulp.dest('dist'));
+ .on('end', done);
+});
+
+gulp.task('build:example:html', function (done) {
+ gulp.src('src/example/index.html')
+ .pipe(gulp.dest('dist/example'))
+ .on('end', done);
+});
+
+gulp.task('build:example:style', function (done) {
+ gulp.src('src/example/**/*.less')
+ .pipe(less())
+ .pipe(postcss([autoprefixer]))
+ .pipe(gulp.dest('dist/example'))
+ .on('end', done);
});
+gulp.task('build', ['build:swiper:js', 'build:swiper:style', 'build:example:html', 'build:example:style']);
+
gulp.task('server', function () {
browserSync.init({
server: {
@@ -75,8 +81,6 @@ gulp.task('server', function () {
});
});
-gulp.task('watch', ['build', 'server'], function (){
- gulp.watch('src/**/*', ['build']);
-});
-
-gulp.task('default', ['watch']);
\ No newline at end of file
+gulp.task('watch', ['build', 'server'], function () {
+ gulp.watch('src/**', ['build']);
+});
\ No newline at end of file
diff --git a/package.json b/package.json
index 5b2a6de..c915a81 100644
--- a/package.json
+++ b/package.json
@@ -1,27 +1,31 @@
{
- "name": "iswiper",
- "version": "1.4.1",
- "description": "swiper.js",
- "author": "wechat ui team",
- "scripts": {
- "start": "gulp"
- },
- "repository": {
- "type": "git",
- "url": "https://github.com/weui/swiper.git"
- },
- "license": "MIT",
- "devDependencies": {
- "browser-sync": "^2.9.11",
- "gulp": "~3.8.10",
- "gulp-autoprefixer": "^3.1.0",
- "gulp-header": "^1.7.1",
- "gulp-jshint": "~1.9.0",
- "gulp-less": "^3.0.3",
- "gulp-minify-css": "^1.2.1",
- "gulp-rename": "^1.2.2",
- "gulp-tap": "^0.1.3",
- "gulp-uglify": "^1.0.2",
- "gulp-util": "^3.0.7"
- }
+ "name": "iswiper",
+ "version": "1.4.2",
+ "description": "为移动端而生的滑动框架，无依赖，轻盈小巧，性能极致",
+ "author": "wechat ui team",
+ "main": "dist/swiper.js",
+ "scripts": {
+ "start": "gulp watch",
+ "build": "npm run clean && mkdir dist && gulp build",
+ "clean": "rimraf ./dist"
+ },
+ "repository": {
+ "type": "git",
+ "url": "https://github.com/wechatui/swiper.git"
+ },
+ "keywords": [ "wechat", "iswiper", "swiper", "swipe", "slider", "mobile", "framework"],
+ "license": "MIT",
+ "devDependencies": {
+ "babel-preset-es2015": "^6.6.0",
+ "babel-preset-es2015-rollup": "^1.1.1",
+ "browser-sync": "^2.11.1",
+ "gulp": "^3.9.1",
+ "gulp-babel": "^6.1.2",
+ "gulp-less": "^3.0.5",
+ "gulp-rename": "^1.2.2",
+ "rimraf": "^2.4.3",
+ "rollup": "^0.25.4",
+ "rollup-plugin-babel": "^2.4.0",
+ "uglify-js": "^2.6.2"
+ }
}
diff --git a/src/example/example.css b/src/example/example.less
similarity index 93%
rename from src/example/example.css
rename to src/example/example.less
index d2f8972..e85f200 100644
--- a/src/example/example.css
+++ b/src/example/example.less
@@ -2,20 +2,28 @@
margin: 0;
padding: 0;
}
+
html,
body {
height: 100%;
overflow: hidden;
}
-.container{
+
+.container {
height: 100%;
background-color: #efeff4;
}
-.item{
+
+.swiper {
+ background-color: #000000;
+}
+
+.item {
color: #ffffff;
background-color: #000000;
}
-.title{
+
+.title {
margin-top: 200px;
text-align: center;
}
@@ -31,6 +39,7 @@ body {
-webkit-animation-fill-mode: both;
animation-fill-mode: both;
}
+
@-webkit-keyframes fadeInUp {
from {
opacity: 0;
diff --git a/src/example/index.html b/src/example/index.html
index 29e3749..3ec63d1 100644
--- a/src/example/index.html
+++ b/src/example/index.html
@@ -5,7 +5,7 @@
无孔不入
-
+
diff --git a/src/example/qrcode.png b/src/example/qrcode.png
deleted file mode 100644
index f136d9b..0000000
Binary files a/src/example/qrcode.png and /dev/null differ
diff --git a/src/index.js b/src/index.js
new file mode 100644
index 0000000..53d9243
--- /dev/null
+++ b/src/index.js
@@ -0,0 +1,257 @@
+import * as util from './util';
+
+/**
+ * Swiper
+ */
+class Swiper {
+
+ /**
+ * constructor
+ * @param {Object} options
+ */
+ constructor(options = {}) {
+ this.version = '@VERSION';
+ this._options = util.extend({
+ container: '.swiper', /* container's selector */
+ item: '.item', /* item's selector */
+ direction: 'vertical', /* swiper's direction, vertical or horizontal */
+ activeClass: 'active', /* current active item's class name */
+ threshold: 50, /* threshold */
+ duration: 300 /* duration */
+ }, options);
+ this._start = {};
+ this._move = {};
+ this._end = {};
+ this._prev = 0;
+ this._current = 0;
+ this._offset = 0;
+ this._goto = -1;
+ this._eventHandlers = {};
+
+ /**
+ * container
+ * @type {Element}
+ */
+ this.$container = document.querySelector(this._options.container);
+ /**
+ * item list
+ * @type {NodeList}
+ */
+ this.$items = this.$container.querySelectorAll(this._options.item);
+ /**
+ * count of item list
+ * @type {number}
+ */
+ this.count = this.$items.length;
+
+ /**
+ * container's width
+ * @type {number}
+ * @private
+ */
+ this._width = this.$container.offsetWidth;
+ /**
+ * container's height
+ * @type {number}
+ * @private
+ */
+ this._height = this.$container.offsetHeight;
+
+ this._init();
+ this._bind();
+ }
+
+ /**
+ * init
+ * @private
+ */
+ _init() {
+ // if direction is vertical, then container's width is container's width, height is container's height*count
+ let w = this._width;
+ let h = this._height * this.count;
+
+ if (this._options.direction === 'horizontal') {
+ w = this._width * this.count;
+ h = this._height;
+ }
+
+ // set container's width and height
+ this.$container.style.width = `${w}px`;
+ this.$container.style.height = `${h}px`;
+
+ Array.prototype.forEach.call(this.$items, ($item, key) => {
+ $item.style.width = `${this._width}px`;
+ $item.style.height = `${this._height}px`;
+ });
+
+ this._activate(0);
+ }
+
+ /**
+ * bind event listener
+ * @private
+ */
+ _bind() {
+ this.$container.addEventListener('touchstart', (e) => {
+ this._start.x = e.changedTouches[0].pageX;
+ this._start.y = e.changedTouches[0].pageY;
+
+ this.$container.style['-webkit-transition'] = 'none';
+ this.$container.style.transition = 'none';
+
+ }, false);
+
+ this.$container.addEventListener('touchmove', (e) => {
+ this._move.x = e.changedTouches[0].pageX;
+ this._move.y = e.changedTouches[0].pageY;
+
+ let distance = this._move.y - this._start.y;
+ let translate = distance - this._offset;
+ let transform = `translate3d(0, ${translate}px, 0)`;
+
+ if (this._options.direction === 'horizontal') {
+ distance = this._move.x - this._start.x;
+ translate = distance - this._offset;
+ transform = `translate3d(${translate}px, 0, 0)`;
+ }
+
+ this.$container.style['-webkit-transform'] = transform;
+ this.$container.style.transform = transform;
+
+ e.preventDefault();
+ }, false);
+
+ this.$container.addEventListener('touchend', (e) => {
+ this._end.x = e.changedTouches[0].pageX;
+ this._end.y = e.changedTouches[0].pageY;
+
+
+ let distance = this._end.y - this._start.y;
+ if (this._options.direction === 'horizontal') {
+ distance = this._end.x - this._start.x;
+ }
+
+ this._prev = this._current;
+ if (distance > this._options.threshold) {
+ this._current = this._current === 0 ? 0 : --this._current;
+ } else if (distance < -this._options.threshold) {
+ this._current = this._current < (this.count - 1) ? ++this._current : this._current;
+ }
+
+ this._show(this._current);
+
+ }, false);
+
+ this.$container.addEventListener('transitionEnd', function (e) {
+ }, false);
+
+ this.$container.addEventListener('webkitTransitionEnd', (e) => {
+ if (e.target !== this.$container) {
+ return false;
+ }
+
+ if (this._current != this._prev || this._goto > -1) {
+ this._activate(this._current);
+ var cb = this._eventHandlers['swiped'] || util.noop;
+ cb.apply(this, [this._prev, this._current]);
+ this._goto = -1;
+ }
+ e.preventDefault();
+ }, false);
+ }
+
+ /**
+ * show
+ * @param {Number} index
+ * @private
+ */
+ _show(index) {
+ this._offset = index * this._height;
+ let transform = `translate3d(0, -${this._offset}px, 0)`;
+
+ if (this._options.direction === 'horizontal') {
+ this._offset = index * this._width;
+ transform = `translate3d(-${this._offset}px, 0, 0)`;
+ }
+
+ const duration = `${this._options.duration}ms`;
+
+ this.$container.style['-webkit-transition'] = duration;
+ this.$container.style.transition = duration;
+ this.$container.style['-webkit-transform'] = transform;
+ this.$container.style.transform = transform;
+ }
+
+ /**
+ * activate
+ * @param {Number} index
+ * @private
+ */
+ _activate(index) {
+ const clazz = this._options.activeClass;
+ Array.prototype.forEach.call(this.$items, function ($item, key) {
+ $item.classList.remove(clazz);
+ if (index === key) {
+ $item.classList.add(clazz);
+ }
+ });
+ }
+
+ /**
+ * go to some page
+ * @param {Number} index
+ * @returns {*}
+ */
+ go(index) {
+ if (index < 0 || index > this.count - 1 || index === this._current) {
+ return;
+ }
+
+ if (index === 0) {
+ this._current = 0;
+ this._prev = 0;
+ } else {
+ this._current = index;
+ this._prev = index - 1;
+ }
+
+ this._goto = index;
+ this._show(this._current);
+
+ return this;
+ }
+
+ /**
+ * next page
+ * @returns {*}
+ */
+ next() {
+ if (this._current >= this.count - 1) {
+ return;
+ }
+ this._prev = this._current;
+ this._show(++this._current);
+ return this;
+ }
+
+ /**
+ * event listener
+ * @param {String} event
+ * @param {Function} callback
+ * @returns {Swiper}
+ */
+ on(event, callback) {
+ if (this._eventHandlers[event]) {
+ throw new Error(`event ${event} is already register`);
+ }
+ if (typeof callback !== 'function') {
+ throw new Error('parameter callback must be a function');
+ }
+
+ this._eventHandlers[event] = callback;
+
+ return this;
+ }
+}
+
+export default Swiper;
\ No newline at end of file
diff --git a/src/swiper.less b/src/index.less
similarity index 100%
rename from src/swiper.less
rename to src/index.less
diff --git a/src/swiper.js b/src/swiper.js
deleted file mode 100644
index f645d4c..0000000
--- a/src/swiper.js
+++ /dev/null
@@ -1,255 +0,0 @@
-
-(function (name, definition) {
- if (typeof define === 'function') {
- define(definition);
- } else {
- this[name] = definition();
- }
-})('Swiper', function () {
-
- /**
- *
- * @param options
- * @constructor
- */
- function Swiper(options) {
- this.version = '${version}';
- this._default = {container: '.swiper', item: '.item', direction: 'vertical', activeClass: 'active', threshold: 50, duration: 300};
- this._options = extend(this._default, options);
- this._start = {};
- this._move = {};
- this._end = {};
- this._prev = 0;
- this._current = 0;
- this._offset = 0;
- this._goto = -1;
- this._eventHandlers = {};
-
- this.$container = document.querySelector(this._options.container);
- this.$items = this.$container.querySelectorAll(this._options.item);
- this.count = this.$items.length;
-
- this._width = this.$container.offsetWidth;
- this._height = this.$container.offsetHeight;
-
- this._init();
- this._bind();
- }
-
- /**
- * initial
- * @private
- */
- Swiper.prototype._init = function () {
- var me = this;
- var width = me._width;
- var height = me._height;
-
-
- var w = width;
- var h = height * me.count;
-
- if (me._options.direction === 'horizontal') {
- w = width * me.count;
- h = height;
- }
-
- me.$container.style.width = w + 'px';
- me.$container.style.height = h + 'px';
-
- Array.prototype.forEach.call(me.$items, function ($item, key) {
- $item.style.width = width + 'px';
- $item.style.height = height + 'px';
- });
-
- me._activate(0);
- };
-
- /**
- * bind event listener
- * @private
- */
- Swiper.prototype._bind = function () {
- var me = this;
-
- this.$container.addEventListener('touchstart', function (e) {
- me._start.x = e.changedTouches[0].pageX;
- me._start.y = e.changedTouches[0].pageY;
-
- me.$container.style['-webkit-transition'] = 'none';
- me.$container.style.transition = 'none';
-
- }, false);
-
- this.$container.addEventListener('touchmove', function (e) {
- me._move.x = e.changedTouches[0].pageX;
- me._move.y = e.changedTouches[0].pageY;
-
- var distance = me._move.y - me._start.y;
- var transform = 'translate3d(0, ' + (distance - me._offset) + 'px, 0)';
-
- if (me._options.direction === 'horizontal') {
- distance = me._move.x - me._start.x;
- transform = 'translate3d(' + (distance - me._offset) + 'px, 0, 0)';
- }
-
- me.$container.style['-webkit-transform'] = transform;
- me.$container.style.transform = transform;
-
- e.preventDefault();
- }, false);
-
- this.$container.addEventListener('touchend', function (e) {
- me._end.x = e.changedTouches[0].pageX;
- me._end.y = e.changedTouches[0].pageY;
-
-
- var distance = me._end.y - me._start.y;
- if (me._options.direction === 'horizontal') {
- distance = me._end.x - me._start.x;
- }
-
- me._prev = me._current;
- if (distance > me._options.threshold) {
- me._current = me._current === 0 ? 0 : --me._current;
- } else if (distance < -me._options.threshold) {
- me._current = me._current < (me.count - 1) ? ++me._current : me._current;
- }
-
- me._show(me._current);
-
- }, false);
-
- this.$container.addEventListener('transitionEnd', function (e) {
- }, false);
-
- this.$container.addEventListener('webkitTransitionEnd', function (e) {
- if (e.target !== me.$container) {
- return false;
- }
-
- if (me._current != me._prev || me._goto > -1) {
- me._activate(me._current);
- var cb = me._eventHandlers.swiped || noop;
- cb.apply(me, [me._prev, me._current]);
- me._goto = -1;
- }
- e.preventDefault();
- }, false);
- };
-
- /**
- * show
- * @param index
- * @private
- */
- Swiper.prototype._show = function (index) {
- this._offset = index * this._height;
- var transform = 'translate3d(0, -' + this._offset + 'px, 0)';
-
- if (this._options.direction === 'horizontal') {
- this._offset = index * this._width;
- transform = 'translate3d(-' + this._offset + 'px, 0, 0)';
- }
-
- var duration = this._options.duration + 'ms';
-
- this.$container.style['-webkit-transition'] = duration;
- this.$container.style.transition = duration;
- this.$container.style['-webkit-transform'] = transform;
- this.$container.style.transform = transform;
- };
-
- /**
- * activate
- * @param index
- * @private
- */
- Swiper.prototype._activate = function (index){
- var clazz = this._options.activeClass;
- Array.prototype.forEach.call(this.$items, function ($item, key){
- $item.classList.remove(clazz);
- if (index === key) {
- $item.classList.add(clazz);
- }
- });
- };
-
- /**
- * goto x page
- */
- Swiper.prototype.go = function (index) {
- if(index < 0 || index > this.count - 1 || index === this._current){
- return;
- }
-
- if (index === 0) {
- this._current = 0;
- this._prev = 0;
- }else{
- this._current = index;
- this._prev = index - 1;
- }
-
- this._goto = index;
- this._show(this._current);
-
- return this;
- };
-
- /**
- * show next page
- */
- Swiper.prototype.next = function () {
- if (this._current >= this.count - 1) {
- return;
- }
- this._prev = this._current;
- this._show(++this._current);
- return this;
- };
-
- /**
- *
- * @param {String} event
- * @param {Function} callback
- */
- Swiper.prototype.on = function (event, callback) {
- if (this._eventHandlers[event]) {
- throw new Error('event ' + event + ' is already register');
- }
- if (typeof callback !== 'function') {
- throw new Error('parameter callback must be a function');
- }
-
- this._eventHandlers[event] = callback;
-
- return this;
- };
-
- /**
- * simple `extend` method
- * @param target
- * @param source
- * @returns {*}
- */
- function extend(target, source) {
- for (var key in source) {
- target[key] = source[key];
- }
-
- return target;
- }
-
- /**
- * noop
- */
- function noop() {
-
- }
-
- /**
- * export
- */
- return Swiper;
-});
\ No newline at end of file
diff --git a/src/util.js b/src/util.js
new file mode 100644
index 0000000..9eff0c2
--- /dev/null
+++ b/src/util.js
@@ -0,0 +1,19 @@
+/**
+ * simple `extend` method
+ * @param target
+ * @param source
+ * @returns {*}
+ */
+export function extend(target, source) {
+ for (let key in source) {
+ target[key] = source[key];
+ }
+ return target;
+}
+
+/**
+ * noop
+ */
+export function noop() {
+
+}
\ No newline at end of file
diff --git a/test/test.js b/test/test.js
index 6c0a406..03f8e59 100644
--- a/test/test.js
+++ b/test/test.js
@@ -20,6 +20,7 @@ describe('swiper should have the following methods:', function(){
'_show',
'_activate',
'next',
+ 'go',
'on'
];
var i = 0;
@@ -38,7 +39,6 @@ describe('swiper should have the following methods:', function(){
describe('swiper should have the following properties', function(){
var properties = [
'version',
- '_default',
'_options',
'_start',
'_move',