Work In Progress: Dynamic titles and descriptions

static/js/app.js

@@ -206,8 +206,8 @@ if (window.__config && window.__config.SENTRY_PUBLIC_DSN) {
 }
 
 // Run the application.
-quayApp.run(['$location', '$rootScope', 'Restangular', 'UserService', 'PlanService', '$http', '$timeout', 'CookieService', 'Features', '$anchorScroll', 'UtilService',
+quayApp.run(['$location', '$rootScope', 'Restangular', 'UserService', 'PlanService', '$http', '$timeout', 'CookieService', 'Features', '$anchorScroll', 'UtilService', 'MetaService',
-  function($location, $rootScope, Restangular, UserService, PlanService, $http, $timeout, CookieService, Features, $anchorScroll, UtilService) {
+  function($location, $rootScope, Restangular, UserService, PlanService, $http, $timeout, CookieService, Features, $anchorScroll, UtilService, MetaService) {
 
   var title = window.__config['REGISTRY_TITLE'] || 'Quay.io';
 
@@ -299,34 +299,39 @@ quayApp.run(['$location', '$rootScope', 'Restangular', 'UserService', 'PlanServi
   });
 
   $rootScope.$on('$routeChangeSuccess', function (event, current, previous) {
-    $rootScope.pageClass = '';
     $rootScope.current = current.$$route;
+    $rootScope.currentPage = current;
+
+    $rootScope.pageClass = '';
 
     if (!current.$$route) { return; }
 
-    if (current.$$route.title) {
+    $rootScope.pageClass = current.$$route.pageClass || '';
-      $rootScope.title = current.$$route.title;
-    } else {
-      $rootScope.title = title;
-    }
-
-    if (current.$$route.pageClass) {
-      $rootScope.pageClass = current.$$route.pageClass;
-    }
-
     $rootScope.newLayout = !!current.$$route.newLayout;
-
-    if (current.$$route.description) {
-      $rootScope.description = current.$$route.description;
-    } else {
-      $rootScope.description = '';
-    }
-
     $rootScope.fixFooter = !!current.$$route.fixFooter;
+
+    MetaService.getInitialTitle(current, function(title) {
+      $rootScope.title = title;
+    });
+
+    MetaService.getInitialDescription(current, function(description) {
+      $rootScope.description = description
+    });
+
     $anchorScroll();
   });
 
-  $rootScope.$on('$viewContentLoaded', function(event, current) {
+  $rootScope.$on('$viewContentLoaded', function(event) {
+    var current = $rootScope.currentPage;
+
+    MetaService.getTitle(current, function(title) {
+      $rootScope.title = title;
+    });
+
+    MetaService.getDescription(current, function(description) {
+      $rootScope.description = description;
+    });
+
     var activeTab = $location.search()['tab'];
 
     // Setup deep linking of tabs. This will change the search field of the URL whenever a tab

static/js/pages/build-view.js

@@ -4,7 +4,9 @@
    */
   angular.module('quayPages').config(['pages', function(pages) {
     pages.create('build-view', 'build-view.html', BuildViewCtrl, {
-      newLayout: true
+      newLayout: true,
+      title: 'Build {{ build.display_name }}',
+      description: 'Logs and status for build {{ build.display_name }}'
     });
   }]);
 

static/js/services/meta-service.js

@@ -0,0 +1,58 @@
+/**
+ * Service which helps set the contents of the <meta> tags (and the <title> of a page).
+ */
+angular.module('quay').factory('MetaService', ['$interpolate', 'Config', '$rootScope', '$interval',
+    function($interpolate, Config, $rootScope, $interval) {
+  var metaService = {};
+
+  var interpolate = function(page, expr, callback) {
+    $rootScope.$watch(page.scope, function() {
+      var inter = $interpolate(expr, true, null, true);
+      callback(inter(page.scope));
+    });
+  };
+
+  var initial = function(value, default_value, callback) {
+    if (!value) {
+      callback(default_value);
+      return;
+    }
+
+    if (value.indexOf('{{') < 0) {
+      callback(default_value);
+      return;
+    }
+
+    callback('Loading...');
+  };
+
+  metaService.getInitialTitle = function(page, callback) {
+    var route = page.$$route;
+    initial(route && route.title, Config.REGISTRY_TITLE_SHORT, callback);
+  };
+
+  metaService.getInitialDescription = function(page, callback) {
+    var route = page.$$route;
+    initial(route && route.description, Config.REGISTRY_TITLE_SHORT, callback);
+  };
+
+  metaService.getTitle = function(page, callback) {
+    var route = page.$$route;
+    if (!route || !route.title || route.title.indexOf('{{') < 0) {
+      return;
+    }
+
+    interpolate(page, route.title, callback);
+  };
+
+  metaService.getDescription = function(page, callback) {
+    var route = page.$$route;
+    if (!route || !route.description || route.description.indexOf('{{') < 0) {
+      return;
+    }
+
+    interpolate(page, route.description, callback);
+  };
+
+  return metaService;
+}]);