Merge pull request #4522 from felixrieseberg/iss4487

Dynamic Titles in Ghost Admin

initializers/ghost-config.js

@@ -5,10 +5,11 @@ var ConfigInitializer = {
         var apps = $('body').data('apps'),
             tagsUI = $('body').data('tagsui'),
             fileStorage = $('body').data('filestorage'),
-            blogUrl = $('body').data('blogurl');
+            blogUrl = $('body').data('blogurl'),
+            blogTitle = $('body').data('blogtitle');
 
         application.register(
-            'ghost:config', {apps: apps, fileStorage: fileStorage, blogUrl: blogUrl, tagsUI: tagsUI}, {instantiate: false}
+            'ghost:config', {apps: apps, fileStorage: fileStorage, blogUrl: blogUrl, tagsUI: tagsUI, blogTitle: blogTitle}, {instantiate: false}
         );
 
         application.inject('route', 'config', 'ghost:config');

router.js

@@ -1,9 +1,13 @@
 /*global Ember */
+/* jshint unused: false */
 import ghostPaths from 'ghost/utils/ghost-paths';
+import documentTitle from 'ghost/utils/document-title';
 
 // ensure we don't share routes between all Router instances
 var Router = Ember.Router.extend();
 
+documentTitle();
+
 Router.reopen({
     location: 'trailing-history', // use HTML5 History API instead of hash-tag based URLs
     rootURL: ghostPaths().adminRoot, // admin interface lives under sub-directory /ghost

routes/application.js

@@ -14,6 +14,10 @@ var ApplicationRoute = Ember.Route.extend(SimpleAuth.ApplicationRouteMixin, Shor
         enter: {action: 'confirmModal', scope: 'modal'}
     },
 
+    title: function (tokens) {
+        return tokens.join(' - ') + ' - ' + this.get('config.blogTitle');
+    },
+
     actions: {
         authorizationFailed: function () {
             var currentRoute = this.get('controller').get('currentRouteName');

routes/debug.js

@@ -3,6 +3,8 @@ import styleBody from 'ghost/mixins/style-body';
 import loadingIndicator from 'ghost/mixins/loading-indicator';
 
 var DebugRoute = AuthenticatedRoute.extend(styleBody, loadingIndicator, {
+    titleToken: 'Debug',
+
     classNames: ['settings'],
 
     beforeModel: function (transition) {

routes/editor/edit.js

@@ -4,6 +4,8 @@ import isNumber from 'ghost/utils/isNumber';
 import isFinite from 'ghost/utils/isFinite';
 
 var EditorEditRoute = AuthenticatedRoute.extend(base, {
+    titleToken: 'Editor',
+
     model: function (params) {
         var self = this,
             post,

routes/editor/new.js

@@ -2,6 +2,8 @@ import AuthenticatedRoute from 'ghost/routes/authenticated';
 import base from 'ghost/mixins/editor-base-route';
 
 var EditorNewRoute = AuthenticatedRoute.extend(base, {
+    titleToken: 'Editor',
+
     model: function () {
         var self = this;
         return this.get('session.user').then(function (user) {

routes/error404.js

@@ -1,6 +1,7 @@
 var Error404Route = Ember.Route.extend({
     controllerName: 'error',
     templateName: 'error',
+    titleToken: 'Error',
 
     model: function () {
         return {

routes/forgotten.js

@@ -2,6 +2,8 @@ import styleBody from 'ghost/mixins/style-body';
 import loadingIndicator from 'ghost/mixins/loading-indicator';
 
 var ForgottenRoute = Ember.Route.extend(styleBody, loadingIndicator, {
+    titleToken: 'Forgotten Password',
+
     classNames: ['ghost-forgotten']
 });
 

routes/posts.js

@@ -14,6 +14,8 @@ paginationSettings = {
 };
 
 PostsRoute = AuthenticatedRoute.extend(ShortcutsRoute, styleBody, loadingIndicator, PaginationRouteMixin, {
+    titleToken: 'Content',
+
     classNames: ['manage'],
 
     model: function () {

routes/settings.js

@@ -3,6 +3,8 @@ import styleBody from 'ghost/mixins/style-body';
 import loadingIndicator from 'ghost/mixins/loading-indicator';
 
 var SettingsRoute = AuthenticatedRoute.extend(styleBody, loadingIndicator, {
+    titleToken: 'Settings',
+
     classNames: ['settings']
 });
 

routes/settings/about.js

@@ -3,6 +3,8 @@ import loadingIndicator from 'ghost/mixins/loading-indicator';
 import styleBody from 'ghost/mixins/style-body';
 
 var SettingsAboutRoute = AuthenticatedRoute.extend(styleBody, loadingIndicator, {
+    titleToken: 'About',
+
     classNames: ['settings-view-about'],
 
     cachedConfig: false,

routes/settings/apps.js

@@ -3,6 +3,8 @@ import CurrentUserSettings from 'ghost/mixins/current-user-settings';
 import styleBody from 'ghost/mixins/style-body';
 
 var AppsRoute = AuthenticatedRoute.extend(styleBody, CurrentUserSettings, {
+    titleToken: 'Apps',
+
     classNames: ['settings-view-apps'],
 
     beforeModel: function () {

routes/settings/general.js

@@ -11,6 +11,8 @@ var shortcuts = {},
 shortcuts[ctrlOrCmd + '+s'] = {action: 'save'};
 
 SettingsGeneralRoute = AuthenticatedRoute.extend(styleBody, loadingIndicator, CurrentUserSettings, ShortcutsRoute, {
+    titleToken: 'General',
+
     classNames: ['settings-view-general'],
 
     beforeModel: function () {

routes/settings/index.js

@@ -3,6 +3,8 @@ import CurrentUserSettings from 'ghost/mixins/current-user-settings';
 import mobileQuery from 'ghost/utils/mobile';
 
 var SettingsIndexRoute = MobileIndexRoute.extend(SimpleAuth.AuthenticatedRouteMixin, CurrentUserSettings, {
+    titleToken: 'Settings',
+
     // Redirect users without permission to view settings,
     // and show the settings.general route unless the user
     // is mobile

routes/settings/tags.js

@@ -10,6 +10,8 @@ var TagsRoute = AuthenticatedRoute.extend(CurrentUserSettings, PaginationRouteMi
         }
     },
 
+    titleToken: 'Tags',
+
     beforeModel: function () {
         if (!this.get('config.tagsUI')) {
             return this.transitionTo('settings.general');

routes/settings/users/index.js

@@ -12,6 +12,8 @@ paginationSettings = {
 };
 
 UsersIndexRoute = AuthenticatedRoute.extend(styleBody, PaginationRouteMixin, {
+    titleToken: 'Users',
+
     classNames: ['settings-view-users'],
 
     setupController: function (controller, model) {

routes/settings/users/user.js

@@ -9,6 +9,8 @@ var shortcuts = {},
 shortcuts[ctrlOrCmd + '+s'] = {action: 'save'};
 
 SettingsUserRoute = AuthenticatedRoute.extend(styleBody, ShortcutsRoute, {
+    titleToken: 'User',
+
     classNames: ['settings-view-user'],
 
     model: function (params) {

routes/setup.js

@@ -2,6 +2,8 @@ import styleBody from 'ghost/mixins/style-body';
 import loadingIndicator from 'ghost/mixins/loading-indicator';
 
 var SetupRoute = Ember.Route.extend(styleBody, loadingIndicator, {
+    titleToken: 'Setup',
+
     classNames: ['ghost-setup'],
 
     // use the beforeModel hook to check to see whether or not setup has been

routes/signin.js

@@ -2,7 +2,10 @@ import styleBody from 'ghost/mixins/style-body';
 import loadingIndicator from 'ghost/mixins/loading-indicator';
 
 var SigninRoute = Ember.Route.extend(styleBody, loadingIndicator, {
+    titleToken: 'Sign In',
+
     classNames: ['ghost-login'],
+
     beforeModel: function () {
         if (this.get('session').isAuthenticated) {
             this.transitionTo(SimpleAuth.Configuration.routeAfterAuthentication);

routes/signout.js

@@ -3,6 +3,8 @@ import styleBody from 'ghost/mixins/style-body';
 import loadingIndicator from 'ghost/mixins/loading-indicator';
 
 var SignoutRoute = AuthenticatedRoute.extend(styleBody, loadingIndicator, {
+    titleToken: 'Sign Out',
+
     classNames: ['ghost-signout'],
 
     afterModel: function (model, transition) {

utils/document-title.js

@@ -0,0 +1,60 @@
+var documentTitle = function () {
+    Ember.Route.reopen({
+        // `titleToken` can either be a static string or a function
+        // that accepts a model object and returns a string (or array
+        // of strings if there are multiple tokens).
+        titleToken: null,
+
+        // `title` can either be a static string or a function
+        // that accepts an array of tokens and returns a string
+        // that will be the document title. The `collectTitleTokens` action
+        // stops bubbling once a route is encountered that has a `title`
+        // defined.
+        title: null,
+
+        _actions: {
+            collectTitleTokens: function (tokens) {
+                var titleToken = this.titleToken,
+                    finalTitle;
+
+                if (typeof this.titleToken === 'function') {
+                    titleToken = this.titleToken(this.currentModel);
+                }
+
+                if (Ember.isArray(titleToken)) {
+                    tokens.unshift.apply(this, titleToken);
+                } else if (titleToken) {
+                    tokens.unshift(titleToken);
+                }
+
+                if (this.title) {
+                    if (typeof this.title === 'function') {
+                        finalTitle = this.title(tokens);
+                    } else {
+                        finalTitle = this.title;
+                    }
+
+                    this.router.setTitle(finalTitle);
+                } else {
+                    return true;
+                }
+            }
+        }
+    });
+
+    Ember.Router.reopen({
+        updateTitle: function () {
+            this.send('collectTitleTokens', []);
+        }.on('didTransition'),
+
+        setTitle: function (title) {
+            if (Ember.testing) {
+                this._title = title;
+            } else {
+                window.document.title = title;
+            }
+        }
+    });
+};
+
+export default documentTitle;