bootstrap_builder 0.1.2 → 0.2.0

data/README.md

@@ -2,9 +2,13 @@
 
 A Rails form builder that generates [Twitter Bootstrap](http://twitter.github.com/bootstrap) markup and helps keep your code clean.
 
+* Includes Twiter Bootstrap 2.0 CSS and Javascript files
 * Uses existing Rails helpers
-* Autogenerates labels
-
+* Auto-generates labels
+* Generates horizontal, vertical and inline forms
+* Groups of checkboxes
+* Groups of radio buttons
+* Prevents double clicking on submit buttons
 
 ## Installation
 
@@ -12,19 +16,30 @@ Add gem definition to your Gemfile:
     
     gem 'bootstrap_builder'
     
-Then from the Rails project's root run:
+Bundle it:
     
     bundle install
+
+Require it in your CSS manifest file:
+
+    //= require bootstrap
+    //= require bootstrap-responsive  <-- only if you want to support other devices
     
+Require it in your Javascript manifest file if you want to use Bootstrap's jQuery plugins:
+
+    //= require bootstrap
+
 ## Usage (with haml)
 
-### A sample user form
+Use `bootstrap_form_for` when you want to render a form with Bootstrap markup.
 
-Override  the autogenerated label by using the `:label` option on any element
+### A sample user form
 
     = bootstrap_form_for @user, :url => [:admin, @user] do |f|
       = f.text_field :name
-      = f.text_field :email
+      = f.number_field :age, nil, :in => 1...100
+      = f.email_field :email, :prepend => '@'
+      = f.phone_field :phone
       = f.password_field :password
       = f.password_field :password_confirmation
       = 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.
   
 ### A search form
 
-Hide the label by passing `:label => ''` on any field. 
-
-Useful for inline search forms.
+Hide the label by passing `:label => ''` on any field. (Useful for inline search forms)
 
 
     = bootstrap_form_for @search, :url => [:admin, :users], :html => {:method => :get, :class => 'form-search'} do |f|
@@ -56,7 +69,55 @@ Useful for inline search forms.
 
 *(Example using [MetaSearch](https://github.com/ernie/meta_search) helpers)*
 
+### Checkboxes
+
+A single checkbox:
+
+    = f.check_box :send_reminder
+
+A group of checkboxes:
+  
+    = f.check_box :colours, :values => [['Red', 1], ['Green', 2], ['Blue', 3]]
+
+### Radio buttons
+
+A single radio button:
+
+    = f.check_box :role, 'admin'
+
+A group of radio buttons:
+
+    = f.radio_button :role, [['Admin', 1], ['Manager', 2], ['Editor', 3]]
+
+### More examples
+
+Override the autogenerated label by using the `:label` option on any element.
+
+    = f.text_field :name, :label => 'Full name'
+
+Use `:append` and `:prepend` on any field:
+
+    = f.text_field :price, :append => '.00'
+    = f.email_field :email, :prepend => '@'
+
+
+Use `:help_block` to provide extra description to a fields:
+
+    = f.email_field :email, :help_block => 'Please enter your emails address'
+
+
+### Prevent double clicking
+
+If you add 'bootstrap_builder' to your Javascript manifest you'll be able to add an extra `:change_to_text` option to submit buttons.
+  
+    //= require bootstrap_builder
+
+This will allow you to prevent double clicking by replacing the submit button with a string after the button is clicked:
+
+    = f.submit 'Log In', :change_to_text => 'Saving ...'
+
+
 ---
 
-Author: [The Working Group](http://www.theworkinggroup.ca)
+Copyright 2012 Jack Neto, [The Working Group, Inc](http://www.theworkinggroup.ca)
 

data/VERSION

@@ -1 +1 @@
-0.1.2
+0.2.0

data/app/assets/javascripts/bootstrap_builder.js

@@ -0,0 +1,11 @@
+// Reset the state of the submit button
+$(document).ready(function() {
+  $('input[type=submit].btn.change_to_text').show();
+  $('.submit_text').hide();
+});
+
+// Shows the submit button replacement text on click
+$('input[type=submit].btn.change_to_text input[type=submit]').live('click', function(){
+  $(this).parent().next().show();
+  $(this).parent().hide();
+})

data/app/views/bootstrap_builder/_check_box.html.haml

@@ -2,12 +2,16 @@
 
   - if label_text.present?
     = builder.label(method, label_text, :class => 'control-label')
+
   .controls
     - if defined?(values)
       - values.each do |value|
-        %label.checkbox #{value[:field]} #{value[:label_text]}
+        %label.checkbox{:for => value[:id]}
+          #{value[:field]} #{value[:label_text]}
+      %p.help-block= help_block if help_block.present?
+
     - else
-      %label.checkbox
+      = builder.label(method, :class => 'checkbox') do
         = field
         = help_block if help_block.present?
         

data/app/views/bootstrap_builder/_radio_button.html.haml

@@ -1,22 +1,14 @@
-.clearfix{:class => ('error' if error_messages.present?)}
+.control-group{:class => ('error' if error_messages.present?)}
 
-  %label
-    = label_text
-    - if required
-      %span.required *
+  - if label_text.present?
+    = builder.label(method, label_text, :class => 'control-label')
 
-  .input
-    %ul.inputs-list
-      - choices.each do |choice|
-        %li
-          %label{:for => choice[:label_for]}
-            = choice[:field]
-            %span= choice[:label]
+  .controls
+    - choices.each do |choice|
+      %label.radio{:for => choice[:id]}
+        #{choice[:field]} #{choice[:label]}
 
-
-
-    - if description.present?
-      %span.help-block= description
+    %p.help-block= help_block if help_block.present?
 
     - if error_messages.present?
       %span.help-inline= error_messages

data/app/views/bootstrap_builder/_submit.html.haml

@@ -1,3 +1,4 @@
-= field
-= after_text
+%span.submit
+  = field
+  = after_text
     

data/bootstrap_builder.gemspec

@@ -5,11 +5,11 @@
 
 Gem::Specification.new do |s|
   s.name = "bootstrap_builder"
-  s.version = "0.1.2"
+  s.version = "0.2.0"
 
   s.required_rubygems_version = Gem::Requirement.new(">= 0") if s.respond_to? :required_rubygems_version=
   s.authors = ["Jack Neto", "The Working Group Inc."]
-  s.date = "2012-02-06"
+  s.date = "2012-02-07"
   s.description = ""
   s.email = "jack@twg.ca"
   s.extra_rdoc_files = [
@@ -26,7 +26,7 @@ Gem::Specification.new do |s|
     "app/assets/images/glyphicons-halflings-white.png",
     "app/assets/images/glyphicons-halflings.png",
     "app/assets/javascripts/bootstrap.js",
-    "app/assets/javascripts/formatted_form.js",
+    "app/assets/javascripts/bootstrap_builder.js",
     "app/assets/stylesheets/bootstrap-responsive.css",
     "app/assets/stylesheets/bootstrap.css",
     "app/views/bootstrap_builder/_check_box.html.haml",

data/lib/bootstrap_builder/builder.rb

@@ -1,7 +1,21 @@
 module BootstrapBuilder
   class Builder < ActionView::Helpers::FormBuilder
     
-    %w(text_field password_field text_area file_field datetime_select date_select time_zone_select).each do |field_name|
+    %w(
+      text_field 
+      password_field 
+      email_field
+      telephone_field
+      phone_field
+      number_field
+      text_area 
+      file_field 
+      datetime_select 
+      date_select 
+      time_zone_select
+      range_field
+      search_field
+    ).each do |field_name|
       define_method field_name do |method, *args|
         options = args.detect { |a| a.is_a?(Hash) } || {}
         render_field(field_name, method, options) { super(method, options) } 
@@ -18,12 +32,13 @@ module BootstrapBuilder
 
     def check_box(method, options = {}, checked_value = "1", unchecked_value = "0")
       if options[:values].present?
-        values = options[:values].collect do |key, val|
-
+        values = options.delete(:values).collect do |key, val|
+          name = "#{object_name}[#{method}][]"
+          id = "#{object_name}_#{method}_#{val.to_s.gsub(' ', '_').underscore}"
           {
-            :field => super(method, options.merge({:name => "#{object_name}[#{method}][]"}), val, nil),
+            :field => super(method, options.merge({:name => name, :id => id}), val, nil),
             :label_text => key,
-            :label_for => "#{object_name}_#{method}_#{val.to_s.gsub(' ', '_').underscore}"
+            :id => id
           }
         end
         @template.render(:partial => "#{BootstrapBuilder.config.template_folder}/check_box", :locals  => {
@@ -31,6 +46,7 @@ module BootstrapBuilder
           :method => method,
           :values => values,
           :label_text => label_text(method, options.delete(:label)),
+          :help_block => @template.raw(options.delete(:help_block)),
           :error_messages => error_messages_for(method)
         })
       else
@@ -52,7 +68,7 @@ module BootstrapBuilder
             {
               :field => super(method, choice[1], options),
               :label => choice[0],
-              :label_for => "#{object_name}_#{method}_#{choice[1].to_s.gsub(' ', '_').underscore}"
+              :id => "#{object_name}_#{method}_#{choice[1].to_s.gsub(' ', '_').underscore}"
             }
           end
         else
@@ -89,8 +105,9 @@ module BootstrapBuilder
 
       # Set the script to change the text
       if change_to_text = options.delete(:change_to_text)
+        options[:class] += ' change_to_text'
         options[:onclick] ||= ''
-        options[:onclick] = "$(this).closest('.actions').hide();$(this).closest('.actions').after($('<div class=actions>#{change_to_text}</div>'))"
+        options[:onclick] = "$(this).closest('.submit').hide();$(this).closest('.submit').after($('<div class=submit>#{change_to_text}</div>'))"
       end
 
       @template.render(:partial => "#{BootstrapBuilder.config.template_folder}/submit", :locals  => {
@@ -149,7 +166,6 @@ module BootstrapBuilder
       @template.render(:partial => "#{BootstrapBuilder.config.template_folder}/#{template}", :locals  => {
         :builder => self,
         :method => method,
-        :field_name => field_name,
         :field => @template.capture(&block),
         :label_text => label_text(method, options.delete(:label)),
         :required => options.delete(:required),

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: bootstrap_builder
 version: !ruby/object:Gem::Version
-  version: 0.1.2
+  version: 0.2.0
   prerelease: 
 platform: ruby
 authors:
@@ -10,7 +10,7 @@ authors:
 autorequire: 
 bindir: bin
 cert_chain: []
-date: 2012-02-06 00:00:00.000000000 Z
+date: 2012-02-07 00:00:00.000000000 Z
 dependencies: []
 description: ''
 email: jack@twg.ca
@@ -29,7 +29,7 @@ files:
 - app/assets/images/glyphicons-halflings-white.png
 - app/assets/images/glyphicons-halflings.png
 - app/assets/javascripts/bootstrap.js
-- app/assets/javascripts/formatted_form.js
+- app/assets/javascripts/bootstrap_builder.js
 - app/assets/stylesheets/bootstrap-responsive.css
 - app/assets/stylesheets/bootstrap.css
 - app/views/bootstrap_builder/_check_box.html.haml

data/app/assets/javascripts/formatted_form.js

@@ -1,17 +0,0 @@
-// Reset the state of the submit button
-$(document).ready(function() {
-  $('.form_element.submit.change_to_text').show();
-  $('.submit_text').hide();
-});
-
-// Shows the submit button replacement text on click
-$('.form_element.submit.change_to_text input[type=submit]').live('click', function(){
-  $(this).parent().next().show();
-  $(this).parent().hide();
-})
-
-// Activates the submit button click when clicking the image button
-$('.form_element.submit a.submit_image').live('click', function(){
-  $(this).prev().click();
-  return false;
-})