framework7/lazy-components/virtual-list.js

Full featured mobile HTML framework for building iOS & Android apps

(function framework7ComponentLoader(e,t){void 0===t&&(t=!0);var c=document,f=(window,e.$),u=e.Template7,g=e.utils,v=e.device,r=(e.support,e.Class),a=(e.Modal,e.ConstructorMethods),i=(e.ModalMethods,function(d){function e(e,t){void 0===t&&(t={}),d.call(this,t,[e]);var r=this,a={cols:1,height:"md"===e.theme?48:44,cache:!0,dynamicHeightBufferSize:1,showFilteredItemsOnly:!1,renderExternal:void 0,setListHeight:!0,searchByItem:void 0,searchAll:void 0,itemTemplate:void 0,ul:null,createUl:!0,renderItem:function(e){return('\n          <li>\n            <div class="item-content">\n              <div class="item-inner">\n                <div class="item-title">'+e+"</div>\n              </div>\n            </div>\n          </li>\n        ").trim()},on:{}};if(r.useModulesParams(a),r.params=g.extend(a,t),void 0!==r.params.height&&r.params.height||(r.params.height="md"===e.theme?48:44),r.$el=f(t.el),r.el=r.$el[0],0!==r.$el.length){(r.$el[0].f7VirtualList=r).items=r.params.items,r.params.showFilteredItemsOnly&&(r.filteredItems=[]),r.params.itemTemplate?"string"==typeof r.params.itemTemplate?r.renderItem=u.compile(r.params.itemTemplate):"function"==typeof r.params.itemTemplate&&(r.renderItem=r.params.itemTemplate):r.params.renderItem&&(r.renderItem=r.params.renderItem),r.$pageContentEl=r.$el.parents(".page-content"),r.pageContentEl=r.$pageContentEl[0],void 0!==r.params.updatableScroll?r.updatableScroll=r.params.updatableScroll:(r.updatableScroll=!0,v.ios&&v.osVersion.split(".")[0]<8&&(r.updatableScroll=!1));var i,s=r.params.ul;r.$ul=s?f(r.params.ul):r.$el.children("ul"),0===r.$ul.length&&r.params.createUl&&(r.$el.append("<ul></ul>"),r.$ul=r.$el.children("ul")),r.ul=r.$ul[0],i=r.ul||r.params.createUl?r.$ul:r.$el,g.extend(r,{$itemsWrapEl:i,itemsWrapEl:i[0],domCache:{},displayDomCache:{},tempDomElement:c.createElement("ul"),lastRepaintY:null,fragment:c.createDocumentFragment(),pageHeight:void 0,rowsPerScreen:void 0,rowsBefore:void 0,rowsAfter:void 0,rowsToRender:void 0,maxBufferHeight:0,listHeight:void 0,dynamicHeight:"function"==typeof r.params.height}),r.useModules();var n,o,l,p,m=r.handleScroll.bind(r),h=r.handleResize.bind(r);return r.attachEvents=function(){n=r.$el.parents(".page").eq(0),o=r.$el.parents(".tab").eq(0),l=r.$el.parents(".panel").eq(0),p=r.$el.parents(".popup").eq(0),r.$pageContentEl.on("scroll",m),n&&n.on("page:reinit",h),o&&o.on("tab:show",h),l&&l.on("panel:open",h),p&&p.on("popup:open",h),e.on("resize",h)},r.detachEvents=function(){r.$pageContentEl.off("scroll",m),n&&n.off("page:reinit",h),o&&o.off("tab:show",h),l&&l.off("panel:open",h),p&&p.off("popup:open",h),e.off("resize",h)},r.init(),r}}return d&&(e.__proto__=d),((e.prototype=Object.create(d&&d.prototype)).constructor=e).prototype.setListSize=function(){var e=this,t=e.filteredItems||e.items;if(e.pageHeight=e.$pageContentEl[0].offsetHeight,e.dynamicHeight){e.listHeight=0,e.heights=[];for(var r=0;r<t.length;r+=1){var a=e.params.height(t[r]);e.listHeight+=a,e.heights.push(a)}}else e.listHeight=Math.ceil(t.length/e.params.cols)*e.params.height,e.rowsPerScreen=Math.ceil(e.pageHeight/e.params.height),e.rowsBefore=e.params.rowsBefore||2*e.rowsPerScreen,e.rowsAfter=e.params.rowsAfter||e.rowsPerScreen,e.rowsToRender=e.rowsPerScreen+e.rowsBefore+e.rowsAfter,e.maxBufferHeight=e.rowsBefore/2*e.params.height;(e.updatableScroll||e.params.setListHeight)&&e.$itemsWrapEl.css({height:e.listHeight+"px"})},e.prototype.render=function(e,t){var r=this;e&&(r.lastRepaintY=null);var a=-(r.$el[0].getBoundingClientRect().top-r.$pageContentEl[0].getBoundingClientRect().top);if(void 0!==t&&(a=t),null===r.lastRepaintY||Math.abs(a-r.lastRepaintY)>r.maxBufferHeight||!r.updatableScroll&&r.$pageContentEl[0].scrollTop+r.pageHeight>=r.$pageContentEl[0].scrollHeight){r.lastRepaintY=a;var i,s,n,o=r.filteredItems||r.items,l=0,p=0;if(r.dynamicHeight){var m,h=0;r.maxBufferHeight=r.pageHeight;for(var d=0;d<r.heights.length;d+=1)m=r.heights[d],void 0===i&&(h+m>=a-2*r.pageHeight*r.params.dynamicHeightBufferSize?i=d:l+=m),void 0===s&&((h+m>=a+2*r.pageHeight*r.params.dynamicHeightBufferSize||d===r.heights.length-1)&&(s=d+1),p+=m),h+=m;s=Math.min(s,o.length)}else(i=(parseInt(a/r.params.height,10)-r.rowsBefore)*r.params.cols)<0&&(i=0),s=Math.min(i+r.rowsToRender*r.params.cols,o.length);var c,f=[];for(r.reachEnd=!1,c=i;c<s;c+=1){var u=void 0,g=r.items.indexOf(o[c]);c===i&&(r.currentFromIndex=g),c===s-1&&(r.currentToIndex=g),r.filteredItems?r.items[g]===r.filteredItems[r.filteredItems.length-1]&&(r.reachEnd=!0):g===r.items.length-1&&(r.reachEnd=!0),r.params.renderExternal?f.push(o[c]):r.domCache[g]?(u=r.domCache[g]).f7VirtualListIndex=g:(r.renderItem?r.tempDomElement.innerHTML=r.renderItem(o[c],g).trim():r.tempDomElement.innerHTML=o[c].toString().trim(),u=r.tempDomElement.childNodes[0],r.params.cache&&(r.domCache[g]=u),u.f7VirtualListIndex=g),c===i&&(n=r.dynamicHeight?l:c*r.params.height/r.params.cols),r.params.renderExternal||(u.style.top=n+"px",r.emit("local::itemBeforeInsert vlItemBeforeInsert",r,u,o[c]),r.fragment.appendChild(u))}r.updatableScroll||(r.dynamicHeight?r.itemsWrapEl.style.height=p+"px":r.itemsWrapEl.style.height=c*r.params.height/r.params.cols+"px"),r.params.renderExternal?o&&0===o.length&&(r.reachEnd=!0):(r.emit("local::beforeClear vlBeforeClear",r,r.fragment),r.itemsWrapEl.innerHTML="",r.emit("local::itemsBeforeInsert vlItemsBeforeInsert",r,r.fragment),o&&0===o.length?(r.reachEnd=!0,r.params.emptyTemplate&&(r.itemsWrapEl.innerHTML=r.params.emptyTemplate)):r.itemsWrapEl.appendChild(r.fragment),r.emit("local::itemsAfterInsert vlItemsAfterInsert",r,r.fragment)),void 0!==t&&e&&r.$pageContentEl.scrollTop(t,0),r.params.renderExternal&&r.params.renderExternal(r,{fromIndex:i,toIndex:s,listHeight:r.listHeight,topPosition:n,items:f})}},e.prototype.filterItems=function(e,t){void 0===t&&(t=!0);var r=this;r.filteredItems=[];for(var a=0;a<e.length;a+=1)r.filteredItems.push(r.items[e[a]]);t&&(r.$pageContentEl[0].scrollTop=0),r.update()},e.prototype.resetFilter=function(){var e=this;e.params.showFilteredItemsOnly?e.filteredItems=[]:(e.filteredItems=null,delete e.filteredItems),e.update()},e.prototype.scrollToItem=function(e){var t=this;if(e>t.items.length)return!1;var r=0;if(t.dynamicHeight)for(var a=0;a<e;a+=1)r+=t.heights[a];else r=e*t.params.height;var i=t.$el[0].offsetTop;return t.render(!0,i+r-parseInt(t.$pageContentEl.css("padding-top"),10)),!0},e.prototype.handleScroll=function(){this.render()},e.prototype.isVisible=function(){return!!(this.el.offsetWidth||this.el.offsetHeight||this.el.getClientRects().length)},e.prototype.handleResize=function(){this.isVisible()&&(this.setListSize(),this.render(!0))},e.prototype.appendItems=function(e){for(var t=0;t<e.length;t+=1)this.items.push(e[t]);this.update()},e.prototype.appendItem=function(e){this.appendItems([e])},e.prototype.replaceAllItems=function(e){this.items=e,delete this.filteredItems,this.domCache={},this.update()},e.prototype.replaceItem=function(e,t){this.items[e]=t,this.params.cache&&delete this.domCache[e],this.update()},e.prototype.prependItems=function(t){for(var r=this,e=t.length-1;0<=e;e-=1)r.items.unshift(t[e]);if(r.params.cache){var a={};Object.keys(r.domCache).forEach(function(e){a[parseInt(e,10)+t.length]=r.domCache[e]}),r.domCache=a}r.update()},e.prototype.prependItem=function(e){this.prependItems([e])},e.prototype.moveItem=function(e,t){var s=this,n=e,o=t;if(n!==o){var r=s.items.splice(n,1)[0];if(o>=s.items.length?(s.items.push(r),o=s.items.length-1):s.items.splice(o,0,r),s.params.cache){var l={};Object.keys(s.domCache).forEach(function(e){var t=parseInt(e,10),r=n<o?n:o,a=n<o?o:n,i=n<o?-1:1;(t<r||a<t)&&(l[t]=s.domCache[t]),t===r&&(l[a]=s.domCache[t]),r<t&&t<=a&&(l[t+i]=s.domCache[t])}),s.domCache=l}s.update()}},e.prototype.insertItemBefore=function(r,e){var a=this;if(0!==r)if(r>=a.items.length)a.appendItem(e);else{if(a.items.splice(r,0,e),a.params.cache){var i={};Object.keys(a.domCache).forEach(function(e){var t=parseInt(e,10);r<=t&&(i[t+1]=a.domCache[t])}),a.domCache=i}a.update()}else a.prependItem(e)},e.prototype.deleteItems=function(i){for(var s,n=this,o=0,e=function(e){var r=i[e];void 0!==s&&s<r&&(o=-e),r+=o,s=i[e];var t=n.items.splice(r,1)[0];if(n.filteredItems&&0<=n.filteredItems.indexOf(t)&&n.filteredItems.splice(n.filteredItems.indexOf(t),1),n.params.cache){var a={};Object.keys(n.domCache).forEach(function(e){var t=parseInt(e,10);t===r?delete n.domCache[r]:parseInt(e,10)>r?a[t-1]=n.domCache[e]:a[t]=n.domCache[e]}),n.domCache=a}},t=0;t<i.length;t+=1)e(t);n.update()},e.prototype.deleteAllItems=function(){var e=this;e.items=[],delete e.filteredItems,e.params.cache&&(e.domCache={}),e.update()},e.prototype.deleteItem=function(e){this.deleteItems([e])},e.prototype.clearCache=function(){this.domCache={}},e.prototype.update=function(e){e&&this.params.cache&&(this.domCache={}),this.setListSize(),this.render(!0)},e.prototype.init=function(){this.attachEvents(),this.setListSize(),this.render()},e.prototype.destroy=function(){var e=this;e.detachEvents(),e.$el[0].f7VirtualList=null,delete e.$el[0].f7VirtualList,g.deleteProps(e),e=null},e}(r)),s={name:"virtualList",static:{VirtualList:i},create:function(){this.virtualList=a({defaultSelector:".virtual-list",constructor:i,app:this,domProp:"f7VirtualList"})}};if(t){if(e.prototype.modules&&e.prototype.modules[s.name])return;e.use(s),e.instance&&(e.instance.useModuleParams(s,e.instance.params),e.instance.useModule(s))}return s}(Framework7, typeof Framework7AutoInstallComponent === 'undefined' ? undefined : Framework7AutoInstallComponent))