simple_form_extension 1.3.1 → 1.3.2
Sign up to get free protection for your applications and to get access to all the features.
- checksums.yaml +4 -4
- data/README.md +160 -5
- data/lib/generators/simple_form_extension/install_generator.rb +10 -0
- data/lib/simple_form_extension/inputs/color_input.rb +16 -2
- data/lib/simple_form_extension/version.rb +1 -1
- data/vendor/assets/javascripts/simple_form_extension/colorpicker.coffee +4 -1
- metadata +3 -3
checksums.yaml
CHANGED
@@ -1,7 +1,7 @@
|
|
1
1
|
---
|
2
2
|
SHA1:
|
3
|
-
metadata.gz:
|
4
|
-
data.tar.gz:
|
3
|
+
metadata.gz: 267e21b5772a50e5445218c3e206b3196b4f643a
|
4
|
+
data.tar.gz: a1f3ade223f2551b5331f5079f721301ec9873d0
|
5
5
|
SHA512:
|
6
|
-
metadata.gz:
|
7
|
-
data.tar.gz:
|
6
|
+
metadata.gz: d173d07499d9a566018acb65fe5f5347571771c28f1753cb9195c2bb10838398732a4dcf50a846c62cea3625c8a65b8022c2d4eef0e9b2a90645942a4d157375
|
7
|
+
data.tar.gz: 9b14322c08e8a6e9f974de832d57cf288a8aa9826df8a924e64baad1cc6cf8f16e8dfd9823b9d2705aef5efded8c3f079de2bf003b8d731ee8dc0dee8d00f283
|
data/README.md
CHANGED
@@ -9,7 +9,6 @@ The following custom Simple Form inputs are available :
|
|
9
9
|
* boolean
|
10
10
|
* collection_check_boxes
|
11
11
|
* collection_radio_buttons
|
12
|
-
* color
|
13
12
|
* date_time
|
14
13
|
* file
|
15
14
|
* image
|
@@ -17,6 +16,7 @@ The following custom Simple Form inputs are available :
|
|
17
16
|
* redactor
|
18
17
|
* selectize
|
19
18
|
* slider
|
19
|
+
* color
|
20
20
|
|
21
21
|
Most of those inputs come with built-in javascript plugins, sometimes depending
|
22
22
|
on external gems, others with the javascript plugin bundled in the gem's vendor
|
@@ -65,13 +65,168 @@ Add to your `application.js` :
|
|
65
65
|
|
66
66
|
## Usage
|
67
67
|
|
68
|
-
|
68
|
+
There are two types of inputs provided by Simple Form Extension.
|
69
|
+
|
70
|
+
### Input overrides
|
71
|
+
|
72
|
+
The first are overrides of default Simple Form inputs, which allows for cleaner
|
73
|
+
defaults. **You have nothing to do to use them**, since they'll be used
|
74
|
+
automatically when calling `form.input`.
|
75
|
+
|
76
|
+
Those inputs are the following :
|
77
|
+
|
78
|
+
* boolean
|
79
|
+
* collection_check_boxes
|
80
|
+
* collection_radio_buttons
|
81
|
+
* date_time
|
82
|
+
* file
|
83
|
+
* numeric
|
84
|
+
|
85
|
+
### New inputs
|
86
|
+
|
87
|
+
The other inputs are new ones, that extend the possibilities of your forms.
|
88
|
+
You need to explicitly call them in your forms with the `:as` parameter.
|
89
|
+
|
90
|
+
This inputs are the following :
|
91
|
+
|
92
|
+
* [image](#image)
|
93
|
+
* [selectize](#selectize)
|
94
|
+
* [slider](#slider)
|
95
|
+
* [redactor](#redactor)
|
96
|
+
* [color](#color)
|
97
|
+
|
98
|
+
### New Inputs usage
|
99
|
+
|
100
|
+
#### :image
|
101
|
+
|
102
|
+
The image is built to work with [Paperclip](https://github.com/thoughtbot/paperclip)
|
103
|
+
attachments.
|
104
|
+
|
105
|
+
It allows you to show a preview of the image before uploading it
|
106
|
+
and a thumbnail of that image when displaying the form after the image
|
107
|
+
has been uploaded.
|
108
|
+
|
109
|
+
```ruby
|
110
|
+
= form.input :picture, as: :image
|
111
|
+
```
|
112
|
+
|
113
|
+
Optionnaly, the input can add a Remove button to the image.
|
114
|
+
For this feature to work you have to define a setter on your model that'll
|
115
|
+
remove the image when given '1' as a value.
|
116
|
+
|
117
|
+
As a default, the input will look for a `remove_<attachment_name>` method, and
|
118
|
+
if it finds it, a Remove button will be added.
|
119
|
+
|
120
|
+
```ruby
|
121
|
+
# app/models/photo.rb
|
122
|
+
class Photo < ActiveRecord::Base
|
123
|
+
has_attached_file :picture
|
124
|
+
|
125
|
+
def remove_picture=(value)
|
126
|
+
# Remove your attachment here
|
127
|
+
end
|
128
|
+
end
|
129
|
+
|
130
|
+
# app/views/photos/_form.html.haml
|
131
|
+
= simple_form_for @photo do |form|
|
132
|
+
= form.input :picture, as: :image
|
133
|
+
```
|
134
|
+
|
135
|
+
You can customize the name of the setter that will be called with the
|
136
|
+
`:remove_method` option :
|
137
|
+
|
138
|
+
```ruby
|
139
|
+
= form.input :picture, as: :image, remove_method: :destroy_picture
|
140
|
+
```
|
141
|
+
|
142
|
+
#### :selectize
|
143
|
+
|
144
|
+
The selectize field allows you to create a powerful select field using the
|
145
|
+
[Selectize](https://brianreavis.github.io/selectize.js/) javascript plugin.
|
146
|
+
|
147
|
+
```ruby
|
148
|
+
= form.input :items, as: :selectize, collection: Item.all
|
149
|
+
```
|
150
|
+
|
151
|
+
The following options are available :
|
152
|
+
|
153
|
+
* `:creatable` : allow you to add options that are not initally present in the list
|
154
|
+
* `:multi` : sets the field to multi mode, allowing users to select multiple items
|
155
|
+
* `:collection` : sets the collection. Can be any ActiveRecord::Relation
|
156
|
+
(`#name` and `#title` will be called to define label) or a Hash with { :text, :value }
|
157
|
+
keys at least
|
158
|
+
* `:max-items` : When in multi mode, maximum items that can be selected
|
159
|
+
* `:sort-field` : The name of the collection item's field that will be used for sorting.
|
160
|
+
You can add a field to the collection and it'll be serialized to JSON and used from
|
161
|
+
selectize to sort your collection.
|
162
|
+
|
163
|
+
```ruby
|
164
|
+
= form.input :items, as: :selectize, collection: Item.all.map { |item| { text: item.name, value: item.id, position: item.position } }, :'sort-field' => :position, multi: false, creatable: true
|
165
|
+
```
|
166
|
+
|
167
|
+
Used javascript plugin : [Selectize](https://brianreavis.github.io/selectize.js/)
|
168
|
+
|
169
|
+
#### :slider
|
170
|
+
|
171
|
+
To use the slide component, you'll always want to set the `:min` and `:max`
|
172
|
+
options.
|
173
|
+
|
174
|
+
Use it with :
|
175
|
+
|
176
|
+
```ruby
|
177
|
+
= form.input :field, as: :slider, min: 0, max: 10
|
178
|
+
```
|
179
|
+
|
180
|
+
Options are the following :
|
181
|
+
|
182
|
+
* `:step` : Which size the steps should be between :min and :max
|
183
|
+
* `:orientation` : 'horizontal' or 'vertical', defaults to hotirzontal
|
184
|
+
* `:range` : set to true for the slider to be a range slider
|
185
|
+
* `:disabled` : set to true to disable interaction
|
186
|
+
* `:ticks` : pass an array of ticks to display on the slider, ex: [0, 2, 4, 6, 8, 10]
|
187
|
+
|
188
|
+
```ruby
|
189
|
+
= form.input :field, as: :slider, min: 0, max: 10, step: 2, orientation: 'vertical',
|
190
|
+
range: true, ticks: [0, 5, 10]
|
191
|
+
```
|
192
|
+
|
193
|
+
Used javascript plugin : [Bootstrap Slider](https://github.com/seiyria/bootstrap-slider)
|
194
|
+
|
195
|
+
#### :redactor
|
196
|
+
|
197
|
+
There are not options for now on this redactor input.
|
198
|
+
|
199
|
+
To use it, just call it as usual :
|
200
|
+
|
201
|
+
```ruby
|
202
|
+
= form.input :content, as: :redactor
|
203
|
+
```
|
204
|
+
|
205
|
+
Used javascript plugin : [Redactor](https://github.com/glyph-fr/redactor-rails)
|
206
|
+
|
207
|
+
#### :color
|
208
|
+
|
209
|
+
The color input allows to add a colorpicker to a string field.
|
210
|
+
|
211
|
+
```ruby
|
212
|
+
= form.input :background_color, as: :color
|
213
|
+
```
|
214
|
+
|
215
|
+
Options :
|
216
|
+
|
217
|
+
* format
|
218
|
+
* align
|
219
|
+
|
220
|
+
|
221
|
+
Used javascript plugin : [Bootstrap Color Picker](http://mjolnic.com/bootstrap-colorpicker/)
|
222
|
+
|
223
|
+
<!-- To use the popover component, please include in a javascript file :
|
69
224
|
|
70
225
|
```javascript
|
71
226
|
$('body').popover(selector: '[rel="popover"]')
|
72
|
-
```
|
227
|
+
``` -->
|
73
228
|
|
74
|
-
|
229
|
+
## Javascript Plugins
|
75
230
|
|
76
231
|
Simple Form Extension comes with several javascript plugins built-in for the
|
77
232
|
inputs to work properly.
|
@@ -80,7 +235,7 @@ Plugins are automatically initialized on page load, with or without Turbolinks.
|
|
80
235
|
|
81
236
|
This means that for a classic page you don't need to initialize anything yourself.
|
82
237
|
|
83
|
-
|
238
|
+
### Manual javascript plugins initialization
|
84
239
|
|
85
240
|
If you append some HTML, after the page is loaded, containing inputs that you
|
86
241
|
need to initialize, you'll need to manually call the Simple Form Extension
|
@@ -12,6 +12,16 @@ module SimpleFormExtension
|
|
12
12
|
template "config/locales/simple_form_extension.en.yml"
|
13
13
|
template "config/locales/simple_form_extension.fr.yml"
|
14
14
|
end
|
15
|
+
|
16
|
+
def add_custom_redactor_gem
|
17
|
+
gem 'redactor-rails', github: 'glyph-fr/redactor-rails'
|
18
|
+
end
|
19
|
+
|
20
|
+
def bundle
|
21
|
+
Bundler.with_clean_env do
|
22
|
+
run 'bundle install'
|
23
|
+
end
|
24
|
+
end
|
15
25
|
end
|
16
26
|
end
|
17
27
|
end
|
@@ -1,16 +1,22 @@
|
|
1
1
|
module SimpleFormExtension
|
2
2
|
module Inputs
|
3
3
|
class ColorInput < SimpleForm::Inputs::Base
|
4
|
-
|
5
4
|
delegate :content_tag, to: :template
|
6
5
|
|
7
6
|
def input(wrapper_options = nil)
|
8
7
|
input_html_options[:class] << "colorpicker form-control"
|
9
8
|
|
9
|
+
input_html_options[:data] ||= {}
|
10
|
+
input_html_options[:data].merge!(
|
11
|
+
colorpicker: true,
|
12
|
+
format: format,
|
13
|
+
align: align
|
14
|
+
)
|
15
|
+
|
10
16
|
# Fetch value
|
11
17
|
color = object.send(attribute_name)
|
12
18
|
|
13
|
-
content_tag(:div, class: 'input-group color', data: { colorpicker
|
19
|
+
content_tag(:div, class: 'input-group color', data: { :'colorpicker-wrapper' => true }) do
|
14
20
|
@builder.text_field(attribute_name, input_html_options) +
|
15
21
|
|
16
22
|
content_tag(:span, class: 'input-group-addon') do
|
@@ -18,6 +24,14 @@ module SimpleFormExtension
|
|
18
24
|
end
|
19
25
|
end
|
20
26
|
end
|
27
|
+
|
28
|
+
def format
|
29
|
+
options[:format].presence || :hex
|
30
|
+
end
|
31
|
+
|
32
|
+
def align
|
33
|
+
options[:align].presence || :right
|
34
|
+
end
|
21
35
|
end
|
22
36
|
end
|
23
37
|
end
|
metadata
CHANGED
@@ -1,14 +1,14 @@
|
|
1
1
|
--- !ruby/object:Gem::Specification
|
2
2
|
name: simple_form_extension
|
3
3
|
version: !ruby/object:Gem::Version
|
4
|
-
version: 1.3.
|
4
|
+
version: 1.3.2
|
5
5
|
platform: ruby
|
6
6
|
authors:
|
7
7
|
- Glyph-fr
|
8
8
|
autorequire:
|
9
9
|
bindir: bin
|
10
10
|
cert_chain: []
|
11
|
-
date: 2015-05-
|
11
|
+
date: 2015-05-26 00:00:00.000000000 Z
|
12
12
|
dependencies:
|
13
13
|
- !ruby/object:Gem::Dependency
|
14
14
|
name: rails
|
@@ -195,7 +195,7 @@ required_rubygems_version: !ruby/object:Gem::Requirement
|
|
195
195
|
version: '0'
|
196
196
|
requirements: []
|
197
197
|
rubyforge_project:
|
198
|
-
rubygems_version: 2.
|
198
|
+
rubygems_version: 2.4.4
|
199
199
|
signing_key:
|
200
200
|
specification_version: 4
|
201
201
|
summary: This gems adds custom common input types to simple form.
|