qdrant-page-search/dist/js/search.min.js

Add markup for the search modal popup:

(()=>{"use strict";function t(t,e,s){(function(t,e){if(e.has(t))throw new TypeError("Cannot initialize the same private elements twice on an object")})(t,e),e.set(t,s)}function e(t,e){return function(t,e){return e.get?e.get.call(t):e.value}(t,i(e,t))}function s(t,e,s){return function(t,e,s){if(e.set)e.set.call(t,s);else{if(!e.writable)throw new TypeError("attempted to set read only private field");e.value=s}}(t,i(e,t),s),s}function i(t,e){return t.get(function(t,e,s){if("function"==typeof t?t===e:t.has(e))return arguments.length<3?e:s;throw new TypeError("Private element is not present on this object")}(t,e))}var a=new WeakMap,n=new WeakMap;class r{constructor(e){let{modalOuterSelector:i,modalDialogSelector:r,closeBtnSelector:o,resultSelector:l}=e;t(this,a,{writable:!0,value:void 0}),t(this,n,{writable:!0,value:void 0}),this.modal=document.querySelector(i),this.dialog=document.querySelector(r),this.openBtns=document.querySelectorAll('[data-target="#searchModal"]'),this.closeBtn=this.modal.querySelector(o),this.result=this.modal.querySelector(l),s(this,a,new Event("qdrModalShow")),s(this,n,new Event("qdrModalHide"));const c=this.show.bind(this),d=this.hide.bind(this);this.openBtns.forEach((t=>t.addEventListener("click",c))),this.modal.addEventListener("click",(t=>{const e=this.dialog.contains(t.target)||t.target===this.dialog,s=this.closeBtn.contains(t.target)||t.target===this.closeBtn;e&&!s||d(t)})),document.addEventListener("keydown",(t=>{"Escape"===t.key&&d(t)}))}show(){this.modal.style.display="block",this.modal.classList.add("active"),document.dispatchEvent(e(this,a))}hide(){const t=this.modal,s=e(this,n);t.classList.remove("active");const i=setTimeout((function(){t.style.display="none",document.dispatchEvent(s),clearTimeout(i)}),300)}updateResultChildren(t,e){this.result.replaceChildren(...t),e&&"function"==typeof e&&e()}}function o(t,e,s){(function(t,e){if(e.has(t))throw new TypeError("Cannot initialize the same private elements twice on an object")})(t,e),e.set(t,s)}function l(t,e){return function(t,e){return e.get?e.get.call(t):e.value}(t,d(e,t))}function c(t,e,s){return function(t,e,s){if(e.set)e.set.call(t,s);else{if(!e.writable)throw new TypeError("attempted to set read only private field");e.value=s}}(t,d(e,t),s),s}function d(t,e){return t.get(function(t,e,s){if("function"==typeof t?t===e:t.has(e))return arguments.length<3?e:s;throw new TypeError("Private element is not present on this object")}(t,e))}var h=new WeakMap,u=new WeakMap,p=new WeakMap;class v{constructor(t){let{apiUrl:e,section:s,partition:i}=t;o(this,h,{writable:!0,value:void 0}),o(this,u,{writable:!0,value:void 0}),o(this,p,{writable:!0,value:void 0}),this._input=document.querySelector("#searchInput"),this.apiUrl=e,this.section=s,this.partition=i,this._data=[],this._error=void 0,c(this,h,new Event("searchDataIsReady")),c(this,u,0),c(this,p,0),this._input.addEventListener("input",(t=>{0===t.target.value.trim().length?(this._data=[],document.dispatchEvent(l(this,h))):this.fetchData(t.target.value)}))}get input(){return this._input}set input(t){this._input=t}get data(){return this._data}set data(t){this._data=t}get error(){return this._error}set error(t){this._error=t}fetchData(t){if(0===this.input.value.trim().length)return;const e=new URL(this.apiUrl,document.location);e.searchParams.append("q",this.input.value),this.section&&e.searchParams.append("section",this.section),this.partition&&e.searchParams.append("partition",this.partition);let s=l(this,p)+1;c(this,p,l(this,p)+1);const i=setTimeout((()=>{clearTimeout(i),l(this,p)<=s&&fetch(e).then((t=>t.ok?t.json():{result:[],error:t.statusText})).then((t=>{s>l(this,u)&&(c(this,u,s),this.data=t.result,this.error=null==t?void 0:t.error,document.dispatchEvent(l(this,h)))})).catch((t=>{this.error=t.message}))}),100)}}class m{constructor(t){let{searchApiUrl:e,section:s,partition:i}=t;this.apiUrl=e,this.section=s,this.partition=i,this.modal=new r({modalOuterSelector:"#searchModal",modalDialogSelector:".qdr-search__dialog",closeBtnSelector:".qdr-search__close",resultSelector:".qdr-search__results"}),this.searchInput=new v({apiUrl:this.apiUrl,section:this.section,partition:this.partition}),this.activeResultIdx=null;let a=!1;const n=this.setFocusToInput.bind(this);document.addEventListener("qdrModalShow",(()=>{n(),a=!0})),document.addEventListener("qdrModalHide",(()=>{a=!1})),document.addEventListener("searchDataIsReady",this.updateResult.bind(this));const o=this.navigateTroughResults.bind(this);document.addEventListener("keydown",(t=>{a&&("ArrowUp"!==t.key&&"ArrowDown"!==t.key||(t.preventDefault(),o(t)),"Enter"===t.key&&(t.preventDefault(),function(t){if(!t)return;const e=new MouseEvent("click",{bubbles:!0,cancelable:!0});t.dispatchEvent(e)}(this.modal.result.querySelector('.qdr-search-result[data-key="'.concat(this.activeResultIdx,'"]')))))}))}set activeResultIdx(t){this._activeResultIdx=t}get activeResultIdx(){return this._activeResultIdx}generateSearchResult(t){var e;const s=document.createElement("a");s.classList.add("qdr-search-result"),s.href=function(t){var e,s;let i=arguments.length>1&&void 0!==arguments[1]?arguments[1]:null;const a=new URL(null==t||null===(e=t.payload)||void 0===e?void 0:e.url,window.location.origin);return a.searchParams.append("selector",window.btoa(null==t||null===(s=t.payload)||void 0===s?void 0:s.location)),i&&a.searchParams.append("q",i),a.toString()}(t,null===(e=this.searchInput.input)||void 0===e?void 0:e.value);const i="p"===t.payload.tag?"qdr-search-result__icon":"qdr-search-result__paragraph-icon";return s.innerHTML='<span class="'.concat(i,'"></span>\n                   <div class="qdr-search-result__body"><h5 class="mt-0">').concat((null==t?void 0:t.highlight)||t.payload.text,"</h5>\n                   <p>").concat(t.payload.titles.join(" > "),"</p></div>"),s}updateResult(){const t=[];this.activeResultIdx=null,this.searchInput.data.forEach(((e,s)=>{const i=this.generateSearchResult(e);i.dataset.key=s,t.push(i),i.addEventListener("mouseover",(t=>{this.activeResultIdx=parseInt(i.dataset.key),this.addActiveClassToResult(this.activeResultIdx)}))})),this.modal.updateResultChildren(t,(()=>{this.activeResultIdx=0,this.addActiveClassToResult(this.activeResultIdx)}))}setFocusToInput(){this.searchInput.input.focus()}addActiveClassToResult(t){const e=this.modal.result.querySelectorAll(".qdr-search-result");0!==e.length&&([...e].forEach((t=>{t.classList.contains("active")&&t.classList.remove("active")})),[...e].find((e=>parseInt(e.dataset.key)===parseInt(t))).classList.add("active"))}navigateTroughResults(t){let e;"ArrowUp"===t.key&&(e=this.activeResultIdx-1,this.activeResultIdx=e>=0?e:this.searchInput.data.length-1),"ArrowDown"===t.key&&(e=null===this.activeResultIdx?0:this.activeResultIdx+1,e<this.searchInput.data.length?this.activeResultIdx=e:this.activeResultIdx=0),this.addActiveClassToResult(this.activeResultIdx)}}window.initQdrantSearch=function(t){let{searchApiUrl:e,section:s,partition:i}=t;return document.body.appendChild(function(){const t=document.createElement("div");return t.innerHTML='<div class="qdr-search" id="searchModal" tabindex="-1"\n    aria-labelledby="searchModalLabel" aria-hidden="true">\n    <div class="qdr-search__dialog">\n        <div class="qdr-search__content">\n            <div class="qdr-search__header">\n                <div class="qdr-search__title">\n                    <div class="qdr-search__icon">\n                        <span class="search-icon"></span>\n                    </div>\n                    <input type="text" class="qdr-search__input" autocomplete="off" placeholder="Search..."\n                          id="searchInput" aria-label="Search">\n                </div>\n\n                <button type="button" class="qdr-search__close" aria-label="Close">\n                    <span aria-hidden="true">&times;</span>\n                </button>\n            </div>\n\n            <div class="qdr-search__results"></div>\n\n            <div class="qdr-search__footer"> \n                <a href="https://qdrant.tech/" target="_blank" rel="nofollow">\n                    Powered by\n                    <span class="qdr-search__logo"></span>\n                </a>\n            </div>\n        </div>\n    </div>\n  </div>'.trim(),t.firstElementChild}()),new m({searchApiUrl:e,section:s,partition:i})}})();