| Warning |
|---|
This page has not yet been updated to reflect the latest API changes. |
| Section |
|---|
| Column |
|---|
| Progress OverviewThe Infusion Progress component provides a usable and accessible linear progress display for use on its own or with other Infusion components. It was originally designed for the Infusion Uploader but was built to be highly flexible -- customizable for use in any context. It has a very simple API but achieves its flexibility through a number of configuration options which at first may not seem intuitive. Progress does not currently come with a default presentation. We hope that through our design examples you can come up with your own designs that integrate well with your application or component. Infusion Progress is currently used in the Uploader and in the Fluid Project wiki to provide component progress indicators. The Progress component provides the option to the integrator to switch between aria-valuenow and aria-valuetext. See the Options description below for more information. |
| Column |
|---|
| Panel |
|---|
| borderColor | #321137 |
|---|
| bgColor | #fff |
|---|
| titleBGColor | #aab597 |
|---|
| borderStyle | solid |
|---|
| title | Status | borderStyle | solid |
|---|
| This component is in Preview status |
| Panel |
|---|
| borderColor | #566b30 |
|---|
| bgColor | #fff |
|---|
| titleBGColor | #D3E3C4 |
|---|
| borderStyle | solid |
|---|
| title | On This Page |
|---|
| borderStyle | solid |
|---|
| |
| Panel |
|---|
| borderColor | #321137 |
|---|
| bgColor | #fff |
|---|
| titleBGColor | #c1b7c3 |
|---|
| borderStyle | solid |
|---|
| title | See Also |
|---|
| borderStyle | solid |
|---|
| |
| Panel |
|---|
| borderColor | #321137 |
|---|
| bgColor | #fff |
|---|
| titleBGColor | #cccccc |
|---|
| borderStyle | solid |
|---|
| title | Still need help? | borderStyle | solid |
|---|
| Join the infusion-users mailing list and ask your questions there. |
|
|
...
Returns: The Progress component object.
Note: the initial state of a progress element is assumed to be hidden with the minimum amount of progress.
...
Method | Description | Parameters |
|---|
show(animation)
| Shows the element defined by the displayElement selector using either the default showAnimation object parameters or an animation passed in. | animation: see below the description of animate object used in the showAnimation option.
|
hide(delay, animation)
| Hides the element defined by the displayElement selector using either the default hideAnimation object parameters or an animation passed in | delay: see below the description of the delay option
animation: see below the description of animate object used in the hideAnimation option
|
update(percentage, labelValue, animationForShow)
| Updates the indicator element with a new percentage complete, updates the visible label, and ariaElement, shows the displayElement if it is currently hidden using either the default showAnimation object parameters or an animation passed in. | percentage: an integer value between 0 and 100 indicating the current progress (numbers greater than 100 are interpreted as 100)
labelValue: a string to display in the label element
animationForShow: see below the description of animate object used in the showAnimation option.
|
refreshView()
| Resets the position and size of the indicator element based on the current size and position of the progressBar element.
Useful for liquid layouts or events that change the location or size of the progressBar. | none |
...
Name | Description | Values | Default |
|---|
selectors
| Javascript object containing selectors for various fragments of the Progress markup | The object must contain a subset of the following keys:
displayElement
progressBar
indicator
label
ariaElement
See selectors below for requirement details | | Code Block |
|---|
| selectors: {
displayElement: ".flc-progress",
progressBar: ".flc-progress-bar",
indicator: ".flc-progress-indicator",
label: ".flc-progress-label",
ariaElement: ".flc-progress-bar"
}
|
See Selectors below for requirement details |
strings
| The strings that will be used by the component. This is where localization is handled
ariaBusyText
String to inject into the ariaElement during update() while the percentage is less than 100%.
The %percentComplete token is replaced with a number indicating the current percent complete.
If ariaBusyText is provided, the aria-valuetext attribute will be updated using this test. Otherwise, the value of the aria-valuenow attribute will be used for aria-valuetext.
ariaDoneText
String to inject into the ariaElement during update() when the percentage complete is 100%. | The object must contain a subset of the following keys:
ariaBusyText
ariaDoneText | | Code Block |
|---|
| strings: {
ariaBusyText: "Progress is %percentComplete percent complete",
ariaDoneText: "Progress is complete."
}
|
|
showAnimation
| JavaScript object that defines the default animation for displaying the Progress displayElement.
The default showAnimation can be overridden at run-time by passing an animation object in with the progress.show() or progress.update() methods. | The structure of the object mirrors and gets mapped to the parameters of jQuery's animate method.
NOTE: The callback property is deprecated in v1.3 | | Code Block |
|---|
| showAnimation: {
params: {
opacity: "show"
},
duration: "slow",
callback: null
}, // equivalent of $().fadeIn("slow")
|
|
hideAnimation
| JavaScript object that defines the default animation for hiding the Progress displayElement.
The default hideAnimation can be overridden at run-time by passing an animation object in with the progress.hide() method. | The structure of the object mirrors and gets mapped to the parameters of jQuery's animate method.
NOTE: The callback property is deprecated in v1.3 | | Code Block |
|---|
| hideAnimation: {
params: {
opacity: "hide"
},
duration: "slow",
callback: null
}, // equivalent of $().fadeOut("slow")
|
|
listeners
| JavaScript object containing listeners to be attached to the supported events. | Keys in the object are event names, values are functions or arrays of functions. | See Supported Events for more information. |
minWidth
| Integer which specifies the minimum width for the progress indicator element | pixels | |
delay
| delay before hiding the progress after the Progress.hide() method.
a delay allows the user to register the completion of progress before hiding the progress bar. | millies (milliseconds) | |
speed
| Integer representing the speed for the Progress animations.
The default is very fast because you want the animation to keep up with the actual speed of the action. | | |
animate
| String indicating which directions of progress get animated.
In most cases you only want to animate forward. | "forward", "backward", and "both". Any other value is interpreted to mean don't animate at all | | Code Block |
|---|
| animate: "forward"
|
|
initallyHiddeninitiallyHidden
| Boolean indicating whether to hide the displayElement when initializing Progress. | boolean | | Code Block |
|---|
| initiallyHidden: true
|
|
updatePosition | Deprecated:
Replaced by the refreshView() method | boolean | | Code Block |
|---|
| updatePosition: false |
|
ariaBusyText
| Moved in v1.3:
Moved into strings block | string | | Code Block |
|---|
javascript | javascript |
ariaBusyText: "Progress is %percentComplete percent complete"
|
ariaDoneText
| Moved in v1.3:
Moved into strings block | string | | Code Block |
|---|
javascript | javascript | ariaDoneText: "Progress is complete." |
...
Selectors
Selectors are used to indicate which elements in DOM should behave as the different Progress elements.
The value for the option is itself a Javascript object containing name/value pairs:
...