lookback/meteor-bodyclass

Easily scope CSS by automatically adding the current template and layout names as classes on the body element.

Lookback Body Classes for Meteor

This package automatically adds classes on the body element (default) for the names of the current template and layout used. It also reactively updates a class name returned from a function.

Having classes for templates and layouts are great (if not vital) for scoping with CSS and similar.

Install

lookback:body-class is available on Atmosphere:

meteor add lookback:body-class

Usage

The package exports the BodyClass namespace on the client.

The add method adds a class to the body:

// Adds a string, string array or result from a function to the body element.

BodyClass.add('some-class')
// => body.some-class

BodyClass.add(['some-class', 'other-class'])
// => body.some-class.other-class

Session.setDefault('state', 'foo');

BodyClass.add(function() {
  return Session.get('state');
});
// => body.foo

Session.set('state', 'bar');
// => body.bar

Iron Router

The run method adds the names of the current template and/or layout to the body, and cleanup removes them. Goes well with Iron Router's onBeforeAction and onStop hooks:

Router.route('home', {
  path: '/home'
});

Router.route('foo', {
  path: '/foo',
  layoutTemplate: 'DefaultTemplate'
});

Router.onBeforeAction(function() {
  BodyClass.run();
});

Router.onStop(function() {
  BodyClass.cleanup();
});

Router.go('home');
// => body.home

Router.go('foo');
// => body.defaulttemplate.foo

This behavior is available as a nifty one-line-init Iron Router plugin:

Router.plugin('bodyClasses');

Flow Router

Triggers are automatically added for you, with:

FlowRouter.triggers.enter([() => BodyClass.run()]);
FlowRouter.triggers.exit([() => BodyClass.cleanup()]);

For Flow Router, we use the route name and potentially the layout name for a template. Like this:

FlowRouter.route({
  name: 'something',
  layout: 'MyLayout'
});

As of Flow Router 2.8.0, route groups also can specify options, and thus you can use the layout property there as well.

FlowRouter.group({
  name: 'webapp',
  layout: 'WebAppLayout'
});

Note that template and layout names are added in lower case.

Configure

It's possible to configure the package with the following options:

BodyClass.config({
  element: 'body' // What element to manipulate, defaults to 'body'
  classes: []     // What classes that *always* should be added
});

Tests

This package is tested with the sanjo:jasmine package, bundled in a separate Meteor app in the test-app dir. To run tests:

cd test-app
meteor --test

Version history

• 0.4.1
  • If current route has no layout, get group's, then try parent's, then default layout
• 0.4.0
  • Add support for Flow Router.
  • Needs Meteor 1.2.0.2.
• 0.1.0 - Initial publish.

Contributions

Contributions are welcome. Please open issues and/or file Pull Requests.

License

MIT.

---

Made by Lookback.

meteor-bodyclass's Issues

BodyClass.run() in Router.onBeforeAction causes hooks to run twice

This is global hooks and current route's hooks. It's happening because BodyClass.run() is a reactive data source, and it's changing. I would prefer for performance for hooks to run once, and it seems to continue to work when the hooks don't run again, when I do:

Router.onBeforeAction ->
  Tracker.nonreactive ->
    BodyClass.run()

I'd recommend either not changing the dep or adding a Tracker.nonreactive to your example in the README.