CODEWITHSUNDEEP
javascriptaurelia
Brandon Taylor
Brandon Taylor

Reputation: 34553

Appending a value to the Aurelia router config.title

I want to set a base title value for my Aurelia application and then append a value to it based on the route that is active.

My router configuration is:

export class App {
    configureRouter(config, router) {
        config.title = 'Brandon Taylor | Web Developer | Graphic Designer';
        config.map([
            . . .
            { route: 'work', name: 'work', moduleId: 'work', nav: true, title: ' | work' },
            . . .
        ]);

        this.router = router;
    }
}

Aurelia wants to append the title navigation parameter to the beginning of the config.title, but I would like it at the end.

I've tried doing an override in the view model:

export class Work {
    activate(params, routeConfig, navigationInstruction) {
        routeConfig.navModel.router.title += ' | work';
    };
}

but this results in:

Brandon Taylor | Web Developer | Graphic Designer | work | work | work ...

on each routing request. What am I doing wrong? or how can I append the route title attribute to the end of the config.title instead of the beginning?

Upvotes: 5

Views: 1222

Answers (3)

Brandon Taylor
Brandon Taylor

Reputation: 34553

Thanks for pointing me in the right direction @Jeremy Danyow.

What I ended up with was:

import {NavigationContext} from 'aurelia-router';

NavigationContext.prototype.standardBuildTitle = NavigationContext.prototype.buildTitle;

function buildTitle(separator=' | ') {
    var titleValues = this.standardBuildTitle(separator).split(separator),
        routeTitle = titleValues[0],
        configTitle = titleValues.slice(1);
    configTitle.push(routeTitle);
    return configTitle.join(separator);
}

NavigationContext.prototype.buildTitle = buildTitle;

The reason being that given:

config.title = 'Brandon Taylor | Web Developer | Graphic Designer'

and calling:

return standardTitle.split(separator).reverse().join(separator);

results in:

Graphic Designer | Web Developer | Brandon Taylor | about

instead of:

Brandon Taylor | Web Developer | Graphic Designer | about

Upvotes: 0

Jeremy Danyow
Jeremy Danyow

Reputation: 26406

Aurelia's standard title logic prepends the route title to the outer route/router's title. For example, in the skeleton-navigation app, the application router's title is Aurelia. The github users route's title is prepended to the router title producing Github Users | Aurelia. If you were to navigate to the child router page, the title updates to Welcome | Child Router | Aurelia. title

If I understand the question correctly, you would like this logic reversed. The desired result in this example would be Aurelia | Child Router | Welcome.

The title building logic resides in NavigationContext class's buildTitle method.

You can override this method by adding the following to your main.js:

// import the NavigationContext class.  It contains the method that
// builds the title.
import {NavigationContext} from 'aurelia-router';

// rename the standard "buildTitle" method.
NavigationContext.prototype.standardBuildTitle = NavigationContext.prototype.buildTitle;

// replace the standard "buildTitle" method with a version that
// reverses the order of the title parts.
function buildTitle(separator = ' | ') {
  let standardTitle = this.standardBuildTitle(separator);
  return standardTitle.split(separator).reverse().join(separator);
}
NavigationContext.prototype.buildTitle = buildTitle;

The end result looks like this: result

Upvotes: 5

Buzinas
Buzinas

Reputation: 11725

I know that the code above is a ~dirty~ workaround, but maybe can help you until you get a beautiful way to get what you want from Aurelia support.

Couldn't you do:

export class App {
    configureRouter(config, router) {
        const title = 'Brandon Taylor | Web Developer | Graphic Designer';
        config.title = '';
        var configMap = [
            . . .
            { route: 'work', name: 'work', moduleId: 'work', nav: true, title: ' | work' },
            . . .
        ];
        configMap.forEach(item => item.title = title + item.title);

        config.map(configMap);    
        this.router = router;
    }
}

Upvotes: 0

Related Questions