Now with ostrio:flow-router-extra support.
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.
lookback:body-class
is available on Atmosphere:
meteor add lookback:body-class
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
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');
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.
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
});
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
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 are welcome. Please open issues and/or file Pull Requests.
MIT.
Made by Lookback.