1export default class ImageGalleryModal{constructor({galleryUrl:e,onSelect:t}){this.galleryUrl=e,this.onSelect=t,this.pagination={currentPage:1,totalPages:1,limit:12,query:"",folder:null},this.cache=new Map,this.requestId=0,this.activeAbortController=null,this.dialog=this.#n(),document.body.appendChild(this.dialog)}show(){this.#e(),this.dialog.showModal()}close(){this.dialog.close()}#n(){const n=document.createElement("div");n.setAttribute("data-controller","modal"),n.setAttribute("data-action","turbo:before-cache@window->modal#close");const e=document.createElement("dialog");e.setAttribute("data-modal-target","dialog"),e.setAttribute("data-action","close->modal#close click->modal#clickOutside"),e.id="xutim-dialog",e.className="shadow-lg dialog-md d-block",e.style.border="none",e.style.background="transparent";const s=document.createElement("div");s.className="modal-dialog modal-dialog-centered";const o=document.createElement("div");o.className="modal-content h-100 d-flex flex-column shadow bg-white";const i=document.createElement("div");i.className="modal-header";const a=document.createElement("h3");a.className="modal-title m-0 fs-4",a.textContent="Select Image from Gallery",i.appendChild(a),this.breadcrumb=document.createElement("div"),this.breadcrumb.className="px-3 py-2 border-top bg-light small",this.breadcrumb.textContent="Loading folders...";const r=document.createElement("div");r.className="p-3 border-top";const t=document.createElement("input");return t.type="text",t.placeholder="Search images...",t.className="form-control",t.setAttribute("aria-label","Search images"),this.searchInput=t,t.addEventListener("input",this.#o(e=>{const t=e.target.value;if(t===this.pagination.query)return;this.pagination.query=t,this.pagination.currentPage=1,this.cache=new Map,this.#e()},350)),r.appendChild(t),this.gallery=document.createElement("div"),this.gallery.id="media-gallery-container",this.gallery.className="p-3 overflow-auto d-grid",this.gallery.style.gridTemplateColumns="repeat(4, 1fr)",this.gallery.style.gap="1rem",this.folderBar=document.createElement("div"),this.folderBar.className="py-3 px-2 d-flex gap-2",this.folderBar.style.overflowX="auto",this.paginationControls=document.createElement("div"),this.paginationControls.id="pagination-controls",this.paginationControls.className="d-flex justify-content-between align-items-center p-3 border-top",this.prevButton=document.createElement("button"),this.prevButton.textContent="â",this.prevButton.className="btn btn-outline-primary",this.prevButton.disabled=!0,this.prevButton.addEventListener("click",()=>{this.pagination.currentPage>1&&(this.pagination.currentPage--,this.#e())}),this.nextButton=document.createElement("button"),this.nextButton.textContent="â",this.nextButton.className="btn btn-primary",this.nextButton.disabled=!0,this.nextButton.addEventListener("click",()=>{this.pagination.currentPage<this.pagination.totalPages&&(this.pagination.currentPage++,this.#e())}),this.paginationControls.append(this.prevButton,this.nextButton),o.append(i,this.breadcrumb,this.folderBar,r,this.gallery,this.paginationControls),s.appendChild(o),e.appendChild(s),n.appendChild(e),e.addEventListener("click",t=>{t.target===e&&this.close()}),e}#t(e){this.pagination.folder=e,this.pagination.currentPage=1,this.pagination.query="",this.searchInput&&(this.searchInput.value=""),this.cache=new Map,this.#e()}#s(e){const t=document.createElement("img");t.src=e.filteredUrl,t.dataset.id=e.id,t.dataset.url=e.fullSourceUrl,t.dataset.thumbnailUrl=e.filteredUrl,t.style.width="100%",t.style.height="100px",t.style.objectFit="cover",t.style.cursor="pointer",t.className="rounded",t.addEventListener("click",()=>{this.onSelect(e),this.close()}),this.gallery.appendChild(t)}#e(){const e=this.pagination.currentPage,n=++this.requestId;this.activeAbortController&&this.activeAbortController.abort();const t=new AbortController;this.activeAbortController=t;const i=t=>{this.gallery.style.gridTemplateColumns="repeat(4, 1fr)",this.gallery.innerHTML="",this.folderBar.innerHTML="";const n=t.folderPath||[],s=n.length>=2?n[n.length-2].id:null;if(this.pagination.folder!==null){const e=document.createElement("button");e.type="button",e.className="btn btn-outline d-inline-flex align-items-center p-0 ps-2",e.style.flex="0 0 auto",e.innerHTML=`<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="me-2"><path d="M9 14l-4 -4l4 -4"/><path d="M5 10h11a4 4 0 1 1 0 8h-1"/></svg>`,e.addEventListener("click",()=>this.#t(s)),this.folderBar.appendChild(e)}
1if((t.folders??[]).forEach(e=>{const t=document.createElement("button");t.type="button",t.className="btn btn-outline d-inline-flex align-items-center",t.style.flex="0 0 auto",t.innerHTML=` 2 <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon icon-tabler icons-tabler-outline icon-tabler-folder"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M5 4h4l3 3h7a2 2 0 0 1 2 2v8a2 2 0 0 1 -2 2h-14a2 2 0 0 1 -2 -2v-11a2 2 0 0 1 2 -2" /></svg> 3 <span class="text-truncate" style="max-width:12rem">${e.name}</span> 4 `,t.addEventListener("click",()=>this.#t(e.id)),this.folderBar.appendChild(t)}),t.items.length===0){this.gallery.style.gridTemplateColumns="1fr";const e=document.createElement("div");e.className="text-muted text-center py-4",e.textContent=this.pagination.query?"No images match your search.":"No images in this folder.",this.gallery.appendChild(e)}else t.items.forEach(e=>this.#s(e));this.pagination.totalPages=t.totalPages||1,this.prevButton.disabled=e<=1,this.nextButton.disabled=e>=this.pagination.totalPages,this.#i(t.folderPath||[])},a=e=>{const t=new URL(this.galleryUrl,window.location.origin);return this.pagination.query&&t.searchParams.set("searchTerm",this.pagination.query),this.pagination.folder&&t.searchParams.set("folderId",this.pagination.folder),t.searchParams.set("page",e),t.searchParams.set("pageLength",this.pagination.limit),t.toString()},s=(e,t)=>this.cache.has(e)?Promise.resolve(this.cache.get(e)):fetch(a(e),{signal:t}).then(e=>e.json()).then(t=>{if(!Array.isArray(t.items))throw new Error("Invalid data");return this.cache.set(e,t),t}),o=setTimeout(()=>{if(this.requestId===n){this.gallery.innerHTML="",this.gallery.style.gridTemplateColumns="1fr";const e=document.createElement("div");e.className="text-muted text-center py-4",e.textContent="Loading...",this.gallery.appendChild(e)}},200);s(e,t.signal).then(a=>{if(clearTimeout(o),this.requestId!==n)return;i(a),e>1&&s(e-1,t.signal).catch(()=>{}),e<this.pagination.totalPages&&s(e+1,t.signal).catch(()=>{})}).catch(e=>{if(clearTimeout(o),e&&e.name==="AbortError")return;if(this.requestId!==n)return;this.gallery.textContent="Error loading gallery images."})}#o(e,t){let n;return(...s)=>{clearTimeout(n),n=setTimeout(()=>e(...s),t)}}#i(e){this.breadcrumb.innerHTML="";const t=document.createElement("a");t.href="#",t.textContent="Media",t.addEventListener("click",e=>{e.preventDefault(),this.#t(null)}),this.breadcrumb.appendChild(t),e.forEach((t,n)=>{if(this.breadcrumb.append(" / "),n===e.length-1)this.breadcrumb.append(t.name);else{const e=document.createElement("a");e.href="#",e.textContent=t.name,e.addEventListener("click",e=>{e.preventDefault(),this.#t(t.id)}),this.breadcrumb.appendChild(e)}})}}
Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.