← Back to branch summary

~tsep-dev/tsep/tsep2

« back to all changes in this revision

Viewing changes to web/admin/js/jquery/jquery.selectbox-0.5.js

  • Committer: xaav
  • Date: 2011-09-27 01:31:36 UTC
  • Revision ID: git-v1:3c3f2e8d21ccd506f3cd12b2650591f6532368fb
First commit'

Show diffs side-by-side

added added

removed removed

Lines of Context:
web/admin/js/jquery/jquery.selectbox-0.5.js
 
1
/*
 
2
 * jQuery selectbox plugin
 
3
 *
 
4
 * Copyright (c) 2007 Sadri Sahraoui (brainfault.com)
 
5
 * Licensed under the GPL license and MIT:
 
6
 *   http://www.opensource.org/licenses/GPL-license.php
 
7
 *   http://www.opensource.org/licenses/mit-license.php
 
8
 *
 
9
 * The code is inspired from Autocomplete plugin (http://www.dyve.net/jquery/?autocomplete)
 
10
 *
 
11
 * Revision: $Id$
 
12
 * Version: 0.5
 
13
 * 
 
14
 * Changelog :
 
15
 *  Version 0.5 
 
16
 *  - separate css style for current selected element and hover element which solve the highlight issue 
 
17
 *  Version 0.4
 
18
 *  - Fix width when the select is in a hidden div   @Pawel Maziarz
 
19
 *  - Add a unique id for generated li to avoid conflict with other selects and empty values @Pawel Maziarz
 
20
 */
 
21
jQuery.fn.extend({
 
22
        selectbox: function(options) {
 
23
                return this.each(function() {
 
24
                        new jQuery.SelectBox(this, options);
 
25
                });
 
26
        }
 
27
});
 
28
 
 
29
 
 
30
/* pawel maziarz: work around for ie logging */
 
31
if (!window.console) {
 
32
        var console = {
 
33
                log: function(msg) { 
 
34
         }
 
35
        }
 
36
}
 
37
/* */
 
38
 
 
39
jQuery.SelectBox = function(selectobj, options) {
 
40
        
 
41
        var opt = options || {};
 
42
        opt.inputClass = opt.inputClass || "selectbox";
 
43
        opt.containerClass = opt.containerClass || "selectbox-wrapper";
 
44
        opt.hoverClass = opt.hoverClass || "current";
 
45
        opt.currentClass = opt.selectedClass || "selected"
 
46
        opt.debug = opt.debug || false;
 
47
        
 
48
        var elm_id = selectobj.id;
 
49
        var active = -1;
 
50
        var inFocus = false;
 
51
        var hasfocus = 0;
 
52
        //jquery object for select element
 
53
        var $select = $(selectobj);
 
54
        // jquery container object
 
55
        var $container = setupContainer(opt);
 
56
        //jquery input object 
 
57
        var $input = setupInput(opt);
 
58
        // hide select and append newly created elements
 
59
        $select.hide().before($input).before($container);
 
60
        
 
61
        
 
62
        init();
 
63
        
 
64
        $input
 
65
        .click(function(){
 
66
    if (!inFocus) {
 
67
                  $container.toggle();
 
68
                }
 
69
        })
 
70
        .focus(function(){
 
71
           if ($container.not(':visible')) {
 
72
               inFocus = true;
 
73
               $container.show();
 
74
           }
 
75
        })
 
76
        .keydown(function(event) {         
 
77
                switch(event.keyCode) {
 
78
                        case 38: // up
 
79
                                event.preventDefault();
 
80
                                moveSelect(-1);
 
81
                                break;
 
82
                        case 40: // down
 
83
                                event.preventDefault();
 
84
                                moveSelect(1);
 
85
                                break;
 
86
                        //case 9:  // tab 
 
87
                        case 13: // return
 
88
                                event.preventDefault(); // seems not working in mac !
 
89
                                $('li.'+opt.hoverClass).trigger('click');
 
90
                                break;
 
91
                        case 27: //escape
 
92
                          hideMe();
 
93
                          break;
 
94
                }
 
95
        })
 
96
        .blur(function() {
 
97
                if ($container.is(':visible') && hasfocus > 0 ) {
 
98
                        if(opt.debug) console.log('container visible and has focus')
 
99
                } else {
 
100
                        hideMe();       
 
101
                }
 
102
        });
 
103
 
 
104
 
 
105
        function hideMe() { 
 
106
                hasfocus = 0;
 
107
                $container.hide(); 
 
108
        }
 
109
        
 
110
        function init() {
 
111
                $container.append(getSelectOptions($input.attr('id'))).hide();
 
112
                var width = $input.css('width');
 
113
                $container.width(width);
 
114
    }
 
115
        
 
116
        function setupContainer(options) {
 
117
                var container = document.createElement("div");
 
118
                $container = $(container);
 
119
                $container.attr('id', elm_id+'_container');
 
120
                $container.addClass(options.containerClass);
 
121
                
 
122
                return $container;
 
123
        }
 
124
        
 
125
        function setupInput(options) {
 
126
                var input = document.createElement("input");
 
127
                var $input = $(input);
 
128
                $input.attr("id", elm_id+"_input");
 
129
                $input.attr("type", "text");
 
130
                $input.addClass(options.inputClass);
 
131
                $input.attr("autocomplete", "off");
 
132
                $input.attr("readonly", "readonly");
 
133
                $input.attr("tabIndex", $select.attr("tabindex")); // "I" capital is important for ie
 
134
                
 
135
                return $input;  
 
136
        }
 
137
        
 
138
        function moveSelect(step) {
 
139
                var lis = $("li", $container);
 
140
                if (!lis) return;
 
141
 
 
142
                active += step;
 
143
 
 
144
                if (active < 0) {
 
145
                        active = 0;
 
146
                } else if (active >= lis.size()) {
 
147
                        active = lis.size() - 1;
 
148
                }
 
149
 
 
150
                lis.removeClass(opt.hoverClass);
 
151
 
 
152
                $(lis[active]).addClass(opt.hoverClass);
 
153
        }
 
154
        
 
155
        function setCurrent() { 
 
156
                var li = $("li."+opt.currentClass, $container).get(0);
 
157
                var ar = (''+li.id).split('_');
 
158
                var el = ar[ar.length-1];
 
159
                $select.val(el);
 
160
                $input.val($(li).html());
 
161
                return true;
 
162
        }
 
163
        
 
164
        // select value
 
165
        function getCurrentSelected() {
 
166
                return $select.val();
 
167
        }
 
168
        
 
169
        // input value
 
170
        function getCurrentValue() {
 
171
                return $input.val();
 
172
        }
 
173
        
 
174
        function getSelectOptions(parentid) {
 
175
                var select_options = new Array();
 
176
                var ul = document.createElement('ul');
 
177
                $select.children('option').each(function() {
 
178
                        var li = document.createElement('li');
 
179
                        li.setAttribute('id', parentid + '_' + $(this).val());
 
180
                        li.innerHTML = $(this).html();
 
181
                        if ($(this).is(':selected')) {
 
182
                                $input.val($(this).html());
 
183
                                $(li).addClass(opt.currentClass);
 
184
                        }
 
185
                        ul.appendChild(li);
 
186
                        $(li)
 
187
                        .mouseover(function(event) {
 
188
                                hasfocus = 1;
 
189
                                if (opt.debug) console.log('over on : '+this.id);
 
190
                                jQuery(event.target, $container).addClass(opt.hoverClass);
 
191
                        })
 
192
                        .mouseout(function(event) {
 
193
                                hasfocus = -1;
 
194
                                if (opt.debug) console.log('out on : '+this.id);
 
195
                                jQuery(event.target, $container).removeClass(opt.hoverClass);
 
196
                        })
 
197
                        .click(function(event) {
 
198
                          var fl = $('li.'+opt.hoverClass, $container).get(0);
 
199
                                if (opt.debug) console.log('click on :'+this.id);
 
200
                                $('li.'+opt.currentClass).removeClass(opt.currentClass); 
 
201
                                $(this).addClass(opt.currentClass);
 
202
                                setCurrent();
 
203
                                hideMe();
 
204
                        });
 
205
                });
 
206
                return ul;
 
207
        }
 
208
        
 
209
};