source: companies/celepar/jabberit_messenger/js/editSelect.js @ 763

Revision 763, 4.8 KB checked in by niltonneto, 15 years ago (diff)

Importação inicial do Expresso da Celepar

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