@@ -39,60 +39,60 @@ $.widget( "ui.selectmenu", {
39
39
} ,
40
40
41
41
_create : function ( ) {
42
- var self = this ,
42
+ var that = this ,
43
43
options = this . options ,
44
44
tabindex = this . element . attr ( 'tabindex' ) ,
45
45
// set a default id value, generate a new random one if not set by developer
46
- selectmenuId = self . element . attr ( 'id' ) || 'ui-selectmenu-' + Math . random ( ) . toString ( 16 ) . slice ( 2 , 10 ) ;
46
+ selectmenuId = that . element . attr ( 'id' ) || 'ui-selectmenu-' + Math . random ( ) . toString ( 16 ) . slice ( 2 , 10 ) ;
47
47
48
48
// quick array of button and menu id's
49
- self . ids = [ selectmenuId + '-button' , selectmenuId + '-menu' ] ;
49
+ that . ids = [ selectmenuId + '-button' , selectmenuId + '-menu' ] ;
50
50
51
51
// save options
52
- self . items = self . element . find ( 'option' ) ;
52
+ that . items = that . element . find ( 'option' ) ;
53
53
54
54
// set current value
55
55
if ( options . value ) {
56
- self . element [ 0 ] . value = options . value ;
56
+ that . element [ 0 ] . value = options . value ;
57
57
} else {
58
- options . value = self . element [ 0 ] . value ;
58
+ options . value = that . element [ 0 ] . value ;
59
59
}
60
60
61
61
// catch click event of the label
62
- self . element . bind ( 'click.selectmenu' , function ( ) {
63
- self . newelement . focus ( ) ;
62
+ that . element . bind ( 'click.selectmenu' , function ( ) {
63
+ that . newelement . focus ( ) ;
64
64
return false ;
65
65
} )
66
66
. hide ( ) ;
67
67
68
68
// create button
69
- self . newelement = $ ( '<a />' , {
69
+ that . newelement = $ ( '<a />' , {
70
70
href : '#' + selectmenuId ,
71
- tabindex : ( tabindex ? tabindex : self . element . attr ( 'disabled' ) ? 1 : 0 ) ,
72
- id : self . ids [ 0 ] ,
71
+ tabindex : ( tabindex ? tabindex : that . element . attr ( 'disabled' ) ? 1 : 0 ) ,
72
+ id : that . ids [ 0 ] ,
73
73
css : {
74
- width : self . element . outerWidth ( )
74
+ width : that . element . outerWidth ( )
75
75
} ,
76
76
'aria-disabled' : options . disabled ,
77
- 'aria-owns' : self . ids [ 1 ] ,
77
+ 'aria-owns' : that . ids [ 1 ] ,
78
78
'aria-haspopup' : true
79
79
} )
80
- . addClass ( self . widgetBaseClass + '-button' )
80
+ . addClass ( that . widgetBaseClass + '-button' )
81
81
. button ( {
82
- label : self . items . eq ( this . element [ 0 ] . selectedIndex ) . text ( ) ,
82
+ label : that . items . eq ( this . element [ 0 ] . selectedIndex ) . text ( ) ,
83
83
icons : {
84
84
primary : ( options . dropdown ? 'ui-icon-triangle-1-s' : 'ui-icon-triangle-2-n-s' )
85
85
}
86
86
} ) ;
87
87
88
88
// wrap and insert new button
89
- self . newelementWrap = $ ( options . wrapperElement )
90
- . append ( self . newelement )
91
- . insertAfter ( self . element ) ;
89
+ that . newelementWrap = $ ( options . wrapperElement )
90
+ . append ( that . newelement )
91
+ . insertAfter ( that . element ) ;
92
92
93
- self . newelement . bind ( {
93
+ that . newelement . bind ( {
94
94
'mousedown.selectmenu' : function ( event ) {
95
- self . _toggle ( event ) ;
95
+ that . _toggle ( event ) ;
96
96
return false ;
97
97
} ,
98
98
'click.selectmenu' : function ( ) {
@@ -101,214 +101,214 @@ $.widget( "ui.selectmenu", {
101
101
'keydown.selectmenu' : function ( event ) {
102
102
switch ( event . keyCode ) {
103
103
case $ . ui . keyCode . TAB :
104
- if ( self . opened ) self . close ( ) ;
104
+ if ( that . opened ) that . close ( ) ;
105
105
break ;
106
106
case $ . ui . keyCode . ENTER :
107
- if ( self . opened ) self . list . menu ( "select" , self . _getSelectedItem ( ) ) ;
107
+ if ( that . opened ) that . list . menu ( "select" , that . _getSelectedItem ( ) ) ;
108
108
event . preventDefault ( ) ;
109
109
break ;
110
110
case $ . ui . keyCode . SPACE :
111
- self . _toggle ( event ) ;
111
+ that . _toggle ( event ) ;
112
112
event . preventDefault ( ) ;
113
113
break ;
114
114
case $ . ui . keyCode . UP :
115
115
if ( event . altKey ) {
116
- self . _toggle ( event ) ;
116
+ that . _toggle ( event ) ;
117
117
} else {
118
- self . _move ( "previous" , event ) ;
118
+ that . _move ( "previous" , event ) ;
119
119
}
120
120
event . preventDefault ( ) ;
121
121
break ;
122
122
case $ . ui . keyCode . DOWN :
123
123
if ( event . altKey ) {
124
- self . _toggle ( event ) ;
124
+ that . _toggle ( event ) ;
125
125
} else {
126
- self . _move ( "next" , event ) ;
126
+ that . _move ( "next" , event ) ;
127
127
}
128
128
event . preventDefault ( ) ;
129
129
break ;
130
130
case $ . ui . keyCode . LEFT :
131
- self . _move ( "previous" , event ) ;
131
+ that . _move ( "previous" , event ) ;
132
132
event . preventDefault ( ) ;
133
133
break ;
134
134
case $ . ui . keyCode . RIGHT :
135
- self . _move ( "next" , event ) ;
135
+ that . _move ( "next" , event ) ;
136
136
event . preventDefault ( ) ;
137
137
break ;
138
138
default :
139
- self . list . trigger ( event ) ;
139
+ that . list . trigger ( event ) ;
140
140
}
141
141
}
142
142
} ) ;
143
143
144
144
// built menu
145
- self . refresh ( ) ;
145
+ that . refresh ( ) ;
146
146
147
147
// document click closes menu
148
148
$ ( document ) . bind ( 'mousedown.selectmenu' , function ( event ) {
149
- if ( self . opened && ! self . hover ) {
149
+ if ( that . opened && ! that . hover ) {
150
150
window . setTimeout ( function ( ) {
151
- self . close ( event ) ;
151
+ that . close ( event ) ;
152
152
} , 200 ) ;
153
153
}
154
154
} ) ;
155
155
} ,
156
156
157
157
// TODO update the value option
158
158
refresh : function ( ) {
159
- var self = this ,
159
+ var that = this ,
160
160
options = this . options ;
161
161
162
162
// create menu portion, append to body
163
- self . list = $ ( '<ul />' , {
163
+ that . list = $ ( '<ul />' , {
164
164
'class' : 'ui-widget ui-widget-content' ,
165
165
'aria-hidden' : true ,
166
- 'aria-labelledby' : self . ids [ 0 ] ,
166
+ 'aria-labelledby' : that . ids [ 0 ] ,
167
167
role : 'listbox' ,
168
- id : self . ids [ 1 ]
168
+ id : that . ids [ 1 ]
169
169
} ) ;
170
170
171
171
// wrap list
172
172
if ( options . dropdown ) {
173
- var setWidth = self . newelement . outerWidth ( ) ;
173
+ var setWidth = that . newelement . outerWidth ( ) ;
174
174
} else {
175
- var text = self . newelement . find ( "span.ui-button-text" ) ;
175
+ var text = that . newelement . find ( "span.ui-button-text" ) ;
176
176
var setWidth = text . width ( ) + parseFloat ( text . css ( "padding-left" ) ) + parseFloat ( text . css ( "margin-left" ) ) ;
177
177
}
178
- self . listWrap = $ ( options . wrapperElement )
179
- . addClass ( self . widgetBaseClass + '-menu' )
178
+ that . listWrap = $ ( options . wrapperElement )
179
+ . addClass ( that . widgetBaseClass + '-menu' )
180
180
. width ( setWidth )
181
- . append ( self . list )
181
+ . append ( that . list )
182
182
. appendTo ( options . appendTo ) ;
183
183
184
- self . _initSource ( ) ;
185
- self . _renderMenu ( self . list , options . source ) ;
184
+ that . _initSource ( ) ;
185
+ that . _renderMenu ( that . list , options . source ) ;
186
186
187
187
// init menu widget
188
- self . list
189
- . data ( 'element.selectelemenu' , self . element )
188
+ that . list
189
+ . data ( 'element.selectelemenu' , that . element )
190
190
. menu ( {
191
191
select : function ( event , ui ) {
192
192
var flag = false ,
193
193
item = ui . item . data ( "item.selectmenu" ) ;
194
194
195
- if ( item . index != self . element [ 0 ] . selectedIndex ) flag = true ;
195
+ if ( item . index != that . element [ 0 ] . selectedIndex ) flag = true ;
196
196
197
- self . _setOption ( "value" , item . value ) ;
198
- item . element = self . items [ item . index ] ;
199
- self . _trigger ( "select" , event , { item : item } ) ;
197
+ that . _setOption ( "value" , item . value ) ;
198
+ item . element = that . items [ item . index ] ;
199
+ that . _trigger ( "select" , event , { item : item } ) ;
200
200
201
- if ( flag ) self . _trigger ( "change" , event , { item : item } ) ;
201
+ if ( flag ) that . _trigger ( "change" , event , { item : item } ) ;
202
202
203
- self . close ( event , true ) ;
203
+ that . close ( event , true ) ;
204
204
} ,
205
205
focus : function ( event , ui ) {
206
- self . _trigger ( "focus" , event , { item : ui . item . data ( "item.selectmenu" ) } ) ;
206
+ that . _trigger ( "focus" , event , { item : ui . item . data ( "item.selectmenu" ) } ) ;
207
207
}
208
208
} )
209
209
. bind ( {
210
210
'mouseenter.selectelemenu' : function ( ) {
211
- self . hover = true ;
211
+ that . hover = true ;
212
212
} ,
213
213
'mouseleave .selectelemenu' : function ( ) {
214
- self . hover = false ;
214
+ that . hover = false ;
215
215
}
216
216
} ) ;
217
217
218
218
// adjust ARIA
219
- self . list . find ( "li" ) . not ( '.ui-selectmenu-optgroup' ) . find ( 'a' ) . attr ( 'role' , 'option' ) ;
219
+ that . list . find ( "li" ) . not ( '.ui-selectmenu-optgroup' ) . find ( 'a' ) . attr ( 'role' , 'option' ) ;
220
220
221
221
if ( options . dropdown ) {
222
- self . list
222
+ that . list
223
223
. addClass ( 'ui-corner-bottom' )
224
224
. removeClass ( 'ui-corner-all' ) ;
225
225
}
226
226
227
227
// transfer disabled state
228
- if ( self . element . attr ( 'disabled' ) ) {
229
- self . disable ( ) ;
228
+ if ( that . element . attr ( 'disabled' ) ) {
229
+ that . disable ( ) ;
230
230
} else {
231
- self . enable ( )
231
+ that . enable ( )
232
232
}
233
233
} ,
234
234
235
235
open : function ( event ) {
236
- var self = this ,
236
+ var that = this ,
237
237
options = this . options ,
238
- currentItem = self . _getSelectedItem ( ) ;
238
+ currentItem = that . _getSelectedItem ( ) ;
239
239
240
240
if ( ! options . disabled ) {
241
241
// close all other selectmenus
242
- $ ( '.' + self . widgetBaseClass + '-open' ) . not ( self . newelement ) . each ( function ( ) {
242
+ $ ( '.' + that . widgetBaseClass + '-open' ) . not ( that . newelement ) . each ( function ( ) {
243
243
$ ( this ) . children ( 'ul.ui-menu' ) . data ( 'element.selectelemenu' ) . selectmenu ( 'close' ) ;
244
244
} ) ;
245
245
246
246
if ( options . dropdown ) {
247
- self . newelement
247
+ that . newelement
248
248
. addClass ( 'ui-corner-top' )
249
249
. removeClass ( 'ui-corner-all' ) ;
250
250
}
251
251
252
- self . listWrap . addClass ( self . widgetBaseClass + '-open' ) ;
253
- self . list . menu ( "focus" , null , currentItem ) ;
252
+ that . listWrap . addClass ( that . widgetBaseClass + '-open' ) ;
253
+ that . list . menu ( "focus" , null , currentItem ) ;
254
254
255
255
if ( ! options . dropdown ) {
256
256
// center current item
257
- if ( self . list . css ( "overflow" ) == "auto" ) {
258
- self . list . scrollTop ( self . list . scrollTop ( ) + currentItem . position ( ) . top - self . list . outerHeight ( ) / 2 + currentItem . outerHeight ( ) / 2 ) ;
257
+ if ( that . list . css ( "overflow" ) == "auto" ) {
258
+ that . list . scrollTop ( that . list . scrollTop ( ) + currentItem . position ( ) . top - that . list . outerHeight ( ) / 2 + currentItem . outerHeight ( ) / 2 ) ;
259
259
}
260
260
// calculate offset
261
- var _offset = ( self . list . offset ( ) . top - currentItem . offset ( ) . top + ( self . newelement . outerHeight ( ) - currentItem . outerHeight ( ) ) / 2 ) ;
261
+ var _offset = ( that . list . offset ( ) . top - currentItem . offset ( ) . top + ( that . newelement . outerHeight ( ) - currentItem . outerHeight ( ) ) / 2 ) ;
262
262
$ . extend ( options . position , {
263
263
my : "left top" ,
264
264
at : "left top" ,
265
265
offset : "0 " + _offset
266
266
} ) ;
267
267
}
268
268
269
- self . listWrap
270
- . zIndex ( self . element . zIndex ( ) + 1 )
269
+ that . listWrap
270
+ . zIndex ( that . element . zIndex ( ) + 1 )
271
271
. position ( $ . extend ( {
272
- of : self . newelementWrap
272
+ of : that . newelementWrap
273
273
} , options . position ) ) ;
274
274
275
- self . opened = true ;
276
- self . _trigger ( "open" , event ) ;
275
+ that . opened = true ;
276
+ that . _trigger ( "open" , event ) ;
277
277
}
278
278
} ,
279
279
280
280
close : function ( event , focus ) {
281
- var self = this ,
281
+ var that = this ,
282
282
options = this . options ;
283
283
284
- if ( self . opened ) {
284
+ if ( that . opened ) {
285
285
if ( options . dropdown ) {
286
- self . newelement
286
+ that . newelement
287
287
. addClass ( 'ui-corner-all' )
288
288
. removeClass ( 'ui-corner-top' ) ;
289
289
}
290
290
291
- self . listWrap . removeClass ( self . widgetBaseClass + '-open' ) ;
291
+ that . listWrap . removeClass ( that . widgetBaseClass + '-open' ) ;
292
292
this . opened = false ;
293
293
294
- if ( focus ) self . newelement . focus ( ) ;
294
+ if ( focus ) that . newelement . focus ( ) ;
295
295
296
- self . _trigger ( "close" , event ) ;
296
+ that . _trigger ( "close" , event ) ;
297
297
}
298
298
} ,
299
299
300
300
_renderMenu : function ( ul , items ) {
301
- var self = this ,
301
+ var that = this ,
302
302
currentOptgroup = "" ;
303
303
304
304
$ . each ( items , function ( index , item ) {
305
305
if ( item . optgroup != currentOptgroup ) {
306
306
var optgroup = $ ( '<li class="ui-selectmenu-optgroup">' + item . optgroup + '</li>' ) ;
307
- if ( $ ( self . items [ item . index ] ) . parent ( "optgroup" ) . attr ( "disabled" ) ) optgroup . addClass ( 'ui-state-disabled' ) ;
307
+ if ( $ ( that . items [ item . index ] ) . parent ( "optgroup" ) . attr ( "disabled" ) ) optgroup . addClass ( 'ui-state-disabled' ) ;
308
308
ul . append ( optgroup ) ;
309
309
currentOptgroup = item . optgroup ;
310
310
}
311
- self . _renderItem ( ul , item ) ;
311
+ that . _renderItem ( ul , item ) ;
312
312
} ) ;
313
313
} ,
314
314
0 commit comments