index.js

"use strict";function _interopRequireDefault(obj){return obj&&obj.__esModule?obj:{"default":obj}}function ListView(){var itemComponent=arguments.length<=0||void 0===arguments[0]?{template:""}:arguments[0];return itemComponent.props={item:{type:Object}},itemComponent.replace=!1,{template:'\n            <div class="list-view">\n                <slot name="list-start"></slot>\n                <div v-for="item in items" track-by="$index" class="list-view-item" :style="{height: placeholders[$index] + \'px\'}">\n                    <component :is="visibility[$index] ? \'list-view-item\' : \'\'" :item="item" keep-alive></component>\n                </div>\n                <slot name="list-end"></slot>\n            </div>\n        ',props:{items:{type:Array,required:!0},preloadScreens:{type:Number,"default":3},scrollInside:{type:Boolean,"default":!1}},components:{listViewItem:itemComponent},data:function(){return{placeholders:[],visibility:[],scrollHeight:0,scrollTop:0,preloadHeight:0}},ready:function(){this.preloadHeight=this.preloadScreens*innerHeight,this.scrollInside?(this.$el.style.overflowY="auto",this.$el.style.height="100%",this.$el.addEventListener("scroll",this.scrollHandler)):window.addEventListener("scroll",this.scrollHandler)},beforeDestroy:function(){!this.scrollInside&&window.removeEventListener("scroll",this.scrollHandler)},methods:{scrollHandler:(0,_throttle2["default"])(function(){var _this=this,el=this.$el;el&&_fastdom2["default"].measure(function(){if(el){var oldScrollTop=_this.scrollTop,newScrollTop=_this.scrollInside?el.scrollTop:window.scrollY,direction=oldScrollTop>newScrollTop?"up":"down";_this.scrollTop=newScrollTop,innerHeight+newScrollTop>=_this.scrollHeight&&_this.$dispatch("list-view:scrolled-to-end"),_this.checkVisibility(direction)}})},1e3),checkVisibility:function(direction){function checkElem(i){var top=els[i].offsetTop-scrollTop,bottom=top+placeholders[i];visibility[i]=bottom>-preloadHeight&&preloadHeight>top}if(this.$el){var preloadHeight=this.preloadHeight,els=this.$el.querySelectorAll(".list-view-item"),visibility=this.visibility,placeholders=this.placeholders,scrollTop=this.scrollTop,checkStart=0,checkEnd=visibility.length-1,skip=!1;if("up"==direction){checkEnd=visibility.lastIndexOf(!0);for(var _loop=function(i){_fastdom2["default"].measure(function(){i==checkStart&&visibility.$set(0,visibility[0]),skip?visibility[i]=!1:els[i]&&(checkElem(i),checkEnd>i&&!visibility[i]&&visibility[i+1]&&(skip=!0))})},i=checkEnd;i>=checkStart;i--)_loop(i)}else{"down"==direction&&(checkStart=visibility.indexOf(!0));for(var _loop2=function(_i){_fastdom2["default"].measure(function(){_i==checkEnd&&visibility.$set(0,visibility[0]),skip?visibility[_i]=!1:els[_i]&&(checkElem(_i),_i>checkStart&&!visibility[_i]&&visibility[_i-1]&&(skip=!0))})},_i=checkStart;checkEnd>=_i;_i++)_loop2(_i)}}}},watch:{items:{immediate:!0,handler:function(items,oldItems){for(var _this2=this,placeholders=this.placeholders,visibility=this.visibility,shrinked=oldItems&&oldItems.length>items.length,i=0,len=items.length;len>i;i++)visibility[i]=!0;visibility.$set(0,visibility[0]),this.$nextTick(function(){_fastdom2["default"].measure(function(){return _this2.$el&&(_this2.scrollHeight=_this2.$el.scrollHeight)});for(var els=_this2.$el.querySelectorAll(".list-view-item"),_loop3=function(_i2,_len){_fastdom2["default"].measure(function(){els[_i2].style.cssText||(placeholders[_i2]=els[_i2].offsetHeight||null,_i2==_len-1&&(placeholders.$set(0,placeholders[0]),_this2.checkVisibility(!shrinked&&"down")))})},_i2=0,_len=els.length;_len>_i2;_i2++)_loop3(_i2,_len)})}}}}}Object.defineProperty(exports,"__esModule",{value:!0}),exports["default"]=ListView;var _throttle=require("lodash/throttle"),_throttle2=_interopRequireDefault(_throttle),_fastdom=require("fastdom"),_fastdom2=_interopRequireDefault(_fastdom),innerHeight=window.innerHeight;