staticsearch/dist/js/staticsearch-component.js

Simple static site search system.

import{staticSearchQuery as h,staticSearchSetQuery as l,staticSearchInput as o,staticSearchResult as n}from"./__SSDIR__/staticsearch-bind.js";var i=class r extends HTMLElement{static path=new URL(import.meta.url).pathname.replace("__FILENAME__","");#t=null;#e=null;#a=null;connectedCallback(){let t=this.firstElementChild;if(this.attachShadow({mode:"open"}),!t)return;t.setAttribute("part","startsearch");let s=document.createElement("link");s.rel="stylesheet",s.href=`${r.path}css/component.css`,this.shadowRoot.appendChild(s);let a=this.shadowRoot.appendChild(t);this.#r(),a.style.cursor="pointer",a.addEventListener("click",e=>{e.preventDefault(),this.#s()}),window.addEventListener("keydown",e=>{e.key==="k"&&(e.ctrlKey||e.metaKey)&&(e.preventDefault(),this.#s())}),h()&&this.#s()}#s(){this.#t.open?this.#i():(this.#t.showModal(),this.setAttribute("aria-expanded","true"),this.#e.focus())}#i(){this.#t.close(),this.removeAttribute("aria-expanded"),l()}#r(){let t=document.createElement("dialog");t.setAttribute("closedby","any"),t.setAttribute("part","dialog"),t.innerHTML=`<form method="dialog"><button part="close"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path xmlns="http://www.w3.org/2000/svg" fill="currentColor" d="M5.3 5.3a1 1 0 0 1 1.4 0l5.3 5.3 5.3-5.3a1 1 0 1 1 1.4 1.4L13.4 12l5.3 5.3a1 1 0 0 1-1.4 1.4L12 13.4l-5.3 5.3a1 1 0 0 1-1.4-1.4l5.3-5.3-5.3-5.3a1 1 0 0 1 0-1.4Z"/></svg></button></form><search part="search"><label for="search" part="searchlabel">${this.getAttribute("label")||"search"}</label><input type="search" id="search" name="q" minlength="2" maxlength="300" part="searchinput" /></search><div part="results"></div>`,this.#t=this.shadowRoot.appendChild(t),this.#e=this.shadowRoot.querySelector("#search"),this.#a=this.shadowRoot.querySelector('[part="results"]'),n(this.#a,{minFound:this.getAttribute("minfound"),minScore:this.getAttribute("minscore"),maxResults:this.getAttribute("maxresults")}),o(this.#e),this.#t.addEventListener("close",()=>this.#i()),this.#t.addEventListener("click",s=>{this.#t.open&&s.target===this.#t&&this.#i()})}};customElements.define("static-search",i);