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

A Vue.js 2.0 UI Toolkit for mobile

module.exports=function(t){function e(r){if(n[r])return n[r].exports;var o=n[r]={i:r,l:!1,exports:{}};return t[r].call(o.exports,o,o.exports,e),o.l=!0,o.exports}var n={};return e.m=t,e.c=n,e.d=function(t,n,r){e.o(t,n)||Object.defineProperty(t,n,{configurable:!1,enumerable:!0,get:r})},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=393)}({0:function(t,e){t.exports=function(t,e,n,r,o,i){var s,a=t=t||{},l=typeof t.default;"object"!==l&&"function"!==l||(s=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),o&&(c._scopeId=o);var f;if(i?(f=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__),r&&r.call(this,t),t&&t._registeredComponents&&t._registeredComponents.add(i)},c._ssrRegister=f):r&&(f=r),f){var u=c.functional,h=u?c.render:c.beforeCreate;u?(c._injectStyles=f,c.render=function(t,e){return f.call(e),h(t,e)}):c.beforeCreate=h?[].concat(h,f):[f]}return{esModule:s,exports:a,options:c}}},1:function(t,e,n){"use strict";function r(t,e){var n=t[1]||"",r=t[3];if(!r)return n;if(e&&"function"==typeof btoa){var i=o(r);return[n].concat(r.sources.map(function(t){return"/*# sourceURL="+r.sourceRoot+t+" */"})).concat([i]).join("\n")}return[n].join("\n")}function o(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=r(e,t);return e[2]?"@media "+e[2]+"{"+n+"}":n}).join("")},e.i=function(t,n){"string"==typeof t&&(t=[[null,t,""]]);for(var r={},o=0;o<this.length;o++){var i=this[o][0];"number"==typeof i&&(r[i]=!0)}for(o=0;o<t.length;o++){var s=t[o];"number"==typeof s[0]&&r[s[0]]||(n&&!s[2]?s[2]=n:n&&(s[2]="("+s[2]+") and ("+n+")"),e.push(s))}},e}},2:function(t,e,n){function r(t){for(var e=0;e<t.length;e++){var n=t[e],r=f[n.id];if(r){r.refs++;for(var o=0;o<r.parts.length;o++)r.parts[o](n.parts[o]);for(;o<n.parts.length;o++)r.parts.push(i(n.parts[o]));r.parts.length>n.parts.length&&(r.parts.length=n.parts.length)}else{for(var s=[],o=0;o<n.parts.length;o++)s.push(i(n.parts[o]));f[n.id]={id:n.id,refs:1,parts:s}}}}function o(){var t=document.createElement("style");return t.type="text/css",u.appendChild(t),t}function i(t){var e,n,r=document.querySelector("style["+v+'~="'+t.id+'"]');if(r){if(p)return m;r.parentNode.removeChild(r)}if(g){var i=d++;r=h||(h=o()),e=s.bind(null,r,i,!1),n=s.bind(null,r,i,!0)}else r=o(),e=a.bind(null,r),n=function(){r.parentNode.removeChild(r)};return e(t),function(r){if(r){if(r.css===t.css&&r.media===t.media&&r.sourceMap===t.sourceMap)return;e(t=r)}else n()}}function s(t,e,n,r){var o=n?"":r.css;if(t.styleSheet)t.styleSheet.cssText=x(e,o);else{var i=document.createTextNode(o),s=t.childNodes;s[e]&&t.removeChild(s[e]),s.length?t.insertBefore(i,s[e]):t.appendChild(i)}}function a(t,e){var n=e.css,r=e.media,o=e.sourceMap;if(r&&t.setAttribute("media",r),b.ssrId&&t.setAttribute(v,e.id),o&&(n+="\n/*# sourceURL="+o.sources[0]+" */",n+="\n/*# sourceMappingURL=data:application/json;base64,"+btoa(unescape(encodeURIComponent(JSON.stringify(o))))+" */"),t.styleSheet)t.styleSheet.cssText=n;else{for(;t.firstChild;)t.removeChild(t.firstChild);t.appendChild(document.createTextNode(n))}}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 c=n(3),f={},u=l&&(document.head||document.getElementsByTagName("head")[0]),h=null,d=0,p=!1,m=function(){},b=null,v="data-vue-ssr-id",g="undefined"!=typeof navigator&&/msie [6-9]\b/.test(navigator.userAgent.toLowerCase());t.exports=function(t,e,n,o){p=n,b=o||{};var i=c(t,e);return r(i),function(e){for(var n=[],o=0;o<i.length;o++){var s=i[o],a=f[s.id];a.refs--,n.push(a)}e?(i=c(t,e),r(i)):i=[];for(var o=0;o<n.length;o++){var a=n[o];if(0===a.refs){for(var l=0;l<a.parts.length;l++)a.parts[l]();delete f[a.id]}}}};var x=function(){var t=[];return function(e,n){return t[e]=n,t.filter(Boolean).join("\n")}}()},3:function(t,e,n){"use strict";t.exports=function(t,e){for(var n=[],r={},o=0;o<e.length;o++){var i=e[o],s=i[0],a=i[1],l=i[2],c=i[3],f={id:t+":"+o,css:a,media:l,sourceMap:c};r[s]?r[s].parts.push(f):n.push(r[s]={id:s,parts:[f]})}return n}},320:function(t,e,n){"use strict";Object.defineProperty(e,"__esModule",{value:!0}),e.default={name:"w-scroll-tab",props:{name:String,showSide:{type:Boolean,default:!0},canScroll:{type:Function}},data:function(){return{navList:[],activeIndex:0,sizeInfo:[],maxScrollTop:0,drag:!1,startX:0,startY:0,startTime:0,currentY:0,offsetH:0,lastTime:0,timer:null,hh:0}},methods:{getPanels:function(){return this.$children.filter(function(t){return"w-scroll-tab-panel"===t.$options.name})},touchstart:function(t){this.drag=!0;var e=t.targetTouches||[t];e=e[0],this.startX=e.pageX,this.startY=e.pageY,this.startTime=Date.now(),this.offsetH=0,this.currentY=this.getCurrentY(),this.hh=this.$refs.scrollView.offsetHeight,this.maxScrollTop=this.hh-this.$refs.box.offsetHeight,this.maxScrollTop>0&&(this.maxScrollTop=0)},touchmove:function(t){this.drag&&this.move(t)},touchend:function(t){if(this.drag){this.drag=!1;var e=this.getCurrentY();e>=0?this.bounceBack(0,0):e<=this.maxScrollTop?this.bounceBack(0,this.maxScrollTop):this.momentumMove(t)}},move:function(t){if(this.drag){if(this.canScroll&&!this.canScroll())return;var e=t.targetTouches||[t];e=e[0];var n=e.pageX-this.startX,r=e.pageY-this.startY;if(Math.abs(r)>Math.abs(n)){this.offsetH=r;var o=this.currentY+r;o>=0||o<=this.maxScrollTop||(o=this.getDamping(o),this.translateTo(0,o,0,!0),this.scrollHandler(o),t.preventDefault(),t.stopPropagation())}}},momentumMove:function(t){var e=this,n=Date.now()-this.startTime,r=this.getCurrentY();if(!(n>500||Math.abs(this.offsetH)<10)){var o=Math.abs(this.offsetH)/n,i=o*o/4e-4*(this.offsetH<0?-1:1),s=Math.round(r+i),a=Math.round(i/o);s<this.maxScrollTop?s=this.maxScrollTop:s>0&&(s=0),this.translateTo(0,s,a),this.scrollHandler(s),setTimeout(function(){r=e.getCurrentY(),r>=0?e.bounceBack(0,0):r<e.maxScrollTop&&e.bounceBack(0,e.maxScrollTop)},a)}},bounceBack:function(t,e,n){var r=n||500;this.translateTo(t,e,r)},setDefault:function(){var t=this,e=this.getPanels(),n=0;e.forEach(function(r,o){t.navList.push({name:r.name,_uid:o,icon:r.icon}),r.active?(t.activeIndex=o,t.moveHandler(o)):++n>=e.length&&(t.activeIndex=0)}),this.$emit("change",this.activeIndex)},translateTo:function(t,e,n,r){var o=n||300;o<300&&(o=300),o>600&&(o=600),r?(this.$refs.box.style.webkitTransition="none",this.$refs.box.style.transition="none"):(this.$refs.box.style.webkitTransition=o+"ms all cubic-bezier(0.1, 0.57, 0.1, 1)",this.$refs.box.style.transition=o+"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)"},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)},getDamping:function(t){var e=this.maxScrollTop;return t>0?Math.round(t/4):t<e?Math.round(e-(e-t)/4):t},moveHandler:function(t){var e=this.sizeInfo[t],n=e.offsetTop;0==t&&(n=0),n<this.maxScrollTop&&(n=this.maxScrollTop),this.translateTo(0,-n,200),this.activeIndex=t,this.$emit("change",this.activeIndex)},scrollHandler:function(t){var e=this,n=this.getPanels(),r=(n.length,!1);this.sizeInfo.forEach(function(n,o){n&&n.offsetTop<=-t&&(r=!0,e.activeIndex=o)}),r?this.$emit("change",this.activeIndex):this.$emit("unsticky")},setCurrent:function(t){this.moveHandler(t)},scrollToBottom:function(){var t=this;this.$nextTick(function(){t.translateTo(0,t.maxScrollTop,0,!0),t.$emit("change",t.getPanels().length-1)})},scrollToTop:function(){var t=this;this.$nextTick(function(){t.translateTo(0,0,0,!0),t.$emit("change",0)})},init:function(){var t=this;this.getPanels().forEach(function(e,n){t.sizeInfo.push({offsetTop:e.$el.offsetTop,offsetHeight:e.$el.offsetHeight})});this.sizeInfo[this.sizeInfo.length-1];this.hh=this.$refs.scrollView.offsetHeight,this.maxScrollTop=this.hh-this.$refs.box.offsetHeight,this.maxScrollTop>0&&(this.maxScrollTop=0),this.setDefault()}},mounted:function(){var t=this;this.$nextTick(function(){t.init(),t.$refs.scrollView.addEventListener("touchmove",t.touchmove,!1),t.$refs.scrollView.addEventListener("mousemove",t.touchmove,!1),t.$refs.scrollView.addEventListener("touchend",t.touchend,!1),t.$refs.scrollView.addEventListener("mouseup",t.touchend,!1)})}}},393:function(t,e,n){"use strict";Object.defineProperty(e,"__esModule",{value:!0}),e.ScrollTab=void 0;var r=n(394),o=function(t){return t&&t.__esModule?t:{default:t}}(r);e.ScrollTab=o.default},394:function(t,e,n){"use strict";function r(t){l||n(395)}Object.defineProperty(e,"__esModule",{value:!0});var o=n(320),i=n.n(o);for(var s in o)"default"!==s&&function(t){n.d(e,t,function(){return o[t]})}(s);var a=n(397),l=!1,c=n(0),f=r,u=c(i.a,a.a,!1,f,null,null);u.options.__file="packages/scroll-tab/src/scrolltab.vue",e.default=u.exports},395:function(t,e,n){var r=n(396);"string"==typeof r&&(r=[[t.i,r,""]]),r.locals&&(t.exports=r.locals);n(2)("ef9d9442",r,!1,{})},396:function(t,e,n){e=t.exports=n(1)(!1),e.push([t.i,"\n.wui-scroll-tab {\n  width: 100%;\n  height: 100%;\n  display: -webkit-box;\n  display: -webkit-flex;\n  display: -ms-flexbox;\n  display: flex;\n}\n.wui-scroll-tab .scroll-tab-nav {\n  height: 100%;\n  background-color: #F5F5F5;\n  overflow-y: auto;\n  -webkit-overflow-scrolling: touch;\n  position: relative;\n  z-index: 1;\n}\n.wui-scroll-tab .scroll-tab-nav:after {\n  content: '';\n  position: absolute;\n  z-index: 0;\n  top: 0;\n  right: 0;\n  height: 100%;\n  border-right: 1px solid #DFDFDF;\n  -webkit-transform: scaleX(0.5);\n  transform: scaleX(0.5);\n  -webkit-transform-origin: 0 0;\n  transform-origin: 0 0;\n}\n.wui-scroll-tab .scroll-tab-item {\n  padding: 0 .3rem;\n  height: 1rem;\n  display: -webkit-box;\n  display: -webkit-flex;\n  display: -ms-flexbox;\n  display: flex;\n  -webkit-box-align: center;\n  -webkit-align-items: center;\n      -ms-flex-align: center;\n          align-items: center;\n  position: relative;\n  z-index: 1;\n}\n.wui-scroll-tab .scroll-tab-item:after {\n  content: '';\n  position: absolute;\n  z-index: 0;\n  bottom: 0;\n  left: 0;\n  width: 100%;\n  border-bottom: 1px solid #DFDFDF;\n  -webkit-transform: scaleY(0.5);\n  transform: scaleY(0.5);\n  -webkit-transform-origin: 0 0;\n  transform-origin: 0 0;\n}\n.wui-scroll-tab .scroll-tab-item:before {\n  content: '';\n  position: absolute;\n  z-index: 0;\n  top: 0;\n  right: 0;\n  height: 100%;\n  border-right: 1px solid #DFDFDF;\n  -webkit-transform: scaleX(0.5);\n  transform: scaleX(0.5);\n  -webkit-transform-origin: 0 0;\n  transform-origin: 0 0;\n}\n.wui-scroll-tab .scroll-tab-item:active {\n  background: none;\n  /* for firefox */\n}\n.wui-scroll-tab .scroll-tab-active {\n  background-color: #FFF;\n}\n.wui-scroll-tab .scroll-tab-active:before {\n  content: '';\n  position: absolute;\n  z-index: 0;\n  top: 0;\n  right: 0;\n  height: 100%;\n  border-right: 1px solid #FFF;\n  -webkit-transform: scaleX(0.5);\n  transform: scaleX(0.5);\n  -webkit-transform-origin: 0 0;\n  transform-origin: 0 0;\n}\n.wui-scroll-tab .scroll-tab-active:active {\n  background-color: #FFF;\n}\n.wui-scroll-tab .scroll-tab-icon {\n  margin-right: .2rem;\n  font-size: .32rem;\n  display: -webkit-box;\n  display: -webkit-flex;\n  display: -ms-flexbox;\n  display: flex;\n  -webkit-box-align: center;\n  -webkit-align-items: center;\n      -ms-flex-align: center;\n          align-items: center;\n  -webkit-box-pack: center;\n  -webkit-justify-content: center;\n      -ms-flex-pack: center;\n          justify-content: center;\n}\n.wui-scroll-tab .scroll-tab-icon > img {\n  height: .4rem;\n  display: inline-block;\n}\n.wui-scroll-tab .scroll-tab-title {\n  font-size: .3rem;\n  color: #666;\n  overflow-x: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n  max-width: 1.6rem;\n}\n.wui-scroll-tab .scroll-tab-content {\n  height: 100%;\n  background-color: #FFF;\n  overflow: hidden;\n  -webkit-box-flex: 1;\n  -webkit-flex: 1;\n      -ms-flex: 1;\n          flex: 1;\n  padding: 0 .24rem .24rem .24rem;\n  position: relative;\n}\n.wui-scroll-tab .scroll-tab-content-title {\n  font-size: .3rem;\n  font-weight: bolder;\n  color: #555;\n  display: block;\n  padding-bottom: .1rem;\n  padding-top: .32rem;\n  margin-bottom: .2rem;\n  position: relative;\n  z-index: 1;\n}\n",""])},397:function(t,e,n){"use strict";var r=function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",{staticClass:"wui-scroll-tab"},[t.showSide?n("div",{staticClass:"scroll-tab-nav"},t._l(t.navList,function(e,r){return n("div",{key:"scrolltab-"+r,staticClass:"scroll-tab-item",class:t.activeIndex==r?"scroll-tab-active":"",on:{click:function(e){t.moveHandler(r)}}},[e.icon?n("div",{staticClass:"scroll-tab-icon"},[n("i",{class:"ti-"+e.icon})]):t._e(),t._v(" "),n("div",{staticClass:"scroll-tab-title"},[t._v(t._s(e.name))])])})):t._e(),t._v(" "),n("div",{ref:"scrollView",staticClass:"scroll-tab-content"},[n("div",{ref:"box",staticClass:"scroll-tab-container",on:{touchstart:t.touchstart,mousedown:t.touchstart}},[t._t("default")],2)])])},o=[];r._withStripped=!0;var i={render:r,staticRenderFns:o};e.a=i}});