bvselect.polyfill.js

/*
#
#  BVSelect - VanillaJS Fully Customizable Selectboxes
#  polyfill Version
#  Build: v1.3
#
#  Developed by Bruno Vieira
#
*/

"use strict";function _typeof(e){return(_typeof="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(e){return typeof e}:function(e){return e&&"function"==typeof Symbol&&e.constructor===Symbol&&e!==Symbol.prototype?"symbol":typeof e})(e)}var BVSelect=function(){function e(e){var t=e.selector,n=void 0===t?"defaultId":t,o=e.width,l=void 0===o?"100%":o,i=e.searchbox,s=void 0!==i&&i,r=e.offset,d=void 0===r||r,c=e.search_placeholder,a=void 0===c?"Search...":c,u=e.placeholder,m=void 0===u?"Select Option":u,y=Math.floor(1e4*Math.random())+0,p=a,g=m,f=0,v=[],b="",h=n.substring(1);function _(){var e=Math.max(document.documentElement.clientHeight||0,window.innerHeight||0),t=document.getElementById("ul_"+y).lastChild.getBoundingClientRect().top;Math.round(t+50)>Math.round(e)?(f=y,document.getElementById("ul_"+y).style.position="fixed",document.getElementById("ul_"+y).style.bottom="0px"):(f=0,document.getElementById("ul_"+y).style.position="absolute",document.getElementById("ul_"+y).style.bottom="")}this.selector=n.substring(1),this.searchbox=s,this.width=l,this.offset=d,this.randomID=y,this.search_placeholder,document.getElementById(this.selector).style.display="none",this.SetupListOptions=function(){for(var e=this,t=document.getElementById(this.selector),n=0;n<t.length;n++){var o=t[n].text,l=(t[n].value,t[n].disabled),i=t[n].getAttribute("data-separator"),s=t[n].getAttribute("data-img"),r=t[n].getAttribute("data-icon");if(1==l)var d="bv_disabled";else d="";if(i)var c="bv_separator";else c="";if(s)var a="<img src="+s+">";else if(r)a="<i class='"+r+"' aria-hidden='true'></i>";else a="";document.getElementById("ul_"+y).insertAdjacentHTML("beforeend","<li class='"+d+" "+c+"'  > "+a+" "+o+"</li>")}document.querySelectorAll("#ul_"+y+" li").forEach(function(n){n.addEventListener("click",function(o){var l=Array.from(n.parentNode.children).indexOf(n),i=document.getElementById(e.selector);if(1==e.searchbox)var s=-1;else s="";if(n.classList.contains("bv_disabled")||n.classList.contains("nofocus")||n.classList.contains("bv_separator"));else{if(i.attributes.multiple){var r="";if(event.preventDefault(),v.indexOf(l)>-1){var d=v.indexOf(l);v.splice(d,1),document.getElementById(e.selector)[l+s].selected=!1,n.style.backgroundColor="transparent"}else v.push(l),n.style.backgroundColor="#ececec";if(0==v.length)r=g;else{for(var c=0;c<v.length;c++){var a=v[c];document.getElementById(e.selector).getElementsByTagName("option")[a+s].selected="selected",r+=", "+i[a-1].innerHTML}r=r.substring(2)}document.getElementById("main_"+y).innerHTML=r+"<i id='arrow_"+y+"' class='arrows_bv arrow down'></i>"}else document.getElementById(e.selector).getElementsByTagName("option")[l+s].selected="selected",null!=t.getAttribute("onchange")&&document.getElementById(e.selector).onchange(),document.getElementById("main_"+y).innerHTML=n.textContent+"<i id='arrow_"+y+"' class='arrows_bv arrow down'></i>",document.getElementById("ul_"+y).style.display="none",document.body.classList.remove("stop-scrolling"),document.body.contains(document.getElementById("deletebg"))&&document.getElementById("deletebg").remove();1==e.searchbox&&(document.getElementById("input_"+y).value="",Array.from(document.querySelectorAll("#ul_"+y+" li")).forEach(function(e){e.style.display="block"})),_()}})})},this.CriarDivBase=function(){document.getElementById(this.selector).insertAdjacentHTML("afterend",'<div id="bv_'+y+'" data-search="'+this.searchbox+'" class="bv_mainselect"></div>'),document.getElementById("bv_"+y).insertAdjacentHTML("afterbegin",'<div id="main_'+y+'" style="width:'+this.width+';" class="bv_atual bv_background"></div><ul id="ul_'+y+'" class="bv_ul_inner bv_background"></ul>');var e=document.getElementById("ul_"+y),t=(document.getElementById("bv_"+y),document.getElementById("main_"+y).offsetWidth);e.style.width=t+"px",1==this.searchbox&&document.querySelector("#ul_"+y).insertAdjacentHTML("afterbegin",'<li class="nofocus"><div class="innerinput"><input placeholder="'+p+'" class="bv_input" id="input_'+y+'" type="text"></div</li>');var n=document.getElementById(this.selector);if(n.attributes.multiple)b=g;else{for(var o=0;o<n.length;o++)if(""==n[o].getAttribute("selected"))var l=1;b=1==l?n.options[n.selectedIndex].text:g}document.getElementById("main_"+y).innerHTML=b+"<i id='arrow_"+y+"' class='arrows_bv arrow down'></i>",document.getElementById("main_"+y).addEventListener("click",function(){document.getElementById("ul_"+y).style.position="absolute",document.getElementById("ul_"+y).style.bottom="",window.innerWidth<600?(document.getElementById("ul_"+y).classList.add("bv_ul_mobile"),document.getElementById(h).insertAdjacentHTML("afterend",'<div id="deletebg" class="bv_ul_bg"></div>'),document.body.classList.add("stop-scrolling")):document.getElementById("ul_"+y).classList.remove("bv_ul_mobile");var t,n,o=document.getElementById("main_"+y).offsetWidth;e.style.width=o+"px","block"==document.getElementById("ul_"+y).style.display?(document.getElementById("ul_"+y).style.display="none",Array.from(document.querySelectorAll(".arrows_bv")).forEach(function(e){e.classList.remove("up"),e.classList.add("down")})):(Array.from(document.querySelectorAll(".bv_ul_inner")).forEach(function(e){e.style.display="none"}),(t=document.getElementById("ul_"+y)).style.opacity=0,t.style.display=n||"block",function e(){var n=parseFloat(t.style.opacity);(n+=.1)>1||(t.style.opacity=n,requestAnimationFrame(e))}(),Array.from(document.querySelectorAll(".arrows_bv")).forEach(function(e){e.classList.remove("up"),e.classList.add("down")}),document.querySelector("#arrow_"+y).classList.remove("down"),document.querySelector("#arrow_"+y).classList.add("up")),1==d&&_()},!1),this.SetupListOptions()},this.CriarDivBase(),document.addEventListener("scroll",function(){0!=f&&(Math.max(document.documentElement.clientHeight||0,window.innerHeight||0)-document.getElementById("main_"+y).lastChild.getBoundingClientRect().top>document.getElementById("ul_"+y).clientHeight&&_())},!1),1==this.searchbox&&document.getElementById("input_"+y).addEventListener("keyup",function(){var e,t,n;for(e=document.getElementById("input_"+y).value.toUpperCase(),t=document.getElementById("ul_"+y).getElementsByTagName("li"),Array.from(document.querySelectorAll(".bv_separator")).forEach(function(e){e.style.display="none"}),n=0;n<t.length;n++)""==e?Array.from(document.querySelectorAll("#ul_"+y+" li")).forEach(function(e){e.style.display="block"}):(t[n].innerText||t[n].textContent).toUpperCase().indexOf(e)>-1&&!t[n].classList.contains("bv_separator")?t[n].style.display="":t[n].classList.contains("nofocus")||(t[n].style.display="none")},!1),document.addEventListener("click",function(e){e.target.closest(".bv_ul_inner")&&event.target.classList.contains("bv_input")||event.target.classList.contains("bv_input")||event.target.classList.contains("bv_atual")||"LI"!=event.target.nodeName&&(Array.from(document.querySelectorAll(".bv_ul_inner")).forEach(function(e){e.style.display="none"}),Array.from(document.querySelectorAll(".arrows_bv")).forEach(function(e){e.classList.remove("up"),e.classList.add("down")}),Array.from(document.querySelectorAll("#input_"+y)).forEach(function(e){e.value=""}),Array.from(document.querySelectorAll("#ul_"+y+" li")).forEach(function(e){e.style.display="block"}),document.body.classList.remove("stop-scrolling"),document.body.contains(document.getElementById("deletebg"))&&document.getElementById("deletebg").remove(),document.getElementById("ul_"+y)&&(f=0,document.getElementById("ul_"+y).style.position="absolute",document.getElementById("ul_"+y).style.bottom=""))},!0)}var t=e.prototype;return t.Destroy=function(){document.getElementById("bv_"+this.randomID).remove(),document.getElementById(this.selector).style.display="block"},t.Update=function(){Array.from(document.querySelectorAll("#ul_"+this.randomID+" li")).forEach(function(e){e.classList.contains("nofocus")||e.remove()}),this.SetupListOptions()},t.GetID=function(){return this.randomID},t.Change=function(e){if(e.placeholder&&(document.getElementById("main_"+this.randomID).innerHTML=e.placeholder+"<i id='arrow_"+this.randomID+"' class='arrows_bv arrow down'></i>"),e.search_placeholder&&(document.getElementById("input_"+this.randomID).placeholder=e.search_placeholder),e.options&&"object"===_typeof(e.options)){document.querySelector("#"+this.selector).innerHTML="";for(var t=Object.keys(e.options).length,n=0;n<t;n++){var o,l,i,s;o=1==e.options[n].disabled?"disabled":"",l=1==e.options[n].separator?"data-separator='true'":"",i=e.options[n].img?"data-img='"+e.options[n].img+"'":"",s=e.options[n].icon?"data-icon='"+e.options[n].icon+"'":"",document.getElementById(this.selector).insertAdjacentHTML("beforeend","<option "+i+" "+s+" "+l+" "+o+" value="+e.options[n].value+" >"+e.options[n].inner_text+"</option>")}}else console.error("Options must be and Object. Read documentation.")},e}();