@cas-smartdesign/virtual-list 6.3.0 → 6.3.1

package/dist/docs/2_lazy_load_with_search.js

@@ -1 +1 @@
-import"./doc.mjs";import{I as g,g as p}from"./item-provider.mjs";class l{constructor(e,t){this.eventTarget=e,this.keydownHandler=t,this.catchedKeys=["Down","ArrowDown","Up","ArrowUp","Enter"],this.markAsFocusTargetHandler=()=>this.eventTarget.setAttribute("focus-target",""),this.unmarkAsFocusTargetHandler=()=>this.eventTarget.removeAttribute("focus-target"),this.delegateKeyDownEvent=s=>{if(this.catchedKeys.indexOf(s.key)!==-1){const a=s.key.toLocaleLowerCase();let o=0;const r=a.includes("enter");r||(o=a.includes("down")?1:-1),this.keydownHandler(s,o,r),s.preventDefault(),s.stopPropagation(),s.stopImmediatePropagation()}}}static delegateTo(e){return new l(e,t=>e.dispatchEvent(new KeyboardEvent(t.type,t)))}connect(e){if(e!=null){e.addEventListener("keydown",this.delegateKeyDownEvent),e.addEventListener("focus",this.markAsFocusTargetHandler),e.addEventListener("blur",this.unmarkAsFocusTargetHandler);const t=document.activeElement;(e.contains(t)||e.shadowRoot?.activeElement?.contains(t))&&this.markAsFocusTargetHandler()}}disconnect(e){e!=null&&(e.removeEventListener("keydown",this.delegateKeyDownEvent),e.removeEventListener("focus",this.markAsFocusTargetHandler),e.removeEventListener("blur",this.unmarkAsFocusTargetHandler),this.unmarkAsFocusTargetHandler())}}class v extends g{constructor(e){super(null),this.loadedCallback=e,this.data=Array.from(p()),this.searchTerm="",this.onDataRequest=t=>{this.currentRequestId=this.request(t,this.searchTerm),console.log(`Requesting page ${t} with search term '${this.searchTerm}': request #${this.currentRequestId}`)}}request(e,t){const s=window.setTimeout(()=>{s==this.currentRequestId&&(console.log(`Response for request #${s}`),this.currentRequestId=null);const a=[];let o=0,r=0;for(r=0;r<this.data.length;r++){const m=this.data[r];if((!t||m.caption.toUpperCase().indexOf(t.toUpperCase())>=0)&&o++>=e*this.pageSize&&a.push(...this.createListItems(this.data[r])),a.length==this.pageSize)break}r==this.data.length&&(this.finalSizeIsKnown=!0),this.addItems(a),this.loadedCallback(this.items.length>0)},1e3);return s}search(e){this.currentRequestId!=null&&(console.log(`Cancelling previous request #${this.currentRequestId}`),window.clearTimeout(this.currentRequestId),this.currentRequestId=null),this.searchTerm=e,this.items=[],this.finalSizeIsKnown=!1,this.scheduleForcedRequest()}scheduleForcedRequest(){window.requestAnimationFrame(()=>{this.currentRequestId==null&&this.items.length==0&&!this.finalSizeIsKnown&&this.onDataRequest(0)})}}function y(n){n?(i.style.display="block",d.style.display="none"):(i.style.display="none",d.style.display="block",w.innerText=u.value)}const c=document.querySelector("#search-example"),u=c.querySelector("#search-input"),i=c.querySelector("sd-virtual-list"),d=c.querySelector("#no-result"),w=c.querySelector("#search-term"),h=new v(n=>y(n));h.connectList(i);l.delegateTo(i).connect(u);u.addEventListener("input",n=>{h.search(n.target.value),i.scrollToItem(0,"start"),i.selectedIndices=[]});
+import"./doc.mjs";import{I as g,g as p}from"./item-provider.mjs";class l{constructor(e,t){this.eventTarget=e,this.keydownHandler=t,this.catchedKeys=["Down","ArrowDown","Up","ArrowUp","Enter"],this.markAsFocusTargetHandler=()=>this.eventTarget.setAttribute("focus-target",""),this.unmarkAsFocusTargetHandler=()=>this.eventTarget.removeAttribute("focus-target"),this.delegateKeyDownEvent=s=>{if(this.catchedKeys.indexOf(s.key)!==-1){const i=s.key.toLocaleLowerCase();let o=0;const n=i.includes("enter");n||(o=i.includes("down")?1:-1),this.keydownHandler(s,o,n),s.preventDefault(),s.stopPropagation(),s.stopImmediatePropagation()}}}static delegateTo(e){return new l(e,t=>e.dispatchEvent(new KeyboardEvent(t.type,t)))}connect(e){if(e!=null){e.addEventListener("keydown",this.delegateKeyDownEvent),e.addEventListener("focus",this.markAsFocusTargetHandler),e.addEventListener("blur",this.unmarkAsFocusTargetHandler);const t=document.activeElement;(e.contains(t)||e.shadowRoot?.activeElement?.contains(t))&&this.markAsFocusTargetHandler()}}disconnect(e){e!=null&&(e.removeEventListener("keydown",this.delegateKeyDownEvent),e.removeEventListener("focus",this.markAsFocusTargetHandler),e.removeEventListener("blur",this.unmarkAsFocusTargetHandler),this.unmarkAsFocusTargetHandler())}}class v extends g{constructor(e){super(null),this.loadedCallback=e,this.data=Array.from(p()),this.searchTerm="",this.onDataRequest=t=>{this.currentRequestId=this.request(t,this.searchTerm),console.log(`Requesting page ${t} with search term '${this.searchTerm}': request #${this.currentRequestId}`)}}request(e,t){const s=window.setTimeout(()=>{s==this.currentRequestId&&(console.log(`Response for request #${s}`),this.currentRequestId=null);const i=[];let o=0,n=0;for(n=0;n<this.data.length;n++){const m=this.data[n];if((!t||m.caption.toUpperCase().indexOf(t.toUpperCase())>=0)&&o++>=e*this.pageSize&&i.push(...this.createListItems(this.data[n])),i.length==this.pageSize)break}n==this.data.length&&(this.finalSizeIsKnown=!0),this.addItems(i),this.loadedCallback(this.items.length>0)},1e3);return s}search(e){this.currentRequestId!=null&&(console.log(`Cancelling previous request #${this.currentRequestId}`),window.clearTimeout(this.currentRequestId),this.currentRequestId=null),this.searchTerm=e,this.items=[],this.finalSizeIsKnown=!1,this.scheduleForcedRequest()}scheduleForcedRequest(){window.requestAnimationFrame(()=>{this.currentRequestId==null&&this.items.length==0&&!this.finalSizeIsKnown&&this.onDataRequest(0)})}}function y(r){r?(a.style.display="block",d.style.display="none"):(a.style.display="none",d.style.display="block",w.innerText=u.value)}const c=document.querySelector("#search-example"),u=c.querySelector("#search-input"),a=c.querySelector("sd-virtual-list"),d=c.querySelector("#no-result"),w=c.querySelector("#search-term"),h=new v(r=>y(r));h.connectList(a);l.delegateTo(a).connect(u);u.addEventListener("input",r=>{h.search(r.target.value),a.scrollToItem(0,"start"),a.selectedIndices=[]});