Blacks out the viewport while other components are being displayed.
The blackout is a special kind of component in which a single instance should only exist. The implementation behind this is for situations where multiple components need to open a blackout at the same time (multiple modals, etc), but not display multiple overlapping blackout elements. A single blackout instance solves this problem by recording a count of how many times it has been opened, and decreases that count each time it is closed. The blackout element is shown on the 1st count, and hidden once the count reaches 0.
The blackout instance can be retrieved using the instance() method.
var blackout = Toolkit.Blackout.instance();
blackout.show();| Variable | Default | Description |
|---|---|---|
| $blackout-class | .blackout | CSS class name for the blackout element. |
| $blackout-opacity | 0.85 | The alpha transparency for the blackout element. |
| $blackout-transition | .3s | The transition time for fading in and out. |
| $blackout-zindex | 600 | The z-index for the blackout element. |
Since the blackout is a singleton, options will need to be set globally.
| Option | Type | Default | Description |
|---|---|---|---|
| loaderTemplate | string |
<div class="loader bar-wave"> <span></span><span></span><span></span><span></span><span></span> <div class="loader-message" data-loader-message></div> </div> |
The loader markup to be inserted into the blackout. |
| showLoading | bool | true | If true, will insert Toolkit.messages.loading into the [data-loader-message] element. |
| template | string | <div class="blackout"></div> | The blackout markup. |
| templateFrom | string | #toolkit-blackout-1 | The ID of an element to use as the template. |
Inherits all events from the parent Component.
| Event | Arguments | Description |
|---|---|---|
| hiding | Triggered before the blackout is hidden. | |
| hidden | bool:hidden |
Triggered after the blackout is hidden (may not actually conceal it).
The hidden argument determines when the blackout is visually hidden,
instead of simply decreasing its display count.
|
| showing | Triggered before the blackout is shown. | |
| shown | bool:shown |
Triggered after the blackout is shown (may not actually reveal it).
The shown argument determines when the blackout is visually shown,
instead of simply increasing its display count.
|
Inherits all properties from the parent Component.
| Property | Type | Description | Found With |
|---|---|---|---|
| count | int | A count of many times the blackout has been opened by components. Determines whether to show or hide the element. | |
| loader | element | The loading animation element. | |
| message | element | The loading message element located within the loader element. | [data-loader-message] |
Inherits all methods from the parent Component.
| Method | Description |
|---|---|
| hideLoader() | Hide the loader element. |
| showLoader() | Show the loader element. |