uber_select_rails 0.1.2 → 0.1.8
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 +5 -5
- data/lib/uber_select_rails/version.rb +1 -1
- data/uber_select.gemspec +1 -1
- data/vendor/assets/javascript/uber_select/.gitignore +18 -0
- data/vendor/assets/javascript/uber_select/README.md +250 -0
- data/vendor/assets/javascript/uber_select/javascript/jquery.uber-select.js +177 -0
- data/vendor/assets/javascript/uber_select/javascript/list.js +120 -0
- data/vendor/assets/javascript/uber_select/javascript/output_container.js +21 -0
- data/vendor/assets/javascript/uber_select/javascript/pane.js +90 -0
- data/vendor/assets/javascript/uber_select/javascript/search.js +151 -0
- data/vendor/assets/javascript/uber_select/javascript/search_field.js +80 -0
- data/vendor/assets/javascript/uber_select/javascript/string_extensions.js +8 -0
- data/vendor/assets/javascript/uber_select/javascript/uber_search.js +315 -0
- data/vendor/assets/javascript/uber_select/test.css +150 -0
- data/vendor/assets/javascript/uber_select/test.html +184 -0
- metadata +15 -3
|
@@ -0,0 +1,184 @@
|
|
|
1
|
+
<!DOCTYPE html>
|
|
2
|
+
<html>
|
|
3
|
+
<head>
|
|
4
|
+
<link href="https://netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.css" rel="stylesheet">
|
|
5
|
+
<link href="test.css" rel="stylesheet">
|
|
6
|
+
</head>
|
|
7
|
+
<body>
|
|
8
|
+
|
|
9
|
+
<span class="example">
|
|
10
|
+
<label for="select">
|
|
11
|
+
Select
|
|
12
|
+
</label>
|
|
13
|
+
<select data-uber-options='{"search":false}'>
|
|
14
|
+
<option>male</option>
|
|
15
|
+
<option>female</option>
|
|
16
|
+
</select>
|
|
17
|
+
</span>
|
|
18
|
+
|
|
19
|
+
<span class="example">
|
|
20
|
+
<label for="select">
|
|
21
|
+
search and placeholder
|
|
22
|
+
</label>
|
|
23
|
+
<select placeholder="Choose a gender">
|
|
24
|
+
<option></option>
|
|
25
|
+
<option>male</option>
|
|
26
|
+
<option>female</option>
|
|
27
|
+
</select>
|
|
28
|
+
<p>This example includes a placeholder. Placeholders can be customized using the
|
|
29
|
+
<code>placholder</code> attribute, the <code>data-placeholder</code> attribute,
|
|
30
|
+
or the <code>placeholder</code> option.
|
|
31
|
+
</p>
|
|
32
|
+
</span>
|
|
33
|
+
|
|
34
|
+
|
|
35
|
+
<span class="example">
|
|
36
|
+
<label for="select">
|
|
37
|
+
Prepopulate Search and Clear Select
|
|
38
|
+
</label>
|
|
39
|
+
<select placeholder="Choose a gender" data-uber-options='{"prepopulateSearchOnOpen":true, "clearSearchClearsSelect":true}'>
|
|
40
|
+
<option></option>
|
|
41
|
+
<option selected="selected">male</option>
|
|
42
|
+
<option>female</option>
|
|
43
|
+
</select>
|
|
44
|
+
<p>This example prepopulates the search with the value from the select, and
|
|
45
|
+
clears the select when the search is cleared.</p>
|
|
46
|
+
</span>
|
|
47
|
+
|
|
48
|
+
<span class="example">
|
|
49
|
+
<label for="select">
|
|
50
|
+
blank options hidden
|
|
51
|
+
</label>
|
|
52
|
+
<select placeholder="Choose a gender" data-uber-options='{"hideBlankOption":true, "prepopulateSearchOnOpen":true, "clearSearchClearsSelect":true}'>
|
|
53
|
+
<option></option>
|
|
54
|
+
<option selected="selected">male</option>
|
|
55
|
+
<option>female</option>
|
|
56
|
+
</select>
|
|
57
|
+
<p>This prepopulated example hides blank options, but still allows the search to be cleared</p>
|
|
58
|
+
</span>
|
|
59
|
+
|
|
60
|
+
|
|
61
|
+
<span class="example">
|
|
62
|
+
<label for="select">
|
|
63
|
+
Grouped search with visibility
|
|
64
|
+
</label>
|
|
65
|
+
<select>
|
|
66
|
+
<optgroup label="Common" data-visibility="no-query">
|
|
67
|
+
<option>cat</option>
|
|
68
|
+
<option>dog</option>
|
|
69
|
+
</optgroup>
|
|
70
|
+
<option>No group animal 1</option>
|
|
71
|
+
<option>No group animal 2</option>
|
|
72
|
+
<optgroup label="All">
|
|
73
|
+
<option>cat</option>
|
|
74
|
+
<option>dog</option>
|
|
75
|
+
<option>frog</option>
|
|
76
|
+
<option>monkey</option>
|
|
77
|
+
<option data-visibility="no-query">this option is not visible when querying</option>
|
|
78
|
+
<option data-visibility="query">this option is only visible when querying</option>
|
|
79
|
+
<option>goose</option>
|
|
80
|
+
<option>rabbit</option>
|
|
81
|
+
<option>rhino</option>
|
|
82
|
+
<option>elephant</option>
|
|
83
|
+
<option>bear</option>
|
|
84
|
+
<option>tiger</option>
|
|
85
|
+
<option>giraffe</option>
|
|
86
|
+
<option>goat</option>
|
|
87
|
+
<option>cow</option>
|
|
88
|
+
<option>pig</option>
|
|
89
|
+
<option>gorilla</option>
|
|
90
|
+
<option>orangutan</option>
|
|
91
|
+
<option>lemur</option>
|
|
92
|
+
</optgroup>
|
|
93
|
+
</select>
|
|
94
|
+
<p>This example uses optgroups to separate option types. Options and optgroups
|
|
95
|
+
may have a <code>data-visibility</code> attribute that determines when the option is available
|
|
96
|
+
for matching. A value of <code>no-query</code> means the option is only visible when the
|
|
97
|
+
user isn't performing a search. A value of <code>query</code> means the option
|
|
98
|
+
is only visible during a search. If an option doesn't specify this value, it
|
|
99
|
+
will inherit it from its optgroup.
|
|
100
|
+
</p>
|
|
101
|
+
</span>
|
|
102
|
+
|
|
103
|
+
|
|
104
|
+
<span class="example">
|
|
105
|
+
<label for="select">
|
|
106
|
+
Placeholder as blank
|
|
107
|
+
</label>
|
|
108
|
+
<select placeholder="males and females" data-uber-options='{"treatBlankOptionAsPlaceholder":true}'>
|
|
109
|
+
<option></option>
|
|
110
|
+
<option>male</option>
|
|
111
|
+
<option>female</option>
|
|
112
|
+
</select>
|
|
113
|
+
<p>This example uses the placeholder text as the text of the blank option.</p>
|
|
114
|
+
</span>
|
|
115
|
+
|
|
116
|
+
<span class="example">
|
|
117
|
+
<label for="select">
|
|
118
|
+
Minimum query length
|
|
119
|
+
</label>
|
|
120
|
+
<select placeholder="Type a character" data-uber-options='{"minQueryLength":1}'>
|
|
121
|
+
<option></option>
|
|
122
|
+
<option>Jimmy Johnson</option>
|
|
123
|
+
<option>Amanda Hugginkiss</option>
|
|
124
|
+
<option>Cosmo Kramer</option>
|
|
125
|
+
<option>Bob Zickowski</option>
|
|
126
|
+
<option>Nicholas Cage</option>
|
|
127
|
+
<option>Queen Latifah</option>
|
|
128
|
+
</select>
|
|
129
|
+
<p>This example uses <code>minQueryLength</code> to prevent short queries from updating results.</p>
|
|
130
|
+
</span>
|
|
131
|
+
|
|
132
|
+
<span class="example">
|
|
133
|
+
<label for="select">
|
|
134
|
+
Custom Search Placeholder
|
|
135
|
+
</label>
|
|
136
|
+
<select data-uber-options='{"searchPlaceholder":"Custom placeholder"}'>
|
|
137
|
+
<option></option>
|
|
138
|
+
<option>male</option>
|
|
139
|
+
<option>female</option>
|
|
140
|
+
</select>
|
|
141
|
+
<p>This example uses custom search input placeholder. Search input placeholders
|
|
142
|
+
can be set using the <code>searchPlaceholder</code> option.</p>
|
|
143
|
+
</span>
|
|
144
|
+
|
|
145
|
+
<span class="example">
|
|
146
|
+
<label for="select">
|
|
147
|
+
Custom No Results Message
|
|
148
|
+
</label>
|
|
149
|
+
<select data-uber-options='{"noResultsText":"Custom message"}'>
|
|
150
|
+
<option></option>
|
|
151
|
+
<option>male</option>
|
|
152
|
+
<option>female</option>
|
|
153
|
+
</select>
|
|
154
|
+
<p>This example uses customizes the text displayed when no results are found.
|
|
155
|
+
This this can be set using the <code>noResultsText</code> option.</p>
|
|
156
|
+
</span>
|
|
157
|
+
|
|
158
|
+
<span class="example">
|
|
159
|
+
<label for="select">
|
|
160
|
+
Remote JSON Dataset
|
|
161
|
+
</label>
|
|
162
|
+
<select data-uber-options='{"dataUrl":"data:text/plain;charset=utf-8;base64,W3sidGV4dCI6Ik1hbGUiLCAiZ3JvdXAiOiJHZW5kZXIifSx7InRleHQiOiJGZW1hbGUiLCAiZ3JvdXAiOiJHZW5kZXIifV0=", "value":"Female"}'></select>
|
|
163
|
+
<p>This example fetches select options from the server upon initialization using the <code>dataUrl</code> option.
|
|
164
|
+
The dataset should be of the form
|
|
165
|
+
<code>[{text:'option with explicit value', value: 'some value', group: 'Optional group name'}, {text:'option with implicit value'}]</code>.
|
|
166
|
+
The initial value can be set using the <code>value</code> option.
|
|
167
|
+
</p>
|
|
168
|
+
</span>
|
|
169
|
+
|
|
170
|
+
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
|
|
171
|
+
<script src="javascript/string_extensions.js"></script>
|
|
172
|
+
<script src="javascript/search_field.js"></script>
|
|
173
|
+
<script src="javascript/list.js"></script>
|
|
174
|
+
<script src="javascript/output_container.js"></script>
|
|
175
|
+
<script src="javascript/search.js"></script>
|
|
176
|
+
<script src="javascript/pane.js"></script>
|
|
177
|
+
<script src="javascript/uber_search.js"></script>
|
|
178
|
+
<script src="javascript/jquery.uber-select.js"></script>
|
|
179
|
+
|
|
180
|
+
<script type="text/javascript">
|
|
181
|
+
$('select').uberSelect({selectCaret: ''})
|
|
182
|
+
</script>
|
|
183
|
+
</body>
|
|
184
|
+
</html>
|
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.1.
|
|
4
|
+
version: 0.1.8
|
|
5
5
|
platform: ruby
|
|
6
6
|
authors:
|
|
7
7
|
- Nicholas Jakobsen
|
|
8
8
|
autorequire:
|
|
9
9
|
bindir: exe
|
|
10
10
|
cert_chain: []
|
|
11
|
-
date:
|
|
11
|
+
date: 2019-10-28 00:00:00.000000000 Z
|
|
12
12
|
dependencies:
|
|
13
13
|
- !ruby/object:Gem::Dependency
|
|
14
14
|
name: rails
|
|
@@ -69,6 +69,18 @@ files:
|
|
|
69
69
|
- lib/uber_select_rails/version.rb
|
|
70
70
|
- uber_select.gemspec
|
|
71
71
|
- vendor/assets/javascript/uber_select.js
|
|
72
|
+
- vendor/assets/javascript/uber_select/.gitignore
|
|
73
|
+
- vendor/assets/javascript/uber_select/README.md
|
|
74
|
+
- vendor/assets/javascript/uber_select/javascript/jquery.uber-select.js
|
|
75
|
+
- vendor/assets/javascript/uber_select/javascript/list.js
|
|
76
|
+
- vendor/assets/javascript/uber_select/javascript/output_container.js
|
|
77
|
+
- vendor/assets/javascript/uber_select/javascript/pane.js
|
|
78
|
+
- vendor/assets/javascript/uber_select/javascript/search.js
|
|
79
|
+
- vendor/assets/javascript/uber_select/javascript/search_field.js
|
|
80
|
+
- vendor/assets/javascript/uber_select/javascript/string_extensions.js
|
|
81
|
+
- vendor/assets/javascript/uber_select/javascript/uber_search.js
|
|
82
|
+
- vendor/assets/javascript/uber_select/test.css
|
|
83
|
+
- vendor/assets/javascript/uber_select/test.html
|
|
72
84
|
homepage: https://github.com/culturecode/uber_select_rails
|
|
73
85
|
licenses: []
|
|
74
86
|
metadata: {}
|
|
@@ -88,7 +100,7 @@ required_rubygems_version: !ruby/object:Gem::Requirement
|
|
|
88
100
|
version: '0'
|
|
89
101
|
requirements: []
|
|
90
102
|
rubyforge_project:
|
|
91
|
-
rubygems_version: 2.
|
|
103
|
+
rubygems_version: 2.7.9
|
|
92
104
|
signing_key:
|
|
93
105
|
specification_version: 4
|
|
94
106
|
summary: A Rails gem containing a javascript plugin that adds a layer of UI goodness
|