backbone_form_helper 0.0.1 → 0.0.1.1.alpha

Sign up to get free protection for your applications and to get access to all the features.
@@ -0,0 +1,90 @@
1
+ #= require './bootstrap-datepicker'
2
+ #= require './templates/label'
3
+ #= require './templates/select'
4
+ #= require './templates/text_field'
5
+ #= require './templates/date_field'
6
+ #= require './templates/text_area'
7
+ #= require './templates/check_box'
8
+
9
+ class @FormHelper
10
+
11
+ constructor: (@model, @options) ->
12
+ if @options? and @options['name']?
13
+ @name = @options['name']
14
+ else
15
+ @name = @model.constructor.name.toLowerCase()
16
+
17
+ label: (attr, title, html_options={}) ->
18
+ if _.isObject(title) or !title?
19
+ [title, html_options] = [@attr2name(attr), {}]
20
+ JST['form_helper/templates/label'] @basics4attr(attr, title, html_options)
21
+
22
+ text_field: (attr, value, html_options={}) ->
23
+ if _.isObject(value)
24
+ [html_options, value] = [value, null]
25
+ JST['form_helper/templates/text_field'] @basics4attr(attr, value, html_options)
26
+
27
+ text_area: (attr, value, html_options={}) ->
28
+ if _.isObject(value)
29
+ [html_options, value] = [value, null]
30
+ JST['form_helper/templates/text_area'] @basics4attr(attr, value, html_options)
31
+
32
+ check_box: (attr, value, html_options={}) ->
33
+ if _.isObject(value)
34
+ [html_options, value] = [value, null]
35
+ title = html_options.title; delete html_options.title
36
+ attrs = @basics4attr(attr, value, html_options)
37
+ attrs.title = title
38
+ JST['form_helper/templates/check_box'] attrs
39
+
40
+ date_field: (attr, html_options={}) ->
41
+ JST['form_helper/templates/date_field'] @basics4attr(attr, value?, html_options)
42
+
43
+ select: (attr, options, html_options={}) ->
44
+ attrs = @basics4attr(attr, html_options)
45
+ attrs.values = options.values
46
+ attrs.value ||= options.selected
47
+ JST['form_helper/templates/select'] attrs
48
+
49
+ select_tag: (name, options, html_options={}) ->
50
+ attrs =
51
+ field_name : name
52
+ values : options.values
53
+ value : options.selected
54
+ unfold_options : @unfold_options html_options
55
+ field_id : name
56
+ JST['form_helper/templates/select'] attrs
57
+
58
+ #
59
+ #
60
+ #
61
+ field_id: (attr) ->
62
+ "#{@name}_#{attr}"
63
+
64
+ field_name: (attr) ->
65
+ "#{@name}[#{attr}]"
66
+
67
+ unfold_options: (options) ->
68
+ unfolded = for key, value of options
69
+ "#{key}=\"#{value}\""
70
+ unfolded.join(' ')
71
+
72
+ attr2name: (attr) ->
73
+ attr = @capitalize attr
74
+ attr = attr.replace /_/g, ' '
75
+ attr
76
+
77
+ basics4attr: (attr, value, html_options) ->
78
+ errors = @model.errors?[attr] or @model.get('errors')?[attr]
79
+ if errors
80
+ html_options.class = html_options.class?.concat(' error') or 'error'
81
+ attrs =
82
+ unfold_options: @unfold_options html_options
83
+ field_id: @field_id(attr)
84
+ field_name: @field_name(attr)
85
+ value: value or @model.get attr
86
+ errors: errors
87
+ attrs
88
+
89
+ capitalize: (str) ->
90
+ str.charAt(0).toUpperCase() + str.slice(1);
@@ -0,0 +1,6 @@
1
+ <label class="checkbox">
2
+ <input id="<%= @field_id %>" name="<%= @field_name %>" type="hidden" value="false">
3
+ <input id="<%= @field_id %>" name="<%= @field_name %>" type="checkbox"
4
+ value="true" <%= 'checked' if _.contains([1,'1',true,'true'], @value) %>>
5
+ <%= @title %>
6
+ </label>
@@ -0,0 +1,15 @@
1
+ <div class="input-append date datepicker" data-date="<%= @value %>" data-date-format="dd-mm-yyyy">
2
+ <input id="<%= @field_id %>" name="<%= @field_name %>"
3
+ size="16" type="text" value="<%= @value %>" <%- @unfold_options %>>
4
+ <span class="add-on"><i class="icon-th"></i></span>
5
+ </div>
6
+ <span class="help-inline">
7
+ <%= @errors if @errors %>
8
+ </span>
9
+ <script>
10
+ $(function(){
11
+ $('.datepicker input').datepicker({
12
+ autoclose: true
13
+ })
14
+ })
15
+ </script>
@@ -0,0 +1,3 @@
1
+ <label for="<%= @field_id %>" <%- @unfold_options %>>
2
+ <%= @value %>
3
+ </label>
@@ -0,0 +1,5 @@
1
+ <select <%- @unfold_options %> id="<%= @field_id %>" name="<%= @field_name %>">
2
+ <% for option in @values: %>
3
+ <option data="<%= @value %>" <%= "selected" if @value is option[0] %> value="<%= option[0] %>"><%= option[1] %></option>
4
+ <% end %>
5
+ </select>
@@ -0,0 +1,5 @@
1
+ <textarea id="<%= @field_id %>" <%- @unfold_options %>
2
+ name="<%= @field_name %>"><%= @value %></textarea>
3
+ <span class="help-inline">
4
+ <%= @errors if @errors %>
5
+ </span>
@@ -0,0 +1,5 @@
1
+ <input type="text" id="<%= @field_id %>" <%- @unfold_options %>
2
+ name="<%= @field_name %>" value="<%= @value %>" />
3
+ <span class="help-inline">
4
+ <%= @errors if @errors %>
5
+ </span>
@@ -0,0 +1,274 @@
1
+ /*!
2
+ * Datepicker for Bootstrap
3
+ *
4
+ * Copyright 2012 Stefan Petre
5
+ * Improvements by Andrew Rowls
6
+ * Licensed under the Apache License v2.0
7
+ * http://www.apache.org/licenses/LICENSE-2.0
8
+ *
9
+ */
10
+ .datepicker {
11
+ top: 0;
12
+ left: 0;
13
+ padding: 4px;
14
+ margin-top: 1px;
15
+ -webkit-border-radius: 4px;
16
+ -moz-border-radius: 4px;
17
+ border-radius: 4px;
18
+ /*.dow {
19
+ border-top: 1px solid #ddd !important;
20
+ }*/
21
+
22
+ }
23
+ .datepicker:before {
24
+ content: '';
25
+ display: inline-block;
26
+ border-left: 7px solid transparent;
27
+ border-right: 7px solid transparent;
28
+ border-bottom: 7px solid #ccc;
29
+ border-bottom-color: rgba(0, 0, 0, 0.2);
30
+ position: absolute;
31
+ top: -7px;
32
+ left: 6px;
33
+ }
34
+ .datepicker:after {
35
+ content: '';
36
+ display: inline-block;
37
+ border-left: 6px solid transparent;
38
+ border-right: 6px solid transparent;
39
+ border-bottom: 6px solid #ffffff;
40
+ position: absolute;
41
+ top: -6px;
42
+ left: 7px;
43
+ }
44
+ .datepicker > div {
45
+ display: none;
46
+ }
47
+ .datepicker.days div.datepicker-days {
48
+ display: block;
49
+ }
50
+ .datepicker.months div.datepicker-months {
51
+ display: block;
52
+ }
53
+ .datepicker.years div.datepicker-years {
54
+ display: block;
55
+ }
56
+ .datepicker table {
57
+ margin: 0;
58
+ }
59
+ .datepicker td,
60
+ .datepicker th {
61
+ text-align: center;
62
+ width: 20px;
63
+ height: 20px;
64
+ -webkit-border-radius: 4px;
65
+ -moz-border-radius: 4px;
66
+ border-radius: 4px;
67
+ }
68
+ .datepicker td.day:hover {
69
+ background: #eeeeee;
70
+ cursor: pointer;
71
+ }
72
+ .datepicker td.old,
73
+ .datepicker td.new {
74
+ color: #999999;
75
+ }
76
+ .datepicker td.disabled,
77
+ .datepicker td.disabled:hover {
78
+ background: none;
79
+ color: #999999;
80
+ cursor: default;
81
+ }
82
+ .datepicker td.today,
83
+ .datepicker td.today:hover,
84
+ .datepicker td.today.disabled,
85
+ .datepicker td.today.disabled:hover {
86
+ background-color: #fde19a;
87
+ background-image: -moz-linear-gradient(top, #fdd49a, #fdf59a);
88
+ background-image: -ms-linear-gradient(top, #fdd49a, #fdf59a);
89
+ background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#fdd49a), to(#fdf59a));
90
+ background-image: -webkit-linear-gradient(top, #fdd49a, #fdf59a);
91
+ background-image: -o-linear-gradient(top, #fdd49a, #fdf59a);
92
+ background-image: linear-gradient(top, #fdd49a, #fdf59a);
93
+ background-repeat: repeat-x;
94
+ filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#fdd49a', endColorstr='#fdf59a', GradientType=0);
95
+ border-color: #fdf59a #fdf59a #fbed50;
96
+ border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
97
+ filter: progid:dximagetransform.microsoft.gradient(enabled=false);
98
+ }
99
+ .datepicker td.today:hover,
100
+ .datepicker td.today:hover:hover,
101
+ .datepicker td.today.disabled:hover,
102
+ .datepicker td.today.disabled:hover:hover,
103
+ .datepicker td.today:active,
104
+ .datepicker td.today:hover:active,
105
+ .datepicker td.today.disabled:active,
106
+ .datepicker td.today.disabled:hover:active,
107
+ .datepicker td.today.active,
108
+ .datepicker td.today:hover.active,
109
+ .datepicker td.today.disabled.active,
110
+ .datepicker td.today.disabled:hover.active,
111
+ .datepicker td.today.disabled,
112
+ .datepicker td.today:hover.disabled,
113
+ .datepicker td.today.disabled.disabled,
114
+ .datepicker td.today.disabled:hover.disabled,
115
+ .datepicker td.today[disabled],
116
+ .datepicker td.today:hover[disabled],
117
+ .datepicker td.today.disabled[disabled],
118
+ .datepicker td.today.disabled:hover[disabled] {
119
+ background-color: #fdf59a;
120
+ }
121
+ .datepicker td.today:active,
122
+ .datepicker td.today:hover:active,
123
+ .datepicker td.today.disabled:active,
124
+ .datepicker td.today.disabled:hover:active,
125
+ .datepicker td.today.active,
126
+ .datepicker td.today:hover.active,
127
+ .datepicker td.today.disabled.active,
128
+ .datepicker td.today.disabled:hover.active {
129
+ background-color: #fbf069 \9;
130
+ }
131
+ .datepicker td.active,
132
+ .datepicker td.active:hover,
133
+ .datepicker td.active.disabled,
134
+ .datepicker td.active.disabled:hover {
135
+ background-color: #006dcc;
136
+ background-image: -moz-linear-gradient(top, #0088cc, #0044cc);
137
+ background-image: -ms-linear-gradient(top, #0088cc, #0044cc);
138
+ background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#0088cc), to(#0044cc));
139
+ background-image: -webkit-linear-gradient(top, #0088cc, #0044cc);
140
+ background-image: -o-linear-gradient(top, #0088cc, #0044cc);
141
+ background-image: linear-gradient(top, #0088cc, #0044cc);
142
+ background-repeat: repeat-x;
143
+ filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#0088cc', endColorstr='#0044cc', GradientType=0);
144
+ border-color: #0044cc #0044cc #002a80;
145
+ border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
146
+ filter: progid:dximagetransform.microsoft.gradient(enabled=false);
147
+ color: #fff;
148
+ text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
149
+ }
150
+ .datepicker td.active:hover,
151
+ .datepicker td.active:hover:hover,
152
+ .datepicker td.active.disabled:hover,
153
+ .datepicker td.active.disabled:hover:hover,
154
+ .datepicker td.active:active,
155
+ .datepicker td.active:hover:active,
156
+ .datepicker td.active.disabled:active,
157
+ .datepicker td.active.disabled:hover:active,
158
+ .datepicker td.active.active,
159
+ .datepicker td.active:hover.active,
160
+ .datepicker td.active.disabled.active,
161
+ .datepicker td.active.disabled:hover.active,
162
+ .datepicker td.active.disabled,
163
+ .datepicker td.active:hover.disabled,
164
+ .datepicker td.active.disabled.disabled,
165
+ .datepicker td.active.disabled:hover.disabled,
166
+ .datepicker td.active[disabled],
167
+ .datepicker td.active:hover[disabled],
168
+ .datepicker td.active.disabled[disabled],
169
+ .datepicker td.active.disabled:hover[disabled] {
170
+ background-color: #0044cc;
171
+ }
172
+ .datepicker td.active:active,
173
+ .datepicker td.active:hover:active,
174
+ .datepicker td.active.disabled:active,
175
+ .datepicker td.active.disabled:hover:active,
176
+ .datepicker td.active.active,
177
+ .datepicker td.active:hover.active,
178
+ .datepicker td.active.disabled.active,
179
+ .datepicker td.active.disabled:hover.active {
180
+ background-color: #003399 \9;
181
+ }
182
+ .datepicker td span {
183
+ display: block;
184
+ width: 23%;
185
+ height: 54px;
186
+ line-height: 54px;
187
+ float: left;
188
+ margin: 1%;
189
+ cursor: pointer;
190
+ -webkit-border-radius: 4px;
191
+ -moz-border-radius: 4px;
192
+ border-radius: 4px;
193
+ }
194
+ .datepicker td span:hover {
195
+ background: #eeeeee;
196
+ }
197
+ .datepicker td span.disabled,
198
+ .datepicker td span.disabled:hover {
199
+ background: none;
200
+ color: #999999;
201
+ cursor: default;
202
+ }
203
+ .datepicker td span.active,
204
+ .datepicker td span.active:hover,
205
+ .datepicker td span.active.disabled,
206
+ .datepicker td span.active.disabled:hover {
207
+ background-color: #006dcc;
208
+ background-image: -moz-linear-gradient(top, #0088cc, #0044cc);
209
+ background-image: -ms-linear-gradient(top, #0088cc, #0044cc);
210
+ background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#0088cc), to(#0044cc));
211
+ background-image: -webkit-linear-gradient(top, #0088cc, #0044cc);
212
+ background-image: -o-linear-gradient(top, #0088cc, #0044cc);
213
+ background-image: linear-gradient(top, #0088cc, #0044cc);
214
+ background-repeat: repeat-x;
215
+ filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#0088cc', endColorstr='#0044cc', GradientType=0);
216
+ border-color: #0044cc #0044cc #002a80;
217
+ border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
218
+ filter: progid:dximagetransform.microsoft.gradient(enabled=false);
219
+ color: #fff;
220
+ text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
221
+ }
222
+ .datepicker td span.active:hover,
223
+ .datepicker td span.active:hover:hover,
224
+ .datepicker td span.active.disabled:hover,
225
+ .datepicker td span.active.disabled:hover:hover,
226
+ .datepicker td span.active:active,
227
+ .datepicker td span.active:hover:active,
228
+ .datepicker td span.active.disabled:active,
229
+ .datepicker td span.active.disabled:hover:active,
230
+ .datepicker td span.active.active,
231
+ .datepicker td span.active:hover.active,
232
+ .datepicker td span.active.disabled.active,
233
+ .datepicker td span.active.disabled:hover.active,
234
+ .datepicker td span.active.disabled,
235
+ .datepicker td span.active:hover.disabled,
236
+ .datepicker td span.active.disabled.disabled,
237
+ .datepicker td span.active.disabled:hover.disabled,
238
+ .datepicker td span.active[disabled],
239
+ .datepicker td span.active:hover[disabled],
240
+ .datepicker td span.active.disabled[disabled],
241
+ .datepicker td span.active.disabled:hover[disabled] {
242
+ background-color: #0044cc;
243
+ }
244
+ .datepicker td span.active:active,
245
+ .datepicker td span.active:hover:active,
246
+ .datepicker td span.active.disabled:active,
247
+ .datepicker td span.active.disabled:hover:active,
248
+ .datepicker td span.active.active,
249
+ .datepicker td span.active:hover.active,
250
+ .datepicker td span.active.disabled.active,
251
+ .datepicker td span.active.disabled:hover.active {
252
+ background-color: #003399 \9;
253
+ }
254
+ .datepicker td span.old {
255
+ color: #999999;
256
+ }
257
+ .datepicker th.switch {
258
+ width: 145px;
259
+ }
260
+ .datepicker thead tr:first-child th,
261
+ .datepicker tfoot tr:first-child th {
262
+ cursor: pointer;
263
+ }
264
+ .datepicker thead tr:first-child th:hover,
265
+ .datepicker tfoot tr:first-child th:hover {
266
+ background: #eeeeee;
267
+ }
268
+ .input-append.date .add-on i,
269
+ .input-prepend.date .add-on i {
270
+ display: block;
271
+ cursor: pointer;
272
+ width: 16px;
273
+ height: 16px;
274
+ }
@@ -0,0 +1 @@
1
+ @import 'datepicker';
metadata CHANGED
@@ -1,8 +1,8 @@
1
1
  --- !ruby/object:Gem::Specification
2
2
  name: backbone_form_helper
3
3
  version: !ruby/object:Gem::Version
4
- version: 0.0.1
5
- prerelease:
4
+ version: 0.0.1.1.alpha
5
+ prerelease: 8
6
6
  platform: ruby
7
7
  authors:
8
8
  - Zdenal
@@ -11,7 +11,7 @@ bindir: bin
11
11
  cert_chain: []
12
12
  date: 2012-10-17 00:00:00.000000000 Z
13
13
  dependencies: []
14
- description: Form helper for backbone on Rails priciple -> f.text_field :name
14
+ description: Form helper for backbone based on Rails priciple -> f.text_field :name
15
15
  email:
16
16
  - nevralaz@gmail.com
17
17
  executables: []
@@ -25,8 +25,19 @@ files:
25
25
  - Rakefile
26
26
  - backbone_form_helper.gemspec
27
27
  - lib/backbone_form_helper.rb
28
+ - lib/backbone_form_helper/engine.rb
28
29
  - lib/backbone_form_helper/version.rb
29
- homepage: ''
30
+ - vendor/assets/javascripts/form_helper/bootstrap-datepicker.js
31
+ - vendor/assets/javascripts/form_helper/form_helper.js.coffee
32
+ - vendor/assets/javascripts/form_helper/templates/check_box.jst.eco
33
+ - vendor/assets/javascripts/form_helper/templates/date_field.jst.eco
34
+ - vendor/assets/javascripts/form_helper/templates/label.jst.eco
35
+ - vendor/assets/javascripts/form_helper/templates/select.jst.eco
36
+ - vendor/assets/javascripts/form_helper/templates/text_area.jst.eco
37
+ - vendor/assets/javascripts/form_helper/templates/text_field.jst.eco
38
+ - vendor/assets/stylesheets/form_helper/datepicker.css
39
+ - vendor/assets/stylesheets/form_helper/form_helper.scss
40
+ homepage: http://github.com/zdenal/backbone_form_helper.git
30
41
  licenses: []
31
42
  post_install_message:
32
43
  rdoc_options: []
@@ -41,11 +52,11 @@ required_ruby_version: !ruby/object:Gem::Requirement
41
52
  required_rubygems_version: !ruby/object:Gem::Requirement
42
53
  none: false
43
54
  requirements:
44
- - - ! '>='
55
+ - - ! '>'
45
56
  - !ruby/object:Gem::Version
46
- version: '0'
57
+ version: 1.3.1
47
58
  requirements: []
48
- rubyforge_project:
59
+ rubyforge_project: backbone_form_helper
49
60
  rubygems_version: 1.8.24
50
61
  signing_key:
51
62
  specification_version: 3