zmp-core/components/virtual-list/virtual-list.js

Full featured mobile HTML framework for building iOS & Android apps

(function zmpComponentLoader(e,t){void 0===t&&(t=!0);var r=e.$,a=e.utils,n=e.getDevice,i=(e.getSupport,e.Class),l=(e.Modal,e.ConstructorMethods);e.ModalMethods;function s(e){this.wrapped=e}function o(e){var t,r;function a(t,r){try{var i=e[t](r),l=i.value,o=l instanceof s;Promise.resolve(o?l.wrapped:l).then((function(e){o?a("return"===t?"return":"next",e):n(i.done?"return":"normal",e)}),(function(e){a("throw",e)}))}catch(e){n("throw",e)}}function n(e,n){switch(e){case"return":t.resolve({value:n,done:!0});break;case"throw":t.reject(n);break;default:t.resolve({value:n,done:!1})}(t=t.next)?a(t.key,t.arg):r=null}this._invoke=function(e,n){return new Promise((function(i,l){var s={key:e,arg:n,resolve:i,reject:l,next:null};r?r=r.next=s:(t=r=s,a(e,n))}))},"function"!=typeof e.return&&(this.return=void 0)}function h(e,t){return(h=Object.setPrototypeOf||function(e,t){return e.__proto__=t,e})(e,t)}function c(e){if(void 0===e)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return e}o.prototype["function"==typeof Symbol&&Symbol.asyncIterator||"@@asyncIterator"]=function(){return this},o.prototype.next=function(e){return this._invoke("next",e)},o.prototype.throw=function(e){return this._invoke("throw",e)},o.prototype.return=function(e){return this._invoke("return",e)};var m=a.extend,p=a.deleteProps,d=function(e){var t,a;function i(t,a){var i;void 0===a&&(a={});var l,s=c(i=e.call(this,a,[t])||this),o=n();"md"===t.theme?l=48:"ios"===t.theme?l=44:"aurora"===t.theme&&(l=38);var h={cols:1,height:l,cache:!0,dynamicHeightBufferSize:1,showFilteredItemsOnly:!1,renderExternal:void 0,setListHeight:!0,searchByItem:void 0,searchAll:void 0,ul:null,createUl:!0,scrollableParentEl:void 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(s.useModulesParams(h),s.params=m(h,a),void 0!==s.params.height&&s.params.height||(s.params.height=l),s.$el=r(a.el),s.el=s.$el[0],0===s.$el.length)return c(i);s.$el[0].zmpVirtualList=s,s.items=s.params.items,s.params.showFilteredItemsOnly&&(s.filteredItems=[]),s.params.renderItem&&(s.renderItem=s.params.renderItem),s.$pageContentEl=s.$el.parents(".page-content"),s.pageContentEl=s.$pageContentEl[0],s.$scrollableParentEl=s.params.scrollableParentEl?r(s.params.scrollableParentEl).eq(0):s.$pageContentEl,!s.$scrollableParentEl.length&&s.$pageContentEl.length&&(s.$scrollableParentEl=s.$pageContentEl),s.scrollableParentEl=s.$scrollableParentEl[0],void 0!==s.params.updatableScroll?s.updatableScroll=s.params.updatableScroll:(s.updatableScroll=!0,o.ios&&o.osVersion.split(".")[0]<8&&(s.updatableScroll=!1));var p,d=s.params.ul;s.$ul=d?r(s.params.ul):s.$el.children("ul"),0===s.$ul.length&&s.params.createUl&&(s.$el.append("<ul></ul>"),s.$ul=s.$el.children("ul")),s.ul=s.$ul[0],p=s.ul||s.params.createUl?s.$ul:s.$el,m(s,{$itemsWrapEl:p,itemsWrapEl:p[0],domCache:{},displayDomCache:{},tempDomElement:document.createElement("ul"),lastRepaintY:null,fragment:document.createDocumentFragment(),pageHeight:void 0,rowsPerScreen:void 0,rowsBefore:void 0,rowsAfter:void 0,rowsToRender:void 0,maxBufferHeight:0,listHeight:void 0,dynamicHeight:"function"==typeof s.params.height,autoHeight:"auto"===s.params.height}),s.useModules();var u,f,g,v,I=s.handleScroll.bind(s),E=s.handleResize.bind(s);return s.attachEvents=function(){u=s.$el.parents(".page").eq(0),f=s.$el.parents(".tab").filter((function(e){return 0===r(e).parent(".tabs").parent(".tabs-animated-wrap, .tabs-swipeable-wrap").length})).eq(0),g=s.$el.parents(".panel").eq(0),v=s.$el.parents(".popup").eq(0),s.$scrollableParentEl.on("scroll",I),u.length&&u.on("page:reinit",E),f.length&&f.on("tab:show",E),g.length&&g.on("panel:open",E),v.length&&v.on("popup:open",E),t.on("resize",E)},s.detachEvents=function(){s.$scrollableParentEl.off("scroll",I),u.length&&u.off("page:reinit",E),f.length&&f.off("tab:show",E),g.length&&g.off("panel:open",E),v.length&&v.off("popup:open",E),t.off("resize",E)},s.init(),s||c(i)}a=e,(t=i).prototype=Object.create(a.prototype),t.prototype.constructor=t,h(t,a);var l=i.prototype;return l.setListSize=function(e){var t=this,r=t.filteredItems||t.items;if(e||(t.pageHeight=t.$scrollableParentEl[0].offsetHeight),t.dynamicHeight){t.listHeight=0,t.heights=[];for(var a=0;a<r.length;a+=1){var n=t.params.height(r[a]);t.listHeight+=n,t.heights.push(n)}}else if(t.autoHeight){t.listHeight=0,t.heights||(t.heights=[]),t.heightsCalculated||(t.heightsCalculated=[]);var i={};t.$itemsWrapEl.find("[data-virtual-list-index]").forEach((function(e){i[parseInt(e.getAttribute("data-virtual-list-index"),10)]=e}));for(var l=0;l<r.length;l+=1){var s=i[l];s&&(t.heightsCalculated.includes(l)||(t.heights[l]=s.offsetHeight,t.heightsCalculated.push(l))),void 0===t.heights[l]&&(t.heights[l]=40),t.listHeight+=t.heights[l]}}else t.listHeight=Math.ceil(r.length/t.params.cols)*t.params.height,t.rowsPerScreen=Math.ceil(t.pageHeight/t.params.height),t.rowsBefore=t.params.rowsBefore||2*t.rowsPerScreen,t.rowsAfter=t.params.rowsAfter||t.rowsPerScreen,t.rowsToRender=t.rowsPerScreen+t.rowsBefore+t.rowsAfter,t.maxBufferHeight=t.rowsBefore/2*t.params.height;(t.updatableScroll||t.params.setListHeight)&&t.$itemsWrapEl.css({height:t.listHeight+"px"})},l.render=function(e,t){var r=this;e&&(r.lastRepaintY=null);var a=-(r.$el[0].getBoundingClientRect().top-r.$scrollableParentEl[0].getBoundingClientRect().top);if(void 0!==t&&(a=t),null===r.lastRepaintY||Math.abs(a-r.lastRepaintY)>r.maxBufferHeight||!r.updatableScroll&&r.$scrollableParentEl[0].scrollTop+r.pageHeight>=r.$scrollableParentEl[0].scrollHeight){r.lastRepaintY=a;var n,i,l,s=r.filteredItems||r.items,o=0,h=0;if(r.dynamicHeight||r.autoHeight){var c,m=0;r.maxBufferHeight=r.pageHeight;for(var p=0;p<r.heights.length;p+=1)c=r.heights[p],void 0===n&&(m+c>=a-2*r.pageHeight*r.params.dynamicHeightBufferSize?n=p:o+=c),void 0===i&&((m+c>=a+2*r.pageHeight*r.params.dynamicHeightBufferSize||p===r.heights.length-1)&&(i=p+1),h+=c),m+=c;i=Math.min(i,s.length)}else(n=(parseInt(a/r.params.height,10)-r.rowsBefore)*r.params.cols)<0&&(n=0),i=Math.min(n+r.rowsToRender*r.params.cols,s.length);var d,u=[];for(r.reachEnd=!1,d=n;d<i;d+=1){var f=void 0,g=r.items.indexOf(s[d]);d===n&&(r.currentFromIndex=g),d===i-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?u.push(s[d]):r.domCache[g]?(f=r.domCache[g]).zmpVirtualListIndex=g:(r.renderItem?r.tempDomElement.innerHTML=r.renderItem(s[d],g).trim():r.tempDomElement.innerHTML=s[d].toString().trim(),f=r.tempDomElement.childNodes[0],r.params.cache&&(r.domCache[g]=f),f.zmpVirtualListIndex=g),d===n&&(l=r.dynamicHeight||r.autoHeight?o:d*r.params.height/r.params.cols),r.params.renderExternal||(f.style.top=l+"px",r.emit("local::itemBeforeInsert vlItemBeforeInsert",r,f,s[d]),r.fragment.appendChild(f))}r.updatableScroll||(r.dynamicHeight||r.autoHeight?r.itemsWrapEl.style.height=h+"px":r.itemsWrapEl.style.height=d*r.params.height/r.params.cols+"px"),r.params.renderExternal?s&&0===s.length&&(r.reachEnd=!0):(r.emit("local::beforeClear vlBeforeClear",r,r.fragment),r.itemsWrapEl.innerHTML="",r.emit("local::itemsBeforeInsert vlItemsBeforeInsert",r,r.fragment),s&&0===s.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.$scrollableParentEl.scrollTop(t,0),r.params.renderExternal&&r.params.renderExternal(r,{fromIndex:n,toIndex:i,listHeight:r.listHeight,topPosition:l,items:u}),r.autoHeight&&requestAnimationFrame((function(){r.setListSize(!0)}))}},l.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.$scrollableParentEl[0].scrollTop=0),r.update()},l.resetFilter=function(){var e=this;e.params.showFilteredItemsOnly?e.filteredItems=[]:(e.filteredItems=null,delete e.filteredItems),e.update()},l.scrollToItem=function(e){var t=this;if(e>t.items.length)return!1;var r=0;if(t.dynamicHeight||t.autoHeight)for(var a=0;a<e;a+=1)r+=t.heights[a];else r=e*t.params.height;var n=t.$el[0].offsetTop;return t.render(!0,n+r-parseInt(t.$scrollableParentEl.css("padding-top"),10)),!0},l.handleScroll=function(){this.render()},l.isVisible=function(){var e=this;return!!(e.el.offsetWidth||e.el.offsetHeight||e.el.getClientRects().length)},l.handleResize=function(){var e=this;e.isVisible()&&(e.heightsCalculated=[],e.setListSize(),e.render(!0))},l.appendItems=function(e){for(var t=0;t<e.length;t+=1)this.items.push(e[t]);this.update()},l.appendItem=function(e){this.appendItems([e])},l.replaceAllItems=function(e){var t=this;t.items=e,delete t.filteredItems,t.domCache={},t.update()},l.replaceItem=function(e,t){var r=this;r.items[e]=t,r.params.cache&&delete r.domCache[e],r.update()},l.prependItems=function(e){for(var t=this,r=e.length-1;r>=0;r-=1)t.items.unshift(e[r]);if(t.params.cache){var a={};Object.keys(t.domCache).forEach((function(r){a[parseInt(r,10)+e.length]=t.domCache[r]})),t.domCache=a}t.update()},l.prependItem=function(e){this.prependItems([e])},l.moveItem=function(e,t){var r=this,a=e,n=t;if(a!==n){var i=r.items.splice(a,1)[0];if(n>=r.items.length?(r.items.push(i),n=r.items.length-1):r.items.splice(n,0,i),r.params.cache){var l={};Object.keys(r.domCache).forEach((function(e){var t=parseInt(e,10),i=a<n?a:n,s=a<n?n:a,o=a<n?-1:1;(t<i||t>s)&&(l[t]=r.domCache[t]),t===i&&(l[s]=r.domCache[t]),t>i&&t<=s&&(l[t+o]=r.domCache[t])})),r.domCache=l}r.update()}},l.insertItemBefore=function(e,t){var r=this;if(0!==e)if(e>=r.items.length)r.appendItem(t);else{if(r.items.splice(e,0,t),r.params.cache){var a={};Object.keys(r.domCache).forEach((function(t){var n=parseInt(t,10);n>=e&&(a[n+1]=r.domCache[n])})),r.domCache=a}r.update()}else r.prependItem(t)},l.deleteItems=function(e){for(var t,r=this,a=0,n=function(n){var i=e[n];void 0!==t&&i>t&&(a=-n),i+=a,t=e[n];var l=r.items.splice(i,1)[0];if(r.filteredItems&&r.filteredItems.indexOf(l)>=0&&r.filteredItems.splice(r.filteredItems.indexOf(l),1),r.params.cache){var s={};Object.keys(r.domCache).forEach((function(e){var t=parseInt(e,10);t===i?delete r.domCache[i]:parseInt(e,10)>i?s[t-1]=r.domCache[e]:s[t]=r.domCache[e]})),r.domCache=s}},i=0;i<e.length;i+=1)n(i);r.update()},l.deleteAllItems=function(){var e=this;e.items=[],delete e.filteredItems,e.params.cache&&(e.domCache={}),e.update()},l.deleteItem=function(e){this.deleteItems([e])},l.clearCache=function(){this.domCache={}},l.update=function(e){var t=this;e&&t.params.cache&&(t.domCache={}),t.heightsCalculated=[],t.setListSize(),t.render(!0)},l.init=function(){var e=this;e.attachEvents(),e.setListSize(),e.render()},l.destroy=function(){var e=this;e.detachEvents(),e.$el[0].zmpVirtualList=null,delete e.$el[0].zmpVirtualList,p(e),e=null},i}(i),u={name:"virtualList",static:{VirtualList:d},create:function(){this.virtualList=l({defaultSelector:".virtual-list",constructor:d,app:this,domProp:"zmpVirtualList"})}};if(t){if(e.prototype.modules&&e.prototype.modules[u.name])return;e.use(u),e.instance&&(e.instance.useModuleParams(u,e.instance.params),e.instance.useModule(u))}return u}(ZMP, typeof ZMPAutoInstallComponent === 'undefined' ? undefined : ZMPAutoInstallComponent))