backbone_form_helper 0.0.1 → 0.0.1.1.alpha

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.
@@ -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