w-ui/lib/scroll-card/index.js

A Vue.js 2.0 UI Toolkit for mobile

module.exports=function(t){function e(i){if(n[i])return n[i].exports;var s=n[i]={i:i,l:!1,exports:{}};return t[i].call(s.exports,s,s.exports,e),s.l=!0,s.exports}var n={};return e.m=t,e.c=n,e.d=function(t,n,i){e.o(t,n)||Object.defineProperty(t,n,{configurable:!1,enumerable:!0,get:i})},e.n=function(t){var n=t&&t.__esModule?function(){return t.default}:function(){return t};return e.d(n,"a",n),n},e.o=function(t,e){return Object.prototype.hasOwnProperty.call(t,e)},e.p="",e(e.s=231)}({0:function(t,e){t.exports=function(t,e,n,i,s,r){var o,a=t=t||{},h=typeof t.default;"object"!==h&&"function"!==h||(o=t,a=t.default);var c="function"==typeof a?a.options:a;e&&(c.render=e.render,c.staticRenderFns=e.staticRenderFns,c._compiled=!0),n&&(c.functional=!0),s&&(c._scopeId=s);var u;if(r?(u=function(t){t=t||this.$vnode&&this.$vnode.ssrContext||this.parent&&this.parent.$vnode&&this.parent.$vnode.ssrContext,t||"undefined"==typeof __VUE_SSR_CONTEXT__||(t=__VUE_SSR_CONTEXT__),i&&i.call(this,t),t&&t._registeredComponents&&t._registeredComponents.add(r)},c._ssrRegister=u):i&&(u=i),u){var l=c.functional,f=l?c.render:c.beforeCreate;l?(c._injectStyles=u,c.render=function(t,e){return u.call(e),f(t,e)}):c.beforeCreate=f?[].concat(f,u):[u]}return{esModule:o,exports:a,options:c}}},1:function(t,e,n){"use strict";function i(t,e){var n=t[1]||"",i=t[3];if(!i)return n;if(e&&"function"==typeof btoa){var r=s(i);return[n].concat(i.sources.map(function(t){return"/*# sourceURL="+i.sourceRoot+t+" */"})).concat([r]).join("\n")}return[n].join("\n")}function s(t){return"/*# sourceMappingURL=data:application/json;charset=utf-8;base64,"+btoa(unescape(encodeURIComponent(JSON.stringify(t))))+" */"}t.exports=function(t){var e=[];return e.toString=function(){return this.map(function(e){var n=i(e,t);return e[2]?"@media "+e[2]+"{"+n+"}":n}).join("")},e.i=function(t,n){"string"==typeof t&&(t=[[null,t,""]]);for(var i={},s=0;s<this.length;s++){var r=this[s][0];"number"==typeof r&&(i[r]=!0)}for(s=0;s<t.length;s++){var o=t[s];"number"==typeof o[0]&&i[o[0]]||(n&&!o[2]?o[2]=n:n&&(o[2]="("+o[2]+") and ("+n+")"),e.push(o))}},e}},2:function(t,e,n){function i(t){for(var e=0;e<t.length;e++){var n=t[e],i=u[n.id];if(i){i.refs++;for(var s=0;s<i.parts.length;s++)i.parts[s](n.parts[s]);for(;s<n.parts.length;s++)i.parts.push(r(n.parts[s]));i.parts.length>n.parts.length&&(i.parts.length=n.parts.length)}else{for(var o=[],s=0;s<n.parts.length;s++)o.push(r(n.parts[s]));u[n.id]={id:n.id,refs:1,parts:o}}}}function s(){var t=document.createElement("style");return t.type="text/css",l.appendChild(t),t}function r(t){var e,n,i=document.querySelector("style["+w+'~="'+t.id+'"]');if(i){if(m)return p;i.parentNode.removeChild(i)}if(x){var r=d++;i=f||(f=s()),e=o.bind(null,i,r,!1),n=o.bind(null,i,r,!0)}else i=s(),e=a.bind(null,i),n=function(){i.parentNode.removeChild(i)};return e(t),function(i){if(i){if(i.css===t.css&&i.media===t.media&&i.sourceMap===t.sourceMap)return;e(t=i)}else n()}}function o(t,e,n,i){var s=n?"":i.css;if(t.styleSheet)t.styleSheet.cssText=b(e,s);else{var r=document.createTextNode(s),o=t.childNodes;o[e]&&t.removeChild(o[e]),o.length?t.insertBefore(r,o[e]):t.appendChild(r)}}function a(t,e){var n=e.css,i=e.media,s=e.sourceMap;if(i&&t.setAttribute("media",i),v.ssrId&&t.setAttribute(w,e.id),s&&(n+="\n/*# sourceURL="+s.sources[0]+" */",n+="\n/*# sourceMappingURL=data:application/json;base64,"+btoa(unescape(encodeURIComponent(JSON.stringify(s))))+" */"),t.styleSheet)t.styleSheet.cssText=n;else{for(;t.firstChild;)t.removeChild(t.firstChild);t.appendChild(document.createTextNode(n))}}var h="undefined"!=typeof document;if("undefined"!=typeof DEBUG&&DEBUG&&!h)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 c=n(3),u={},l=h&&(document.head||document.getElementsByTagName("head")[0]),f=null,d=0,m=!1,p=function(){},v=null,w="data-vue-ssr-id",x="undefined"!=typeof navigator&&/msie [6-9]\b/.test(navigator.userAgent.toLowerCase());t.exports=function(t,e,n,s){m=n,v=s||{};var r=c(t,e);return i(r),function(e){for(var n=[],s=0;s<r.length;s++){var o=r[s],a=u[o.id];a.refs--,n.push(a)}e?(r=c(t,e),i(r)):r=[];for(var s=0;s<n.length;s++){var a=n[s];if(0===a.refs){for(var h=0;h<a.parts.length;h++)a.parts[h]();delete u[a.id]}}}};var b=function(){var t=[];return function(e,n){return t[e]=n,t.filter(Boolean).join("\n")}}()},231:function(t,e,n){"use strict";Object.defineProperty(e,"__esModule",{value:!0}),e.ScrollCard=void 0;var i=n(232),s=function(t){return t&&t.__esModule?t:{default:t}}(i);e.ScrollCard=s.default},232:function(t,e,n){"use strict";function i(t){h||n(233)}Object.defineProperty(e,"__esModule",{value:!0});var s=n(48),r=n.n(s);for(var o in s)"default"!==o&&function(t){n.d(e,t,function(){return s[t]})}(o);var a=n(235),h=!1,c=n(0),u=i,l=c(r.a,a.a,!1,u,null,null);l.options.__file="packages/scroll-card/src/scrollcard.vue",e.default=l.exports},233:function(t,e,n){var i=n(234);"string"==typeof i&&(i=[[t.i,i,""]]),i.locals&&(t.exports=i.locals);n(2)("daae65ce",i,!1,{})},234:function(t,e,n){e=t.exports=n(1)(!1),e.push([t.i,"\n.wui-scroll-card-h {\n  width: 100%;\n  overflow: hidden;\n}\n.wui-scroll-card-h .wui-scroll-nav {\n  min-width: 5000%;\n  overflow: hidden;\n}\n.wui-scroll-card-h .wui-scroll-nav .wui-scroll-container {\n  display: -webkit-inline-box;\n  display: -webkit-inline-flex;\n  display: -ms-inline-flexbox;\n  display: inline-flex;\n  -webkit-align-content: center;\n      -ms-flex-line-pack: center;\n          align-content: center;\n  -webkit-box-pack: start;\n  -webkit-justify-content: flex-start;\n      -ms-flex-pack: start;\n          justify-content: flex-start;\n  -webkit-flex-wrap: nowrap;\n      -ms-flex-wrap: nowrap;\n          flex-wrap: nowrap;\n  -webkit-backface-visibility: hidden;\n          backface-visibility: hidden;\n}\n.wui-scroll-card-v {\n  width: 100%;\n  height: 100%;\n  overflow: hidden;\n}\n.wui-scroll-card-v .wui-scroll-nav {\n  min-height: 5000%;\n  overflow: hidden;\n}\n.wui-scroll-card-v .wui-scroll-nav .wui-scroll-container {\n  display: -webkit-box;\n  display: -webkit-flex;\n  display: -ms-flexbox;\n  display: flex;\n  -webkit-box-orient: vertical;\n  -webkit-box-direction: normal;\n  -webkit-flex-direction: column;\n      -ms-flex-direction: column;\n          flex-direction: column;\n  -webkit-align-content: center;\n      -ms-flex-line-pack: center;\n          align-content: center;\n  -webkit-box-pack: start;\n  -webkit-justify-content: flex-start;\n      -ms-flex-pack: start;\n          justify-content: flex-start;\n  -webkit-flex-wrap: wrap;\n      -ms-flex-wrap: wrap;\n          flex-wrap: wrap;\n  -webkit-backface-visibility: hidden;\n          backface-visibility: hidden;\n}\n",""])},235:function(t,e,n){"use strict";var i=function(){var t=this,e=t.$createElement,n=t._self._c||e;return"h"===t.direction?n("div",{staticClass:"wui-scroll-card-h"},[n("div",{ref:"nav",staticClass:"wui-scroll-nav"},[n("div",{ref:"box",staticClass:"wui-scroll-container",on:{touchstart:t.touchstart,mousedown:t.touchstart}},[t._t("default")],2)])]):n("div",{staticClass:"wui-scroll-card-v"},[n("div",{ref:"nav",staticClass:"wui-scroll-nav"},[n("div",{ref:"box",staticClass:"wui-scroll-container",on:{touchstart:t.touchstart,mousedown:t.touchstart}},[t._t("default")],2)])])},s=[];i._withStripped=!0;var r={render:i,staticRenderFns:s};e.a=r},3:function(t,e,n){"use strict";t.exports=function(t,e){for(var n=[],i={},s=0;s<e.length;s++){var r=e[s],o=r[0],a=r[1],h=r[2],c=r[3],u={id:t+":"+s,css:a,media:h,sourceMap:c};i[o]?i[o].parts.push(u):n.push(i[o]={id:o,parts:[u]})}return n}},48:function(t,e,n){"use strict";Object.defineProperty(e,"__esModule",{value:!0}),e.default={name:"w-scroll-card",data:function(){return{drag:!1,startX:0,startY:0,startTime:0,currentX:0,currentY:0,currentIndex:0,offsetW:0,offsetH:0,lastTime:0,timer:null,total:0,ww:0}},props:{direction:{type:String,default:"h"},change:Function,centerActivedItem:{type:Boolean,default:!0}},methods:{touchstart:function(t){this.drag=!0;var e=t.targetTouches||[t];if(e=e[0],this.startX=e.pageX,this.startY=e.pageY,this.startTime=Date.now(),this.offsetW=0,this.offsetH=0,"h"==this.direction){this.currentX=this.getCurrentX();var n=this.$refs.box.offsetWidth;this.ww=this.$el.offsetWidth,this.maxsw=0,this.minsw=this.ww-n,this.minsw>0&&(this.minsw=0)}else if("v"==this.direction){this.currentY=this.getCurrentY();var i=this.$refs.box.offsetHeight;this.hh=this.$el.offsetHeight,this.maxsh=0,this.minsh=this.hh-i,this.minsh>0&&(this.minsh=0)}t.preventDefault(),t.stopPropagation()},touchmove:function(t){this.drag&&(this.move(t),t.preventDefault(),t.stopPropagation())},touchend:function(t){if(this.drag)if(this.drag=!1,"h"==this.direction){var e=this.getCurrentX();e>this.maxsw?this.bounceBack(this.maxsw,0):e<this.minsw?this.bounceBack(this.minsw,0):this.momentumMove(t)}else{var n=this.getCurrentY();n>this.maxsh?this.bounceBack(0,this.maxsh):n<this.minsh?this.bounceBack(0,this.minsh):this.momentumMove(t)}},move:function(t){if(this.drag){var e=t.targetTouches||[t];if(e=e[0],"h"==this.direction){var n=e.pageX-this.startX;this.offsetW=n;var i=this.currentX+n;i=this.getDamping(i),this.translateTo(i,0,0,!0)}else{var s=e.pageY-this.startY;this.offsetH=s;var r=this.currentY+s;r=this.getDamping(r),this.translateTo(0,r,0,!0)}}},bounceBack:function(t,e,n){var i=n||500;this.translateTo(t,e,i)},getDamping:function(t){var e=this.minsw;return"v"===this.direction&&(e=this.minsh),t>0?Math.round(t/4):t<e?Math.round(e-(e-t)/4):t},momentumMove:function(t){var e=this,n=Date.now()-this.startTime;if("h"==this.direction){var i=this.getCurrentX();if(n>500||Math.abs(this.offsetW)<10)return void this.slotClick(t);var s=Math.abs(this.offsetW)/n,r=s*s/8e-4*(this.offsetW<0?-1:1),o=Math.round(i+r),a=Math.round(r/s);o<this.minsw?o=Math.round(this.minsw-this.ww/(6*s)):o>0&&(o=Math.round(this.ww/(6*s))),a<300&&(a=300),a>600&&(a=600),this.translateTo(o,0,a),setTimeout(function(){i=e.getCurrentX(),i>e.maxsw?e.bounceBack(e.maxsw,0):i<e.minsw&&e.bounceBack(e.minsw,0)},a)}else{var h=this.getCurrentY();if(n>500||Math.abs(this.offsetH)<10)return void this.slotClick(t);var c=Math.abs(this.offsetH)/n,u=c*c/4e-4*(this.offsetH<0?-1:1),l=Math.round(h+u),f=Math.round(u/c);l<this.minsh?l=Math.round(this.minsh-this.hh/(6*c)):l>0&&(l=Math.round(this.hh/(6*c))),f<300&&(f=300),f>600&&(f=600),this.translateTo(0,l,f),setTimeout(function(){h=e.getCurrentY(),h>e.maxsh?e.bounceBack(0,e.maxsh):h<e.minsh&&e.bounceBack(0,e.minsh)},f)}},getCurrentX:function(){var t="0",e=this.$refs.box.style.transform;if(e){var n=e.replace(/\s/g,"").match(/translate3d\(([^,]+),(?:.*?)\)/);n&&n.length>1&&(t=n[1].replace("px",""))}return Number.isNaN(t)?0:parseInt(t)},getCurrentY:function(){var t="0",e=this.$refs.box.style.transform;if(e){var n=e.replace(/\s/g,"").match(/translate3d\((?:.*?),(.*?),(?:.*?)\)/);n&&n.length>1&&(t=n[1].replace("px",""))}return Number.isNaN(t)?0:parseInt(t)},slotClick:function(t){var e=t.target,n=e;if(n&&e!=this.$refs.box){if(e.parentNode==this.$refs.box)n=e;else for(;n&&n.parentNode!=this.$refs.box;)n=n.parentNode;n&&this.centerItem(n)}},centerItem:function(t){var e=this;if(this.$slots.default.map(function(n,i){n.elm===t?(t.classList.add("active"),e.currentIndex=i):n.elm&&n.elm.classList&&n.elm.classList.remove("active")}),this.centerActivedItem){var n=this.$el.getBoundingClientRect(),i=t.getBoundingClientRect();if("h"==this.direction){var s=i.left-n.left,r=this.getCurrentX(),o=0;s>this.ww/2?(o=r-(s-this.ww/2+i.width/2),o<this.minsw&&(o=this.minsw),o>this.maxsw&&(o=this.maxsw)):(o=r+(this.ww/2-s-i.width/2),o>this.maxsw&&(o=this.maxsw),o<this.minsw&&(o=this.minsw)),this.translateTo(o,0,600),this.$emit("change",this.currentIndex)}else{var a=i.top-n.top,h=this.getCurrentY(),c=0;a>this.hh/2?(c=h-(a-this.hh/2+i.height/2),c<this.minsh&&(c=this.minsh),c>this.maxsh&&(c=this.maxsh)):(c=h+(this.hh/2-a-i.height/2),c>this.maxsh&&(c=this.maxsh),c<this.minsh&&(c=this.minsh)),this.translateTo(0,c,600),this.$emit("change",this.currentIndex)}}},translateTo:function(t,e,n,i){var s=n||300;n<300&&(n=300),n>1200&&(n=1200),i?(this.$refs.box.style.webkitTransition="none",this.$refs.box.style.transition="none"):(this.$refs.box.style.webkitTransition=s+"ms all cubic-bezier(0.1, 0.57, 0.1, 1)",this.$refs.box.style.transition=s+"ms all cubic-bezier(0.1, 0.57, 0.1, 1)"),this.$refs.box.style.webkitTransform="translate("+t+"px, "+e+"px)",this.$refs.box.style.transform="translate3d("+t+"px, "+e+"px, 0)"},setCurrent:function(t){t>=0&&t<this.total&&(this.currentX=t,this.centerItem(this.$slots.default[t].elm))}},mounted:function(){if(this.total=this.$slots.default.length,"h"==this.direction){var t=this.$refs.box.offsetWidth;this.ww=this.$el.offsetWidth,this.maxsw=0,this.minsw=this.ww-t,this.minsw>0&&(this.minsw=0)}else{var e=this.$refs.box.offsetHeight;this.hh=this.$el.offsetHeight,this.maxsh=0,this.minsh=this.hh-e,this.minsh>0&&(this.minsh=0)}this.$el.addEventListener("touchmove",this.touchmove,{passive:!0}),this.$el.addEventListener("touchend",this.touchend,{passive:!0}),window.addEventListener("mousemove",this.touchmove,!1),window.addEventListener("mouseup",this.touchend,!1)},destroyed:function(){window.removeEventListener("mousemove",this.touchmove,!1),window.removeEventListener("mouseup",this.touchend,!1)}}}});