Skip to content
This repository has been archived by the owner on Sep 19, 2024. It is now read-only.
Mike Grabski edited this page Nov 5, 2015 · 4 revisions

New in v1.0.0

Title keeps track of the document's title and allows it to change. It also has a more specific feature, which is to display an idle warning message or timed out message in the title. The text of the aforementioned messages can be customized dynamically.

TitleProvider

The title functionality can be programmatically disabled at configuration time, when your application starts up.

 .config(['TitleProvider', function(TitleProvider) {
        TitleProvider.enabled(false); // it is enabled by default
     }]);

title directive

The title directive works in concert with this service. title monitors the IdleWarn event and displays the idle warning message, including the countdown value, as the title automatically. It will also monitor the IdleTimeout event and display the timed out message. Finally, when IdleEnd event is detected, it will attempt to restore the title back to the original.

Usage

The intent is that this directive is opt-out. It should be activated if you simply have a title element on your document. You can also apply it on another arbitrary element as an attribute, e.g. <div title>...</div>, if you wish.

If you want to opt-out of this directive, add the attribute idle-disabled="true" to your title element.

Caveat

If you are using AngularJs 1.2, you'll need to add an extra title attribute to your title element (e.g. <title title="">Hello, World!</title>). You do not need this if you are using AngularJs 1.3.

Title Methods

  • setEnabled(bool:enabled): Allows the title functionality to be enabled or disabled on the fly.
  • isEnabled():bool: Returns whether or not the title functionality has been enabled.
  • original(string:val): If val is specified, Title will store val as the "original" title of the document. If val is omitted, the "original" title value that has been previously set is returned. Tracking the original title is important when restoring the title after displaying, for example, the idle warning message. Normally, you will not need to use this unless you want to programmatically set the original title to a value different than what's declared on the document.
  • value(string:val): If val is specified, changes the actual title of the document. If it is not specified, the value of the current document title is returned.
  • store(bool:overwrite): If overwrite is false or unspecified, updates the "original" title with the current document title if it has not already been stored. If overwrite is true, the current document title is stored regardless.
  • restore(): If the original title was stored or set previously, sets the title to the original value.
  • idleMessage(string:val): Gets or sets (if val is omitted) the text to use as the message displayed when the user is idle.
  • timedOutMessage(string:val): Gets or sets (if val is omitted) the text to use as the message displayed when the user times out.
  • setAsIdle(int:countdown): Stores the original title if it hasn't been already, determines the number minutes, seconds, and total seconds from countdown, and displays the idleMessage with the aforementioned values interpolated.
  • setAsTimedOut(): Stores the original title if it hasn't been already, and displays the timedOutMessage.

Customizing the Idle Warning Message

The idle message can be anything you want. There are three special variables that you can insert in your string, and they will be interpolated with their actual values:

  • {{minutes}}: The number of whole minutes left.
  • {{seconds}}: The remainder of whole seconds left.
  • {{totalSeconds}}: The total number of seconds.

For example, a message of You have {{minutes}} minutes and {{seconds}} seconds ({{totalSeconds}} total seconds) until your session expires! will result in You have 1 minutes and 5 seconds (65 total seconds) until your session expires! if 65 is the countdown value.