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