Skip to content
This repository has been archived by the owner on May 4, 2022. It is now read-only.

Reflect page title in document title #679

Merged
merged 30 commits into from
Feb 1, 2018

Conversation

apetro
Copy link
Contributor

@apetro apetro commented Jan 25, 2018

Purpose:

  • Set the document title to values describing the location in a uPortal-app-framework application as the user navigates within the application, thereby enabling improving usability generally and fulfilling WCAG2: 2.4.2 specifically (Page Titled: Web pages have titles that describe topic or purpose. (Level A)).

Done:

  • Adds title computation to mainService, implementing our (goofy?) "rule" about page naming, e.g. PageName | AppName | PortalName, with oodles of failing gracefully, and unit testing.
  • Refactors title setting in PortalMainController, relying upon mainService to compute the title and only gathering the inputs and doing the view (Document) modification in the controller layer. This continues to mutate document title on theme change, since theme change can mean a change in portal name. Unit tests the initial document title setting.
  • Adds title setting in AppHeaderOptionsController, with unit test.
  • In app-header directive calls the title setting in AppHeaderOptionsController to set the document title reflecting the title in the app header, which in some contexts corresponds to what the user would regard as the "page title" (and failing that, at least reflects the name of the app).

app-header-sets-page-title

Deferred:

  • Unit test the PortalMainController reacting to theme change by resetting document title. (This changeset didn't introduce this feature and hasn't so far as I can tell broken it.)
  • Unit test app-header directive (didn't get to figuring out how to test directives and that directive is moribund.)
  • Maybe do something less hacky than set the document title as the side effect of a div. (There's gotta be a more idiomatic way for a directive to call a controller function on rendering.)
  • Reconcile with parallel efforts to eliminate the app-header directive ( WIP: Remove app header #682 ). Will have to face down what that bigger change means for setting the Document title in the course of that bigger change.

Resolves #654 .


Contributor License Agreement adherence:

Splits single variable to one for building up the eventual window title and the other for the name of the portal, which may be a subset of the eventual window title.
setTitle() doesn't need to consider whether isWeb,
all that matters is whether the app title is redundant with the name of the portal from the theme.
Arguably since the true branch here is the exception rather than the rule it should be second in the conditional, but seems more important to remove the ! in the condition to reduce cognitive load in understanding the condition.
setTitle() doesn't just need there to be an active theme, it needs that theme to have a .title
Fall back on local name of app as entire window title.
Edit for brevity.
Prefer "for example" over "e.g.".
Makes setTitle() more clearly read as the algorithm it is implementing.
}

// if there's a page name not redundant with the app name, prepend it.
if (pageTitle && pageTitle !== '' && pageTitle !== appTitle) {
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

if (pageTitle && pageTitle !== appTitle) { Should be enough, check the If() tab here: https://dorey.github.io/JavaScript-Equality-Table/

var appTitle = ''; // the name of the app

if ($rootScope.portal && $rootScope.portal.theme &&
$rootScope.portal.theme.title) {
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

if we want to do something with the theme title, we should pass it in via parameters. $rootScope or even $scope shouldn't bleed out to services

Order the tests in the mainService setTitle spec to
match the order of examples in the setTitle function doc
Use test description to document the bigger picture of each test rather than literally how it tests it.
Match more literally what the test cases test with the examples given in the function doc.
Actually touch the document.title (view) from Controller.
Compute the desired title (implement the rule) in the Service.
Hacky "solution", with a no-content div using evaluation of the value of a made-up attribute to call the AppHeaderOptionsController to set the title.
@apetro apetro changed the title WIP: Dynamic page titles Reflect page title in document title Jan 30, 2018
@@ -33,6 +33,26 @@ define(['angular', 'require'], function(angular, require) {
layoutMode: 'list', // other option is 'widgets
};

/**
* Set Document title.
*/
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I see that we call updateTitle with no param later in this file. Maybe a comment on what happens when no param is called? What happens with the parameter?

* Set Document title.
* Asks mainService what the document title ought to be and
* sets the document title to that value.
* @param {string} pageTitle - Optional, name of specific page viewed.
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

🎨 jsDoc syntax for optional is

/** @param {string} [pageTitle] - name of specific page viewed

reference: http://usejsdoc.org/tags-param.html#optional-parameters-and-default-values

@apetro apetro merged commit 0d55055 into uPortal-Attic:master Feb 1, 2018
@apetro apetro deleted the page-title-takes-string branch February 1, 2018 17:52
@apetro
Copy link
Contributor Author

apetro commented Feb 1, 2018

This framework change seems to have worked out well in uPortal-home with zero change in that product: most pages use app-header with a label describing the page and so most pages now have a sensible Document title.

title-the-pages

Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

6 participants