v2-lazy-list - npm Package Compare versions

Comparing version 1.0.0 to 1.0.1

dist/index.js

@@ -1,1 +0,1 @@
-!function(t,e){"object"==typeof exports&&"object"==typeof module?module.exports=e():"function"==typeof define&&define.amd?define([],e):"object"==typeof exports?exports.V2LazyList=e():t.V2LazyList=e()}(window,function(){return function(t){var e={};function n(i){if(e[i])return e[i].exports;var o=e[i]={i:i,l:!1,exports:{}};return t[i].call(o.exports,o,o.exports,n),o.l=!0,o.exports}return n.m=t,n.c=e,n.d=function(t,e,i){n.o(t,e)||Object.defineProperty(t,e,{configurable:!1,enumerable:!0,get:i})},n.r=function(t){Object.defineProperty(t,"__esModule",{value:!0})},n.n=function(t){var e=t&&t.__esModule?function(){return t.default}:function(){return t};return n.d(e,"a",e),e},n.o=function(t,e){return Object.prototype.hasOwnProperty.call(t,e)},n.p="",n(n.s=1)}([function(t,e,n){"use strict";function i(t,e){for(var n=[],i={},o=0;o<e.length;o++){var r=e[o],s=r[0],l={id:t+":"+o,css:r[1],media:r[2],sourceMap:r[3]};i[s]?i[s].parts.push(l):n.push(i[s]={id:s,parts:[l]})}return n}n.r(e),n.d(e,"default",function(){return m});var o="undefined"!=typeof document;if("undefined"!=typeof DEBUG&&DEBUG&&!o)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 r={},s=o&&(document.head||document.getElementsByTagName("head")[0]),l=null,h=0,a=!1,c=function(){},u=null,d="data-vue-ssr-id",p="undefined"!=typeof navigator&&/msie [6-9]\b/.test(navigator.userAgent.toLowerCase());function m(t,e,n,o){a=n,u=o||{};var s=i(t,e);return f(s),function(e){for(var n=[],o=0;o<s.length;o++){var l=s[o];(h=r[l.id]).refs--,n.push(h)}for(e?f(s=i(t,e)):s=[],o=0;o<n.length;o++){var h;if(0===(h=n[o]).refs){for(var a=0;a<h.parts.length;a++)h.parts[a]();delete r[h.id]}}}}function f(t){for(var e=0;e<t.length;e++){var n=t[e],i=r[n.id];if(i){i.refs++;for(var o=0;o<i.parts.length;o++)i.parts[o](n.parts[o]);for(;o<n.parts.length;o++)i.parts.push(b(n.parts[o]));i.parts.length>n.parts.length&&(i.parts.length=n.parts.length)}else{var s=[];for(o=0;o<n.parts.length;o++)s.push(b(n.parts[o]));r[n.id]={id:n.id,refs:1,parts:s}}}}function v(){var t=document.createElement("style");return t.type="text/css",s.appendChild(t),t}function b(t){var e,n,i=document.querySelector("style["+d+'~="'+t.id+'"]');if(i){if(a)return c;i.parentNode.removeChild(i)}if(p){var o=h++;i=l||(l=v()),e=x.bind(null,i,o,!1),n=x.bind(null,i,o,!0)}else i=v(),e=function(t,e){var n=e.css,i=e.media,o=e.sourceMap;if(i&&t.setAttribute("media",i),u.ssrId&&t.setAttribute(d,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))}}.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()}}var g,y=(g=[],function(t,e){return g[t]=e,g.filter(Boolean).join("\n")});function x(t,e,n,i){var o=n?"":i.css;if(t.styleSheet)t.styleSheet.cssText=y(e,o);else{var r=document.createTextNode(o),s=t.childNodes;s[e]&&t.removeChild(s[e]),s.length?t.insertBefore(r,s[e]):t.appendChild(r)}}},function(t,e,n){"use strict";n.r(e),n(4);var i="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(t){return typeof t}:function(t){return t&&"function"==typeof Symbol&&t.constructor===Symbol&&t!==Symbol.prototype?"symbol":typeof t};function o(t){var e=window.document.createElement("div");return e.className=t,e}function r(t){t.remove?t.remove():t.parentNode&&t.parentNode.removeChild(t)}function s(t,e){if("object"===(void 0===e?"undefined":i(e))){for(var n in e){var o=e[n];"number"==typeof o&&(o+="px"),t.style[n]=o}return t}}var l=function(){function t(e){var n=arguments.length>1&&void 0!==arguments[1]?arguments[1]:{};if(function(t,e){if(!(t instanceof e))throw new TypeError("Cannot call a class as a function")}(this,t),this.element=e,this.props=n,this.wheelSpeed=1,this.xBar=null,this.xThumb=null,this.xThumbWidth=null,this.yBar=null,this.yThumb=null,this.yThumbHeight=null,this.startingMousePageY=0,this.startingMousePageX=0,this.yScrollFactor=0,this.xScrollFactor=0,this.dragDirect="",this.wheelEventHandler=this._wheelEventHandler.bind(this),this.mouseMoveHandler=this._mouseMoveHandler.bind(this),this.mouseUpHandler=this._mouseUpHandler.bind(this),this.element.classList)this.element.classList.add("v2-scroll-container");else{var i=this.element.className;this.element.className=i+" v2-scroll-container"}this.contentWidth=isNaN(n.contentWidth)?e.clientWidth:n.contentWidth,this.contentHeight=isNaN(n.contentHeight)?e.clientHeight:n.contentHeight,this.containerWidth=e.clientWidth,this.containerHeight=e.clientHeight,this.maxScrollLeft=this.contentWidth-this.containerWidth,this.maxScrollTop=this.contentHeight-this.containerHeight,this.maxScrollTop&&this.createBarEle(),this.bindWheelEvent()}return t.prototype.updateContentHeight=function(t){this.contentHeight=t,this.maxScrollTop=t-this.containerHeight,this.yBar||this.createBarEle()},t.prototype.createBarEle=function(){this.maxScrollTop>0&&(this.yBar=o("v2-scroll__y-bar"),this.element.appendChild(this.yBar),s(this.yBar,{height:this.containerHeight,right:0,top:0}),this.yBar.setAttribute("tabindex",0),this.yThumb=o("v2-scroll__y-thumb"),this.yBar.appendChild(this.yThumb),this.yThumbHeight=parseInt(this.containerHeight*this.containerHeight/this.contentHeight,10),s(this.yThumb,{top:0,height:this.yThumbHeight}),this.yScrollFactor=(this.contentHeight-this.containerHeight)/(this.containerHeight-this.yThumbHeight),this.yThumb.addEventListener("mousedown",this.mouseDownHandler.bind(this,"y"),!1)),this.maxScrollLeft>0&&(this.xBar=o("v2-scroll__x-bar"),this.element.appendChild(this.xBar),s(this.xBar,{left:0,width:this.containerWidth,bottom:0}),this.xBar.setAttribute("tabindex",0),this.xThumb=o("v2-scroll__x-thumb"),this.xBar.appendChild(this.xThumb),this.xThumbWidth=parseInt(this.containerWidth*this.containerWidth/this.contentWidth,10),s(this.xThumb,{left:0,width:this.xThumbWidth}),this.xScrollFactor=(this.contentWidth-this.containerWidth)/(this.containerWidth-this.xThumbWidth),this.xThumb.addEventListener("mousedown",this.mouseDownHandler.bind(this,"x"),!1))},t.prototype.bindWheelEvent=function(){void 0!==window.onwheel?this.element.addEventListener("wheel",this.wheelEventHandler,{passive:!0}):void 0!==window.onmousewheel&&this.element.addEventListener("mousewheel",this.wheelEventHandler,!1)},t.prototype._mouseMoveHandler=function(t){if(t.stopPropagation(),t.preventDefault(),"x"===this.dragDirect){var e=this.xScrollFactor*(t.pageX-this.startingMousePageX);this.element.scrollLeft=e>this.maxScrollLeft?this.maxScrollLeft:e}else if("y"===this.dragDirect){var n=this.yScrollFactor*(t.pageY-this.startingMousePageY);this.element.scrollTop=n>this.maxScrollTop?this.maxScrollTop:n}this.updateScrollBarStyle()},t.prototype._mouseUpHandler=function(t){t.stopPropagation(),t.preventDefault(),this.element.ownerDocument.removeEventListener("mousemove",this.mouseMoveHandler),this.element.ownerDocument.removeEventListener("mouseup",this.mouseUpHandler)},t.prototype.mouseDownHandler=function(t,e){e.stopPropagation(),e.preventDefault(),"x"===t&&(this.startingMousePageX=e.pageX),"y"===t&&(this.startingMousePageY=e.pageY),this.dragDirect=t,this.element.ownerDocument.addEventListener("mousemove",this.mouseMoveHandler,!1),this.element.ownerDocument.addEventListener("mouseup",this.mouseUpHandler,!1)},t.prototype.updateScrollBarStyle=function(){this.yBar&&s(this.yBar,{top:this.element.scrollTop,height:this.containerHeight,right:-this.element.scrollLeft});var t=parseInt(this.element.scrollTop*(this.containerHeight-this.yThumbHeight)/this.maxScrollTop,10);this.yThumb&&s(this.yThumb,{top:t,height:this.yThumbHeight}),this.xBar&&s(this.xBar,{left:this.element.scrollLeft,width:this.containerWidth,bottom:-this.element.scrollTop});var e=parseInt(this.element.scrollLeft*(this.containerWidth-this.xThumbWidth)/this.maxScrollLeft,10);this.xThumb&&s(this.xThumb,{left:e,width:this.xThumbWidth}),"function"==typeof this.props.callBack&&this.props.callBack({scrollLeft:this.element.scrollLeft,scrollTop:this.element.scrollTop})},t.prototype._wheelEventHandler=function(t){t.stopPropagation();var e,n,i,o=(n=(e=t).deltaX,i=-1*e.deltaY,void 0!==n&&void 0!==i||(n=-1*e.wheelDeltaX/6,i=e.wheelDeltaY/6),e.deltaMode&&1===e.deltaMode&&(n*=10,i*=10),n!=n&&i!=i&&(n=0,i=e.wheelDelta),e.shiftKey?[-i,-n]:[n,i]),r=o[0],s=o[1];if(this.shouldUpdateScrollTop(s)){var l=this.element.scrollTop-s*this.wheelSpeed;this.element.scrollTop=l>this.maxScrollTop?this.maxScrollTop:l}if(this.shouldUpdateScrollLeft(r)){var h=this.element.scrollLeft+r*this.wheelSpeed;this.element.scrollLeft=h>this.maxScrollLeft?this.maxScrollLeft:h}this.updateScrollBarStyle()},t.prototype.shouldUpdateScrollLeft=function(t){return!(this.element.scrollLeft===this.maxScrollLeft&&t>0||0===this.element.scrollLeft&&t<=0)},t.prototype.shouldUpdateScrollTop=function(t){return!(this.element.scrollTop===this.maxScrollTop&&t<0||0===this.element.scrollTop&&t>=0)},t.prototype.removeAllEventListener=function(){this.element.removeEventListener("wheel",this.wheelEventHandler),this.element.removeEventListener("mousewheel",this.wheelEventHandler),this.xThumb&&this.xThumb.removeAllEventListener("mousedown"),this.yThumb&&this.yThumb.removeAllEventListener("mousedown")},t.prototype.removeClasses=function(){this.element.className=this.element.className.split(" ").filter(function(t){return!t.match(/^v2\-scroll\-container$/)}).join(" ")},t.prototype.destroy=function(){this.removeAllEventListener(),this.removeClasses(),this.element=null,this.yBar&&r(this.yBar),this.xBar&&r(this.xBar),this.xBar=null,this.xThumb=null,this.xThumbWidth=null,this.yBar=null,this.yThumb=null,this.yThumbHeight=null,this.wheelEventHandler=null,this.mouseMoveHandler=null,this.mouseUpHandler=null},t}(),h=function(t,e,n,i,o,r,s,l){var h=typeof(t=t||{}).default;"object"!==h&&"function"!==h||(t=t.default);var a,c="function"==typeof t?t.options:t;if(e&&(c.render=e,c.staticRenderFns=[],c._compiled=!0),a)if(c.functional){c._injectStyles=a;var u=c.render;c.render=function(t,e){return a.call(e),u(t,e)}}else{var d=c.beforeCreate;c.beforeCreate=d?[].concat(d,a):[a]}return{exports:t,options:c}}({name:"v2-lazy-list",props:{data:{type:Array,default:function(){return[]}},height:{type:[Number,String],default:320},itemHeight:{type:[Number,String],default:40}},data:function(){var t=Number.parseInt(this.height),e=Number.parseInt(this.itemHeight);return{renderList:[],scrollTop:0,viewportWith:0,viewportHeight:Number.isNaN(t)||t<320?320:t,ih:Number.isNaN(e)||e<20?20:e,contentWidth:NaN,contentHeight:NaN,contentMarginTop:0,scrollbar:null}},watch:{data:function(t){this.initRenderList(),this.scrollbar&&this.scrollbar.updateContentHeight(this.contentHeight)},scrollTop:function(t){this.updateRenderList()}},provide:function(){return{list:this}},methods:{initRenderList:function(){this.contentHeight=Math.ceil(this.data.length*this.ih),this.renderList=this.getRenderList()},updateRenderList:function(){this.renderList=this.getRenderList()},getRenderList:function(){for(var t=[],e=Math.floor(this.scrollTop/this.ih),n=Math.floor((this.scrollTop+this.viewportHeight)/this.ih),i=e;i<=n;i++)this.data[i]&&t.push(this.data[i]);return this.contentMarginTop=e*this.ih,t},updateScrollVal:function(t){t.scrollLeft;var e=t.scrollTop;this.scrollTop=e}},mounted:function(){var t=this;this.viewportWith=this.$el.clientWidth,this.initRenderList(),this.$nextTick(function(){t.scrollbar=new l(t.$el,{contentWidth:t.contentWidth,contentHeight:t.contentHeight,callBack:t.updateScrollVal})})}},function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",{ref:"wrap",staticClass:"v2-lazy-list-wrap",style:{height:t.viewportHeight+"px"}},[n("ul",{ref:"content",staticClass:"v2-lazy-list",style:{marginTop:t.contentMarginTop+"px"}},t._l(t.renderList,function(e,i){return n("li",{key:i,staticClass:"lazy-list-item",style:{height:t.ih+"px",lineHeight:t.ih+"px"}},[t._v("\n            "+t._s(e)+"\n        ")])}))])}).exports,a={install:function(t){t.component(h.name,h)}};e.default=a,"undefined"!=typeof window&&window.Vue&&window.Vue.use(a)},function(t,e){t.exports=function(t){var e=[];return e.toString=function(){return this.map(function(e){var n=function(t,e){var n,i=t[1]||"",o=t[3];if(!o)return i;if(e&&"function"==typeof btoa){var r=(n=o,"/*# sourceMappingURL=data:application/json;charset=utf-8;base64,"+btoa(unescape(encodeURIComponent(JSON.stringify(n))))+" */"),s=o.sources.map(function(t){return"/*# sourceURL="+o.sourceRoot+t+" */"});return[i].concat(s).concat([r]).join("\n")}return[i].join("\n")}(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={},o=0;o<this.length;o++){var r=this[o][0];"number"==typeof r&&(i[r]=!0)}for(o=0;o<t.length;o++){var s=t[o];"number"==typeof s[0]&&i[s[0]]||(n&&!s[2]?s[2]=n:n&&(s[2]="("+s[2]+") and ("+n+")"),e.push(s))}},e}},function(t,e,n){(t.exports=n(2)(!1)).push([t.i,"/* scrollbar start */\n.v2-scroll-container {\n  overflow: hidden !important;\n  overflow-anchor: none;\n}\n.v2-scroll-container:hover .v2-scroll__y-bar {\n  width: 5px;\n}\n.v2-scroll-container:hover .v2-scroll__x-bar {\n  height: 5px;\n}\n.v2-scroll-container:hover .v2-scroll__y-thumb,\n.v2-scroll-container:hover .v2-scroll__x-thumb {\n  opacity: 0.75;\n}\n.v2-scroll__y-bar,\n.v2-scroll__x-bar {\n  position: absolute;\n  background-color: transparent;\n  z-index: 100;\n  -webkit-transition: all .2s linear;\n  -o-transition: all .2s linear;\n  transition: all .2s linear;\n}\n.v2-scroll__y-bar {\n  width: 0px;\n  -webkit-transition: width 0.2s ease-in-out;\n  -o-transition: width 0.2s ease-in-out;\n  transition: width 0.2s ease-in-out;\n}\n.v2-scroll__x-bar {\n  height: 0px;\n  -webkit-transition: height 0.2s ease-in-out;\n  -o-transition: height 0.2s ease-in-out;\n  transition: height 0.2s ease-in-out;\n}\n.v2-scroll__y-thumb,\n.v2-scroll__x-thumb {\n  position: absolute;\n  border-radius: 6px;\n  background-color: #aaa;\n  opacity: 0;\n  -webkit-transition: all .2s linear;\n  -o-transition: all .2s linear;\n  transition: all .2s linear;\n}\n.v2-scroll__x-thumb {\n  height: 5px;\n}\n.v2-scroll__y-thumb {\n  width: 5px;\n}\n/* scrollbar end */\n.v2-lazy-list-wrap {\n  position: relative;\n  -webkit-box-sizing: border-box;\n          box-sizing: border-box;\n  width: 100%;\n  overflow: hidden;\n}\n.v2-lazy-list {\n  position: relative;\n  list-style: none;\n  width: 100%;\n  height: 100%;\n  margin: 0;\n  padding: 0;\n  -webkit-box-sizing: border-box;\n          box-sizing: border-box;\n}\n.lazy-list-item {\n  position: relative;\n  width: 100%;\n  -webkit-box-sizing: border-box;\n          box-sizing: border-box;\n  border-bottom: 1px solid #d1d5da;\n}\n",""])},function(t,e,n){var i=n(3);"string"==typeof i&&(i=[[t.i,i,""]]),i.locals&&(t.exports=i.locals),(0,n(0).default)("6f27e697",i,!0,{})}])});
+!function(t,e){"object"==typeof exports&&"object"==typeof module?module.exports=e():"function"==typeof define&&define.amd?define([],e):"object"==typeof exports?exports.V2LazyList=e():t.V2LazyList=e()}(window,function(){return function(t){var e={};function n(i){if(e[i])return e[i].exports;var o=e[i]={i:i,l:!1,exports:{}};return t[i].call(o.exports,o,o.exports,n),o.l=!0,o.exports}return n.m=t,n.c=e,n.d=function(t,e,i){n.o(t,e)||Object.defineProperty(t,e,{configurable:!1,enumerable:!0,get:i})},n.r=function(t){Object.defineProperty(t,"__esModule",{value:!0})},n.n=function(t){var e=t&&t.__esModule?function(){return t.default}:function(){return t};return n.d(e,"a",e),e},n.o=function(t,e){return Object.prototype.hasOwnProperty.call(t,e)},n.p="",n(n.s=1)}([function(t,e,n){"use strict";function i(t,e){for(var n=[],i={},o=0;o<e.length;o++){var r=e[o],s=r[0],l={id:t+":"+o,css:r[1],media:r[2],sourceMap:r[3]};i[s]?i[s].parts.push(l):n.push(i[s]={id:s,parts:[l]})}return n}n.r(e),n.d(e,"default",function(){return f});var o="undefined"!=typeof document;if("undefined"!=typeof DEBUG&&DEBUG&&!o)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 r={},s=o&&(document.head||document.getElementsByTagName("head")[0]),l=null,h=0,a=!1,c=function(){},u=null,d="data-vue-ssr-id",p="undefined"!=typeof navigator&&/msie [6-9]\b/.test(navigator.userAgent.toLowerCase());function f(t,e,n,o){a=n,u=o||{};var s=i(t,e);return m(s),function(e){for(var n=[],o=0;o<s.length;o++){var l=s[o];(h=r[l.id]).refs--,n.push(h)}for(e?m(s=i(t,e)):s=[],o=0;o<n.length;o++){var h;if(0===(h=n[o]).refs){for(var a=0;a<h.parts.length;a++)h.parts[a]();delete r[h.id]}}}}function m(t){for(var e=0;e<t.length;e++){var n=t[e],i=r[n.id];if(i){i.refs++;for(var o=0;o<i.parts.length;o++)i.parts[o](n.parts[o]);for(;o<n.parts.length;o++)i.parts.push(b(n.parts[o]));i.parts.length>n.parts.length&&(i.parts.length=n.parts.length)}else{var s=[];for(o=0;o<n.parts.length;o++)s.push(b(n.parts[o]));r[n.id]={id:n.id,refs:1,parts:s}}}}function v(){var t=document.createElement("style");return t.type="text/css",s.appendChild(t),t}function b(t){var e,n,i=document.querySelector("style["+d+'~="'+t.id+'"]');if(i){if(a)return c;i.parentNode.removeChild(i)}if(p){var o=h++;i=l||(l=v()),e=x.bind(null,i,o,!1),n=x.bind(null,i,o,!0)}else i=v(),e=function(t,e){var n=e.css,i=e.media,o=e.sourceMap;if(i&&t.setAttribute("media",i),u.ssrId&&t.setAttribute(d,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))}}.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()}}var g,y=(g=[],function(t,e){return g[t]=e,g.filter(Boolean).join("\n")});function x(t,e,n,i){var o=n?"":i.css;if(t.styleSheet)t.styleSheet.cssText=y(e,o);else{var r=document.createTextNode(o),s=t.childNodes;s[e]&&t.removeChild(s[e]),s.length?t.insertBefore(r,s[e]):t.appendChild(r)}}},function(t,e,n){"use strict";n.r(e),n(4);var i="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(t){return typeof t}:function(t){return t&&"function"==typeof Symbol&&t.constructor===Symbol&&t!==Symbol.prototype?"symbol":typeof t};function o(t){var e=window.document.createElement("div");return e.className=t,e}function r(t){t.remove?t.remove():t.parentNode&&t.parentNode.removeChild(t)}function s(t,e){if("object"===(void 0===e?"undefined":i(e))){for(var n in e){var o=e[n];"number"==typeof o&&(o+="px"),t.style[n]=o}return t}}var l=function(){function t(e){var n=arguments.length>1&&void 0!==arguments[1]?arguments[1]:{};if(function(t,e){if(!(t instanceof e))throw new TypeError("Cannot call a class as a function")}(this,t),this.element=e,this.props=n,this.wheelSpeed=1,this.xBar=null,this.xThumb=null,this.xThumbWidth=null,this.yBar=null,this.yThumb=null,this.yThumbHeight=null,this.startingMousePageY=0,this.startingMousePageX=0,this.startingScrollTop=0,this.startingScrollLeft=0,this.yScrollFactor=0,this.xScrollFactor=0,this.dragDirect="",this.wheelEventHandler=this._wheelEventHandler.bind(this),this.mouseMoveHandler=this._mouseMoveHandler.bind(this),this.mouseUpHandler=this._mouseUpHandler.bind(this),this.element.classList)this.element.classList.add("v2-scroll-container");else{var i=this.element.className;this.element.className=i+" v2-scroll-container"}this.contentWidth=isNaN(n.contentWidth)?e.clientWidth:n.contentWidth,this.contentHeight=isNaN(n.contentHeight)?e.clientHeight:n.contentHeight,this.containerWidth=e.clientWidth,this.containerHeight=e.clientHeight,this.maxScrollLeft=this.contentWidth-this.containerWidth,this.maxScrollTop=this.contentHeight-this.containerHeight,this.maxScrollTop&&this.createBarEle(),this.bindWheelEvent()}return t.prototype.updateContentHeight=function(t){this.contentHeight=t,this.maxScrollTop=t-this.containerHeight,this.yBar||this.createBarEle()},t.prototype.createBarEle=function(){this.maxScrollTop>0&&(this.yBar=o("v2-scroll__y-bar"),this.element.appendChild(this.yBar),s(this.yBar,{height:this.containerHeight,right:0,top:0}),this.yBar.setAttribute("tabindex",0),this.yThumb=o("v2-scroll__y-thumb"),this.yBar.appendChild(this.yThumb),this.yThumbHeight=parseInt(this.containerHeight*this.containerHeight/this.contentHeight,10),s(this.yThumb,{top:0,height:this.yThumbHeight}),this.yScrollFactor=(this.contentHeight-this.containerHeight)/(this.containerHeight-this.yThumbHeight),this.yThumb.addEventListener("mousedown",this.mouseDownHandler.bind(this,"y"),!1)),this.maxScrollLeft>0&&(this.xBar=o("v2-scroll__x-bar"),this.element.appendChild(this.xBar),s(this.xBar,{left:0,width:this.containerWidth,bottom:0}),this.xBar.setAttribute("tabindex",0),this.xThumb=o("v2-scroll__x-thumb"),this.xBar.appendChild(this.xThumb),this.xThumbWidth=parseInt(this.containerWidth*this.containerWidth/this.contentWidth,10),s(this.xThumb,{left:0,width:this.xThumbWidth}),this.xScrollFactor=(this.contentWidth-this.containerWidth)/(this.containerWidth-this.xThumbWidth),this.xThumb.addEventListener("mousedown",this.mouseDownHandler.bind(this,"x"),!1))},t.prototype.bindWheelEvent=function(){void 0!==window.onwheel?this.element.addEventListener("wheel",this.wheelEventHandler,!1):void 0!==window.onmousewheel&&this.element.addEventListener("mousewheel",this.wheelEventHandler,!1)},t.prototype._mouseMoveHandler=function(t){if(t.stopPropagation(),t.preventDefault(),"x"===this.dragDirect){var e=this.startingScrollLeft+this.xScrollFactor*(t.pageX-this.startingMousePageX);this.element.scrollLeft=e>this.maxScrollLeft?this.maxScrollLeft:e}else if("y"===this.dragDirect){var n=this.startingScrollTop+this.yScrollFactor*(t.pageY-this.startingMousePageY);this.element.scrollTop=n>this.maxScrollTop?this.maxScrollTop:n}this.updateScrollBarStyle()},t.prototype._mouseUpHandler=function(t){t.stopPropagation(),t.preventDefault(),this.element.ownerDocument.removeEventListener("mousemove",this.mouseMoveHandler),this.element.ownerDocument.removeEventListener("mouseup",this.mouseUpHandler)},t.prototype.mouseDownHandler=function(t,e){e.stopPropagation(),e.preventDefault(),"x"===t&&(this.startingMousePageX=e.pageX,this.startingScrollLeft=this.element.scrollLeft),"y"===t&&(this.startingMousePageY=e.pageY,this.startingScrollTop=this.element.scrollTop),this.dragDirect=t,this.element.ownerDocument.addEventListener("mousemove",this.mouseMoveHandler,!1),this.element.ownerDocument.addEventListener("mouseup",this.mouseUpHandler,!1)},t.prototype.updateScrollBarStyle=function(){this.yBar&&s(this.yBar,{top:this.element.scrollTop,height:this.containerHeight,right:-this.element.scrollLeft});var t=parseInt(this.element.scrollTop*(this.containerHeight-this.yThumbHeight)/this.maxScrollTop,10);this.yThumb&&s(this.yThumb,{top:t,height:this.yThumbHeight}),this.xBar&&s(this.xBar,{left:this.element.scrollLeft,width:this.containerWidth,bottom:-this.element.scrollTop});var e=parseInt(this.element.scrollLeft*(this.containerWidth-this.xThumbWidth)/this.maxScrollLeft,10);this.xThumb&&s(this.xThumb,{left:e,width:this.xThumbWidth}),"function"==typeof this.props.callBack&&this.props.callBack({scrollLeft:this.element.scrollLeft,scrollTop:this.element.scrollTop})},t.prototype._wheelEventHandler=function(t){t.stopPropagation(),this.maxScrollTop>0&&t.preventDefault();var e,n,i,o=(n=(e=t).deltaX,i=-1*e.deltaY,void 0!==n&&void 0!==i||(n=-1*e.wheelDeltaX/6,i=e.wheelDeltaY/6),e.deltaMode&&1===e.deltaMode&&(n*=10,i*=10),n!=n&&i!=i&&(n=0,i=e.wheelDelta),e.shiftKey?[-i,-n]:[n,i]),r=o[0],s=o[1];if(this.shouldUpdateScrollTop(s)){var l=this.element.scrollTop-s*this.wheelSpeed;this.element.scrollTop=l>this.maxScrollTop?this.maxScrollTop:l}if(this.shouldUpdateScrollLeft(r)){var h=this.element.scrollLeft+r*this.wheelSpeed;this.element.scrollLeft=h>this.maxScrollLeft?this.maxScrollLeft:h}this.updateScrollBarStyle()},t.prototype.shouldUpdateScrollLeft=function(t){return!(this.element.scrollLeft===this.maxScrollLeft&&t>0||0===this.element.scrollLeft&&t<=0)},t.prototype.shouldUpdateScrollTop=function(t){return!(this.element.scrollTop===this.maxScrollTop&&t<0||0===this.element.scrollTop&&t>=0)},t.prototype.removeAllEventListener=function(){this.element.removeEventListener("wheel",this.wheelEventHandler),this.element.removeEventListener("mousewheel",this.wheelEventHandler),this.xThumb&&this.xThumb.removeAllEventListener("mousedown"),this.yThumb&&this.yThumb.removeAllEventListener("mousedown")},t.prototype.removeClasses=function(){this.element.className=this.element.className.split(" ").filter(function(t){return!t.match(/^v2\-scroll\-container$/)}).join(" ")},t.prototype.destroy=function(){this.removeAllEventListener(),this.removeClasses(),this.element=null,this.yBar&&r(this.yBar),this.xBar&&r(this.xBar),this.xBar=null,this.xThumb=null,this.xThumbWidth=null,this.yBar=null,this.yThumb=null,this.yThumbHeight=null,this.wheelEventHandler=null,this.mouseMoveHandler=null,this.mouseUpHandler=null},t}(),h=function(t,e,n,i,o,r,s,l){var h=typeof(t=t||{}).default;"object"!==h&&"function"!==h||(t=t.default);var a,c="function"==typeof t?t.options:t;if(e&&(c.render=e,c.staticRenderFns=[],c._compiled=!0),a)if(c.functional){c._injectStyles=a;var u=c.render;c.render=function(t,e){return a.call(e),u(t,e)}}else{var d=c.beforeCreate;c.beforeCreate=d?[].concat(d,a):[a]}return{exports:t,options:c}}({name:"v2-lazy-list",props:{data:{type:Array,default:function(){return[]}},height:{type:[Number,String],default:320},itemHeight:{type:[Number,String],default:40}},data:function(){var t=Number.parseInt(this.height),e=Number.parseInt(this.itemHeight);return{renderList:[],scrollTop:0,viewportWith:0,viewportHeight:Number.isNaN(t)||t<320?320:t,ih:Number.isNaN(e)||e<20?20:e,contentWidth:NaN,contentHeight:NaN,contentMarginTop:0,scrollbar:null}},watch:{data:function(t){this.initRenderList(),this.scrollbar&&this.scrollbar.updateContentHeight(this.contentHeight)},scrollTop:function(t){this.updateRenderList()}},provide:function(){return{list:this}},methods:{initRenderList:function(){this.contentHeight=Math.ceil(this.data.length*this.ih),this.renderList=this.getRenderList()},updateRenderList:function(){this.renderList=this.getRenderList()},getRenderList:function(){for(var t=[],e=Math.floor(this.scrollTop/this.ih),n=Math.floor((this.scrollTop+this.viewportHeight)/this.ih),i=e;i<=n;i++)this.data[i]&&t.push(this.data[i]);return this.contentMarginTop=e*this.ih,t},updateScrollVal:function(t){t.scrollLeft;var e=t.scrollTop;this.scrollTop=e}},mounted:function(){var t=this;this.viewportWith=this.$el.clientWidth,this.initRenderList(),this.$nextTick(function(){t.scrollbar=new l(t.$el,{contentWidth:t.contentWidth,contentHeight:t.contentHeight,callBack:t.updateScrollVal})})},beforeDestroy:function(){this.scrollbar&&this.scrollbar.destroy()}},function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",{ref:"wrap",staticClass:"v2-lazy-list-wrap",style:{height:t.viewportHeight+"px"}},[n("ul",{ref:"content",staticClass:"v2-lazy-list",style:{marginTop:t.contentMarginTop+"px"}},t._l(t.renderList,function(e,i){return n("li",{key:i,staticClass:"lazy-list-item",style:{height:t.ih+"px",lineHeight:t.ih+"px"}},[t._v("\n            "+t._s(e)+"\n        ")])}))])}).exports,a={install:function(t){t.component(h.name,h)}};e.default=a,"undefined"!=typeof window&&window.Vue&&window.Vue.use(a)},function(t,e){t.exports=function(t){var e=[];return e.toString=function(){return this.map(function(e){var n=function(t,e){var n,i=t[1]||"",o=t[3];if(!o)return i;if(e&&"function"==typeof btoa){var r=(n=o,"/*# sourceMappingURL=data:application/json;charset=utf-8;base64,"+btoa(unescape(encodeURIComponent(JSON.stringify(n))))+" */"),s=o.sources.map(function(t){return"/*# sourceURL="+o.sourceRoot+t+" */"});return[i].concat(s).concat([r]).join("\n")}return[i].join("\n")}(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={},o=0;o<this.length;o++){var r=this[o][0];"number"==typeof r&&(i[r]=!0)}for(o=0;o<t.length;o++){var s=t[o];"number"==typeof s[0]&&i[s[0]]||(n&&!s[2]?s[2]=n:n&&(s[2]="("+s[2]+") and ("+n+")"),e.push(s))}},e}},function(t,e,n){(t.exports=n(2)(!1)).push([t.i,"/* scrollbar start */\n.v2-scroll-container {\n  overflow: hidden !important;\n  overflow-anchor: none;\n}\n.v2-scroll-container:hover .v2-scroll__y-bar {\n  width: 5px;\n}\n.v2-scroll-container:hover .v2-scroll__x-bar {\n  height: 5px;\n}\n.v2-scroll-container:hover .v2-scroll__y-thumb,\n.v2-scroll-container:hover .v2-scroll__x-thumb {\n  opacity: 0.75;\n}\n.v2-scroll__y-bar,\n.v2-scroll__x-bar {\n  position: absolute;\n  background-color: transparent;\n  z-index: 100;\n  -webkit-transition: all .2s linear;\n  -o-transition: all .2s linear;\n  transition: all .2s linear;\n}\n.v2-scroll__y-bar {\n  width: 0px;\n  -webkit-transition: width 0.2s ease-in-out;\n  -o-transition: width 0.2s ease-in-out;\n  transition: width 0.2s ease-in-out;\n}\n.v2-scroll__x-bar {\n  height: 0px;\n  -webkit-transition: height 0.2s ease-in-out;\n  -o-transition: height 0.2s ease-in-out;\n  transition: height 0.2s ease-in-out;\n}\n.v2-scroll__y-thumb,\n.v2-scroll__x-thumb {\n  position: absolute;\n  border-radius: 6px;\n  background-color: #aaa;\n  opacity: 0;\n  -webkit-transition: all .2s linear;\n  -o-transition: all .2s linear;\n  transition: all .2s linear;\n}\n.v2-scroll__x-thumb {\n  height: 5px;\n}\n.v2-scroll__y-thumb {\n  width: 5px;\n}\n/* scrollbar end */\n.v2-lazy-list-wrap {\n  position: relative;\n  -webkit-box-sizing: border-box;\n          box-sizing: border-box;\n  width: 100%;\n  overflow: hidden;\n}\n.v2-lazy-list {\n  position: relative;\n  list-style: none;\n  width: 100%;\n  height: 100%;\n  margin: 0;\n  padding: 0;\n  -webkit-box-sizing: border-box;\n          box-sizing: border-box;\n}\n.lazy-list-item {\n  position: relative;\n  width: 100%;\n  -webkit-box-sizing: border-box;\n          box-sizing: border-box;\n  border-bottom: 1px solid #d1d5da;\n}\n",""])},function(t,e,n){var i=n(3);"string"==typeof i&&(i=[[t.i,i,""]]),i.locals&&(t.exports=i.locals),(0,n(0).default)("6f27e697",i,!0,{})}])});

package.json

 {
   "name": "v2-lazy-list",
-  "version": "1.0.0",
+  "version": "1.0.1",
   "description": "A simple lazy load list component based Vue 2.x",
@@ -5,0 +5,0 @@ "author": "dwqs",

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

20766

increased by1.41%

No dependency changes