UNPKG

vanilla-recycler-view

Version:

high performance UI rendering library for web browser

2 lines 8.99 kB
/*! For license information please see vanilla-recycler-view.min.js.LICENSE.txt */ !function(e,t){"object"==typeof exports&&"object"==typeof module?module.exports=t():"function"==typeof define&&define.amd?define([],t):"object"==typeof exports?exports.VanillaRecyclerView=t():e.VanillaRecyclerView=t()}(self,(function(){return function(){"use strict";var e={"./src/styles.scss":function(e,t,r){r.r(t)},"./src/engine/index.ts":function(e,t,r){var n=this&&this.__createBinding||(Object.create?function(e,t,r,n){void 0===n&&(n=r),Object.defineProperty(e,n,{enumerable:!0,get:function(){return t[r]}})}:function(e,t,r,n){void 0===n&&(n=r),e[n]=t[r]}),i=this&&this.__exportStar||function(e,t){for(var r in e)"default"===r||Object.prototype.hasOwnProperty.call(t,r)||n(t,e,r)};Object.defineProperty(t,"__esModule",{value:!0}),i(r("./src/engine/recycler-view.ts"),t),i(r("./src/engine/parser.ts"),t),i(r("./src/engine/virtual-element.ts"),t)},"./src/engine/parser.ts":function(e,t){Object.defineProperty(t,"__esModule",{value:!0}),t.toPx=t.parsePx=void 0,t.parsePx=function(e){return Number(e.split("px")[0])},t.toPx=function(e){return e.toString()+"px"}},"./src/engine/recycler-view.ts":function(e,t,r){var n=this&&this.__spreadArrays||function(){for(var e=0,t=0,r=arguments.length;t<r;t++)e+=arguments[t].length;var n=Array(e),i=0;for(t=0;t<r;t++)for(var s=arguments[t],o=0,a=s.length;o<a;o++,i++)n[i]=s[o];return n};Object.defineProperty(t,"__esModule",{value:!0}),t.VanillaRecyclerView=t.DIRECTION=t.DEFAULT_ITEM_SIZE=void 0,r("./src/modules/zoom-listener.ts");var i,s=r("./src/engine/index.ts");t.DEFAULT_ITEM_SIZE=50,function(e){e.VERTICAL="vertical",e.HORIZONTAL="horizontal"}(i=t.DIRECTION||(t.DIRECTION={}));var o=function(){function e(e,r){var n=this;this.virtualElements=[],this.mountedVirtualElements=[],this.pendingUnmount=[],this.reusables=[],this.root=e,r.direction?this._direction=r.direction:this._direction=i.VERTICAL,r.preload?this._preload=r.preload:this._preload=t.DEFAULT_ITEM_SIZE,r.size?this._size=r.size:this._size=t.DEFAULT_ITEM_SIZE,this._renderer=r.renderer,this.root.classList.add("recycler_view_root"),this._direction===i.VERTICAL?this.root.classList.add(i.VERTICAL):this._direction===i.HORIZONTAL&&this.root.classList.add(i.HORIZONTAL),this.container=document.createElement("div"),this.container.classList.add("recycler_view_container"),this.setData(r.data),this.root.appendChild(this.container),this.root.addEventListener("scroll",this.onScroll.bind(this)),document.body.addEventListener("zoom",(function(){return n.onScroll()}))}return e.prototype.onScroll=function(){var e=this,t=this.root,r=t.scrollTop,n=t.scrollLeft,o=this.root.getBoundingClientRect(),a=o.height,l=o.width,c=this.getMaxScrollSize(),u=function(){var t=0;switch(e._direction){case i.VERTICAL:t=e.root.clientHeight;break;case i.HORIZONTAL:t=e.root.clientWidth}return c>t?c:t}(),h=0,p=0;switch(this._direction){case i.VERTICAL:r+a,h=r-this._preload,p=r+a+this._preload;break;case i.HORIZONTAL:n+l,h=n-this._preload,p=n+l+this._preload}var d=this.virtualElements.filter((function(e){return e.start>=h&&e.start+e.size<=p})),m=[],f=[];d.forEach((function(t){-1===e.mountedVirtualElements.indexOf(t)?f.push(t):m.push(t)})),this.pendingUnmount.concat(this.mountedVirtualElements.filter((function(e){return-1===d.indexOf(e)}))).forEach((function(t){if(t.isMounted()){var r=t.unmountRenderer();e.reusables.push(r)}})),f.forEach((function(t){var r=function(){var r,n=e.getNextReusable(),i=n&&n.renderer.onMount&&n.renderer.onMount({api:e,data:t.data,index:t.index});return n&&i?n:(null===(r=null==n?void 0:n.wrapperElement.parentElement)||void 0===r||r.removeChild(n.wrapperElement),e.createReusable(t))}();t.mountRenderer(r)})),m.forEach((function(e){e.updatePosition()})),this.reusables.forEach((function(t){var r,n=0;switch(e._direction){case i.VERTICAL:n=s.parsePx(t.wrapperElement.style.top)+a;break;case i.HORIZONTAL:n=s.parsePx(t.wrapperElement.style.left)+l}n>u&&(null===(r=t.wrapperElement.parentElement)||void 0===r||r.removeChild(t.wrapperElement))})),this.pendingUnmount=[],this.mountedVirtualElements=d},e.prototype.getSize=function(e,t){return"function"==typeof this._size?this._size({api:this,data:t,index:e}):this._size},e.prototype.createReusable=function(e){var t=document.createElement("div");t.classList.add("recycler_view_item");var r=new this._renderer;r.initialize({api:this,data:e.data,index:e.index});var n=r.getLayout();return t.appendChild(n),{wrapperElement:t,renderer:r}},e.prototype.getNextReusable=function(){return this.reusables&&this.reusables.length?this.reusables.splice(0,1)[0]:null},e.prototype.setData=function(e){var t=this;this.reusables=[],this.pendingUnmount=this.virtualElements.slice(),this.virtualElements=[],this.calculateSize(),this.onScroll(),this.virtualElements=e.map((function(e){return new s.VirtualElement(t,e)})),this.calculateSize(),this.onScroll()},e.prototype.calculateSize=function(){var e=this,t=this.virtualElements.reduce((function(t,r,n){var i=e.getSize(n,r.data);return r.setIndex(n),r.setPosition(t,i),t+i}),0);switch(this._direction){case i.VERTICAL:this.container.style.height=s.toPx(t);break;case i.HORIZONTAL:this.container.style.width=s.toPx(t);break;default:throw new Error("not supported direction")}},e.prototype.getMaxScrollSize=function(){switch(this._direction){case i.VERTICAL:return s.parsePx(this.container.style.height);case i.HORIZONTAL:return s.parsePx(this.container.style.width)}},e.prototype.splice=function(e,t){this.pendingUnmount=void 0===t?this.virtualElements.splice(e):this.virtualElements.splice(e,t),this.calculateSize(),this.onScroll()},e.prototype.insert=function(e){for(var t=this,r=[],i=1;i<arguments.length;i++)r[i-1]=arguments[i];var o=this.virtualElements.slice(0,e),a=this.virtualElements.slice(e),l=r.map((function(e){return new s.VirtualElement(t,e)}));this.virtualElements=n(o,l,a),this.calculateSize(),this.onScroll()},e.prototype.push=function(){for(var e,t=this,r=[],n=0;n<arguments.length;n++)r[n]=arguments[n];var i=r.map((function(e){return new s.VirtualElement(t,e)}));(e=this.virtualElements).push.apply(e,i),this.calculateSize(),this.onScroll()},e}();t.VanillaRecyclerView=o},"./src/engine/virtual-element.ts":function(e,t,r){Object.defineProperty(t,"__esModule",{value:!0}),t.VirtualElement=void 0;var n=r("./src/engine/index.ts"),i=function(){function e(e,t){this.index=0,this.start=0,this.size=0,this.wrapperElement=null,this.renderer=null,this.parent=e,this.data=t}return e.prototype.setPosition=function(e,t){this.start=e,this.size=t},e.prototype.setIndex=function(e){this.index=e},e.prototype.updatePosition=function(){if(!this.wrapperElement)throw new Error("element not mounted");switch(this.parent._direction){case n.DIRECTION.VERTICAL:this.wrapperElement.style.top=n.toPx(this.start),this.wrapperElement.style.height=n.toPx(this.size);break;case n.DIRECTION.HORIZONTAL:this.wrapperElement.style.left=n.toPx(this.start),this.wrapperElement.style.width=n.toPx(this.size)}},e.prototype.isMounted=function(){return!!this.renderer&&!!this.wrapperElement},e.prototype.mountRenderer=function(e){if(this.wrapperElement||this.renderer)throw new Error("reusable already mounted");switch(this.parent._direction){case n.DIRECTION.VERTICAL:e.wrapperElement.style.top=n.toPx(this.start),e.wrapperElement.style.height=n.toPx(this.size);break;case n.DIRECTION.HORIZONTAL:e.wrapperElement.style.left=n.toPx(this.start),e.wrapperElement.style.width=n.toPx(this.size)}this.wrapperElement=e.wrapperElement,this.wrapperElement.classList.remove("hidden"),this.renderer=e.renderer,this.wrapperElement.parentElement||this.parent.container.appendChild(this.wrapperElement)},e.prototype.unmountRenderer=function(){var e=this.renderer,t=this.wrapperElement;if(e&&t)return this.renderer=null,this.wrapperElement=null,e.onUnmount&&e.onUnmount({api:this.parent,data:this.data,index:this.index}),null==t||t.classList.add("hidden"),{renderer:e,wrapperElement:t};throw new Error("renderer not mounted")},e.prototype.destroyRenderer=function(){var e,t=this.unmountRenderer();null===(e=t.wrapperElement.parentElement)||void 0===e||e.removeChild(t.wrapperElement)},e}();t.VirtualElement=i},"./src/entry.ts":function(e,t,r){r("./src/styles.scss");var n=r("./src/engine/recycler-view.ts");e.exports=n.VanillaRecyclerView},"./src/modules/zoom-listener.ts":function(){var e=document.body.getClientRects()[0],t=e.width,r=e.height,n=t,i=r;setInterval((function(){var e=document.body.getClientRects()[0],t=e.width,r=e.height;if(t!==n||r!==i){var s=document.createEvent("CustomEvent");s.initCustomEvent("zoom",!1,!1,{detail:{width:t,height:r}}),document.body.dispatchEvent(s),n=t,i=r}}),100)}},t={};function r(n){if(t[n])return t[n].exports;var i=t[n]={exports:{}};return e[n].call(i.exports,i,i.exports,r),i.exports}return r.r=function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},r("./src/entry.ts")}()}));