00001
00002
00003
00004
00005
00006
00007
00008
00009
00010
00011
00012
00013
00014
00015
00016
00017
00018
00019
00020
00021
00022
00023
00024
00025
00026
00027
00028
00029
00030
00031
00032
00033
00034
00035
00036
00037
00038
00041
00042 var selected = [];
00043 var MultiSelectBox = MultiSelectBox || {};
00044
00045 if(window.console && console && console.log)
00046 MultiSelectBox.dbg = console.log.bind(window.console);
00047
00048
00049 function $(id) {return document.getElementById(id);}
00050
00052
00053
00054 MultiSelectBox.mySelects_ = {};
00055 MultiSelectBox.omnis_ = {};
00056 MultiSelectBox.isSingleSelect_ = {};
00057 MultiSelectBox.lastOptSelect_ = {};
00058
00059 MultiSelectBox.selInitBoxHeight_ = {};
00060 MultiSelectBox.SEL_INIT_PADDING = 5;
00061
00062 MultiSelectBox.requireCtrlMultiClick_ = {};
00063
00065
00066
00067 MultiSelectBox.hasClass = function(ele,cls)
00068 {
00069 return !!ele.className.match(new RegExp('(\\s|^)'+cls+'(\\s|$)'));
00070 }
00071
00072 MultiSelectBox.addClass = function(ele,cls)
00073 {
00074 if (!MultiSelectBox.hasClass(ele,cls)) ele.className += " "+cls;
00075 }
00076
00077 MultiSelectBox.removeClass = function(ele,cls)
00078 {
00079 if (MultiSelectBox.hasClass(ele,cls))
00080 {
00081 var reg = new RegExp('(\\s|^)'+cls+'(\\s|$)');
00082 ele.className=ele.className.replace(reg,'');
00083 }
00084 }
00085
00086 MultiSelectBox.toggleClass = function(ele,cls)
00087 {
00088
00089 if (MultiSelectBox.hasClass(ele,cls))
00090 {
00091 var reg = new RegExp('(\\s|^)'+cls+'(\\s|$)');
00092 ele.className=ele.className.replace(reg,'');
00093 return true;
00094 }
00095 else
00096 {
00097 ele.className += " "+cls;
00098 return false;
00099 }
00100 }
00101
00102 MultiSelectBox.getSelectedIndex = function(el)
00103 {
00104 var splits = el.id.split('_');
00105 return splits[splits.length-1] | 0;
00106 }
00107
00108 MultiSelectBox.getSelectionArray = function(el)
00109 {
00110
00111 if(el.parentElement.id.indexOf("selbox-") == 0)
00112 return MultiSelectBox.mySelects_[el.parentElement.id];
00113 else
00114 return MultiSelectBox.mySelects_[el.getElementsByClassName("mySelect")[0].id];
00115 }
00116
00117 MultiSelectBox.getSelectionElementByIndex = function(el,i)
00118 {
00119 if(el.parentElement.id.indexOf("selbox-") == 0)
00120 return document.getElementById(el.parentElement.parentElement.
00121 getElementsByClassName("mySelect")[0].id +
00122 "-option_" + i);
00123 else
00124 return document.getElementById(el.getElementsByClassName("mySelect")[0].id +
00125 "-option_" + i);
00126 }
00127
00128 MultiSelectBox.setSelectionElementByIndex = function(el,i,selected)
00129 {
00130 var name = el.getElementsByClassName("mySelect")[0].id;
00131 if(MultiSelectBox.isSingleSelect_[name] &&
00132 selected)
00133 {
00134 var size = MultiSelectBox.mySelects_[name].length;
00135 for (var opt=0; opt<size; opt++)
00136 MultiSelectBox.mySelects_[name][opt] = 0;
00137 }
00138 MultiSelectBox.mySelects_[name][i] = selected?1:0;
00139 }
00140
00141
00142 MultiSelectBox.myOptionSelect = function(option, index, isSingleSelect, event)
00143 {
00144 var select = option.parentElement;
00145 var id = select.getAttribute("id");
00146 var selectList = MultiSelectBox.mySelects_[id];
00147 var size = select.childNodes.length;
00148
00149 if(event)
00150 MultiSelectBox.dbg("Shift click = " + event.shiftKey);
00151
00152 if(event)
00153 MultiSelectBox.dbg("Control click = " + event.ctrlKey);
00154
00155
00156
00157
00158
00159
00160
00161 if (!selectList || selectList.length!=size)
00162 {
00163 MultiSelectBox.mySelects_[id] = [];
00164 MultiSelectBox.lastOptSelect_[id] = -1;
00165 selectList=MultiSelectBox.mySelects_[id];
00166 for (var opt=0; opt<size; opt++)
00167 selectList.push(0);
00168 }
00169
00170
00171 MultiSelectBox.toggleClass(option,"optionhighlighted");
00172 selectList[index] ^= 1;
00173
00174 if(isSingleSelect ||
00175 (MultiSelectBox.requireCtrlMultiClick_[id] && !event.ctrlKey && !event.shiftKey))
00176 for (var opt=0; opt<size; opt++)
00177 {
00178
00179 var cindex = select.childNodes[opt].id.split("_");
00180 cindex = cindex[cindex.length-1];
00181
00182 if(cindex == index) continue;
00183 else if(selectList[cindex] == 1)
00184 {
00185 MultiSelectBox.toggleClass(select.childNodes[opt],"optionhighlighted");
00186 selectList[cindex] = 0;
00187 }
00188 }
00189 else if(event.shiftKey &&
00190 MultiSelectBox.lastOptSelect_[id] != -1)
00191 {
00192
00193
00194
00195
00196
00197 var lo = MultiSelectBox.lastOptSelect_[id] < index?
00198 MultiSelectBox.lastOptSelect_[id]:index;
00199 var hi = MultiSelectBox.lastOptSelect_[id] < index?
00200 index:MultiSelectBox.lastOptSelect_[id];
00201
00202
00203
00204 for (var opt=lo; opt<=hi; opt++)
00205 {
00206
00207
00208 if(selectList[opt] !=
00209 selectList[MultiSelectBox.lastOptSelect_[id]])
00210 {
00211
00212
00213 MultiSelectBox.toggleClass(select.childNodes[opt],"optionhighlighted");
00214 selectList[opt] ^= 1;
00215 }
00216 }
00217 }
00218
00219 MultiSelectBox.dbg(selectList);
00220 selected = selectList;
00221 MultiSelectBox.lastOptSelect_[id] = index;
00222 }
00223
00224
00225
00226
00227
00228
00229
00230 MultiSelectBox.createSelectBox = function(el,name,title,vals,keys,types,
00231 handler,noMultiSelect,mouseOverHandler,iconURLs,mouseDownHandler,
00232 mouseUpHandler,
00233 requireCtrlMultiClick,titles)
00234 {
00235 if(!el)
00236 { MultiSelectBox.dbg("Invalid Element given to MultiSelectBox: " + el);
00237 throw new Error("Invalid Element given to MultiSelectBox: " + el); return; }
00238
00239 el.innerHTML = "";
00240
00241 name = "selbox-" + name;
00242 MultiSelectBox.addClass(el,"multiselectbox");
00243
00244 MultiSelectBox.omnis_[name] = el;
00245 MultiSelectBox.isSingleSelect_[name] = noMultiSelect;
00246 MultiSelectBox.lastOptSelect_[name] = -1;
00247 MultiSelectBox.selInitBoxHeight_[name] = 0;
00248 MultiSelectBox.requireCtrlMultiClick_[name] = requireCtrlMultiClick;
00249
00250
00251 var msW = (!el.offsetWidth?el.style.width.split('p')[0]:el.offsetWidth) - 28 - 5 - 16 - 2;
00252 var msH = (!el.offsetHeight?el.style.height.split('p')[0]:el.offsetHeight) - 40 - 2;
00253
00254 el = document.createElement("div");
00255 MultiSelectBox.omnis_[name].appendChild(el);
00256
00257 var str = "";
00258
00259 if(title)
00260 {
00261 str += "<div id='" + name + "header' " +
00262 "style='margin-top:20px;width:100%'><b>"
00263 str += title;
00264 str += "</b></div>";
00265 }
00266
00267 if(!keys) keys = vals;
00268 if(!types) types = vals;
00269
00270
00271 str += "<table cellpadding='0' cellspacing='0'>";
00272 str += "<tr><td>";
00273 str += "<div class='mySelect' unselectable='on' id='" +
00274 name + "' style='float:left;" +
00275 "width: " + (msW) + "px;" +
00276 "height: " + (msH) + "px;" +
00277 "' name='" + name + "' " +
00278 ">";
00279
00280 for (var i = 0; i < keys.length;++i)
00281 {
00282 str += "<div class='myOption' " +
00283 "id='" + name + "-option_" + i + "' " +
00284 "onclick='MultiSelectBox.myOptionSelect(this, " + i + "," +
00285 noMultiSelect + ", event); ";
00286 if(handler && (typeof handler) == "string")
00287 str += handler + "(this,event);";
00288 else if(handler)
00289 str += handler.name + "(this,event);";
00290 str += "' ";
00291
00292 str += "onmouseover='";
00293 if(mouseOverHandler && (typeof mouseOverHandler) == "string")
00294 str += mouseOverHandler + "(this,event);";
00295 else if(mouseOverHandler)
00296 str += mouseOverHandler.name + "(this,event);";
00297 str += "' ";
00298
00299 str += "onmousedown='";
00300 if(mouseDownHandler && (typeof mouseDownHandler) == "string")
00301 str += mouseDownHandler + "(this,event);";
00302 else if(mouseDownHandler)
00303 str += mouseDownHandler.name + "(this,event);";
00304 str += "' ";
00305
00306 str += "onmouseup='";
00307 if(mouseUpHandler && (typeof mouseUpHandler) == "string")
00308 str += mouseUpHandler + "(this,event);";
00309 else if(mouseUpHandler)
00310 str += mouseUpHandler.name + "(this,event);";
00311 str += "' ";
00312
00313 if(titles)
00314 str += "title='" + titles[i] + "' ";
00315
00316 str += "key-value='" + keys[i] + "' type-value='" +
00317 types[i] + "'>";
00318 if(iconURLs && iconURLs[i])
00319 {
00320 if(iconURLs[i][0] != '=')
00321 str += "<img style='width:32px; height:32px; margin: 0px 5px -8px 0;' " +
00322 "src='" +
00323 iconURLs[i] + "' />";
00324 else
00325 str += iconURLs[i].substr(1) + " - ";
00326 }
00327
00328 str += vals[i];
00329 str += "</div>";
00330 }
00331 str += "</div>";
00332
00333
00334 str += "</td><td valign='top'>";
00335
00336 str += MultiSelectBox.makeSearchBar(name);
00337 str += "</td></table>";
00338 el.innerHTML = str;
00339
00340 if(msH > 200)
00341 {
00342 var el = document.getElementById(name);
00343 if(msW < 200)
00344 el.style.width = 200 + "px";
00345 }
00346
00347 }
00348
00349
00350 MultiSelectBox.initMySelectBoxes = function(clearPreviousSelections)
00351 {
00352 var divs=document.getElementsByClassName('mySelect');
00353 for (var el=0; el<divs.length; el++){
00354 var select = divs[el];
00355
00356 var id = select.getAttribute("id");
00357 var options = select.childNodes;
00358 MultiSelectBox.lastOptSelect_[id] = -1;
00359 if (!MultiSelectBox.mySelects_[id] ||
00360 MultiSelectBox.mySelects_[id].length > options.length)
00361 {
00362 MultiSelectBox.mySelects_[id]=[];
00363 for (var opt=0; opt<options.length; opt++)
00364 {
00365 MultiSelectBox.mySelects_[id].push(0);
00366 options[opt].setAttribute("unselectable","on");
00367 }
00368 }
00369 else
00370 {
00371 MultiSelectBox.dbg("repaint");
00372
00373
00374 for (var opt=MultiSelectBox.mySelects_[id].length; opt<options.length; opt++)
00375 {
00376 MultiSelectBox.mySelects_[id].push(0);
00377 options[opt].setAttribute("unselectable","on");
00378 }
00379
00380
00381 for (var opt=0; opt < options.length; opt++)
00382 {
00383 if (clearPreviousSelections)
00384 MultiSelectBox.mySelects_[id][opt] = 0;
00385
00386 if (MultiSelectBox.mySelects_[id][opt])
00387 {
00388
00389 MultiSelectBox.addClass(options[opt],"optionhighlighted");
00390 }
00391 else
00392 MultiSelectBox.removeClass(options[opt],"optionhighlighted");
00393 }
00394 }
00395 }
00396 }
00397
00398
00399 MultiSelectBox.showSearch = function(boxid)
00400 {
00401 var searchBox=$(boxid+"search");
00402
00403 function localPlaceSearchBox()
00404 {
00405
00406
00407
00408
00409
00410
00411
00412
00413
00414 var selRect = $(boxid).getBoundingClientRect();
00415 var searchOffsetParent = searchBox.parentElement.children[0].children[1].offsetParent;
00416
00417
00418 var searchOffsetParentIsBody = searchOffsetParent == document.body;
00419
00420 var offsetRect =
00421 {"left": searchOffsetParentIsBody?0:
00422 searchOffsetParent.getBoundingClientRect().left,
00423 "top": searchOffsetParentIsBody?0:
00424 searchOffsetParent.getBoundingClientRect().top
00425 };
00426
00427
00428
00429
00430 var offsetx = selRect.left - offsetRect.left,
00431 offsety = selRect.top - offsetRect.top;
00432 var margin = 5;
00433
00434 searchBox.style.position="absolute";
00435 searchBox.style.top=(offsety)+"px";
00436 searchBox.style.left=(offsetx)+"px";
00437 searchBox.style.width=(selRect.width-margin*2-30)+"px";
00438
00439 }
00440
00441 if(!MultiSelectBox.selInitBoxHeight_[boxid])
00442 {
00443 MultiSelectBox.selInitBoxHeight_[boxid] = $(boxid).clientHeight;
00444
00445 localPlaceSearchBox();
00446 }
00447
00448
00449
00450
00451
00452 $(boxid+"searchErr").innerHTML = "";
00453
00454 if (MultiSelectBox.toggleClass(searchBox,"hidden")){
00455 $(boxid).style.height = (MultiSelectBox.selInitBoxHeight_[boxid]-47) + "px";
00456 $(boxid).style.paddingTop = "42px";
00457
00458
00459 searchBox.focus();
00460 MultiSelectBox.searchSelect(boxid,searchBox);
00461 }
00462 else{
00463 MultiSelectBox.searchSelect(boxid,null, '');
00464 $(boxid).style.paddingTop = MultiSelectBox.SEL_INIT_PADDING + "px";
00465 $(boxid).style.height = (MultiSelectBox.selInitBoxHeight_[boxid]-10) + "px";
00466
00467 }
00468 }
00469
00470 MultiSelectBox.searchTimeout_ = null;
00471
00472 MultiSelectBox.searchSelect = function(id,el,altstr)
00473 {
00474
00475 if (MultiSelectBox.searchTimeout_){
00476 clearTimeout(MultiSelectBox.searchTimeout_);
00477 }
00478 MultiSelectBox.searchTimeout_ = setTimeout(function(){ MultiSelectBox.performSearchSelect(id,el,altstr); }, 100);
00479 }
00480
00481 MultiSelectBox.performSearchSelect = function(id,el,altstr)
00482 {
00483 var searchstr;
00484 if (altstr !== undefined){
00485 searchstr = altstr;
00486 }
00487 else{
00488 searchstr = el.value;
00489 }
00490 MultiSelectBox.searchTimeout_ = null;
00491 var select = $(id).childNodes;
00492
00493 MultiSelectBox.dbg("END OF TIMEOUT FOR : "+searchstr);
00494
00495 var re;
00496 $(id+"searchErr").innerHTML = "";
00497 try {
00498 re = new RegExp(searchstr,'i');
00499 }
00500 catch(err) {
00501 $(id+"searchErr").innerHTML = err.message +
00502 " <a href='https://regex101.com/' target='_blank'>(help)</a>";
00503 re = "";
00504 }
00505
00506 for (var opt=0; opt < select.length; opt++)
00507 {
00508 var option = select[opt];
00509
00510
00511
00512 if (option.tagName == 'INPUT') { continue; }
00513 var html = option.innerHTML;
00514
00515
00516
00517
00518 if (MultiSelectBox.hasClass(option,"hidden"))
00519 MultiSelectBox.removeClass(option,"hidden");
00520 else
00521 option.innerHTML = html = html.replace("<b><u>","").replace("</u></b>","");
00522
00523 if(searchstr == "") continue;
00524
00525 var text = option.textContent;
00526 var endOfImgIndex = html.indexOf(">");
00527 var index = text.search(re);
00528 var matchedText = (text.match(re) || [[]])[0];
00529 var len = matchedText.length;
00530
00531 index = html.indexOf(matchedText,endOfImgIndex);
00532
00533 if(!len)
00534 MultiSelectBox.addClass(option,"hidden");
00535 else if(index != -1)
00536 option.innerHTML = html.slice(0,index) + "<b><u>" +
00537 html.slice(index,index+len) +
00538 "</u></b>" + html.slice(index+len);
00539 }
00540 }
00541
00542 MultiSelectBox.makeSearchBar = function(id)
00543 {
00544 var searchBox=document.createElement("input");
00545 var onchange='MultiSelectBox.searchSelect("' + id + '",this)';
00546
00547 searchBox.setAttribute( "class","hidden");
00548 searchBox.setAttribute( 'type','text');
00549 searchBox.setAttribute( 'id',id + "search");
00550 searchBox.setAttribute( "onpaste" , onchange);
00551 searchBox.setAttribute( "oncut" , onchange);
00552 searchBox.setAttribute( "onkeydown" , onchange);
00553 searchBox.setAttribute( "onkeyup" , onchange);
00554 searchBox.setAttribute( "onkeypress", onchange);
00555 searchBox.setAttribute( "onselect" , onchange);
00556
00557
00558 var searchErrBox=document.createElement("div");
00559
00560 searchErrBox.setAttribute( "class","hidden");
00561 searchErrBox.setAttribute( 'id',id + "searchErr");
00562 searchErrBox.style.color="red";
00563 searchErrBox.style.overflow="hidden";
00564 searchErrBox.style.height="23px";
00565
00566 var interval;
00567 function addSearchBox()
00568 {
00569 var select=$(id);
00570 if (select)
00571 {
00572 if(!MultiSelectBox.mySelects_[id])
00573 MultiSelectBox.mySelects_[id] = [];
00574
00575
00576
00577
00578
00579
00580
00581
00582 MultiSelectBox.omnis_[id].appendChild(searchBox);
00583 MultiSelectBox.omnis_[id].appendChild(searchErrBox);
00584
00585
00586 clearInterval(interval);
00587 }
00588 }
00589
00590 interval = setInterval( addSearchBox, 50);
00591
00592 imgstr = "<img src='/WebPath/images/windowContentImages/multiselectbox-magnifying-glass.jpg' " +
00593 " style='float:left' height='28' width='28' alt='🔍' ";
00594 imgstr += "onclick = 'MultiSelectBox.showSearch(\"" + id + "\");' title='Search' class='searchimg'>";
00595 return imgstr;
00596 }
00597
00598
00599