Current section

Files

Jump to
live_select priv static live_select.min.js
Raw

priv/static/live_select.min.js

function h(e,t){let s;return(...i)=>{clearTimeout(s),s=setTimeout(()=>{e.apply(this,i)},t)}}export default{LiveSelect:{textInput(){return this.el.querySelector("input[type=text]")},debounceMsec(){return parseInt(this.el.dataset.debounce)},updateMinLen(){return parseInt(this.el.dataset.updateMinLen)},maybeStyleClearButton(){const e=this.el.querySelector("button[phx-click=clear]");e&&(this.textInput().style.position="relative",e.style.position="absolute",e.style.top="0px",e.style.bottom="0px",e.style.right="5px",e.style.display="block")},pushEventToParent(e,t){const s=this.el.dataset.phxTarget;s?this.pushEventTo(s,e,t):this.pushEvent(e,t)},attachDomEventHandlers(){this.textInput().onkeydown=t=>{t.code==="Enter"&&t.preventDefault(),this.pushEventTo(this.el,"keydown",{key:t.code})},this.changeEvents=h((t,s,i)=>{this.pushEventTo(this.el,"change",{text:i}),this.pushEventToParent("live_select_change",{id:this.el.id,field:s,text:i})},this.debounceMsec()),this.textInput().oninput=t=>{const s=t.target.value.trim(),i=this.el.dataset.field;s.length>=this.updateMinLen()?this.changeEvents(this.el.id,i,s):this.pushEventTo(this.el,"options_clear",{})};const e=this.el.querySelector("ul");e&&(e.onmousedown=t=>{const s=t.target.closest("div[data-idx]");s&&(this.pushEventTo(this.el,"option_click",{idx:s.dataset.idx}),t.preventDefault())}),this.el.querySelectorAll("button[data-idx]").forEach(t=>{t.onmousedown=s=>{this.pushEventTo(this.el,"option_remove",{idx:t.dataset.idx})}})},setInputValue(e){this.textInput().value=e},inputEvent(e,t){const s=t==="single"?"input[class=single-mode]":e.length===0?"input[data-live-select-empty]":"input[type=hidden]";this.el.querySelector(s).dispatchEvent(new Event("input",{bubbles:!0}))},mounted(){this.maybeStyleClearButton(),this.handleEvent("parent_event",({id:e,event:t,payload:s})=>{this.el.id===e&&this.pushEventToParent(t,s)}),this.handleEvent("select",({id:e,selection:t,mode:s,input_event:i,parent_event:n})=>{if(this.el.id===e){if(s==="single"){const l=t.length>0?t[0].label:null;this.setInputValue(l)}else this.setInputValue(null);i&&this.inputEvent(t,s),n&&this.pushEventToParent(n,{id:e})}}),this.attachDomEventHandlers()},updated(){this.maybeStyleClearButton(),this.attachDomEventHandlers()}}};