vue2-vant2-components/lib/vvc-zoom-list/index.js

基于 vue2 和 vant2 开发的移动端表格组件

(function(){"use strict";var t={};!function(){t.d=function(i,e){for(var a in e)t.o(e,a)&&!t.o(i,a)&&Object.defineProperty(i,a,{enumerable:!0,get:e[a]})}}(),function(){t.o=function(t,i){return Object.prototype.hasOwnProperty.call(t,i)}}(),function(){t.r=function(t){"undefined"!==typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(t,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(t,"__esModule",{value:!0})}}();var i={};t.r(i),t.d(i,{default:function(){return u}});var e=function(){var t=this,i=t._self._c;return i("div",{staticClass:"vvc-zoomList",style:t.containerStyle},[i("div",{ref:"content",staticClass:"vvc-zoomList_content",style:t.contentTransformStyle},[t._t("default")],2)])},a=[],s=class{constructor(t,i){this.el===t&&this.destroy(),this.el=t,this.options=i||{touchstart:null,touchmove:null,touchend:null,touchcancel:null,doubleClick:null,wheel:null},this.saveTouches=[],this.touchStartData=null,this.touchMoveData=null,this.quickClickCount=0,this.quickClickTimear=null,this.eventList={touchstart:this.handleTouchstart.bind(this),touchmove:this.handleTouchmove.bind(this),touchend:this.handleTouchend.bind(this),touchcancel:this.handleTouchcancel.bind(this),wheel:this.handleWheel.bind(this)},Object.keys(this.eventList).forEach((t=>{this.el.addEventListener(t,this.eventList[t])}))}handleTouchstart(t){const i=this.handleTouchInfo(t,!0);this.touchStartData={event:t,...i},this.touchMoveData=null,this.options.touchstart&&this.options.touchstart(this.touchStartData)}handleTouchmove(t){t.preventDefault();const i=this.handleTouchInfo(t);this.touchMoveData={event:t,...i},this.options.touchmove&&this.options.touchmove(this.touchMoveData)}handleTouchend(t){1===this.touchStartData.touchCount&&this.handleQuickClick(),this.options.touchend&&this.options.touchend({event:t,clickCount:this.quickClickCount}),this.options.doubleClick&&this.quickClickCount&&this.quickClickCount%2===0&&this.options.doubleClick({clickCount:this.quickClickCount})}handleTouchcancel(t){this.options.touchcancel&&this.options.touchcancel({event:t})}handleQuickClick(){const t=this.touchMoveData||this.touchStartData;clearTimeout(this.quickClickTimear),Math.abs(this.touchStartData.touchX-t.touchX)<5&&Math.abs(this.touchStartData.touchY-t.touchY)<5?(this.quickClickCount++,this.quickClickTimear=setTimeout((()=>this.quickClickCount=0),500)):this.quickClickCount=0}handleWheel(t){this.options.wheel&&this.options.wheel({event:t})}handleTouchInfo(t,i){const e=this.clearErrorDot(t.touches,i),a=e.length;let s={};return 1===a?s={touchX:e[0].clientX,touchY:e[0].clientY}:2===a&&(s={touchSpace:Math.round(Math.hypot(e[0].clientX-e[1].clientX,e[0].clientY-e[1].clientY)),...this.centerPosition(e[0],e[1])}),{touches:e,touchCount:a,...s}}clearErrorDot(t,i){let e=t||[],a=this.saveTouches||[];const s=e[1];return s?Array.prototype.some.call(a,(t=>t.clientX==s.clientX&&t.clientY==s.clientY))&&(e=Array.prototype.slice.call(e,0,1)):a=[],this.saveTouches=i?e:a,e}centerPosition(t,i){const e=t.clientX>i.clientX?[i.clientX,t.clientX]:[t.clientX,i.clientX],a=t.clientY>i.clientY?[i.clientY,t.clientY]:[t.clientY,i.clientY];return{touchX:e[0]+(e[1]-e[0])/2,touchY:a[0]+(a[1]-a[0])/2}}destroy(){Object.keys(this.eventList).forEach((t=>{this.el.removeEventListener(t,this.eventList[t])}))}},o=class{constructor(t){this.container=t,this.activeItem=null,this.itemList=[],this.startData={},this.moveData={},this.doubleClickItem=null}get contentHeight(){return this.itemList.reduce(((t,{viewport:i})=>t+(i.height||0)),0)}get boxViewport(){var t;return(null===(t=this.container)||void 0===t?void 0:t.viewport)||{}}get itemViewport(){var t;return(null===(t=this.activeItem)||void 0===t?void 0:t.viewport)||{}}handleTouchstart(t){this.doubleClickItem||this.clearAnimation(),this.itemList=this.container.getZoomItemList(),this.activeItem=this.itemList.find((({viewport:i})=>i.top<=t.touchY&&i.top+i.height>=t.touchY)),this.activeItem?this.startData={...t,translateX:this.activeItem.translateX,translateY:this.container.translateY,itemScale:this.activeItem.scale,itemWidth:this.itemViewport.width,itemHeight:this.itemViewport.height,ratioY:(t.touchY-this.itemViewport.top)/this.itemViewport.height,ratioX:(t.touchX-this.itemViewport.left)/this.itemViewport.width}:this.startData={},this.moveData={}}handleTouchmove(t){if(!this.activeItem||t.touchCount!==this.startData.touchCount)return;let i={};if(1===t.touchCount)i={lastTouchX:t.touchX,lastTouchY:t.touchY,lastTime:Date.now()},i.lastTime-(this.moveData.preTime||0)>300&&(i={...i,preTouchX:i.lastTouchX,preTouchY:i.lastTouchY,preTime:i.lastTime}),this.activeItem!==this.doubleClickItem?this.transform({translateX:this.startData.translateX+(t.touchX-this.startData.touchX),translateY:this.startData.translateY+(t.touchY-this.startData.touchY)}):(this.container.transitionDurationY=0,this.container.translateY=Math.min(0,Math.max(this.boxViewport.height-this.contentHeight,this.startData.translateY+(t.touchY-this.startData.touchY))));else if(2===t.touchCount&&!this.activeItem.disabled&&this.activeItem!==this.doubleClickItem){const i=this.startData.itemScale+.5*(1-this.startData.touchSpace/t.touchSpace),e=Math.max(this.activeItem.minScale,Math.min(this.activeItem.maxScale,i));window.requestAnimationFrame((()=>{this.activeItem.viewport.width=this.itemViewport.offsetWidth*e,this.activeItem.viewport.height=this.itemViewport.offsetHeight*e,this.transform({isHandler:!1,translateX:this.startData.translateX+(this.startData.itemWidth-this.itemViewport.width)*this.startData.ratioX,translateY:this.startData.translateY+(this.startData.itemHeight-this.itemViewport.height)*this.startData.ratioY,scale:e}),this.itemList.reduce(((t,i)=>(i.translateY=t,i.translateY+(i.viewport.height-i.viewport.offsetHeight))),0)}))}this.moveData={...this.moveData,...t,...i}}handleTouchend(t){if(this.activeItem)if(1===this.startData.touchCount){if(t.clickCount>1||this.doubleClickItem)return;const i=this.moveData.lastTouchX-this.moveData.preTouchX,e=this.moveData.lastTouchY-this.moveData.preTouchY,a=this.moveData.lastTime-this.moveData.preTime,s=Date.now()-this.moveData.preTime,o=[Math.abs(i)/a,Math.abs(e)/a].map((t=>t&&t!==1/0?t:5)),h=(t,i)=>Math.abs(t/i)/.003*1.5*(t<0?-1:1);let n=this.activeItem.translateX,r=this.container.translateY;s<=300&&(n=Math.abs(i)>10?n+h(i,s):n,r=Math.abs(e)>10?r+h(e,s):r,this.transform({translateX:n,translateY:r,durationX:Math.abs(n-this.startData.translateX)/o[0]*1.2,durationY:Math.abs(r-this.startData.translateY)/o[1]*1.2}))}else window.requestAnimationFrame((()=>{this.transform({})}))}handleTouchcancel(){this.activeItem=null}handleDoubleClick(){var t;if(this.doubleClickItem||null===(t=this.activeItem)||void 0===t||!t.doubleClickScale)return;const i=150,e=this.activeItem.initScale*(this.activeItem.scale-this.activeItem.initScale>0?1:2),a=Math.max(this.activeItem.minScale,Math.min(this.activeItem.maxScale,e));this.activeItem.viewport.width=this.activeItem.viewport.offsetWidth*a,this.activeItem.viewport.height=this.activeItem.viewport.offsetHeight*a,this.transform({durationX:i,durationY:i,translateX:this.startData.translateX+(this.startData.itemWidth-this.itemViewport.width)*this.startData.ratioX,translateY:this.startData.translateY+(this.startData.itemHeight-this.itemViewport.height)*this.startData.ratioY,scale:a}),this.itemList.reduce(((t,e)=>(e.translateY=t,e.transitionDurationX=i,e.translateY+(e.viewport.height-e.viewport.offsetHeight))),0),this.doubleClickItem=this.activeItem,setTimeout((()=>{this.itemList.forEach((t=>{t.transitionDurationX=0})),this.doubleClickItem=null,this.handleTouchstart(this.moveData)}),i)}handleWheel({event:t}){this.itemList=this.container.getZoomItemList();const i=this.boxViewport.height-this.contentHeight,e=Number(this.container.translateY||0),a=t.deltaY<0?0===e:e===i;a||(t.preventDefault(),this.container.transitionDurationY=0,this.container.translateY=Math.min(0,Math.max(i,e-t.deltaY)))}clearAnimation(){const t=(t,i)=>window.getComputedStyle(t)[i];this.container.translateY=Number(t(this.container.$refs.content,"transform").slice(7,-1).split(", ")[5]),this.container.transitionDurationY=0,this.activeItem&&(this.activeItem.translateX=Number(t(this.activeItem.$el,"transform").slice(7,-1).split(", ")[4]),this.activeItem.transitionDurationX=0)}transform({translateX:t=(()=>{var t;return null===(t=this.activeItem)||void 0===t?void 0:t.translateX})(),translateY:i=this.container.translateY,scale:e=(()=>{var t;return null===(t=this.activeItem)||void 0===t?void 0:t.scale})(),durationX:a=0,durationY:s=0,isHandler:o=!0}){o&&(e=Math.max(this.activeItem.minScale,Math.min(this.activeItem.maxScale,e)),t=Math.min(0,Math.max(this.boxViewport.width-this.itemViewport.width,t)),i=Math.min(0,Math.max(this.boxViewport.height-this.contentHeight,i))),this.activeItem&&(this.activeItem.transitionDurationX=a,this.activeItem.translateX=t,this.activeItem.scale=e),this.container.transitionDurationY=s,this.container.translateY=i}},h={name:"vvcZoomList",props:{width:{type:[String,Number]},height:{type:[String,Number]}},data(){return{translateY:0,transitionDurationY:0,viewport:{},zoomItemList:[],domObserver:null,touch:null,scroll:null}},watch:{translateY(t){this.$emit("scroll",{y:-t})}},computed:{containerStyle(){return{width:"number"===typeof this.width?`${this.width}px`:this.width,height:"number"===typeof this.height?`${this.height}px`:this.height}},contentTransformStyle(){return{transform:`translateY(${this.translateY}px)`,transitionDuration:`${this.transitionDurationY}ms`,transitionProperty:""+(this.transitionDurationY?"transform":"none")}}},mounted(){this.init()},beforeDestroy(){this.domObserver.disconnect(),this.touch.destroy()},methods:{init(){this.domObserver=new ResizeObserver((()=>{this.getViewport(),this.doLayout()})),this.domObserver.observe(this.$el),this.scroll=new o(this),this.touch=new s(this.$el,{touchstart:t=>this.scroll.handleTouchstart(t),touchmove:t=>this.scroll.handleTouchmove(t),touchend:t=>this.scroll.handleTouchend(t),touchcancel:t=>this.scroll.handleTouchcancel(t),doubleClick:t=>this.scroll.handleDoubleClick(t),wheel:t=>this.scroll.handleWheel(t)})},doLayout(t){this.stopScroll(!0),this.translateY=0,this.scroll.activeItem&&(this.scroll.activeItem.translateX=0),this.getZoomItemList().forEach((i=>i.init(t))),this.zoomItemList.reduce(((t,i)=>(i.translateY=t,i.translateY+(i.viewport.height-i.viewport.offsetHeight))),0)},stopScroll(t){t?(this.transitionDurationY=0,this.scroll.activeItem&&(this.scroll.activeItem.transitionDurationX=0)):this.scroll.clearAnimation()},backTop(){this.translateY=0,this.transitionDurationY=1e3},getViewport(){return this.viewport=this.$el.getBoundingClientRect(),this.viewport},getZoomItemList(){const t=this.$children.filter((t=>"vvcZoomItem"===t.$options.name));return t.forEach((t=>t.getViewport())),this.zoomItemList=t.sort(((t,i)=>t.viewport.top-i.viewport.top)),this.zoomItemList}}},n=h;function r(t,i,e,a,s,o,h,n){var r,c="function"===typeof t?t.options:t;if(i&&(c.render=i,c.staticRenderFns=e,c._compiled=!0),a&&(c.functional=!0),o&&(c._scopeId="data-v-"+o),h?(r=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__),s&&s.call(this,t),t&&t._registeredComponents&&t._registeredComponents.add(h)},c._ssrRegister=r):s&&(r=n?function(){s.call(this,(c.functional?this.parent:this).$root.$options.shadowRoot)}:s),r)if(c.functional){c._injectStyles=r;var l=c.render;c.render=function(t,i){return r.call(i),l(t,i)}}else{var u=c.beforeCreate;c.beforeCreate=u?[].concat(u,r):[r]}return{exports:t,options:c}}var c=r(n,e,a,!1,null,null,null),l=c.exports,u=l;module.exports=i})();