Integrating simile timeline with Rails on asset pipeline

SIMILE Widgets from MIT has a few neat UI widgets available to use. They are quite powerful and scalable. The one I happen to have a need for is the Timeline. It provides perceptively infinite timeline widget in the scale that can range from years to minutes, intermixing on demand. The tool comes with detailed wiki that can help you set up a timeline on your html page elegantly. It can be themed and ajax'd. Events can be handled gracefully. Best of all: no flash. The copyright notice says 2006-2009, long before Rails asset pipeline was invented. There's not much information on the web about how we can utilize SIMILE Timeline in a proper manner with the asset pipeline, so here it is. Keep in mind that I put both timeline_ajax and timeline_js directories in vendor/assets.

1. Make sure the timeline_ajax and timeline_js directories are in the asset path:

application.rb
  config.assets.paths += path_to_timeline_ajax
  config.assets.paths += path_to_timeline_js

2. Make sure the asset precompile file list includes files in these two directories:

production.rb
  precompile_list = %w(app lib vendor).map {|path|
    Dir[Rails.root.join(*%W(#{path} assets ** *))].select {|f|
      f =~ /(\.js|\.s?css)/
    }
  }.flatten.map {|f|
    f.split(File::SEPARATOR).last
  }.uniq
  config.assets.precompile = (config.assets.precompile + precompile_list).uniq

3. Add the timeline configuration to the header of the view using timeline:

application.html.erb
  ...
  <%= yield :head %>
  ...
controller_name/show.html.erb
  <%= content_for(:head) do %>
    <%= javascript_tag do %>
      Timeline_ajax_url = "<%= asset_path("simile-ajax-api.js") %>";
      Timeline_urlPrefix = "/assets/";
      Timeline_parameters = 'bundle=true';
    <% end %>
  <% end %>

4. Require timeline with Sprocket

application.html.erb
  ...
  <%= yield :head %>
  <%= javascript_include_tag controller_name %>
controller_name.js
  ...
  //= require timeline-api
  ...

5. In timeline-api.js, make sure the url points to the asset directory

timeline-api.js
  // Change:
  var url = useLocalResources ?
    "http://127.0.0.1:9999/ajax/api/simile-ajax-api.js?bundle=false" :
    "http://static.simile.mit.edu/ajax/api-2.2.0/simile-ajax-api.js";
  // To:
  // var url = useLocalResources ?
  //   "http://127.0.0.1:9999/ajax/api/simile-ajax-api.js?bundle=false" :
  //   "http://static.simile.mit.edu/ajax/api-2.2.0/simile-ajax-api.js";
  var url = "/assets/simile-ajax-api.js";

6. Go forth and chronicle the world. Follow the instructions on SIMILE Timeline's wiki page.