LJ/www/selector.min.js

function Selector(a){this.elements={};this.currentElement={};this.currentInstance={};this.config={selector:"select.selector-instance"};this.parameters=a;this.applyParameters();this.core()}Selector.prototype.applyParameters=function(){let allowedParameters=["selector"];for(let i in this.parameters){if(allowedParameters.indexOf(i)===-1){continue}this.config[i]=this.parameters[i]}};Selector.prototype.core=function(){this.getElements();for(let i=0;i<this.elements.length;++i){this.createInstance(this.elements[i],i)}};Selector.prototype.getElements=function(){this.elements=document.querySelectorAll(this.config.selector)};Selector.prototype.createInstance=function(b,a){this.currentElement=b;this.renderInstance();this.createEvents()};Selector.prototype.renderInstance=function(){let parent=this.renderParent();let options=this.renderOptions();let selectedElement=options.querySelector("div.option-selected");let selected=this.renderSelected(selectedElement);parent.appendChild(selected);parent.appendChild(options);this.currentInstance=parent;this.currentElement.style.display="none";this.currentElement.parentNode.insertBefore(parent,this.currentElement.nextSibling)};Selector.prototype.renderParent=function(){let parent=document.createElement("div");parent.className="selector-element";if(this.currentElement.getAttribute("data-type")){parent.dataset.type=this.currentElement.getAttribute("data-type")}parent.dataset.reference=this.currentElement.name;return parent};Selector.prototype.renderSelected=function(a){let selected=document.createElement("div");selected.className="selector-selected";let selectedText=document.createElement("p");selectedText.className="selected-text";selectedText.innerText=a.innerText;for(let i in a.dataset){selected.dataset[i]=a.dataset[i]}selected.appendChild(selectedText);return selected};Selector.prototype.renderOptions=function(){let options=document.createElement("div");options.className="selector-options";if(this.currentElement.getAttribute("data-type")=="search-selector"){options.appendChild(this.renderSearchOption());options.classList.add("options-search")}for(let i=0;i<this.currentElement.childElementCount;++i){let option=document.createElement("div");option.className="selector-option";let optionText=document.createElement("span");optionText.className="option-text";optionText.innerText=this.currentElement[i].innerText;for(let j=0;j<this.currentElement[i].attributes.length;++j){let attribute=this.currentElement[i].attributes[j];if(attribute.name=="value"){attribute.name="data-value"}if(attribute.name=="selected"||attribute.name=="disabled"){attribute.value="true";option.className+=" option-"+attribute.name;continue}option.setAttribute(attribute.name,attribute.value)}option.setAttribute("data-item",i);option.appendChild(optionText);options.appendChild(option)}return options};Selector.prototype.renderSearchOption=function(){let searchBox=document.createElement("div");searchBox.classList.add("option-search");let psuedo=document.createElement("span");let input=document.createElement("input");input.setAttribute("type","search");input.classList.add("search-input");input.setAttribute("placeholder","Find option");input.setAttribute("data-placeholder","SELECTOR_SEARCH");searchBox.appendChild(psuedo);searchBox.appendChild(input);let eventList=["onfocus","onblur","keyup","click"];for(let event in eventList){event=eventList[event];searchBox.addEventListener(event,function(){let options=this.parentNode.querySelectorAll("div.selector-option");let inputContent=this.querySelector("input").value.toLowerCase().trim();for(let i=0;i<options.length;++i){let option=options[i];option.classList.remove("hide");let value=option.innerText.toLowerCase().trim();if(!value.includes(inputContent)){option.classList.add("hide")}}})}searchBox.querySelector("span").onclick=function(){input.value="";input.click();input.focus()};return searchBox};Selector.prototype.createEvents=function(){let currentInstance=this.currentInstance;let instanceSelected=this.currentInstance.querySelector("div.selector-selected");let instanceOptions=this.currentInstance.querySelector("div.selector-options");let isSearch=(currentInstance.getAttribute("data-type")=="search-selector");instanceSelected.onclick=function(){currentInstance.classList.toggle("open");if(isSearch){let input=instanceOptions.querySelector("input");input.value="";input.click();input.focus()}};instanceOptions.onclick=function(a){this.changeSelectedOption(a)}.bind(this);if(isSearch){let instanceInput=instanceOptions.querySelector("div.option-search input");instanceInput.onfocus=function(){this.onkeyup=function(a){if(a.keyCode!==13){return false}let options=instanceInput.parentNode.parentNode.querySelectorAll("div.selector-option");let counter=0;let option;for(let i=0;i<options.length;++i){if(options[i].classList.contains("hide")){continue}option=options[i];++counter}if(counter==1){option.click()}}.bind(instanceInput)}}};Selector.prototype.changeSelectedOption=function(a){let target=a.target;if(!target.firstElementChild){target=target.parentNode}if(target.classList.contains("option-search")){return}let dataset=target.dataset;let text=target.innerText;let instanceParent=target.parentNode.parentNode;let selected=instanceParent.querySelector("div.selector-selected");let options=instanceParent.querySelector("div.selector-options");for(let i in selected.dataset){selected.removeAttribute("data-"+i)}for(let i in dataset){selected.setAttribute("data-"+i,dataset[i])}selected.querySelector("p").innerText=text;options.querySelector("div.option-selected").classList.remove("option-selected");target.classList.add("option-selected");let parentSelect=instanceParent.previousSibling;if(parentSelect.tagName!=="SELECT"){parentSelect=document.querySelector('select[name="'+instanceParent.getAttribute("data-reference")+'"]')}let selectedNew=selected.getAttribute("data-item");let selectOptions=parentSelect.querySelectorAll("option");for(let i=0;i<selectOptions.length;++i){selectOptions[i].removeAttribute("selected")}selectOptions[selectedNew].setAttribute("selected","true");selected.click()};document.onclick=function(a){let SelectorInstances=document.querySelectorAll("div.selector-element");let target=a.target;for(let i=0;i<SelectorInstances.length;++i){if(target!==SelectorInstances[i]&&!SelectorInstances[i].contains(target)){SelectorInstances[i].classList.remove("open")}}};