polymer-rails-forms 0.1.12 → 0.1.13
Sign up to get free protection for your applications and to get access to all the features.
- checksums.yaml +4 -4
- data/LICENSE +22 -0
- data/README.md +147 -0
- data/assets/rails-forms/gc-paper-decorator.html +18 -0
- data/assets/rails-forms/pikaday.css +173 -0
- data/assets/rails-forms/pikaday.js +920 -0
- data/assets/rails-forms/rails-form-helpers.html +744 -0
- data/assets/rails-forms/rails-form-validators.html +106 -0
- data/assets/rails-forms/rails-form.html +288 -0
- data/lib/polymer_rails_forms/railtie.rb +11 -0
- data/lib/tasks/install.rake +6 -0
- metadata +11 -1
checksums.yaml
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
---
|
|
2
2
|
SHA1:
|
|
3
|
-
metadata.gz:
|
|
4
|
-
data.tar.gz:
|
|
3
|
+
metadata.gz: c2fa8b0c6a144b84346b5a6a3f187e2b5465257d
|
|
4
|
+
data.tar.gz: c8801d3c7ff77b0820c3f42fd18948144e2a022a
|
|
5
5
|
SHA512:
|
|
6
|
-
metadata.gz:
|
|
7
|
-
data.tar.gz:
|
|
6
|
+
metadata.gz: db95e62a5c0f3882e599ba01a3f135c601bb8d2d051b238ad0ad7d658c929ded46a519b182a0a4d432b2307d8a78cdf81bf0d82ef425fcb30479b63e8b006565
|
|
7
|
+
data.tar.gz: a9421fdf17b6b0ddefbf6aa292c7e85eed6f8c6f6cd79295a7422320f5537d2e78993db5ea4f4acaf1e84c9ceddee6d025d41ae9ea34d6010e4eefeb4452815b
|
data/LICENSE
ADDED
|
@@ -0,0 +1,22 @@
|
|
|
1
|
+
The MIT License (MIT)
|
|
2
|
+
|
|
3
|
+
Copyright (c) 2014 gearcommons
|
|
4
|
+
|
|
5
|
+
Permission is hereby granted, free of charge, to any person obtaining a copy
|
|
6
|
+
of this software and associated documentation files (the "Software"), to deal
|
|
7
|
+
in the Software without restriction, including without limitation the rights
|
|
8
|
+
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
|
|
9
|
+
copies of the Software, and to permit persons to whom the Software is
|
|
10
|
+
furnished to do so, subject to the following conditions:
|
|
11
|
+
|
|
12
|
+
The above copyright notice and this permission notice shall be included in all
|
|
13
|
+
copies or substantial portions of the Software.
|
|
14
|
+
|
|
15
|
+
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
|
|
16
|
+
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
|
|
17
|
+
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
|
|
18
|
+
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
|
|
19
|
+
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
|
|
20
|
+
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
|
|
21
|
+
SOFTWARE.
|
|
22
|
+
|
data/README.md
ADDED
|
@@ -0,0 +1,147 @@
|
|
|
1
|
+
polymer-rails-forms
|
|
2
|
+
===================
|
|
3
|
+
|
|
4
|
+
|
|
5
|
+
##What this gem does
|
|
6
|
+
|
|
7
|
+
This gem depends on emcee and adds to your vendor/assets/components directory
|
|
8
|
+
the rails-form element. Which, unsurprisingly, let's you create complex rails compatible
|
|
9
|
+
forms in polymer by simply defining a form's structure and optionally data via
|
|
10
|
+
javascript.
|
|
11
|
+
|
|
12
|
+
##Installation
|
|
13
|
+
|
|
14
|
+
first follow the installation instructions for emcee
|
|
15
|
+
|
|
16
|
+
```
|
|
17
|
+
gem install polymer-rails-form
|
|
18
|
+
rake polymer_rails_forms:install
|
|
19
|
+
```
|
|
20
|
+
|
|
21
|
+
then in your /app/assets/components/application.html file add
|
|
22
|
+
|
|
23
|
+
```
|
|
24
|
+
*= require rails-forms/rails-form
|
|
25
|
+
```
|
|
26
|
+
|
|
27
|
+
##Basic example
|
|
28
|
+
|
|
29
|
+
This is what a simple login form could look like using this gem
|
|
30
|
+
|
|
31
|
+
```html
|
|
32
|
+
<rails-form id='sign_in_form' action="/users/sign_in" methos="POST" scope="user" submitText="Sign In"></rails-form>
|
|
33
|
+
<script>
|
|
34
|
+
document.getElementById("sign_in_form").setAttribute("structure", JSON.stringify({
|
|
35
|
+
email: { type: 'string', label: "Email Address" },
|
|
36
|
+
password: { type: 'password' }
|
|
37
|
+
}))
|
|
38
|
+
</script>
|
|
39
|
+
```
|
|
40
|
+
|
|
41
|
+
This syntax, however short is a bit clunky, a better way of using this gem is to create forms by creating a
|
|
42
|
+
polymer element that extends rails-form. Here's the same login form
|
|
43
|
+
|
|
44
|
+
|
|
45
|
+
```html
|
|
46
|
+
<link rel="import" href="../rails-forms/rails-form.html" >
|
|
47
|
+
<polymer-element name="login-form" extends='rails-form'>
|
|
48
|
+
<shadow></shadow>
|
|
49
|
+
|
|
50
|
+
<script>
|
|
51
|
+
Polymer({
|
|
52
|
+
action: "/users/sign_in",
|
|
53
|
+
method: "POST",
|
|
54
|
+
scope: "user",
|
|
55
|
+
submitText: "Sign In",
|
|
56
|
+
|
|
57
|
+
ready: function(){
|
|
58
|
+
this.structure = {
|
|
59
|
+
email: { type: 'string', label: "Email Address" },
|
|
60
|
+
password: { type: 'password' },
|
|
61
|
+
}
|
|
62
|
+
}
|
|
63
|
+
});
|
|
64
|
+
</script>
|
|
65
|
+
</polymer-element>
|
|
66
|
+
```
|
|
67
|
+
|
|
68
|
+
This syntax gives you the flexibility to add encapulated methods and styles. It's a lot
|
|
69
|
+
better for complex forms.
|
|
70
|
+
|
|
71
|
+
Nested attributes are supported (otherwise what's the point right?). This is that login form
|
|
72
|
+
again, but this time with nested location attributes
|
|
73
|
+
|
|
74
|
+
```html
|
|
75
|
+
<link rel="import" href="../rails-forms/rails-form.html" >
|
|
76
|
+
<polymer-element name="login-form" extends='rails-form'>
|
|
77
|
+
<shadow></shadow>
|
|
78
|
+
|
|
79
|
+
<script>
|
|
80
|
+
Polymer({
|
|
81
|
+
action: "/users/sign_in",
|
|
82
|
+
method: "POST",
|
|
83
|
+
scope: "user",
|
|
84
|
+
submitText: "Sign In",
|
|
85
|
+
|
|
86
|
+
ready: function(){
|
|
87
|
+
this.structure = {
|
|
88
|
+
email: { type: 'string', label: "Email Address" },
|
|
89
|
+
password: { type: 'password' },
|
|
90
|
+
location: { type: 'nest', allowAdd: false, multiple: false, structure: {
|
|
91
|
+
address: { type: "string" },
|
|
92
|
+
city: { type: "string" },
|
|
93
|
+
state: { type: "string" },
|
|
94
|
+
zip: { type: "string" }
|
|
95
|
+
}
|
|
96
|
+
}
|
|
97
|
+
}
|
|
98
|
+
}
|
|
99
|
+
});
|
|
100
|
+
</script>
|
|
101
|
+
</polymer-element>
|
|
102
|
+
```
|
|
103
|
+
|
|
104
|
+
This would give the location input the name ```user[location_attributes][city]```. If you were
|
|
105
|
+
to set ```multiple: true``` the name would become ```user[location_attributes][0][city]```. And if
|
|
106
|
+
you were to set ```allowAdd: true``` the inputs would be in a list with the option to create more.
|
|
107
|
+
|
|
108
|
+
|
|
109
|
+
####Note:
|
|
110
|
+
|
|
111
|
+
If you're going to use the domReady function in your custom form element, be sure to call
|
|
112
|
+
```this.super()``` at the top of the function to run the form's default domReady functionality
|
|
113
|
+
(which includes appending all the inputs so... kind of important). If you don't want the default
|
|
114
|
+
functionality though, just make sure you run the ```this.appendInputs()``` so the inputs get added.
|
|
115
|
+
|
|
116
|
+
###XHR
|
|
117
|
+
|
|
118
|
+
To make the form ajaxy just include the form element's ```xhr='true'``` param
|
|
119
|
+
and override the ```handleXhrCallback``` function.
|
|
120
|
+
|
|
121
|
+
##What's supported what's not
|
|
122
|
+
|
|
123
|
+
###So far the field types that are supported are:
|
|
124
|
+
|
|
125
|
+
* string
|
|
126
|
+
* password
|
|
127
|
+
* hidden
|
|
128
|
+
* textarea
|
|
129
|
+
* email
|
|
130
|
+
* url
|
|
131
|
+
* integer
|
|
132
|
+
* date (uses pickaday.js)
|
|
133
|
+
* location (uses google places API, which you'll have to include separately)
|
|
134
|
+
* image (works, but CSS is messed up)
|
|
135
|
+
* checkbox
|
|
136
|
+
* json (limted, only basic objects are supported so far, not nested arrays and objects)
|
|
137
|
+
|
|
138
|
+
###What's not supported
|
|
139
|
+
|
|
140
|
+
* radio buttons
|
|
141
|
+
* selects
|
|
142
|
+
* ranges
|
|
143
|
+
* everything else
|
|
144
|
+
|
|
145
|
+
Support for radio buttons, ranges (sliders), and selects will hopefully be coming shortly.
|
|
146
|
+
Everything else, who knows. This is still a very early release.
|
|
147
|
+
|
|
@@ -0,0 +1,18 @@
|
|
|
1
|
+
<!--
|
|
2
|
+
Exactly the same as the normal paper-input-decorator except if fires a
|
|
3
|
+
'focus-changed' event with the state of the label
|
|
4
|
+
-->
|
|
5
|
+
|
|
6
|
+
<link rel='import' href='../paper-input/paper-input-decorator.html' >
|
|
7
|
+
|
|
8
|
+
<polymer-element name="gc-input-decorator" extends="paper-input-decorator">
|
|
9
|
+
<shadow></shadow>
|
|
10
|
+
<script>
|
|
11
|
+
Polymer({
|
|
12
|
+
updateLabelVisibility: function(){
|
|
13
|
+
this.super(arguments);
|
|
14
|
+
this.fire("focus-changed", { state: this._autoLabelVisible })
|
|
15
|
+
}
|
|
16
|
+
});
|
|
17
|
+
</script>
|
|
18
|
+
</polymer-element>
|
|
@@ -0,0 +1,173 @@
|
|
|
1
|
+
/*!
|
|
2
|
+
* Pikaday
|
|
3
|
+
* Copyright © 2014 David Bushell | BSD & MIT license | http://dbushell.com/
|
|
4
|
+
*/
|
|
5
|
+
|
|
6
|
+
.pika-single {
|
|
7
|
+
z-index: 9999;
|
|
8
|
+
display: none;
|
|
9
|
+
width: 240px;
|
|
10
|
+
padding: 8px;
|
|
11
|
+
color: #333;
|
|
12
|
+
background: #fff;
|
|
13
|
+
border: 1px solid #ccc;
|
|
14
|
+
border-bottom-color: #bbb;
|
|
15
|
+
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
|
|
16
|
+
min-width: 240px;
|
|
17
|
+
box-shadow: 0 5px 15px -5px rgba(0,0,0,.5);
|
|
18
|
+
position: absolute;
|
|
19
|
+
}
|
|
20
|
+
|
|
21
|
+
gc-input-decorator[focused] .pika-single {
|
|
22
|
+
display: block !important;
|
|
23
|
+
}
|
|
24
|
+
|
|
25
|
+
.pika-single.is-bound {
|
|
26
|
+
position: absolute;
|
|
27
|
+
box-shadow: 0 5px 15px -5px rgba(0,0,0,.5);
|
|
28
|
+
}
|
|
29
|
+
|
|
30
|
+
.pika-title {
|
|
31
|
+
position: relative;
|
|
32
|
+
text-align: center;
|
|
33
|
+
}
|
|
34
|
+
|
|
35
|
+
.pika-label {
|
|
36
|
+
display: inline-block;
|
|
37
|
+
*display: inline;
|
|
38
|
+
position: relative;
|
|
39
|
+
z-index: 9999;
|
|
40
|
+
overflow: hidden;
|
|
41
|
+
margin: 0;
|
|
42
|
+
padding: 5px 3px;
|
|
43
|
+
font-size: 14px;
|
|
44
|
+
line-height: 20px;
|
|
45
|
+
font-weight: bold;
|
|
46
|
+
background-color: #fff;
|
|
47
|
+
}
|
|
48
|
+
.pika-title select {
|
|
49
|
+
cursor: pointer;
|
|
50
|
+
position: absolute;
|
|
51
|
+
z-index: 9998;
|
|
52
|
+
margin: 0;
|
|
53
|
+
left: 0;
|
|
54
|
+
top: 5px;
|
|
55
|
+
filter: alpha(opacity=0);
|
|
56
|
+
opacity: 0;
|
|
57
|
+
}
|
|
58
|
+
|
|
59
|
+
.pika-prev,
|
|
60
|
+
.pika-next {
|
|
61
|
+
display: block;
|
|
62
|
+
cursor: pointer;
|
|
63
|
+
position: relative;
|
|
64
|
+
outline: none;
|
|
65
|
+
border: 0;
|
|
66
|
+
padding: 0;
|
|
67
|
+
width: 20px;
|
|
68
|
+
height: 30px;
|
|
69
|
+
/* hide text using text-indent trick, using width value (it's enough) */
|
|
70
|
+
text-indent: 20px;
|
|
71
|
+
white-space: nowrap;
|
|
72
|
+
overflow: hidden;
|
|
73
|
+
background-color: transparent;
|
|
74
|
+
background-position: center center;
|
|
75
|
+
background-repeat: no-repeat;
|
|
76
|
+
background-size: 75% 75%;
|
|
77
|
+
opacity: .5;
|
|
78
|
+
*position: absolute;
|
|
79
|
+
*top: 0;
|
|
80
|
+
}
|
|
81
|
+
|
|
82
|
+
.pika-prev:hover,
|
|
83
|
+
.pika-next:hover {
|
|
84
|
+
opacity: 1;
|
|
85
|
+
}
|
|
86
|
+
|
|
87
|
+
.pika-prev,
|
|
88
|
+
.is-rtl .pika-next {
|
|
89
|
+
float: left;
|
|
90
|
+
background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAeCAYAAAAsEj5rAAAAUklEQVR42u3VMQoAIBADQf8Pgj+OD9hG2CtONJB2ymQkKe0HbwAP0xucDiQWARITIDEBEnMgMQ8S8+AqBIl6kKgHiXqQqAeJepBo/z38J/U0uAHlaBkBl9I4GwAAAABJRU5ErkJggg==');
|
|
91
|
+
*left: 0;
|
|
92
|
+
}
|
|
93
|
+
|
|
94
|
+
.pika-next,
|
|
95
|
+
.is-rtl .pika-prev {
|
|
96
|
+
float: right;
|
|
97
|
+
background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAeCAYAAAAsEj5rAAAAU0lEQVR42u3VOwoAMAgE0dwfAnNjU26bYkBCFGwfiL9VVWoO+BJ4Gf3gtsEKKoFBNTCoCAYVwaAiGNQGMUHMkjGbgjk2mIONuXo0nC8XnCf1JXgArVIZAQh5TKYAAAAASUVORK5CYII=');
|
|
98
|
+
*right: 0;
|
|
99
|
+
}
|
|
100
|
+
|
|
101
|
+
.pika-prev.is-disabled,
|
|
102
|
+
.pika-next.is-disabled {
|
|
103
|
+
cursor: default;
|
|
104
|
+
opacity: .2;
|
|
105
|
+
}
|
|
106
|
+
|
|
107
|
+
.pika-select {
|
|
108
|
+
display: inline-block;
|
|
109
|
+
*display: inline;
|
|
110
|
+
}
|
|
111
|
+
|
|
112
|
+
.pika-table {
|
|
113
|
+
width: 100%;
|
|
114
|
+
border-collapse: collapse;
|
|
115
|
+
border-spacing: 0;
|
|
116
|
+
border: 0;
|
|
117
|
+
}
|
|
118
|
+
|
|
119
|
+
.pika-table th,
|
|
120
|
+
.pika-table td {
|
|
121
|
+
width: 14.285714285714286%;
|
|
122
|
+
padding: 0;
|
|
123
|
+
}
|
|
124
|
+
|
|
125
|
+
.pika-table th {
|
|
126
|
+
color: #999;
|
|
127
|
+
font-size: 12px;
|
|
128
|
+
line-height: 25px;
|
|
129
|
+
font-weight: bold;
|
|
130
|
+
text-align: center;
|
|
131
|
+
}
|
|
132
|
+
|
|
133
|
+
.pika-button {
|
|
134
|
+
cursor: pointer;
|
|
135
|
+
display: block;
|
|
136
|
+
outline: none;
|
|
137
|
+
border: 0;
|
|
138
|
+
margin: 0;
|
|
139
|
+
width: 100%;
|
|
140
|
+
padding: 5px;
|
|
141
|
+
color: #666;
|
|
142
|
+
font-size: 12px;
|
|
143
|
+
line-height: 15px;
|
|
144
|
+
text-align: right;
|
|
145
|
+
background: white;
|
|
146
|
+
}
|
|
147
|
+
|
|
148
|
+
.is-today .pika-button {
|
|
149
|
+
color: #5BC0DE;
|
|
150
|
+
font-weight: bold;
|
|
151
|
+
}
|
|
152
|
+
|
|
153
|
+
.is-selected .pika-button {
|
|
154
|
+
color: #fff;
|
|
155
|
+
font-weight: bold;
|
|
156
|
+
background: #33aaff;
|
|
157
|
+
box-shadow: inset 0 1px 3px #178fe5;
|
|
158
|
+
border-radius: 3px;
|
|
159
|
+
}
|
|
160
|
+
|
|
161
|
+
.is-disabled .pika-button {
|
|
162
|
+
pointer-events: none;
|
|
163
|
+
cursor: default;
|
|
164
|
+
color: #999;
|
|
165
|
+
opacity: .3;
|
|
166
|
+
}
|
|
167
|
+
|
|
168
|
+
.pika-button:hover {
|
|
169
|
+
color: #fff !important;
|
|
170
|
+
background: #5BC0DE !important;
|
|
171
|
+
box-shadow: none !important;
|
|
172
|
+
border-radius: 3px !important;
|
|
173
|
+
}
|