FILE STRUCTURE
INDEX.HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="description" content="BVSelect Jquery">
<meta name="author" content="Bruno Vieira">
<title>BVSelect - VanillaJS Fully Customizable SelectBox</title>
<!-- BVSelect Plugin Style -->
<link rel="stylesheet" type="text/css" href="css/select.css">
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.3/css/all.css" integrity="sha384-UHRtZLI+pbxtHCWp1t77Bi1L4ZtiqrqD80Kn4Z8NTSRyMA2Fd33n5dQ8lWUE00s/" crossorigin="anonymous">
<link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@300&display=swap" rel="stylesheet">
<style>
html,body { font-family: 'Montserrat', sans-serif; }
.btn-light { color: #212529; background-color: #f8f9fa; border-color: #f8f9fa; border: 1px solid #ececec; }
.card{
padding: 25px 10px;
color: white;
border-radius: 0 !important;
}
</style>
</head>
<body >
<div class="container mt-5">
<div class="row">
<div class="col-md-4 mb-5" >
<div class="card h-100 bg-success" >
<div >
<h3>Basic:</h3>
<select id="selectbox">
<option value="pt_1">Option 1</option>
<option value="en_2" >Option 2 </option>
<option value="es_3" disabled>Option 3 (Disabled)</option>
<option value="ch_4">Option 4</option>
<option value="5">Option 5</option>
</select>
</div>
</div>
</div>
<div class="col-md-4 mb-5" >
<div class="card h-100 bg-primary" >
<div >
<h3>Searchbox:</h3>
<select id="selectbox2">
<option value="pt_1">Cristiano Ronaldo</option>
<option value="en_2">Lionel Messi </option>
<option value="es_3" disabled>Neymar Jr. (Disabled)</option>
<option value="ch_4">Ronaldinho</option>
<option value="5">Luis Figo</option>
</select>
</div>
</div>
</div>
<div class="col-md-4 mb-5" >
<div class="card h-100 bg-danger" >
<div >
<h3>Multiple:</h3>
<select id="selectbox6" multiple="">
<option data-icon="fa fa-align-justify" value="pt_1">Item 1</option>
<option data-icon="fa fa-address-book" value="en_2" >Item 2 </option>
<option data-icon="fa fa-hashtag" value="es_3" disabled>Item 3 (Disabled)</option>
<option data-icon="fa fa-beer" value="ch_4">Item 4</option>
<option data-icon="fa fa-air-freshener" value="5">Item 5</option>
</select>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-4 mb-5" >
<div class="card h-100 bg-warning" >
<div >
<h3>Images:</h3>
<select id="selectbox3">
<option value="##" data-separator="true">Portugal</option>
<option data-img="https://img.icons8.com/color/2x/portugal.png" value="5">Luis Figo</option>
<option data-img="https://img.icons8.com/color/2x/portugal.png" value="pt_1">Cristiano Ronaldo</option>
<option value="##" data-separator="true">Argentina</option>
<option data-img="https://img.icons8.com/color/2x/argentina.png" value="en_2" >Lionel Messi </option>
<option value="##" data-separator="true">Brasil</option>
<option data-img="https://img.icons8.com/color/2x/brazil.png" value="es_3" disabled>Neymar Jr. (Disabled)</option>
<option data-img="https://img.icons8.com/color/2x/brazil.png" value="ch_4">Ronaldinho</option>
</select>
</div>
</div>
</div>
<div class="col-md-4 mb-5" >
<div class="card h-100 bg-secondary" >
<div >
<h3>Icons:</h3>
<select id="selectbox4">
<option data-icon="fa fa-arrow-right" value="pt_1">Cristiano Ronaldo</option>
<option data-icon="fa fa-tshirt" value="en_2" >Lionel Messi </option>
<option data-icon="fa fa-futbol" value="es_3" disabled>Neymar Jr. (Disabled)</option>
<option data-icon="fa fa-chevron-circle-right" value="ch_4">Ronaldinho</option>
<option data-icon="fa fa-hashtag" value="5">Luis Figo</option>
</select>
</div>
</div>
</div>
<div class="col-md-4 mb-5" >
<div class="card h-100 bg-success" >
<div >
<h3>Mixed:</h3>
<select id="selectbox5">
<option data-img="https://img.icons8.com/color/2x/portugal.png" value="pt_1">Cristiano Ronaldo</option>
<option data-icon="fa fa-address-book" data-img="https://img.icons8.com/color/2x/argentina.png" value="en_2" >Lionel Messi </option>
<option data-icon="fa fa-hashtag" value="es_3" disabled>Neymar Jr. (Disabled)</option>
<option data-img="https://img.icons8.com/color/2x/brazil.png" value="ch_4">Ronaldinho</option>
<option data-icon="fa fa-futbol" value="5">Luis Figo</option>
</select>
</div>
</div>
</div>
</div>
</div>
</div>
<script src="js/bvselect.js"></script>
<script>
document.addEventListener("DOMContentLoaded", function() {
var demo1 = new BVSelect({
selector: "#selectbox",
searchbox: false,
offset: false
});
var demo2 = new BVSelect({
selector: "#selectbox2",
searchbox: true,
search_autofocus: true,
offset: true,
width: "100%",
placeholder: "Select Option",
search_placeholder: "Search...",
breakpoint: 750
});
var demo3 = new BVSelect({
selector: "#selectbox3",
searchbox: true,
offset: true
});
var demo4 = new BVSelect({
selector: "#selectbox4",
searchbox: true,
offset: true
});
var demo5 = new BVSelect({
selector: "#selectbox5",
searchbox: true,
offset: true
});
var demo6 = new BVSelect({
selector: "#selectbox6",
searchbox: true,
search_autofocus: false,
offset: true,
width: "100%",
search_placeholder: "Search..."
});
});
</script>
</body>
</html>
SELECT.CSS
.bv_mainselect {
color: #fff;
padding: 7px 5px 7px 5px;
border-radius: 6px;
font-size: 10pt
}
.bv_atual {
color: #535353;
font-size: 11pt;
padding: 10px;
border-radius: 0;
cursor: pointer
}
.bv_disabled {
background-color: #e6e6e6!important;
cursor: default!important;
}
.bv_separator {
font-weight: 700;
color: #282828!important;
cursor:default!important;
background-color:transparent!important;
}
.bv_background {
background-color: #fff
}
.arrow {
border: solid grey;
border-width: 0 3px 3px 0;
display: inline-block;
padding: 3px;
float: right;
pointer-events: none;
}
.up {
transform: rotate(-135deg);
-webkit-transform: rotate(-135deg);
margin-top: 5px;
transition: all .2s ease
}
.down {
transition: all .2s ease;
transform: rotate(45deg);
-webkit-transform: rotate(45deg);
margin-top: 2px
}
.bv_ul_mobile {
width: 80% !important;
position: fixed !important;
top: 5% !important;
left: 10% !important;
border: 0px !important;
height: 90% !important;
margin: 0px !important;
overflow-y: scroll;
z-index: 10 !important;
max-height:100%!important;
}
.bv_ul_bg
{
position: fixed;
width: 100%;
height: 100%;
top: 0px;
left: 0px;
background-color: rgba(0, 0, 0, 0.8); z-index: 9;
}
.bv_ul_mobile li
{
padding:20px!important;
}
.stop-scrolling {
height: 100%;
overflow: hidden;
}
.bv_ul_inner {
position: absolute;
margin-top: 10px;
padding: 0;
display: none;
border-radius: 0;
display: none;
z-index: 1;
max-height: 400px;
overflow-x: auto;
}
.bv_ul_inner li {
cursor: pointer;
list-style: none;
color: #353535;
padding: 5px 0 5px 9px;
font-size: 10pt;
padding: 12px 28px 10px 10px;
}
.bv_ul_inner i {
color: #464646;
font-size: 17pt;
margin-right: 10px;
float: left;
margin-top: -1px;
margin-left: 3px;
}
.bv_ul_inner li img{
float: left;
margin-right: 11px;
position: relative;
bottom: 6px;
max-width: 30px; /* Change to fit your images */
}
.bv_ul_inner li input
{
padding: 0px;
border: 0px;
border-bottom-color: currentcolor;
border-bottom-style: none;
border-bottom-width: 0px;
border-bottom-color: currentcolor;
border-bottom-style: none;
border-bottom-width: 0px;
color: black;
height: 38px;
width: 100%;
background-color: transparent;
font-size: 10pt;
font-weight: bold;
}
.bv_ul_inner li:hover {
background-color: #eee
}
.nofocus
{
background-color: rgba(255, 255, 255, 0.1) !important;
padding: 0px !important;
border-bottom: 2px solid #e1e1e1;
}
.innerinput
{
padding: 0px 9px 0px 10px;
}
*:focus {
outline: none!important;
}
BVSELECT.JS
class BVSelect {
constructor({
selector = 'defaultId',
width = "100%",
searchbox = false,
search_autofocus = false,
offset = true,
search_placeholder = "Search...",
placeholder = "Select Option",
breakpoint = "600"
})
{
// Random Number generated
var randomID = Math.floor(Math.random() * (9999 - 0 + 1)) + 0;
var SearchPlaceholder = search_placeholder;
var MainPlaceholder = placeholder;
var selectedIDFocus = 0; // Save wich dropdown is currently open
var selectedMultiple = [];
var selected_option_text = "";
var first_option_text = "";
var MDivSelector = selector.substring(1);
// Define Variables
this.selector = selector.substring(1);
this.searchbox = searchbox;
this.width = width;
this.offset = offset;
this.randomID = randomID;
this.search_placeholder;
this.breakpoint = breakpoint;
this.search_autofocus = search_autofocus;
// Hides native selector
document.getElementById(this.selector).style.display = "none";
// ** ADD OPTIONS TO LIST **
this.SetupListOptions = function() {
// Get All options inside Selectbox
var x = document.getElementById(this.selector);
for (var i = 0; i < x.length; i++) {
var optionText = x[i].text;
var optionValue = x[i].value;
var optionDisabled = x[i].disabled;
var optionSeparator = x[i].getAttribute("data-separator");
var optionImg = x[i].getAttribute("data-img");
var optionIcon = x[i].getAttribute("data-icon");
// Option Disabled
if (optionDisabled == true) {
var is_disabled = "bv_disabled";
} else {
var is_disabled = "";
}
// Separator
if (optionSeparator) {
var is_separator = "bv_separator";
} else {
var is_separator = "";
}
// Check for Attachment
if (optionImg) {
var has_attachment = "<img src=" + optionImg + ">";
} else {
if (optionIcon) {
var has_attachment = "<i class='" + optionIcon + "' aria-hidden='true'></i>";
} else {
var has_attachment = "";
}
}
// Append
document.getElementById("ul_" + randomID).insertAdjacentHTML('beforeend', "<li class='" + is_disabled + " " + is_separator + "' > " + has_attachment + " " + optionText + "</li>");
}
document.querySelectorAll('#ul_' + randomID + ' li').forEach((item) => {
item.addEventListener('click', (e) => {
const index = Array.from(item.parentNode.children).indexOf((item))
var selected_option = document.getElementById(this.selector);
if (this.searchbox == true) {
var numberless = -1;
} else {
var numberless = "";
}
if (item.classList.contains("bv_disabled") || item.classList.contains("nofocus") || item.classList.contains("bv_separator")) {} else {
if (selected_option.attributes.multiple) {
var SelectedNames = "";
event.preventDefault();
if (selectedMultiple.indexOf(index) > -1) {
var index_test = selectedMultiple.indexOf(index);
selectedMultiple.splice(index_test, 1);
document.getElementById(this.selector)[index + numberless].selected = false;
item.style.backgroundColor = "transparent";
} else {
selectedMultiple.push(index);
item.style.backgroundColor = "#ececec";
} // Adds to array
// Check if array is empty, if it is, gets the first option
if (selectedMultiple.length == 0) {
SelectedNames = MainPlaceholder;
} else {
for (var i = 0; i < selectedMultiple.length; i++) {
var indexValFromArray = selectedMultiple[i];
document.getElementById(this.selector).getElementsByTagName('option')[indexValFromArray + numberless].selected = 'selected';
SelectedNames += ", " + selected_option[indexValFromArray - 1].innerHTML;
}
SelectedNames = SelectedNames.substring(2);
}
// Adds the texto o the main DIV
document.getElementById("main_" + randomID).innerHTML = SelectedNames + "<i id='arrow_" + randomID + "' class='arrows_bv arrow down'></i>";
} else {
// Get Index of option
document.getElementById(this.selector).getElementsByTagName('option')[index + numberless].selected = 'selected';
// Trigger onchange function
if (x.getAttribute("onchange") != null) {
document.getElementById(this.selector).onchange();
}
// Updates main div
document.getElementById("main_" + randomID).innerHTML = item.textContent + "<i id='arrow_" + randomID + "' class='arrows_bv arrow down'></i>";
document.getElementById("ul_" + randomID).style.display = "none";
// Remove class so Body has Scroll Again
document.body.classList.remove("stop-scrolling");
if(document.body.contains(document.getElementById('deletebg'))){
document.getElementById("deletebg").remove();
}
FixVerticalViewPort();
}
// When click, resets search filter
if (this.searchbox == true) {
document.getElementById("input_" + randomID).value = "";
Array.from(document.querySelectorAll("#ul_" + randomID + " li")).forEach(function(val) {
val.style.display = "block";
});
}
}
})
});
}
// ** CREATE MAIN **
this.CriarDivBase = function() {
document.getElementById(this.selector).insertAdjacentHTML('afterend', '<div id="bv_' + randomID + '" data-search="' + this.searchbox + '" class="bv_mainselect"></div>');
document.getElementById("bv_" + randomID).insertAdjacentHTML('afterbegin', '<div id="main_' + randomID + '" style="width:' + this.width + ';" class="bv_atual bv_background"></div><ul id="ul_' + randomID + '" class="bv_ul_inner bv_background"></ul>');
var element_ul = document.getElementById('ul_' + randomID);
var element_bv = document.getElementById('bv_' + randomID);
// Set Width of UL
var select_width = document.getElementById("main_" + randomID).offsetWidth;
element_ul.style.width = select_width + "px";
if (this.searchbox == true) {
document.querySelector("#ul_" + randomID).insertAdjacentHTML('afterbegin', '<li class="nofocus"><div class="innerinput"><input placeholder="' + SearchPlaceholder + '" class="bv_input" id="input_' + randomID + '" type="text"></div</li>');
}
// Get Selected Option
var selected_option = document.getElementById(this.selector);
if (!selected_option.attributes.multiple) {
// Check if exists any selected option in the native selectbox
for (var i = 0; i < selected_option.length; i++) {
if (selected_option[i].getAttribute("selected") == "") {
var FoundSelectedOP = 1;
}
}
// if is 1, its because found it, if not get the placeholder.
if (FoundSelectedOP == 1) {
first_option_text = selected_option.options[selected_option.selectedIndex].text;
} else {
first_option_text = MainPlaceholder;
}
} else {
// Se for multiple, vai buscar sempre o placeholder
first_option_text = MainPlaceholder;
}
document.getElementById("main_" + randomID).innerHTML = first_option_text + "<i id='arrow_" + randomID + "' class='arrows_bv arrow down'></i>";
// Add event Listener on click main div
document.getElementById("main_" + randomID).addEventListener("click", function() {
// Reset dropdown position, in case it was changed before
document.getElementById("ul_" + randomID).style.position = "absolute";
document.getElementById("ul_" + randomID).style.bottom = "";
// Check Windows Width for Mobile
if(window.innerWidth < breakpoint)
{
document.getElementById("ul_" + randomID).classList.add("bv_ul_mobile");
document.getElementById(MDivSelector).insertAdjacentHTML('afterend', '<div id="deletebg" class="bv_ul_bg"></div>');
document.body.classList.add("stop-scrolling");
} else {
document.getElementById("ul_" + randomID).classList.remove("bv_ul_mobile");
}
// Correct the width of the UL when window is resized
var select_width = document.getElementById("main_" + randomID).offsetWidth;
element_ul.style.width = select_width + "px";
if (document.getElementById('ul_' + randomID).style.display == 'block') {
document.getElementById('ul_' + randomID).style.display = 'none';
Array.from(document.querySelectorAll(".arrows_bv"))
.forEach(function(val) {
val.classList.remove("up");
val.classList.add("down");
});
} else {
Array.from(document.querySelectorAll(".bv_ul_inner"))
.forEach(function(val) {
val.style.display = 'none';
});
BVfadeIn(document.getElementById('ul_' + randomID));
Array.from(document.querySelectorAll(".arrows_bv"))
.forEach(function(val) {
val.classList.remove("up");
val.classList.add("down");
});
document.querySelector("#arrow_" + randomID).classList.remove("down");
document.querySelector("#arrow_" + randomID).classList.add("up");
}
// Call function at end of the dropdown movement
if (offset == true) { FixVerticalViewPort(); }
// Check if autofocus and search is enabled
if(search_autofocus == true && searchbox == true) { document.getElementById("input_" + randomID).focus();}
}, false);
// ** SETUP LIST OPTIONS **
this.SetupListOptions();
}
// ** CREATES MAIN DIV **
this.CriarDivBase();
// ** ON SCROLL EVENT TO PREVENT OUT OF VIEWPORT **
document.addEventListener("scroll", function() {
if (selectedIDFocus != 0) {
var currentWindowViewOffSet = Math.max(document.documentElement.clientHeight || 0, window.innerHeight || 0);
var container = document.getElementById("main_" + randomID);
var lastchild = container.lastChild;
var currentElementViewOffSet = lastchild.getBoundingClientRect().top;
var MainDivOff = document.getElementById("ul_" + randomID).clientHeight;
var DiffBetW = currentWindowViewOffSet - currentElementViewOffSet // Difference between Element and Window
// If Difference is greater than List's height
if (DiffBetW > MainDivOff) {
FixVerticalViewPort();
}
}
}, false);
// ** FADE OUT FUNCTION **
function BVfadeOut(el) {
el.style.opacity = 1;
(function fade() {
if ((el.style.opacity -= .1) < 0) {
el.style.display = "none";
} else {
requestAnimationFrame(fade);
}
})();
};
// ** FADE IN FUNCTION **
function BVfadeIn(el, display) {
el.style.opacity = 0;
el.style.display = display || "block";
(function fade() {
var val = parseFloat(el.style.opacity);
if (!((val += .1) > 1)) {
el.style.opacity = val;
requestAnimationFrame(fade);
}
})();
};
// ** CHECK VIEW PORT OFFSET **
function FixVerticalViewPort() {
var currentWindowView = Math.max(document.documentElement.clientHeight || 0, window.innerHeight || 0);
var container = document.getElementById("ul_" + randomID);
var lastchild = container.lastChild;
var currentElementView = lastchild.getBoundingClientRect().top;
// +50 to fix outer border
if (Math.round(currentElementView + 50) > Math.round(currentWindowView)) {
selectedIDFocus = randomID;
document.getElementById("ul_" + randomID).style.position = "fixed";
document.getElementById("ul_" + randomID).style.bottom = "0px";
} else {
selectedIDFocus = 0;
document.getElementById("ul_" + randomID).style.position = "absolute";
document.getElementById("ul_" + randomID).style.bottom = "";
}
}
// ** SEARCH BAR **
if (this.searchbox == true) {
document.getElementById("input_" + randomID).addEventListener("keyup", function() {
var input, filter, ul, li, i, txtValue;
input = document.getElementById("input_" + randomID);
filter = input.value.toUpperCase();
ul = document.getElementById("ul_" + randomID);
li = ul.getElementsByTagName("li");
// Hides all separators
Array.from(document.querySelectorAll(".bv_separator")).forEach(function(val) {
val.style.display = "none";
});
for (i = 0; i < li.length; i++) {
// If Empty, appears every line
if (filter == "") {
Array.from(document.querySelectorAll("#ul_" + randomID + " li")).forEach(function(val) {
val.style.display = "block";
});
} else {
// Removes separators from search
txtValue = li[i].innerText || li[i].textContent;
if (txtValue.toUpperCase().indexOf(filter) > -1 && !li[i].classList.contains("bv_separator")) {
li[i].style.display = "";
} else {
if (!li[i].classList.contains("nofocus")) {
li[i].style.display = "none";
}
}
}
}
}, false);
}
// ** CLICK OUTSIDE **
document.addEventListener("click", function(e) {
if (!e.target.closest(".bv_ul_inner") || !event.target.classList.contains('bv_input')) {
if (!event.target.classList.contains('bv_input') && !event.target.classList.contains('bv_atual')) {
if (event.target.nodeName != "LI") {
Array.from(document.querySelectorAll(".bv_ul_inner"))
.forEach(function(val) {
val.style.display = 'none';
});
Array.from(document.querySelectorAll(".arrows_bv"))
.forEach(function(val) {
val.classList.remove("up");
val.classList.add("down");
});
// When click outside, resets search filter
Array.from(document.querySelectorAll("#input_" + randomID)).forEach(function(val) {
val.value = "";
});
Array.from(document.querySelectorAll("#ul_" + randomID + " li")).forEach(function(val) {
val.style.display = "block";
});
// Remove class so Body has Scroll Again
document.body.classList.remove("stop-scrolling");
if(document.body.contains(document.getElementById('deletebg'))){
document.getElementById("deletebg").remove();
}
if (document.getElementById("ul_" + randomID)) // Checks if element existed in case it was destroyed
{
selectedIDFocus = 0;
document.getElementById("ul_" + randomID).style.position = "absolute";
document.getElementById("ul_" + randomID).style.bottom = "";
}
}
}
}
}, true);
}
// ** METHODS **
// DESTROY
Destroy() {
// Destroy main element and shows up native selectbox
document.getElementById("bv_" + this.randomID).remove();
document.getElementById(this.selector).style.display = "block";
}
// UPDATE
Update() {
// Removes all Li that does not contain class "nofocus" - Its the search.
Array.from(document.querySelectorAll("#ul_" + this.randomID + " li"))
.forEach(function(val) {
if (!val.classList.contains("nofocus")) {
val.remove();
}
});
this.SetupListOptions();
}
// GET ID
GetID() {
// Return ID Generated when building Dropdown, so you can add custom classes
return this.randomID;
}
// CHANGE
Change(properties) {
if(properties.placeholder)
{
document.getElementById("main_" + this.randomID).innerHTML = properties.placeholder + "<i id='arrow_" + this.randomID + "' class='arrows_bv arrow down'></i>";
}
if(properties.search_placeholder)
{
document.getElementById("input_" + this.randomID).placeholder = properties.search_placeholder;
}
if(properties.options && typeof(properties.options) === 'object')
{
// Clean every option inside the original selector
document.querySelector("#"+this.selector).innerHTML = "";
// Loop object and add new options to original select box
var prop = Object.keys(properties.options).length;
for (var i = 0; i < prop; i++) {
var change_disabled, change_separator, change_img, change_icon;
if(properties.options[i].disabled == true){ change_disabled = "disabled"; } else { change_disabled = ""; }
if(properties.options[i].separator == true){ change_separator = "data-separator='true'"; } else { change_separator = ""; }
if(properties.options[i].img){ change_img = "data-img='"+properties.options[i].img+"'"; } else { change_img = ""; }
if(properties.options[i].icon){ change_icon = "data-icon='"+properties.options[i].icon+"'"; } else { change_icon = ""; }
document.getElementById(this.selector).insertAdjacentHTML('beforeend', "<option "+change_img+" "+change_icon+" "+change_separator+" "+change_disabled+" value="+properties.options[i].value+" >"+properties.options[i].inner_text+"</option>");
}
} else {
console.error("Options must be and Object. Read documentation.");
}
}
// Set option
SetOption(properties) {
var selectorIndex = document.getElementById(this.selector);
// If is set by index
if(properties.type == "byIndex")
{
selectorIndex.selectedIndex = properties.value;
// Trigger onchange function
if (selectorIndex.getAttribute("onchange") != null) { document.getElementById(this.selector).onchange(); }
document.getElementById("main_" + this.randomID).innerHTML = selectorIndex.options[selectorIndex.selectedIndex].text + "<i id='arrow_" + this.randomID + "' class='arrows_bv arrow down'></i>";
// if is set by value
} else if(properties.type == "byValue")
{
for (var i = 0; i < selectorIndex.length; i++) {
if(selectorIndex[i].value == properties.value)
{
selectorIndex.selectedIndex = selectorIndex[i].index;
// Trigger onchange function
if (selectorIndex.getAttribute("onchange") != null) { document.getElementById(this.selector).onchange(); }
document.getElementById("main_" + this.randomID).innerHTML = selectorIndex[i].innerText + "<i id='arrow_" + this.randomID + "' class='arrows_bv arrow down'></i>";
}
}
}
}
// Append/Prepend Option
AppendOption(properties) {
console.log(properties);
// Get position e check if position is undefined.
var position = properties.position;
if(position == undefined) { var position = "beforeend"; }
if(properties.options && typeof(properties.options) === 'object')
{
// Loop object and add new options to original select box
var prop = Object.keys(properties.options).length;
for (var i = 0; i < prop; i++) {
var change_disabled, change_separator, change_img, change_icon;
if(properties.options[i].disabled == true){ change_disabled = "disabled"; } else { change_disabled = ""; }
if(properties.options[i].separator == true){ change_separator = "data-separator='true'"; } else { change_separator = ""; }
if(properties.options[i].img){ change_img = "data-img='"+properties.options[i].img+"'"; } else { change_img = ""; }
if(properties.options[i].icon){ change_icon = "data-icon='"+properties.options[i].icon+"'"; } else { change_icon = ""; }
document.getElementById(this.selector).insertAdjacentHTML(position, "<option "+change_img+" "+change_icon+" "+change_separator+" "+change_disabled+" value="+properties.options[i].value+" >"+properties.options[i].inner_text+"</option>");
}
} else {
console.error("Options must be and Object. Read documentation.");
}
}
}
bvselect.polyfill.js
"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}();