[3102] | 1 | (function() |
---|
| 2 | { |
---|
| 3 | // Path to arrow 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 = '83px'; |
---|
| 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 = _ZINDEX++; |
---|
| 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 editableSelect(){} |
---|
| 182 | |
---|
| 183 | editableSelect.prototype.create = createEditableSelect; |
---|
| 184 | window.editS = new editableSelect; |
---|
| 185 | |
---|
| 186 | })(); |
---|