polymer-rails-forms 0.1.12 → 0.1.13
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 +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
|
+
}
|