chosen-rails 1.4.3 → 1.5.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
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