swipe.js

!function(e,t){"object"==typeof exports&&"object"==typeof module?module.exports=t(require("vue")):"function"==typeof define&&define.amd?define("wdui",["vue"],t):"object"==typeof exports?exports.wdui=t(require("vue")):e.wdui=t(e.Vue)}(this,function(e){return function(e){function t(n){if(i[n])return i[n].exports;var r=i[n]={i:n,l:!1,exports:{}};return e[n].call(r.exports,r,r.exports,t),r.l=!0,r.exports}var i={};return t.m=e,t.c=i,t.i=function(e){return e},t.d=function(e,i,n){t.o(e,i)||Object.defineProperty(e,i,{configurable:!1,enumerable:!0,get:n})},t.n=function(e){var i=e&&e.__esModule?function(){return e.default}:function(){return e};return t.d(i,"a",i),i},t.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},t.p="",t(t.s=52)}({0:function(e,t){e.exports=function(e,t,i,n){var r,a=e=e||{},s=typeof e.default;"object"!==s&&"function"!==s||(r=e,a=e.default);var o="function"==typeof a?a.options:a;if(t&&(o.render=t.render,o.staticRenderFns=t.staticRenderFns),i&&(o._scopeId=i),n){var l=Object.create(o.computed||null);Object.keys(n).forEach(function(e){var t=n[e];l[e]=function(){return t}}),o.computed=l}return{esModule:r,exports:a,options:o}}},1:function(e,t){function i(e,t){var i=e[1]||"",r=e[3];if(!r)return i;if(t&&"function"==typeof btoa){var a=n(r);return[i].concat(r.sources.map(function(e){return"/*# sourceURL="+r.sourceRoot+e+" */"})).concat([a]).join("\n")}return[i].join("\n")}function n(e){return"/*# sourceMappingURL=data:application/json;charset=utf-8;base64,"+btoa(unescape(encodeURIComponent(JSON.stringify(e))))+" */"}e.exports=function(e){var t=[];return t.toString=function(){return this.map(function(t){var n=i(t,e);return t[2]?"@media "+t[2]+"{"+n+"}":n}).join("")},t.i=function(e,i){"string"==typeof e&&(e=[[null,e,""]]);for(var n={},r=0;r<this.length;r++){var a=this[r][0];"number"==typeof a&&(n[a]=!0)}for(r=0;r<e.length;r++){var s=e[r];"number"==typeof s[0]&&n[s[0]]||(i&&!s[2]?s[2]=i:i&&(s[2]="("+s[2]+") and ("+i+")"),t.push(s))}},t}},105:function(e,t,i){"use strict";Object.defineProperty(t,"__esModule",{value:!0});var n=i(85);t.default={name:"wd-swipe",created:function(){this.dragState={}},mounted:function(){var e=this;this.ready=!0,this.auto>0&&(this.timer=setInterval(function(){if(!e.loop&&e.index>=e.pages.length-1)return e.clearTimer();e.dragging||e.animating||e.next()},this.auto)),this.reInitPages();var t=this.$el;t.addEventListener("touchstart",function(t){e.prevent&&t.preventDefault(),e.animating||(e.dragging=!0,e.userScrolling=!1,e.doOnTouchStart(t))}),t.addEventListener("touchmove",function(t){e.dragging&&e.doOnTouchMove(t)}),t.addEventListener("touchend",function(t){if(e.userScrolling)return e.dragging=!1,void(e.dragState={});e.dragging&&(e.doOnTouchEnd(t),e.dragging=!1)});var i=this;if(this.mousewheel){"mousewheel DOMMouseScroll MozMousePixelScroll".split(" ").forEach(function(t){e.$el.addEventListener(t,function(e){e.deltaY>0?i.throttle(i.next,i,1e3):e.deltaY<0&&i.throttle(i.prev,i,1e3)})})}this.keyboard&&window.addEventListener("keydown",function(e){switch(e.keyCode){case 37:case 38:i.prev();break;case 39:case 40:i.next()}e.keyCode in[37,38,39,40]&&this.prevent&&e.preventDefault()})},destroyed:function(){this.timer&&this.clearTimer(),this.reInitTimer&&(clearTimeout(this.reInitTimer),this.reInitTimer=null)},data:function(){return{ready:!1,dragging:!1,userScrolling:!1,animating:!1,index:0,pages:[],titles:[],timer:null,reInitTimer:null,noDrag:!1,isDone:!1}},computed:{title:function(){return this.titles[this.index]}},props:{speed:{type:Number,default:300},animationTime:{type:Number,default:1e3},timingFunction:{type:String,default:"ease-in-out"},defaultIndex:{type:Number,default:0},auto:{type:Number,default:3e3},loop:{type:Boolean,default:!0},showIndicators:{type:Boolean,default:!0},showTitle:{type:Boolean,default:!1},indicatorsType:{type:String,default:"dot"},indicatorsPosition:{type:String,default:"center"},noDragWhenSingle:{type:Boolean,default:!0},prevent:{type:Boolean,default:!1},mousewheel:{type:Boolean,default:!1},keyboard:{type:Boolean,default:!1}},watch:{index:function(e){this.$emit("change",e)}},methods:{swipeItemCreated:function(){var e=this;this.ready&&(clearTimeout(this.reInitTimer),this.reInitTimer=setTimeout(function(){e.reInitPages()},100))},swipeItemDestroyed:function(){var e=this;this.ready&&(clearTimeout(this.reInitTimer),this.reInitTimer=setTimeout(function(){e.reInitPages()},100))},translate:function(e,t,r,a){var s=this,o=arguments;if(r){this.animating=!0,e.style.webkitTransition="-webkit-transform "+r+"ms "+this.timingFunction,setTimeout(function(){e.style.webkitTransform="translate3d("+t+"px, 0, 0)"},50);var l=!1,d=function(){l||(l=!0,s.animating=!1,e.style.webkitTransition="",e.style.webkitTransform="",a&&a.apply(s,o))};i.i(n.a)(e,"webkitTransitionEnd",d),setTimeout(d,r+100)}else e.style.webkitTransition="",e.style.webkitTransform="translate3d("+t+"px, 0, 0)"},reInitPages:function(){var e=this.$children;this.noDrag=1===e.length&&this.noDragWhenSingle;var t=[],r=[],a=Math.floor(this.defaultIndex),s=a>=0&&a<e.length?a:0;this.index=s,e.forEach(function(e,a){t.push(e.$el),r.push(e.title),i.i(n.b)(e.$el,"current"),a===s&&i.i(n.c)(e.$el,"current")}),this.pages=t,this.titles=r},doAnimate:function(e,t){var r=this;if(0!==this.$children.length&&(t||!(this.$children.length<2))){var a=void 0,s=void 0,o=void 0,l=void 0,d=void 0,c=this.speed||300,u=this.index,f=this.pages,p=f.length;t?(a=t.prevPage,s=t.currentPage,o=t.nextPage,l=t.pageWidth,d=t.offsetLeft):(l=this.$el.clientWidth,s=f[u],a=f[u-1],o=f[u+1],this.loop&&p>1&&(a||(a=f[p-1]),o||(o=f[0])),a&&(a.style.display="block",this.translate(a,-l)),o&&(o.style.display="block",this.translate(o,l)));var h=void 0,m=this.$children[u].$el;"prev"===e?(u>0&&(h=u-1),this.loop&&0===u&&(h=p-1)):"next"===e&&(u<p-1&&(h=u+1),this.loop&&u===p-1&&(h=0));var g=function(){if(void 0!==h){var e=r.$children[h].$el;i.i(n.b)(m,"current"),i.i(n.c)(e,"current"),r.index=h}r.isDone&&r.end(),a&&(a.style.display=""),o&&(o.style.display="")};setTimeout(function(){"next"===e?(r.isDone=!0,r.before(s),r.translate(s,-l,c,g),o&&r.translate(o,0,c)):"prev"===e?(r.isDone=!0,r.before(s),r.translate(s,l,c,g),a&&r.translate(a,0,c)):(r.isDone=!1,r.translate(s,0,c,g),void 0!==d?(a&&d>0&&r.translate(a,-l,c),o&&d<0&&r.translate(o,l,c)):(a&&r.translate(a,-l,c),o&&r.translate(o,l,c)))},10)}},next:function(){this.doAnimate("next")},prev:function(){this.doAnimate("prev")},before:function(){this.$emit("before",this.index)},end:function(){this.$emit("end",this.index)},doOnTouchStart:function(e){if(!this.noDrag){var t=this.$el,i=this.dragState,n=e.touches[0];i.startTime=new Date,i.startLeft=n.pageX,i.startTop=n.pageY,i.startTopAbsolute=n.clientY,i.pageWidth=t.offsetWidth,i.pageHeight=t.offsetHeight;var r=this.$children[this.index-1],a=this.$children[this.index],s=this.$children[this.index+1];this.loop&&this.pages.length>1&&(r||(r=this.$children[this.$children.length-1]),s||(s=this.$children[0])),i.prevPage=r?r.$el:null,i.dragPage=a?a.$el:null,i.nextPage=s?s.$el:null,i.prevPage&&(i.prevPage.style.display="block"),i.nextPage&&(i.nextPage.style.display="block")}},doOnTouchMove:function(e){if(!this.noDrag){var t=this.dragState,i=e.touches[0];t.currentLeft=i.pageX,t.currentTop=i.pageY,t.currentTopAbsolute=i.clientY;var n=t.currentLeft-t.startLeft,r=t.currentTopAbsolute-t.startTopAbsolute,a=Math.abs(n),s=Math.abs(r);if(a<5||a>=5&&s>=1.73*a)return void(this.userScrolling=!0);this.userScrolling=!1,e.preventDefault(),n=Math.min(Math.max(1-t.pageWidth,n),t.pageWidth-1);var o=n<0?"next":"prev";t.prevPage&&"prev"===o&&this.translate(t.prevPage,n-t.pageWidth),this.translate(t.dragPage,n),t.nextPage&&"next"===o&&this.translate(t.nextPage,n+t.pageWidth)}},doOnTouchEnd:function(){if(!this.noDrag){var e=this.dragState,t=new Date-e.startTime,i=null,n=e.currentLeft-e.startLeft,r=e.currentTop-e.startTop,a=e.pageWidth,s=this.index,o=this.pages.length;if(t<300){var l=Math.abs(n)<5&&Math.abs(r)<5;(isNaN(n)||isNaN(r))&&(l=!0),l&&this.$children[this.index].$emit("tap")}t<300&&void 0===e.currentLeft||((t<300||Math.abs(n)>a/2)&&(i=n<0?"next":"prev"),this.loop||(0===s&&"prev"===i||s===o-1&&"next"===i)&&(i=null),this.$children.length<2&&(i=null),this.doAnimate(i,{offsetLeft:n,pageWidth:e.pageWidth,prevPage:e.prevPage,currentPage:e.dragPage,nextPage:e.nextPage}),this.dragState={})}},clearTimer:function(){clearInterval(this.timer),this.timer=null},throttle:function(e,t,i){i=i||100,clearTimeout(e.tId),e.tId=setTimeout(function(){e.call(t)},i)}}}},119:function(e,t,i){t=e.exports=i(1)(void 0),t.push([e.i,'.wd-swipe{height:4rem}.wd-swipe,.wd-swipe-items-wrap{overflow:hidden;position:relative}.wd-swipe-items-wrap{height:100%}.wd-swipe-items-wrap>.wd-swipe-item{position:absolute;-webkit-transform:translateX(-100%);-ms-transform:translateX(-100%);transform:translateX(-100%);width:100%;height:100%;display:none}.wd-swipe-items-wrap>.wd-swipe-item.current{display:block;-webkit-transform:none;-ms-transform:none;transform:none}.wd-swipe-indicator-wrap{position:absolute;bottom:0;width:100%;height:.933333rem}.wd-swipe-indicator-wrap-background{background:rgba(0,0,0,.2)}.wd-swipe-item-title{line-height:.933333rem;font-size:.4rem;text-indent:1em}.wd-swipe-indicators{position:absolute;bottom:.24rem;left:50%;-webkit-transform:translateX(-50%);-ms-transform:translateX(-50%);transform:translateX(-50%)}.wd-swipe-indicator{display:inline-block;width:.266667rem;height:.266667rem;-webkit-border-radius:50%;border-radius:50%;background:#fff;opacity:.5;margin:0 .133333rem}.wd-swipe-indicator:first-child{margin-left:0}.wd-swipe-indicator:last-child{margin-right:0}.wd-swipe-indicator.current{opacity:1}.wd-swipe-indicators-right{position:absolute;left:auto;right:.266667rem;-webkit-transform:translateX(0);-ms-transform:translateX(0);transform:translateX(0)}.wd-swipe-number-indicator{position:absolute;width:1.333333rem;height:.933333rem;right:0;font-size:.24rem;text-align:center;line-height:.933333rem;color:#fff}.wd-swipe-vertical-indicators{position:absolute;right:.666667rem;top:50%;-webkit-transform:translateY(-50%);-ms-transform:translateY(-50%);transform:translateY(-50%)}.wd-swipe-vertical-indicator{display:block;width:.066667rem;height:.066667rem;border:.053333rem solid hsla(90,1%,60%,.6);background-color:transparent;-webkit-border-radius:100%;border-radius:100%;margin:0 0 .533333rem;cursor:pointer;-webkit-transition:all .36s linear;transition:all .36s linear;position:relative;-webkit-box-sizing:content-box;box-sizing:content-box}.wd-swipe-vertical-indicator:after,.wd-swipe-vertical-indicator:before{content:"";display:inline-block;width:.413333rem;height:.413333rem;border:.026667rem solid transparent;-webkit-box-sizing:content-box;box-sizing:content-box;-webkit-border-radius:100%;border-radius:100%;position:absolute;top:-.2rem;left:-.2rem}.wd-swipe-vertical-indicator:before{width:.28rem;height:.28rem;top:-.133333rem;left:-.133333rem;opacity:.3}.wd-swipe-vertical-indicator.current,.wd-swipe-vertical-indicator:hover{border-color:#fff;background-color:#258fb8}.wd-swipe-vertical-indicator.current:after,.wd-swipe-vertical-indicator.current:before{border-color:#258fb8;-webkit-animation:blink 3s linear infinite;animation:blink 3s linear infinite}@-webkit-keyframes blink{0%{-webkit-transform:scale(0) translateZ(0);transform:scale(0) translateZ(0);opacity:0}85%{opacity:1}to{opacity:0;-webkit-transform:scale(1) translateZ(0);transform:scale(1) translateZ(0)}}@keyframes blink{0%{-webkit-transform:scale(0) translateZ(0);transform:scale(0) translateZ(0);opacity:0}85%{opacity:1}to{opacity:0;-webkit-transform:scale(1) translateZ(0);transform:scale(1) translateZ(0)}}',""])},159:function(e,t){e.exports={render:function(){var e=this,t=e.$createElement,i=e._self._c||t;return i("div",{staticClass:"wd-swipe"},[i("div",{ref:"wrap",staticClass:"wd-swipe-items-wrap"},[e._t("default")],2),e._v(" "),e.showIndicators?i("div",{staticClass:"wd-swipe-indicator-wrap",class:e.showTitle?"wd-swipe-indicator-wrap-background":""},[e.showTitle?i("div",{staticClass:"wd-swipe-item-title"},[e._v(e._s(e.title))]):e._e(),e._v(" "),"dot"===e.indicatorsType?i("ul",{class:["right"===e.indicatorsPosition?"wd-swipe-indicators-right":"","wd-swipe-indicators"]},e._l(e.pages,function(t,n){return i("li",{class:[n===e.index?"current":"","wd-swipe-indicator"]})})):e._e(),e._v(" "),"number"===e.indicatorsType?i("div",{staticClass:"wd-swipe-number-indicator"},[e._v(e._s(e.index+1)+" / "+e._s(e.pages.length))]):e._e()]):e._e()])},staticRenderFns:[]}},188:function(e,t,i){var n=i(119);"string"==typeof n&&(n=[[e.i,n,""]]),n.locals&&(e.exports=n.locals);i(2)("851717a8",n,!0)},2:function(e,t,i){function n(e){for(var t=0;t<e.length;t++){var i=e[t],n=c[i.id];if(n){n.refs++;for(var r=0;r<n.parts.length;r++)n.parts[r](i.parts[r]);for(;r<i.parts.length;r++)n.parts.push(a(i.parts[r]));n.parts.length>i.parts.length&&(n.parts.length=i.parts.length)}else{for(var s=[],r=0;r<i.parts.length;r++)s.push(a(i.parts[r]));c[i.id]={id:i.id,refs:1,parts:s}}}}function r(){var e=document.createElement("style");return e.type="text/css",u.appendChild(e),e}function a(e){var t,i,n=document.querySelector('style[data-vue-ssr-id~="'+e.id+'"]');if(n){if(h)return m;n.parentNode.removeChild(n)}if(g){var a=p++;n=f||(f=r()),t=s.bind(null,n,a,!1),i=s.bind(null,n,a,!0)}else n=r(),t=o.bind(null,n),i=function(){n.parentNode.removeChild(n)};return t(e),function(n){if(n){if(n.css===e.css&&n.media===e.media&&n.sourceMap===e.sourceMap)return;t(e=n)}else i()}}function s(e,t,i,n){var r=i?"":n.css;if(e.styleSheet)e.styleSheet.cssText=v(t,r);else{var a=document.createTextNode(r),s=e.childNodes;s[t]&&e.removeChild(s[t]),s.length?e.insertBefore(a,s[t]):e.appendChild(a)}}function o(e,t){var i=t.css,n=t.media,r=t.sourceMap;if(n&&e.setAttribute("media",n),r&&(i+="\n/*# sourceURL="+r.sources[0]+" */",i+="\n/*# sourceMappingURL=data:application/json;base64,"+btoa(unescape(encodeURIComponent(JSON.stringify(r))))+" */"),e.styleSheet)e.styleSheet.cssText=i;else{for(;e.firstChild;)e.removeChild(e.firstChild);e.appendChild(document.createTextNode(i))}}var l="undefined"!=typeof document;if("undefined"!=typeof DEBUG&&DEBUG&&!l)throw new Error("vue-style-loader cannot be used in a non-browser environment. Use { target: 'node' } in your Webpack config to indicate a server-rendering environment.");var d=i(3),c={},u=l&&(document.head||document.getElementsByTagName("head")[0]),f=null,p=0,h=!1,m=function(){},g="undefined"!=typeof navigator&&/msie [6-9]\b/.test(navigator.userAgent.toLowerCase());e.exports=function(e,t,i){h=i;var r=d(e,t);return n(r),function(t){for(var i=[],a=0;a<r.length;a++){var s=r[a],o=c[s.id];o.refs--,i.push(o)}t?(r=d(e,t),n(r)):r=[];for(var a=0;a<i.length;a++){var o=i[a];if(0===o.refs){for(var l=0;l<o.parts.length;l++)o.parts[l]();delete c[o.id]}}}};var v=function(){var e=[];return function(t,i){return e[t]=i,e.filter(Boolean).join("\n")}}()},3:function(e,t){e.exports=function(e,t){for(var i=[],n={},r=0;r<t.length;r++){var a=t[r],s=a[0],o=a[1],l=a[2],d=a[3],c={id:e+":"+r,css:o,media:l,sourceMap:d};n[s]?n[s].parts.push(c):i.push(n[s]={id:s,parts:[c]})}return i}},4:function(t,i){t.exports=e},52:function(e,t,i){"use strict";Object.defineProperty(t,"__esModule",{value:!0});var n=i(73),r=i.n(n);i.d(t,"default",function(){return r.a})},73:function(e,t,i){i(188);var n=i(0)(i(105),i(159),null,null);e.exports=n.exports},85:function(e,t,i){"use strict";function n(e,t){if(!e||!t)return!1;if(-1!==t.indexOf(" "))throw new Error("className should not contain space.");return e.classList?e.classList.contains(t):(" "+e.className+" ").indexOf(" "+t+" ")>-1}function r(e,t){if(e){for(var i=e.className,r=(t||"").split(" "),a=0,s=r.length;a<s;a++){var o=r[a];o&&(e.classList?e.classList.add(o):n(e,o)||(i+=" "+o))}e.classList||(e.className=i)}}function a(e,t){if(e&&t){for(var i=t.split(" "),r=" "+e.className+" ",a=0,s=i.length;a<s;a++){var o=i[a];o&&(e.classList?e.classList.remove(o):n(e,o)&&(r=r.replace(" "+o+" "," ")))}e.classList||(e.className=d(r))}}i.d(t,"a",function(){return f}),t.c=r,t.b=a;var s=i(4),o=i.n(s),l=("function"==typeof Symbol&&Symbol.iterator,o.a.prototype.$isServer),d=(l||Number(document.documentMode),function(e){return(e||"").replace(/^[\s\uFEFF]+|[\s\uFEFF]+$/g,"")}),c=function(){return!l&&document.addEventListener?function(e,t,i){e&&t&&i&&e.addEventListener(t,i,!1)}:function(e,t,i){e&&t&&i&&e.attachEvent("on"+t,i)}}(),u=function(){return!l&&document.removeEventListener?function(e,t,i){e&&t&&e.removeEventListener(t,i,!1)}:function(e,t,i){e&&t&&e.detachEvent("on"+t,i)}}(),f=function(e,t,i){c(e,t,function n(){i&&i.apply(this,arguments),u(e,t,n)})}}})});