From 977e1f3c2e7b7b2e1eb4ba81e07f15d660b04e08 Mon Sep 17 00:00:00 2001 From: Edward Opare-Aryee Date: Fri, 14 Aug 2015 11:58:25 +0100 Subject: [PATCH 1/2] add option to disable title update on route changes --- app/js/title.js | 46 +++++++++++++++++++++++++++---------- tests/unit/title.js | 55 ++++++++++++++++++++++++++++++++++++++++++++- 2 files changed, 88 insertions(+), 13 deletions(-) diff --git a/app/js/title.js b/app/js/title.js index 34ba7ef..8d80733 100644 --- a/app/js/title.js +++ b/app/js/title.js @@ -72,6 +72,9 @@ angular.module("sn.title", []) function ($rootScope, snTitle, EVENTS, ROUTE_CHANGE_ERROR_TITLE) { return { restrict: "E", + scope: { + updateOnPageChange: "=" + }, link: function ($scope, $element) { /** @@ -87,9 +90,19 @@ angular.module("sn.title", []) "My Site Name" */ var siteTitle = - snTitle.getSiteTitle() && snTitle.getSiteTitle().length > 0 ? - snTitle.getSiteTitle() : - ($element.html().length > 0 ? $element.html() : undefined) ; + (snTitle.getSiteTitle() && snTitle.getSiteTitle().length > 0) ? + snTitle.getSiteTitle() : + ($element.html().length > 0 ? $element.html() : undefined) ; + + /** + * If true will update the page title on every route change. + * This is useful if updating the page title manually to disable + * updates on route change. + * @property updateOnPageChange + * @type {Boolean} + * @default true + */ + var updateOnPageChange = ($scope.updateOnPageChange === false) ? false : true; /** * Update the content of the title element to the value @@ -123,13 +136,16 @@ angular.module("sn.title", []) */ var onRouteChangeSuccess = function onRouteChangeSuccess($event, current){ - var pageTitle = null; + if ( updateOnPageChange ) { - if (current && current.$$route && current.$$route.title){ - pageTitle = current.$$route.title; - } + var pageTitle = null; + + if (current && current.$$route && current.$$route.title){ + pageTitle = current.$$route.title; + } - setTitle($event, pageTitle); + setTitle($event, pageTitle); + } }; /** @@ -139,11 +155,17 @@ angular.module("sn.title", []) * @method onRouteChangeError */ var onRouteChangeError = function onRouteChangeError(){ - if (siteTitle){ - $element.html(ROUTE_CHANGE_ERROR_TITLE + " - " + siteTitle); - } else { - $element.html(ROUTE_CHANGE_ERROR_TITLE); + + if ( updateOnPageChange ) { + + if (siteTitle){ + $element.html(ROUTE_CHANGE_ERROR_TITLE + " - " + siteTitle); + } else { + $element.html(ROUTE_CHANGE_ERROR_TITLE); + } + } + }; $rootScope.$on(EVENTS.SET_TITLE, setTitle); diff --git a/tests/unit/title.js b/tests/unit/title.js index 72c9db2..a8f23cc 100644 --- a/tests/unit/title.js +++ b/tests/unit/title.js @@ -1,7 +1,7 @@ "use strict"; describe("sn.title:title directive", function() { - var element, $scope, $rootScope, errorText; + var element, $scope, $rootScope, errorText, snTitle; beforeEach(module("sn.title")); @@ -81,6 +81,59 @@ describe("sn.title:title directive", function() { }); + describe("Update on page change option disabled", function() { + + beforeEach(inject(function (_$rootScope_, $compile, $injector) { + $rootScope = _$rootScope_; + spyOn($rootScope, "$broadcast").and.callThrough(); + + $scope = $rootScope.$new(); + + snTitle = $injector.get("snTitle"); + + element = "My Site Name"; + + element = $compile(element)($scope); + $scope.$digest(); + + })); + + it("should render directive with correct title text", function(){ + + snTitle.setPageTitle("My custom title"); + expect($scope.$broadcast).toHaveBeenCalled(); + expect(element.html()).toEqual("My custom title - My Site Name"); + + $rootScope.$broadcast("$routeChangeSuccess", { + $$route: { + title: "foo" + } + }) + expect(element.html()).toEqual("My custom title - My Site Name"); + + $rootScope.$broadcast("$routeChangeSuccess", { + $$route: { + title: undefined + } + }) + expect(element.html()).toEqual("My custom title - My Site Name"); + }); + + it("should render directive with correct title text on route change error", function(){ + + snTitle.setPageTitle("My custom title"); + expect($scope.$broadcast).toHaveBeenCalled(); + expect(element.html()).toEqual("My custom title - My Site Name"); + + $rootScope.$broadcast("$routeChangeError"); + expect(element.html()).toEqual("My custom title - My Site Name"); + + $rootScope.$broadcast("$routeChangeSuccess"); + expect(element.html()).toEqual("My custom title - My Site Name"); + }); + + }); + }); describe("sn.title:snTitle service", function() { From 2d47514d4766f40888c6d171a9ec9a5c4fd943d0 Mon Sep 17 00:00:00 2001 From: Edward Opare-Aryee Date: Fri, 14 Aug 2015 12:44:34 +0100 Subject: [PATCH 2/2] update README.md --- README.md | 7 +++++++ 1 file changed, 7 insertions(+) diff --git a/README.md b/README.md index a56b86d..271a62f 100644 --- a/README.md +++ b/README.md @@ -82,6 +82,13 @@ angular.module("myApp", ["sn.title"]) ]) ``` +If you do not require the title to be updated on each route change then you can +disable this functionaility by setting the `update-on-page-change` attribute to `false`: + +```html +My Site Name +``` + This project structure is based on the [angular-seed](https://github.com/angular/angular-seed) application skeleton for a typical [AngularJS](http://angularjs.org/) web app. The project is preconfigured to install the Angular framework and a bunch of development and testing tools for instant web development gratification.