toolshed-8.x-1.x-dev/js/widgets/Autocomplete.min.js

(({t:e,behaviors:t,debounce:a,Toolshed:l})=>{class n extends l.Element{constructor(t={},e){l.isString(t.class)&&(t.class=[t.class]),t.class=(t.class||[]).concat(["visually-hidden","sr-only"]),super("div",t,e||document.body);t={role:"status","aria-live":"polite","aria-atomic":"true"};this.active=1,this.msg="",this.regions=[new l.Element("div",t,this),new l.Element("div",t,this)],this.updateMsg=a(()=>{this.regions[this.active].textContent="",this.active^=1,this.regions[this.active].textContent=this.msg},500)}get message(){return this.msg}set message(t){this.msg=t,this.updateMsg()}}class o extends l.Element{constructor(t,e,s){super("a",{tabindex:0,href:"#"}),this.wrap=new l.Element("li",{id:e,role:"option",class:"autocomplete__opt"}),this.wrap.appendChild(this),this.parent=t,this.pos=-1,this.uri=null,this.on("click",t=>{this.uri||(t.preventDefault(),t.stopPropagation(),s.selectItem(this))},!0)}get id(){return this.wrap.id}set id(t){this.wrap.id=t}get url(){return this.uri}set url(t){t&&"#"!==t?(this.uri=t,this.el.href=t):(this.uri=null,this.el.href="#")}focus(){this.wrap.addClass("autocomplete__opt--active")}blur(){this.wrap.removeClass("autocomplete__opt--active")}destroy(t){this.parent=null,super.destroy(t),this.wrap.destroy(t)}}class h extends l.Element{constructor(t,e,s){super("ul",{class:"autocomplete__options"}),this.items=[],this.parent=t,this.ac=s,this.pos=0,this.wrap=new l.Element(e),this.wrap.appendChild(this)}get length(){let e=0;for(let t=0;t<this.items.length;++t)e+=this.items[t]instanceof h?this.items[t].length:1;return e}isEmpty(){return!this.items.length}setLabel(t,e){this.label||(this.label=new l.Element("span",{class:"autocomplete__group-label"}),this.wrap.prependChild(this.label)),e&&(this.label.setAttrs({id:e+"-label"}),this.setAttrs({ariaLabelledby:e+"-label"})),this.label.textContent=t&&t.length?t:""}addItem(t){this.items.push(t),this.appendChild(t.wrap)}getFirst(){return this.items.length?this.items[0]instanceof h?this.items[0].getFirst():this.items[0]:null}getLast(){var t;return this.items.length?(t=this.items.length-1,this.items[t]instanceof h?this.items[t].getLast():this.items[t]):null}buildItems(t,i){let a=0;t.forEach(t=>{let e;var s=i+"-"+a;if(Array.isArray(t.list)){if(!t.list.length)return;(e=new h(this,"li",this.ac)).setAttrs({role:"group"}),e.setLabel(t.text,s),e.buildItems(t.list,s)}else t.value&&((e=new o(this,s,this.ac)).text=t.text||t.value,e.value=t.value,t.url&&(e.url=t.url),this.ac.itemDisplay(e,t));this.addItem(e),e.pos=a++})}clear(){this.items.forEach(t=>t.destroy(!0)),this.items=[]}destroy(){this.label&&this.label.destroy(!0),this.clear(),super.destroy(!0),this.wrap.destroy(!0)}}l.Autocomplete=class{constructor(t,e={}){let s;this.input=t,this.pending=!1,this.config={delay:375,minLength:3,requireSelect:!0,...e};var t=this.input.id?document.querySelector(`label[for='${this.input.id}']`):null,e=new h(null,"div",this),i=(e.setAttrs({id:this.input.id+"-listbox",role:"listbox"}),e.on("blur",this.onBlur),this.list=e,t&&(t.id||(t.id=this.input.id+"-label"),e.setAttr("aria-labelledby",t.id)),new l.Element("div",{class:"autocomplete__options-pane",style:{display:"none"}}));if(i.on("mousedown",this.onMouseDown.bind(this)),i.appendChild(e.wrap),i.attachTo(this.input,"after"),this.suggestWrap=i,this.emptyMsg=new l.Element("div",{class:"autocomplete__empty-msg",style:{display:"none"}},i),this.liveRegion=new n,this.config.separateValue?((s=new l.FormElement(this.input.cloneNode(),{placeholder:this.input.placeholder,value:this.input.dataset.text||this.formatDisplayValue(this.input.value)||"","aria-autocomplete":"list"})).removeClass("toolshed-autocomplete"),s.removeAttrs(["name","data-autocomplete"]),this.input.style.display="none",s.attachTo(this.input,"after"),delete s.dataset.drupalSelector,delete s.dataset.autocompletePath,delete s.dataset.text,t&&(s.id=this.input.id+"-autocomplete",t.htmlFor=s.id)):(s=new l.FormElement(this.input)).setAttr("aria-autocomplete","both"),(this.ac=s).setAttrs({class:"form-autocomplete",autocomplete:"off",role:"combobox","aria-owns":e.id,"aria-haspopup":"listbox","aria-expanded":"false"}),s.on("keydown",this.onTextKeydown.bind(this)),s.on("input",this.onTextChange.bind(this)),s.on("focus",this.onFocus.bind(this)),s.on("blur",this.onBlur.bind(this)),0<this.config.delay&&(this.fetchSuggestions=a(this.fetchSuggestions,this.config.delay)),this.config.params&&this.input.form){let e=this.input.form;this.onParamChange=this.onParamChange.bind(this),Object.values(this.config.params).forEach(t=>{t=e.querySelector("#"+t);t&&t.addEventListener("change",this.onParamChange)})}}createSuggestions(t={}){this.activeItem=null,this.list.isEmpty()||this.list.clear(),t.list.length?("none"!==this.emptyMsg.style.display&&(this.emptyMsg.style.display="none"),this.list.buildItems(t.list,this.input.id+"-opt")):(this.emptyMsg.textContent=t.empty||"No results",this.emptyMsg.style.display="")}formatDisplayValue(t){return t?t.replace(/^[^:]*?\s*:\s*/,""):""}clearInput(){this.ac.value="",this.input.value="",this.clearSuggestions()}clearSuggestions(){this.ac.removeAttrs("aria-activedescendant"),this.activeItem=null,this.list.clear()}isSuggestionsVisible(){return"none"!==this.suggestWrap.style.display}displaySuggestions(){this.isSuggestionsVisible()||(this.suggestWrap.setStyles({display:"",width:this.ac.el.clientWidth+"px",top:this.ac.el.offsetTop+this.ac.el.offsetHeight+"px",left:this.ac.el.offsetLeft+"px"}),this.ac.setAttrs({"aria-expanded":"true"}));var t=this.list.length;this.liveRegion.message=0<t?e("@count results available, use up and down arrow keys to navigate.",{"@count":t}):e("No search results.")}hideSuggestions(){this.activeItem=null,this.suggestWrap.style.display="none",this.ac.setAttrs({"aria-expanded":"false"})}itemDisplay(t,e){e.html?(t.innerHTML=e.html,t.setAttrs({"aria-label":e.text||e.value})):t.textContent=t.text||t.value}setActiveItem(t){this.activeItem&&this.activeItem.blur(),t?(t.focus(),(this.activeItem=t).id&&this.ac.setAttrs({"aria-activedescendant":t.id})):(this.activeItem=null,this.ac.removeAttrs("aria-activedescendant"))}selectItem(t){t.url?window.location=t.url:(this.ac.el!==this.input&&(this.ac.value=t.text||t.value),this.input.value=t.value),this.hideSuggestions()}fetchSuggestions(t,e=!0){if(this.requester||(this.requester=l.createRequester(this.config.uri)),this.pending&&!this.pending.promise.isResolved&&this.pending.xhr.abort(),!t||t.length<this.config.minLength)this.isSuggestionsVisible()&&this.hideSuggestions();else{this.ac.addClass("ui-autocomplete-loading");let s={};this.config.params&&Object.entries(this.config.params).forEach(([t,e])=>{e=document.getElementById(e);e&&e.value&&(s[t]=e.value)}),s.q=t,this.pending=this.requester(s),this.pending.promise.then(t=>{this.clearLoading(this.ac),this.createSuggestions(t),e&&this.displaySuggestions()},t=>{t.message&&"Cancelled"===t.message||this.clearLoading(this.ac)})}}clearLoading(t){t.removeClass(["ui-autocomplete-loading","is-autocompleting"]);t=t.parentElement.querySelector(':scope > [data-drupal-selector="autocomplete-message"]');t&&t.classList.add("hidden")}onFocus(){this.list.isEmpty()||this.displaySuggestions()}onBlur(t){!this.isSuggestionsVisible()||t.relatedTarget&&(t.relatedTarget===this.ac.el||t.relatedTarget.closest("[role=listbox]")===this.list.el)||this.hideSuggestions()}onMouseDown(t){t.preventDefault()}onTextChange(t){this.ac.el!==this.input&&(this.input.value=this.config.requireSelect?"":this.ac.el.value),this.fetchSuggestions(t.target.value)}onParamChange(){this.clearInput()}onTextKeydown(e){if(this.isSuggestionsVisible()){let s,t;switch(e.keyCode){case 13:if(this.activeItem)return e.preventDefault(),void this.selectItem(this.activeItem);case 9:case 27:return void this.hideSuggestions();case 40:t=h.prototype.getFirst,s=1;break;case 38:t=h.prototype.getLast,s=-1;break;default:return}e.preventDefault();let i=this.activeItem;if(i){let t=i.parent,e=i.pos+s;for(;t&&(e<0||t.items.length===e);)i=t,e=i.pos+s,t=i.parent;t&&(i=t.items[e])}(i=i||this.list)instanceof h&&(i=t.call(i)),this.setActiveItem(i)}}destroy(){var t;this.pending&&!this.pending.promise.isResolved&&this.pending.xhr.abort(),delete this.pending,this.config.params&&Object.values(this.config.params).forEach(t=>{t=document.getElementById(t);t&&t.removeEventListener("change",this.onParamChange)}),this.ac.el!==this.input&&(this.ac.id&&this.input.id&&(t=document.querySelector(`label[for='${this.ac.id}']`))&&(t.htmlFor=this.input.id),this.ac.destroy(!0)),this.list.destroy(!0),this.emptyMsg.destroy(!0),this.suggestWrap.destroy(!0),this.liveRegion.destroy(!0),this.input.style.display=""}},t.toolshedAutocomplete={instances:new Map,attach(t){l.walkByClass(t,"toolshed-autocomplete",t=>{var e=t.dataset.autocomplete?JSON.parse(t.dataset.autocomplete):{};t.dataset.params&&(e.params=JSON.parse(t.dataset.params)),e.uri&&(e=new l.Autocomplete(t,e),this.instances.set(t.id||t,e))},"autocomplete--processed")},detach(t,e,s){"unload"===s&&l.walkBySelector(t,".toolshed-autocomplete.autocomplete--processed",t=>{var e=this.instances.get(t.id||t);e&&(t.classList.remove("autocomplete--processed"),this.instances.delete(t),e.destroy())})}}})(Drupal);