forked from protonphoton/LJ
1 line
6.2 KiB
JavaScript
1 line
6.2 KiB
JavaScript
|
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.currentIns
|