67 var MultiSelectBox = MultiSelectBox || {};
69 if(window.console && console && console.log)
70 MultiSelectBox.dbg = console.log.bind(window.console);
73 function $(id) {
return document.getElementById(
id);}
78 MultiSelectBox.mySelects_ = {};
79 MultiSelectBox.omnis_ = {};
80 MultiSelectBox.isSingleSelect_ = {};
81 MultiSelectBox.lastOptSelect_ = {};
83 MultiSelectBox.selInitBoxHeight_ = {};
84 MultiSelectBox.SEL_INIT_PADDING = 5;
86 MultiSelectBox.requireCtrlMultiClick_ = {};
91 MultiSelectBox.hasClass =
function(ele,cls)
93 return !!ele.className.match(
new RegExp(
'(\\s|^)'+cls+
'(\\s|$)'));
96 MultiSelectBox.addClass =
function(ele,cls)
98 if (!MultiSelectBox.hasClass(ele,cls)) ele.className +=
" "+cls;
101 MultiSelectBox.removeClass =
function(ele,cls)
103 if (MultiSelectBox.hasClass(ele,cls))
105 var reg =
new RegExp(
'(\\s|^)'+cls+
'(\\s|$)');
106 ele.className=ele.className.replace(reg,
'');
110 MultiSelectBox.toggleClass =
function(ele,cls)
113 if (MultiSelectBox.hasClass(ele,cls))
115 var reg =
new RegExp(
'(\\s|^)'+cls+
'(\\s|$)');
116 ele.className=ele.className.replace(reg,
'');
121 ele.className +=
" " + cls;
126 MultiSelectBox.getSelectedIndex =
function(el)
130 var selects = MultiSelectBox.mySelects_[el.getElementsByClassName(
"mySelect")[0].id];
131 for(var i=0;i<selects.length;++i)
132 if(selects[i])
return i;
137 var splits = el.id.split(
'_');
138 return splits[splits.length-1] | 0;
141 MultiSelectBox.getSelectionArray =
function(el)
144 if(el.parentElement.id.indexOf(
"selbox-") == 0)
145 return MultiSelectBox.mySelects_[el.parentElement.id];
147 return MultiSelectBox.mySelects_[el.getElementsByClassName(
"mySelect")[0].id];
150 MultiSelectBox.getSelectionElementByIndex =
function(el,i)
152 if(el.parentElement.id.indexOf(
"selbox-") == 0)
153 return document.getElementById(el.parentElement.parentElement.
154 getElementsByClassName(
"mySelect")[0].
id +
157 return document.getElementById(el.getElementsByClassName(
"mySelect")[0].id +
161 MultiSelectBox.setSelectionElementByIndex =
function(el,i,selected)
163 var name = el.getElementsByClassName(
"mySelect")[0].id;
164 if(MultiSelectBox.isSingleSelect_[name] &&
167 var size = MultiSelectBox.mySelects_[name].length;
168 for (var opt=0; opt<size; opt++)
169 MultiSelectBox.mySelects_[name][opt] = 0;
171 MultiSelectBox.mySelects_[name][i] = selected?1:0;
175 MultiSelectBox.myOptionSelect =
function(option, index, isSingleSelect, event)
177 var select = option.parentElement;
178 var
id = select.getAttribute(
"id");
179 var selectList = MultiSelectBox.mySelects_[id];
180 var size = select.childNodes.length;
183 MultiSelectBox.dbg(
"Shift click = " + event.shiftKey);
186 MultiSelectBox.dbg(
"Control click = " + event.ctrlKey);
194 if (!selectList || selectList.length!=size)
196 MultiSelectBox.mySelects_[id] = [];
197 MultiSelectBox.lastOptSelect_[id] = -1;
198 selectList=MultiSelectBox.mySelects_[id];
199 for (var opt=0; opt<size; opt++)
204 MultiSelectBox.toggleClass(option,
"optionhighlighted");
205 selectList[index] ^= 1;
208 (MultiSelectBox.requireCtrlMultiClick_[
id] && !event.ctrlKey && !event.shiftKey))
209 for (var opt=0; opt<size; opt++)
212 var cindex = select.childNodes[opt].id.split(
"_");
213 cindex = cindex[cindex.length-1];
215 if(cindex == index)
continue;
216 else if(selectList[cindex] == 1)
218 MultiSelectBox.toggleClass(select.childNodes[opt],
"optionhighlighted");
219 selectList[cindex] = 0;
222 else if(event.shiftKey &&
223 MultiSelectBox.lastOptSelect_[
id] != -1)
230 var lo = MultiSelectBox.lastOptSelect_[id] < index?
231 MultiSelectBox.lastOptSelect_[id]:index;
232 var hi = MultiSelectBox.lastOptSelect_[id] < index?
233 index:MultiSelectBox.lastOptSelect_[id];
237 for (var opt=lo; opt<=hi; opt++)
241 if(selectList[opt] !=
242 selectList[MultiSelectBox.lastOptSelect_[
id]])
246 MultiSelectBox.toggleClass(select.childNodes[opt],
"optionhighlighted");
247 selectList[opt] ^= 1;
252 MultiSelectBox.dbg(selectList);
253 selected = selectList;
254 MultiSelectBox.lastOptSelect_[id] = index;
263 MultiSelectBox.createSelectBox =
function(el,name,title,vals,keys,types,
264 handler,noMultiSelect,mouseOverHandler,iconURLs,mouseDownHandler,
266 requireCtrlMultiClick,titles)
269 { MultiSelectBox.dbg(
"Invalid Element given to MultiSelectBox: " + el);
270 throw new Error(
"Invalid Element given to MultiSelectBox: " + el);
return; }
274 name =
"selbox-" + name;
275 MultiSelectBox.addClass(el,
"multiselectbox");
277 MultiSelectBox.omnis_[name] = el;
278 MultiSelectBox.isSingleSelect_[name] = noMultiSelect;
279 MultiSelectBox.lastOptSelect_[name] = -1;
280 MultiSelectBox.selInitBoxHeight_[name] = 0;
281 MultiSelectBox.requireCtrlMultiClick_[name] = requireCtrlMultiClick;
284 var msW = (!el.offsetWidth?el.style.width.split(
'p')[0]:el.offsetWidth) - 28 - 5 - 16 - 2;
285 var msH = (!el.offsetHeight?el.style.height.split(
'p')[0]:el.offsetHeight) - 40 - 2;
287 el = document.createElement(
"div");
288 MultiSelectBox.omnis_[name].appendChild(el);
294 str +=
"<div id='" + name +
"header' " +
295 "style='margin-top:20px;width:100%;white-space:nowrap'><b>"
300 if(!keys) keys = vals;
301 if(!types) types = vals;
304 str +=
"<table cellpadding='0' cellspacing='0'>";
306 str +=
"<div class='mySelect' unselectable='on' id='" +
307 name +
"' style='float:left;" +
308 "width: " + (msW) +
"px;" +
309 "height: " + (msH) +
"px;" +
310 "' name='" + name +
"' " +
313 for (var i = 0; i < keys.length;++i)
315 str +=
"<div class='myOption' " +
316 "id='" + name +
"-option_" + i +
"' " +
317 "onclick='MultiSelectBox.myOptionSelect(this, " + i +
"," +
318 noMultiSelect +
", event); ";
319 if(handler && (typeof handler) ==
"string")
320 str += handler +
"(this,event);";
322 str += handler.name +
"(this,event);";
325 str +=
"onmouseover='";
326 if(mouseOverHandler && (typeof mouseOverHandler) ==
"string")
327 str += mouseOverHandler +
"(this,event);";
328 else if(mouseOverHandler)
329 str += mouseOverHandler.name +
"(this,event);";
332 str +=
"onmousedown='";
333 if(mouseDownHandler && (typeof mouseDownHandler) ==
"string")
334 str += mouseDownHandler +
"(this,event);";
335 else if(mouseDownHandler)
336 str += mouseDownHandler.name +
"(this,event);";
339 str +=
"onmouseup='";
340 if(mouseUpHandler && (typeof mouseUpHandler) ==
"string")
341 str += mouseUpHandler +
"(this,event);";
342 else if(mouseUpHandler)
343 str += mouseUpHandler.name +
"(this,event);";
347 str +=
"title='" + titles[i] +
"' ";
349 str +=
"key-value='" + keys[i] +
"' type-value='" +
351 if(iconURLs && iconURLs[i])
353 if(iconURLs[i][0] !=
'=')
354 str +=
"<img style='width:32px; height:32px; margin: 0px 5px -8px 0;' " +
356 iconURLs[i] +
"' />";
358 str += iconURLs[i].substr(1) +
" - ";
367 str +=
"</td><td valign='top'>";
369 str += MultiSelectBox.makeSearchBar(name);
370 str +=
"</td></table>";
375 var el = document.getElementById(name);
377 el.style.width = 200 +
"px";
383 MultiSelectBox.initMySelectBoxes =
function(clearPreviousSelections)
385 var divs=document.getElementsByClassName(
'mySelect');
386 for (var el=0; el<divs.length; el++){
387 var select = divs[el];
389 var
id = select.getAttribute(
"id");
390 var options = select.childNodes;
391 MultiSelectBox.lastOptSelect_[id] = -1;
392 if (!MultiSelectBox.mySelects_[
id] ||
393 MultiSelectBox.mySelects_[
id].length > options.length)
395 MultiSelectBox.mySelects_[id]=[];
396 for (var opt=0; opt<options.length; opt++)
398 MultiSelectBox.mySelects_[id].push(0);
399 options[opt].setAttribute(
"unselectable",
"on");
404 MultiSelectBox.dbg(
"repaint");
407 for (var opt=MultiSelectBox.mySelects_[
id].length; opt<options.length; opt++)
409 MultiSelectBox.mySelects_[id].push(0);
410 options[opt].setAttribute(
"unselectable",
"on");
414 for (var opt=0; opt < options.length; opt++)
416 if (clearPreviousSelections)
417 MultiSelectBox.mySelects_[id][opt] = 0;
419 if (MultiSelectBox.mySelects_[
id][opt])
422 MultiSelectBox.addClass(options[opt],
"optionhighlighted");
423 options[opt].scrollIntoView();
426 MultiSelectBox.removeClass(options[opt],
"optionhighlighted");
433 MultiSelectBox.showSearch =
function(boxid)
435 var searchBox=$(boxid+
"search");
437 function localPlaceSearchBox()
448 var selRect = $(boxid).getBoundingClientRect();
449 var searchOffsetParent = searchBox.parentElement.children[0].children[1].offsetParent;
452 var searchOffsetParentIsBody = searchOffsetParent == document.body;
455 {
"left": searchOffsetParentIsBody?0:
456 searchOffsetParent.getBoundingClientRect().left,
457 "top": searchOffsetParentIsBody?0:
458 searchOffsetParent.getBoundingClientRect().top
464 var offsetx = selRect.left - offsetRect.left,
465 offsety = selRect.top - offsetRect.top;
468 searchBox.style.position=
"absolute";
469 searchBox.style.top=(offsety)+
"px";
470 searchBox.style.left=(offsetx)+
"px";
471 searchBox.style.width=(selRect.width-margin*2-30)+
"px";
475 if(!MultiSelectBox.selInitBoxHeight_[boxid])
477 MultiSelectBox.selInitBoxHeight_[boxid] = $(boxid).clientHeight;
479 localPlaceSearchBox();
486 $(boxid+
"searchErr").innerHTML =
"";
488 if (MultiSelectBox.toggleClass(searchBox,
"hidden")){
489 $(boxid).style.height = (MultiSelectBox.selInitBoxHeight_[boxid]-47) +
"px";
490 $(boxid).style.paddingTop =
"42px";
494 MultiSelectBox.searchSelect(boxid,searchBox);
497 MultiSelectBox.searchSelect(boxid,null,
'');
498 $(boxid).style.paddingTop = MultiSelectBox.SEL_INIT_PADDING +
"px";
499 $(boxid).style.height = (MultiSelectBox.selInitBoxHeight_[boxid]-10) +
"px";
504 MultiSelectBox.searchTimeout_ = null;
506 MultiSelectBox.searchSelect =
function(id,el,altstr)
509 if (MultiSelectBox.searchTimeout_){
510 clearTimeout(MultiSelectBox.searchTimeout_);
512 MultiSelectBox.searchTimeout_ = setTimeout(
function(){ MultiSelectBox.performSearchSelect(
id,el,altstr); }, 100);
515 MultiSelectBox.performSearchSelect =
function(id,el,altstr)
518 if (altstr !== undefined){
522 searchstr = el.value;
524 MultiSelectBox.searchTimeout_ = null;
525 var select = $(id).childNodes;
527 MultiSelectBox.dbg(
"END OF TIMEOUT FOR : "+searchstr);
530 $(
id+
"searchErr").innerHTML =
"";
532 re =
new RegExp(searchstr,
'i');
535 $(
id+
"searchErr").innerHTML = err.message +
536 " <a href='https://regex101.com/' target='_blank'>(help)</a>";
540 for (var opt=0; opt < select.length; opt++)
542 var option = select[opt];
546 if (option.tagName ==
'INPUT') {
continue; }
547 var html = option.innerHTML;
552 if (MultiSelectBox.hasClass(option,
"hidden"))
553 MultiSelectBox.removeClass(option,
"hidden");
555 option.innerHTML = html = html.replace(
"<b><u>",
"").replace(
"</u></b>",
"");
557 if(searchstr ==
"")
continue;
559 var text = option.textContent;
560 var endOfImgIndex = html.indexOf(
">");
561 var index = text.search(re);
562 var matchedText = (text.match(re) || [[]])[0];
563 var len = matchedText.length;
565 index = html.indexOf(matchedText,endOfImgIndex);
568 MultiSelectBox.addClass(option,
"hidden");
570 option.innerHTML = html.slice(0,index) +
"<b><u>" +
571 html.slice(index,index+len) +
572 "</u></b>" + html.slice(index+len);
576 MultiSelectBox.makeSearchBar =
function(id)
578 var searchBox=document.createElement(
"input");
579 var onchange=
'MultiSelectBox.searchSelect("' +
id +
'",this)';
581 searchBox.setAttribute(
"class",
"hidden");
582 searchBox.setAttribute(
'type',
'text');
583 searchBox.setAttribute(
'id',
id +
"search");
584 searchBox.setAttribute(
"onpaste" , onchange);
585 searchBox.setAttribute(
"oncut" , onchange);
586 searchBox.setAttribute(
"onkeydown" , onchange);
587 searchBox.setAttribute(
"onkeyup" , onchange);
588 searchBox.setAttribute(
"onkeypress", onchange);
589 searchBox.setAttribute(
"onselect" , onchange);
592 var searchErrBox=document.createElement(
"div");
594 searchErrBox.setAttribute(
"class",
"hidden");
595 searchErrBox.setAttribute(
'id',
id +
"searchErr");
596 searchErrBox.style.color=
"red";
597 searchErrBox.style.overflow=
"hidden";
598 searchErrBox.style.height=
"23px";
601 function addSearchBox()
606 if(!MultiSelectBox.mySelects_[
id])
607 MultiSelectBox.mySelects_[id] = [];
616 MultiSelectBox.omnis_[id].appendChild(searchBox);
617 MultiSelectBox.omnis_[id].appendChild(searchErrBox);
620 clearInterval(interval);
624 interval = setInterval( addSearchBox, 50);
626 imgstr =
"<img src='/WebPath/images/windowContentImages/multiselectbox-magnifying-glass.jpg' " +
627 " style='float:left' height='28' width='28' alt='🔍' ";
628 imgstr +=
"onclick = 'MultiSelectBox.showSearch(\"" +
id +
"\");' title='Search' class='searchimg'>";