Document title mixin for Ember.Router

document_title.js

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;

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

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"

@jayphelps - sure!

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

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