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 +4 -4
- data/lib/uber_select_rails/version.rb +1 -1
- data/uber_select.gemspec +2 -0
- data/vendor/assets/javascript/uber_select/README.md +13 -0
- data/vendor/assets/javascript/uber_select/javascript/jquery.uber-select.js +10 -3
- data/vendor/assets/javascript/uber_select/javascript/uber_search.js +6 -1
- data/vendor/assets/javascript/uber_select/test.html +32 -0
- metadata +7 -7
checksums.yaml
CHANGED
@@ -1,7 +1,7 @@
|
|
1
1
|
---
|
2
2
|
SHA256:
|
3
|
-
metadata.gz:
|
4
|
-
data.tar.gz:
|
3
|
+
metadata.gz: 5852b1fc530f2e2990d6bae6c9de18be71ef5365c243cbf9e2955dd0d9f07292
|
4
|
+
data.tar.gz: d30d7e27c9686b276e4fad9d0b7971d1404a240f292dbeece1adf87a5e03bf40
|
5
5
|
SHA512:
|
6
|
-
metadata.gz:
|
7
|
-
data.tar.gz:
|
6
|
+
metadata.gz: 1abd187f4db26bc3f70145935439ba8fe19f7aa1c16e73fe0d00737a9674dcb3ff7ce3dbf6b3f9696d5cccdd0587041638caa8e356339915945ca5b661ae32d9
|
7
|
+
data.tar.gz: 3c4fdfa37229c36ea9e1e30ba79333f94b84f0e02fc396b5bb24faae2694a922a8920bddaf2698d1be80780ff6a485a669ef0c78599b52cc8f80b1e32dcf316b
|
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
|
-
|
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
|
-
|
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) || " ")
|
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){
|
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.
|
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:
|
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.
|
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
|