bootstrap_builder 0.1.2 → 0.2.0
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.
- data/README.md +71 -10
- data/VERSION +1 -1
- data/app/assets/javascripts/bootstrap_builder.js +11 -0
- data/app/views/bootstrap_builder/_check_box.html.haml +6 -2
- data/app/views/bootstrap_builder/_radio_button.html.haml +8 -16
- data/app/views/bootstrap_builder/_submit.html.haml +3 -2
- data/bootstrap_builder.gemspec +3 -3
- data/lib/bootstrap_builder/builder.rb +24 -8
- metadata +3 -3
- data/app/assets/javascripts/formatted_form.js +0 -17
data/README.md
CHANGED
@@ -2,9 +2,13 @@
|
|
2
2
|
|
3
3
|
A Rails form builder that generates [Twitter Bootstrap](http://twitter.github.com/bootstrap) markup and helps keep your code clean.
|
4
4
|
|
5
|
+
* Includes Twiter Bootstrap 2.0 CSS and Javascript files
|
5
6
|
* Uses existing Rails helpers
|
6
|
-
*
|
7
|
-
|
7
|
+
* Auto-generates labels
|
8
|
+
* Generates horizontal, vertical and inline forms
|
9
|
+
* Groups of checkboxes
|
10
|
+
* Groups of radio buttons
|
11
|
+
* Prevents double clicking on submit buttons
|
8
12
|
|
9
13
|
## Installation
|
10
14
|
|
@@ -12,19 +16,30 @@ Add gem definition to your Gemfile:
|
|
12
16
|
|
13
17
|
gem 'bootstrap_builder'
|
14
18
|
|
15
|
-
|
19
|
+
Bundle it:
|
16
20
|
|
17
21
|
bundle install
|
22
|
+
|
23
|
+
Require it in your CSS manifest file:
|
24
|
+
|
25
|
+
//= require bootstrap
|
26
|
+
//= require bootstrap-responsive <-- only if you want to support other devices
|
18
27
|
|
28
|
+
Require it in your Javascript manifest file if you want to use Bootstrap's jQuery plugins:
|
29
|
+
|
30
|
+
//= require bootstrap
|
31
|
+
|
19
32
|
## Usage (with haml)
|
20
33
|
|
21
|
-
|
34
|
+
Use `bootstrap_form_for` when you want to render a form with Bootstrap markup.
|
22
35
|
|
23
|
-
|
36
|
+
### A sample user form
|
24
37
|
|
25
38
|
= bootstrap_form_for @user, :url => [:admin, @user] do |f|
|
26
39
|
= f.text_field :name
|
27
|
-
= f.
|
40
|
+
= f.number_field :age, nil, :in => 1...100
|
41
|
+
= f.email_field :email, :prepend => '@'
|
42
|
+
= f.phone_field :phone
|
28
43
|
= f.password_field :password
|
29
44
|
= f.password_field :password_confirmation
|
30
45
|
= f.select :role, User::ROLES
|
@@ -44,9 +59,7 @@ Add a class to the form or any field to change the way it is rendered.
|
|
44
59
|
|
45
60
|
### A search form
|
46
61
|
|
47
|
-
Hide the label by passing `:label => ''` on any field.
|
48
|
-
|
49
|
-
Useful for inline search forms.
|
62
|
+
Hide the label by passing `:label => ''` on any field. (Useful for inline search forms)
|
50
63
|
|
51
64
|
|
52
65
|
= bootstrap_form_for @search, :url => [:admin, :users], :html => {:method => :get, :class => 'form-search'} do |f|
|
@@ -56,7 +69,55 @@ Useful for inline search forms.
|
|
56
69
|
|
57
70
|
*(Example using [MetaSearch](https://github.com/ernie/meta_search) helpers)*
|
58
71
|
|
72
|
+
### Checkboxes
|
73
|
+
|
74
|
+
A single checkbox:
|
75
|
+
|
76
|
+
= f.check_box :send_reminder
|
77
|
+
|
78
|
+
A group of checkboxes:
|
79
|
+
|
80
|
+
= f.check_box :colours, :values => [['Red', 1], ['Green', 2], ['Blue', 3]]
|
81
|
+
|
82
|
+
### Radio buttons
|
83
|
+
|
84
|
+
A single radio button:
|
85
|
+
|
86
|
+
= f.check_box :role, 'admin'
|
87
|
+
|
88
|
+
A group of radio buttons:
|
89
|
+
|
90
|
+
= f.radio_button :role, [['Admin', 1], ['Manager', 2], ['Editor', 3]]
|
91
|
+
|
92
|
+
### More examples
|
93
|
+
|
94
|
+
Override the autogenerated label by using the `:label` option on any element.
|
95
|
+
|
96
|
+
= f.text_field :name, :label => 'Full name'
|
97
|
+
|
98
|
+
Use `:append` and `:prepend` on any field:
|
99
|
+
|
100
|
+
= f.text_field :price, :append => '.00'
|
101
|
+
= f.email_field :email, :prepend => '@'
|
102
|
+
|
103
|
+
|
104
|
+
Use `:help_block` to provide extra description to a fields:
|
105
|
+
|
106
|
+
= f.email_field :email, :help_block => 'Please enter your emails address'
|
107
|
+
|
108
|
+
|
109
|
+
### Prevent double clicking
|
110
|
+
|
111
|
+
If you add 'bootstrap_builder' to your Javascript manifest you'll be able to add an extra `:change_to_text` option to submit buttons.
|
112
|
+
|
113
|
+
//= require bootstrap_builder
|
114
|
+
|
115
|
+
This will allow you to prevent double clicking by replacing the submit button with a string after the button is clicked:
|
116
|
+
|
117
|
+
= f.submit 'Log In', :change_to_text => 'Saving ...'
|
118
|
+
|
119
|
+
|
59
120
|
---
|
60
121
|
|
61
|
-
|
122
|
+
Copyright 2012 Jack Neto, [The Working Group, Inc](http://www.theworkinggroup.ca)
|
62
123
|
|
data/VERSION
CHANGED
@@ -1 +1 @@
|
|
1
|
-
0.
|
1
|
+
0.2.0
|
@@ -0,0 +1,11 @@
|
|
1
|
+
// Reset the state of the submit button
|
2
|
+
$(document).ready(function() {
|
3
|
+
$('input[type=submit].btn.change_to_text').show();
|
4
|
+
$('.submit_text').hide();
|
5
|
+
});
|
6
|
+
|
7
|
+
// Shows the submit button replacement text on click
|
8
|
+
$('input[type=submit].btn.change_to_text input[type=submit]').live('click', function(){
|
9
|
+
$(this).parent().next().show();
|
10
|
+
$(this).parent().hide();
|
11
|
+
})
|
@@ -2,12 +2,16 @@
|
|
2
2
|
|
3
3
|
- if label_text.present?
|
4
4
|
= builder.label(method, label_text, :class => 'control-label')
|
5
|
+
|
5
6
|
.controls
|
6
7
|
- if defined?(values)
|
7
8
|
- values.each do |value|
|
8
|
-
%label.checkbox
|
9
|
+
%label.checkbox{:for => value[:id]}
|
10
|
+
#{value[:field]} #{value[:label_text]}
|
11
|
+
%p.help-block= help_block if help_block.present?
|
12
|
+
|
9
13
|
- else
|
10
|
-
|
14
|
+
= builder.label(method, :class => 'checkbox') do
|
11
15
|
= field
|
12
16
|
= help_block if help_block.present?
|
13
17
|
|
@@ -1,22 +1,14 @@
|
|
1
|
-
.
|
1
|
+
.control-group{:class => ('error' if error_messages.present?)}
|
2
2
|
|
3
|
-
|
4
|
-
= label_text
|
5
|
-
- if required
|
6
|
-
%span.required *
|
3
|
+
- if label_text.present?
|
4
|
+
= builder.label(method, label_text, :class => 'control-label')
|
7
5
|
|
8
|
-
.
|
9
|
-
|
10
|
-
|
11
|
-
|
12
|
-
%label{:for => choice[:label_for]}
|
13
|
-
= choice[:field]
|
14
|
-
%span= choice[:label]
|
6
|
+
.controls
|
7
|
+
- choices.each do |choice|
|
8
|
+
%label.radio{:for => choice[:id]}
|
9
|
+
#{choice[:field]} #{choice[:label]}
|
15
10
|
|
16
|
-
|
17
|
-
|
18
|
-
- if description.present?
|
19
|
-
%span.help-block= description
|
11
|
+
%p.help-block= help_block if help_block.present?
|
20
12
|
|
21
13
|
- if error_messages.present?
|
22
14
|
%span.help-inline= error_messages
|
data/bootstrap_builder.gemspec
CHANGED
@@ -5,11 +5,11 @@
|
|
5
5
|
|
6
6
|
Gem::Specification.new do |s|
|
7
7
|
s.name = "bootstrap_builder"
|
8
|
-
s.version = "0.
|
8
|
+
s.version = "0.2.0"
|
9
9
|
|
10
10
|
s.required_rubygems_version = Gem::Requirement.new(">= 0") if s.respond_to? :required_rubygems_version=
|
11
11
|
s.authors = ["Jack Neto", "The Working Group Inc."]
|
12
|
-
s.date = "2012-02-
|
12
|
+
s.date = "2012-02-07"
|
13
13
|
s.description = ""
|
14
14
|
s.email = "jack@twg.ca"
|
15
15
|
s.extra_rdoc_files = [
|
@@ -26,7 +26,7 @@ Gem::Specification.new do |s|
|
|
26
26
|
"app/assets/images/glyphicons-halflings-white.png",
|
27
27
|
"app/assets/images/glyphicons-halflings.png",
|
28
28
|
"app/assets/javascripts/bootstrap.js",
|
29
|
-
"app/assets/javascripts/
|
29
|
+
"app/assets/javascripts/bootstrap_builder.js",
|
30
30
|
"app/assets/stylesheets/bootstrap-responsive.css",
|
31
31
|
"app/assets/stylesheets/bootstrap.css",
|
32
32
|
"app/views/bootstrap_builder/_check_box.html.haml",
|
@@ -1,7 +1,21 @@
|
|
1
1
|
module BootstrapBuilder
|
2
2
|
class Builder < ActionView::Helpers::FormBuilder
|
3
3
|
|
4
|
-
%w(
|
4
|
+
%w(
|
5
|
+
text_field
|
6
|
+
password_field
|
7
|
+
email_field
|
8
|
+
telephone_field
|
9
|
+
phone_field
|
10
|
+
number_field
|
11
|
+
text_area
|
12
|
+
file_field
|
13
|
+
datetime_select
|
14
|
+
date_select
|
15
|
+
time_zone_select
|
16
|
+
range_field
|
17
|
+
search_field
|
18
|
+
).each do |field_name|
|
5
19
|
define_method field_name do |method, *args|
|
6
20
|
options = args.detect { |a| a.is_a?(Hash) } || {}
|
7
21
|
render_field(field_name, method, options) { super(method, options) }
|
@@ -18,12 +32,13 @@ module BootstrapBuilder
|
|
18
32
|
|
19
33
|
def check_box(method, options = {}, checked_value = "1", unchecked_value = "0")
|
20
34
|
if options[:values].present?
|
21
|
-
values = options
|
22
|
-
|
35
|
+
values = options.delete(:values).collect do |key, val|
|
36
|
+
name = "#{object_name}[#{method}][]"
|
37
|
+
id = "#{object_name}_#{method}_#{val.to_s.gsub(' ', '_').underscore}"
|
23
38
|
{
|
24
|
-
:field => super(method, options.merge({:name =>
|
39
|
+
:field => super(method, options.merge({:name => name, :id => id}), val, nil),
|
25
40
|
:label_text => key,
|
26
|
-
:
|
41
|
+
:id => id
|
27
42
|
}
|
28
43
|
end
|
29
44
|
@template.render(:partial => "#{BootstrapBuilder.config.template_folder}/check_box", :locals => {
|
@@ -31,6 +46,7 @@ module BootstrapBuilder
|
|
31
46
|
:method => method,
|
32
47
|
:values => values,
|
33
48
|
:label_text => label_text(method, options.delete(:label)),
|
49
|
+
:help_block => @template.raw(options.delete(:help_block)),
|
34
50
|
:error_messages => error_messages_for(method)
|
35
51
|
})
|
36
52
|
else
|
@@ -52,7 +68,7 @@ module BootstrapBuilder
|
|
52
68
|
{
|
53
69
|
:field => super(method, choice[1], options),
|
54
70
|
:label => choice[0],
|
55
|
-
:
|
71
|
+
:id => "#{object_name}_#{method}_#{choice[1].to_s.gsub(' ', '_').underscore}"
|
56
72
|
}
|
57
73
|
end
|
58
74
|
else
|
@@ -89,8 +105,9 @@ module BootstrapBuilder
|
|
89
105
|
|
90
106
|
# Set the script to change the text
|
91
107
|
if change_to_text = options.delete(:change_to_text)
|
108
|
+
options[:class] += ' change_to_text'
|
92
109
|
options[:onclick] ||= ''
|
93
|
-
options[:onclick] = "$(this).closest('.
|
110
|
+
options[:onclick] = "$(this).closest('.submit').hide();$(this).closest('.submit').after($('<div class=submit>#{change_to_text}</div>'))"
|
94
111
|
end
|
95
112
|
|
96
113
|
@template.render(:partial => "#{BootstrapBuilder.config.template_folder}/submit", :locals => {
|
@@ -149,7 +166,6 @@ module BootstrapBuilder
|
|
149
166
|
@template.render(:partial => "#{BootstrapBuilder.config.template_folder}/#{template}", :locals => {
|
150
167
|
:builder => self,
|
151
168
|
:method => method,
|
152
|
-
:field_name => field_name,
|
153
169
|
:field => @template.capture(&block),
|
154
170
|
:label_text => label_text(method, options.delete(:label)),
|
155
171
|
:required => options.delete(:required),
|
metadata
CHANGED
@@ -1,7 +1,7 @@
|
|
1
1
|
--- !ruby/object:Gem::Specification
|
2
2
|
name: bootstrap_builder
|
3
3
|
version: !ruby/object:Gem::Version
|
4
|
-
version: 0.
|
4
|
+
version: 0.2.0
|
5
5
|
prerelease:
|
6
6
|
platform: ruby
|
7
7
|
authors:
|
@@ -10,7 +10,7 @@ authors:
|
|
10
10
|
autorequire:
|
11
11
|
bindir: bin
|
12
12
|
cert_chain: []
|
13
|
-
date: 2012-02-
|
13
|
+
date: 2012-02-07 00:00:00.000000000 Z
|
14
14
|
dependencies: []
|
15
15
|
description: ''
|
16
16
|
email: jack@twg.ca
|
@@ -29,7 +29,7 @@ files:
|
|
29
29
|
- app/assets/images/glyphicons-halflings-white.png
|
30
30
|
- app/assets/images/glyphicons-halflings.png
|
31
31
|
- app/assets/javascripts/bootstrap.js
|
32
|
-
- app/assets/javascripts/
|
32
|
+
- app/assets/javascripts/bootstrap_builder.js
|
33
33
|
- app/assets/stylesheets/bootstrap-responsive.css
|
34
34
|
- app/assets/stylesheets/bootstrap.css
|
35
35
|
- app/views/bootstrap_builder/_check_box.html.haml
|
@@ -1,17 +0,0 @@
|
|
1
|
-
// Reset the state of the submit button
|
2
|
-
$(document).ready(function() {
|
3
|
-
$('.form_element.submit.change_to_text').show();
|
4
|
-
$('.submit_text').hide();
|
5
|
-
});
|
6
|
-
|
7
|
-
// Shows the submit button replacement text on click
|
8
|
-
$('.form_element.submit.change_to_text input[type=submit]').live('click', function(){
|
9
|
-
$(this).parent().next().show();
|
10
|
-
$(this).parent().hide();
|
11
|
-
})
|
12
|
-
|
13
|
-
// Activates the submit button click when clicking the image button
|
14
|
-
$('.form_element.submit a.submit_image').live('click', function(){
|
15
|
-
$(this).prev().click();
|
16
|
-
return false;
|
17
|
-
})
|