uber_select_rails 0.2.1 → 0.4.3

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
  SHA256:
3
- metadata.gz: 1565e41dee2dcac6cb743f1fef1670eba707eeb6aa677ddefded94f5341ea372
4
- data.tar.gz: 3b1ab982cd3917c97aa271710cc73c8133455a2e4c001ecb8d4f190486801508
3
+ metadata.gz: 5852b1fc530f2e2990d6bae6c9de18be71ef5365c243cbf9e2955dd0d9f07292
4
+ data.tar.gz: d30d7e27c9686b276e4fad9d0b7971d1404a240f292dbeece1adf87a5e03bf40
5
5
  SHA512:
6
- metadata.gz: 80acab71f2ef75247a3237ee21291f602b3bab8ff7e491e0a22d5f1eb5a5dd1e630088046c74a59898d8b74f30d48fac61ccfba6eb00c044e08ad83c020b7067
7
- data.tar.gz: 599c1dbcc3986af1b83782080e7e101a4d0dcf6b1edbab91dda19570e7ddd936ea4b56986c67980aa79c957a66c540ba64eb8f9255a5c5bb7e2544559b18b68e
6
+ metadata.gz: 1abd187f4db26bc3f70145935439ba8fe19f7aa1c16e73fe0d00737a9674dcb3ff7ce3dbf6b3f9696d5cccdd0587041638caa8e356339915945ca5b661ae32d9
7
+ data.tar.gz: 3c4fdfa37229c36ea9e1e30ba79333f94b84f0e02fc396b5bb24faae2694a922a8920bddaf2698d1be80780ff6a485a669ef0c78599b52cc8f80b1e32dcf316b
@@ -1,3 +1,3 @@
1
1
  module UberSelectRails
2
- VERSION = "0.2.1"
2
+ VERSION = "0.4.3"
3
3
  end
data/uber_select.gemspec CHANGED
@@ -3,6 +3,8 @@ lib = File.expand_path('../lib', __FILE__)
3
3
  $LOAD_PATH.unshift(lib) unless $LOAD_PATH.include?(lib)
4
4
  require 'uber_select_rails/version'
5
5
 
6
+ `git submodule update` # Ensure we've checked the correct submodule files
7
+
6
8
  Gem::Specification.new do |spec|
7
9
  spec.name = "uber_select_rails"
8
10
  spec.version = UberSelectRails::VERSION
@@ -21,6 +21,10 @@ you can use UberSelect to gussy up forms, without changing any of the underlying
21
21
  $('.my_selects').uberSelect(options);
22
22
  ```
23
23
 
24
+ #### Attributes <a name="UberSearch attributes"></a>
25
+ Attribtes on the outermost element can be specified by setting the `data-uber-attributes` attribute on the `<select>` element. Values should be passed
26
+ as a JSON string of key/value pairs where the key is the attribute name and the value is the attribute value.
27
+
24
28
  #### Options
25
29
  Options can be specified by setting the `data-uber-options` attribute on the `<select>` element. Values should be passed
26
30
  as a JSON string. All options on the are passed to the underlying UberSearch, see [UberSearch options](#UberSearchOptions).
@@ -94,6 +98,12 @@ Data is an array of objects. Each object may have the following properties:
94
98
  - ##### text
95
99
  String shown to the user in the list of results. This value is required if *value* is not provided.
96
100
 
101
+ - ##### selectedText
102
+ String shown to the user in the output container when this option is selected. *optional*
103
+
104
+ - ##### title
105
+ Title text shown to the user when hovering over the result. *optional*
106
+
97
107
  - ##### value
98
108
  This is matched against the *value* option passed UberSearch and will appear selected if it matches. It is also used to match against search input text when the user searches. This value is required if *text* is not provided.
99
109
 
@@ -103,6 +113,9 @@ Data is an array of objects. Each object may have the following properties:
103
113
  - ##### visibility
104
114
  This is used to determine whether the option appears only when searching or only when not searching. Values accepted: `query`, `no-query`. *optional*
105
115
 
116
+ - ##### disabled
117
+ This is used to determine whether the option appears disabled. *optional*
118
+
106
119
  - ##### group
107
120
  This is used to visually group options. All options with the same group will appear together. *optional*
108
121
 
@@ -20,7 +20,7 @@
20
20
  optionFromDatum: optionFromDatum, // A function to create select options
21
21
  value: $(select).val() // Initialize the UberSearch with this selected value
22
22
  }, opts, $(select).data('uber-options'))
23
-
23
+ var uberAttributes = $(select).data('uber-attributes'); // Attributes defined as data-uber-attributes on the original select element. These will be added as attributes on the uberSelect element.
24
24
  var uberSearch = this.uberSearch = new UberSearch(dataFromSelect(select), options)
25
25
 
26
26
 
@@ -53,11 +53,16 @@
53
53
 
54
54
  // INITIALIZATION
55
55
 
56
+ if (uberAttributes) {
57
+ uberSearch.view.attr(uberAttributes)
58
+ }
59
+
56
60
  uberSearch.view.insertBefore(select).append(select)
57
61
  hideSelect()
58
62
  if (options.dataUrl) {
59
63
  $.getJSON(options.dataUrl).done(function(data){
60
64
  $(select).append(optionsFromData(data))
65
+ updateSelectValue(options.value)
61
66
  uberSearch.setData(dataFromSelect(select))
62
67
  $(select).trigger(eventsTriggered.ready)
63
68
  })
@@ -79,8 +84,10 @@
79
84
  // This is optimized for performance and does not use jQuery convenience methods. Seems to be about 30% faster loading during non-scientific tests.
80
85
  datum = {
81
86
  text: option.textContent,
87
+ selectedText: getAttribute(option, 'data-selected-text'),
82
88
  value: getAttribute(option, 'value'),
83
- disabled: getAttribute(option, 'disabled'),
89
+ title: getAttribute(option, 'title'),
90
+ disabled: getAttribute(option, 'disabled') === undefined ? false : true,
84
91
  matchValue: getAttribute(option, 'data-match-value'),
85
92
  visibility: getAttribute(option, 'data-visibility'),
86
93
  element: option
@@ -134,7 +141,7 @@
134
141
  function refreshOptionsList(){
135
142
  uberSearch.setDisabled($(select).is(':disabled'))
136
143
  uberSearch.setData(dataFromSelect(select))
137
- updateSelectedValue()
144
+ updateSelectValue($(select).find('option[selected]').attr('value')) // Read the value of the option that is selected because the <select> element's value is defunct now that we've updated the <option> elements
138
145
  }
139
146
 
140
147
  // Updates the UberSearch's selected value from the select element's value
@@ -243,6 +243,7 @@ var UberSearch = function(data, options){
243
243
  .html((options.treatBlankOptionAsPlaceholder ? datum.text || options.placeholder : datum.text) || "&nbsp;")
244
244
  .data(datum) // Store the datum so we can get know what the value of the selected item is
245
245
 
246
+ if (datum.title) { result.attr('title', datum.title) }
246
247
  if (datum.disabled) { result.addClass('disabled') }
247
248
 
248
249
  options.resultPostprocessor(result, datum)
@@ -288,7 +289,11 @@ var UberSearch = function(data, options){
288
289
  }
289
290
 
290
291
  function textFromValue(value){
291
- return $.map(data, function(datum){ if (datum.value == value) return datum.text })[0]
292
+ return $.map(data, function(datum) {
293
+ if (datum.value == value) {
294
+ return datum.selectedText || datum.text
295
+ }
296
+ })[0]
292
297
  }
293
298
 
294
299
  function updateMessages(){
@@ -199,6 +199,38 @@
199
199
  <p>This example has a disabled select that should disable the entire UI.</p>
200
200
  </span>
201
201
 
202
+ <span class="example">
203
+ <label for="select">
204
+ Selected Text
205
+ </label>
206
+ <select>
207
+ <option></option>
208
+ <option>Jimmy Johnson</option>
209
+ <option data-selected-text="Good Choice!">Custom Selected Text</option>
210
+ <option>Cosmo Kramer</option>
211
+ <option>Bob Zickowski</option>
212
+ <option>Nicholas Cage</option>
213
+ <option>Queen Latifah</option>
214
+ </select>
215
+ <p>This example has an option with <code>data-selected-text</code> that should show custom text in the output container when selected.</p>
216
+ </span>
217
+
218
+ <span class="example">
219
+ <label for="select">
220
+ Title Attribute
221
+ </label>
222
+ <select>
223
+ <option></option>
224
+ <option>Jimmy Johnson</option>
225
+ <option title="Cooltip!">Option with Title</option>
226
+ <option>Cosmo Kramer</option>
227
+ <option>Bob Zickowski</option>
228
+ <option>Nicholas Cage</option>
229
+ <option>Queen Latifah</option>
230
+ </select>
231
+ <p>This example has an option with a <code>title</code> attribute that should show as a tooltip.</p>
232
+ </span>
233
+
202
234
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
203
235
  <script src="javascript/string_extensions.js"></script>
204
236
  <script src="javascript/search_field.js"></script>
metadata CHANGED
@@ -1,14 +1,14 @@
1
1
  --- !ruby/object:Gem::Specification
2
2
  name: uber_select_rails
3
3
  version: !ruby/object:Gem::Version
4
- version: 0.2.1
4
+ version: 0.4.3
5
5
  platform: ruby
6
6
  authors:
7
7
  - Nicholas Jakobsen
8
- autorequire:
8
+ autorequire:
9
9
  bindir: exe
10
10
  cert_chain: []
11
- date: 2020-05-22 00:00:00.000000000 Z
11
+ date: 2021-04-22 00:00:00.000000000 Z
12
12
  dependencies:
13
13
  - !ruby/object:Gem::Dependency
14
14
  name: rails
@@ -52,7 +52,7 @@ dependencies:
52
52
  - - "~>"
53
53
  - !ruby/object:Gem::Version
54
54
  version: '10.0'
55
- description:
55
+ description:
56
56
  email:
57
57
  - nicholas.jakobsen@gmail.com
58
58
  executables: []
@@ -84,7 +84,7 @@ files:
84
84
  homepage: https://github.com/culturecode/uber_select_rails
85
85
  licenses: []
86
86
  metadata: {}
87
- post_install_message:
87
+ post_install_message:
88
88
  rdoc_options: []
89
89
  require_paths:
90
90
  - lib
@@ -99,8 +99,8 @@ required_rubygems_version: !ruby/object:Gem::Requirement
99
99
  - !ruby/object:Gem::Version
100
100
  version: '0'
101
101
  requirements: []
102
- rubygems_version: 3.0.3
103
- signing_key:
102
+ rubygems_version: 3.0.8
103
+ signing_key:
104
104
  specification_version: 4
105
105
  summary: A Rails gem containing a javascript plugin that adds a layer of UI goodness
106
106
  overtop of basic HTML select elements