nostr-web-components/lib/nostr-user-search.js

collection of web components that provide quick access to basic nostr things

var g=Object.defineProperty;var v=(n,l,t)=>l in n?g(n,l,{enumerable:!0,configurable:!0,writable:!0,value:t}):n[l]=t;var o=(n,l,t)=>v(n,typeof l!="symbol"?l+"":l,t);import{normalizeURL as m}from"@nostr/tools/utils";import{decode as f}from"@nostr/tools/nip19";import{loadNostrUser as w,nostrUserFromEvent as y}from"@nostr/gadgets/metadata";import{s as C,d as E,h as A,t as k}from"./utils.js";import{p as P}from"./nostr.js";import"@nostr/tools/pool";import"@nostr/gadgets/lists";import"@nostr/gadgets/global";import"@nostr/tools/nip05";class b extends HTMLElement{constructor(){super();o(this,"root");o(this,"limit",10);o(this,"value");o(this,"relays",["wss://antiprimal.net"].map(m));o(this,"search",E(async t=>{for(let e of this.queryPart("results")){if(t.length<2){e.style.display="none";return}for(let i=0;i<e.children.length;i++)e.children[i].tagName!=="TEMPLATE"&&e.removeChild(e.children[i]);e.style.display="block"}let r=null;try{if(t.startsWith("npub1")||t.startsWith("nprofile1")?r=f(t).data:/^[0-9a-fA-F]{64}$/.test(t)&&(r=t.toLowerCase()),r){this.value=r,this.dispatchEvent(new CustomEvent("selected",{bubbles:!0,detail:w({pubkey:r,relays:this.relays})}));return}}catch{}P.subscribeManyEose(this.relays,{search:t,limit:this.limit,kinds:[0]},{onevent:e=>{let i=y(e);for(let s of this.queryPart("results")){const a=s.querySelector("template");if(!a)continue;const p=a.content.cloneNode(!0),h=p.querySelector('[part="item"]');if(h){h.title=i.npub,h.onclick=this.handleItemClicked.bind(this),h.dataset.event=JSON.stringify(e);const u=p.querySelector('[part="picture"]');u&&(u.onerror=A,u.src=i.image||k);const d=p.querySelector('[part="name"]');d&&(d.textContent=i.shortName);const c=p.querySelector('[part="nip05"]');c&&i.metadata.nip05&&(c.textContent=i.metadata.nip05),s.appendChild(p)}}}})},450));this.attachShadow({mode:"open"});const{shadowRoot:t}=this;this.root=document.createElement("div"),t.appendChild(this.root)}connectedCallback(){this.style.display="inline-block",this.style.width="fit-content",this.style.height="fit-content",setTimeout(()=>{let t=this.getAttribute("template")?document.getElementById(this.getAttribute("template")):null;t?this.root.appendChild(t.content.cloneNode(!0)):this.root.innerHTML=`
        <style>
          .wrapper {
            position: relative;
          }
          ul {
            margin: 0;
            margin-top: -1px;
            padding: 0;
            background-color: white;
            position: absolute;
            left: 0;
            border-bottom: 0;
            display: none;
          }
          ul > li {
            display: flex;
            align-items: center;
            cursor: pointer;
          }
          ul > li:hover {
            background-color: rgba(0, 0, 0, 0.05);
          }
          ul > li > img {
            height: 2rem;
            width: 2rem;
          }
          ul > li > span {
            margin: 0 0.5rem;
            max-width: 120px;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
          }
        </style>

        <div class="wrapper" part="wrapper">
          <input type="search" part="input" />
          <ul part="results">
            <template>
              <li part="item">
                <img part="picture" />
                <span part="name"></span>
                <span part="nip05"></span>
              </li>
            </template>
          </ul>
        </div>
        `;for(let r of this.queryPart("input"))r.oninput=e=>this.search(e.target.value.trim()),this.hasAttribute("placeholder")&&r.setAttribute("placeholder",this.getAttribute("placeholder")),this.hasAttribute("value")&&(r.value=this.getAttribute("value"),this.search(r.value.trim()))},1)}attributeChangedCallback(t,r,e){if(t==="relays")this.relays=C(e).map(m);else if(t==="limit")this.limit=parseInt(e)||10;else if(t==="placeholder")for(let i of this.queryPart("input"))i.setAttribute("placeholder",e);else if(t==="value"){for(let i of this.queryPart("input"))i.value=e;this.search(e.trim())}}handleItemClicked(t){let r=t.currentTarget,e=r.title,i=f(e).data;for(let s of this.queryPart("results")){for(let a=0;a<s.children.length;a++)s.children[a].tagName!=="TEMPLATE"&&s.removeChild(s.children[a]);s.style.display="none"}this.value=i,this.dispatchEvent(new CustomEvent("selected",{bubbles:!0,detail:y(JSON.parse(r.dataset.event))}))}*queryPart(t){let r=this.querySelectorAll(`[part="${t}"]`);for(let i=0;i<r.length;i++)yield r[i];let e=this.root.querySelectorAll(`[part="${t}"]`);for(let i=0;i<e.length;i++)yield e[i]}}o(b,"observedAttributes",["relays","limit","placeholder","value"]);window.customElements.define("nostr-user-search",b);
//# sourceMappingURL=nostr-user-search.js.map