Set CMS page title from Angular

diff --git a/ang/crmStatusPage/StatusPage.html b/ang/crmStatusPage/StatusPage.html
index 9e5de8d4da6bbe604c16041ac6de5815a734d7a1..218d11767e85b8ac589dba0255ea23a23a681e41 100644 (file)
--- a/ang/crmStatusPage/StatusPage.html
+++ b/ang/crmStatusPage/StatusPage.html
@@ -3,9 +3,7 @@
 
   <form name="crm-system-status" crm-ui-id-scope>
 
-    <div>
-      <h1>{{ts('Status Messages')}}</h1>
-    </div>
+    <h1 crm-ui-title>{{ts('CiviCRM System Status (%1)', {1: _.where(statuses, {is_visible: 1}).length})}}</h1>
 
     <div id="crm-status-list" crm-ui-tab-set>
       <div

diff --git a/ang/crmUi.js b/ang/crmUi.js
index b01e897d3fde78b17f01281fef5f3e254784d9ab..c8b2400ccda3ea076425690a329c4536943a6eb1 100644 (file)
--- a/ang/crmUi.js
+++ b/ang/crmUi.js
@@ -1,7 +1,8 @@
 /// crmUi: Sundry UI helpers
 (function (angular, $, _) {
 
-  var uidCount = 0;
+  var uidCount = 0,
+    pageTitle = 'CiviCRM';
 
   angular.module('crmUi', [])
 
@@ -975,6 +976,33 @@
         }
       };
     })
+
+    // Sets the one and only page title - uses CMS title if available
+    // WARNING: Use only once per route!
+    // Example: <h1 crm-ui-title>{{ts('Hello')}}</h1>
+    .directive('crmUiTitle', function($timeout) {
+      return {
+        link: function(scope, $el, attrs) {
+          function update() {
+            $timeout(function() {
+              var newTitle = $el.html();
+              document.title = $('title').html().replace(pageTitle, newTitle);
+              // If the CMS has already added title markup to the page, use it
+              $('h1').not('.crm-container h1').each(function() {
+                if (_.trim($(this).html()) === _.trim(pageTitle)) {
+                  $(this).html(newTitle);
+                  $el.hide();
+                }
+              });
+              pageTitle = newTitle;
+            });
+          }
+
+          scope.$watch(function() {return $el.html();}, update);
+        }
+      }
+    })
+
     .run(function($rootScope, $location) {
       /// Example: <button ng-click="goto('home')">Go home!</button>
       $rootScope.goto = function(path) {