Implement DOM-ready execution in Rails using the Asset Pipeline.
Go to file
John Bintz aef76fac19 add penchant for dev stuff 2012-08-27 09:39:34 -04:00
app/assets/javascripts initial commit, yeehaw 2012-08-23 08:43:06 -04:00
lib a little code cleanup 2012-08-23 13:32:54 -04:00
script add penchant for dev stuff 2012-08-27 09:39:34 -04:00
.gitignore initial commit, yeehaw 2012-08-23 08:43:06 -04:00
Gemfile add penchant for dev stuff 2012-08-27 09:39:34 -04:00
Gemfile.penchant add penchant for dev stuff 2012-08-27 09:39:34 -04:00
LICENSE initial commit, yeehaw 2012-08-23 08:43:06 -04:00
README.md add penchant for dev stuff 2012-08-27 09:39:34 -04:00
Rakefile add penchant for dev stuff 2012-08-27 09:39:34 -04:00
bullseye.gemspec add sass functionality, like whoa 2012-08-23 09:43:15 -04:00

README.md

Bullseye!

An extremely quickly written shoot-from-the-hip implementation of so-called Garber-Irish DOM-ready execution for the Rails asset pipeline. Even provides functionalty for Sass to target those pages! Could work with other Sprockets stuff down the road, too. But for now, it's pretty married to Rails. Also, needs tests for the exactly four things that it does. Anyone wanna add exactly four Cucumber features?

Why?

I got sick of on-page JavaScript. Also I like using the Asset Pipeline for what it's actually intended for, reducing the number of HTTP requests. Finally, targeting pages in Sass should be easy.

How?

Add the gem:

gem 'bullseye'

Replace your body tag in your layout with:

!!!
%html
  = bullseye_body do
    = yield

That adds data-action and data-controller attributes to your body tag automagically. The controller comes from ActionController::Base.controller_path, so it's the full namespaced underscored path (Admin::UsersController becomes admin/users).

Then, in application.js:

//= require bullseye

Finally, create some controller/actions-specific files within app/assets/javascripts/bullseye and give them the extenstion .bullseye. For instance, target SitesController#show in JS and CoffeeScript:

// app/assets/javascripts/bullseye/sites/show.bullseye

alert("I am showing a site");
# app/assets/javascripts/bullseye/sites/show.bullseye.coffee

alert "I am also showing a site"

Want to target that page in your Sass? Use a little string interpolation and a function that generates a selector:

#{bullseye('sites/show')} {
  background-color: green;
}

Piece of cake.

Hacking

You'll need to install Penchant to mess with the Gemfile during development.