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
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
|
/*
* ============LICENSE_START=======================================================
* Copyright (C) 2016-2018 Ericsson. All rights reserved.
* ================================================================================
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*
* SPDX-License-Identifier: Apache-2.0
* ============LICENSE_END=========================================================
*/
function dropdownList_option_select_scopePreserver(optionDiv, selectedOption, onselect) {
return function(event) {
dropdownList_option_select(optionDiv, selectedOption, onselect);
}
}
function dropdownList_filter_scopePreserver(optionDiv, optionUl) {
return function(event) {
dropdownList_filter(optionDiv, optionUl);
}
}
function dropdownList_option_select(divname, selectedOption, onselect) {
document.getElementById(divname + "_display").innerHTML = selectedOption.displaytext;
document.getElementById(divname)["selectedOption"] = selectedOption;
dropdownList_display_hide(divname);
if (onselect) {
onselect(selectedOption);
}
}
function dropdownList_display_click(divname, options, selected, disabled, getoptions) {
if (!document.getElementById(divname + "_options").classList.contains("dropdownList_show")) {
if (getoptions != null) {
var new_options = getoptions();
dropdownList_ChangeOptions(document.getElementById(divname), new_options, selected, disabled, getoptions);
}
document.getElementById(divname + "_options").classList
.add("dropdownList_show", "dropdownList_display_clicked");
} else {
document.getElementById(divname + "_options").classList.remove("dropdownList_show",
"dropdownList_display_clicked");
}
}
function dropdownList_display_hide(optionDiv) {
document.getElementById(optionDiv + "_options").classList.remove("dropdownList_show");
}
function dropdownList_filter(optionDiv, optionUl) {
var input, filter, ul;
var input = document.getElementById(optionDiv + "_search");
var filter = input.value.toUpperCase();
var ul = document.getElementById(optionDiv + "_options_list_ul");
var lis = ul.querySelectorAll("#" + ul.id + " > li"); // get li direct
// child elements
for (var i = 0; i < lis.length; i++) {
if (lis[i].innerHTML.toUpperCase().indexOf(filter) > -1) {
lis[i].style.display = "";
} else {
lis[i].style.display = "none";
}
}
}
/*
* Create a dropdown list, with a search function.
*
* Each dropdownList must have a unique "id_prefix" value as a unique identifier
* prefix "options" is an array of objects for options, where each object has a
* field called name. options[i].displaytext is a displayed text for the option
* "selected" is one of the options contained in list in the "options"
* parameter. "selected" must contain at least one field: selected.displaytext,
* where the value of selected.displaytext should be the same as
* options[i].displaytext for one of the values in options. "disabled" is a
* boolean, whether the drop down is enabled or disabled "onselect" is a
* function that is called when an option is selected, with a parameter that is
* the selected option from the passed "options" "getoptions" is a function that
* is called to dynamically retrieve options. It is called when the drop-down
* list is checked. If this is set the "options" parameter is ignored.
*
* Returns a DIV representing the dropdown list. The returned DIV will have a
* new field "selectedOption" containing one of the options in the "options"
* array, or null if no option is selected/ The returned DIV will have an id
* with value "id_prefix+'_dropdownList'", which should be unique.
*/
function dropdownList(id_prefix, options, selected, disabled, onselect, getoptions) {
var retdiv = document.createElement("div");
var divname = id_prefix + "_dropdownList";
retdiv.setAttribute("id", divname);
retdiv.setAttribute("class", "dropdownList");
retdiv["_isDropDownList"] = true;
retdiv["_dropDownList_listener"] = onselect;
return dropdownList_ChangeOptions(retdiv, options, selected, disabled, getoptions);
}
function dropdownList_ChangeOptions(dropdownListDIV, options, selected, disabled, getoptions) {
var retdiv = dropdownListDIV;
var divname = retdiv.getAttribute("id");
if (!retdiv["_isDropDownList"]) {
console.error("Cannot provision dropdown list " + divname + " DIV because it is not a dropdown list");
return null;
}
if (options == null && getoptions == null) {
console.error("Cannot provision dropdown list " + divname
+ " DIV because it has no options and no function to get options");
return null;
}
if (disabled && !selected) {
console.warn("Provisioning dropdown list " + divname + " that is disabled, but there is no value selected!")
}
var subdivs = retdiv.querySelectorAll("#" + divname + " > div, button"); // get
// direct
// children
// or
// retdiv
// that
// are
// divs
for (var d = 0; d < subdivs.length; d++) {
retdiv.removeChild(subdivs[d]);
}
var onselect = null;
if (retdiv["_dropDownList_listener"]) {
onselect = retdiv["_dropDownList_listener"];
}
var display = document.createElement("div");
retdiv.appendChild(display);
display.setAttribute("id", divname + "_display");
retdiv["selectedOption"] = null;
var button = document.createElement("button");
button.setAttribute("class", "ebCombobox-helper");
var iconHolder = document.createElement("span");
iconHolder.setAttribute("class", "ebCombobox-iconHolder");
var icon = document.createElement("i");
var iconStyle = "ebIcon ebIcon_small ebIcon_downArrow_10px eb_noVertAlign";
if (disabled) {
iconStyle += " ebIcon_disabled";
}
icon.setAttribute("class", iconStyle);
iconHolder.appendChild(icon);
button.appendChild(iconHolder);
retdiv.appendChild(button);
if (disabled) {
display.setAttribute("class", "dropdownList_display_disabled ebInput_width_xLong");
} else {
display.setAttribute("class", "dropdownList_display ebInput_width_xLong");
var onClickFunction = function(event) {
dropdownList_display_click(divname, options, selected, disabled, getoptions);
};
display.onclick = onClickFunction;
button.onclick = onClickFunction;
}
var optionsDIV = document.createElement("div");
retdiv.appendChild(optionsDIV);
optionsDIV.setAttribute("id", divname + "_options");
optionsDIV.setAttribute("class", "dropdownList_options");
var optionsSearch = document.createElement("input");
optionsDIV.appendChild(optionsSearch);
optionsSearch.setAttribute("id", divname + "_search");
optionsSearch.setAttribute("type", "input");
optionsSearch.setAttribute("placeholder", "Search..");
optionsSearch.setAttribute("class", "ebInput ebInput_width_full");
optionsSearch.onkeyup = dropdownList_filter_scopePreserver(divname, divname + "_options_list");
var optionsUL = document.createElement("ul");
optionsUL.setAttribute("class", "dropdownList_options_body");
optionsSearch.setAttribute("id", divname + "_search");
optionsDIV.appendChild(optionsUL);
optionsUL.setAttribute("id", divname + "_options_list_ul");
if (options) {
for (var i = 0; i < options.length; i++) {
var option = document.createElement("li");
optionsUL.appendChild(option);
option.onclick = dropdownList_option_select_scopePreserver(divname, options[i], onselect);
option.innerHTML = options[i].displaytext;
if (selected && selected.displaytext && selected.displaytext == options[i].displaytext) {
retdiv["selectedOption"] = options[i];
}
}
} else if (getoptions != null && selected != null) {
retdiv["selectedOption"] = selected;
}
if (retdiv["selectedOption"] != null) {
display.innerHTML = retdiv["selectedOption"].displaytext;
display.title = display.innerHTML;
} else if (retdiv["selectedOption"] == null && !disabled) {
display.innerHTML = "Select an Option";
} else if (retdiv["selectedOption"] == null && disabled) {
display.innerHTML = "No Option Selected";
}
return retdiv;
}
|
