framework7/components/list-index.js

Full featured mobile HTML framework for building iOS & Android apps

(function framework7ComponentLoader(e,t){void 0===t&&(t=!0);document,window;var n=e.$,i=(e.Template7,e.utils),s=(e.device,e.support,e.Class),a=(e.Modal,e.ConstructorMethods),r=(e.ModalMethods,function(e){function t(t,s){void 0===s&&(s={}),e.call(this,s,[t]);var a,r,o,l,p=this,d={el:null,listEl:null,indexes:"auto",iosItemHeight:14,mdItemHeight:14,auroraItemHeight:14,scrollList:!0,label:!1,renderItem:function(e,t){return("\n          <li>"+e+"</li>\n        ").trim()},renderSkipPlaceholder:function(){return'<li class="list-index-skip-placeholder"></li>'},on:{}};if(p.useModulesParams(d),p.params=i.extend(d,s),!p.params.el)return p;if((a=n(p.params.el))[0].f7ListIndex)return a[0].f7ListIndex;if(0===(l=a.find("ul")).length&&(l=n("<ul></ul>"),a.append(l)),p.params.listEl&&(r=n(p.params.listEl)),"auto"===p.params.indexes&&!r)return p;function c(){var e={index:p};p.calcSize(),e!==p.height&&p.render()}function u(e){var t=n(e.target).closest("li");if(t.length){var i=t.index();if(p.skipRate>0){var s=i/(t.siblings("li").length-1);i=Math.round((p.indexes.length-1)*s)}var a=p.indexes[i];p.$el.trigger("listindex:click",{content:a,index:i}),p.emit("local::click listIndexClick",p,a,i),p.$el.trigger("listindex:select",{content:a,index:i}),p.emit("local::select listIndexSelect",p,a,i),p.$listEl&&p.params.scrollList&&p.scrollListToIndex(a,i)}}r?o=r.parents(".page-content").eq(0):0===(o=a.siblings(".page-content").eq(0)).length&&(o=a.parents(".page").eq(0).find(".page-content").eq(0)),a[0].f7ListIndex=p,i.extend(p,{app:t,$el:a,el:a&&a[0],$ul:l,ul:l&&l[0],$listEl:r,listEl:r&&r[0],$pageContentEl:o,pageContentEl:o&&o[0],indexes:s.indexes,height:0,skipRate:0}),p.useModules();var h,f,g,x,m,v={},I=null;function y(e){var t=l.children();t.length&&(g=t[0].getBoundingClientRect().top,x=t[t.length-1].getBoundingClientRect().top+t[0].offsetHeight,v.x="touchstart"===e.type?e.targetTouches[0].pageX:e.pageX,v.y="touchstart"===e.type?e.targetTouches[0].pageY:e.pageY,h=!0,f=!1,I=null)}function L(e){if(h){!f&&p.params.label&&(m=n('<span class="list-index-label"></span>'),a.append(m)),f=!0;var t="touchmove"===e.type?e.targetTouches[0].pageY:e.pageY;e.preventDefault();var i=(t-g)/(x-g);i=Math.min(Math.max(i,0),1);var s=Math.round((p.indexes.length-1)*i),r=p.indexes[s],o=x-g,l=(p.height-o)/2+(1-i)*o;s!==I&&(p.params.label&&m.html(r).transform("translateY(-"+l+"px)"),p.$listEl&&p.params.scrollList&&p.scrollListToIndex(r,s)),I=s,p.$el.trigger("listindex:select"),p.emit("local::select listIndexSelect",p,r,s)}}function $(){h&&(h=!1,f=!1,p.params.label&&(m&&m.remove(),m=void 0))}var b=!!t.support.passiveListener&&{passive:!0};return p.attachEvents=function(){a.parents(".tab").on("tab:show",c),a.parents(".page").on("page:reinit",c),a.parents(".panel").on("panel:open",c),a.parents(".sheet-modal, .actions-modal, .popup, .popover, .login-screen, .dialog, .toast").on("modal:open",c),t.on("resize",c),a.on("click",u),a.on(t.touchEvents.start,y,b),t.on("touchmove:active",L),t.on("touchend:passive",$)},p.detachEvents=function(){a.parents(".tab").off("tab:show",c),a.parents(".page").off("page:reinit",c),a.parents(".panel").off("panel:open",c),a.parents(".sheet-modal, .actions-modal, .popup, .popover, .login-screen, .dialog, .toast").off("modal:open",c),t.off("resize",c),a.off("click",u),a.off(t.touchEvents.start,y,b),t.off("touchmove:active",L),t.off("touchend:passive",$)},p.init(),p}return e&&(t.__proto__=e),t.prototype=Object.create(e&&e.prototype),t.prototype.constructor=t,t.prototype.scrollListToIndex=function(e,t){var i,s=this.$listEl,a=this.$pageContentEl,r=this.app;if(!s||!a||0===a.length)return this;if(s.find(".list-group-title, .item-divider").each((function(t,s){if(!i){var a=n(s);a.text()===e&&(i=a)}})),!i||0===i.length)return this;var o=i.parent().offset().top,l=parseInt(a.css("padding-top"),10),p=a[0].scrollTop,d=i.offset().top;if(a.parents(".page-with-navbar-large").length){var c=r.navbar.getElByPage(a.parents(".page-with-navbar-large").eq(0)),u=n(c).find(".title-large");u.length&&(l-=u[0].offsetHeight||0)}return o<=l?a.scrollTop(o+p-l):a.scrollTop(d+p-l),this},t.prototype.renderSkipPlaceholder=function(){return this.params.renderSkipPlaceholder.call(this)},t.prototype.renderItem=function(e,t){return this.params.renderItem.call(this,e,t)},t.prototype.render=function(){var e,t=this,n=t.$ul,i=t.indexes,s=t.skipRate,a=i.map((function(n,i){if(i%s!=0&&s>0)return e=!0,"";var a=t.renderItem(n,i);return e&&(a=t.renderSkipPlaceholder()+a),e=!1,a})).join("");return n.html(a),t},t.prototype.calcSize=function(){var e=this.app,t=this.params,n=this.el,i=this.indexes,s=n.offsetHeight,a=t[e.theme+"ItemHeight"],r=Math.floor(s/a),o=i.length,l=0;return o>r&&(l=Math.ceil((2*o-1)/r)),this.height=s,this.skipRate=l,this},t.prototype.calcIndexes=function(){var e=this;return"auto"===e.params.indexes?(e.indexes=[],e.$listEl.find(".list-group-title, .item-divider").each((function(t,i){var s=n(i).text();e.indexes.indexOf(s)<0&&e.indexes.push(s)}))):e.indexes=e.params.indexes,e},t.prototype.update=function(){return this.calcIndexes(),this.calcSize(),this.render(),this},t.prototype.init=function(){this.calcIndexes(),this.calcSize(),this.render(),this.attachEvents()},t.prototype.destroy=function(){var e=this;e.$el.trigger("listindex:beforedestroy",e),e.emit("local::beforeDestroy listIndexBeforeDestroy"),e.detachEvents(),e.$el[0]&&(e.$el[0].f7ListIndex=null,delete e.$el[0].f7ListIndex),i.deleteProps(e),e=null},t}(s)),o={name:"listIndex",static:{ListIndex:r},create:function(){this.listIndex=a({defaultSelector:".list-index",constructor:r,app:this,domProp:"f7ListIndex"})},on:{tabMounted:function(e){var t=this;n(e).find(".list-index-init").each((function(e,s){var a=i.extend(n(s).dataset(),{el:s});t.listIndex.create(a)}))},tabBeforeRemove:function(e){n(e).find(".list-index-init").each((function(e,t){t.f7ListIndex&&t.f7ListIndex.destroy()}))},pageInit:function(e){var t=this;e.$el.find(".list-index-init").each((function(e,s){var a=i.extend(n(s).dataset(),{el:s});t.listIndex.create(a)}))},pageBeforeRemove:function(e){e.$el.find(".list-index-init").each((function(e,t){t.f7ListIndex&&t.f7ListIndex.destroy()}))}},vnode:{"list-index-init":{insert:function(e){var t=e.elm,s=i.extend(n(t).dataset(),{el:t});this.listIndex.create(s)},destroy:function(e){var t=e.elm;t.f7ListIndex&&t.f7ListIndex.destroy()}}}};if(t){if(e.prototype.modules&&e.prototype.modules[o.name])return;e.use(o),e.instance&&(e.instance.useModuleParams(o,e.instance.params),e.instance.useModule(o))}return o}(Framework7, typeof Framework7AutoInstallComponent === 'undefined' ? undefined : Framework7AutoInstallComponent))