polymer-rails-forms 0.3.0 → 0.3.01
Sign up to get free protection for your applications and to get access to all the features.
- checksums.yaml +4 -4
- data/README.md +118 -28
- metadata +1 -1
checksums.yaml
CHANGED
@@ -1,7 +1,7 @@
|
|
1
1
|
---
|
2
2
|
SHA1:
|
3
|
-
metadata.gz:
|
4
|
-
data.tar.gz:
|
3
|
+
metadata.gz: b75d3c9c3f3557fccb6938dc90e4f72d16c002fc
|
4
|
+
data.tar.gz: fba524123deb455a9ac60055f40d6748aa765386
|
5
5
|
SHA512:
|
6
|
-
metadata.gz:
|
7
|
-
data.tar.gz:
|
6
|
+
metadata.gz: 73251ebfb263ad43a526105e1e04fe5e1d9b25e487028e83c97823bdef785e879feb65d0860b0c6e6149f10f23b002b1565fac0d5e74375099c9a956018421bc
|
7
|
+
data.tar.gz: 44289cfe4ca79e7193d0fcb7e8d4980bb5f910f5197f7814fb5174480e13dcf16d19839c67c2a238de60b8cfe66b79eb1f4347c5bb70d84d54488adf724ea53d
|
data/README.md
CHANGED
@@ -24,6 +24,27 @@ then in your /app/assets/components/application.html file add
|
|
24
24
|
*= require rails-forms/rails-form
|
25
25
|
```
|
26
26
|
|
27
|
+
##BREAKING CHANGE IN 0.3.0
|
28
|
+
Because objects are unordered and order is generally important in forms I've updated
|
29
|
+
the form structures to be arrays. So rather than
|
30
|
+
|
31
|
+
```javascript
|
32
|
+
this.structure = {
|
33
|
+
myKey: {type: "string"}
|
34
|
+
}
|
35
|
+
```
|
36
|
+
|
37
|
+
your structure should look like
|
38
|
+
|
39
|
+
```javascript
|
40
|
+
this.structure = [
|
41
|
+
{ key: myKey, type: "string" }
|
42
|
+
]
|
43
|
+
```
|
44
|
+
Additionally since you can no longer just do something like ```this.stucture.myKey``` to get a
|
45
|
+
structure's fields I've added a get field function ```this.getField("myKey")``` for nested fields
|
46
|
+
you would just do ```this.getField("myNest.myKey")```
|
47
|
+
|
27
48
|
##Basic example
|
28
49
|
|
29
50
|
This is what a simple login form could look like using this gem
|
@@ -31,10 +52,10 @@ This is what a simple login form could look like using this gem
|
|
31
52
|
```html
|
32
53
|
<rails-form id='sign_in_form' action="/users/sign_in" method="POST" scope="user" submitText="Sign In"></rails-form>
|
33
54
|
<script>
|
34
|
-
document.getElementById("sign_in_form").setAttribute("structure", JSON.stringify(
|
35
|
-
|
36
|
-
|
37
|
-
|
55
|
+
document.getElementById("sign_in_form").setAttribute("structure", JSON.stringify([
|
56
|
+
{ key: "email", type: 'string', label: "Email Address" },
|
57
|
+
{ key: "password", type: 'password' }
|
58
|
+
]))
|
38
59
|
</script>
|
39
60
|
```
|
40
61
|
|
@@ -55,11 +76,11 @@ polymer element that extends rails-form. Here's the same login form
|
|
55
76
|
submitText: "Sign In",
|
56
77
|
|
57
78
|
ready: function(){
|
58
|
-
this.structure =
|
59
|
-
|
60
|
-
|
79
|
+
this.structure = [
|
80
|
+
{ key: "email", type: 'string', label: "Email Address" },
|
81
|
+
{ key: "password", type: 'password' },
|
61
82
|
}
|
62
|
-
|
83
|
+
]
|
63
84
|
});
|
64
85
|
</script>
|
65
86
|
</polymer-element>
|
@@ -84,17 +105,16 @@ again, but this time with nested location attributes
|
|
84
105
|
submitText: "Sign In",
|
85
106
|
|
86
107
|
ready: function(){
|
87
|
-
this.structure =
|
88
|
-
|
89
|
-
|
90
|
-
|
91
|
-
|
92
|
-
|
93
|
-
|
94
|
-
|
95
|
-
|
96
|
-
|
97
|
-
}
|
108
|
+
this.structure = [
|
109
|
+
{ key: "email", type: 'string', label: "Email Address", required: true },
|
110
|
+
{ key: "password", type: 'password', required: true },
|
111
|
+
{ key: "location", type: 'nest', allowAdd: false, multiple: false, structure: [
|
112
|
+
{ key: "address", type: "string" },
|
113
|
+
{ key: "city", type: "string" },
|
114
|
+
{ key: "state", type: "string" },
|
115
|
+
{ key: "zip", type: "string" }
|
116
|
+
]}
|
117
|
+
]
|
98
118
|
}
|
99
119
|
});
|
100
120
|
</script>
|
@@ -106,28 +126,95 @@ to set ```multiple: true``` the name would become ```user[location_attributes][0
|
|
106
126
|
you were to set ```allowAdd: true``` the inputs would be in a list with the option to create more.
|
107
127
|
|
108
128
|
|
109
|
-
|
129
|
+
##GROUPS AND STEPS
|
130
|
+
|
131
|
+
Sometimes you want to style a group of elements in a form and polymer selectors can get somewhat
|
132
|
+
unwieldy without having a list of them so polymer-rails-forms now includes groups. Groups are similar to
|
133
|
+
nests but don't change the scope for inputs, they're purely for styling. If, for instance, ```location```
|
134
|
+
in the previous example were not a nested attribute, but just a group of fields you wanted to add some special
|
135
|
+
styling to you could write it like
|
136
|
+
|
137
|
+
```javascript
|
138
|
+
this.structure = [
|
139
|
+
{ key: "email", type: 'string', label: "Email Address", required: true },
|
140
|
+
{ key: "password", type: 'password', required: true },
|
141
|
+
{ key: "location", type: 'group', structure: [
|
142
|
+
{ key: "address", type: "string" },
|
143
|
+
{ key: "city", type: "string" },
|
144
|
+
{ key: "state", type: "string" },
|
145
|
+
{ key: "zip", type: "string" }
|
146
|
+
]}
|
147
|
+
]
|
148
|
+
```
|
149
|
+
|
150
|
+
which would keep all the address fields in the default scope but wrap them in a div with the class 'location'.
|
151
|
+
|
152
|
+
Additionally, if you wanted to make the form a multi-step form, with the user entering in the email, password
|
153
|
+
on the first step and the location information in the second simply group fields by step like so:
|
154
|
+
|
155
|
+
```javascript
|
156
|
+
this.structure = [
|
157
|
+
{ key: "header": type: "html", content: "<h4>This will stay visible because it's outside of the steps</h4>" },
|
158
|
+
{ key: "step_1", type: "step", structure: [
|
159
|
+
{ key: "email", type: 'string', label: "Email Address", required: true },
|
160
|
+
{ key: "password", type: 'password', required: true },
|
161
|
+
{ key: "location", type: 'group', structure: [
|
162
|
+
]},
|
163
|
+
{ key: "step_2", type: "step", structure: [
|
164
|
+
{ key: "address", type: "string" },
|
165
|
+
{ key: "city", type: "string" },
|
166
|
+
{ key: "state", type: "string" },
|
167
|
+
{ key: "zip", type: "string" }
|
168
|
+
]}
|
169
|
+
]
|
170
|
+
```
|
171
|
+
|
172
|
+
##Validations
|
110
173
|
|
111
174
|
Also not that I've included ```required: true``` on the email and password fields. This means this triggers
|
112
175
|
them to be validated onSubmit and onChange. For a custome validation just use ```validates: 'method_name'```
|
113
176
|
|
114
177
|
####Note:
|
115
178
|
|
116
|
-
If you're going to use the domReady function in your custom form element, be sure to call
|
179
|
+
If you're going to use the domReady or created function in your custom form element, be sure to call
|
117
180
|
```this.super()``` at the top of the function to run the form's default domReady functionality
|
118
181
|
(which includes appending all the inputs so... kind of important). If you don't want the default
|
119
182
|
functionality though, just make sure you run the ```this.appendInputs()``` so the inputs get added.
|
120
183
|
|
121
|
-
|
184
|
+
##XHR
|
122
185
|
|
123
186
|
To make the form ajaxy just include the form element's ```xhr='true'``` param
|
124
187
|
and override the ```handleXhrCallback``` function.
|
125
188
|
|
189
|
+
##Notes about certain field types
|
190
|
+
|
191
|
+
###Arbitrary HTML
|
192
|
+
|
193
|
+
Sometimes you want to just put a bit of explanation or whatever else in the middle of a form. To
|
194
|
+
do this just create a field with the type 'html' and give is a 'content' attribute. The content attribute is
|
195
|
+
just a string of HTML that will be injected inbetween whatever inputs you put it between.
|
126
196
|
|
127
197
|
###Selects
|
128
198
|
|
129
|
-
|
130
|
-
arrays, so ```[[value1, text2], [value2, text2]]```
|
199
|
+
Selects are the same as any other input except that they also require the values property which is and array of
|
200
|
+
arrays, so ```[[value1, text2], [value2, text2]]```. If ```multi``` is set to true then it'll be a multi select
|
201
|
+
with those slick paper-checkboxes
|
202
|
+
|
203
|
+
###JSON fields
|
204
|
+
Since Postgres now has those awesome HStore and JSON fields you can take for advantage of them by using a json field
|
205
|
+
|
206
|
+
```javascript
|
207
|
+
{ key: "awesome_json", type: "json", multiple: false, structure: [
|
208
|
+
{ key: "first_field", type: "string"},
|
209
|
+
{ key: "nests_work_to", type: "nest", multiple: true, allowAdd: false, structure: [
|
210
|
+
{ key: "cool_right", type: "string" }
|
211
|
+
]}
|
212
|
+
]}
|
213
|
+
```
|
214
|
+
This will create multiple inputs that all automatically serialize to a single field in the form's data called
|
215
|
+
'awesome_json' whenever any of them are changed. If anyone out there wants to try this out with some other noSQL
|
216
|
+
DB's that'd be awesome.
|
217
|
+
|
131
218
|
|
132
219
|
##What's supported what's not
|
133
220
|
|
@@ -140,11 +227,14 @@ arrays, so ```[[value1, text2], [value2, text2]]```
|
|
140
227
|
* email
|
141
228
|
* url
|
142
229
|
* integer
|
230
|
+
* select (single / multi)
|
143
231
|
* date (uses pickaday.js)
|
144
232
|
* location (uses google places API, which you'll have to include separately)
|
145
|
-
*
|
233
|
+
* file
|
234
|
+
* image
|
146
235
|
* checkbox
|
147
|
-
* json
|
236
|
+
* json
|
237
|
+
* arbitrary HTML
|
148
238
|
|
149
239
|
###What's not supported
|
150
240
|
|
@@ -152,6 +242,6 @@ arrays, so ```[[value1, text2], [value2, text2]]```
|
|
152
242
|
* ranges
|
153
243
|
* everything else
|
154
244
|
|
155
|
-
Support for radio buttons, ranges (sliders)
|
156
|
-
|
245
|
+
Support for radio buttons, ranges (sliders) will be coming when someone requests them or I
|
246
|
+
need them for something.
|
157
247
|
|