-
Notifications
You must be signed in to change notification settings - Fork 0
/
helios.customSelect.js
89 lines (79 loc) · 2.29 KB
/
helios.customSelect.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
jQuery.fn.customSelect = function(options) {
function chooseOption(obj) {
var selectOption = obj.find(".select__opcoes__label");
selectOption.click(function() {
var selectName = $(this).text();
obj.find(".select__atual__text").text(selectName);
obj.find(".select__opcoes").hide();
});
}
function closeSelect(obj) {
$("body").click(function(event) {
if (!$(event.target).closest(obj).length) {
obj.find($(".select__opcoes")).hide();
}
});
}
function openSelect(obj) {
var selectBox = obj.find(".select__atual");
selectBox.click(function() {
$(this).toggleClass("open");
obj.find(".select__opcoes").toggle();
});
}
function appendOption(obj) {
var list = settings.list;
var lista = [];
var listaIds = [];
$.each(list, function(i, elem) {
var id = elem
.replace(/ /g, "")
.replace(/[^\w\s]/gi, "")
.toLowerCase();
listaIds.push(
`<input type="radio" id="${id}" value="${elem}" name="optSelect">`
);
lista.push(
`<label class="select__opcoes__label" for="${id}">${elem}</label>`
);
});
obj.find(".wrapper-select").prepend(listaIds);
obj.find(".select__opcoes").append(lista);
}
var settings = $.extend(
{
border: "1px solid red",
list: ["Option 1", "Option 2"],
defaultText: "Choose an option",
textColor: "#fff",
bgColor: "linear-gradient(to right, #0f0c29, #302b63, #24243e)",
width: "100%",
icon: "❤"
},
options
);
return this.each(function(i, elem) {
$(this)
.append(
`<div class="wrapper-select">
<div class="select__atual">
<span class="select__atual__text">${
settings.defaultText
}</span>
<span class="select__icon">${settings.icon}</span>
</div>
<div class="select__opcoes"></div>
</div>`
)
.css({
border: settings.border,
color: settings.textColor,
background: settings.bgColor,
width: settings.width
})
.click(appendOption($(this)))
.click(openSelect($(this)))
.click(chooseOption($(this)))
.click(closeSelect($(this)));
});
};