chosen-awesome-rails 1.0.0 → 1.0.2

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.
@@ -0,0 +1,7 @@
1
+ ---
2
+ SHA1:
3
+ metadata.gz: a520111beb5680aaae507d0281c70d23e13cd318
4
+ data.tar.gz: 6602e21c49d725065ba7d5a609ce892f4b1a34a2
5
+ SHA512:
6
+ metadata.gz: 301ad7f526f6de1027a51fae053ecb839770796fb06be5b734f2d00457f866d10a6b14ad1a8ba71e31d077d6f5a5d738b721d3c98e5f767874bfd7ca260080de
7
+ data.tar.gz: 48fa46865fd676b969671a46ba7f630f8d5d08521acd2685323c4f62a899d6eb65f04814c6e03f7da3a3f5d5a527af762f34a55c1c76a79a018b66694862af73
@@ -1,7 +1,7 @@
1
1
  PATH
2
2
  remote: .
3
3
  specs:
4
- chosen-awesome-rails (1.0.0)
4
+ chosen-awesome-rails (1.0.2)
5
5
  coffee-rails (>= 3.2)
6
6
  railties (>= 3.0)
7
7
  sass-rails (>= 3.2)
data/README.md CHANGED
@@ -1,7 +1,7 @@
1
- # Chosen awesome (with ajax support and dynamic options injection)
1
+ # Chosen awesome (with ajax support and "on the fly" options insertion)
2
2
 
3
- A written from the scratch library that wraps around default html select controls
4
- and makes them more user friendly (Ruby on Rails package).
3
+ A written from scratch library that wraps around default html select controls
4
+ and makes them more user friendly (Ruby on Rails package). Out of the box ajax support.
5
5
 
6
6
  ## Usage
7
7
 
@@ -38,20 +38,22 @@ Default options are:
38
38
 
39
39
  ```javascript
40
40
  {
41
- allow_insertion: false, // allows to add missing options dynamically, e.g. when you
42
- // need to show a list of tags allowing users to add missing ones
43
- inherit_classes: true, // whether chosen should inherit html class names from the
44
- // original select element
45
- option_parser: null, // a function that should return an object that
46
- // will be passed right to jQuery's append method to build
47
- // html option elemets: $("<option />", parsed_object)
48
- option_formatter: null // a function that accepts an option object (jquery selector)
41
+ allow_insertion: false, // Allows to add missing options dynamically, e.g. when you
42
+ // need to show a list of tags allowing users to add missing ones.
43
+ inherit_classes: true, // Whether chosen should inherit html class names from the
44
+ // original select element or not.
45
+ option_parser: null, // A function that should return an object that
46
+ // will be passed to jQuery to build html option elemets:
47
+ // $("<option />", parsed_object).
48
+ option_formatter: null // A function that accepts an option object (jquery selector)
49
49
  // and returns an array of 2 values where one is used
50
50
  // for the dropdown item and another for the choice element
51
+ placeholder: "..." // Custom placeholder text (by default it will try to read it
52
+ // from the target element)
51
53
  }
52
54
  ```
53
55
 
54
- Dynamic insertion example:
56
+ On the fly options insertion:
55
57
 
56
58
  ![Dynamic insertion example]
57
59
  (http://oi62.tinypic.com/14kb808.jpg)
@@ -87,3 +89,9 @@ And pass the next ajax options:
87
89
  }
88
90
  }
89
91
  ```
92
+
93
+ ### JS events
94
+
95
+ Once chosen is ready it triggers `chosen:ready` event on the target element.
96
+ A link to the newly created Chosen object will be saved in the data-chosen attribute
97
+ of the target select element.
@@ -3,12 +3,12 @@
3
3
 
4
4
  Gem::Specification.new do |s|
5
5
  s.name = "chosen-awesome-rails"
6
- s.version = "1.0.0"
6
+ s.version = "1.0.2"
7
7
 
8
8
  s.required_rubygems_version = Gem::Requirement.new(">= 0") if s.respond_to? :required_rubygems_version=
9
9
  s.require_paths = ["lib"]
10
10
  s.authors = ["heaven"]
11
- s.date = "2013-08-04"
11
+ s.date = "2015-03-24"
12
12
  s.description = "Chosen is a javascript library of select box enhancer for jQuery, integrates with Rails asset pipeline for ease of use."
13
13
  s.email = ["alex@codeart.pw"]
14
14
  s.files = [".gitignore", "Gemfile", "Gemfile.lock", "LICENSE.txt", "README.md", "Rakefile", "chosen-awesome-rails.gemspec", "lib/chosen-awesome-rails.rb", "lib/chosen-awesome-rails/engine.rb", "lib/chosen-awesome-rails/engine3.rb", "lib/chosen-awesome-rails/version.rb", "vendor/assets/images/chosen-arrow.gif", "vendor/assets/javascripts/chosen.js.coffee", "vendor/assets/javascripts/chosen/chosen.js.coffee", "vendor/assets/javascripts/chosen/multiple.js.coffee", "vendor/assets/javascripts/chosen/parser.js.coffee", "vendor/assets/javascripts/chosen/single.js.coffee", "vendor/assets/stylesheets/chosen.css.scss", "vendor/assets/stylesheets/chosen/bootstrap.css.scss", "vendor/assets/stylesheets/chosen/default.css.scss"]
@@ -18,21 +18,16 @@ class Chosen
18
18
 
19
19
  @build()
20
20
  @load()
21
- @complete()
22
21
 
23
- complete: ->
24
22
  Chosen.pool.push(@)
25
23
 
26
- if @target.disabled
27
- @disabled = false
28
- @disable()
29
- else
30
- @disabled = true
31
- @enable()
24
+ @set_state()
32
25
 
33
- @$target.addClass("chosen").after(@$container)
26
+ @$target.addClass("chosen").after(@$container).bind("chosen:update", (evt) => @set_state())
34
27
 
35
28
  destroy: ->
29
+ @$target.unbind "chosen:update"
30
+
36
31
  @unbind_events()
37
32
 
38
33
  delete @$body
@@ -53,6 +48,14 @@ class Chosen
53
48
  index = Chosen.pool.indexOf(@)
54
49
  Chosen.pool.splice(index, 1) if index >= 0
55
50
 
51
+ set_state: ->
52
+ if @target.disabled
53
+ @disabled = false
54
+ @disable()
55
+ else
56
+ @disabled = true
57
+ @enable()
58
+
56
59
  reset: ->
57
60
  @deselect_all()
58
61
 
@@ -68,11 +71,14 @@ class Chosen
68
71
  select_classes.push "rtl" if @is_rtl
69
72
  select_classes.push @target.className if @inherit_classes and @target.className
70
73
 
71
- width = if @width? then @width else "#{@target.offsetWidth}px"
72
-
73
74
  container_props =
74
75
  class: select_classes.join ' '
75
- style: "width: #{width}; min-width: #{width}; max-width: #{width}"
76
+ css: if @width? then { width: @width } else @getCSSProperties(@target, ["width", "min-width", "max-width"])
77
+
78
+ attrs = @getCSSProperties(@target, ["height"])
79
+
80
+ if attrs.height
81
+ container_props.css['min-height'] = attrs.height
76
82
 
77
83
  container_props.title = @target.title if @target.title.length
78
84
  container_props.id = @target.id.replace(/[^\w]/g, '-') + "-chosen" if @target.id
@@ -99,6 +105,28 @@ class Chosen
99
105
  @$dropdown.$list.$no_results = $("<li />", class: "chosen-noresults")
100
106
  @$dropdown.$list.suggestion = null
101
107
 
108
+ getCSSProperties: (node, properties)->
109
+ sheets = document.styleSheets
110
+ node.matches = node.matches or node.webkitMatchesSelector or node.mozMatchesSelector or node.msMatchesSelector or node.oMatchesSelector
111
+ matches = []
112
+ attrs = {}
113
+
114
+ for i of sheets
115
+ rules = sheets[i].rules or sheets[i].cssRules
116
+
117
+ for r of rules
118
+ if node.matches(rules[r].selectorText)
119
+ matches.push rules[r].cssText
120
+
121
+ for p in properties
122
+ for m in matches
123
+ match = m.match(new RegExp("(?:\\s|;|^)#{p}:\\s*([^;]+)"))
124
+
125
+ if match
126
+ attrs[p] = match[1]
127
+
128
+ attrs
129
+
102
130
  bind_events: ->
103
131
  if @target.id.length
104
132
  $("label[for=#{@target.id}]").bind "click", (evt) =>
@@ -206,6 +234,7 @@ class Chosen
206
234
 
207
235
  @$dropdown.bind "mouseover", "li.chosen-option", (evt) => @dropdown_mouseover(evt)
208
236
  @$dropdown.bind "mousedown", "li.chosen-option", (evt) => @dropdown_mousedown(evt)
237
+ @$dropdown.bind "mousewheel DOMMouseScroll", (evt) => @prevent_page_scroll(evt)
209
238
 
210
239
  @$container.addClass("opened")
211
240
  @$dropdown.addClass("opened")
@@ -217,7 +246,7 @@ class Chosen
217
246
 
218
247
  @$container.removeClass("opened")
219
248
  @$dropdown.removeClass("opened")
220
- @$dropdown.unbind "mouseover mousedown"
249
+ @$dropdown.unbind "mouseover mousedown mousewheel DOMMouseScroll"
221
250
  @$dropdown.remove()
222
251
  @opened = false
223
252
 
@@ -258,6 +287,14 @@ class Chosen
258
287
  evt.stopImmediatePropagation()
259
288
  return
260
289
 
290
+ prevent_page_scroll: (evt) ->
291
+ delta = evt.originalEvent.wheelDelta || -evt.originalEvent.detail
292
+
293
+ if (delta < 0 and @$dropdown.$list[0].scrollHeight - @$dropdown.scrollTop() == @$dropdown.innerHeight()) or (delta > 0 and @$dropdown.scrollTop() == 0)
294
+ evt.preventDefault()
295
+
296
+ return
297
+
261
298
  keydown: (evt) ->
262
299
  code = evt.which ? evt.keyCode
263
300
 
@@ -310,10 +347,9 @@ class Chosen
310
347
  update_dropdown_position: ->
311
348
  return unless @opened
312
349
 
313
- list = @$container.find("ul")
314
- offsets = list.offset()
315
- height = list.innerHeight()
316
- width = list.innerWidth()
350
+ offsets = @$container.offset()
351
+ height = @$container.innerHeight()
352
+ width = @$container.innerWidth()
317
353
 
318
354
  @$dropdown.css
319
355
  left: "#{offsets.left}px",
@@ -376,7 +412,7 @@ class Chosen
376
412
  @move_selection_to(cursor)
377
413
 
378
414
  if @cursor_option and @cursor_option.selected and @parser.selectable_options.length
379
- # TODO: optimize this
415
+ # TODO: optimize this, could be slow on big lists
380
416
  return @move_selection(dir)
381
417
 
382
418
  return @
@@ -1,44 +1,51 @@
1
1
  .chosen-container {
2
+ border: 1px solid #cccccc;
3
+ -webkit-transition: border linear 0.2s, box-shadow linear 0.2s;
4
+ -moz-transition: border linear 0.2s, box-shadow linear 0.2s;
5
+ -o-transition: border linear 0.2s, box-shadow linear 0.2s;
6
+ transition: border linear 0.2s, box-shadow linear 0.2s;
7
+ -webkit-border-radius: 4px;
8
+ -moz-border-radius: 4px;
9
+ border-radius: 4px;
10
+ -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
11
+ -moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
12
+ box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
13
+ box-sizing: border-box;
14
+
2
15
  ul.chosen-choices {
3
16
  color: #555555;
4
- border: 1px solid #cccccc;
5
- -webkit-transition: border linear 0.2s, box-shadow linear 0.2s;
6
- -moz-transition: border linear 0.2s, box-shadow linear 0.2s;
7
- -o-transition: border linear 0.2s, box-shadow linear 0.2s;
8
- transition: border linear 0.2s, box-shadow linear 0.2s;
9
- -webkit-border-radius: 4px;
10
- -moz-border-radius: 4px;
11
- border-radius: 4px;
12
- -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
13
- -moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
14
- box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
17
+
18
+ li.chosen-search-field {
19
+ input {
20
+ padding: 0;
21
+ height: 100%;
22
+ }
23
+ }
24
+ }
25
+
26
+ > a.chosen-delete {
27
+ right: 25px;
15
28
  }
16
29
  }
17
30
 
18
31
  .chosen-container.disabled {
19
- ul.chosen-choices {
20
- background-color: #eee;
21
- }
32
+ background-color: #eee;
22
33
  }
23
34
 
24
35
  .chosen-container.focus {
25
- ul.chosen-choices {
26
- border-color: rgba(82, 168, 236, 0.8);
27
- -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(82, 168, 236, 0.6);
28
- -moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(82, 168, 236, 0.6);
29
- box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(82, 168, 236, 0.6);
30
- }
36
+ border-color: rgba(82, 168, 236, 0.8);
37
+ -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(82, 168, 236, 0.6);
38
+ -moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(82, 168, 236, 0.6);
39
+ box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(82, 168, 236, 0.6);
31
40
  }
32
41
 
33
42
  .chosen-container.opened {
34
- ul.chosen-choices {
35
- -webkit-border-bottom-left-radius: 0;
36
- -webkit-border-bottom-right-radius: 0;
37
- -moz-border-bottom-left-radius: 0;
38
- -moz-border-bottom-right-radius: 0;
39
- border-bottom-left-radius: 0;
40
- border-bottom-right-radius: 0;
41
- }
43
+ -webkit-border-bottom-left-radius: 0;
44
+ -webkit-border-bottom-right-radius: 0;
45
+ -moz-border-bottom-left-radius: 0;
46
+ -moz-border-bottom-right-radius: 0;
47
+ border-bottom-left-radius: 0;
48
+ border-bottom-right-radius: 0;
42
49
  }
43
50
 
44
51
  .chosen-dropdown {
@@ -8,7 +8,6 @@ $background_color_default: #fff;
8
8
  $background_color_active: rgba(82, 168, 236, 1);
9
9
  $background_color_disabled: #efefef;
10
10
 
11
- $color_default: #555;
12
11
  $color_disabled: #989898;
13
12
  $color_selected: #989898;
14
13
  $group_color: #a0a0a0;
@@ -25,22 +24,15 @@ $color_active: #fff;
25
24
  display: inline-block;
26
25
  *display: inline;
27
26
  vertical-align: middle;
27
+ height: auto !important;
28
28
  outline: none;
29
29
  cursor: default;
30
- border: none;
30
+ border-width: 1px;
31
+ border-style: solid;
32
+ border-color: $border_color_default;
33
+ background-color: $background_color_default;
31
34
  zoom: 1;
32
35
 
33
- > a.chosen-delete {
34
- position: absolute;
35
- right: 12px;
36
- top: 4px;
37
- }
38
-
39
- a.chosen-delete:hover {
40
- color: #333;
41
- text-decoration: none;
42
- }
43
-
44
36
  a.chosen-delete {
45
37
  padding: 0 5px;
46
38
  margin: 0;
@@ -50,6 +42,24 @@ $color_active: #fff;
50
42
  text-decoration: none;
51
43
  }
52
44
 
45
+ a.chosen-delete:hover {
46
+ color: #333;
47
+ text-decoration: none;
48
+ }
49
+
50
+ > a.chosen-delete {
51
+ position: absolute;
52
+ right: 10px;
53
+ top: 50%;
54
+ width: 10px;
55
+ height: 15px;
56
+ padding: 0;
57
+ margin: -8px auto 0 auto;
58
+ text-align: center;
59
+ font-size: 15px;
60
+ line-height: 1;
61
+ }
62
+
53
63
  ul.chosen-choices {
54
64
  position: relative;
55
65
  overflow: hidden;
@@ -58,14 +68,10 @@ $color_active: #fff;
58
68
  padding: 0 24px 0 0;
59
69
  margin: 0;
60
70
  width: auto;
61
- height: auto;
62
- border-width: 1px;
63
- border-style: solid;
64
- border-color: $border_color_default;
71
+ height: 100%;
65
72
  background-repeat: no-repeat;
66
73
  background-position: right center;
67
74
  background-image: url($arrow_image_path);
68
- background-color: $background_color_default;
69
75
 
70
76
  li {
71
77
  position: relative;
@@ -77,13 +83,13 @@ $color_active: #fff;
77
83
 
78
84
  li.chosen-search-field {
79
85
  width: 100%;
86
+ height: 100%;
80
87
 
81
88
  input {
82
89
  position: relative;
83
90
  float: left;
84
91
  width: 100%;
85
92
  margin: 0;
86
- color: $color_default;
87
93
  outline: none;
88
94
  cursor: text;
89
95
  border: none;
@@ -127,7 +133,7 @@ $color_active: #fff;
127
133
  ul.chosen-choices {
128
134
  li.chosen-option {
129
135
  padding: 0 5px 0 0;
130
- margin: 3px 0 0 3px;
136
+ margin: 0 3px 3px 0;
131
137
  border: 1px solid #aaa;
132
138
  border-radius: 3px;
133
139
  background-color: #e4e4e4;
@@ -201,7 +207,7 @@ $color_active: #fff;
201
207
  border: 1px solid $border_color_active;
202
208
  border-top: none;
203
209
  background: $background_color_default;
204
- z-index: 100;
210
+ z-index: 10000;
205
211
  zoom: 1;
206
212
 
207
213
  ul {
metadata CHANGED
@@ -1,96 +1,85 @@
1
1
  --- !ruby/object:Gem::Specification
2
2
  name: chosen-awesome-rails
3
3
  version: !ruby/object:Gem::Version
4
- prerelease:
5
- version: 1.0.0
4
+ version: 1.0.2
6
5
  platform: ruby
7
6
  authors:
8
7
  - heaven
9
8
  autorequire:
10
9
  bindir: bin
11
10
  cert_chain: []
12
- date: 2013-08-04 00:00:00.000000000 Z
11
+ date: 2015-03-24 00:00:00.000000000 Z
13
12
  dependencies:
14
13
  - !ruby/object:Gem::Dependency
15
- version_requirements: !ruby/object:Gem::Requirement
14
+ name: railties
15
+ requirement: !ruby/object:Gem::Requirement
16
16
  requirements:
17
- - - ! '>='
17
+ - - ">="
18
18
  - !ruby/object:Gem::Version
19
19
  version: '3.0'
20
- none: false
21
- prerelease: false
22
- name: railties
23
20
  type: :runtime
24
- requirement: !ruby/object:Gem::Requirement
21
+ prerelease: false
22
+ version_requirements: !ruby/object:Gem::Requirement
25
23
  requirements:
26
- - - ! '>='
24
+ - - ">="
27
25
  - !ruby/object:Gem::Version
28
26
  version: '3.0'
29
- none: false
30
27
  - !ruby/object:Gem::Dependency
31
- version_requirements: !ruby/object:Gem::Requirement
28
+ name: coffee-rails
29
+ requirement: !ruby/object:Gem::Requirement
32
30
  requirements:
33
- - - ! '>='
31
+ - - ">="
34
32
  - !ruby/object:Gem::Version
35
33
  version: '3.2'
36
- none: false
37
- prerelease: false
38
- name: coffee-rails
39
34
  type: :runtime
40
- requirement: !ruby/object:Gem::Requirement
35
+ prerelease: false
36
+ version_requirements: !ruby/object:Gem::Requirement
41
37
  requirements:
42
- - - ! '>='
38
+ - - ">="
43
39
  - !ruby/object:Gem::Version
44
40
  version: '3.2'
45
- none: false
46
41
  - !ruby/object:Gem::Dependency
47
- version_requirements: !ruby/object:Gem::Requirement
42
+ name: sass-rails
43
+ requirement: !ruby/object:Gem::Requirement
48
44
  requirements:
49
- - - ! '>='
45
+ - - ">="
50
46
  - !ruby/object:Gem::Version
51
47
  version: '3.2'
52
- none: false
53
- prerelease: false
54
- name: sass-rails
55
48
  type: :runtime
56
- requirement: !ruby/object:Gem::Requirement
49
+ prerelease: false
50
+ version_requirements: !ruby/object:Gem::Requirement
57
51
  requirements:
58
- - - ! '>='
52
+ - - ">="
59
53
  - !ruby/object:Gem::Version
60
54
  version: '3.2'
61
- none: false
62
55
  - !ruby/object:Gem::Dependency
63
- version_requirements: !ruby/object:Gem::Requirement
56
+ name: bundler
57
+ requirement: !ruby/object:Gem::Requirement
64
58
  requirements:
65
- - - ! '>='
59
+ - - ">="
66
60
  - !ruby/object:Gem::Version
67
61
  version: '1.0'
68
- none: false
69
- prerelease: false
70
- name: bundler
71
62
  type: :development
72
- requirement: !ruby/object:Gem::Requirement
63
+ prerelease: false
64
+ version_requirements: !ruby/object:Gem::Requirement
73
65
  requirements:
74
- - - ! '>='
66
+ - - ">="
75
67
  - !ruby/object:Gem::Version
76
68
  version: '1.0'
77
- none: false
78
69
  - !ruby/object:Gem::Dependency
79
- version_requirements: !ruby/object:Gem::Requirement
70
+ name: rails
71
+ requirement: !ruby/object:Gem::Requirement
80
72
  requirements:
81
- - - ! '>='
73
+ - - ">="
82
74
  - !ruby/object:Gem::Version
83
75
  version: '3.0'
84
- none: false
85
- prerelease: false
86
- name: rails
87
76
  type: :development
88
- requirement: !ruby/object:Gem::Requirement
77
+ prerelease: false
78
+ version_requirements: !ruby/object:Gem::Requirement
89
79
  requirements:
90
- - - ! '>='
80
+ - - ">="
91
81
  - !ruby/object:Gem::Version
92
82
  version: '3.0'
93
- none: false
94
83
  description: Chosen is a javascript library of select box enhancer for jQuery, integrates
95
84
  with Rails asset pipeline for ease of use.
96
85
  email:
@@ -99,7 +88,7 @@ executables: []
99
88
  extensions: []
100
89
  extra_rdoc_files: []
101
90
  files:
102
- - .gitignore
91
+ - ".gitignore"
103
92
  - Gemfile
104
93
  - Gemfile.lock
105
94
  - LICENSE.txt
@@ -121,28 +110,24 @@ files:
121
110
  - vendor/assets/stylesheets/chosen/default.css.scss
122
111
  homepage: https://github.com/heaven/chosen-awesome-rails
123
112
  licenses: []
113
+ metadata: {}
124
114
  post_install_message:
125
115
  rdoc_options: []
126
116
  require_paths:
127
117
  - lib
128
118
  required_ruby_version: !ruby/object:Gem::Requirement
129
119
  requirements:
130
- - - ! '>='
120
+ - - ">="
131
121
  - !ruby/object:Gem::Version
132
- segments:
133
- - 0
134
- hash: 1484227093598222791
135
122
  version: '0'
136
- none: false
137
123
  required_rubygems_version: !ruby/object:Gem::Requirement
138
124
  requirements:
139
- - - ! '>='
125
+ - - ">="
140
126
  - !ruby/object:Gem::Version
141
127
  version: '0'
142
- none: false
143
128
  requirements: []
144
129
  rubyforge_project:
145
- rubygems_version: 1.8.25
130
+ rubygems_version: 2.4.5
146
131
  signing_key:
147
132
  specification_version: 3
148
133
  summary: Integrate Chosen javascript library with Rails asset pipeline