dselect.min.js 5.7 KB

1234567891011121314151617181920212223242526272829
  1. function dselectUpdate(e,t,a){const d=e.dataset.dselectValue,o=e.closest(`.${t}`).previousElementSibling,f=o.nextElementSibling.getElementsByClassName(a)[0],i=o.nextElementSibling.querySelector("input");o.multiple?Array.from(o.options).filter(m=>m.value===d)[0].selected=!0:o.value=d,o.multiple&&f.click(),o.dispatchEvent(new Event("change")),f.focus(),i&&(i.value="")}function dselectRemoveTag(e,t,a){const d=e.parentNode.dataset.dselectValue,o=e.closest(`.${t}`).previousElementSibling,f=o.nextElementSibling.getElementsByClassName(a)[0],i=o.nextElementSibling.querySelector("input");Array.from(o.options).filter(m=>m.value===d)[0].selected=!1,o.dispatchEvent(new Event("change")),f.click(),i&&(i.value="")}function dselectSearch(e,t,a,d,o){const f=t.value.toLowerCase().trim(),i=t.nextElementSibling,m=i.querySelectorAll(".dropdown-header"),x=i.querySelectorAll(".dropdown-item"),p=i.nextElementSibling;m.forEach(c=>c.classList.add("d-none"));for(const c of x)if(c.textContent.toLowerCase().indexOf(f)>-1){c.classList.remove("d-none");let g=c;for(;g=g.previousElementSibling;)if(g.classList.contains("dropdown-header")){g.classList.remove("d-none");break}}else c.classList.add("d-none");if(Array.from(x).filter(c=>!c.classList.contains("d-none")&&!c.hasAttribute("hidden")).length<1){if(p.classList.remove("d-none"),i.classList.add("d-none"),o&&(p.innerHTML=`Press Enter to add "<strong>${t.value}</strong>"`,e.key==="Enter")){const c=t.closest(`.${a}`).previousElementSibling,h=c.nextElementSibling.getElementsByClassName(d)[0];c.insertAdjacentHTML("afterbegin",`<option value="${t.value}" selected>${t.value}</option>`),c.dispatchEvent(new Event("change")),t.value="",t.dispatchEvent(new Event("keyup")),h.click(),h.focus()}}else p.classList.add("d-none"),i.classList.remove("d-none")}function dselectClear(e,t){const a=e.closest(`.${t}`).previousElementSibling;Array.from(a.options).forEach(d=>d.selected=!1),a.dispatchEvent(new Event("change"))}function dselect(e,t={}){e.style.display="none";const a="dselect-wrapper",d="dselect-no-results",o="dselect-tag",f="dselect-tag-remove",i="dselect-placeholder",m="dselect-clear",x="dselect-clearable",p=!1,S=!1,c=!1,h="360px",g="",A=w("search")||t.search||p,k=w("creatable")||t.creatable||S,y=w("clearable")||t.clearable||c,M=e.dataset.dselectMaxHeight||t.maxHeight||h;let E=e.dataset.dselectSize||t.size||g;E=E!==""?` form-select-${E}`:"";const b=`form-select${E}`,H=A?`<input onkeydown="return event.key !== 'Enter'" onkeyup="dselectSearch(event, this, '${a}', '${b}', ${k})" type="text" class="form-control" placeholder="Search" autofocus>`:"";function w(n){const l=`data-dselect-${n}`;return e.hasAttribute(l)?e.getAttribute(l).toLowerCase()==="true":null}function B(){e.nextElementSibling&&e.nextElementSibling.classList&&e.nextElementSibling.classList.contains(a)&&e.nextElementSibling.remove()}function $(n){return n.getAttribute("value")===""}function L(n,l){if(l){const s=Array.from(n).filter(r=>r.selected&&!$(r)),v=Array.from(n).filter(r=>$(r));let u=[];if(s.length===0){const r=v.length?v[0].textContent:"&nbsp;";u.push(`<span class="${i}">${r}</span>`)}else for(const r of s)u.push(`
  2. <div class="${o}" data-dselect-value="${r.value}">
  3. ${r.text}
  4. <svg onclick="dselectRemoveTag(this, '${a}', '${b}')" class="${f}" width="14" height="14" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"><path d="M0 0h24v24H0z" fill="none"/><path d="M12 2C6.47 2 2 6.47 2 12s4.47 10 10 10 10-4.47 10-10S17.53 2 12 2zm5 13.59L15.59 17 12 13.41 8.41 17 7 15.59 10.59 12 7 8.41 8.41 7 12 10.59 15.59 7 17 8.41 13.41 12 17 15.59z"/></svg>
  5. </div>
  6. `);return u.join("")}else{const s=n[n.selectedIndex];return $(s)?`<span class="${i}">${s.innerHTML}</span>`:s.innerHTML}}function C(n){const l=n[n.selectedIndex];return $(l)?"":l.textContent}function T(n){let l=[];for(const s of n)if(s.tagName==="OPTGROUP")l.push(`<h6 class="dropdown-header">${s.getAttribute("label")}</h6>`);else{const v=$(s)?" hidden":"",u=s.selected?" active":"",r=e.multiple&&s.selected?" disabled":"",O=s.value,q=s.textContent;l.push(`<button${v} class="dropdown-item${u}" data-dselect-value="${O}" type="button" onclick="dselectUpdate(this, '${a}', '${b}')"${r}>${q}</button>`)}return l=l.join(""),l}function z(){const n=e.multiple?' data-bs-auto-close="outside"':"",l=Array.from(e.classList).filter(u=>u!=="form-select"&&u!=="form-select-sm"&&u!=="form-select-lg").join(" "),s=y&&!e.multiple?`
  7. <button type="button" class="btn ${m}" title="Clear selection" onclick="dselectClear(this, '${a}')">
  8. <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 14 14" fill="none">
  9. <path d="M13 1L0.999999 13" stroke-width="2" stroke="currentColor"></path>
  10. <path d="M1 1L13 13" stroke-width="2" stroke="currentColor"></path>
  11. </svg>
  12. </button>
  13. `:"",v=`
  14. <div class="dropdown ${a} ${l}">
  15. <button class="${b} ${!e.multiple&&y?x:""}" data-dselect-text="${!e.multiple&&C(e.options)}" type="button" data-bs-toggle="dropdown" aria-expanded="false"${n}>
  16. ${L(e.options,e.multiple)}
  17. </button>
  18. <div class="dropdown-menu">
  19. <div class="d-flex flex-column">
  20. ${H}
  21. <div class="dselect-items" style="max-height:${M};overflow:auto">
  22. ${T(e.querySelectorAll("*"))}
  23. </div>
  24. <div class="${d} d-none">No results found</div>
  25. </div>
  26. </div>
  27. ${s}
  28. </div>
  29. `;B(),e.insertAdjacentHTML("afterend",v)}z();function N(){const n=e.nextElementSibling,l=n.getElementsByClassName(b)[0],s=n.getElementsByClassName("dselect-items")[0];l.innerHTML=L(e.options,e.multiple),s.innerHTML=T(e.querySelectorAll("*")),e.multiple||(l.dataset.dselectText=C(e.options))}e.addEventListener("change",N)}