busy directive

busy can be declared on any element as an attribute. It is primarily intended to be used on button elements.

Usage

Minimum:

 <button busy="string" />

Complete:

 <button busy="Loading..." busy-when-url="regex" busy-when-name="regex" busy-add-classes="string" busy-remove-classes="string" busy-disabled="bool" not-busy-when-url="regex" not-busy-when-name="regex" not-busy-add-classes="string" not-busy-remove-classes="string" not-busy-disabled="bool" />

By default, the directive will transition to busy when any busy.begin event is received, and then return to not busy once a busy.end event with remaining:0 event is received. You can make each directive only respond to specific events by using the URL or name to filter.

You can also make it become busy with one filter and not busy with a different one. If you want the same filter to both activate and deactivate the busy state, make sure the busy-when- and not-busy-when- attributes are the same.

Matching URLs and Names

Starting with version 0.2.0, busy-when-url, busy-when-name, not-busy-when-url, and not-busy-when-name attributes are considered regex patterns. This lets you simplify your configuration as well as let a single button respond to a multitude of URLs or named requests.

For example, let's assume your app regularly makes calls to a REST service that has a root path of /api. Let's also consider you have two (or more) REST resources, things and people. This means your app may need to issue a variety of requests to URLs under /api/things and /api/people. While you could just configure your busy button with busy-when-url="/api/things", this is more verbose than we'd like. It also creates a problem when the URL has variable components, for example /api/things/1 or /api/things/3432. Therefore, it makes sense to use a pattern to match URLs that trigger your busy button. In this example, using busy-when-url="/api/things" will match all requests that contain /api/things. Any valid regex will do, but simpler is better. You could just specify busy-when-url="/api" to match any request to an /api URL. You get the picture, right?

HTML Busy Message

If you want to use HTML in the busy message, you will need to either assign the busy attribute value from a scope item, or use the busy-message directive. busy-message is dependent on busy.

 <button busy>
     <busy-message>I am <em>busy</em> and displaying <strong>HTML</strong></busy-message>
     Click me
 </button> 

Attributes

• busy: The text to display when busy.begin is triggered and the request matches the filter. Use the busy-message directive within the element if you want the message to contain HTML.
• busy-when-url: A pattern to match the URL of the requests that trigger the busy behavior.
• busy-when-name: A pattern to match the name of the requests that trigger the busy behavior.
• busy-add-classes: A space-delimited string containing class names that should be added to the element when busy.
• busy-remove-classes: A space-delimited string containing class names that should be removed from the element when busy.
• busy-disabled (default is true): Whether or not the element should be disabled when busy.
• not-busy-when-url: A pattern to match the URL of the requests that return to the not busy state.
• not-busy-when-name: A pattern to match the name of the requests that return to the not busy state.
• not-busy-add-classes: A space-delimited string containing class names that should be added to the element when not busy.
• not-busy-remove-classes: A space-delimited string containing class names that should be removed from the element when not busy.
• not-busy-disabled (default is false): Whether or not the element should be disabled when not busy.