https://www.wurthindustry.com/media/system/library/custom/wuerth_select.js

1/*
2* @copyright Copyright 2010 Adolf Würth GmbH & Co. KG
3* @link  http://www.wuerth.de
4* @version  0.2
5* @lastmodified    2013-09-06
6*/
7
8/*BUGFIX onmouseover, onmouseout with child elements*/
9function containsDOM (container, containee) {
10  var isParent = false;
11  do {
12    if ((isParent = container == containee))
13      break;
14    containee = containee.parentNode;
15  }
16  while (containee != null);
17  return isParent;
18}
19
20function checkMouseEnter (element, evt) {
21  if (element.contains && evt.fromElement) {
22    return !element.contains(evt.fromElement);
23  }
24  else if (evt.relatedTarget) {
25    return !containsDOM(element, evt.relatedTarget);
26  }
27}
28
29function checkMouseLeave (element, evt) {
30  if (element.contains && evt.toElement) {
31    return !element.contains(evt.toElement);
32  }
33  else if (evt.relatedTarget) {
34    return !containsDOM(element, evt.relatedTarget);
35  }
36}
37/*END BUGFIX onmouseover, onmouseout with child elements*/
38
39/*
40* replace search select by fake select for having more opportunities
41* in styling the select.
42* call it like this: <body onload="prepareSearchSelect();" onclick="hideFakeSelect(event);">
43* and fill in the needed IDs...to avoid DOM flickering some CSS things need
44* to be done
45*/
46//avoid DOM flickering => see CSS
47document.documentElement.className += ' js';
48
49//START functions to handle keyboard actions
50function onFakeSelectKeypress2(event,obj){
51  //CONFIG
52  //real select
53  var mySelect = document.getElementById(obj.selectId);
54  //area for the fake select
55  var myReplace = document.getElementById(obj.replaceId);
56   //show text of fake selection
57  var myCurrent = document.getElementById(obj.currentTextId);
58  //fake selection options
59  var myOptions = document.getElementById(obj.fakeOptionsId);
60
61  if(mySelect != null && myReplace != null && myCurrent != null && myOptions != null){
62    //just the active one
63    if(myOptions.style.display == 'block'){
64      switch(event.keyCode){
65        case Event.KEY_UP:
66          setIndexOfSelectedFakeOption(myOptions, getIndexOfSelectedFakeOption(myOptions, obj.bconover, obj.bconout), 'up', obj.bconover, obj.bconout, obj.attr, obj.attrNoAction);
67          if(event.preventDefault) event.preventDefault(); else return false;
68          return;
69        case Event.KEY_DOWN:
70          setIndexOfSelectedFakeOption(myOptions, getIndexOfSelectedFakeOption(myOptions, obj.bconover, obj.bconout), 'down', obj.bconover, obj.bconout, obj.attr, obj.attrNoAction);
71          if(event.preventDefault) event.preventDefault(); else return false;
72          return;
73        case Event.KEY_ESC:
74          myOptions.style.display = 'none';
75          return;
76        case Event.KEY_RETURN:
77          var tmpDecider = getInfoFromSelectedFakeOption(myOptions, obj.attr, 'rel', obj.bconover, obj.bconout, obj.maxLength);
78          if(tmpDecider != obj.attrNoAction){
79            mySelect.value = getInfoFromSelectedFakeOption(myOptions, obj.attr, 'rel', obj.bconover, obj.bconout, obj.maxLength);
80            setSearchArea2(mySelect.value, obj.selectId);
81            //update the current text with the text of the fake select
82            myCurrent.innerHTML = getInfoFromSelectedFakeOption(myOptions, obj.attr, 'html', obj.bconover, obj.bconout, obj.maxLength);
83            myOptions.style.display = 'none';
84            afterUpdateFakeSelect(obj.functionCall, obj.functionParams);
85          }
86          return false;
87      }
88    }
89  }
90  return;
91}
92function getInfoFromSelectedFakeOption(optionElement, attr, type, bconover, bconout, maxLength){
93   var myOptions = optionElement;
94   var liArray = myOptions.getElementsByTagName('li');
95   var index = getIndexOfSelectedFakeOption(optionElement, bconover, bconout);
96   if(index >= 0){
97     if(type.toLowerCase() == 'html') return shortenFakeSelectText(liArray[index].innerHTML,maxLength);
98     if(type.toLowerCase() == 'rel') return liArray[index].getAttribute(attr);
99   }
100   return '';
101}
102function clearAllSelectedFakeOptions(optionElement, bconover, bconout){
103  var myOptions = optionElement;
104  var liArray = myOptions.getElementsByTagName('li');
105  for (var i = 0; i < liArray.length; i++) {
106    liArray[i].style.backgroundColor = bconout;
107  }
108}
109function getIndexOfSelectedFakeOption(optionElement, bconover, bconout){
110   var myOptions = optionElement;
111   var liArray = myOptions.getElementsByTagName('li');
112   for (var i = 0; i < liArray.length; i++) {
113     if(liArray[i].style.backgroundColor != bconout) return i;
114   }
115   return 0;
116}
117function setIndexOfSelectedFakeOption(optionElement, index, type, bconover, bconout, attr, attrNoAction){
118   var myOptions = optionElement;
119   var liArray = myOptions.getElementsByTagName('li');
120   if(index >= 0){
121     if(type == 'up' && index > 0 && liArray[index-1] != null && liArray[index-1] != undefined){
122         liArray[index-1].style.backgroundColor = bconover;
123     }
124     if(type == 'down' && liArray[index+1] != null && liArray[index+1] != undefined){
125         liArray[index+1].style.backgroundColor = bconover;
126     }
127     liArray[index].style.backgroundColor = bconout;
128   }
129}
130//END functions to handle keyboard actions
131//prepare a fake select with divs
132//functionParams only comma separated...e.g. 'foo,bar,test'
133function prepareSearchSelect(selectId, replaceId, currentTextId, fakeOptionsId, functionCall, functionParams, cutText, width) {
134  //CONFIG
135  //onmouseover background color
136  var bconover = '#DEDEDE';
137  //onmouseout background color
138  var bconout = '';
139  //attribute of fake option (li) used like "value" of real select
140  var attr = 'rel';
141  //attribute where nothing should happen (rel="aaa") => separator in drop-down
142  var attrNoAction = 'aaa';
143  //max length of characters before cutting them off
144  var maxLength = 33;
145  if(cutText != '' && cutText != null) maxLength = cutText;
146  //width of select
147  var selectWidth = '';
148  if(width != '' && width != null) selectWidth = width + 'px';
149  //real select
150  var mySelect = document.getElementById(selectId);
151  //area for the fake select
152  var myReplace = document.getElementById(replaceId);
153  //show text of fake selection
154  var myCurrent = document.getElementById(currentTextId);
155  //fake selection options
156  var myOptions = document.getElementById(fakeOptionsId);
157  //object for event handling function
158  var obj = {
159    selectId:selectId,
160    replaceId:replaceId,
161    currentTextId:currentTextId,
162    fakeOptionsId:fakeOptionsId,
163    functionCall:functionCall,
164    functionParams:functionParams,
165    bconover:bconover,
166    bconout:bconout,
167    attr:attr,
168    attrNoAction:attrNoAction,
169    maxLength:maxLength,

170    width:width
171  };
172  if(navigator.userAgent.toLowerCase().indexOf('MSIE'.toLowerCase())>-1){
173    //IE can handle replaceId => but error is shown in browser
174    //Event.observe(document, 'keypress', onFakeSelectKeypress2.bindAsEventListener(obj));
175
176
177	$(document).bind('keydown', function(event){
178		onFakeSelectKeypress2(event,obj);
179	});
180
181  } else {
182    $(document).bind('keydown', function(event){
183
184
185		onFakeSelectKeypress2(event,obj);
186	});
187
188  }
189
190  //do it only if all IDs are valid
191  if(mySelect != null && myReplace != null && myOptions != null && myCurrent != null){
192    myCurrent.innerHTML = shortenFakeSelectText(myCurrent.innerHTML, maxLength);
193    myCurrent.style.width = selectWidth;
194    myOptions.style.width = selectWidth;
195
196    mySelect.style.display = 'none';
197    myReplace.style.display = 'inline';
198
199    var liArray = myOptions.getElementsByTagName('li');
200    for (var i = 0; i < liArray.length; i++) {
201      liArray[i].style.width = selectWidth;
202      liArray[i].innerHTML = shortenFakeSelectText(liArray[i].innerHTML,maxLength);
203
204
205      //update of hidden real select after page reload
206      /*
207      <?if(isset($_GET['sc'])){?>
208      if(liArray[i].getAttribute(attr) == '<?echo $_GET['sc'];?>'){
209        //give hidden select the value of the chosen fake select
210        mySelect.value = liArray[i].getAttribute(attr);
211        //update the current text with the text of the fake select
212        myCurrent.innerHTML = shortenFakeSelectText(liArray[i].innerHTML,maxLength);
213        myOptions.style.display = 'none';
214      }
215      <?}?>
216      */
217
218      //what happens if clicking on an option of the fake select
219      liArray[i].onclick = function() {
220        //do not do sth. when selecting "----------------"
221        if(this.getAttribute(attr) != attrNoAction){
222          //give hidden select the value of the chosen fake select
223          mySelect.value = this.getAttribute(attr);
224          setSearchArea2(this.getAttribute(attr), selectId);
225          //update the current text with the text of the chosen fake select
226          myCurrent.innerHTML = shortenFakeSelectText(this.innerHTML,maxLength);
227          //do something after update the fake select => like "onchange"
228          afterUpdateFakeSelect(functionCall, functionParams);
229        }
230      }
231
232      //what happens if moving mouse on an option of the fake select
233      liArray[i].onmouseover = function() {
234        clearAllSelectedFakeOptions(myOptions, bconover, bconout);
235        this.style.backgroundColor = bconover;
236      }
237
238      //what happens if moving mouse away from an option of the fake select
239      liArray[i].onmouseout = function() {
240        this.style.backgroundColor = bconout;
241      }
242    }
243    //open fake select by clicking on it
244    myReplace.onclick = function() {
245      if(myOptions.style.display == 'block'){
246        //hide fake if it is displayed
247        myOptions.style.display = 'none';
248      } else {
249        //show fake
250        myOptions.style.display = 'block';
251      }
252    }
253  }
254}
255//function for shortening of text
256function shortenFakeSelectText(string, maxLength){
257  if(string.indexOf('-') != 0){
258    if(substr_count(string, '&nbsp;') > 0){
259      var split = string.split('&nbsp;');
260      if(split.length == 2){
261        if(split[1].length >= maxLength){
262          var tmpString = split[0] + '&nbsp;' + split[1].substr(0, (maxLength - 3)) + '...';
263          return tmpString;
264        }
265      }
266    } else {
267      if(string.length >= maxLength){
268        var tmpString = string.substr(0, (maxLength - 3)) + '...';
269        return tmpString;
270      }
271    }
272  }
273  return string;
274}
275
276function afterUpdateFakeSelect(functionCall, functionParams){
277  if(function_exists(functionCall)){
278    var thisParams = '';
279    if(functionParams != '' && functionParams != null){
280      thisParams = '\'' + str_replace(',', '\',\'', functionParams) + '\'';
281    }
282    eval(functionCall + '(' + thisParams + ');');
283  }
284}
285
286//hide fake select if you click somewhere
287function hideFakeSelect(e, replaceId, fakeOptionsId) {
288  //area for the fake select
289  var myReplace = replaceId;
290  //fake selection options
291  var myOptions = fakeOptionsId;
292  var eve = e.target ? e.target : e.srcElement;
293  if(eve.parentNode.id != myOptions && eve.parentNode.id != myReplace){
294    var el = document.getElementById(myOptions);
295    if(el != null) el.style.display = 'none';
296  }
297}
298
299function getSearchArea(){
300	var sc = '';
301	var sel = document.getElementById('sc');
302	if(sel != null){
303		for(var i = 0; i < sel.options.length; i++){
304      if(sel.options[i].selected == true){
305        sc = sel.options[i].value;
306        break;
307      }
308	  }
309	}
310	return sc;
311}
312
313function setSearchArea(val){
314	var sel = document.getElementById('sc');
315	if(sel != null){
316		for(var i = 0; i < sel.options.length; i++){
317      if(sel.options[i].value == val){
318        sel.options[i].selected = true;
319        break;
320      }
321    }
322	}
323}
324
325function setSearchArea2(val, element){
326	var sel = document.getElementById(element);
327	if(sel != null){
328		for(var i = 0; i < sel.options.length; i++){
329      if(sel.options[i].value == val){
330        sel.options[i].selected = true;
331        break;
332      }
333    }
334	}
335}
336
337function setFakeAndSearchArea(value, optionsId, currentId, selectId, attr, maxLength){
338	var myOptions = document.getElementById(optionsId);
339	var mySelect = document.getElementById(selectId);
340	var myCurrent = document.getElementById(currentId);
341	if(myOptions != null && mySelect != null && myCurrent != null){
342		//see config vars in function prepareSearchSelect
343		if(maxLength == '') maxLength = 33;
344		if(attr == '') attr = 'rel';
345		var liArray = myOptions.getElementsByTagName('li');
346		for (var i = 0; i < liArray.length; i++) {
347			if(liArray[i].getAttribute(attr) == value){
348				//give hidden select the value of the chosen fake select
349				mySelect.value = value;
350				setSearchArea2(value, selectId);
351				//update the current text with the text of the fake select
352				myCurrent.innerHTML = shortenFakeSelectText(liArray[i].innerHTML,maxLength);
353				myOptions.style.display = 'none';
354				break;
355			}
356		}
357	}
358}
359
360function submitForm(elementId){
361	var el = document.getElementById(elementId);
362	if(el != null){
363		el.submit();
364	}
365}
366
367function switchLanguages(elementId){
368	var el = document.getElementById(elementId);
369	if(el != null){
370		var ellang = el.elements['scLang'];
371		if(ellang != null){
372			if (langUrls){
373				window.location.href = langUrls[ellang.value];
374			}
375		}
376	}
377	return false

377;
378}