43 var MultiSelectBox = MultiSelectBox || {};
45 if(window.console && console && console.log)
46 MultiSelectBox.dbg = console.log.bind(window.console);
49 function $(id) {
return document.getElementById(
id);}
54 MultiSelectBox.mySelects_ = {};
55 MultiSelectBox.omnis_ = {};
56 MultiSelectBox.isSingleSelect_ = {};
57 MultiSelectBox.lastOptSelect_ = {};
59 MultiSelectBox.selInitBoxHeight_ = {};
60 MultiSelectBox.SEL_INIT_PADDING = 5;
62 MultiSelectBox.requireCtrlMultiClick_ = {};
67 MultiSelectBox.hasClass =
function(ele,cls)
69 return !!ele.className.match(
new RegExp(
'(\\s|^)'+cls+
'(\\s|$)'));
72 MultiSelectBox.addClass =
function(ele,cls)
74 if (!MultiSelectBox.hasClass(ele,cls)) ele.className +=
" "+cls;
77 MultiSelectBox.removeClass =
function(ele,cls)
79 if (MultiSelectBox.hasClass(ele,cls))
81 var reg =
new RegExp(
'(\\s|^)'+cls+
'(\\s|$)');
82 ele.className=ele.className.replace(reg,
'');
86 MultiSelectBox.toggleClass =
function(ele,cls)
89 if (MultiSelectBox.hasClass(ele,cls))
91 var reg =
new RegExp(
'(\\s|^)'+cls+
'(\\s|$)');
92 ele.className=ele.className.replace(reg,
'');
97 ele.className +=
" "+cls;
102 MultiSelectBox.getSelectedIndex =
function(el)
104 var splits = el.id.split(
'_');
105 return splits[splits.length-1] | 0;
108 MultiSelectBox.getSelectionArray =
function(el)
111 if(el.parentElement.id.indexOf(
"selbox-") == 0)
112 return MultiSelectBox.mySelects_[el.parentElement.id];
114 return MultiSelectBox.mySelects_[el.getElementsByClassName(
"mySelect")[0].id];
117 MultiSelectBox.getSelectionElementByIndex =
function(el,i)
119 if(el.parentElement.id.indexOf(
"selbox-") == 0)
120 return document.getElementById(el.parentElement.parentElement.
121 getElementsByClassName(
"mySelect")[0].
id +
124 return document.getElementById(el.getElementsByClassName(
"mySelect")[0].id +
128 MultiSelectBox.setSelectionElementByIndex =
function(el,i,selected)
130 var name = el.getElementsByClassName(
"mySelect")[0].id;
131 if(MultiSelectBox.isSingleSelect_[name] &&
134 var size = MultiSelectBox.mySelects_[name].length;
135 for (var opt=0; opt<size; opt++)
136 MultiSelectBox.mySelects_[name][opt] = 0;
138 MultiSelectBox.mySelects_[name][i] = selected?1:0;
142 MultiSelectBox.myOptionSelect =
function(option, index, isSingleSelect, event)
144 var select = option.parentElement;
145 var
id = select.getAttribute(
"id");
146 var selectList = MultiSelectBox.mySelects_[id];
147 var size = select.childNodes.length;
150 MultiSelectBox.dbg(
"Shift click = " + event.shiftKey);
153 MultiSelectBox.dbg(
"Control click = " + event.ctrlKey);
161 if (!selectList || selectList.length!=size)
163 MultiSelectBox.mySelects_[id] = [];
164 MultiSelectBox.lastOptSelect_[id] = -1;
165 selectList=MultiSelectBox.mySelects_[id];
166 for (var opt=0; opt<size; opt++)
171 MultiSelectBox.toggleClass(option,
"optionhighlighted");
172 selectList[index] ^= 1;
175 (MultiSelectBox.requireCtrlMultiClick_[
id] && !event.ctrlKey && !event.shiftKey))
176 for (var opt=0; opt<size; opt++)
179 var cindex = select.childNodes[opt].id.split(
"_");
180 cindex = cindex[cindex.length-1];
182 if(cindex == index)
continue;
183 else if(selectList[cindex] == 1)
185 MultiSelectBox.toggleClass(select.childNodes[opt],
"optionhighlighted");
186 selectList[cindex] = 0;
189 else if(event.shiftKey &&
190 MultiSelectBox.lastOptSelect_[
id] != -1)
197 var lo = MultiSelectBox.lastOptSelect_[id] < index?
198 MultiSelectBox.lastOptSelect_[id]:index;
199 var hi = MultiSelectBox.lastOptSelect_[id] < index?
200 index:MultiSelectBox.lastOptSelect_[id];
204 for (var opt=lo; opt<=hi; opt++)
208 if(selectList[opt] !=
209 selectList[MultiSelectBox.lastOptSelect_[
id]])
213 MultiSelectBox.toggleClass(select.childNodes[opt],
"optionhighlighted");
214 selectList[opt] ^= 1;
219 MultiSelectBox.dbg(selectList);
220 selected = selectList;
221 MultiSelectBox.lastOptSelect_[id] = index;
230 MultiSelectBox.createSelectBox =
function(el,name,title,vals,keys,types,
231 handler,noMultiSelect,mouseOverHandler,iconURLs,mouseDownHandler,
233 requireCtrlMultiClick,titles)
236 { MultiSelectBox.dbg(
"Invalid Element given to MultiSelectBox: " + el);
237 throw new Error(
"Invalid Element given to MultiSelectBox: " + el);
return; }
241 name =
"selbox-" + name;
242 MultiSelectBox.addClass(el,
"multiselectbox");
244 MultiSelectBox.omnis_[name] = el;
245 MultiSelectBox.isSingleSelect_[name] = noMultiSelect;
246 MultiSelectBox.lastOptSelect_[name] = -1;
247 MultiSelectBox.selInitBoxHeight_[name] = 0;
248 MultiSelectBox.requireCtrlMultiClick_[name] = requireCtrlMultiClick;
251 var msW = (!el.offsetWidth?el.style.width.split(
'p')[0]:el.offsetWidth) - 28 - 5 - 16 - 2;
252 var msH = (!el.offsetHeight?el.style.height.split(
'p')[0]:el.offsetHeight) - 40 - 2;
254 el = document.createElement(
"div");
255 MultiSelectBox.omnis_[name].appendChild(el);
261 str +=
"<div id='" + name +
"header' " +
262 "style='margin-top:20px;width:100%'><b>"
267 if(!keys) keys = vals;
268 if(!types) types = vals;
271 str +=
"<table cellpadding='0' cellspacing='0'>";
273 str +=
"<div class='mySelect' unselectable='on' id='" +
274 name +
"' style='float:left;" +
275 "width: " + (msW) +
"px;" +
276 "height: " + (msH) +
"px;" +
277 "' name='" + name +
"' " +
280 for (var i = 0; i < keys.length;++i)
282 str +=
"<div class='myOption' " +
283 "id='" + name +
"-option_" + i +
"' " +
284 "onclick='MultiSelectBox.myOptionSelect(this, " + i +
"," +
285 noMultiSelect +
", event); ";
286 if(handler && (typeof handler) ==
"string")
287 str += handler +
"(this,event);";
289 str += handler.name +
"(this,event);";
292 str +=
"onmouseover='";
293 if(mouseOverHandler && (typeof mouseOverHandler) ==
"string")
294 str += mouseOverHandler +
"(this,event);";
295 else if(mouseOverHandler)
296 str += mouseOverHandler.name +
"(this,event);";
299 str +=
"onmousedown='";
300 if(mouseDownHandler && (typeof mouseDownHandler) ==
"string")
301 str += mouseDownHandler +
"(this,event);";
302 else if(mouseDownHandler)
303 str += mouseDownHandler.name +
"(this,event);";
306 str +=
"onmouseup='";
307 if(mouseUpHandler && (typeof mouseUpHandler) ==
"string")
308 str += mouseUpHandler +
"(this,event);";
309 else if(mouseUpHandler)
310 str += mouseUpHandler.name +
"(this,event);";
314 str +=
"title='" + titles[i] +
"' ";
316 str +=
"key-value='" + keys[i] +
"' type-value='" +
318 if(iconURLs && iconURLs[i])
320 if(iconURLs[i][0] !=
'=')
321 str +=
"<img style='width:32px; height:32px; margin: 0px 5px -8px 0;' " +
323 iconURLs[i] +
"' />";
325 str += iconURLs[i].substr(1) +
" - ";
334 str +=
"</td><td valign='top'>";
336 str += MultiSelectBox.makeSearchBar(name);
337 str +=
"</td></table>";
342 var el = document.getElementById(name);
344 el.style.width = 200 +
"px";
350 MultiSelectBox.initMySelectBoxes =
function(clearPreviousSelections)
352 var divs=document.getElementsByClassName(
'mySelect');
353 for (var el=0; el<divs.length; el++){
354 var select = divs[el];
356 var
id = select.getAttribute(
"id");
357 var options = select.childNodes;
358 MultiSelectBox.lastOptSelect_[id] = -1;
359 if (!MultiSelectBox.mySelects_[
id] ||
360 MultiSelectBox.mySelects_[
id].length > options.length)
362 MultiSelectBox.mySelects_[id]=[];
363 for (var opt=0; opt<options.length; opt++)
365 MultiSelectBox.mySelects_[id].push(0);
366 options[opt].setAttribute(
"unselectable",
"on");
371 MultiSelectBox.dbg(
"repaint");
374 for (var opt=MultiSelectBox.mySelects_[
id].length; opt<options.length; opt++)
376 MultiSelectBox.mySelects_[id].push(0);
377 options[opt].setAttribute(
"unselectable",
"on");
381 for (var opt=0; opt < options.length; opt++)
383 if (clearPreviousSelections)
384 MultiSelectBox.mySelects_[id][opt] = 0;
386 if (MultiSelectBox.mySelects_[
id][opt])
389 MultiSelectBox.addClass(options[opt],
"optionhighlighted");
392 MultiSelectBox.removeClass(options[opt],
"optionhighlighted");
399 MultiSelectBox.showSearch =
function(boxid)
401 var searchBox=$(boxid+
"search");
403 function localPlaceSearchBox()
414 var selRect = $(boxid).getBoundingClientRect();
415 var searchOffsetParent = searchBox.parentElement.children[0].children[1].offsetParent;
418 var searchOffsetParentIsBody = searchOffsetParent == document.body;
421 {
"left": searchOffsetParentIsBody?0:
422 searchOffsetParent.getBoundingClientRect().left,
423 "top": searchOffsetParentIsBody?0:
424 searchOffsetParent.getBoundingClientRect().top
430 var offsetx = selRect.left - offsetRect.left,
431 offsety = selRect.top - offsetRect.top;
434 searchBox.style.position=
"absolute";
435 searchBox.style.top=(offsety)+
"px";
436 searchBox.style.left=(offsetx)+
"px";
437 searchBox.style.width=(selRect.width-margin*2-30)+
"px";
441 if(!MultiSelectBox.selInitBoxHeight_[boxid])
443 MultiSelectBox.selInitBoxHeight_[boxid] = $(boxid).clientHeight;
445 localPlaceSearchBox();
452 $(boxid+
"searchErr").innerHTML =
"";
454 if (MultiSelectBox.toggleClass(searchBox,
"hidden")){
455 $(boxid).style.height = (MultiSelectBox.selInitBoxHeight_[boxid]-47) +
"px";
456 $(boxid).style.paddingTop =
"42px";
460 MultiSelectBox.searchSelect(boxid,searchBox);
463 MultiSelectBox.searchSelect(boxid,null,
'');
464 $(boxid).style.paddingTop = MultiSelectBox.SEL_INIT_PADDING +
"px";
465 $(boxid).style.height = (MultiSelectBox.selInitBoxHeight_[boxid]-10) +
"px";
470 MultiSelectBox.searchTimeout_ = null;
472 MultiSelectBox.searchSelect =
function(id,el,altstr)
475 if (MultiSelectBox.searchTimeout_){
476 clearTimeout(MultiSelectBox.searchTimeout_);
478 MultiSelectBox.searchTimeout_ = setTimeout(
function(){ MultiSelectBox.performSearchSelect(
id,el,altstr); }, 100);
481 MultiSelectBox.performSearchSelect =
function(id,el,altstr)
484 if (altstr !== undefined){
488 searchstr = el.value;
490 MultiSelectBox.searchTimeout_ = null;
491 var select = $(id).childNodes;
493 MultiSelectBox.dbg(
"END OF TIMEOUT FOR : "+searchstr);
496 $(
id+
"searchErr").innerHTML =
"";
498 re =
new RegExp(searchstr,
'i');
501 $(
id+
"searchErr").innerHTML = err.message +
502 " <a href='https://regex101.com/' target='_blank'>(help)</a>";
506 for (var opt=0; opt < select.length; opt++)
508 var option = select[opt];
512 if (option.tagName ==
'INPUT') {
continue; }
513 var html = option.innerHTML;
518 if (MultiSelectBox.hasClass(option,
"hidden"))
519 MultiSelectBox.removeClass(option,
"hidden");
521 option.innerHTML = html = html.replace(
"<b><u>",
"").replace(
"</u></b>",
"");
523 if(searchstr ==
"")
continue;
525 var text = option.textContent;
526 var endOfImgIndex = html.indexOf(
">");
527 var index = text.search(re);
528 var matchedText = (text.match(re) || [[]])[0];
529 var len = matchedText.length;
531 index = html.indexOf(matchedText,endOfImgIndex);
534 MultiSelectBox.addClass(option,
"hidden");
536 option.innerHTML = html.slice(0,index) +
"<b><u>" +
537 html.slice(index,index+len) +
538 "</u></b>" + html.slice(index+len);
542 MultiSelectBox.makeSearchBar =
function(id)
544 var searchBox=document.createElement(
"input");
545 var onchange=
'MultiSelectBox.searchSelect("' +
id +
'",this)';
547 searchBox.setAttribute(
"class",
"hidden");
548 searchBox.setAttribute(
'type',
'text');
549 searchBox.setAttribute(
'id',
id +
"search");
550 searchBox.setAttribute(
"onpaste" , onchange);
551 searchBox.setAttribute(
"oncut" , onchange);
552 searchBox.setAttribute(
"onkeydown" , onchange);
553 searchBox.setAttribute(
"onkeyup" , onchange);
554 searchBox.setAttribute(
"onkeypress", onchange);
555 searchBox.setAttribute(
"onselect" , onchange);
558 var searchErrBox=document.createElement(
"div");
560 searchErrBox.setAttribute(
"class",
"hidden");
561 searchErrBox.setAttribute(
'id',
id +
"searchErr");
562 searchErrBox.style.color=
"red";
563 searchErrBox.style.overflow=
"hidden";
564 searchErrBox.style.height=
"23px";
567 function addSearchBox()
572 if(!MultiSelectBox.mySelects_[
id])
573 MultiSelectBox.mySelects_[id] = [];
582 MultiSelectBox.omnis_[id].appendChild(searchBox);
583 MultiSelectBox.omnis_[id].appendChild(searchErrBox);
586 clearInterval(interval);
590 interval = setInterval( addSearchBox, 50);
592 imgstr =
"<img src='/WebPath/images/windowContentImages/multiselectbox-magnifying-glass.jpg' " +
593 " style='float:left' height='28' width='28' alt='🔍' ";
594 imgstr +=
"onclick = 'MultiSelectBox.showSearch(\"" +
id +
"\");' title='Search' class='searchimg'>";