source: branches/2.2/jabberit_messenger/jmessenger/js/SelectEditable.js @ 3102

Revision 3102, 5.0 KB checked in by amuller, 14 years ago (diff)

Ticket #986 - Efetuado merge para o Branch 2.2( atualizacao do modulo)

  • Property svn:executable set to *
Line 
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})();
Note: See TracBrowser for help on using the repository browser.