Meteor Community Logo

Meteor Community

Packosphere

undefined's Avatar

ostrio:flow-router-title

v3.2.1•Published 5 years ago

This package has not had recent updates. Please investigate it's current state before committing to using it in your project.

Reactive page title

Change document.title on the fly within flow-router-extra.

Features:

  • 👨‍🔬 100% tests coverage;
  • 🎛 Per route, per group, and default (all routes) title tag.

Various ways to set title, ordered by prioritization:

  • FlowRouter.route() [overrides all below]
  • FlowRouter.group()
  • FlowRouter.globals
  • Head template <title>Text</title> tag [might be overridden by any above]

Install:

meteor add ostrio:flow-router-title

Demos / Tests:

ES6 Import:

1import { FlowRouterTitle } from 'meteor/ostrio:flow-router-title';

Usage:

Initialize FlowRouterTitle class by passing FlowRouter object. Right after creating all routes:

1import { FlowRouter }      from 'meteor/ostrio:flow-router-extra';
2import { FlowRouterTitle } from 'meteor/ostrio:flow-router-title';
3
4FlowRouter.route('/', {
5  action() { /* ... */ },
6  title: 'Title'
7  /* ... */
8});
9
10new FlowRouterTitle(FlowRouter);

Set title via Route

Set title property in route's or group's configuration:

1// Set default document.title value in
2// case router has no title property
3FlowRouter.globals.push({
4  title: 'Default title'
5});
6
7FlowRouter.route('/me/account', {
8  name: 'account',
9  title: 'My Account'
10});

.set() method

Set document.title during runtime (without route(s)):

1FlowRouter.route('/', {/* ... */});
2
3const titleHandler = new FlowRouterTitle(FlowRouter);
4// `.set()` method accepts only String
5titleHandler.set('My Awesome Title String'); // <- Returns `true`
6titleHandler.set(() => { return 'Wrapped title'; }); // <- Returns `false`, as function can't be set into the `document.title`

Function context

Use function context (with data hook):

1FlowRouter.route('/post/:_id', {
2  name: 'post',
3  waitOn(params) {
4    return [Meteor.subscribe('post', params._id)];
5  },
6  data(params) {
7    return Collections.Posts.findOne(params._id);
8  },
9  title(params, query, data) {
10    if (data) {
11      return data.title;
12    }
13    return '404: Page not found';
14  }
15});

Group context

Use group context:

1const account = FlowRouter.group({
2  prefix: '/account',
3  title: 'Account',
4  titlePrefix: 'Account > '
5});
6
7account.route('/', {
8  name: 'accountIndex' // Title will be `Account`
9});
10
11account.route('/settings', {
12  name: 'AccountSettings',
13  title: 'My Settings' // Title will be `Account > My Settings`
14});

Reactive data sources

To change title reactively, just pass it as function:

1FlowRouter.route('/me/account', {
2  name: 'account',
3  title() {
4    // In this example we used `ostrio:i18n` package
5    return i18n.get('account.document.title');
6  }
7});
8
9// Use params from route
10FlowRouter.route('/page/:something', {
11  name: 'somePage',
12  title(params) {
13    return 'Page ' + params.something;
14  }
15});

More examples

In all examples below title can be a Function or String:

1import { FlowRouter } from 'meteor/ostrio:flow-router-extra';
2
3FlowRouter.globals.push({
4  title() {/* ... */} // <-- Suitable for reactive data source
5});
6
7FlowRouter.globals.push({
8  title: 'Title text'
9});
10
11FlowRouter.group({
12  title() {/* ... */}, // <-- Suitable for reactive data source
13  titlePrefix() {/* ... */} // <-- Can accept reactive data source, but won't trigger re-computation
14});
15
16FlowRouter.group({
17  title: 'Title text',
18  titlePrefix: 'Title prefix text'
19});
20
21FlowRouter.route('/path', {
22  title() {/* ... */} // <-- Reactive
23});
24
25FlowRouter.route('/path', {
26  title: 'Title text'
27});

Running Tests

  1. Clone this package
  2. In Terminal (Console) go to directory where package is cloned
  3. Then run:

Meteor/Tinytest

# Default
meteor test-packages ./

# With custom port
meteor test-packages ./ --port 8888

# With local MongoDB and custom port
MONGO_URL="mongodb://127.0.0.1:27017/flow-router-title-tests" meteor test-packages ./ --port 8888

Support this project: