Twitter-Bootstrap-Rails Gem Workflow

twitter-bootstrap-rails gem workflow

There is a RailsCasts tutorial that is a great starting point:

http://railscasts.com/episodes/328-twitter-bootstrap-basics

Rails app: using a gem vs. including source with Twitter Bootstrap

I absolutely agree it's underwhelming to have the Bootstrap files sit outside your application.

I recommend the following workflow in this case:

1. Clone the repo bootstrap-sass from Github or download the zipball. It's the official port of Bootstrap into Sass and it's kept updated by the same team.

2. Copy only the Sass partials (the ones whose filename begins with an underscore) to app/vendor/assets/stylesheets. Javascript and images go into their respective directories under app/vendor/assets. That will remind you to stay away from editing those files while at the same time keeping your app's asset directories clean. And whenever you feel like taking a closer look at them, they will be right at hand.

3. Copy bootstrap.scss to app/assets/stylesheets and tinker with those as much as you want. Be sure to turn off all the features you're not using, because carrying that stuff around will mean having a larger CSS file than you need.

4. Customize your Boostrap variables and classes and load them after the Bootstrap files in your manifest, just like you would with a gem. For instance, let's say you put your own variables into _overrides.scss. Your application.css.scss would look like this:

   @import "bootstrap";
   @import "overrides";
   

That's it. That's what app/vendor/assets was made for!

Twitter Bootstrap Rails button dropdown no responding to AJAX

So I finally figured this one out. The key was having the workflow down: :remote => true connects to the toggle_in_service method in the controller that then calls the toggle_in_service.js.erb file which finally calls toggle_button.html.erb. I also found that when working in Bootstrap it's probably best to try and target an existing <div> for replacement rather than wrap a piece of bootstrap code in another div. Not sure on that but it seemed to matter. Here is the code that worked:

dashboard.html.erb view snippet:

 <% status_link = tool.in_service ? "Put Out of Service" : "Put In Service" %>
 <% button_link = "#{tool.location}-#{tool.name.singularize}"+'<br>'+" #{tool.serial}" %>
 <div class="btn-group" id="btn<%= tool.id %>" >

    <a class="btn custombutton dropdown-toggle <%= (tool.in_service  ? 'btn-success' : 'btn-warning') %>" data-toggle="dropdown" href="#"  >
      <%=  raw(button_link) %>
    </a>

    <ul class="dropdown-menu">
      <li><%= link_to status_link, toggle_in_service_path(:id => tool.id), :method => :post, :remote => true %></li>
      <li><%= link_to "view Details", tool_path(tool.id) %></li>
    </ul>
 </div>

This creates a Bootstrap dropdown menu attached to a button that is color coded by the status of the tool.

The first link in the dropdown menu is a remote ajax call to the toggle_in_service controller, passing the tool.id paramter. The controller method looks like:

def toggle_in_service
   status_change = @tool.in_service ? false : true
   @tool.update(:in_service => status_change)
   respond_to do |format|
     format.html { redirect_to(@tool) }
     format.js
  end
end

The boolean value for tool.in_service gets flipped and then calls toggle_in_service.js.erb:

<% btn_id = "btn#{@tool.id}" %>

$('#<%=btn_id%>').html('<%= escape_javascript(render :partial => "toggle_button") %>');

Which does an AJAX render of the _toggle_button.html.erb partial:

<% button_link = "#{@tool.location}-#{@tool.name.singularize}"+'<br>'+" #{@tool.serial}" %>
<% status_link = @tool.in_service ? "Put Out of Service" : "Put In Service" %>

<a class="btn custombutton dropdown-toggle <%= (@tool.in_service  ? 'btn-success' : 'btn-warning') %>" data-toggle="dropdown" href="#"  >
  <%=  raw(button_link) %>
</a>
<ul class="dropdown-menu">
  <li><%= link_to status_link, toggle_in_service_path(:id => @tool.id), :method => :post, :remote => true %></li>
  <li><%= link_to "view Details", tool_path(@tool.id) %></li>
</ul>

Works great! The entire div for the dropdown and the button get updated by AJAX. I'm posting this in case someone looks for something similar. I search many hours on the web and on Stack Overflow, but never found what I needed. I did some reading up on Rails AJAX to figure out what I was doing wrong.

What is the correct protocol/etiquette for forking a Ruby/Rails gem on Github that may be maintained as an ongoing, parallel fork?

Sounds like you handled the bugfix / fork properly already.

Depending on the license of the gem, release it as yourname-originalname.

You've made substantial changes which the community as a whole may be interested in and this is the accepted standard for forking and releasing.

It also solves your bonus question. Change whatever you want for your release. It's essentially a new project now. Still good to credit the original dev of course :)

nested_form and twitter typeahead

You can listen for click events and activate typeahed after field was added.,
handling javascript events is given in the README of nested_form gem.

e.g.

 $(document).on('nested:fieldAdded', function(event){
      // this field was just inserted into your form
      var field = event.field; 
      field.typeahead({
        hint: true,
        highlight: true,
        minLength: 1
      },
      {
         name: 'authors',
         displayKey: 'author',

         source: authors.ttAdapter()
     });
});

---

Related Topics