1 | (function() |
---|
2 | { |
---|
3 | //Load Images |
---|
4 | var arrowImage = path_jabberit + 'templates/default/images/select_arrow.gif'; // Regular arrow |
---|
5 | var arrowImageOver = path_jabberit + 'templates/default/images/select_arrow_over.gif'; // Mouse over |
---|
6 | var arrowImageDown = path_jabberit + 'templates/default/images/select_arrow_down.gif'; // Mouse down |
---|
7 | |
---|
8 | var activeOption; |
---|
9 | var selectBoxIds = 0; |
---|
10 | var currentlyOpenedOptionBox = false; |
---|
11 | var editableSelect_activeArrow = false; |
---|
12 | |
---|
13 | function configEvents(pObj, pEvent, pHandler) |
---|
14 | { |
---|
15 | if ( typeof pObj == 'object' ) |
---|
16 | { |
---|
17 | if ( pEvent.substring(0, 2) == 'on' ) |
---|
18 | pEvent = pEvent.substring(2, pEvent.length); |
---|
19 | |
---|
20 | if ( pObj.addEventListener ) |
---|
21 | pObj.addEventListener(pEvent, pHandler, false); |
---|
22 | else if ( pObj.attachEvent ) |
---|
23 | pObj.attachEvent('on' + pEvent, pHandler); |
---|
24 | } |
---|
25 | } |
---|
26 | |
---|
27 | function createEditableSelect() |
---|
28 | { |
---|
29 | if( arguments.length > 0 ) |
---|
30 | dest = arguments[0]; |
---|
31 | else |
---|
32 | return false; |
---|
33 | |
---|
34 | dest.className='selectBoxInput'; |
---|
35 | |
---|
36 | var div = document.createElement('DIV'); |
---|
37 | div.id = 'selectBox' + selectBoxIds; |
---|
38 | div.style.left = '155px'; |
---|
39 | div.style.width = dest.offsetWidth; |
---|
40 | div.style.position = 'absolute'; |
---|
41 | div.style.styleFloat = 'left'; |
---|
42 | |
---|
43 | var parent = dest.parentNode; |
---|
44 | parent.insertBefore(div,dest); |
---|
45 | |
---|
46 | div.appendChild(dest); |
---|
47 | div.className='selectBox'; |
---|
48 | |
---|
49 | var img = document.createElement('IMG'); |
---|
50 | img.src = arrowImage; |
---|
51 | img.className = 'selectBoxArrow'; |
---|
52 | |
---|
53 | img.onclick = selectBox_showOptions; |
---|
54 | img.id = 'arrowSelectBox' + selectBoxIds; |
---|
55 | |
---|
56 | div.appendChild(img); |
---|
57 | |
---|
58 | var optionDiv = document.createElement('DIV'); |
---|
59 | optionDiv.id = 'selectBoxOptions' + selectBoxIds; |
---|
60 | optionDiv.className='selectBoxOptionContainer'; |
---|
61 | optionDiv.style.width = div.offsetWidth-2 + 'px'; |
---|
62 | |
---|
63 | div.appendChild(optionDiv); |
---|
64 | |
---|
65 | if(dest.getAttribute('selectBoxOptions')) |
---|
66 | { |
---|
67 | var options = dest.getAttribute('selectBoxOptions').split(';'); |
---|
68 | var optionsTotalHeight = 0; |
---|
69 | var optionArray = new Array(); |
---|
70 | for(var no = 0 ; no < options.length ; no++) |
---|
71 | { |
---|
72 | var anOption = document.createElement('DIV'); |
---|
73 | anOption.innerHTML = options[no]; |
---|
74 | anOption.className='selectBoxAnOption'; |
---|
75 | anOption.onclick = selectOptionValue; |
---|
76 | anOption.style.width = optionDiv.style.width.replace('px','') - 2 + 'px'; |
---|
77 | anOption.onmouseover = highlightSelectBoxOption; |
---|
78 | |
---|
79 | |
---|
80 | optionDiv.appendChild(anOption); |
---|
81 | optionsTotalHeight = optionsTotalHeight + anOption.offsetHeight; |
---|
82 | optionArray.push(anOption); |
---|
83 | } |
---|
84 | |
---|
85 | if(optionsTotalHeight > optionDiv.offsetHeight) |
---|
86 | { |
---|
87 | for(var no = 0; no < optionArray.length ; no++) |
---|
88 | { |
---|
89 | optionArray[no].style.width = optionDiv.style.width.replace('px','') - 22 + 'px'; |
---|
90 | } |
---|
91 | } |
---|
92 | |
---|
93 | optionDiv.style.display = 'none'; |
---|
94 | optionDiv.style.visibility = 'visible'; |
---|
95 | optionDiv.style.zIndex = loadscript.getZIndex(); |
---|
96 | } |
---|
97 | |
---|
98 | configEvents(dest, |
---|
99 | 'onkeydown', |
---|
100 | function(e) |
---|
101 | { |
---|
102 | switch(e.keyCode) |
---|
103 | { |
---|
104 | case 13: |
---|
105 | case 27: |
---|
106 | dest.value = dest.value; |
---|
107 | dest.focus(); |
---|
108 | dest.select(); |
---|
109 | break; |
---|
110 | } |
---|
111 | }); |
---|
112 | |
---|
113 | configEvents(dest, |
---|
114 | 'onclick', |
---|
115 | function(e) |
---|
116 | { |
---|
117 | dest.value = dest.value; |
---|
118 | dest.focus(); |
---|
119 | dest.select(); |
---|
120 | document.getElementById('selectBoxOptions0').style.display='none'; |
---|
121 | document.getElementById('arrowSelectBox0').src = arrowImageOver; |
---|
122 | }); |
---|
123 | } |
---|
124 | |
---|
125 | function highlightSelectBoxOption() |
---|
126 | { |
---|
127 | if( this.style.backgroundColor == '#316AC5' ) |
---|
128 | { |
---|
129 | this.style.backgroundColor = ''; |
---|
130 | this.style.color = ''; |
---|
131 | } |
---|
132 | else |
---|
133 | { |
---|
134 | this.style.backgroundColor = '#316AC5'; |
---|
135 | this.style.color = '#FFF'; |
---|
136 | } |
---|
137 | |
---|
138 | if( activeOption ) |
---|
139 | { |
---|
140 | activeOption.style.backgroundColor=''; |
---|
141 | activeOption.style.color=''; |
---|
142 | } |
---|
143 | activeOption = this; |
---|
144 | } |
---|
145 | |
---|
146 | function selectOptionValue() |
---|
147 | { |
---|
148 | var parentNode = this.parentNode.parentNode; |
---|
149 | var textInput = parentNode.getElementsByTagName('INPUT')[0]; |
---|
150 | textInput.value = this.innerHTML; |
---|
151 | this.parentNode.style.display='none'; |
---|
152 | document.getElementById('arrowSelectBox' + parentNode.id.replace(/[^\d]/g,'')).src = arrowImageOver; |
---|
153 | } |
---|
154 | |
---|
155 | function selectBox_showOptions() |
---|
156 | { |
---|
157 | if( editableSelect_activeArrow && editableSelect_activeArrow!=this ) |
---|
158 | editableSelect_activeArrow.src = arrowImage; |
---|
159 | |
---|
160 | editableSelect_activeArrow = this; |
---|
161 | |
---|
162 | var numId = this.id.replace(/[^\d]/g,''); |
---|
163 | var optionDiv = document.getElementById('selectBoxOptions' + numId); |
---|
164 | if(optionDiv.style.display=='block') |
---|
165 | { |
---|
166 | optionDiv.style.display='none'; |
---|
167 | this.src = arrowImageOver; |
---|
168 | } |
---|
169 | else |
---|
170 | { |
---|
171 | optionDiv.style.display='block'; |
---|
172 | this.src = arrowImageDown; |
---|
173 | |
---|
174 | if( currentlyOpenedOptionBox && currentlyOpenedOptionBox!=optionDiv) |
---|
175 | currentlyOpenedOptionBox.style.display='none'; |
---|
176 | |
---|
177 | currentlyOpenedOptionBox= optionDiv; |
---|
178 | } |
---|
179 | } |
---|
180 | |
---|
181 | function SelectEditable(){} |
---|
182 | |
---|
183 | SelectEditable.prototype.create = createEditableSelect; |
---|
184 | window.SelectEditable = SelectEditable; |
---|
185 | |
---|
186 | })(); |
---|