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.