chosen-rails 1.4.3 → 1.5.1

Sign up to get free protection for your applications and to get access to all the features.
checksums.yaml CHANGED
@@ -1,7 +1,7 @@
1
1
  ---
2
2
  SHA1:
3
- metadata.gz: a826802b6b2da40d23e07924bf90ab5c02284488
4
- data.tar.gz: 933c17475b7393f91d0c9e43118a365f7a7e786e
3
+ metadata.gz: 81ace370a178f7d64611c6febfbb6bc0c459d408
4
+ data.tar.gz: cd61fe46a06ae303bf76d59a2530982b72b6bc6e
5
5
  SHA512:
6
- metadata.gz: 9ccb7fa379d3d0a373fe3fa48e700d8df8906576558b383eba378bf58308a5daca848adbc63e3bb0856b41d5844a2f89ed1cc092ba7587abed0b8048ec4684f2
7
- data.tar.gz: f1fbdbb0317eb4077deaa41eace59496802c39db10df61630491395644c56377de58e8788070ce0352408eda356bb82e13e4c5c6a29162f241fc7f65f18d8745
6
+ metadata.gz: cd2b6f65bad6ce96f8a6851fad4ad77c8e62f843b3bb7b6b9381efcd39c736d282ab2ad10091d3a681cc390274368b2576bbd54bd6cca2696c39989e853dc009
7
+ data.tar.gz: 933f23d297202248eff2159ba16d80cc8a1c370f6ae805bc2e6fb3685cc7e43c3a371b548cc2497ee34e69b2a087209fecfc3adfc3ee9cb01c6e408a52675037
data/README.md CHANGED
@@ -11,11 +11,14 @@ The `chosen-rails` gem integrates the `Chosen` with the Rails asset pipeline.
11
11
  Include `chosen-rails` in Gemefile
12
12
 
13
13
  ```rb
14
+ gem 'compass-rails'
14
15
  gem 'chosen-rails'
15
16
  ```
16
17
 
17
18
  Then run `bundle install`
18
19
 
20
+ You need to add `compass-rails` manually since it is not a dependency from version 1.5.1.
21
+
19
22
  ### Include chosen javascript assets
20
23
 
21
24
  Add to your `app/assets/javascripts/application.js` if use with jQuery
@@ -34,6 +37,12 @@ Or with Prototype
34
37
 
35
38
  Add to your `app/assets/stylesheets/application.css`
36
39
 
40
+ ```scss
41
+ *= require chosen-compass
42
+ ```
43
+
44
+ or without `compass-rails`
45
+
37
46
  ```scss
38
47
  *= require chosen
39
48
  ```
@@ -73,7 +82,7 @@ Also add the class to your form field
73
82
  If you use simple form as form builder
74
83
 
75
84
  ```erb
76
- <%= f.association :author,
85
+ <%= f.association :author,
77
86
  collection: User.all,
78
87
  include_blank: true,
79
88
  input_html: { class: 'chosen-select' }
@@ -84,6 +93,51 @@ If you use simple form as form builder
84
93
 
85
94
  Since version 0.13.0, non-digested assets of `chosen-rails` will simply be copied from digested assets.
86
95
 
96
+ ## RSpec helpers
97
+ `chosen-rails` provides RSpec feature helper methods that allow users to select or unselect options from both single and multiple chosen elements. Add the following to your `spec/rails_helper.rb` (or `spec/spec_helper.rb`):
98
+
99
+ ```ruby
100
+ require 'chosen-rails/rspec'
101
+ ```
102
+
103
+ This automatically configures RSpec by adding:
104
+
105
+ ```ruby
106
+ RSpec.configure do |config|
107
+ config.include Chosen::Rspec::FeatureHelpers, type: :feature
108
+ end
109
+ ```
110
+
111
+ Configuration includes two additional methods for all `type: :feature` specs:
112
+
113
+ ```ruby
114
+ chosen_select(value, options = {})
115
+ chosen_unselect(value, options = {})
116
+ ```
117
+
118
+ Both methods require `from: '...'` inside the `options` hash that is either a CSS selector or a field's label (requires the `for` attribute on the label!).
119
+
120
+ ### Example usage
121
+ To handle a single select:
122
+
123
+ ```ruby
124
+ chosen_select('Leo Tolstoy', from: 'Author')
125
+ chosen_unselect('Leo Tolstoy', from: '#author')
126
+ chosen_select('Fyodor Dostoyevsky', from: '#author')
127
+ ```
128
+
129
+ To handle a multiple select:
130
+
131
+ ```ruby
132
+ chosen_select('Leo Tolstoy', 'Fyodor Dostoyevsky', 'Anton Chekhov', from: 'Authors')
133
+ # or, by single value:
134
+ chosen_select('Leo Tolstoy', from: '#authors')
135
+
136
+ chosen_unselect('Fyodor Dostoyevsky', ' Anton Chekhov', from: 'Authors')
137
+ # or, by single value:
138
+ chosen_unselect('Leo Tolstoy', from: '#authors')
139
+ ```
140
+
87
141
  ## Gem maintenance
88
142
 
89
143
  Maintain `chosen-rails` gem with `Rake` commands.
data/Rakefile CHANGED
@@ -9,5 +9,6 @@ task 'update-chosen', 'repository_url', 'branch' do |task, args|
9
9
  files = SourceFile.new
10
10
  files.fetch remote, branch
11
11
  files.eject_javascript_class_from_closure
12
+ files.remove_compass_lines
12
13
  files.cleanup
13
14
  end
@@ -20,13 +20,6 @@ Gem::Specification.new do |gem|
20
20
  gem.add_dependency 'coffee-rails', '>= 3.2'
21
21
  gem.add_dependency 'sass-rails', '>= 3.2'
22
22
 
23
- # compass-rails does not yet support sprockets >= 3
24
- if defined?(Rails) and Gem::Dependency.new('railties', '~> 3.0').match?('railties', Rails.version)
25
- gem.add_dependency 'compass-rails', '>= 1.1.2'
26
- else
27
- gem.add_dependency 'compass-rails', '>= 2.0.4'
28
- end
29
-
30
23
  gem.add_development_dependency 'bundler', '>= 1.0'
31
24
  gem.add_development_dependency 'rails', '>= 3.0'
32
25
  gem.add_development_dependency 'thor', '>= 0.14'
@@ -0,0 +1,92 @@
1
+ module Chosen
2
+ module Rspec
3
+ module FeatureHelpers
4
+ def chosen_select(value, *args)
5
+ options = args.extract_options!
6
+
7
+ input = chosen_input(options)
8
+
9
+ args.unshift(value).uniq.each { |item| chosen_select!(input, item) }
10
+ end
11
+
12
+ def chosen_unselect(value, *args)
13
+ options = args.extract_options!
14
+
15
+ input = chosen_input(options)
16
+
17
+ args.unshift(value).uniq.each { |item| chosen_unselect!(input, item) }
18
+ end
19
+
20
+ private
21
+
22
+ def chosen_input(options)
23
+ fail ArgumentError, 'Required argument from: not set' unless options.has_key?(:from)
24
+
25
+ from = options.delete(:from)
26
+
27
+ begin
28
+ input = chosen_find_container(from, options)
29
+ rescue Capybara::ElementNotFound
30
+ input = chosen_find_input(from, options)
31
+ end
32
+ end
33
+
34
+ def chosen_find_container(from, options)
35
+ from = from.to_s
36
+
37
+ id = from
38
+ id = "##{id}" unless from.start_with?('#')
39
+ id = "#{id}_chosen" unless from.end_with?('_chosen')
40
+
41
+ find(:css, id, options)
42
+ rescue Capybara::ElementNotFound
43
+ label = find('label', { text: from }.merge(options))
44
+
45
+ find(:css, "##{label[:for]}_chosen", options)
46
+ end
47
+
48
+ def chosen_find_input(from, options)
49
+ from = from.to_s
50
+ from = "##{from}" unless from.start_with?('#')
51
+
52
+ find(:css, from, options)
53
+ end
54
+
55
+ def chosen_multiselect?(input)
56
+ input.first('.chosen-container-multi').present?
57
+ end
58
+
59
+ def chosen_select!(input, item)
60
+ if input.tag_name == 'select'
61
+ input.find(:option, item).select_option
62
+ else
63
+ input.click
64
+
65
+ within "##{input[:id]} .chosen-drop .chosen-results" do
66
+ result = find('.active-result', text: item)
67
+
68
+ result.click if result.visible?
69
+ end
70
+ end
71
+ end
72
+
73
+ def chosen_unselect!(input, item)
74
+ if input.tag_name == 'select'
75
+ input.find(:option, item).unselect_option
76
+ else
77
+ if chosen_multiselect?(input)
78
+ input.first('.search-choice', text: item)
79
+ .first('.search-choice-close')
80
+ .click
81
+ else
82
+ input.first('.search-choice-close').click
83
+ end
84
+ end
85
+ end
86
+ end
87
+ end
88
+ end
89
+
90
+ RSpec.configure do |config|
91
+ config.include Chosen::Rspec::FeatureHelpers, type: :feature
92
+ end
@@ -9,7 +9,7 @@ class SourceFile < Thor
9
9
  self.destination_root = 'vendor/assets'
10
10
  get "#{remote}/raw/#{branch}/public/chosen-sprite.png", 'images/chosen-sprite.png'
11
11
  get "#{remote}/raw/#{branch}/public/chosen-sprite@2x.png", 'images/chosen-sprite@2x.png'
12
- get "#{remote}/raw/#{branch}/sass/chosen.scss", 'stylesheets/chosen.scss'
12
+ get "#{remote}/raw/#{branch}/sass/chosen.scss", 'stylesheets/chosen-base.scss'
13
13
  get "#{remote}/raw/#{branch}/coffee/lib/abstract-chosen.coffee", 'javascripts/lib/abstract-chosen.coffee'
14
14
  get "#{remote}/raw/#{branch}/coffee/lib/select-parser.coffee", 'javascripts/lib/select-parser.coffee'
15
15
  get "#{remote}/raw/#{branch}/coffee/chosen.jquery.coffee", 'javascripts/chosen.jquery.coffee'
@@ -31,6 +31,14 @@ class SourceFile < Thor
31
31
  end
32
32
  end
33
33
 
34
+ desc 'remove compass lines', 'remove compass lines'
35
+ def remove_compass_lines
36
+ self.destination_root = 'vendor/assets'
37
+ gsub_file 'stylesheets/chosen-base.scss', /^\s*\@include.*\n/, ''
38
+ gsub_file 'stylesheets/chosen-base.scss', /^\@import.*\n/, ''
39
+ gsub_file 'stylesheets/chosen-base.scss', /\n(\$chosen-sprite:)/, '\1'
40
+ end
41
+
34
42
  desc 'clean up useless files', 'clean up useless files'
35
43
  def cleanup
36
44
  self.destination_root = 'vendor/assets'
@@ -1,6 +1,6 @@
1
1
  module Chosen
2
2
  module Rails
3
- VERSION = '1.4.3'
4
- CHOSEN_VERSION = '1.4.2'
3
+ VERSION = '1.5.1'
4
+ CHOSEN_VERSION = '1.5.1'
5
5
  end
6
6
  end
@@ -8,9 +8,11 @@ $.fn.extend({
8
8
  this.each (input_field) ->
9
9
  $this = $ this
10
10
  chosen = $this.data('chosen')
11
- if options is 'destroy' && chosen instanceof Chosen
12
- chosen.destroy()
13
- else unless chosen instanceof Chosen
11
+ if options is 'destroy'
12
+ if chosen instanceof Chosen
13
+ chosen.destroy()
14
+ return
15
+ unless chosen instanceof Chosen
14
16
  $this.data('chosen', new Chosen(this, options))
15
17
 
16
18
  return
@@ -33,6 +33,7 @@ class AbstractChosen
33
33
  @display_disabled_options = if @options.display_disabled_options? then @options.display_disabled_options else true
34
34
  @include_group_label_in_selected = @options.include_group_label_in_selected || false
35
35
  @max_shown_results = @options.max_shown_results || Number.POSITIVE_INFINITY
36
+ @case_sensitive_search = @options.case_sensitive_search || false
36
37
 
37
38
  set_default_text: ->
38
39
  if @form_field.getAttribute("data-placeholder")
@@ -202,7 +203,8 @@ class AbstractChosen
202
203
 
203
204
  get_search_regex: (escaped_search_string) ->
204
205
  regex_anchor = if @search_contains then "" else "^"
205
- new RegExp(regex_anchor + escaped_search_string, 'i')
206
+ regex_flag = if @case_sensitive_search then "" else "i"
207
+ new RegExp(regex_anchor + escaped_search_string, regex_flag)
206
208
 
207
209
  search_string_match: (search_string, regex) ->
208
210
  if regex.test search_string
@@ -245,7 +247,7 @@ class AbstractChosen
245
247
  when 27
246
248
  this.results_hide() if @results_showing
247
249
  return true
248
- when 9, 38, 40, 16, 91, 17
250
+ when 9, 38, 40, 16, 91, 17, 18
249
251
  # don't do anything on these keys
250
252
  else this.results_search()
251
253
 
@@ -282,12 +284,15 @@ class AbstractChosen
282
284
  # class methods and variables ============================================================
283
285
 
284
286
  @browser_is_supported: ->
285
- if window.navigator.appName == "Microsoft Internet Explorer"
287
+ if "Microsoft Internet Explorer" is window.navigator.appName
286
288
  return document.documentMode >= 8
287
- if /iP(od|hone)/i.test(window.navigator.userAgent)
289
+ if /iP(od|hone)/i.test(window.navigator.userAgent) or
290
+ /IEMobile/i.test(window.navigator.userAgent) or
291
+ /Windows Phone/i.test(window.navigator.userAgent) or
292
+ /BlackBerry/i.test(window.navigator.userAgent) or
293
+ /BB10/i.test(window.navigator.userAgent) or
294
+ /Android.*Mobile/i.test(window.navigator.userAgent)
288
295
  return false
289
- if /Android/i.test(window.navigator.userAgent)
290
- return false if /Mobile/i.test(window.navigator.userAgent)
291
296
  return true
292
297
 
293
298
  @default_multiple_text: "Select Some Options"
@@ -0,0 +1,416 @@
1
+ $chosen-sprite: image-url('chosen-sprite.png') !default;
2
+ $chosen-sprite-retina: image-url('chosen-sprite@2x.png') !default;
3
+
4
+ /* @group Base */
5
+ .chosen-container {
6
+ position: relative;
7
+ display: inline-block;
8
+ vertical-align: middle;
9
+ font-size: 13px;
10
+ * {
11
+ }
12
+ .chosen-drop {
13
+ position: absolute;
14
+ top: 100%;
15
+ left: -9999px;
16
+ z-index: 1010;
17
+ width: 100%;
18
+ border: 1px solid #aaa;
19
+ border-top: 0;
20
+ background: #fff;
21
+ box-shadow: 0 4px 5px rgba(#000,.15);
22
+ }
23
+ &.chosen-with-drop .chosen-drop {
24
+ left: 0;
25
+ }
26
+ a{
27
+ cursor: pointer;
28
+ }
29
+
30
+ .search-choice, .chosen-single{
31
+ .group-name{
32
+ margin-right: 4px;
33
+ overflow: hidden;
34
+ white-space: nowrap;
35
+ text-overflow: ellipsis;
36
+ font-weight: normal;
37
+ color: #999999;
38
+ &:after {
39
+ content: ":";
40
+ padding-left: 2px;
41
+ vertical-align: top;
42
+ }
43
+ }
44
+ }
45
+ }
46
+ /* @end */
47
+
48
+ /* @group Single Chosen */
49
+ .chosen-container-single{
50
+ .chosen-single {
51
+ position: relative;
52
+ display: block;
53
+ overflow: hidden;
54
+ padding: 0 0 0 8px;
55
+ height: 25px;
56
+ border: 1px solid #aaa;
57
+ border-radius: 5px;
58
+ background-color: #fff;
59
+ background-clip: padding-box;
60
+ box-shadow: 0 0 3px #fff inset, 0 1px 1px rgba(#000,.1);
61
+ color: #444;
62
+ text-decoration: none;
63
+ white-space: nowrap;
64
+ line-height: 24px;
65
+ }
66
+ .chosen-default {
67
+ color: #999;
68
+ }
69
+ .chosen-single span {
70
+ display: block;
71
+ overflow: hidden;
72
+ margin-right: 26px;
73
+ text-overflow: ellipsis;
74
+ white-space: nowrap;
75
+ }
76
+ .chosen-single-with-deselect span {
77
+ margin-right: 38px;
78
+ }
79
+ .chosen-single abbr {
80
+ position: absolute;
81
+ top: 6px;
82
+ right: 26px;
83
+ display: block;
84
+ width: 12px;
85
+ height: 12px;
86
+ background: $chosen-sprite -42px 1px no-repeat;
87
+ font-size: 1px;
88
+ &:hover {
89
+ background-position: -42px -10px;
90
+ }
91
+ }
92
+ &.chosen-disabled .chosen-single abbr:hover {
93
+ background-position: -42px -10px;
94
+ }
95
+ .chosen-single div {
96
+ position: absolute;
97
+ top: 0;
98
+ right: 0;
99
+ display: block;
100
+ width: 18px;
101
+ height: 100%;
102
+ b {
103
+ display: block;
104
+ width: 100%;
105
+ height: 100%;
106
+ background: $chosen-sprite no-repeat 0px 2px;
107
+ }
108
+ }
109
+ .chosen-search {
110
+ position: relative;
111
+ z-index: 1010;
112
+ margin: 0;
113
+ padding: 3px 4px;
114
+ white-space: nowrap;
115
+ input[type="text"] {
116
+ margin: 1px 0;
117
+ padding: 4px 20px 4px 5px;
118
+ width: 100%;
119
+ height: auto;
120
+ outline: 0;
121
+ border: 1px solid #aaa;
122
+ background: #fff $chosen-sprite no-repeat 100% -20px;
123
+ font-size: 1em;
124
+ font-family: sans-serif;
125
+ line-height: normal;
126
+ border-radius: 0;
127
+ }
128
+ }
129
+ .chosen-drop {
130
+ margin-top: -1px;
131
+ border-radius: 0 0 4px 4px;
132
+ background-clip: padding-box;
133
+ }
134
+ &.chosen-container-single-nosearch .chosen-search {
135
+ position: absolute;
136
+ left: -9999px;
137
+ }
138
+ }
139
+ /* @end */
140
+
141
+ /* @group Results */
142
+ .chosen-container .chosen-results {
143
+ color: #444;
144
+ position: relative;
145
+ overflow-x: hidden;
146
+ overflow-y: auto;
147
+ margin: 0 4px 4px 0;
148
+ padding: 0 0 0 4px;
149
+ max-height: 240px;
150
+ -webkit-overflow-scrolling: touch;
151
+ li {
152
+ display: none;
153
+ margin: 0;
154
+ padding: 5px 6px;
155
+ list-style: none;
156
+ line-height: 15px;
157
+ word-wrap: break-word;
158
+ -webkit-touch-callout: none;
159
+ &.active-result {
160
+ display: list-item;
161
+ cursor: pointer;
162
+ }
163
+ &.disabled-result {
164
+ display: list-item;
165
+ color: #ccc;
166
+ cursor: default;
167
+ }
168
+ &.highlighted {
169
+ background-color: #3875d7;
170
+ color: #fff;
171
+ }
172
+ &.no-results {
173
+ color: #777;
174
+ display: list-item;
175
+ background: #f4f4f4;
176
+ }
177
+ &.group-result {
178
+ display: list-item;
179
+ font-weight: bold;
180
+ cursor: default;
181
+ }
182
+ &.group-option {
183
+ padding-left: 15px;
184
+ }
185
+ em {
186
+ font-style: normal;
187
+ text-decoration: underline;
188
+ }
189
+ }
190
+ }
191
+ /* @end */
192
+
193
+ /* @group Multi Chosen */
194
+ .chosen-container-multi{
195
+ .chosen-choices {
196
+ position: relative;
197
+ overflow: hidden;
198
+ margin: 0;
199
+ padding: 0 5px;
200
+ width: 100%;
201
+ height: auto;
202
+ border: 1px solid #aaa;
203
+ background-color: #fff;
204
+ cursor: text;
205
+ }
206
+ .chosen-choices li {
207
+ float: left;
208
+ list-style: none;
209
+ &.search-field {
210
+ margin: 0;
211
+ padding: 0;
212
+ white-space: nowrap;
213
+ input[type="text"] {
214
+ margin: 1px 0;
215
+ padding: 0;
216
+ height: 25px;
217
+ outline: 0;
218
+ border: 0 !important;
219
+ background: transparent !important;
220
+ box-shadow: none;
221
+ color: #999;
222
+ font-size: 100%;
223
+ font-family: sans-serif;
224
+ line-height: normal;
225
+ border-radius: 0;
226
+ }
227
+ }
228
+ &.search-choice {
229
+ position: relative;
230
+ margin: 3px 5px 3px 0;
231
+ padding: 3px 20px 3px 5px;
232
+ border: 1px solid #aaa;
233
+ max-width: 100%;
234
+ border-radius: 3px;
235
+ background-color: #eeeeee;
236
+ background-size: 100% 19px;
237
+ background-repeat: repeat-x;
238
+ background-clip: padding-box;
239
+ box-shadow: 0 0 2px #fff inset, 0 1px 0 rgba(#000,.05);
240
+ color: #333;
241
+ line-height: 13px;
242
+ cursor: default;
243
+ span {
244
+ word-wrap: break-word;
245
+ }
246
+ .search-choice-close {
247
+ position: absolute;
248
+ top: 4px;
249
+ right: 3px;
250
+ display: block;
251
+ width: 12px;
252
+ height: 12px;
253
+ background: $chosen-sprite -42px 1px no-repeat;
254
+ font-size: 1px;
255
+ &:hover {
256
+ background-position: -42px -10px;
257
+ }
258
+ }
259
+ }
260
+ &.search-choice-disabled {
261
+ padding-right: 5px;
262
+ border: 1px solid #ccc;
263
+ background-color: #e4e4e4;
264
+ color: #666;
265
+ }
266
+ &.search-choice-focus {
267
+ background: #d4d4d4;
268
+ .search-choice-close {
269
+ background-position: -42px -10px;
270
+ }
271
+ }
272
+ }
273
+ .chosen-results {
274
+ margin: 0;
275
+ padding: 0;
276
+ }
277
+ .chosen-drop .result-selected {
278
+ display: list-item;
279
+ color: #ccc;
280
+ cursor: default;
281
+ }
282
+ }
283
+ /* @end */
284
+
285
+ /* @group Active */
286
+ .chosen-container-active{
287
+ .chosen-single {
288
+ border: 1px solid #5897fb;
289
+ box-shadow: 0 0 5px rgba(#000,.3);
290
+ }
291
+ &.chosen-with-drop{
292
+ .chosen-single {
293
+ border: 1px solid #aaa;
294
+ -moz-border-radius-bottomright: 0;
295
+ border-bottom-right-radius: 0;
296
+ -moz-border-radius-bottomleft: 0;
297
+ border-bottom-left-radius: 0;
298
+ box-shadow: 0 1px 0 #fff inset;
299
+ }
300
+ .chosen-single div {
301
+ border-left: none;
302
+ background: transparent;
303
+ b {
304
+ background-position: -18px 2px;
305
+ }
306
+ }
307
+ }
308
+ .chosen-choices {
309
+ border: 1px solid #5897fb;
310
+ box-shadow: 0 0 5px rgba(#000,.3);
311
+ li.search-field input[type="text"] {
312
+ color: #222 !important;
313
+ }
314
+ }
315
+ }
316
+ /* @end */
317
+
318
+ /* @group Disabled Support */
319
+ .chosen-disabled {
320
+ opacity: 0.5 !important;
321
+ cursor: default;
322
+ .chosen-single {
323
+ cursor: default;
324
+ }
325
+ .chosen-choices .search-choice .search-choice-close {
326
+ cursor: default;
327
+ }
328
+ }
329
+ /* @end */
330
+
331
+ /* @group Right to Left */
332
+ .chosen-rtl {
333
+ text-align: right;
334
+ .chosen-single {
335
+ overflow: visible;
336
+ padding: 0 8px 0 0;
337
+ }
338
+ .chosen-single span {
339
+ margin-right: 0;
340
+ margin-left: 26px;
341
+ direction: rtl;
342
+ }
343
+ .chosen-single-with-deselect span {
344
+ margin-left: 38px;
345
+ }
346
+ .chosen-single div {
347
+ right: auto;
348
+ left: 3px;
349
+ }
350
+ .chosen-single abbr {
351
+ right: auto;
352
+ left: 26px;
353
+ }
354
+ .chosen-choices li {
355
+ float: right;
356
+ &.search-field input[type="text"] {
357
+ direction: rtl;
358
+ }
359
+ &.search-choice {
360
+ margin: 3px 5px 3px 0;
361
+ padding: 3px 5px 3px 19px;
362
+ .search-choice-close {
363
+ right: auto;
364
+ left: 4px;
365
+ }
366
+ }
367
+ }
368
+ &.chosen-container-single-nosearch .chosen-search,
369
+ .chosen-drop {
370
+ left: 9999px;
371
+ }
372
+ &.chosen-container-single .chosen-results {
373
+ margin: 0 0 4px 4px;
374
+ padding: 0 4px 0 0;
375
+ }
376
+ .chosen-results li.group-option {
377
+ padding-right: 15px;
378
+ padding-left: 0;
379
+ }
380
+ &.chosen-container-active.chosen-with-drop .chosen-single div {
381
+ border-right: none;
382
+ }
383
+ .chosen-search input[type="text"] {
384
+ padding: 4px 5px 4px 20px;
385
+ background: #fff $chosen-sprite no-repeat -30px -20px;
386
+ direction: rtl;
387
+ }
388
+ &.chosen-container-single{
389
+ .chosen-single div b {
390
+ background-position: 6px 2px;
391
+ }
392
+ &.chosen-with-drop{
393
+ .chosen-single div b {
394
+ background-position: -12px 2px;
395
+ }
396
+ }
397
+ }
398
+ }
399
+
400
+ /* @end */
401
+
402
+ /* @group Retina compatibility */
403
+ @media only screen and (-webkit-min-device-pixel-ratio: 1.5), only screen and (min-resolution: 144dpi), only screen and (min-resolution: 1.5dppx) {
404
+ .chosen-rtl .chosen-search input[type="text"],
405
+ .chosen-container-single .chosen-single abbr,
406
+ .chosen-container-single .chosen-single div b,
407
+ .chosen-container-single .chosen-search input[type="text"],
408
+ .chosen-container-multi .chosen-choices .search-choice .search-choice-close,
409
+ .chosen-container .chosen-results-scroll-down span,
410
+ .chosen-container .chosen-results-scroll-up span {
411
+ background-image: $chosen-sprite-retina !important;
412
+ background-size: 52px 37px !important;
413
+ background-repeat: no-repeat !important;
414
+ }
415
+ }
416
+ /* @end */
@@ -0,0 +1,60 @@
1
+ @import "chosen-base";
2
+
3
+ @import "compass/css3/box-sizing";
4
+ @import "compass/css3/images";
5
+ @import "compass/css3/user-interface";
6
+
7
+ $chosen-sprite: image-url('chosen-sprite.png') !default;
8
+ $chosen-sprite-retina: image-url('chosen-sprite@2x.png') !default;
9
+
10
+ .chosen-container {
11
+ @include user-select(none);
12
+ * {
13
+ @include box-sizing(border-box);
14
+ }
15
+ }
16
+
17
+ .chosen-container-single{
18
+ .chosen-single {
19
+ @include background(linear-gradient(#fff 20%, #f6f6f6 50%, #eee 52%, #f4f4f4 100%));
20
+ }
21
+ .chosen-search {
22
+ @include background($chosen-sprite no-repeat 100% -20px);
23
+ }
24
+ }
25
+
26
+ .chosen-container .chosen-results {
27
+ li {
28
+ &.highlighted {
29
+ @include background-image(linear-gradient(#3875d7 20%, #2a62bc 90%));
30
+ }
31
+ }
32
+ }
33
+
34
+ .chosen-container-multi{
35
+ .chosen-choices {
36
+ @include background-image(linear-gradient(#eee 1%, #fff 15%));
37
+ }
38
+ .chosen-choices li {
39
+ &.search-choice {
40
+ @include background-image(linear-gradient(#f4f4f4 20%, #f0f0f0 50%, #e8e8e8 52%, #eee 100%));
41
+ }
42
+ &.search-choice-disabled {
43
+ @include background-image(linear-gradient(#f4f4f4 20%, #f0f0f0 50%, #e8e8e8 52%, #eee 100%));
44
+ }
45
+ }
46
+ }
47
+
48
+ .chosen-container-active{
49
+ &.chosen-with-drop{
50
+ .chosen-single {
51
+ @include background-image(linear-gradient(#eee 20%, #fff 80%));
52
+ }
53
+ }
54
+ }
55
+
56
+ .chosen-rtl {
57
+ .chosen-search input[type="text"] {
58
+ @include background($chosen-sprite no-repeat -30px -20px);
59
+ }
60
+ }
@@ -1,433 +1,56 @@
1
- @import "compass/css3/box-sizing";
2
- @import "compass/css3/images";
3
- @import "compass/css3/user-interface";
1
+ @import "chosen-base";
4
2
 
5
3
  $chosen-sprite: image-url('chosen-sprite.png') !default;
6
4
  $chosen-sprite-retina: image-url('chosen-sprite@2x.png') !default;
7
5
 
8
- /* @group Base */
9
6
  .chosen-container {
10
- position: relative;
11
- display: inline-block;
12
- vertical-align: middle;
13
- font-size: 13px;
14
- zoom: 1;
15
- *display: inline;
16
- @include user-select(none);
7
+ user-select: none;
17
8
  * {
18
- @include box-sizing(border-box);
19
- }
20
- .chosen-drop {
21
- position: absolute;
22
- top: 100%;
23
- left: -9999px;
24
- z-index: 1010;
25
- width: 100%;
26
- border: 1px solid #aaa;
27
- border-top: 0;
28
- background: #fff;
29
- box-shadow: 0 4px 5px rgba(#000,.15);
30
- }
31
- &.chosen-with-drop .chosen-drop {
32
- left: 0;
33
- }
34
- a{
35
- cursor: pointer;
36
- }
37
-
38
- .search-choice, .chosen-single{
39
- .group-name{
40
- margin-right: 4px;
41
- overflow: hidden;
42
- white-space: nowrap;
43
- text-overflow: ellipsis;
44
- font-weight: normal;
45
- color: #999999;
46
- &:after {
47
- content: ":";
48
- padding-left: 2px;
49
- vertical-align: top;
50
- }
51
- }
9
+ box-sizing: border-box;
52
10
  }
53
11
  }
54
- /* @end */
55
12
 
56
- /* @group Single Chosen */
57
- .chosen-container-single{
13
+ .chosen-container-single {
58
14
  .chosen-single {
59
- position: relative;
60
- display: block;
61
- overflow: hidden;
62
- padding: 0 0 0 8px;
63
- height: 25px;
64
- border: 1px solid #aaa;
65
- border-radius: 5px;
66
- background-color: #fff;
67
- @include background(linear-gradient(#fff 20%, #f6f6f6 50%, #eee 52%, #f4f4f4 100%));
68
- background-clip: padding-box;
69
- box-shadow: 0 0 3px #fff inset, 0 1px 1px rgba(#000,.1);
70
- color: #444;
71
- text-decoration: none;
72
- white-space: nowrap;
73
- line-height: 24px;
74
- }
75
- .chosen-default {
76
- color: #999;
77
- }
78
- .chosen-single span {
79
- display: block;
80
- overflow: hidden;
81
- margin-right: 26px;
82
- text-overflow: ellipsis;
83
- white-space: nowrap;
84
- }
85
- .chosen-single-with-deselect span {
86
- margin-right: 38px;
87
- }
88
- .chosen-single abbr {
89
- position: absolute;
90
- top: 6px;
91
- right: 26px;
92
- display: block;
93
- width: 12px;
94
- height: 12px;
95
- background: $chosen-sprite -42px 1px no-repeat;
96
- font-size: 1px;
97
- &:hover {
98
- background-position: -42px -10px;
99
- }
100
- }
101
- &.chosen-disabled .chosen-single abbr:hover {
102
- background-position: -42px -10px;
103
- }
104
- .chosen-single div {
105
- position: absolute;
106
- top: 0;
107
- right: 0;
108
- display: block;
109
- width: 18px;
110
- height: 100%;
111
- b {
112
- display: block;
113
- width: 100%;
114
- height: 100%;
115
- background: $chosen-sprite no-repeat 0px 2px;
116
- }
15
+ background: linear-gradient(#fff 20%, #f6f6f6 50%, #eee 52%, #f4f4f4 100%);
117
16
  }
118
17
  .chosen-search {
119
- position: relative;
120
- z-index: 1010;
121
- margin: 0;
122
- padding: 3px 4px;
123
- white-space: nowrap;
124
- input[type="text"] {
125
- margin: 1px 0;
126
- padding: 4px 20px 4px 5px;
127
- width: 100%;
128
- height: auto;
129
- outline: 0;
130
- border: 1px solid #aaa;
131
- background: #fff $chosen-sprite no-repeat 100% -20px;
132
- @include background($chosen-sprite no-repeat 100% -20px);
133
- font-size: 1em;
134
- font-family: sans-serif;
135
- line-height: normal;
136
- border-radius: 0;
137
- }
138
- }
139
- .chosen-drop {
140
- margin-top: -1px;
141
- border-radius: 0 0 4px 4px;
142
- background-clip: padding-box;
143
- }
144
- &.chosen-container-single-nosearch .chosen-search {
145
- position: absolute;
146
- left: -9999px;
18
+ background: $chosen-sprite no-repeat 100% -20px;
147
19
  }
148
20
  }
149
- /* @end */
150
21
 
151
- /* @group Results */
152
22
  .chosen-container .chosen-results {
153
- color: #444;
154
- position: relative;
155
- overflow-x: hidden;
156
- overflow-y: auto;
157
- margin: 0 4px 4px 0;
158
- padding: 0 0 0 4px;
159
- max-height: 240px;
160
- -webkit-overflow-scrolling: touch;
161
23
  li {
162
- display: none;
163
- margin: 0;
164
- padding: 5px 6px;
165
- list-style: none;
166
- line-height: 15px;
167
- word-wrap: break-word;
168
- -webkit-touch-callout: none;
169
- &.active-result {
170
- display: list-item;
171
- cursor: pointer;
172
- }
173
- &.disabled-result {
174
- display: list-item;
175
- color: #ccc;
176
- cursor: default;
177
- }
178
24
  &.highlighted {
179
- background-color: #3875d7;
180
- @include background-image(linear-gradient(#3875d7 20%, #2a62bc 90%));
181
- color: #fff;
182
- }
183
- &.no-results {
184
- color: #777;
185
- display: list-item;
186
- background: #f4f4f4;
187
- }
188
- &.group-result {
189
- display: list-item;
190
- font-weight: bold;
191
- cursor: default;
192
- }
193
- &.group-option {
194
- padding-left: 15px;
195
- }
196
- em {
197
- font-style: normal;
198
- text-decoration: underline;
25
+ background-image: linear-gradient(#3875d7 20%, #2a62bc 90%);
199
26
  }
200
27
  }
201
28
  }
202
- /* @end */
203
29
 
204
- /* @group Multi Chosen */
205
- .chosen-container-multi{
30
+ .chosen-container-multi {
206
31
  .chosen-choices {
207
- position: relative;
208
- overflow: hidden;
209
- margin: 0;
210
- padding: 0 5px;
211
- width: 100%;
212
- height: auto !important;
213
- height: 1%;
214
- border: 1px solid #aaa;
215
- background-color: #fff;
216
- @include background-image(linear-gradient(#eee 1%, #fff 15%));
217
- cursor: text;
32
+ background-image: linear-gradient(#eee 1%, #fff 15%);
218
33
  }
219
34
  .chosen-choices li {
220
- float: left;
221
- list-style: none;
222
- &.search-field {
223
- margin: 0;
224
- padding: 0;
225
- white-space: nowrap;
226
- input[type="text"] {
227
- margin: 1px 0;
228
- padding: 0;
229
- height: 25px;
230
- outline: 0;
231
- border: 0 !important;
232
- background: transparent !important;
233
- box-shadow: none;
234
- color: #999;
235
- font-size: 100%;
236
- font-family: sans-serif;
237
- line-height: normal;
238
- border-radius: 0;
239
- }
240
- }
241
35
  &.search-choice {
242
- position: relative;
243
- margin: 3px 5px 3px 0;
244
- padding: 3px 20px 3px 5px;
245
- border: 1px solid #aaa;
246
- max-width: 100%;
247
- border-radius: 3px;
248
- background-color: #eeeeee;
249
- @include background-image(linear-gradient(#f4f4f4 20%, #f0f0f0 50%, #e8e8e8 52%, #eee 100%));
250
- background-size: 100% 19px;
251
- background-repeat: repeat-x;
252
- background-clip: padding-box;
253
- box-shadow: 0 0 2px #fff inset, 0 1px 0 rgba(#000,.05);
254
- color: #333;
255
- line-height: 13px;
256
- cursor: default;
257
- span {
258
- word-wrap: break-word;
259
- }
260
- .search-choice-close {
261
- position: absolute;
262
- top: 4px;
263
- right: 3px;
264
- display: block;
265
- width: 12px;
266
- height: 12px;
267
- background: $chosen-sprite -42px 1px no-repeat;
268
- font-size: 1px;
269
- &:hover {
270
- background-position: -42px -10px;
271
- }
272
- }
36
+ background-image: linear-gradient(#f4f4f4 20%, #f0f0f0 50%, #e8e8e8 52%, #eee 100%);
273
37
  }
274
38
  &.search-choice-disabled {
275
- padding-right: 5px;
276
- border: 1px solid #ccc;
277
- background-color: #e4e4e4;
278
- @include background-image(linear-gradient(#f4f4f4 20%, #f0f0f0 50%, #e8e8e8 52%, #eee 100%));
279
- color: #666;
280
- }
281
- &.search-choice-focus {
282
- background: #d4d4d4;
283
- .search-choice-close {
284
- background-position: -42px -10px;
285
- }
39
+ background-image: linear-gradient(#f4f4f4 20%, #f0f0f0 50%, #e8e8e8 52%, #eee 100%);
286
40
  }
287
41
  }
288
- .chosen-results {
289
- margin: 0;
290
- padding: 0;
291
- }
292
- .chosen-drop .result-selected {
293
- display: list-item;
294
- color: #ccc;
295
- cursor: default;
296
- }
297
42
  }
298
- /* @end */
299
43
 
300
- /* @group Active */
301
- .chosen-container-active{
302
- .chosen-single {
303
- border: 1px solid #5897fb;
304
- box-shadow: 0 0 5px rgba(#000,.3);
305
- }
44
+ .chosen-container-active {
306
45
  &.chosen-with-drop{
307
46
  .chosen-single {
308
- border: 1px solid #aaa;
309
- -moz-border-radius-bottomright: 0;
310
- border-bottom-right-radius: 0;
311
- -moz-border-radius-bottomleft: 0;
312
- border-bottom-left-radius: 0;
313
- @include background-image(linear-gradient(#eee 20%, #fff 80%));
314
- box-shadow: 0 1px 0 #fff inset;
315
- }
316
- .chosen-single div {
317
- border-left: none;
318
- background: transparent;
319
- b {
320
- background-position: -18px 2px;
321
- }
47
+ background-image: linear-gradient(#eee 20%, #fff 80%);
322
48
  }
323
49
  }
324
- .chosen-choices {
325
- border: 1px solid #5897fb;
326
- box-shadow: 0 0 5px rgba(#000,.3);
327
- li.search-field input[type="text"] {
328
- color: #222 !important;
329
- }
330
- }
331
- }
332
- /* @end */
333
-
334
- /* @group Disabled Support */
335
- .chosen-disabled {
336
- opacity: 0.5 !important;
337
- cursor: default;
338
- .chosen-single {
339
- cursor: default;
340
- }
341
- .chosen-choices .search-choice .search-choice-close {
342
- cursor: default;
343
- }
344
50
  }
345
- /* @end */
346
51
 
347
- /* @group Right to Left */
348
52
  .chosen-rtl {
349
- text-align: right;
350
- .chosen-single {
351
- overflow: visible;
352
- padding: 0 8px 0 0;
353
- }
354
- .chosen-single span {
355
- margin-right: 0;
356
- margin-left: 26px;
357
- direction: rtl;
358
- }
359
- .chosen-single-with-deselect span {
360
- margin-left: 38px;
361
- }
362
- .chosen-single div {
363
- right: auto;
364
- left: 3px;
365
- }
366
- .chosen-single abbr {
367
- right: auto;
368
- left: 26px;
369
- }
370
- .chosen-choices li {
371
- float: right;
372
- &.search-field input[type="text"] {
373
- direction: rtl;
374
- }
375
- &.search-choice {
376
- margin: 3px 5px 3px 0;
377
- padding: 3px 5px 3px 19px;
378
- .search-choice-close {
379
- right: auto;
380
- left: 4px;
381
- }
382
- }
383
- }
384
- &.chosen-container-single-nosearch .chosen-search,
385
- .chosen-drop {
386
- left: 9999px;
387
- }
388
- &.chosen-container-single .chosen-results {
389
- margin: 0 0 4px 4px;
390
- padding: 0 4px 0 0;
391
- }
392
- .chosen-results li.group-option {
393
- padding-right: 15px;
394
- padding-left: 0;
395
- }
396
- &.chosen-container-active.chosen-with-drop .chosen-single div {
397
- border-right: none;
398
- }
399
53
  .chosen-search input[type="text"] {
400
- padding: 4px 5px 4px 20px;
401
- background: #fff $chosen-sprite no-repeat -30px -20px;
402
- @include background($chosen-sprite no-repeat -30px -20px);
403
- direction: rtl;
404
- }
405
- &.chosen-container-single{
406
- .chosen-single div b {
407
- background-position: 6px 2px;
408
- }
409
- &.chosen-with-drop{
410
- .chosen-single div b {
411
- background-position: -12px 2px;
412
- }
413
- }
414
- }
415
- }
416
-
417
- /* @end */
418
-
419
- /* @group Retina compatibility */
420
- @media only screen and (-webkit-min-device-pixel-ratio: 1.5), only screen and (min-resolution: 144dpi), only screen and (min-resolution: 1.5dppx) {
421
- .chosen-rtl .chosen-search input[type="text"],
422
- .chosen-container-single .chosen-single abbr,
423
- .chosen-container-single .chosen-single div b,
424
- .chosen-container-single .chosen-search input[type="text"],
425
- .chosen-container-multi .chosen-choices .search-choice .search-choice-close,
426
- .chosen-container .chosen-results-scroll-down span,
427
- .chosen-container .chosen-results-scroll-up span {
428
- background-image: $chosen-sprite-retina !important;
429
- background-size: 52px 37px !important;
430
- background-repeat: no-repeat !important;
54
+ background: $chosen-sprite no-repeat -30px -20px;
431
55
  }
432
56
  }
433
- /* @end */
metadata CHANGED
@@ -1,14 +1,14 @@
1
1
  --- !ruby/object:Gem::Specification
2
2
  name: chosen-rails
3
3
  version: !ruby/object:Gem::Version
4
- version: 1.4.3
4
+ version: 1.5.1
5
5
  platform: ruby
6
6
  authors:
7
7
  - Tse-Ching Ho
8
8
  autorequire:
9
9
  bindir: bin
10
10
  cert_chain: []
11
- date: 2015-08-29 00:00:00.000000000 Z
11
+ date: 2016-04-18 00:00:00.000000000 Z
12
12
  dependencies:
13
13
  - !ruby/object:Gem::Dependency
14
14
  name: railties
@@ -52,20 +52,6 @@ dependencies:
52
52
  - - ">="
53
53
  - !ruby/object:Gem::Version
54
54
  version: '3.2'
55
- - !ruby/object:Gem::Dependency
56
- name: compass-rails
57
- requirement: !ruby/object:Gem::Requirement
58
- requirements:
59
- - - ">="
60
- - !ruby/object:Gem::Version
61
- version: 2.0.4
62
- type: :runtime
63
- prerelease: false
64
- version_requirements: !ruby/object:Gem::Requirement
65
- requirements:
66
- - - ">="
67
- - !ruby/object:Gem::Version
68
- version: 2.0.4
69
55
  - !ruby/object:Gem::Dependency
70
56
  name: bundler
71
57
  requirement: !ruby/object:Gem::Requirement
@@ -126,6 +112,7 @@ files:
126
112
  - lib/chosen-rails/engine.rb
127
113
  - lib/chosen-rails/engine3.rb
128
114
  - lib/chosen-rails/railtie.rb
115
+ - lib/chosen-rails/rspec.rb
129
116
  - lib/chosen-rails/source_file.rb
130
117
  - lib/chosen-rails/tasks.rake
131
118
  - lib/chosen-rails/version.rb
@@ -137,6 +124,8 @@ files:
137
124
  - vendor/assets/javascripts/chosen.proto.coffee
138
125
  - vendor/assets/javascripts/lib/abstract-chosen.coffee
139
126
  - vendor/assets/javascripts/lib/select-parser.coffee
127
+ - vendor/assets/stylesheets/chosen-base.scss
128
+ - vendor/assets/stylesheets/chosen-compass.scss
140
129
  - vendor/assets/stylesheets/chosen.scss
141
130
  homepage: https://github.com/tsechingho/chosen-rails
142
131
  licenses:
@@ -158,7 +147,7 @@ required_rubygems_version: !ruby/object:Gem::Requirement
158
147
  version: '0'
159
148
  requirements: []
160
149
  rubyforge_project:
161
- rubygems_version: 2.4.8
150
+ rubygems_version: 2.5.1
162
151
  signing_key:
163
152
  specification_version: 4
164
153
  summary: Integrate Chosen javascript library with Rails asset pipeline