Skip to content

Instantly share code, notes, and snippets.

@tim-evans
Created August 22, 2014 19:28
Show Gist options
  • Save tim-evans/00054e63b8f0690888e2 to your computer and use it in GitHub Desktop.
Save tim-evans/00054e63b8f0690888e2 to your computer and use it in GitHub Desktop.
Document title mixin for Ember.Router
import Ember from "ember";
var get = Ember.get;
var copy = Ember.copy;
var removeObserver = Ember.removeObserver;
var addObserver = Ember.addObserver;
var DocumentTitleMixin = Ember.Mixin.create({
titleTokensDidChange: function () {
this.notifyPropertyChange('titleTokens');
},
titleTokens: function () {
var currentHandlerInfos = get(this, 'router.currentHandlerInfos'),
tokens = [],
token;
if (currentHandlerInfos) {
for (var i = 0, len = currentHandlerInfos.length; i < len; i++) {
token = get(currentHandlerInfos[i], 'handler.title');
if (token) {
tokens.push(token);
}
}
}
return tokens;
}.property(),
titleDivider: '|',
titleSpecificityIncreases: true,
title: function () {
var tokens = get(this, 'titleTokens'),
divider = get(this, 'titleDivider');
divider = ' ' + divider + ' ';
if (!get(this, 'titleSpecificityIncreases')) {
tokens = copy(tokens).reverse();
}
return tokens.join(divider);
}.property('titleTokens', 'titleDivider', 'titleSpecificityIncreases'),
titleDidChange: function () {
var title = get(this, 'title');
if (title) {
document.title = title;
}
}.observes('title').on('init'),
willTransition: function () {
var oldInfos = get(this, 'router.currentHandlerInfos');
if (oldInfos) {
for (var i = 0, len = oldInfos.length; i < len; i++) {
removeObserver(oldInfos[i].handler, 'title', this, this.titleTokensDidChange);
}
}
},
didTransition: function (infos) {
for (var i = 0, len = infos.length; i < len; i++) {
addObserver(infos[i].handler, 'title', this, this.titleTokensDidChange);
}
this.notifyPropertyChange('titleTokens');
return this._super(infos);
},
_setupRouter: function (router, location) {
var emberRouter = this;
router.willTransition = function (infos) {
emberRouter.willTransition(infos);
};
this._super(router, location);
}
});
export default DocumentTitleMixin;
@Genkilabs
Copy link

This is great. I tried adding an initializer to inject this into all instances of route, just so I didn't have to include it in every route file, but no luck. Any thoughts on how to do that?

@DaMitchell
Copy link

You dont want to include it in every route, what you want to do is extend the Router. Your code should look something like:

import Ember from 'ember';
import DocumentTitleMixin from 'document-title-mixin'; //will change depending on your setup

var Router = Ember.Router.extend(DocumentTitleMixin, {
    titleDivider: '-',
    titleSpecificityIncreases: false,
});

Hopefully that helps.

@jayphelps
Copy link

@tim-evans can you host this as a repo instead so we can bower this bad boy?

@oskarrough
Copy link

Hi, thanks so much. I'm having some trouble understanding what specificyIncrease does and how to use model data with the mixin. How would you use this mixin with a pattern as:

PostsRoute > "Posts - My site"
PostRoute > "Post title - My site"

@tim-evans
Copy link
Author

@jayphelps - sure!

@tim-evans
Copy link
Author

Look here for further information: https://github.com/paddle8/ember-document-title

I might turn this into an ember-cli addon as well

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment