chosen-rails 0.9.5

Sign up to get free protection for your applications and to get access to all the features.
@@ -0,0 +1,108 @@
1
+ ###
2
+ Chosen source: generate output using 'cake build'
3
+ Copyright (c) 2011 by Harvest
4
+ ###
5
+ root = this
6
+
7
+ class AbstractChosen
8
+
9
+ constructor: (@form_field, @options={}) ->
10
+ this.set_default_values()
11
+
12
+ @is_multiple = @form_field.multiple
13
+ @default_text_default = if @is_multiple then "Select Some Options" else "Select an Option"
14
+
15
+ this.setup()
16
+
17
+ this.set_up_html()
18
+ this.register_observers()
19
+
20
+ this.finish_setup()
21
+
22
+ set_default_values: ->
23
+ @click_test_action = (evt) => this.test_active_click(evt)
24
+ @activate_action = (evt) => this.activate_field(evt)
25
+ @active_field = false
26
+ @mouse_on_container = false
27
+ @results_showing = false
28
+ @result_highlighted = null
29
+ @result_single_selected = null
30
+ @allow_single_deselect = if @options.allow_single_deselect? and @form_field.options[0]? and @form_field.options[0].text is "" then @options.allow_single_deselect else false
31
+ @disable_search_threshold = @options.disable_search_threshold || 0
32
+ @choices = 0
33
+ @results_none_found = @options.no_results_text or "No results match"
34
+
35
+ mouse_enter: -> @mouse_on_container = true
36
+ mouse_leave: -> @mouse_on_container = false
37
+
38
+ input_focus: (evt) ->
39
+ setTimeout (=> this.container_mousedown()), 50 unless @active_field
40
+
41
+ input_blur: (evt) ->
42
+ if not @mouse_on_container
43
+ @active_field = false
44
+ setTimeout (=> this.blur_test()), 100
45
+
46
+ result_add_option: (option) ->
47
+ if not option.disabled
48
+ option.dom_id = @container_id + "_o_" + option.array_index
49
+
50
+ classes = if option.selected and @is_multiple then [] else ["active-result"]
51
+ classes.push "result-selected" if option.selected
52
+ classes.push "group-option" if option.group_array_index?
53
+ classes.push option.classes if option.classes != ""
54
+
55
+ style = if option.style.cssText != "" then " style=\"#{option.style}\"" else ""
56
+
57
+ '<li id="' + option.dom_id + '" class="' + classes.join(' ') + '"'+style+'>' + option.html + '</li>'
58
+ else
59
+ ""
60
+
61
+ results_update_field: ->
62
+ this.result_clear_highlight()
63
+ @result_single_selected = null
64
+ this.results_build()
65
+
66
+ results_toggle: ->
67
+ if @results_showing
68
+ this.results_hide()
69
+ else
70
+ this.results_show()
71
+
72
+ results_search: (evt) ->
73
+ if @results_showing
74
+ this.winnow_results()
75
+ else
76
+ this.results_show()
77
+
78
+ keyup_checker: (evt) ->
79
+ stroke = evt.which ? evt.keyCode
80
+ this.search_field_scale()
81
+
82
+ switch stroke
83
+ when 8
84
+ if @is_multiple and @backstroke_length < 1 and @choices > 0
85
+ this.keydown_backstroke()
86
+ else if not @pending_backstroke
87
+ this.result_clear_highlight()
88
+ this.results_search()
89
+ when 13
90
+ evt.preventDefault()
91
+ this.result_select(evt) if this.results_showing
92
+ when 27
93
+ this.results_hide() if @results_showing
94
+ when 9, 38, 40, 16, 91, 17
95
+ # don't do anything on these keys
96
+ else this.results_search()
97
+
98
+ generate_field_id: ->
99
+ new_id = this.generate_random_id()
100
+ @form_field.id = new_id
101
+ new_id
102
+
103
+ generate_random_char: ->
104
+ chars = "0123456789ABCDEFGHIJKLMNOPQRSTUVWXTZ"
105
+ rand = Math.floor(Math.random() * chars.length)
106
+ newchar = chars.substring rand, rand+1
107
+
108
+ root.AbstractChosen = AbstractChosen
@@ -0,0 +1,51 @@
1
+ class SelectParser
2
+
3
+ constructor: ->
4
+ @options_index = 0
5
+ @parsed = []
6
+
7
+ add_node: (child) ->
8
+ if child.nodeName is "OPTGROUP"
9
+ this.add_group child
10
+ else
11
+ this.add_option child
12
+
13
+ add_group: (group) ->
14
+ group_position = @parsed.length
15
+ @parsed.push
16
+ array_index: group_position
17
+ group: true
18
+ label: group.label
19
+ children: 0
20
+ disabled: group.disabled
21
+ this.add_option( option, group_position, group.disabled ) for option in group.childNodes
22
+
23
+ add_option: (option, group_position, group_disabled) ->
24
+ if option.nodeName is "OPTION"
25
+ if option.text != ""
26
+ if group_position?
27
+ @parsed[group_position].children += 1
28
+ @parsed.push
29
+ array_index: @parsed.length
30
+ options_index: @options_index
31
+ value: option.value
32
+ text: option.text
33
+ html: option.innerHTML
34
+ selected: option.selected
35
+ disabled: if group_disabled is true then group_disabled else option.disabled
36
+ group_array_index: group_position
37
+ classes: option.className
38
+ style: option.style.cssText
39
+ else
40
+ @parsed.push
41
+ array_index: @parsed.length
42
+ options_index: @options_index
43
+ empty: true
44
+ @options_index += 1
45
+
46
+ SelectParser.select_to_array = (select) ->
47
+ parser = new SelectParser()
48
+ parser.add_node( child ) for child in select.childNodes
49
+ parser.parsed
50
+
51
+ this.SelectParser = SelectParser
@@ -0,0 +1,361 @@
1
+ /* @group Base
2
+
3
+ .chzn-container
4
+ font-size: 13px
5
+ position: relative
6
+ display: inline-block
7
+ zoom: 1
8
+ *display: inline
9
+ .chzn-drop
10
+ background: #fff
11
+ border: 1px solid #aaa
12
+ border-top: 0
13
+ position: absolute
14
+ top: 29px
15
+ left: 0
16
+ -webkit-box-shadow: 0 4px 5px rgba(0, 0, 0, 0.15)
17
+ -moz-box-shadow: 0 4px 5px rgba(0, 0, 0, 0.15)
18
+ -o-box-shadow: 0 4px 5px rgba(0, 0, 0, 0.15)
19
+ box-shadow: 0 4px 5px rgba(0, 0, 0, 0.15)
20
+ z-index: 999
21
+
22
+ /* @end
23
+
24
+ /* @group Single Chosen
25
+
26
+ .chzn-container-single
27
+ .chzn-single
28
+ background-color: #fff
29
+ background-image: -webkit-gradient(linear, left bottom, left top, color-stop(0, #eeeeee), color-stop(0.5, white))
30
+ background-image: -webkit-linear-gradient(center bottom, #eeeeee 0%, white 50%)
31
+ background-image: -moz-linear-gradient(center bottom, #eeeeee 0%, white 50%)
32
+ background-image: -o-linear-gradient(top, #eeeeee 0%, white 50%)
33
+ background-image: -ms-linear-gradient(top, #eeeeee 0%, white 50%)
34
+ filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#eeeeee', endColorstr='#ffffff',GradientType=0 )
35
+ background-image: linear-gradient(top, #eeeeee 0%, white 50%)
36
+ -webkit-border-radius: 4px
37
+ -moz-border-radius: 4px
38
+ border-radius: 4px
39
+ -moz-background-clip: padding
40
+ -webkit-background-clip: padding-box
41
+ background-clip: padding-box
42
+ border: 1px solid #aaa
43
+ display: block
44
+ overflow: hidden
45
+ white-space: nowrap
46
+ position: relative
47
+ height: 26px
48
+ line-height: 26px
49
+ padding: 0 0 0 8px
50
+ color: #444
51
+ text-decoration: none
52
+ span
53
+ margin-right: 26px
54
+ display: block
55
+ overflow: hidden
56
+ white-space: nowrap
57
+ -o-text-overflow: ellipsis
58
+ -ms-text-overflow: ellipsis
59
+ text-overflow: ellipsis
60
+ abbr
61
+ display: block
62
+ position: absolute
63
+ right: 26px
64
+ top: 8px
65
+ width: 12px
66
+ height: 13px
67
+ font-size: 1px
68
+ background: url(chosen-sprite.png) right top no-repeat
69
+ &:hover
70
+ background-position: right -11px
71
+ div
72
+ -webkit-border-radius: 0 4px 4px 0
73
+ -moz-border-radius: 0 4px 4px 0
74
+ border-radius: 0 4px 4px 0
75
+ -moz-background-clip: padding
76
+ -webkit-background-clip: padding-box
77
+ background-clip: padding-box
78
+ background: #ccc
79
+ background-image: -webkit-gradient(linear, left bottom, left top, color-stop(0, #cccccc), color-stop(0.6, #eeeeee))
80
+ background-image: -webkit-linear-gradient(center bottom, #cccccc 0%, #eeeeee 60%)
81
+ background-image: -moz-linear-gradient(center bottom, #cccccc 0%, #eeeeee 60%)
82
+ background-image: -o-linear-gradient(bottom, #cccccc 0%, #eeeeee 60%)
83
+ background-image: -ms-linear-gradient(top, #cccccc 0%, #eeeeee 60%)
84
+ filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#cccccc', endColorstr='#eeeeee',GradientType=0 )
85
+ background-image: linear-gradient(top, #cccccc 0%, #eeeeee 60%)
86
+ border-left: 1px solid #aaa
87
+ position: absolute
88
+ right: 0
89
+ top: 0
90
+ display: block
91
+ height: 100%
92
+ width: 18px
93
+ b
94
+ background: url('chosen-sprite.png') no-repeat 0 1px
95
+ display: block
96
+ width: 100%
97
+ height: 100%
98
+ .chzn-search
99
+ padding: 3px 4px
100
+ position: relative
101
+ margin: 0
102
+ white-space: nowrap
103
+ z-index: 1010
104
+ input
105
+ background: white url('chosen-sprite.png') no-repeat 100% -22px
106
+ background: url('chosen-sprite.png') no-repeat 100% -22px, -webkit-gradient(linear, left bottom, left top, color-stop(0.85, white), color-stop(0.99, #eeeeee))
107
+ background: url('chosen-sprite.png') no-repeat 100% -22px, -webkit-linear-gradient(center bottom, white 85%, #eeeeee 99%)
108
+ background: url('chosen-sprite.png') no-repeat 100% -22px, -moz-linear-gradient(center bottom, white 85%, #eeeeee 99%)
109
+ background: url('chosen-sprite.png') no-repeat 100% -22px, -o-linear-gradient(bottom, white 85%, #eeeeee 99%)
110
+ background: url('chosen-sprite.png') no-repeat 100% -22px, -ms-linear-gradient(top, white 85%, #eeeeee 99%)
111
+ background: url('chosen-sprite.png') no-repeat 100% -22px, linear-gradient(top, white 85%, #eeeeee 99%)
112
+ margin: 1px 0
113
+ padding: 4px 20px 4px 5px
114
+ outline: 0
115
+ border: 1px solid #aaa
116
+ font-family: sans-serif
117
+ font-size: 1em
118
+ .chzn-drop
119
+ -webkit-border-radius: 0 0 4px 4px
120
+ -moz-border-radius: 0 0 4px 4px
121
+ border-radius: 0 0 4px 4px
122
+ -moz-background-clip: padding
123
+ -webkit-background-clip: padding-box
124
+ background-clip: padding-box
125
+
126
+ /* @end
127
+
128
+ .chzn-container-single-nosearch .chzn-search input
129
+ position: absolute
130
+ left: -9000px
131
+
132
+ /* @group Multi Chosen
133
+
134
+ .chzn-container-multi .chzn-choices
135
+ background-color: #fff
136
+ background-image: -webkit-gradient(linear, left bottom, left top, color-stop(0.85, white), color-stop(0.99, #eeeeee))
137
+ background-image: -webkit-linear-gradient(center bottom, white 85%, #eeeeee 99%)
138
+ background-image: -moz-linear-gradient(center bottom, white 85%, #eeeeee 99%)
139
+ background-image: -o-linear-gradient(bottom, white 85%, #eeeeee 99%)
140
+ background-image: -ms-linear-gradient(top, white 85%, #eeeeee 99%)
141
+ filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#eeeeee',GradientType=0 )
142
+ background-image: linear-gradient(top, white 85%, #eeeeee 99%)
143
+ border: 1px solid #aaa
144
+ margin: 0
145
+ padding: 0
146
+ cursor: text
147
+ overflow: hidden
148
+ height: auto !important
149
+ height: 1%
150
+ position: relative
151
+ li
152
+ float: left
153
+ list-style: none
154
+ .search-field
155
+ white-space: nowrap
156
+ margin: 0
157
+ padding: 0
158
+ input
159
+ color: #666
160
+ background: transparent !important
161
+ border: 0 !important
162
+ padding: 5px
163
+ margin: 1px 0
164
+ outline: 0
165
+ -webkit-box-shadow: none
166
+ -moz-box-shadow: none
167
+ -o-box-shadow: none
168
+ box-shadow: none
169
+ .default
170
+ color: #999
171
+ .search-choice
172
+ -webkit-border-radius: 3px
173
+ -moz-border-radius: 3px
174
+ border-radius: 3px
175
+ -moz-background-clip: padding
176
+ -webkit-background-clip: padding-box
177
+ background-clip: padding-box
178
+ background-color: #e4e4e4
179
+ background-image: -webkit-gradient(linear, left bottom, left top, color-stop(0, #e4e4e4), color-stop(0.7, #eeeeee))
180
+ background-image: -webkit-linear-gradient(center bottom, #e4e4e4 0%, #eeeeee 70%)
181
+ background-image: -moz-linear-gradient(center bottom, #e4e4e4 0%, #eeeeee 70%)
182
+ background-image: -o-linear-gradient(bottom, #e4e4e4 0%, #eeeeee 70%)
183
+ background-image: -ms-linear-gradient(top, #e4e4e4 0%, #eeeeee 70%)
184
+ filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#e4e4e4', endColorstr='#eeeeee',GradientType=0 )
185
+ background-image: linear-gradient(top, #e4e4e4 0%, #eeeeee 70%)
186
+ color: #333
187
+ border: 1px solid #b4b4b4
188
+ line-height: 13px
189
+ padding: 3px 19px 3px 6px
190
+ margin: 3px 0 3px 5px
191
+ position: relative
192
+ span
193
+ cursor: default
194
+ .search-choice-focus
195
+ background: #d4d4d4
196
+ .search-choice .search-choice-close
197
+ display: block
198
+ position: absolute
199
+ right: 3px
200
+ top: 4px
201
+ width: 12px
202
+ height: 13px
203
+ font-size: 1px
204
+ background: url(chosen-sprite.png) right top no-repeat
205
+ &:hover
206
+ background-position: right -11px
207
+ .search-choice-focus .search-choice-close
208
+ background-position: right -11px
209
+
210
+ /* @end
211
+
212
+ /* @group Results
213
+
214
+ .chzn-container .chzn-results
215
+ margin: 0 4px 4px 0
216
+ max-height: 190px
217
+ padding: 0 0 0 4px
218
+ position: relative
219
+ overflow-x: hidden
220
+ overflow-y: auto
221
+
222
+ .chzn-container-multi .chzn-results
223
+ margin: -1px 0 0
224
+ padding: 0
225
+
226
+ .chzn-container .chzn-results
227
+ li
228
+ display: none
229
+ line-height: 80%
230
+ padding: 7px 7px 8px
231
+ margin: 0
232
+ list-style: none
233
+ .active-result
234
+ cursor: pointer
235
+ display: list-item
236
+ .highlighted
237
+ background: #3875d7
238
+ color: #fff
239
+ li em
240
+ background: #feffde
241
+ font-style: normal
242
+ .highlighted em
243
+ background: transparent
244
+ .no-results
245
+ background: #f4f4f4
246
+ display: list-item
247
+ .group-result
248
+ cursor: default
249
+ color: #999
250
+ font-weight: bold
251
+ .group-option
252
+ padding-left: 20px
253
+
254
+ .chzn-container-multi .chzn-drop .result-selected
255
+ display: none
256
+
257
+ /* @end
258
+
259
+ /* @group Active
260
+
261
+ .chzn-container-active
262
+ .chzn-single
263
+ -webkit-box-shadow: 0 0 5px rgba(0, 0, 0, 0.3)
264
+ -moz-box-shadow: 0 0 5px rgba(0, 0, 0, 0.3)
265
+ -o-box-shadow: 0 0 5px rgba(0, 0, 0, 0.3)
266
+ box-shadow: 0 0 5px rgba(0, 0, 0, 0.3)
267
+ border: 1px solid #5897fb
268
+ .chzn-single-with-drop
269
+ border: 1px solid #aaa
270
+ -webkit-box-shadow: 0 1px 0 #fff inset
271
+ -moz-box-shadow: 0 1px 0 #fff inset
272
+ -o-box-shadow: 0 1px 0 #fff inset
273
+ box-shadow: 0 1px 0 #fff inset
274
+ background-color: #eee
275
+ background-image: -webkit-gradient(linear, left bottom, left top, color-stop(0, white), color-stop(0.5, #eeeeee))
276
+ background-image: -webkit-linear-gradient(center bottom, white 0%, #eeeeee 50%)
277
+ background-image: -moz-linear-gradient(center bottom, white 0%, #eeeeee 50%)
278
+ background-image: -o-linear-gradient(bottom, white 0%, #eeeeee 50%)
279
+ background-image: -ms-linear-gradient(top, white 0%, #eeeeee 50%)
280
+ filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#eeeeee',GradientType=0 )
281
+ background-image: linear-gradient(top, white 0%, #eeeeee 50%)
282
+ -webkit-border-bottom-left-radius: 0
283
+ -webkit-border-bottom-right-radius: 0
284
+ -moz-border-radius-bottomleft: 0
285
+ -moz-border-radius-bottomright: 0
286
+ border-bottom-left-radius: 0
287
+ border-bottom-right-radius: 0
288
+ div
289
+ background: transparent
290
+ border-left: none
291
+ b
292
+ background-position: -18px 1px
293
+ .chzn-choices
294
+ -webkit-box-shadow: 0 0 5px rgba(0, 0, 0, 0.3)
295
+ -moz-box-shadow: 0 0 5px rgba(0, 0, 0, 0.3)
296
+ -o-box-shadow: 0 0 5px rgba(0, 0, 0, 0.3)
297
+ box-shadow: 0 0 5px rgba(0, 0, 0, 0.3)
298
+ border: 1px solid #5897fb
299
+ .search-field input
300
+ color: #111 !important
301
+
302
+ /* @end
303
+
304
+ /* @group Disabled Support
305
+
306
+ .chzn-disabled
307
+ cursor: default
308
+ opacity: 0.5 !important
309
+ .chzn-single, .chzn-choices .search-choice .search-choice-close
310
+ cursor: default
311
+
312
+ /* @group Right to Left
313
+
314
+ .chzn-rtl
315
+ direction: rtl
316
+ text-align: right
317
+ .chzn-single
318
+ padding-left: 0
319
+ padding-right: 8px
320
+ span
321
+ margin-left: 26px
322
+ margin-right: 0
323
+ div
324
+ left: 0
325
+ right: auto
326
+ border-left: none
327
+ border-right: 1px solid #aaaaaa
328
+ -webkit-border-radius: 4px 0 0 4px
329
+ -moz-border-radius: 4px 0 0 4px
330
+ border-radius: 4px 0 0 4px
331
+ .chzn-choices
332
+ li
333
+ float: right
334
+ .search-choice
335
+ padding: 3px 6px 3px 19px
336
+ margin: 3px 5px 3px 0
337
+ .search-choice-close
338
+ left: 5px
339
+ right: auto
340
+ background-position: right top
341
+ &.chzn-container-single .chzn-results
342
+ margin-left: 4px
343
+ margin-right: 0
344
+ padding-left: 0
345
+ padding-right: 4px
346
+ .chzn-results .group-option
347
+ padding-left: 0
348
+ padding-right: 20px
349
+ &.chzn-container-active .chzn-single-with-drop div
350
+ border-right: none
351
+ .chzn-search input
352
+ background: url('chosen-sprite.png') no-repeat -38px -22px, white
353
+ background: url('chosen-sprite.png') no-repeat -38px -22px, -webkit-gradient(linear, left bottom, left top, color-stop(0.85, white), color-stop(0.99, #eeeeee))
354
+ background: url('chosen-sprite.png') no-repeat -38px -22px, -webkit-linear-gradient(center bottom, white 85%, #eeeeee 99%)
355
+ background: url('chosen-sprite.png') no-repeat -38px -22px, -moz-linear-gradient(center bottom, white 85%, #eeeeee 99%)
356
+ background: url('chosen-sprite.png') no-repeat -38px -22px, -o-linear-gradient(bottom, white 85%, #eeeeee 99%)
357
+ background: url('chosen-sprite.png') no-repeat -38px -22px, -ms-linear-gradient(top, white 85%, #eeeeee 99%)
358
+ background: url('chosen-sprite.png') no-repeat -38px -22px, linear-gradient(top, white 85%, #eeeeee 99%)
359
+ padding: 4px 5px 4px 20px
360
+
361
+ /* @end